みなさん, Web サービスやブログを作る際に見出しのデザインに悩んだことはありませんか?

意外とこれが曲者で, Web デザインについての情報はたくさんありますが, 見出しについてはこれといった決定版ってのがないんですよねぇ.

今回は, CSS の border プロパティを使って見出しを装飾する方法を紹介します.

以前書いたエントリー『CSS の border-style 一覧』で紹介した border-style に加え border-color や border-width を活用することで簡単に見出しを装飾することができます.

色々なパターンの見出しを作っておりますので, 実際に実行したり fork してイジったりして遊んでもらえると幸いです.

また, 超有名ブログの見出しについても少しまとめてみたので, よかったら参考にしてみてください.

シンプルな見出し

シンプルな見出しです. 中見出しから小見出しを想定して作りました. CSS もシンプルなので簡単に使えます.

色については, 並べたときに見栄えするように hsl を使って色相を 60度ずつずらしていますが今回のエントリーとは無関係なので気にしないで下さい.

ちょい派手な見出し

ちょい派手な見出しです. シンプルな見出しです. 大見出しから中見出しを想定して作りました.

薄く背景色を付けたり, 上下もしくは左右にラインを引いたりしています.

ド派手な見出し

ド派手な見出しです. 大見出しから中見出しを想定して作りました.

濃いめの背景色を付けて上下左右を囲うようにボーダーを指定しています.

超有名サイトの見出し

私がよく参考にさせて頂いている有名ブログの見出しを並べてみました. 私が真似て作っているだけなので実際のコードとは異なる部分がありますのでご注意下さい.

やはり有名なブログだと, ごちゃごちゃした見出しではなく, 見やすさを重視したシンプルなものが多いですね.