[css]first-line, first-letter擬似要素を使って、要素内の先頭1行/先頭1文字だけにスタイルを適用する方法

first-line擬似要素を使って、先頭1行だけ装飾をする方法

今回は、cssの擬似要素を使った文字装飾の記事になります。

意外と知られていないcssの擬似要素のひとつに、
::first-line
というものがあります。

こちらは文字通り、
「文字列の、最初の1行目だけ」
に影響を与えることができる擬似要素になります。
※なお、この擬似要素が使用できるのはブロックレベル要素のみになります。

first-line擬似要素の使い方

first-line擬似要素の使い方は、いたって簡単です。次の様に指定するだけです。
たとえば次のようなhtmlがあったとします。

<div class="card-container">
  <p class="card-text">
    Lorem ipsum dolor sit amet, <br />
    consectetur adipiscing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation
    commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat
    cupidatat non proident, sunt in culpa
    qui officia deserunt mollit anim id est laborum.
  </p>
</div>

↑この1行目にだけ、装飾を施したい。そんな場合、次のように指定すれば良いわけです。

.card-text::first-line {
  font-size: 1.25rem;
  line-height: 2;
}

これで、最初の1行目だけに装飾を施すことができます。
なお、このfirst-line擬似要素は、
受け付けるcssプロパティが限られており、marginやpaddingは受け付けません。
そのため、line-height を使用して、上下のスペーシングを適用しているという例になります。

first-letter擬似要素と組み合わせて、「ドロップキャップ」的な表現をしてみる

ドロップキャップ、という表現は
紙媒体のグラフィックデザインでもよく見かける表現です。
(ざっくり言うと、文章の最初の一文字だけを大きくして、ジャンプ率を上げて装飾する表現のことです。)

この「ドロップキャップ」を、上のセクションで書いたfirst-line擬似要素と、
first-letter擬似要素を組み合わせることで、cssだけで簡単に表現することができます。
具体的には、次のように書きます。

.card-text::first-line {
  font-size: 1.25rem;
  line-height: 2;
}
.card-text::first-letter {
  font-size: 2rem;
  font-weight: 700;
}

↑このように、first-letter擬似要素を追加してあげることで
先頭1文字だけを強調した
いわゆる「ドロップキャップ」的な表現が簡単に実現できる、と言うわけです。

この例では単純に文字の太さ・大きさのみの差異で表現していますが、
もちろん色を変えて強調したり、様々な装飾方法が考えられます。

対応しているブラウザ

この
・first-line擬似要素
・first-letter擬似要素
の対応ブラウザですが、

現在リリースされているモダンブラウザの最新版であれば、ほぼ全て対応しています。
気兼ねなく使用ができる擬似要素というわけですね。

ちなみに、Mozilla運営のおなじみ、
様々なWeb技術に関するオンラインリファレンスサイト「MDN Docs」内に、対応ブラウザの表が掲載されています。
・first-line擬似要素のブラウザ対応状況
・first-letter擬似要素のブラウザ対応状況
↑気兼ねなく使用ができる擬似要素ということが、確認できますね。

この記事のまとめ

今回は、文字列の中の
・「最初の1行を装飾できる」first-line擬似要素
・「先頭1文字を装飾できる」first-letter擬似要素
について、記事を書きました。

文字装飾、と聞くと地味に感じるかもしれませんが、
実はグラフィックデザインにおいて、文字のデザインはとても重要な要素です。
正直、文字組が上手くできていないデザインは
どんなに綺麗なビジュアルを持ってこようとも、画面がまとまらないケースをよく見かけます。

地味なようでいて結構使える擬似要素かと思いますので、引き出しの一つとして覚えておくと良いかもしれません。

当サイトでは、今後もWebデザイン・Web制作に関する記事を掲載していく予定です。

※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。