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

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

折れリボン風見出し

　サンプル9のような折れリボン風の見出しは、左下の三角形を:before擬似要素で、右下の三角形を:after擬似要素で作って実装しています。左下の三角形は:before擬似要素で作った空の要素に5px幅のボーダーを指定し、border-topとborder-rightのみ色をつけて直角三角形を作っています。

図14：border-topとborder-rightのみ色を付けて左下の直角三角形を描く

　同様に右下の三角形は、:after擬似要素で空の要素を作り、border-topとborder-leftのみ色をつけて直角三角形を作っています。後は、これまで同様positionレイアウトで微調整をするだけです。

サンプル9／CSS（sample02.html）

#sample09 {
  margin: 0 -10px 30px -10px;
  padding: 10px 20px;
  font-size: 130%;
  color: #333333;
  background-color: #FFCCCC;
  position: relative;
}
#sample09:before{
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent;
  border-top-color: #FF9999;
  border-right-color: #FF9999;
}
#sample09:after{
  content: "";
  position: absolute;
  right: 0;
  bottom: -10px;
  width: 0;
  height: 0;
  border-width: 5px;
  border-style: solid;
  border-color: transparent;
  border-top-color: #FF9999;
  border-left-color: #FF9999;
}

図15：サンプル9（sample02.html）

カットリボン

　サンプル10では、:after擬似要素で作った空の要素に、20px幅のボーダーを指定し、右ボーダーのみtransparent（透明）を指定して、リボンをカットしたような表現をしています。

図16：border-rightのみ透明にしてカットリボンを描く

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

/* サンプル10：カットリボン風デザインの見出し */
#sample10 {
  margin: 0 0 30px -10px;
  padding: 10px 20px;
  color: #333333;
  background-color: #FFCCCC;
  position: relative;
  font-size: 20px; /* 文字サイズを20px */
  line-height: 1; /* 行間を1 */
}
～中略～
#sample10:after {
  content: "";
  position: absolute;
  top: 0;
  right: -40px;
  height: 0;
  width: 0;
  border: 20px solid #FFCCCC;
  border-right-color: transparent;
}

図17：サンプル10（sample02.html）

　以上、borderで三角形を描く仕組みが分かってしまえば、アイデア次第で立体的で面白い表現が可能になります。いろいろと試してみてください。

まとめ

　本記事では、border関連プロパティやbackground関連プロパティ、擬似要素を使った、見出しのスタイリング方法を紹介しました。見出しだけではなく、いろいろなボックスに応用できるので、ぜひチャレンジしてみてください。

　次回は、リストでマークアップしたナビゲーションを、ボタン風にスタイリングしたり、横並びにスタイリングしたりする方法を紹介します。