【CSS】::first-letter・::first-line の使い方｜段落の先頭文字・先頭行だけを装飾する方法

雑誌や書籍でよく見る、段落の先頭の1文字だけを大きく飾った「ドロップキャップ」。あれを画像やよけいな span を使わず、CSS だけで実現できるのが ::first-letter と ::first-line という擬似要素です。この記事では、段落の「先頭の文字」や「先頭の行」だけをピンポイントで装飾するこの2つの使い方を、動かせるデモを交えて初心者の方にもわかるように解説します。

先頭の一部だけを装飾できる擬似要素

::first-letter と ::first-line は、要素の中身の「先頭の一部分」だけにスタイルを当てるための擬似要素です。通常、段落の中の特定の文字や行だけを狙うには HTML に span を書き足す必要がありますが、この2つを使えばHTML はそのままで、CSS だけで先頭の文字・行を装飾できます。

「擬似要素」とは、HTML には存在しない仮想的な部分を CSS で作り出して装飾する仕組みのことです。名前の通りコロンを2つ（::）続けて書きます。どちらも p や div、h1 といったブロックレベルの要素にだけ効き、span や a のようなインライン要素には効かない点に注意してください。

::first-letter で先頭の1文字を飾る

まずは ::first-letter です。段落の先頭1文字を大きくして、float: left で左に回り込ませると、雑誌のようなドロップキャップになります。

.article::first-letter {
  font-size: 3em;      /* 文字を大きく */
  font-weight: bold;
  color: #e8517a;
  float: left;         /* 左に回り込ませる */
  line-height: 1;
  margin-right: 8px;
}

先頭が「かっこ」や「引用符」で始まっている場合は、その記号と最初の文字を合わせて1文字分として扱ってくれます。また、末尾のピリオドなどが文字の前に付く句読点も対象に含まれます。細かいことを気にせず「先頭の書き出し部分」を飾れると考えておけば十分です。

::first-line で先頭の1行を飾る

::first-line は、段落の表示上の先頭1行にスタイルを当てます。ここで大事なのは、対象になるのが「HTML 上の1文（改行まで）」ではなく、画面に表示されたときの折り返しの1行目だという点です。そのためブラウザの幅を変えて折り返し位置が変わると、装飾される範囲も自動的に変わります。

.article::first-line {
  font-weight: bold;
  color: #007bff;
  letter-spacing: 0.04em; /* 1行目だけ字間を少し広げる */
}

下のデモでは、同じ段落に ::first-letter（先頭1文字を大きなピンク）と ::first-line（先頭1行を青の太字）の両方を当てています。プレビュー枠の幅で1行目の長さが決まるので、どこまでが「1行目」として青くなるかを確かめてみてください。CSS タブの数値や色を書き換えると、その場で結果が変わります。

<p class="drop">
  むかしむかし、あるところに小さな出版社がありました。そこでは毎朝、職人たちが活字をひとつずつ手で組み、美しい紙面を作り上げていました。段落の先頭を大きく飾る文字は「ドロップキャップ」と呼ばれ、読者の視線を自然に呼び込む工夫として、古くから本の装飾に使われてきました。
</p>

.drop {
  font-family: sans-serif;
  line-height: 1.9;
  color: #333;
  padding: 16px;
}

/* 段落の先頭「1文字」だけを装飾する */
.drop::first-letter {
  font-size: 3.4em;
  font-weight: bold;
  color: #e8517a;
  float: left;      /* 文字を左に回り込ませてドロップキャップに */
  line-height: 1;
  margin-right: 8px;
}

/* 段落の先頭「1行」だけを装飾する（画面幅で対象が変わる） */
.drop::first-line {
  font-weight: bold;
  letter-spacing: 0.04em;
  color: #007bff;
}

使えるプロパティは限られている

::first-letter と ::first-line には、指定できる CSS プロパティに制限があります。何でも効くわけではなく、主にフォントや色まわりのプロパティに限られます。これは仕様で決められているもので、ここに無いプロパティ（たとえば display や vertical-align の一部）を書いても無視されます。

float や margin、border といったボックス関連のプロパティは ::first-letter でのみ使えます。ドロップキャップで float: left が効くのはこのためです。::first-line は「行」が対象なのでボックスを持たず、これらは使えません。

装飾が反映されないとき

インライン要素に指定している

もっとも多いのが、対象がインライン要素になっているケースです。::first-letter と ::first-line は p や div、見出しなどのブロックレベル要素にしか効きません。span や a に指定しても何も起こらないので、装飾したい範囲を p などのブロックで囲んでから指定してください。display: block や display: inline-block を与えたインライン要素であれば対象になります。

コロンの数や擬似要素名を間違えている

擬似要素はコロン2つ（::first-letter）で書くのが現在の書き方です。古いブラウザ向けにコロン1つ（:first-letter）でも動きますが、擬似クラスの :first-child と名前が似ているため混同しがちです。:first-child（先頭の子要素を選ぶ）とはまったく別物なので、「先頭の文字」を飾りたいときは ::first-letter と正しく書けているか確認しましょう。

効かないプロパティを指定している

前の章の表にないプロパティを書いても無視されます。たとえば ::first-line に padding や border を付けても反映されません。狙った見た目にならないときは、そのプロパティが対象の擬似要素で使える種類かどうかを見直してみてください。

まとめ

::first-letter は段落の先頭1文字、::first-line は表示上の先頭1行だけを、HTML を変えずに CSS だけで装飾できる擬似要素です。::first-letter に float: left を組み合わせればドロップキャップが作れ、::first-line は画面幅に応じて対象の行が自動で変わります。どちらもブロックレベル要素にのみ効き、使えるプロパティが限られている点をおさえておけば、記事の書き出しにちょっとしたアクセントを手軽に加えられます。

参考ページ

• ::first-letter – CSS: カスケーディングスタイルシート | MDN
• ::first-line – CSS: カスケーディングスタイルシート | MDN