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 |
---|---|
適用対象 | ::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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.