スタイリッシュなドロップキャップ技術

はじめに

この実験では、CSS のドロップキャップ技術について学びます。ドロップキャップは、最初の段落の最初の文字に視覚的な魅力を加えるために使用される活字技術です。この実験を通じて、:first-child セレクターと ::first-letter 疑似要素を使って、段落の最初の文字を独特で目を引くようにスタイリングする方法を理解します。

ドロップキャップ

コードは index.html と style.css に記述できます。

最初の段落の最初の文字を他のテキストよりも大きくします。

• :first-child セレクターを使用して、最初の段落のみを選択します。
• ::first-letter 疑似要素を使用して、段落の最初の要素にスタイルを適用します。

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo
  ligula quis tincidunt cursus. Integer consectetur tempor ex eget hendrerit.
  Cras facilisis sodales odio nec maximus. Pellentesque lacinia convallis
  libero, rhoncus tincidunt ante dictum at. Nullam facilisis lectus tellus, sit
  amet congue erat sodales commodo.
</p>
<p>
  Donec magna erat, imperdiet non odio sed, sodales tempus magna. Integer vitae
  orci lectus. Nullam consectetur orci at pellentesque efficitur.
</p>

p:first-child::first-letter {
  color: #5f79ff;
  float: left;
  margin: 0 8px 0 4px;
  font-size: 3rem;
  font-weight: bold;
  line-height: 1;
}

まとめ

おめでとうございます！ドロップキャップの実験を完了しました。技術を向上させるために、LabEx でさらに多くの実験を行って練習してください。