見出しのデザイン ベスト5
土曜日, 8月 29th, 2009Webやブログのデザインを作るときに見出しをどのようなデザインにするか?で悩むことが最近は結構あったので、いくつか調べた結果の見出しデザインを5個ほど書き出しておきます。また、コードも合わせて掲載しておきますので、興味のあるデザインがございましたらご自由にお使い下さい。
囲み柄
これはかなりよく見かける見出し用のデザインではないでしょうか?
コード(CSS)
h*の*や、color、余白、線幅などの値は適宜置き換えてお使い下さい。
h* {
border: 1px solid #color;
border-left: 10px solid #color;
padding: 5px;
}
背景を斜線に
これもよく見かけますよね?作り方は簡単で、3*3サイズ程度の斜線柄の画像を準備して、それを縦横に繰り返せばOKです。
コード(CSS)
h* {
background-image: url( "url/to/image/file" );
background-repeat: repeat;
padding: 3px;
}
画像ファイル
少し大きいですが、画像ファイルの例がhttp://yamablo.com/wp-content/uploads/2009/08/shasen.pngにありますので確認してみてください。この画像をPhotoshopなどの画像編集ソフトを用いて、3px四方に切り取って使えば画像サイズを軽減させることができます。(このまま利用することも可能です)

![t ]E](http://www.affiliate-b.com/upload_image/984-1198556658-3.gif)