CSSの擬似要素を使いこなそう!必須なものから知っておくと便利なものまで紹介します
こんにちは。今日はCSSの擬似要素について解説します!
CSSの擬似要素は、HTMLの要素に追加のスタイルや装飾を適用するための便利な機能です。
本記事では代表的な擬似要素はもちろん、知っておくといざという時に便利なものまで幅広く紹介していきます。
実用的なサンプルコードも載せていますので、ぜひ参考にしてみてください!
目次
そもそも擬似要素とは
擬似要素は、CSSで指定された要素の特定の部分や、追加の装飾要素にスタイルを適用するための機能です。
これによってHTMLに直接新しい要素を追加することなく、デザインを柔軟に調整することができます。
擬似要素は例えば「h1::after」のように要素の後ろにコロン(::
)と擬似要素名を記述します。
一般的には以下のような特徴を持ちます。
- 要素の一部を装飾: 例えば、最初の文字や行だけを装飾することができます。
- 追加の内容を生成: ::before や ::after を使って、要素の前後にコンテンツを挿入できます。
- 特定の状態に応じたスタイル適用: ユーザー操作やブラウザ環境に応じたデザインを可能にします。
擬似要素の種類とサンプルコード
::before と ::after
要素の前(before)または後(after)にコンテンツを挿入するための擬似要素です。主に装飾やアイコン追加に使用されます。
コンテンツを挿入するためには、content プロパティを必ず指定します。
以下のサンプルではボタンをホバーした時に上に透過された白いコンテンツをbefore擬似要素で表現しています。(afterでも同じ表現が可能です)
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
::first-line
ブロック要素の最初の1行にスタイルを適用します。
デバイス幅によって一列に並ぶ文字量が変わった場合でも柔軟な対応が可能です。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
::first-letter
ブロック要素の最初の文字にスタイルを適用します。
ただしインライン要素には適用されず、ブロック要素やブロックコンテナ要素でのみ機能します。
また、生成されたコンテンツ(::beforeや::afterなど)は対象外です。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
::selection
ユーザーが選択したテキストにスタイルを適用します。
ただし、使用可能なプロパティは背景色(background)や文字色(color)などの基本的なスタイルに限定されています。
以下の例ではテキストを選択すると背景が青く、文字色が白く表示されることがわかると思います。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
::focus-within
要素内にフォーカスされた要素がある場合にスタイルを適用します。
以下の例では入力欄を構成するinput要素にカーソルを合わせると、親要素の背景色やボーダーの値が変わります。そうすることで入力欄をより目立たせるデザインとなっています。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
::marker
リストアイテムのマーカー(番号や箇条書き記号)にスタイルを適用します。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
::backdrop
dialog要素を使ってモーダルウィンドウを作成した際、背面に表示される背景部分にスタイルを適用する擬似要素です。
以下のサンプルでは、「モーダルウィンドウを表示」ボタンをクリックするとウィンドウの周りの背景色が透過された黒色で表示されているのが分かると思います。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
ちなみに、dialog要素を使ってモーダルウィンドウを動かす仕組みとしてHTML内にJavascriptの命令を記述しています。
「ダイアログを表示」ボタンをクリックした際「id=”dialog”」を持つ要素を取得し「.showModal()メソッド」を使ってモーダルを表示させ、
「閉じる」ボタンをクリックした際には親要素であるdialog要素を取得し「.close()メソッド」でモーダルを非表示にさせています。
<input type=”file”> のファイル選択ボタンにスタイルを適用します。
ページデザインに合わせたカスタマイズが可能となります。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
まとめ
本記事ではCSSの擬似要素の種類や用途、具体的な使用例を解説しました!
擬似要素を使うことでHTML構造を変更せずにスタイルを柔軟に適用できるため、効率的にデザインを実現するのに役立ちます。
追加の装飾を作るだけでなく、ユーザーの動作に応じたインタラクティブなスタイルの適用も可能となりますので、ぜひ習得して制作にお役立ていただければと思います。
STUDIO NNC 合同会社ではコーディングのみなど部分的なお手伝いはもちろん、WEBサイトのコンセプト設計からデザイン、ワードプレス構築まで一貫した制作を得意としております。ご相談がございましたら、お気軽にフォームよりお問い合わせください!