みなさん, Web サービスやブログを作る際に見出しのデザインに悩んだことはありませんか?
意外とこれが曲者で, Web デザインについての情報はたくさんありますが, 見出しについてはこれといった決定版ってのがないんですよねぇ.
今回は, CSS の border プロパティを使って見出しを装飾する方法を紹介します.
以前書いたエントリー『CSS の border-style 一覧』で紹介した
border-style に加え border-color や border-width を活用することで簡単に見出しを装飾することができます.
色々なパターンの見出しを jsdo.it で作っておりますので, 実際に実行したり fork してイジったりして遊んでもらえると幸いです.
また, 超有名ブログの見出しについても少しまとめてみたので, よかったら参考にしてみてください.
CSS3 と LESS でページ右上に表示するリボンを作ってみました.
jsdo.it を使って Step by Step で作りながら解説しています. よかったら参考にしてください.
『CSS の border プロパティを使って見出しを装飾しよう』 第４弾! ラストです!!
私がよく参考にさせて頂いている有名ブログの見出しを並べてみました. 私が真似て作っているだけなので実際のコードとは異なる部分がありますのでご注意下さい.
やはり有名なブログだと, ごちゃごちゃした見出しではなく, 見やすさを重視したシンプルなものが多いですね.
なんかデザインについて色々言っちゃっていますが, 私はゲームプログラマであってWeb に関しては素人です. なので, なんか言っちゃってんなぁ～程度に流してもらえれば幸いです.
※見出しで使用している画像は許可を頂いて使用しています. 本家サイトの許可無く転用しないようお願いします.
『CSS の border プロパティを使って見出しを装飾しよう』 第３弾!(第４弾まであります!!)
引き続き CSS の border プロパティを使って見出しを装飾する方法について紹介します.
ド派手な見出しです. 大見出しから中見出しを想定して作りました.
前回までの見出しとの違いは背景色を付けたり 上下左右をボーダーで囲ったりして見出しとしての役割を強調しています.
色については, 並べたときに見栄えするように hsl を使って色相を 60度ずつずらしていますが今回のエントリーとは無関係なので気にしないで下さい.
『CSS の border プロパティを使って見出しを装飾しよう』 第２弾!(第４弾まであります!!)
引き続き CSS の border プロパティを使って見出しを装飾する方法について紹介します.
ちょい派手な見出しです. シンプルな見出しです. 大見出しから中見出しを想定して作りました.
色については, 並べたときに見栄えするように hsl を使って色相を 60度ずつずらしていますが今回のエントリーとは無関係なので気にしないで下さい.
『CSS の border プロパティを使って見出しを装飾しよう』 第１弾!(第４弾まであります!!)
CSS の border プロパティを使って見出しを装飾する方法について紹介します.
シンプルな見出しです. 中見出しから小見出しを想定して作りました. CSS もシンプルなので簡単に使えます.
色については, 並べたときに見栄えするように hsl を使って色相を 60度ずつずらしていますが今回のエントリーとは無関係なので気にしないで下さい.