Documentation CSS

概要

initial-letterは、CSSで段落の最初の文字を大きく装飾する「ドロップキャップ（Drop Cap）」効果を実現するためのプロパティです。ドロップキャップとは、書籍や雑誌の章の冒頭でよく見られる、最初の文字を数行分の高さで大きく表示するタイポグラフィ技法のことです。

このプロパティを使用することで、従来は複雑なCSSやJavaScriptで実装していたドロップキャップ効果を、シンプルな記述で実現できるようになります。

この記事で学べること

  • initial-letterプロパティの基本的な使い方
  • ドロップキャップ効果のカスタマイズ方法
  • 実践的なデザインパターンとコード例
  • ブラウザ互換性とフォールバック対策

基本的な使い方

initial-letterプロパティは、::first-letter疑似要素と組み合わせて使用します。このプロパティで指定した行数分の高さで、最初の文字が拡大表示されます。

構文

/* 基本構文 */
selector::first-letter {
  initial-letter: <size> [<sink>];
}
  • size: 最初の文字が占める行数（必須）。数値で指定します。
  • sink: 文字が沈み込む行数（省略可能）。省略した場合はsizeと同じ値になります。

基本的な例

以下の例では、段落の最初の文字を3行分の高さで表示しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Initial Letter Example</title>
<style>
  .article {
    max-width: 600px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.8;
  }

  /* ドロップキャップの設定 */
  .article p::first-letter {
    initial-letter: 3;  /* 3行分の高さで表示 */
    color: #2563eb;
    font-weight: bold;
    margin-right: 8px;
  }
</style>
</head>
<body>
<article class="article">
  <p>
    むかしむかし、あるところにおじいさんとおばあさんが住んでいました。
    おじいさんは山へ芝刈りに、おばあさんは川へ洗濯に行きました。
    おばあさんが川で洗濯をしていると、川上から大きな桃が流れてきました。
  </p>
</article>
</body>
</html>

このコードでは、段落の最初の文字「む」が3行分の高さで大きく表示され、青色で太字になります。

プロパティ値の詳細

size（サイズ）の指定

sizeは、最初の文字が占める行数を指定します。

/* 2行分の高さ */
p::first-letter {
  initial-letter: 2;
}

/* 4行分の高さ */
p::first-letter {
  initial-letter: 4;
}

/* 小数点も使用可能 */
p::first-letter {
  initial-letter: 2.5;
}

sink（沈み込み）の指定

sinkは、最初の文字が何行分沈み込むかを指定します。これにより、様々なドロップキャップスタイルを実現できます。

/* 3行分の高さ、2行分沈み込み */
p::first-letter {
  initial-letter: 3 2;
}

sinkの値による効果の違い

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Initial Letter Sink Examples</title>
<style>
  .example {
    max-width: 500px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    line-height: 1.8;
  }

  .example h3 {
    margin-top: 0;
    font-size: 14px;
    color: #6b7280;
  }

  /* ドロップキャップ: sinkがsizeと同じ */
  .drop-cap p::first-letter {
    initial-letter: 3 3;  /* 3行の高さ、3行沈み込み（デフォルト） */
    color: #dc2626;
    font-weight: bold;
    margin-right: 8px;
  }

  /* レイズドキャップ: sinkが1 */
  .raised-cap p::first-letter {
    initial-letter: 3 1;  /* 3行の高さ、1行だけ沈み込み */
    color: #059669;
    font-weight: bold;
    margin-right: 8px;
  }

  /* 部分沈み込み */
  .partial-sink p::first-letter {
    initial-letter: 4 2;  /* 4行の高さ、2行沈み込み */
    color: #7c3aed;
    font-weight: bold;
    margin-right: 8px;
  }
</style>
</head>
<body>
<div class="example drop-cap">
  <h3>ドロップキャップ（initial-letter: 3 3）</h3>
  <p>
    これは標準的なドロップキャップの例です。
    最初の文字が3行分の高さで表示され、
    テキストがその周りに回り込んでいます。
  </p>
</div>

<div class="example raised-cap">
  <h3>レイズドキャップ（initial-letter: 3 1）</h3>
  <p>
    これはレイズドキャップの例です。
    最初の文字が3行分の高さですが、1行分しか沈み込まず、
    ベースラインより上に突き出しています。
  </p>
</div>

<div class="example partial-sink">
  <h3>部分沈み込み（initial-letter: 4 2）</h3>
  <p>
    これは部分沈み込みの例です。
    最初の文字が4行分の高さで、2行分だけ沈み込んでいます。
    上下両方にはみ出すスタイルになります。
  </p>
</div>
</body>
</html>

応用例

装飾的なドロップキャップ

背景色や境界線を追加して、より装飾的なドロップキャップを作成できます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Decorative Drop Cap</title>
<style>
  .article {
    max-width: 600px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.8;
  }

  /* 背景付きドロップキャップ */
  .article p::first-letter {
    initial-letter: 3;
    color: white;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 8px 12px;
    margin-right: 12px;
    border-radius: 4px;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
</style>
</head>
<body>
<article class="article">
  <p>
    美しいタイポグラフィは、読者の目を引きつけ、
    コンテンツへの没入感を高めます。
    ドロップキャップは古くから使われてきた技法ですが、
    CSSのinitial-letterプロパティにより、
    Webでも簡単に実装できるようになりました。
  </p>
</article>
</body>
</html>

雑誌風レイアウト

雑誌のような洗練されたレイアウトを実現する例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Magazine Style Layout</title>
<style>
  .magazine-article {
    max-width: 700px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: 'Georgia', serif;
  }

  .magazine-article h1 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 30px;
    letter-spacing: 2px;
  }

  .magazine-article .lead {
    font-size: 1.2rem;
    line-height: 2;
    text-align: justify;
  }

  /* 雑誌風ドロップキャップ */
  .magazine-article .lead::first-letter {
    initial-letter: 4;
    color: #1a1a1a;
    font-family: 'Times New Roman', serif;
    font-weight: normal;
    font-style: italic;
    margin-right: 10px;
  }

  .magazine-article .body-text {
    column-count: 2;
    column-gap: 30px;
    font-size: 1rem;
    line-height: 1.8;
    text-align: justify;
    margin-top: 20px;
  }
</style>
</head>
<body>
<article class="magazine-article">
  <h1>タイポグラフィの美学</h1>
  <p class="lead">
    活字の歴史は、人類の知識の伝達と深く結びついています。
    グーテンベルクの活版印刷から始まり、
    現代のデジタルフォントに至るまで、
    文字のデザインは常に進化を続けてきました。
  </p>
  <div class="body-text">
    <p>
      印刷技術の発展により、書籍は一般の人々にも
      手の届くものとなりました。その中で、
      ドロップキャップは章の始まりを示す
      重要な視覚的要素として使われてきました。
    </p>
    <p>
      現代のWebデザインにおいても、
      このような伝統的なタイポグラフィ技法を
      取り入れることで、コンテンツに
      品格と読みやすさを与えることができます。
    </p>
  </div>
</article>
</body>
</html>

カスタムフォントとの組み合わせ

装飾的なフォントを使用したドロップキャップの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Font Drop Cap</title>
<!-- Google Fontsの読み込み -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Noto+Sans+JP&display=swap" rel="stylesheet">
<style>
  .fancy-article {
    max-width: 600px;
    margin: 40px auto;
    padding: 20px;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    line-height: 1.8;
  }

  /* 装飾フォントを使ったドロップキャップ */
  .fancy-article p::first-letter {
    initial-letter: 3;
    font-family: 'Playfair Display', serif;
    color: #b91c1c;
    margin-right: 8px;
  }
</style>
</head>
<body>
<article class="fancy-article">
  <p>
    Once upon a time, in a land far away, there lived a young
    adventurer who dreamed of exploring the unknown. This is
    the story of their incredible journey through mysterious
    forests and ancient ruins.
  </p>
</article>
</body>
</html>

ブラウザ互換性とフォールバック

initial-letterは比較的新しいプロパティのため、すべてのブラウザでサポートされているわけではありません。

ブラウザサポート状況（2024年時点）

ブラウザサポート状況
Chrome110以降でサポート
Edge110以降でサポート
Safari9以降でサポート（-webkit-プレフィックス付き）
Firefox一部制限あり

フォールバックの実装

サポートされていないブラウザ向けにフォールバックを実装する方法です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drop Cap with Fallback</title>
<style>
  .article {
    max-width: 600px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.8;
  }

  .article p::first-letter {
    /* フォールバック: すべてのブラウザで動作 */
    float: left;
    font-size: 3.5em;
    line-height: 1;
    font-weight: bold;
    color: #2563eb;
    margin-right: 8px;
    margin-top: 4px;
  }

  /* initial-letterをサポートするブラウザ向け */
  @supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
    .article p::first-letter {
      float: none;  /* floatをリセット */
      font-size: inherit;  /* font-sizeをリセット */
      line-height: inherit;  /* line-heightをリセット */
      margin-top: 0;
      -webkit-initial-letter: 3;  /* Safari用 */
      initial-letter: 3;
    }
  }
</style>
</head>
<body>
<article class="article">
  <p>
    このテキストは、initial-letterプロパティをサポートするブラウザでは
    ネイティブのドロップキャップ効果が適用されます。
    サポートしていないブラウザでは、floatを使った
    フォールバックスタイルが適用されます。
  </p>
</article>
</body>
</html>

@supportsによる機能検出

@supportsルールを使用して、ブラウザがプロパティをサポートしているかを検出できます。

/* 基本スタイル（フォールバック） */
p::first-letter {
  float: left;
  font-size: 3em;
  line-height: 1;
  margin-right: 0.1em;
}

/* initial-letterをサポートする場合 */
@supports (initial-letter: 3) {
  p::first-letter {
    float: none;
    font-size: inherit;
    line-height: inherit;
    initial-letter: 3;
  }
}

/* Safariのプレフィックス付きをサポートする場合 */
@supports (-webkit-initial-letter: 3) {
  p::first-letter {
    float: none;
    font-size: inherit;
    line-height: inherit;
    -webkit-initial-letter: 3;
  }
}

使用上の注意点

1. ::first-letter疑似要素との組み合わせが必須

initial-letterは、必ず::first-letter疑似要素と組み合わせて使用する必要があります。

/* 正しい使い方 */
p::first-letter {
  initial-letter: 3;
}

/* 間違った使い方（効果なし） */
p {
  initial-letter: 3;
}

2. ブロックレベル要素にのみ適用可能

::first-letterはブロックレベル要素にのみ適用されます。インライン要素には効果がありません。

/* 効果あり */
p::first-letter { initial-letter: 3; }
div::first-letter { initial-letter: 3; }

/* 効果なし（spanはインライン要素） */
span::first-letter { initial-letter: 3; }

3. 最初の文字が句読点の場合

最初の文字が句読点の場合、句読点とその次の文字が一緒にスタイリングされます。

<!-- 「"T」が一緒にドロップキャップになる -->
<p>"The quick brown fox..."</p>

4. 日本語での注意点

日本語の文字は欧文に比べて複雑なため、フォントによっては見た目が崩れる場合があります。適切なフォントと余白の調整が必要です。

/* 日本語向けの調整 */
.japanese-article p::first-letter {
  initial-letter: 3;
  margin-right: 12px;  /* 十分な余白を確保 */
  font-family: "Noto Serif JP", serif;  /* 日本語対応フォント */
}

まとめ

initial-letterプロパティは、従来は複雑な実装が必要だったドロップキャップ効果を、シンプルなCSSで実現できる強力なツールです。

ポイント

  • initial-letterは::first-letter疑似要素と組み合わせて使用する
  • sizeで文字の高さ（行数）、sinkで沈み込む行数を指定できる
  • ブラウザ互換性のため、@supportsを使ったフォールバックを実装することを推奨
  • 装飾的なフォントや背景色と組み合わせることで、より印象的なデザインが可能

書籍や雑誌のような洗練されたタイポグラフィをWebで実現したい場合に、initial-letterは非常に有効な選択肢となります。

参考文献

円