さぁ!検索しよう!

背景画像は使いません。CSSでスタイリッシュな見出しをデザインする方法です。

DEMO

HTMLを書く

始めに以下のHTMLを書きます。

<h2><span>HTML</span></h2>

文字を更にspanで囲んでいます。このようにすることで、spanはインライン要素ですので、spanで囲まれた文字にだけスタイルを適用することができます。

CSSを書く

次に以下のCSSを書きます。

h2 {
  border-bottom: 3px solid #dfdfdf;
  color: #333;
  font-family: メイリオ;
  padding-bottom: 7px;
}

span {
  border-bottom: 3px solid #0E7AC4;
  padding: 7px;
}

見出しとspanのボーダーの幅とpaddingに同じ値を指定することで、2つのボーダーを重ねています。これによってDEMOのようなスタイリッシュな見出しが出来上がります。


以上で、CSSでスタイリッシュな見出しをデザインする方法を終わります。