IT初心者の分かったメモ

1.　はじめに

Webサイトのデザインを工夫していると、「同じデザインの要素を使い回したい」「文字の前後に装飾や記号を付けて見やすくしたい」と思うことがありますよね。そんなときに便利なのが、CSSの疑似要素（ぎじようそ）です。疑似要素を使うと、HTMLの構造を変えずにテキストの前後にマークを付けたり、一部分だけデザインを変えたりできます。デザインの自由度が高まるだけでなく、コードをすっきり保てるのも大きなメリットです。この記事では、初心者の方でもわかりやすいように、疑似要素の基本的な仕組みと代表的な使い方を紹介します。

2.　疑似要素とは

疑似要素（pseudo-element）とは、HTMLには書かれていない要素をCSSで作り出す機能のことです。テキストの一部を強調したり、前後に記号やマークを追加したりする際に使われます。

a::after {
  content: "→";
  margin-left: 6px;
  color: #555;
}

リンクボタンの右側に矢印を付けたい場合も、疑似要素が便利です。HTMLに文字やアイコンを追加しなくても、CSSだけで装飾を加えることができます。デザインを変更したいときもCSSを書き換えるだけで済み、CSSで設定したデザインを使い回せるのが魅力です。

3. 疑似クラスとの違い

疑似要素の他にも「:hover」や「:active」といった要素が特定の条件を満たしたときにスタイルが充てられる疑似クラスというものがあります。よく混同されがちですが、疑似要素とは目的が異なります。

• 疑似クラス（:hoverなど）：要素の「状態」にスタイルを当てる
• 疑似要素（::beforeなど）：要素の「特定の部分」や「仮想的な要素」にスタイルを当てる

4. 疑似要素の種類

この章では主な疑似要素を紹介します。実際のコーディングでは最初の「before」と「after」が主に使われますが、特定の要素を指定する疑似要素も紹介していきます。

h2::before {
  content: "★";
  color: orange;
  margin-right: 5px;
}

h2::after {
  content: "★";
  color: orange;
  margin-left: 5px;
}

h2::first-letter {
  font-size: 20px;
  color: blue;
}

h2::selection {
  background-color: yellow;
  color: black;
}

5. 疑似要素を使うときのポイント

疑似要素を使う際は、いくつか注意点があります。

• ::before と ::after を使う場合は、必ず content プロパティが必要です。
• 疑似要素はHTMLには存在しないため、SEOやスクリーンリーダーには認識されません。
• あくまで装飾目的で使うのがおすすめです。

.li_plus::after{
 content: '→ これを省略すると何も表示されません。';
 margin-left: 20px;
 display: block;
}

.li_plus2::after{
 content: '→ 意味のあるテキストを表示したいときはHTMLで記述しましょう。';    
 margin-left: 20px;
 display: block;
}

6. まとめ

疑似要素を使うと、HTMLの構造を変えずにデザインの幅を広げることができます。特に::beforeと::afterは、装飾やアイコンの追加などによく使われる基本的な疑似要素です。まずは簡単な記号や線の追加から試して、デザインを少しずつアレンジしてみてください。使いこなすと、より簡単にWeb制作が進みます。