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を備忘録を兼ねて記述します。

テキストを出現させる

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

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”rvRjQX” default_tab=”html,result” user=”yu-urushizaki”]See the Pen rvRjQX by Yu Urushizaki (@yu-urushizaki) on CodePen.[/codepen_embed]

 

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

画像を出現させる

次に画像を入れ込みます。リストタグのスタイルを消して、treeのロゴを入れてみましょう。
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”PMmeGV” default_tab=”css,result” user=”ramentabetaidesu”]See the Pen <a href=’https://codepen.io/ramentabetaidesu/pen/PMmeGV/’>PMmeGV</a> by ktk (<a href=’https://codepen.io/ramentabetaidesu’>@ramentabetaidesu</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

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

矢印をつける

CSSで矢印をつけられるようになって、本当にWebサイトの画面が綺麗になりました。サイト内のリンクをコーディングする際にも、とても役立ちますので矢印のコードも残しておきます。
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”aKoXNg” default_tab=”css,result” user=”yu-urushizaki”]See the Pen aKoXNg by Yu Urushizaki (@yu-urushizaki) on CodePen.[/codepen_embed]

 

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

 

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

ツールチップの実装

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

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”PMmaWN” default_tab=”css,result” user=”ramentabetaidesu”]See the Pen <a href=’https://codepen.io/ramentabetaidesu/pen/PMmaWN/’>PMmaWN</a> by ktk (<a href=’https://codepen.io/ramentabetaidesu’>@ramentabetaidesu</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

 

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

 

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

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

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