【CSS Modules】initial-letterプロパティの使い方

initial-letterプロパティは、テキストの最初の文字を装飾的に大きく表示し、その周囲に後続のテキストを回り込ませる「ドロップキャップ」のような効果を制御するプロパティです。このプロパティは、主に文章の視覚的な魅力を高め、雑誌や書籍などで見られる伝統的なレイアウトをウェブ上で実現するために用いられます。

このプロパティには、初頭文字が占めるテキスト行の数（サイズ）と、文字が沈み込む深さ（シンク）を数値で指定できます。例えば、「initial-letter: 3;」と指定すると、初頭文字は3行分の高さを持ち、3行目まで沈み込みます。また、「initial-letter: 3 2;」のように2つの数値を指定した場合、最初の数値（3）は高さ、2番目の数値（2）は沈み込む深さを表します。このように数値を指定することで、初頭文字の見た目と文字の周りのテキストの配置を細かく調整することが可能です。

さらに、キーワード値として「drop」や「raise」も指定できます。「drop」は初頭文字を下の行へ沈み込ませる一般的なドロップキャップ効果を適用し、「raise」はベースラインより上の行へ浮き上がらせる効果をもたらします。これらのキーワードは、数値指定と組み合わせて使用することもでき、例えば「initial-letter: 3 drop;」のように記述します。

通常、このプロパティは段落の最初の文字など、特定のブロックレベル要素の最初の文字に適用することで、デザインにアクセントを加えることができます。特に::first-letter疑似要素と組み合わせて利用されることが一般的です。これらの指定を組み合わせることで、ウェブページのデザインに表現豊かなタイポグラフィの要素を取り入れることが可能になります。

Copy
1initial-letter: 2;

引数なし

引数はありません

戻り値なし

戻り値はありません