#前置き
3記事目です。
日々学ぶことだらけのプログラミング初心者@mt_taiと申します。
この記事では、cssの疑似要素について少し学習したことをまとめていきます。
今回は少なめです。
#cssの疑似要素とは
cssでの疑似要素とは ::before ::after を用いることで、指定した要素の前後に新たな要素を挿入できるセレクタです。
まずは簡単な使い方の例を示します。
<body>
<p>Hello World</p>
</body>
body p::after {
content: "!"; /* "Hello World"の後ろに"!"を追加 */
}
結果は以下のようになります
htmlではHello Worldとしか記述していませんが、cssで!を要素の後ろに追加したので
表示結果はHello World!となっています。
beforeで要素の前に新たな要素を挿入、afterで要素の後に新たな要素を挿入できます。
この疑似要素の利点として、元のhtmlコードの可読性を維持したままページの整形が行えます。
また、上記例のように、単純に文字を挿入することはもちろん、画像やurlを挿入することも可能です。
ただ、画像を挿入した場合はサイズ指定が不可能となっているので、
以下のようにbackground-imageで背景として挿入することでその問題点を回避できます。
body p::after {
content: ""; /* contentで何も入れず、疑似要素を実体化 */
display: "inline-block"; /* blockかinline-blockに指定しないと、幅と高さの指定ができない */
width: 100px; /* 幅の指定 */
height: 100px; /* 高さの指定 */
background-image: url("画像のurl"); /* 背景として画像を指定 */
}
疑似要素自体の幅と高さの変更は可能なので、この方法で画像のサイズ指定と同じ振る舞いができるわけですね。
うまく設定すれば、いろんな図形や、特定のボーダーラインなどが作れるみたいです。
htmlコードの方でごちゃごちゃしなくて済むのはありがたいですね。
（とくに私みたいな初心者は汚いコードを安易に量産してしまうので…）
ちなみに、例ではbeforeとafterの手前につけるコロンは2つで統一していますが、
cssの最新規格であるCSS3では2つ(::)であるのに対し、以前のCSS2では1つ(:)です。
そのため、対象にしているブラウザでコロンの数を使い分けるか、とりあえず多くのブラウザで適用させたいのであればコロンは1つにしておくのが良いのかもしれません。
#終わりに
今回はcssの疑似要素について、本当に基本的な部分をまとめました。
疑似要素の他にも疑似クラスが存在します。こちらも便利なものですが、まだ学習できていない部分も多いので、引き続き学習を進めていきたいと思っています。
cssはセレクタやプロパティの理解が深まれば、その分複雑な表現が可能となってくるので、表現の幅を広げるためにもしっかり理解を深めていきたいです。