画像を使用せずに見出しを装飾しよう

ここで使うborderプロパティは、四方向に線を引くことができます。デザイン面では重宝するプロパティで、工夫次第では画像を使用する事なく、デザイン性に優れた見出しをデザインすることができます。

例えばborder-leftプロパティのみ太くして、border-bottomプロパティを細めの線で指定すれば、ちょっとした見出しのデザインができますし、backgroundプロパティで背景色をつけたり、画像を指定することでさらにデザインのバリエーションが広がるでしょう。

画像だけを使用するよりは、ＣＳＳの値を変更するだけでデザイン自体を変更でき、画像事態を編集する必要がないので、用途に応じて使い分けられるので、運用性にも優れていると言えます。

デザインサンプル

<midasi1>画像を使用せずに見出しを装飾しよう

<midasi2>画像を使用せずに見出しを装飾しよう

<midasi3><midasi4>画像を使用せずに見出しを装飾しよう

サンプルCSSコード

.midasi1 {
　　padding: 4px 0 4px 10px;
　　border-top: solid 3px #00cc00;
　　border-bottom: solid 3px #00cc00;
　　background: #009900;
　　color: #FFF;
　　font-weight: bold;
　　font-size: 15px; padding: 5px;
　　width: 500px;
}

.midasi2 {
　　border-left: solid 5px #006600;
　　border-bottom: solid 2px #009900;
　　width: 500px;
　　color: #333;
　　font-weight: bold;
　　font-size: 15px; padding: 5px;
}

.midasi3 {
　　border: solid 1px #660000;
　　width: 500px;
}

.midasi4 {
　　margin: 2px;
　　padding: 5px;
　　border: solid 1px #990000;
　　border-left: solid 5px #990000;
　　background: #eeeeee;
　　width: auto;
　　font-size: 15px; padding: 5px;
　　color: #333;
　　font-weight: bold;
}

スタイルシートデザインガイド