これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

CSS の initial-letter プロパティは、頭文字を落としたり、上げたり、下げたりすることを指定します。

/* キーワード値 */
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
適用対象::first-letter pseudo-elements and inline-level first child of a block container
継承なし
メディアvisual
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

構文

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

normal
頭文字に特別な効果を付与しません。テキストは普通通りに表示されます。
<number>
頭文字の寸法を、何行を占めるかで指定します。負の値は使用できません。
<integer>
寸法が与えられたときに、頭文字が沈み込む行数を定義します。0以上の値でなければなりません。省略された場合は、寸法の値を複製し、最も近い正の整数に切り捨てられます。

形式文法

normal | [ <number> <integer>? ]

CSS コンテンツ

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

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

.three {
  -webkit-initial-letter: 3.0;
  initial-letter: 3.0;
}

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 Inline Layout
initial-letter の定義
草案 初回定義

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 なし ? なし1 なし なし9
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 なし なし ? なし1 なし9 なし

1. See bug 1223880

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,