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 を使用してドロップキャップのスタイルをより細かく制御できるようになりました。タイポグラフィにドロップキャップを追加しますか？どのようにスタイルを設定すればよいですか？ご確認ください。