今さら聞けないHTMLの基礎的な話として、実務中にたまに見るあまり良くない実装をされがちなHTML・CSSを考えていこうと思います。
今回取り上げるのは擬似要素です。主によく使われる::beforeと::afterを紹介します。
そもそも擬似要素って何？
CSS の 擬似要素 (Pseudo-elements) は、セレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。
擬似要素 – CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-elements
擬似要素には様々な種類のものがあり、指定した要素の中の特定の部分に対してスタイルを適用するために使用します。
例えば、文章の先頭の文字を指定する::first-letterを使用すると、以下の様なスタイルの適用が可能になります。
See the Pen Untitled by SekappyOfficial (@Sekappy) on CodePen.
似たようなものとして擬似クラスがありますが、こちらは特定の状態にある指定した要素に対してスタイルを適用するためのものになります。
See the Pen Untitled by SekappyOfficial (@Sekappy) on CodePen.
擬似要素はキーワードの先頭にコロンを2つ、擬似クラスはコロンを1つ付けて記述します。
※余談ですが、CSS2以前は擬似要素でも先頭につけるコロンは1つだけでした。CSS2以前から存在する擬似要素は現在でもコロン一つで動作しますが、推奨されていません。
::beforeと::after
今回の記事では、特によく使用される::beforeと::afterを中心に解説していきたいと思っています。
擬似要素::beforeと::afterは、それぞれ指定した要素の前と後に新しい要素を作成します。
::before (:before) – CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/::before
See the Pen before-heart by SekappyOfficial (@Sekappy) on CodePen.
一般的に画面上に表示されるコンテンツはHTMLによって書かれ、CSSはそのデザインを調整する役割を担っていますが この擬似要素を使用することにより、CSS側から表示コンテンツを出力することができます。※ただし、これにより出力されるコンテンツはあくまで表示上のものであり、DOM要素として実際に出力されているわけではありません。例えば検索エンジンのクローラー等はこれを正常に把握できない場合があります。
あくまでデザイン調整目的で使用しましょう。
実際の使用方法
多人数で開発をする際などで、CSSをコンポーネント的に使用する場合に非常に役立ちます。
例えば以下の様なボタンのデザインを考えてみましょう。
まずは、アンチパターンからご紹介します。よくない書き方として、以下のようなコードで実装することができます。
See the Pen Untitled by SekappyOfficial (@Sekappy) on CodePen.
このパターンだと、実装者がこのボタンのHTML側を作成する際に
- ボタン部分に特定のclassを付与する
- ボタン内にハートマークを表示するための要素を用意する
- ハートマークの要素に特定のclassを付与する
と少々煩雑な手順を踏む必要があります。HTML部分も汚くなりがちです。
これを擬似要素を使った形に書き換えると以下の様になります。
See the Pen heart-button by SekappyOfficial (@Sekappy) on CodePen.
HTMLが非常に簡潔になりました。classを一つ付与するだけで実装が完了します。::beforeや::afterを使用することによって、一つのclassにより多くの意味を持たせられることになり、HTML側の実装者に対してよりフレンドリーな実装になるでしょう。
まとめ
多人数での開発をする際に、擬似要素は非常に強力な機能です。
CSSを書く人は、HTML側での実装がなるべく簡潔になるようにスタイルを書いてあげるといいでしょう。
また、CSS3になってから擬似要素の種類が大量に増えました。
ぜひ活用してみてください。