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 の導入
initial-letter プロパティを使用すると、このドロップキャップのスタイルをより細かく制御できます。スペース区切りの 2 つの値を指定します。
p::first-letter {
initial-letter: 3.5 3;
}
- 最初の引数は、文字のサイズと占有行数を定義します。アスペクト比を維持しながら文字が拡大されます。マイナスの値は使用できませんが、小数値は使用できます。
- 2 番目の引数は文字シンクを定義します。これは、文字が配置される位置のオフセットと考えることができます。2 番目の値は省略可能です。負の値は指定できません。指定されていない場合、最も近い整数に四捨五入したレターサイズの値が使用されます。これは、キーワード「drop」を使用する場合と同じです。シンクは、1 のシンクに相当する別のキーワード値「raise」も受け入れます。
こちらのデモでは、値を変更してドロップキャップのスタイルにどのように影響するかを確認できます。
::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 を使用してドロップキャップのスタイル設定をより細かく制御できるようになりました。タイポグラフィにドロップキャップを追加しますか？どのようにスタイルを設定すればよいでしょうか。ご確認ください。