initial-letter
initial-letter
は CSS のプロパティで、頭文字をドロップキャップにしたり、上げたり、下げたりすることを設定します。
/* キーワード値 */
initial-letter: normal;
/* 数値 */
initial-letter: 1.5; /* 頭文字が1.5行分を占める */
initial-letter: 3.0; /* 頭文字が3行分を占める */
initial-letter: 3.0 2; /* 頭文字が3行分を占め、
2行分下がる */
/* グローバル値 */
initial-letter: inherit;
initial-letter: initial;
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
<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
.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.0;
initial-letter: 3.0;
}
Result
仕様書
Specification |
---|
CSS Inline Layout Module Level 3 # sizing-drop-initials |
ブラウザーの互換性
BCD tables only load in the browser