CSS のイニシャル文字を使用してドロップ キャップを管理する

Jhey Tompkins
キャップをスタイリングする方法は、数千年とまではいかないまでも、数百年前から存在しています。新しいセクションや章の開始を示すために印刷スタイルで使用すると、履歴を通して確認できます。しかし、デジタル時代のスタイルには常に問題があります。「クリーン」なスタイル設定と統合しました

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;
}
  • 最初の引数は、文字のサイズと占有行数を定義します。アスペクト比を維持したまま文字が拡大されます。負の値は使用できませんが、小数値は使用できます。
  • 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 を使用してドロップキャップのスタイル設定をより細かく制御できるようになりました。タイポグラフィにドロップ キャップを追加しますか？どのようにスタイルを設定すればよいでしょうか。ご確認ください。