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

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
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

構文

キーワード値の 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 の定義
草案 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
実験的
Chrome 未対応 なしEdge ? Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 1223880
IE 未対応 なしOpera 未対応 なしSafari 完全対応 9WebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile ? Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 1223880
Opera Android 未対応 なしSafari iOS 完全対応 9Samsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

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

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