最初の文字と最初の文字を使用してCSSにキャップをドロップする

ドロップキャップは、セクションまたは章の最初の段落の最初の文字に万能薬を与えるために、印刷媒体で長い間使用されてきました。 これらのドロップキャップは、注意を引き、読者を引き付けるのに役立ちます。また、テキストの読みやすさに影響を与えないように1文字だけに適用されるため、非常に定型化されたフォントを使用することをお勧めします。 同じドロップキャップ効果は、 ::first-letter疑似要素と新しいinitial-letterプロパティを使用してCSSで実現できます。

::最初の文字の疑似要素セレクター

:: first-letter は、 ::beforeおよび::after に似た疑似要素セレクターであり、要素の最初の文字を効果的にスタイリング可能にします。独自の要素であり、ページにマークアップを追加する必要はありませんでした。

これは、最初の段落の最初の文字またはarticle要素のスタイルを設定する簡単な例です。

article p:first-child::first-letter {
  color: hotpink;
  padding: 0 .3rem;
  margin: 0 .3rem 0 0;
  border: 2px solid;
  border-radius: 8px;
  font-family: "IBM Plex Mono", monospace;
}

これで、次のようなものが得られます。

---

しかし、楽園には問題があります。 フォントサイズを大きくするとどうなるか見てみましょう。 典型的なドロップキャップの主な機能の1つ：

article p:first-child::first-letter {
  color: hotpink;
  padding: 0 .3rem;
  margin: 0 .3rem 0 0;
  border: 2px solid;
  border-radius: 8px;
  font-family: "IBM Plex Mono";

  font-size: 4rem;
  line-height: 1;
}

大きいフォントサイズを使用することに加えて、 line-height の値を低く設定して、最初の行の行の高さがこの最初の文字の最初の行の高さに影響されないようにします。 。 問題は、ドロップキャップが正確にドロップではないことです。 1つの解決策は、古き良きフロートを使用することです。

article p:first-child::first-letter {
  color: hotpink;
  padding: 0 .3rem;
  margin: 0 .3rem 0 0;
  border: 2px solid;
  border-radius: 8px;
  font-family: "IBM Plex Mono", monospace;

  font-size: 4rem;
  float: left;
  line-height: 1;
}

最初の文字のプロパティ

ドロップキャップを適切にスタイル設定するためにline-heightおよびfont-sizeとともにfloatを使用する代わりに、新しいinitial-letterプロパティを使用することもできます。ドロップキャップを拡張する行数を表す数値。 次に、ブラウザは適切なフォントサイズを自動的に計算します。

article p:first-child::first-letter {
  color: hotpink;
  padding-right: 8px;

  -webkit-initial-letter: 3;
  initial-letter: 3;
}