CSS - initial-letter

概要

属性名	initial-letter
値	normal \| <number> <integer> \| <number> && [raise \| drop]?
初期値	normal
継承	継承しない
サポート	https://caniuse.com/css-initial-letter

::first-letter で指定した文章の最初の文字に対して、文字の大きさや位置を指定します。

値	説明
normal	デフォルトの大きさ、位置で表示します。
<number>	通常フォントの何行分の大きさで表示するかを指定します。
<integer>	先頭文字を沈める行数を 1以上の整数で指定します。
raise	沈み具合が 1 になるように上げます。
drop	沈み具合が <number> で指定した行数になるように沈めます。

CSS

.initial-letter-test::first-letter {
  initial-letter: 2 1;
}

HTML

<p class="initial-letter-test">むかしむかしあるところに、おじいさんと、おばあさんが住んでいました。おじいさんは山へしばかりに、おばあさんは川へ洗濯に行きました。</p>

表示

むかしむかしあるところに、おじいさんと、おばあさんが住んでいました。おじいさんは山へしばかりに、おばあさんは川へ洗濯に行きました。

初版：2024年11月17日、最終更新：2024年11月17日

https://www.tohoho-web.com/css/prop/initial-letter.htm