これからCSSを勉強してみたいと考えている方向けに、超簡単に噛み砕いて解説しています。どんな感じなのかなぁ～、くらいの興味でオッケー。
今回は「CSSの疑似要素について」書いています。今回の疑似要素を理解し、使いこなせると初心者からは脱出です。なぜならCSS疑似要素を使う事で、普通では難しい表現が可能になるから。
ここから先は表現の幅が格段に上がります。
小難しい事はあえて書いてませんが、勉強順は、基本セレクター → 疑似クラス → 今回の「疑似要素」が絶対おすすめ。
この順番でやるのが、理解を早めるコツです。
一方、HTMLは文書構造を構築する役割を担っています。よく「本」に例えられます。
この記事の目次
CSSセレクターとは（CSSの基礎・HTMLの予備知識）
CSSは、HTMLで作られた構造に対して文字の色やレイアウトの指定など、見た目の調整を行うもの。その調整をどこにするのかを指定する時に使うのが「CSSセレクター」です。
この記事では「CSS疑似要素」というものを説明していきます。
「もう知ってるよー」って方は、「CSS疑似要素とは？」の項目へどうぞ
予備知識：HTMLの構造
CSSを理解する前にまずHTMLがどのような仕組みか知っていると理解が深まります。
HTMLはタグと呼ばれる記号で構成されています。
開始タグと終了タグがあり、文章などの情報をこのタグで囲むことにより意味を持ちます。そして、この開始タグから終了タグで囲われた所を「要素」といいます。
タグによって使えるものに違いはありますが、「属性」とその値である、「属性値」を指定出来ます。
後で紹介する「id」や「class」も、「属性」と「属性値」になります。
さらに、要素をタグで囲むことも出来ます。「入れ子」と言ったりもします。
下の図だと、三つの要素は階層構造になっています。
外側の要素を「親要素」、内側の要素を「子要素」といい、子要素のさらに内側が「孫要素」です。
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;
}
2．X::first-line（要素の最初の1行を指定）
::first-lineは、最初の1行にスタイルを適用します。
■ HTML
<p class="sample">
テキストが入ります。<br>
改行しても最初の1行に適用されます。
</p>
■ CSS
.sample::first-line {
color: #00bce9;
}
3．X::before（要素の最初の子要素を作成）
::beforeは、選択した要素の最初の子要素として擬似要素を作成します。CSSのプロパティには「content」が必要です。
■ HTML
<p class="sample">
::before ← 開発者ツールで見るとここに追加されます。
テキストが入ります。
</p>
■ CSS
.sample::before {
color: #00bce9;
content: "この様に追加出来ます。";
}
4．X::after（要素の最後の子要素を作成）
::afterは、選択した要素の最後の子要素として擬似要素を作成します。CSSのプロパティには「content」が必要です。
■ HTML
<p class="sample">
テキストが入ります。
::after ← 開発者ツールで見るとここに追加されます。
</p>
■ CSS
.sample::before {
color: #00bce9;
content: "今度は後ろに追加されました。";
}
まとめ：疑似要素編
今回は疑似要素を紹介いたしました。疑似要素のなかでも「::before」「::after」は様々な表現が可能になるので必須だと言えます。
この他にもセレクターはあるのでこれらの記事と合わせてご覧くださいね。表現の幅が広がりますよ。
note
]HTMLとCSSはそれぞれ役割が違うんだね