スタイルシートマニア

ホームページカスタマイズ Tips

CSSで見出しをデザイン(擬似クラス:first-letter)

ドロップキャップで使った:first-letter 擬似クラスを使って見出しをデザインしてみます。

#h2-headline02 {
      color: #600;
      border-bottom: 1px solid #600;
}

#h2-headline02:first-letter {
      font-size: 2em;
}
<h2 id="h2-headline02">CSSで見出しをデザイン(擬似クラス:first-letter)</h2>

CSSで見出しをデザイン(擬似クラス:first-letter)

first-letter擬似要素を使ったドロップキャップ

本文の一文字目を大きくして以後に続く文字を普通のサイズで表現するドロップキャップは雑誌などでよく使われる手法です。

CSSなら、first-letter擬似要素を使って一文字目にスタイルを適用させることができます。

.drop-box p:first-letter {
      font-size: 2em;
}
<div class="drop-box">
<p>CSS(Cascading Style Sheets)はWebサイトのレイアウトを指定する目的で生まれたスタイルシート言語です。このCSSが誕生する前はWebサイトはHTML言語(Hyper Text Markup Language)という言語だけで構成されていましたが、インターネットの普及により次々とリリースされるブラウザで独自にHTMLの要素や属性を拡張したりして、W3Cが意図しない方向へと進み始めたためにこのCSSが生まれたのです。</p>
</div>

CSS(Cascading Style Sheets)はWebサイトのレイアウトを指定する目的で生まれたスタイルシート言語です。このCSSが誕生する前はWebサイトはHTML言語(Hyper Text Markup Language)という言語だけで構成されていましたが、インターネットの普及により次々とリリースされるブラウザで独自にHTMLの要素や属性を拡張したりして、W3Cが意図しない方向へと進み始めたためにこのCSSが生まれたのです。