こんにちは、Mochiです。
Webデザインにおいて、要素の装飾は重要です。しかし、全ての要素がHTML内にタグで表現されるわけではありません。ここで登場するのがCSSの擬似要素です。
擬似要素ってなんなの？ 擬似要素ってどんな種類があるんだっけ？🤔
そんな方に向けて、擬似要素の種類や使い方をわかりやすく説明します。
この記事を読むことで、擬似要素の種類を理解し、使いこなすことができるようになります。
では早速、擬似要素とは何なのかを学んでいきましょう！
🤔擬似要素とは
擬似要素（pseudo-elements）とは、CSSにおいて要素の特定の部分にスタイルを適用するための仮想的な要素です。これらの要素は実際にはHTML文書内に存在しませんが、CSSを使って特定の場所を装飾することができます。
次のものは、この後解説する一般的な擬似要素の例です。
::first-letter: 要素の最初の文字にスタイルを追加します。::first-line: 要素の最初の行にスタイルを追加します。::before: 要素の最初の子要素の前にスタイルを追加します。::after: 要素の最後の子要素の後ろにスタイルを追加します。
これらの擬似要素を使うことで、要素の特定の部分を装飾することや追加することができ、より細かいデザインを実現できます。
では、擬似要素の具体的な使い方を学んでいきましょう。
✍️擬似要素の使い方
擬似要素は次のように、タグ名の後ろに二重コロン::を記述し、さらにその後ろに要素の名前を記述して使います。
h1::before {
background-color: "gray";
}擬似要素は擬似クラスと似ているのですが、擬似クラスは1つのコロン:であり、擬似要素は2つのコロン::という違いがあるので気をつけましょう。ただし、古いバージョンでは擬似要素を1つのコロン:で記述していたので、古いバージョンを扱う際には注意しましょう。
擬似クラスって何だっけ？🤔という方は記事「CSSセレクターとは何か、基本的な種類や書き方をわかりやすく解説」を読むと理解が深まるので、おすすめです。
擬似要素を使用して、要素の特定の部分を装飾することができます。例えば、見出しの最初の文字だけを大きくし、色を変えられます。
h1::first-letter {
font-size: 150%;
color: #a357d7;
}
また、擬似要素の特徴としてcontentプロパティが利用できます。これにより、タグに要素やテキストを追加して、表示できます。
次の例では、”Before”という文字を色を変えて小さくした上で、見出し<h2>の前に表示します。
h2::before {
content: "Before";
color: #a357d7;
font-size: 50%;
}
次はさまざまな種類の装飾ができるように、擬似要素の種類とそれぞれの使い方を学んでいきましょう。
🎨擬似要素の種類
first-letter
first-letterは1文字目を装飾できる擬似要素です。たまに雑誌などで、先頭の文字だけ大きくなっている文章を見ることがありませんか？そのような装飾をすることができます。
ただし、インライン要素には使用できないので注意しましょう。インライン要素って何だっけ？という方は記事「HTMLのブロック要素でグループ化する方法の解説と一覧」を読むと学びが深まるのでおすすめです。
例えば、段落の1文字目を装飾すると次のようになります。
p::first-letter {
color: #a357d7;
font-size: 200%;
font-weight: bold;
}
first-line
first-lineは1行目を装飾できる擬似要素です。1行目だけ少し色の違うような、オシャレな装飾をすることができます。こちらもインライン要素には使用できません。
例えば、段落の1行目を装飾すると次のようになります。
p::first-line {
color: #a357d7;
}
before
beforeは指定した要素のすぐ前を装飾できる擬似要素です。装飾するだけでなく、文字を追加したりすることもできます。そのため、ちょっと前に付け足したい時に手軽に配置できてしまう、便利な擬似要素です。
また擬似要素beforeにはcontentプロパティが必須です。
例えば、見出しの前に文字を追加することができます。
h1::before {
content: "😇🙂🙃";
font-size: 50%;
}
また、何もコンテンツを入れたくない場合には、何も書かないことで実現できます。
h2::before {
content: "";
}after
afterは指定した要素のすぐ後ろを装飾できる擬似要素です。仕組みはbeforeと同じで、後ろに付け足す際に便利な擬似要素です。
また、こちらもcontentプロパティが必須です。このプロパティはテキスト以外のコンテンツも含めることができます。画像やアイコンなど、さまざまなコンテンツを要素に追加することができます。これは擬似要素beforeも同様です。
例えば、見出しの後ろに文字を追加することができます。
h1::after {
content: "←ポイント";
font-size: 50%;
color: #a357d7;
}
注意点としてbefore, after擬似要素には幅や高さを指定することができます。ただし、contentプロパティに何も含まれていない場合、幅や高さが0になり、要素が表示されません。
marker
markerはリストのドットなどのスタイルを装飾できる擬似要素です。
例えば、リストのドットを絵文字に変えることができます。
li::marker {
content: "👉";
}
他にも色を変えるなど、簡単にリストのマーカー（デザイン）を変更できます。
リストの装飾は他にもlist-styleプロパティを使って行うことが出来ます。より詳しく知りたい方は記事「CSSで点や番号などのリストマーカーを装飾する方法をわかりやすく解説」を読むのがおすすめです。
placeholder
placeholderは<input>タグや<textarea>タグのプレイスホルダーを装飾できる擬似要素です。プレイスホルダーとは、入力する箇所に書いてある文字のことです。
例えば、プレイスホルダーの色を変更することができます。
input::placeholder {
color: #a357d7;
}
selection
selectionはマウスで選択した文章を装飾できる擬似要素です。
例えば、次のようにマウスで選択した時の文字色と背景色を変更することができます。
p::selection {
color: white;
background-color: #a357d7;
}
非常に細かい部分ではありますが、自分好みの色に変えたりするのは面白そうですね。
🚨注意点
擬似要素を使用する際には、気を付けるべき注意点があります。
まず、擬似要素は、特定の要素に対してスタイルを追加するのに非常に便利ですが、過度に使用するとページのパフォーマンスに悪影響を及ぼす可能性があります。そのため、適切に使用しましょう。
次に、擬似要素はHTMLへ影響を与えないというメリットを持っています。その一方で、HTMLとして認識されないため、HTMLとして意味を付与できないというデメリットがあります。意味を付与したい場合には、ほかの方法を検討しましょう。
HTMLで意味を与えるって何？🤔という方は記事「HTMLとは何かを簡単にプログラミング初心者にもわかりやすく解説」を読むことで、理解が深まるのでおすすめです。
🎉まとめ
擬似要素のとは何か、その種類と使い方について解説しました。
そして皆さんはこの記事を読んで、擬似要素の種類を理解し、使いこなすことができるようになりました。素晴らしいです！👏
CSSの擬似要素は、Webデザインにおいて非常に役立つ要素です。これらを活用することで、要素の特定の部分にスタイルを追加し、ページの見栄えを良くできます。今回学んだことを活用して、魅力的なウェブデザインを実現していきましょう！
