みなさん, Web サービスやブログを作る際に見出しのデザインに悩んだことはありませんか?
意外とこれが曲者で, Web デザインについての情報はたくさんありますが, 見出しについてはこれといった決定版ってのがないんですよねぇ.
今回は, CSS の border プロパティを使って見出しを装飾する方法を紹介します.
以前書いたエントリー『CSS の border-style 一覧』で紹介した
border-style
に加え border-color
や border-width
を活用することで簡単に見出しを装飾することができます.
色々なパターンの見出しを jsdo.it で作っておりますので,
実際に実行したり fork してイジったりして遊んでもらえると幸いです.
また, 超有名ブログの見出しについても少しまとめてみたので,
よかったら参考にしてみてください.

Read More
CSS3 と LESS でページ右上に表示するリボンを作ってみました.
jsdo.it を使って Step by Step で作りながら解説しています.
よかったら参考にしてください.

Read More
『CSS の border プロパティを使って見出しを装飾しよう』 第4弾! ラストです!!
私がよく参考にさせて頂いている有名ブログの見出しを並べてみました.
私が真似て作っているだけなので実際のコードとは異なる部分がありますのでご注意下さい.
やはり有名なブログだと, ごちゃごちゃした見出しではなく, 見やすさを重視したシンプルなものが多いですね.
なんかデザインについて色々言っちゃっていますが, 私はゲームプログラマであってWeb に関しては素人です.
なので, なんか言っちゃってんなぁ~程度に流してもらえれば幸いです.
※見出しで使用している画像は許可を頂いて使用しています. 本家サイトの許可無く転用しないようお願いします.

Read More
『CSS の border プロパティを使って見出しを装飾しよう』 第3弾!(第4弾まであります!!)
引き続き CSS の border プロパティを使って見出しを装飾する方法について紹介します.
ド派手な見出しです.
大見出しから中見出しを想定して作りました.
前回までの見出しとの違いは背景色を付けたり
上下左右をボーダーで囲ったりして見出しとしての役割を強調しています.
色については, 並べたときに見栄えするように hsl を使って色相を
60度ずつずらしていますが今回のエントリーとは無関係なので気にしないで下さい.

Read More
『CSS の border プロパティを使って見出しを装飾しよう』 第2弾!(第4弾まであります!!)
引き続き CSS の border プロパティを使って見出しを装飾する方法について紹介します.
ちょい派手な見出しです.
シンプルな見出しです. 大見出しから中見出しを想定して作りました.
色については, 並べたときに見栄えするように hsl を使って色相を
60度ずつずらしていますが今回のエントリーとは無関係なので気にしないで下さい.

Read More
『CSS の border プロパティを使って見出しを装飾しよう』 第1弾!(第4弾まであります!!)
CSS の border プロパティを使って見出しを装飾する方法について紹介します.
シンプルな見出しです. 中見出しから小見出しを想定して作りました.
CSS もシンプルなので簡単に使えます.
色については, 並べたときに見栄えするように hsl を使って色相を
60度ずつずらしていますが今回のエントリーとは無関係なので気にしないで下さい.

Read More