initial-letter

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

initial-letter は CSS のプロパティで、頭文字をドロップキャップにしたり、上げたり、下げたりすることを設定します。

css
/* キーワード値 */
initial-letter: normal;

/* 数値 */
initial-letter: 1.5; /* 頭文字が 1.5 行分を占める */
initial-letter: 3; /* 頭文字が 3 行分を占める */
initial-letter: 3 2; /* 頭文字が 3 行分を占め、
                           2 行分下がる */

/* グローバル値 */
initial-letter: inherit;
initial-letter: initial;
initial-letter: revert;
initial-letter: revert-layer;
initial-letter: unset;

キーワード値の normal、または <number> と、その後に任意で <integer> が付きます。

normal

頭文字に特別な効果を付与しません。テキストは普通通りに表示されます。

<number>

頭文字の寸法を、何行を占めるかで指定します。負の値は使用できません。

<integer>

寸法が与えられたときに、頭文字が沈み込む行数を定義します。0 以上の値でなければなりません。省略された場合は、寸法の値を複製し、最も近い正の整数に切り捨てられます。

公式定義

初期値normal
適用対象::first-letter 擬似要素と、ブロックコンテナーの最初のインラインレベルの子
継承なし
計算値指定通り
アニメーションの種類計算値の型による

形式文法

initial-letter = 
normal |
<number [1,∞]> <integer [1,∞]> |
<number [1,∞]> && [ drop | raise ]?

先頭文字の大きさの設定

HTML

html
<p class="normal">Initial letter is normal</p>
<p class="onefive">Initial letter occupies 1.5 lines</p>
<p class="three">Initial letter occupies 3 lines</p>

CSS

css
.normal::first-letter {
  -webkit-initial-letter: normal;
  initial-letter: normal;
}

.onefive::first-letter {
  -webkit-initial-letter: 1.5;
  initial-letter: 1.5;
}

.three::first-letter {
  -webkit-initial-letter: 3;
  initial-letter: 3;
}

結果

仕様書

Specification
CSS Inline Layout Module Level 3
# sizing-drop-initials

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
initial-letter
normal

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.

関連情報