HTML・CSS

【初心者OK】CSS疑似要素の種類と書き方 超簡単に解説

画像：CSS疑似要素の種類と書き方解説

これからCSSを勉強してみたいと考えている方向けに、超簡単に噛み砕いて解説しています。どんな感じなのかなぁ～、くらいの興味でオッケー。

今回は「CSSの疑似要素について」書いています。今回の疑似要素を理解し、使いこなせると初心者からは脱出です。なぜならCSS疑似要素を使う事で、普通では難しい表現が可能になるから。
ここから先は表現の幅が格段に上がります。

小難しい事はあえて書いてませんが、勉強順は、基本セレクター → 疑似クラス → 今回の「疑似要素」が絶対おすすめ。
この順番でやるのが、理解を早めるコツです。

画像：CSS基本セレクターの種類と書き方解説
関連記事【初心者OK】CSS基本セレククターの種類と書き方を基礎から解説
画像：CSS疑似クラスの種類と書き方解説
関連記事【初心者OK】CSS疑似クラスの種類と書き方 超簡単に解説
CSSとはCascading Style Sheets（カスケーディング・スタイル・シート）
CSSとはCascading Style Sheets（カスケーディング・スタイル・シート）の事。webサイトのレイアウト文字の色など、見た目を調整する役割として使います。
一方、HTMLは文書構造を構築する役割を担っています。よく「本」に例えられます。

CSSセレクターとは（CSSの基礎・HTMLの予備知識）

CSSは、HTMLで作られた構造に対して文字の色やレイアウトの指定など、見た目の調整を行うもの。その調整をどこにするのかを指定する時に使うのが「CSSセレクター」です。

]HTMLとCSSはそれぞれ役割が違うんだね

この記事では「CSS疑似要素」というものを説明していきます。

「もう知ってるよー」って方は、「CSS疑似要素とは？」の項目へどうぞ

予備知識：HTMLの構造

CSSを理解する前にまずHTMLがどのような仕組みか知っていると理解が深まります。

HTMLはタグと呼ばれる記号で構成されています。
開始タグと終了タグがあり、文章などの情報をこのタグで囲むことにより意味を持ちます。そして、この開始タグから終了タグで囲われた所を「要素」といいます。

図解：要素の仕組み解説

タグによって使えるものに違いはありますが、「属性」とその値である、「属性値」を指定出来ます。
後で紹介する「id」や「class」も、「属性」と「属性値」になります。

さらに、要素をタグで囲むことも出来ます。「入れ子」と言ったりもします。
下の図だと、三つの要素は階層構造になっています。
外側の要素を「親要素」、内側の要素を「子要素」といい、子要素のさらに内側が「孫要素」です。

図解：HTMLの要素入れ子構造
サンプルでは<div>が親要素。更に上にさかのぼって行けば<html>が親要素になります。

CSSの基本文法

CSSは、「セレクター」「プロパティ」「値」の3つで構成されています。
セレクターで指定する事により、デザインの適用先を選択しています。
図解：cssの文法書き方
フエル

CSSを適用する事を、「CSSを掛ける」と言ったりするよ。

CSS疑似要素とは？

擬似要素とは選択された要素の特定部分にスタイルを適用させる事が出来ます。
また、文字通り、疑似的に要素を生成することで、HTMLファイルに変更を加えることなくスタイルを変化させることが出来ます。

CSS疑似クラスとのちがい
疑似クラスはセレクタに付加するキーワードのことで、選択された要素に対して特定の状態のスタイルを指定するものです。
フエル

表示結果は、分かり易いようにタグを付けて表示しているよ。

CSS疑似要素の種類

1．X::first-letter（要素の1行目の最初の文字を指定）

::first-letterは、1行目の最初の文字にスタイルを適用します。

■ HTML
<p class="sample">
テキストが入ります。<br>
改行しても1行目の最初の文字に適用されます。
</p>
■ CSS
.sample::first-letter {
  color: #00bce9;
}
図解：疑似要素first-letterの表示結果

2．X::first-line（要素の最初の1行を指定）

::first-lineは、最初の1行にスタイルを適用します。

■ HTML
<p class="sample">
テキストが入ります。<br>
改行しても最初の1行に適用されます。
</p>
■ CSS
.sample::first-line {
  color: #00bce9;
}
図解：疑似要素first-lineの表示結果

3．X::before（要素の最初の子要素を作成）

::beforeは、選択した要素の最初の子要素として擬似要素を作成します。CSSのプロパティには「content」が必要です。

HTMLに記述することなく要素の内容を変更したり追加したりすることが出来ます。 メニューの前にアイコンを表示させる時によく使いますね。 
■ HTML
<p class="sample">
::before ←　開発者ツールで見るとここに追加されます。
テキストが入ります。
</p>
■ CSS
.sample::before {
  color: #00bce9;
  content: "この様に追加出来ます。";
}
図解：疑似要素beforeの表示結果

4．X::after（要素の最後の子要素を作成）

::afterは、選択した要素の最後の子要素として擬似要素を作成します。CSSのプロパティには「content」が必要です。

HTMLに記述することなく要素の内容を変更したり追加したりすることが出来ます。 先程と同じくメニューにアイコンを表示させる時によく使いますね。こちらは要素の後ろに追加されます。 
■ HTML
<p class="sample">
テキストが入ります。
::after ←　開発者ツールで見るとここに追加されます。
</p>
■ CSS
.sample::before {
  color: #00bce9;
  content: "今度は後ろに追加されました。";
}
図解：疑似要素afterの表示結果

まとめ：疑似要素編

今回は疑似要素を紹介いたしました。疑似要素のなかでも「::before」「::after」は様々な表現が可能になるので必須だと言えます。

この他にもセレクターはあるのでこれらの記事と合わせてご覧くださいね。表現の幅が広がりますよ。

画像：CSSと疑似要素で作る吹き出し。before・afterに枠線で三角を作る。
関連記事CSSの吹き出しを擬似要素で作成！コピペOK｜before afterの使い方
画像：CSS基本セレクターの種類と書き方解説
関連記事【初心者OK】CSS基本セレククターの種類と書き方を基礎から解説
画像：CSS疑似クラスの種類と書き方解説
関連記事【初心者OK】CSS疑似クラスの種類と書き方 超簡単に解説