CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの::first-letter疑似要素で文章の最初の一文字をおしゃれに装飾する方法

::first-letter疑似要素とは？

CSSでは、::first-letter（ファーストレター）疑似要素を使うことで、要素の最初の一文字だけを自由に装飾できます。雑誌や書籍の冒頭でよく目にする「ドロップキャップ」と呼ばれる演出効果も、追加のHTMLマークアップや画像を用意することなく、CSSだけで手軽に実現可能です。

なお、::first-letterの適用対象となる「最初の文字」は、句読点などの記号、ダイグラフ（合字）、contentプロパティによって生成されるコンテンツなどが存在する場合には変化することがあるため、注意が必要です。

それでは、CSSの::first-letter疑似要素を使った具体的なサンプルコードを見ていきましょう。

例1：最初の文字を大きく強調する

次の例では、::first-letterを使って各要素の先頭文字に対し、フォントサイズ・文字色・背景色・影（box-shadow）を設定しています。

<!DOCTYPE html>
<html>
<head>
<style>
body {
   text-align: center;
}
::first-letter {
   font-size: 3em;
   color: sienna;
   box-shadow: -10px 0 10px green;
   background-color: gainsboro;
}
</style>
</head>
<body>
<h2>Proin ut diam eros</h2>
<p>Donec rutrum a erat vitae interdum. </p>
<p>Integer eleifend lectus sit amet purus semper, ut pharetra metus gravida.</p>
</body>
</html>

表示結果

上記のコードを実行すると、以下のように表示されます。

CSSの::first-letter疑似要素で文章の最初の一文字をおしゃれに装飾する方法

例2：text-shadowで立体感を加える

続いて、text-shadowプロパティを組み合わせて、より個性的で印象的なデザインに仕上げた例を紹介します。

<!DOCTYPE html>
<html>
<head>
<style>
body {
   text-align: center;
}
body > * {
   background-color: slategrey;
}
::first-letter {
   font-size: 1.6em;
   color: darkviolet;
   background-color: silver;
   text-shadow: -15px 8px palevioletred;
}
</style>
</head>
<body>
<h2>Proin ut diam eros
<p>Donec rutrum a erat vitae interdum. </p>
<p>Integer eleifend lectus sit amet purus semper, ut pharetra metus gravida.</p>
</body>
</html>

表示結果

上記のコードを実行すると、以下のように表示されます。

CSSの::first-letter疑似要素で文章の最初の一文字をおしゃれに装飾する方法

まとめ

::first-letter疑似要素を使えば、わずか数行のCSSだけでテキストの先頭文字を印象的に装飾できます。フォントサイズや色の変更に加え、box-shadowやtext-shadowといった視覚効果も自由に組み合わせられるため、ブログ記事やランディングページの導入文を目立たせたい場面でぜひ活用してみてください。

  1. CSS属性セレクターでフォームを美しくスタイリングする方法

    CSS属性セレクターとは CSSの属性セレクターを使用すると、特定の属性やその値を持つHTML要素だけを対象にスタイルを適用できます。フォームの入力欄やボタンのように、同じタグでも役割が異なる要素を個別に装飾したい場合に特に便利です。 属性セレクターには、主に以下のような記述ルールがあります。 p[lang] ― lang属性を持つすべてのp要素を選択します。 p[lang=fr] ― lang属性の値が「fr」に完全一致するすべてのp要素を選択します。 p[lang~=fr] ― lang属性の値に「fr」という単語が含まれるすべてのp要素を選択します(空白区切りの値リストに部分一致)。

  2. CSSの::file-selector-buttonセレクターを使ってファイルアップロードボタンをスタイリングする方法

    ファイルアップロードボタン（input type=file）は、デフォルトのままだとブラウザごとに見た目が異なり、サイトのデザインに馴染まないことがあります。そこで活躍するのが、CSSの疑似要素 ::file-selector-button です。この疑似要素を使えば、「ファイルを選択」ボタンの部分だけを自由にスタイリングできます。ただし、::file-selector-button の完全なサポートは Firefox および Firefox for Android に限られています。Safari・Chrome・Opera などのWebKit/Blink系ブラウザに対応させるには、ベンダー接頭