PR

【CSS】疑似要素とは?初心者向けにわかりやすく3分で解説

CSS

疑似要素(pseudo-element)は、HTML要素の特定の部分に対してスタイルを適用するために使用されます。

参考 HTMLの要素とは?

例えば、::before::afterなどの疑似要素を利用することで以下のように「HTMLを直接修正する必要なく」指定した要素の前後にテキストやアイコンを挿入することができます。

See the Pen 疑似要素① by ビズドットオンライン (@biz-online) on CodePen.

このページでは、HTML/CSS初心者向けに疑似要素とは何か?をわかりやすく1から解説します。

このページで学べる内容
  • 疑似要素とは?
  • 疑似要素の使い方・構文ルール
  • 代表的な疑似要素

Webエンジニアを目指す方であれば知らないと恥ずかしい超・基本知識の1つです。是非最後までご覧ください。

スポンサーリンク

疑似要素とは?

疑似要素(pseudo-element)は、CSSセレクタで使用される擬似クラス(pseudo-class)の一種で、HTML要素の特定の部分に対してスタイルを適用するために使用されます。

参考 疑似クラスとは?

See the Pen 疑似要素① by ビズドットオンライン (@biz-online) on CodePen.

詳しく説明すると、以下の sample クラスに対して

<div class="sample">Hello, world!</div>

疑似要素「::before」「::after」が利用されることで、”Hello, world!” という文字列の前後にテキストコンテンツが追加される仕組み。

.sample::before {
  content: 'Before ';
  color: red;
}

.sample::after {
  content: ' After';
  color: blue;
}

このように、ある特定の要素の部分を指し示すのが疑似要素のポイントです。

参考 divタグ

疑似要素と疑似クラスの違い
疑似要素 vs 疑似クラス
  • 疑似クラス
    要素の状態に基づいてスタイルを適用する
  • 疑似要素
    要素の特定の部分に対してスタイルを適用する

疑似クラスは、要素の状態に基づいてスタイルを適用するために使用されます。例えば、:hoverは要素がマウスオーバーされたときにスタイルを適用するために使用されます。

一方、疑似要素は、要素の特定の部分に対してスタイルを適用するために使用されます。例えば、::before::afterは、要素の前後にテキストやアイコンを追加するために使用されます。

参考 疑似クラスとは?

ここまでの説明だけではまだよくわからない・・・!という方も他の疑似要素を見ていくことで徐々にイメージが湧くはずです。

ここからは実際に利用される代表的な疑似要素と、そのサンプルコードを解説します。

代表的な疑似要素

以下がよく利用される代表的な疑似要素です。利用頻度としては::before::afterが圧倒的ですが、その他の疑似要素についても知っておくと便利です。

疑似要素説明
::before要素の開始タグの前にコンテンツを挿入するために使用される。
::after要素の終了タグの後にコンテンツを挿入するために使用される。
::first-letterブロックレベル要素の最初の文字にスタイルを適用するために使用される。
::first-line要素の最初の行にスタイルを適用するために使用される。
::selectionテキストが選択されたときにスタイルを適用するために使用される。
::placeholderフォームの入力欄にプレースホルダーテキストを表示するために使用される。
::markerリストのマーカー(箇条書きの数字や記号など)にスタイルを適用するために使用される。
::backdropdialog要素などの背景にスタイルを適用するために使用される。::backdropbody要素よりも上位の階層に配置される。

実際に上記の疑似要素を利用したサンプルコードがこちらです。

サンプルコード

See the Pen 疑似要素② by ビズドットオンライン (@biz-online) on CodePen.

このサンプルコードでは、各疑似要素を使って以下のようなスタイルを適用しています。

  • ::before: テキストの前にアイコンを表示する。
  • ::after: ボタンの後ろに矢印を表示する。
  • ::first-letter: テキストの最初の文字に赤い大きなフォントを適用する。
  • ::first-line: テキストの最初の行に太字のスタイルを適用する。
  • ::selection: テキストが選択されたときに、背景色を黄色に変更する。
  • ::placeholder: フォームの入力欄にプレースホルダーテキストをグレーの斜体で表示する。
  • ::marker: リストのマーカー(リストの数字や記号)に青く太字のスタイルを適用する。
  • ::backdrop: dialog要素の背景を半透明の黒に設定する。

これらの疑似要素を使うことで、HTML要素の特定の部分にスタイルを適用できます。疑似要素は、WebサイトやWebアプリケーションのデザインに役立つ強力なツールです。

疑似要素のまとめ
  • 疑似要素: CSSで使用される、ページ要素の特定部分にスタイルを適用する仮想的な要素。
  • ::before, ::after: 疑似要素の例で、要素の前後にコンテンツを追加する。
  • 装飾・デザイン効果: 疑似要素を使って、要素の構造を変更せずにスタイルを調整。

Webエンジニア向け→完全無料のHTML/CSS/JS ロードマップ

Webエンジニアを目指す方にとって避けては通れないベースとなる超・重要知識の1つがHTML/CSS/JavaScriptです。

以下のページでは、そもそもHTMLって何?何のために学習するの?という疑問に回答しつつ、HTML/CSS/JavaScriptを学習するためのロードマップ(全50記事)を整理しています。

Webエンジニアを目指す方に、完全無料でかつ短時間で理解できるようにまとめましたので是非ご覧ください。

このWebサイトは現役のエンジニアが以下3点を目的として運営しています。

  1. 勉強:一度理解した内容を忘れないように。
    → アウトプットは「最強のインプット」である! 
  2. 備忘:忘れたとしても後から見返せるように。
    → 未来の自分への「お手紙」を書いています。 
  3. 共有:〇〇ってこうだったんだ!の感動をシェアできるように。
    → あなたの知識は誰かにとっての「価値ある情報」です。 

副業ブログの始め方はこちらから

スポンサーリンク
CSSHTMLWEBデザイン
シェアする
ビズドットオンラインをフォローする
blank
ビズドットオンライン
タイトルとURLをコピーしました