スタイルシートマニア

first-letter擬似要素を使ったドロップキャップ | ホームページカスタマイズ Tips

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

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が生まれたのです。

Author:hideo
Comments:0

hideo

コメントを残す