デザインサンプルで学ぶCSSによるスタイリング～「見出し」編

CSSで作るWeb用パーツ（1）

backgroundプロパティを使った見出しのCSSデザイン

　見出しに背景色を付けても、ページを視覚的に区切ることができます。

見出しに背景色を敷く

　サンプル4では、background-colorプロパティで、淡いピンク（#FFCCCC）の背景色をつけてみました。サンプル5では、背景色を濃くし、文字色を白にしています。背景に色を敷く場合には、文字色と背景色に明度差を付け、視認性を確保することが大切です。

サンプル4、サンプル5／HTML（sample01.html）

<h1 id="sample04">h1要素の見出しサンプル4</h1>
<h1 id="sample05">h1要素の見出しサンプル5</h1>

サンプル4、サンプル5／CSS（sample01.html）

#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：サンプル4、サンプル5（sample01.html）

見出しを角丸にする

　サンプル6では、CSS3のborder-radiusプロパティを使って、コーナーを角丸にしています。border-radiusプロパティは、ボックスの4つの角を一括で丸くするプロパティです。画像を使わずに角丸表現が可能で、Internet Explorer 9からサポートされました。未対応ブラウザの場合は、角丸にはなりませんが、ボックスが表示されないわけではないので、最近よく使われるようになりました。

　ここでは半径10pxの角丸を指定していますが、そのままだとテキストが左に寄り過ぎて見えるため、左パディングを20px指定しています。

サンプル6／HTML（sample01.html）

<h1 id="sample06">h1要素の見出しサンプル5</h1>

サンプル6／CSS（sample01.html）

#sample06{
  background-color: #CC3366;
  color: #FFFFFF;
  border-radius: 10px; /* 4つのコーナーを半径10pxの角丸に */
  padding-left: 20px; /* 左パディングを20px */
}

図7：サンプル6（sample01.html）

擬似要素で見出しを立体的に表現をする

　続いて、図8のような、CSSの「:before」や「:after」などの擬似要素を使った見出しの装飾方法を紹介します。

図8：擬似要素による見出しのデザインサンプル（sample02.html）

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の緑の台形のように、ボーダーに幅を指定すると、台形を描くことができます。

図9：borderプロパティで三角形や台形を作る仕組み

　以降のサンプルで使用する共通のHTMLは次のとおりです。見出しがボックスからはみ出している形にしたいので、ID名wrapperのdiv要素で囲み、bodyの背景色に薄いグレー、#wrapperの背景色に白を指定しています。

サンプル7～10／HTML（sample02.html）

<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>

サンプル7～10／CSS（sample02.html）

body {
  background-color: #EEEEEE; /* 背景色を薄いグレー */
}
#wrapper {
  width: 500px;
  margin: 0 auto;
  padding: 50px 0;
  background-color: #FFFFFF; /* 背景色を白 */
}