Documentation CSS

概要

initial-letter-alignは、CSSのタイポグラフィ機能の一つで、ドロップキャップ（段落の先頭を大きく装飾する文字）の垂直方向の配置を制御するプロパティです。

ドロップキャップとは、書籍や雑誌でよく見られる、段落の最初の文字を大きく表示する装飾技法です。initial-letterプロパティでドロップキャップを作成し、initial-letter-alignでその垂直位置を細かく調整できます。

initial-letter-alignの役割

initial-letter-alignは、異なる文字体系（ラテン文字、漢字、アラビア文字など）に応じた適切な配置を実現します。言語や書体によって、文字の基準線（ベースライン）は異なるため、このプロパティを使って最適な配置を選択できます。

基本構文

/* キーワード値 */
.element::first-letter {
  initial-letter-align: auto;
  initial-letter-align: alphabetic;
  initial-letter-align: hanging;
  initial-letter-align: ideographic;
}

/* グローバル値 */
.element::first-letter {
  initial-letter-align: inherit;
  initial-letter-align: initial;
  initial-letter-align: revert;
  initial-letter-align: unset;
}

各値の詳細

auto

ブラウザが言語や書体に基づいて最適な配置を自動的に選択します。これがデフォルト値です。

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

autoを使用すると、ブラウザは以下のように動作します：

  • ラテン文字：alphabeticと同様に配置
  • 漢字・ひらがな・カタカナ：ideographicと同様に配置
  • アラビア文字・ヘブライ文字：hangingと同様に配置

alphabetic

アルファベット文字のベースライン（文字の底辺）に合わせて配置します。ラテン文字やキリル文字などに適しています。

/* ラテン文字向けの配置 */
.latin-text::first-letter {
  initial-letter: 3;
  initial-letter-align: alphabetic;
}

特徴：

  • 「g」「y」「p」などのディセンダー（文字の下に伸びる部分）がある文字も、ベースラインに揃えられます
  • 欧文タイポグラフィで最も自然な配置

hanging

ハンギングベースライン（上部の基準線）に合わせて配置します。インド系文字やチベット文字など、上部に基準線がある文字体系に適しています。

/* 上部基準線での配置 */
.hanging-text::first-letter {
  initial-letter: 3;
  initial-letter-align: hanging;
}

特徴：

  • 文字の上端を基準に配置
  • デーヴァナーガリー文字などで使用

ideographic

表意文字（漢字など）のベースライン（文字の下端）に合わせて配置します。CJK文字（中国語・日本語・韓国語）に適しています。

/* 日本語テキスト向けの配置 */
.japanese-text::first-letter {
  initial-letter: 3;
  initial-letter-align: ideographic;
}

特徴：

  • 漢字やひらがな、カタカナを含むテキストで最適
  • 文字が正方形の領域内に収まるように設計された文字体系向け

実践的なコード例

例1: 基本的なドロップキャップ

<article class="magazine-article">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
  </p>
</article>
.magazine-article p::first-letter {
  /* ドロップキャップのサイズ: 3行分の高さ、2行分沈み込む */
  initial-letter: 3 2;

  /* アルファベットのベースラインに配置 */
  initial-letter-align: alphabetic;

  /* 装飾スタイル */
  font-weight: bold;
  color: #333;
  margin-right: 0.5em;
}

例2: 日本語テキスト用のドロップキャップ

<article class="japanese-article">
  <p>
    昔々あるところに、おじいさんとおばあさんが住んでいました。
    おじいさんは山へ芝刈りに、おばあさんは川へ洗濯に行きました。
  </p>
</article>
.japanese-article p::first-letter {
  /* ドロップキャップのサイズ */
  initial-letter: 2;

  /* 漢字・ひらがな向けの配置 */
  initial-letter-align: ideographic;

  /* 装飾スタイル */
  font-weight: bold;
  color: #c41e3a;
  margin-right: 0.25em;
}

例3: 多言語対応

/* 自動判定で多言語対応 */
.multilingual-content p::first-letter {
  initial-letter: 3;
  initial-letter-align: auto; /* ブラウザが言語に応じて最適化 */

  font-weight: bold;
  padding-right: 8px;
}

/* 英語セクション */
.english-section p::first-letter {
  initial-letter: 3;
  initial-letter-align: alphabetic;
}

/* 日本語セクション */
.japanese-section p::first-letter {
  initial-letter: 2;
  initial-letter-align: ideographic;
}

/* アラビア語セクション */
.arabic-section p::first-letter {
  initial-letter: 3;
  initial-letter-align: hanging;
  direction: rtl;
}

例4: 装飾的なドロップキャップ

<article class="decorative-article">
  <p>
    Once upon a time, in a land far away, there lived a wise old wizard.
    He spent his days studying ancient texts and brewing magical potions.
  </p>
</article>
.decorative-article p::first-letter {
  /* ドロップキャップの設定 */
  initial-letter: 4 3; /* 4行の高さ、3行分沈み込む */
  initial-letter-align: alphabetic;

  /* 装飾スタイル */
  font-family: 'Times New Roman', serif;
  font-weight: bold;
  font-size: 4em;
  color: #8b4513;

  /* 背景と枠線 */
  background: linear-gradient(135deg, #f5deb3, #deb887);
  border: 2px solid #8b4513;
  padding: 0.1em 0.2em;
  margin-right: 0.3em;

  /* 影効果 */
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

例5: レスポンシブ対応

/* モバイルでは控えめなドロップキャップ */
.responsive-article p::first-letter {
  initial-letter: 2;
  initial-letter-align: auto;
  font-weight: bold;
  color: #2c3e50;
}

/* タブレット以上 */
@media (min-width: 768px) {
  .responsive-article p::first-letter {
    initial-letter: 3;
    margin-right: 0.3em;
  }
}

/* デスクトップ */
@media (min-width: 1024px) {
  .responsive-article p::first-letter {
    initial-letter: 4 3;
    font-size: 4.5em;
    padding: 0.1em;
    background-color: rgba(44, 62, 80, 0.1);
  }
}

initial-letterとの組み合わせ

initial-letter-alignは単独では効果がなく、必ずinitial-letterプロパティと組み合わせて使用します。

initial-letterの構文

.element::first-letter {
  /* 基本形: 文字の高さ（行数） */
  initial-letter: 3;

  /* 拡張形: 高さ 沈み込み行数 */
  initial-letter: 3 2; /* 3行の高さ、2行分沈み込む */

  /* 特殊値 */
  initial-letter: normal; /* ドロップキャップなし */
}

組み合わせ例

/* クラシックな書籍スタイル */
.book-style p::first-letter {
  initial-letter: 3;          /* サイズ */
  initial-letter-align: alphabetic; /* 配置 */
  font-family: 'Georgia', serif;
  color: #2c3e50;
}

/* モダンな雑誌スタイル */
.magazine-style p::first-letter {
  initial-letter: 4 2;        /* サイズと沈み込み */
  initial-letter-align: alphabetic;
  font-family: 'Helvetica', sans-serif;
  font-weight: 900;
  color: #e74c3c;
}

Before/After比較

Before: initial-letter-alignなし

/* 配置指定なし - ブラウザのデフォルト */
.article p::first-letter {
  initial-letter: 3;
  font-weight: bold;
  color: #333;
}

この場合、ブラウザはautoとして処理し、言語に基づいて配置を決定します。

After: initial-letter-alignあり

/* 明示的に配置を指定 */
.article p::first-letter {
  initial-letter: 3;
  initial-letter-align: alphabetic; /* ラテン文字用に最適化 */
  font-weight: bold;
  color: #333;
}

明示的に指定することで、意図した通りの配置が保証されます。

注意点とベストプラクティス

1. ::first-letter疑似要素との併用

initial-letterとinitial-letter-alignは::first-letter疑似要素に対して使用します。

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

/* これは効果がない */
p {
  initial-letter: 3; /* 直接要素には適用されない */
}

2. フォント選択の重要性

ドロップキャップには読みやすいフォントを選びましょう。

.article p::first-letter {
  initial-letter: 3;
  initial-letter-align: alphabetic;

  /* セリフ体がクラシックな印象に */
  font-family: 'Georgia', 'Times New Roman', serif;

  /* または太いサンセリフ体でモダンに */
  /* font-family: 'Arial Black', 'Helvetica', sans-serif; */
}

3. 余白の調整

ドロップキャップと本文テキストの間に適切な余白を設けましょう。

.article p::first-letter {
  initial-letter: 3;
  initial-letter-align: alphabetic;

  /* 右側に余白を追加 */
  margin-right: 0.5em;
  padding-right: 0.25em;
}

4. アクセシビリティへの配慮

スクリーンリーダーはドロップキャップを通常のテキストとして読み上げるため、コンテンツへの影響はありません。ただし、色のコントラストには注意が必要です。

.article p::first-letter {
  initial-letter: 3;
  initial-letter-align: alphabetic;

  /* 十分なコントラスト比を確保 */
  color: #1a1a1a; /* 背景色に対して4.5:1以上のコントラスト */
}

ブラウザサポート

initial-letter-alignプロパティは、CSS Inline Layout Module Level 3の一部として策定されていますが、ブラウザサポートはまだ限定的です。

ブラウザサポート状況
Chrome実験的サポート（フラグ必要）
Firefox未サポート
Safari部分的サポート（9.0+）
Edge実験的サポート

フォールバック対策

サポートされていないブラウザ向けに、フォールバックスタイルを用意しましょう。

/* フォールバック: 通常の大きな文字として表示 */
.article p::first-letter {
  font-size: 3em;
  font-weight: bold;
  float: left;
  line-height: 1;
  margin-right: 0.1em;
  color: #333;
}

/* initial-letterをサポートするブラウザ向け */
@supports (initial-letter: 3) {
  .article p::first-letter {
    float: none;
    font-size: inherit;
    initial-letter: 3;
    initial-letter-align: alphabetic;
  }
}

機能検出を使った対応

/* 基本スタイル（すべてのブラウザ） */
.drop-cap::first-letter {
  font-size: 4em;
  float: left;
  line-height: 0.8;
  padding-right: 0.1em;
  font-weight: bold;
}

/* initial-letterサポート時 */
@supports (initial-letter: 3) and (initial-letter-align: alphabetic) {
  .drop-cap::first-letter {
    float: none;
    font-size: inherit;
    line-height: normal;
    padding-right: 0;
    initial-letter: 3;
    initial-letter-align: alphabetic;
  }
}

まとめ

initial-letter-alignプロパティは、ドロップキャップの垂直位置を細かく制御するための重要なツールです。

ポイント

  • auto: ブラウザが言語に応じて自動判定（デフォルト）
  • alphabetic: ラテン文字のベースラインに配置（欧文向け）
  • hanging: 上部の基準線に配置（インド系文字向け）
  • ideographic: 表意文字のベースラインに配置（CJK文字向け）

使用時の注意

  1. 必ずinitial-letterプロパティと組み合わせて使用する
  2. ::first-letter疑似要素に適用する
  3. ブラウザサポートが限定的なため、フォールバックを用意する
  4. 多言語サイトではauto値の使用を検討する

適切に使用することで、美しいタイポグラフィと読みやすいレイアウトを実現できます。

参考文献

円