ドロップキャップは、セクションまたは章の最初の段落の最初の文字に万能薬を与えるために、印刷媒体で長い間使用されてきました。 これらのドロップキャップは、注意を引き、読者を引き付けるのに役立ちます。また、テキストの読みやすさに影響を与えないように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;
}

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

Lorem ipsum dolorは、amet、consecteturadipiscingelitに座ります。 Suspendisse ante turpis、rhoncus vel nisi eu、congueiaculisneque。 Nunc bibendum dui felis、et auctor mimaximusin。 Vestibulum porta orci et ex mattis、amet feugiatjustofermentumに座ってください。 elementumでのDuisblandittemporpurus。 idでconsequatlorem。


しかし、楽園には問題があります。 フォントサイズを大きくするとどうなるか見てみましょう。 典型的なドロップキャップの主な機能の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;
}

Lorem ipsum dolorは、amet、consecteturadipiscingelitに座ります。 Suspendisse ante turpis、rhoncus vel nisi eu、congueiaculisneque。 Nunc bibendum dui felis、et auctor mimaximusin。 Vestibulum porta orci et ex mattis、amet feugiatjustofermentumに座ってください。 elementumでのDuisblandittemporpurus。 idでconsequatlorem。

大きいフォントサイズを使用することに加えて、 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;
}

Lorem ipsum dolorは、amet、consecteturadipiscingelitに座ります。 Suspendisse ante turpis、rhoncus vel nisi eu、congueiaculisneque。 Nunc bibendum dui felis、et auctor mimaximusin。 Vestibulum porta orci et ex mattis、amet feugiatjustofermentumに座ってください。 elementumでのDuisblandittemporpurus。 idでconsequatlorem。

::first-letterのブラウザサポートはほぼ普遍的です。

最初の文字のプロパティ

ドロップキャップを適切にスタイル設定するために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;
}

Lorem ipsum dolorは、amet、consecteturadipiscingelitに座ります。 Suspendisse ante turpis、rhoncus vel nisi eu、congueiaculisneque。 Nunc bibendum dui felis、et auctor mimaximusin。 Vestibulum porta orci et ex mattis、amet feugiatjustofermentumに座ってください。 elementumでのDuisblandittemporpurus。 idでconsequatlorem。

この記事の執筆時点では、この最後のデモはSafariで期待どおりにのみ機能します。 :: first-letterとは異なり、 initial-letter のサポートは、残念ながら現時点ではほとんど存在しません。 したがって、今のところ、しばらくの間フロートを使用し続ける必要があります。 それでも初期文字を使用する場合は、 @supports at-ruleで使用して、サポートされていないブラウザーでドロップキャップがあらゆる種類の奇妙に見えないようにすることをお勧めします。