今回は、ブログなどで使えるHTMLとCSSを使った見出し装飾を紹介します。（気に入ったものがあればコピペどうぞ！）
wordpressとかCMSを使っていない場合、見出しのスタイル設定とか面倒だよね〜
そうなんですよね。wordpressなどのCMSを利用したブログの場合、テーマによっては装飾用のスタイルが充実していて、見出しや強調文字、ポイントなどの装飾には困らないことが多いですが、１から作成したブログサイトなどの場合、自分で一つ一つスタイルを設定する必要があり、最初にこれらの装飾スタイルをcssで作成するのは割と面倒です。
そんな時にも使えるスタイルを紹介しますので、是非参考にしてみてください！（※デフォルトでタグにスタイルが適用されていると下記スタイルと全く同じにならない事がありますので、新規クラスを指定するか、スタイルを外すなどお願いします。）
HTML/CSSでの見出し装飾
見出しと言えば、各ページのサブタイトルでもある部分なので、強調表示したいですよね。そんな時に使えるスタイルを紹介します。（※例ではとりあえず「h2」を使用して説明します）
枠線で囲った装飾
見出しのスタイルで最初に紹介する装飾は、枠線で囲うだけで文章とは区別ができて、シンプルな見出しに仕上がるものになります。サイト全体がシンプルで文章にもあまり装飾がされていないテーマのサイトにおすすめです。
border-left: 3px solid #fc0;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 15px;
font-size: 17px;
}
↑上記CSSをh2に適用させるとこんな感じの装飾が出来上がります。私が使用しているLIONMEDIAというテーマの見出しのパクリです笑
背景色を使った装飾
見出しのスタイルで次に紹介するのは、背景色を指定した装飾です。ただ背景色を指定してもつまらないので、今回はマット調のスタイルにしてみました。
padding: 3px 15px;
background-color: #fc0;
background-image: linear-gradient(to top right, #ffe991 0%, transparent 50%, #ffe991 50%, transparent 100%);
background-size: 12px 2px;
font-size: 20px;
font-weight: normal;
}
これは、グラデーションを作る時の「linear-gradient」を使った装飾になります。これを上手く使うと、グラデーションだけではなくストライプや上記のようなマット調など様々なアレンジができます。
下線と行頭文字を使った装飾
これが紹介した中で一番簡単な装飾です。行頭文字または「○」と下線（破線）を使用したスタイルです。
border-bottom: 2px dashed #FC0;
padding-bottom: 5px;
color: #fc0;
}
まとめ
今回はブログサイトなどで使えるHTML/CSSの装飾の紹介でした。
簡単な組み合わせでも割と凝った装飾も作れるので、皆さんも是非チャレンジしてみてください！
