::first-letter

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

::first-letter は CSS の擬似要素で、ブロックコンテナーの最初の行の最初の文字にスタイルを適用します。ただし、最初の文字より前に他のコンテンツ（画像やインラインテーブルなど）がないときに限ります。

試してみましょう

要素の最初の文字は、常に単純に識別できるとは限りません。

  • 最初の文字のすぐ前後にある記号 (punctuation) も範囲に含まれます。記号とは、 Unicode の open (Ps), close (Pe), initial quote (Pi), final quote (Pf), and other punctuation (Po) の各クラスで定義されているすべての文字です。
  • 言語によっては常に一緒に大文字化される連字があります。例えばオランダ語の IJ などです。この場合、連字の両方の文字が ::first-letter 擬似要素で選択されます。
  • ::before 擬似要素と content プロパティの組み合わせにより、要素の先頭にテキストが挿入されることがあります。この場合、 ::first-letter は生成されたこのコンテンツの最初の文字に一致します。

メモ: CSS では擬似クラスと擬似要素を見分けやすくするために、 ::first-letter の表記法（二重コロン付き）が導入されました。後方互換性のため、ブラウザーは以前に導入された :first-letter も受け付けます。

オランダ語の IJ のような連字に対するブラウザーの対応は貧弱です。下記の互換性一覧表で、現在の対応状況を確認してください。

利用可能なプロパティ

::first-letter 擬似要素では、一部の CSS プロパティのみが利用できます。

構文

css
::first-letter {
  /* ... */
}

例

単純なドロップキャップ

この例では、 ::first-letter 擬似要素を使用して、 <h2> の直後の段落の最初の文字にドロップキャップ効果を作成します。

HTML

html
<h2>My heading</h2>
<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
  kasd gubergren, no sea takimata sanctus est.
</p>
<p>
  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
  consequat.
</p>

CSS

css
p {
  width: 500px;
  line-height: 1.5;
}

h2 + p::first-letter {
  color: white;
  background-color: black;
  border-radius: 2px;
  box-shadow: 3px 3px 0 red;
  font-size: 250%;
  padding: 6px 3px;
  margin-right: 6px;
  float: left;
}

結果

特殊な記号と非ラテン文字への効果

この例では、特殊な記号や非ラテン文字に対する ::first-letter の効果を説明しています。

HTML

html
<p>
  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
  consequat.
</p>
<p>-The beginning of a special punctuation mark.</p>
<p>_The beginning of a special punctuation mark.</p>
<p>"The beginning of a special punctuation mark.</p>
<p>'The beginning of a special punctuation mark.</p>
<p>*The beginning of a special punctuation mark.</p>
<p>#The beginning of a special punctuation mark.</p>
<p>「先頭が特殊区切り記号です。</p>
<p>《先頭が特殊区切り記号です。</p>
<p>“先頭が特殊区切り記号です。</p>

CSS

css
p::first-letter {
  color: red;
  font-size: 150%;
}

結果

仕様書

Specification
CSS Pseudo-Elements Module Level 4
# first-letter-pseudo

ブラウザーの互換性

BCD tables only load in the browser

関連情報