CSS の initial-letter プロパティを使用すると、処理がはるかに簡単になります。
ブラウザ サポート
initial-letter を試せる場所Safari と Chrome 110 で利用できます。Safari では、このプロパティに接頭辞 -webkit- が必要です。Firefox への実装には、未解決の問題があります。
以下を使用して initial-letter サポートをテストします。
@supports (initial-letter: 1 1) { /* Your supported styles */ }
現在のソリューション
現在、CSS でドロップ キャップのスタイルをどのように設定していますか。
::first-letter 疑似要素はその過程で役立ちます。
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
}
ただし、最初の文字のサイズを計算する際に、「float」などのプロパティを使用する必要があります。
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
float: left;
line-height: 1;
margin-right: 0.25rem;
}
lh のような新しい CSS ユニットを導入することで、こうした問題を軽減できます。ただし、これらもサポートが制限されています（lh は現在、Chrome でのみサポートされています）。
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 3lh;
float: left;
line-height: 1;
margin-right: 0.1lh;
}
イニシャルについて
initial-letter プロパティを使用すると、このドロップ キャップのスタイル設定を細かく制御できます。次の 2 つのスペース区切り値を指定します。
p::first-letter {
initial-letter: 3.5 3;
}
- 1 つ目の引数では、文字のサイズと文字が占める行数を定義します。文字は、アスペクト比を維持しながら拡大されます。負の値は指定できませんが、小数値は使用できます。
- 2 番目の引数は文字シンクを定義します。これは、文字が配置される位置のオフセットと考えることができます。2 つ目の値はオプションで、負の値にはできません。指定しない場合は、最も近い整数に丸められた文字サイズを想定します。これはキーワード「drop」を使用した場合と同じです。シンクは別のキーワード値「raise」も受け取ります。これはシンクの 1 に相当します。
値を変更して、ドロップ キャップのスタイル設定にどのように影響するかを確認できるこのデモをご覧ください。
::first-line と組み合わせると、次のようになります。
p::first-line {
font-variant: small-caps;
font-weight: bold;
font-size: 1.25rem;
}
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: #3b5bdb;
text-shadow: 0.25rem 0.25rem #be4bdb;
}
あるいは、border を指定します。次の例では、「drop」キーワードがどのように使用されているかに注目してください。キーワードを省略するとデフォルトになり、3 になります。
css
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 drop;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: #3b5bdb;
border: 0.25rem dashed #be4bdb;
padding: 0.5rem;
border-radius: 5px;
}
background または box-shadow を追加してみましょう。
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: var(--surface-1);
background: #be4bdb;
padding: 0.5rem;
border-radius: 5px;
box-shadow: 0.5rem 0.5rem 0 #3b5bdb;
}
または、テキストに背景をクリップします。
p::first-letter {
background: linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: transparent;
-webkit-background-clip: text;
padding: 0.5rem;
}
さまざまな用途にご活用いただけます。
これで、initial-letter を使用してドロップ キャップのスタイル設定をより細かく制御できるようになりました。タイポグラフィにドロップ キャップを追加しますか？どのようにスタイリングしますか？Google までお知らせください。