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>
表示

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

関連項目

::first-letter

リンク