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

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

吹き出しデザインの見出し

　では早速、さきほどの仕組みを利用して、サンプル7のような吹き出しデザインの見出しを作ってみましょう。まず、左右のマージンに-10pxを指定して、#wrapperから、左右に10pxずつはみ出させます。

　次に:after擬似要素を使って、要素の直後に空の内容を挿入します。:after擬似要素で作ったこの空の内容に、10ピクセルのボーダーを付け、上ボーダーのみに背景色と同じ色を指定すると、吹き出し風の下向きの三角形ができます。

図10：上ボーダーのみ色をつけて下向きの三角形を描く

　後は、この三角形をpositionレイアウトで配置します。このとき、#sample07にposition: relativeを指定し、次に、さきほどの三角形にposition:absoluteを指定することで、#sampleを基準として絶対配置することができます。続いて、leftやbottomプロパティで位置調整をして完成です。

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

#sample07 {
  margin: 0 -10px 40px -10px; /* 左右マージンに-10px */
  padding: 10px 20px;
  font-size: 130%;
  color: #333333;
  background-color: #FFCCCC;
  position: relative; /* 基準位置を指定 */
}
#sample07:after {
  content: ""; /* 空の内容を挿入 */
  position: absolute; /* 絶対位置へ配置 */
  left: 50px;
  bottom: -20px;
  height: 0;
  width: 0;
  border: 10px solid transparent;
  border-top-color: #FFCCCC; /* 上ボーダーのみ背景色と同じ色 */
}

図11：サンプル7（sample02.html）

箱型の見出し

　サンプル8のような箱型のデザインは、:before擬似要素で、要素の直前に内容を作成し、幅を指定したうえで、border-bottomのみに色をつけることで、台形を作っています。

　後は、さきほどと同じようにpositionレイアウトで、絶対配置して完成です。

図12：幅を指定し、下ボーダーのみ色をつけて台形を描く

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

#sample08 {
  margin: 0 -10px 30px -10px;
  padding: 10px 20px;
  font-size: 130%;
  color: #333333;
  background-color: #FFCCCC;
  position: relative;
}
#sample08:before{
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  width: 500px; /* 幅を指定 */
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: transparent;
  border-bottom-color: #FF9999; /* 下ボーダーのみ色をつける */
}

図13：サンプル8（sample02.html）