backgroundプロパティを使った見出しのCSSデザイン
見出しに背景色を付けても、ページを視覚的に区切ることができます。
見出しに背景色を敷く
サンプル4では、background-colorプロパティで、淡いピンク（#FFCCCC）の背景色をつけてみました。サンプル5では、背景色を濃くし、文字色を白にしています。背景に色を敷く場合には、文字色と背景色に明度差を付け、視認性を確保することが大切です。
<h1 id="sample04">h1要素の見出しサンプル4</h1> <h1 id="sample05">h1要素の見出しサンプル5</h1>
#sample04{
border: 1px solid #CC3366;
border-left: 10px solid #CC3366;
background-color: #FFCCCC; /* 背景色を#FFCCCC */
}
#sample05{
border-left: 10px solid #FFCCCC;
background-color: #CC3366; /* 背景色を#CC3366 */
color: #FFFFFF; /* 文字色を#FFFFFF */
}
見出しを角丸にする
サンプル6では、CSS3のborder-radiusプロパティを使って、コーナーを角丸にしています。border-radiusプロパティは、ボックスの4つの角を一括で丸くするプロパティです。画像を使わずに角丸表現が可能で、Internet Explorer 9からサポートされました。未対応ブラウザの場合は、角丸にはなりませんが、ボックスが表示されないわけではないので、最近よく使われるようになりました。
ここでは半径10pxの角丸を指定していますが、そのままだとテキストが左に寄り過ぎて見えるため、左パディングを20px指定しています。
<h1 id="sample06">h1要素の見出しサンプル5</h1>
#sample06{
background-color: #CC3366;
color: #FFFFFF;
border-radius: 10px; /* 4つのコーナーを半径10pxの角丸に */
padding-left: 20px; /* 左パディングを20px */
}
擬似要素で見出しを立体的に表現をする
続いて、図8のような、CSSの「:before」や「:after」などの擬似要素を使った見出しの装飾方法を紹介します。
borderプロパティで三角形や四角形を描く仕組み
まず、borderプロパティで三角形を描く仕組みを理解しておきましょう。図9では、border-topにred、border-rightにblue、border-bottomにgreen、border-leftにyellowを指定しています。border-widthは50pxなので、四角形全体では100pxの高さ、幅になっています。
図9の赤の部分を使って下向きの三角形を作りたいときは、border-top以外のborder-colorをtransparent（透明）に指定します。また、図9の緑の台形のように、ボーダーに幅を指定すると、台形を描くことができます。
以降のサンプルで使用する共通のHTMLは次のとおりです。見出しがボックスからはみ出している形にしたいので、ID名wrapperのdiv要素で囲み、bodyの背景色に薄いグレー、#wrapperの背景色に白を指定しています。
<div id="wrapper"> <h1 id="sample07">h1要素の見出しサンプル7</h1> <h1 id="sample08">h1要素の見出しサンプル8</h1> <h1 id="sample09">h1要素の見出しサンプル9</h1> <h1 id="sample10">h1要素の見出しサンプル10</h1> </div>
body {
background-color: #EEEEEE; /* 背景色を薄いグレー */
}
#wrapper {
width: 500px;
margin: 0 auto;
padding: 50px 0;
background-color: #FFFFFF; /* 背景色を白 */
}
