デザインテストです!気になさらず

訪問を頂戴したお兄さん達には関係ないけど見出しをデザインしたいと言う話がありデザインする為にココのスペースを使っちゃいます!

CSSで設定するよ

スタイルシートでいくつか設定してみます。

クラスの指定で変わるよ

デザインを変えるためにはclassの指定が必要となります。

h2下ボーダー

class="hd_shita"

h3下ボーダー

h4下ボーダー

h2上下にボーダー

class="hd_shitaue"

h3上下にボーダー

h4上下にボーダー

h2左ボーダー

class="hd_hidarib"

h3左ボーダー

h4左ボーダー

h2左ボーダー × 下ボーダー

class="hd_hidarib_shitab"

h3左ボーダー × 下ボーダー

h4左ボーダー × 下ボーダー

h2左ボーダー × 下ボーダー(擬似要素使用)

class-"hd_hidarib_shitab_g"

h3左ボーダー × 下ボーダー(擬似要素使用)

h4左ボーダー × 下ボーダー(擬似要素使用)

h2ボーダーで囲む × アクセント

class="hd_b_a"

h3ボーダーで囲む × アクセント

h4ボーダーで囲む × アクセント

h2吹き出し #3

class="hd_hukidashi"

h3吹き出し #3

h4吹き出し #3

h2リボン #1

class="hd_ribon"

h3リボン #1

h4リボン #1

h2ストライプ

class="hd_sutoraipu"

h3ストライプ

h4ストライプ

h2グラデーション × ボーダー

class="hd_g_b"

h3グラデーション × ボーダー

h4グラデーション × ボーダー

今時のICONを使ってみる?

そうそう、最近の技術でiconを使うことができます。