CSSの擬似要素(before・after)を使用してできるコーディングをご紹介!

記事公開日:2018.05.30

最終更新日:2018.06.08

593 PV

CSSの擬似要素(before・after)を使用してできるコーディングをご紹介!

最近では、CSSのコーディングをする時に、擬似要素が必要不可欠になっています。今回の記事では、擬似要素を使用したコーディングをご紹介します。

CSSはデザインをするコード

コードの画面

そもそもCSSとは、Cascading Style Sheetの略で、Webサイトの装飾を記述する言語の一つです。現在では、CSS3の策定が進んでいます。

before・afterの使い方

CSSの擬似要素には、様々なセレクタがあります。

 

擬似要素first-line要素の最初の一行目にスタイルを適用
first-letter要素の最初の一文字目にスタイルを適用
before要素の前にスタイルを適用
after要素の後にスタイルを適用

 

今回はよく使用するbefore・afterを紹介します。

 

擬似要素のbefore・afterとは、記述したhtmlのタグ・クラス・idの前後に、CSSで「:before」や「::after」をを記述することによって、擬似的な要素を作成することができます。

 

before・afterの記述方法は、他のCSSとは少し異なります。慣れるまでは記述するのに悩むかもしれませんが、デザインの幅が広がるコードなので習得しましょう。

beforeは前、afterは後

擬似要素のbefore・afterは下記のように記述します。

 

li::before{content: ‘hogehoge’; -ここにスタイルを記述-}

li::after{content: ‘hogehoge’; -ここにスタイルを記述-}

 

原則として、タグ・クラス・idにbefore・afterを記述します。beforeは要素の前に、afterは要素の後ろにスタイルを装飾することができます。

擬似要素の注意点

悩んでいる女性

CSS3以前のCSS2では、擬似要素を記述する際「:before」「:after」というようにコロン(:)は1つしか書きませんでしたが、現在のCSS3は「::before」「::after」とコロン(:)を2つ書くように変わりました。擬似要素の記述が、擬似クラス(child擬似クラスやhover擬似クラスなど)と同じため変更されたようです。

 

現在もシングルコロンの擬似要素を多く見かけますが、ブラウザ的にはシングルコロンの方が正常に表示されます。IE8では、ダブルコロンも対応されているのですが、8以下のブラウザではダブルコロンが対応していない場合があります。

 

ダブルコロンで記述する擬似要素の対応ブラウザは、IE8〜・Firefox1~・Opera4/7・Safar1〜です。大体のブラウザが対応してるので、安心して記述できますね。

before・afterでできること

擬似要素のbefore・afterを記述することで、Webデザインの幅が広がります。いつもWebサイトの構築で使用しているbefore・afterを備忘録を兼ねて記述します。

テキストを出現させる

まずは基本的な文字入れです。

See the Pen rvRjQX by Yu Urushizaki (@yu-urushizaki) on CodePen.dark

 

リストタグの先頭に「赤い」というテキストを表示させる場合、contentプロパティの値に「赤い」という文字を入れます。上記記述だけでリストタグの先頭にテキストの入れ込みができます。

画像を出現させる

次に画像を入れ込みます。リストタグのスタイルを消して、Bigmacのロゴを入れてみましょう。

See the Pen PevdZm by Yu Urushizaki (@yu-urushizaki) on CodePen.dark

 

リストタグの先頭に画像を表示させる場合、contentプロパティの値に画像の絶対パス、もしくは相対パスを記述します。周りの余白などを整えるには、普段通りmarginやpaddingなどを使用します。

矢印をつける

CSSで矢印をつけられるようになって、本当にWebサイトの画面が綺麗になりました。サイト内のリンクをコーディングする際にも、とても役立ちますので矢印のコードも残しておきます。

See the Pen aKoXNg by Yu Urushizaki (@yu-urushizaki) on CodePen.dark

 

aタグに矢印を記述する方法は人によって様々あると思いますが、まず、beforeのcontentプロパティの値に矢印の横棒を記述します。次に、afterのcontentプロパティの値に、矢印の傘の部分を作成します。最後にafter部分のborderを斜めにするよう記述すると、矢印が完成します。

 

aタグ以外にもスライダーのnext・prevの部分にも使用できますので、覚えておいて損はないと思います。

ツールチップの実装

ツールチップは、説明するよりも見た方がわかりやすいかと思いますので、まずはデモを表示します。

See the Pen zaOedg by Yu Urushizaki (@yu-urushizaki) on CodePen.dark

 

ツールチップは、ポップアップと機能が似ています。マウスオーバーで、補足文字がポップアップされるコードです。

 

htmlで大事な記述は、<span class=”tooltip” data-tooltip=”木田だよ”></span>の部分です。マウスオーバーした時に表示したい文字をdata-tooltip=””の部分に指定します。

擬似要素できれいなサイトを作成する

ワイヤーフレーム

今回ご紹介しました擬似要素を使用してできることは、ほんの一部です。他にも、リボンのような見出しのデザインができたり、様々なデザインがきれいにコーディングすることができます。ユーザーに満足してもらうサイトを作成するためには、擬似要素は必要不可欠です。

このエントリーをはてなブックマークに追加

筆者

Y.Urushizaki

1日を100%全力で生きるをモットーに毎日すごしています。幸せだなと思う瞬間は仕事終わりに「今日も頑張った」と思いながら駐車場まで歩く時と、近所の野良猫と遊んでいる時です。最近自覚したことは周囲も驚くほどの雨女だったことで、過去に行ったテーマパーク(ディズニー・ユニバ・富士急・ナガスパ)はほとんど雨の思い出がしかありません。たまにテーマパークで晴れると自分より強い晴れ男・晴れ女が存在する事実に少しテンションがあがります。

筆者が最近執筆した記事