このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
initial-letter
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
initial-letter は CSS のプロパティで、ドロップ、レイズ、サンクンされた最初の文字のサイズとシンクを設定します。このプロパティは、::first-letter 擬似要素およびブロックコンテナーのインラインレベル最初の子供要素に適用されます。
構文
css
/* キーワード値 */initial-letter: normal;/* 1 つの値 */initial-letter: 3; /* 頭文字が 3 行分を占める */initial-letter: 1.5; /* 頭文字が 1.5 行分を占める *//* ２ つの値 */initial-letter: 3 2; /* 頭文字が 3 行分を占め、ベースラインは 2 行目（1 行分上がる） */initial-letter: 3 1; /* 頭文字が 3 行分を占め、ベースライン変更なし（2 行分上がる） *//* グローバル値 */initial-letter: inherit;initial-letter: initial;initial-letter: revert;initial-letter: revert-layer;initial-letter: unset;値
キーワード値のnormal、または<number> と、その後に任意で<integer> が付きます。
公式定義
| 初期値 | normal |
|---|---|
| 適用対象 | ::first-letter 擬似要素と、ブロックコンテナーの最初のインラインレベルの子 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 計算値の型による |
形式文法
initial-letter =
normal|
<number [1,∞]><integer [1,∞]>|
<number [1,∞]>&&[drop|raise]?
<integer> =
<number-token>
例
先頭文字の大きさの設定
HTML
html
<p>先頭文字は通常通りです。</p><p>先頭文字は 1.5 行を占めます。</p><p>先頭文字は 3 行を占めます。</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;}p { outline: 1px dashed red;}結果
sink 値を設定
この例では、すべての最初の文字は同じサイズですが、シンク値が異なります。
HTML
html
<p>先頭文字: シンク値 = 4</p><p>先頭文字: シンク値は定義されていません（サイズと同じ）</p><p>先頭文字: シンク値 = 2</p><p>先頭文字: シンク値 = 1</p>CSS
css
.four::first-letter { -webkit-initial-letter: 3 4; initial-letter: 3 4;}.same::first-letter { -webkit-initial-letter: 3; initial-letter: 3;}.two::first-letter { -webkit-initial-letter: 3 2; initial-letter: 3 2;}.one::first-letter { -webkit-initial-letter: 3 1; initial-letter: 3 1;}p { outline: 1px dashed red;}結果
仕様書
| Specification |
|---|
| CSS Inline Layout Module Level 3 # sizing-drop-initials |
ブラウザーの互換性
関連情報
::first-letter:first-child- Drop caps in CSS via Oddbird (2017)