記事内に商品プロモーションが含まれる場合があります
今回はCSSの超便利な疑似要素「after」と「before」の使い方をまとめます。初心者の方でも分かるように丁寧に解説していきます。
疑似要素の使い方を理解すると、本当に幅広い表現ができるようになります。
1. 疑似要素のbeforeとafterとは？
前提として「要素」とは、タグとタグではさまれた1つのカタマリを表します。たとえば、<h1>ほにゃらら</h1>は1つの要素になります。
CSSの::afterと::beforeは、疑似要素と呼ばれるものの1つです。これを使うと「HTMLには書かれていない要素もどきをCSSで作ることができる」のです。
どのような形でCSSに登場する？
::beforeと::afterは以下のような形でCSSに書かれます。
h1::before {
content: '内容';
〜スタイル指定〜
}
.example::after {
content: '内容';
〜スタイル指定〜
}
タグ名やクラス名、id名などの後に::beforeや::afterをつけるわけですね。content:''内には、挿入したい文字などを書きます。具体的な書き方は後ほど詳しく解説します。
beforeとafterの違いは？
::beforeを使うと要素の直前に要素もどきが挿入されます。一方で::afterを使うと要素の直後に要素もどきが挿入されます。
このようなイメージですね。content:''の中には挿入したい文字などを入れます。
たとえば、pタグの直前に疑似要素を使って「Hello!」という文字列を入れてみます。↓
↑HTMLでは「こんにちは」としか書かれていないのですが、CSSでその直前に「Hello!」という文字を挿入することができるわけですね。
疑似要素を使うメリット
afterやbeforeがものすごく便利なのは「HTMLコードを汚すことなく様々な表現ができる」ということです。なお、検索エンジンはCSSである疑似要素をコンテンツの中身として見ていません。そのため、SEOを気にせずにユーザーのための自由な表現ができるのです。
1つ例を紹介します。これはサルワカで以前作った「美しい文字のデザインを紹介するページ」のタイトルです。英語の文字を大きく見せたかったものの、h1タグには日本語を使いたいと考えました。
そこでh1タグ内には日本語を入れ、その前に疑似要素で英語の文字を挿入しました。つまり、英文はHTMLには書かれていないのです。これなら、英文が検索エンジンに重要だとみなされてインデックスされる心配はありません。
ちょっとマニアックな話になってしまいました。「何を言っているかよく分からない」という方は理解しなくても全く問題ありません。
疑似要素の対応ブラウザ
疑似要素はほとんどのブラウザで対応しています。気になるとすればIEかもしれません。IEは8〜の対応となっています。6、7では対応していません。とはいえ、今やこれらのブラウザのユーザーはほとんどいないので、気にせず使ってしまって問題ないでしょう。
コロン(:)の数はいくつ？
疑似要素には、コロンが1つ:beforeの書き方と、コロンが2つ::beforeの書き方があります。
CSSの最新規格であるCSS3では疑似要素はコロン2つを書く決まりとなっています。以前のCSS2ではコロンの数が1つでした。
つまり「コロン2つ」を使えるのは、CSS3に対応しているブラウザだけです。一方で「コロン1つ」ならCSS3に対応していないブラウザでも表示できます。つまり、ゆくゆくは「コロン2つ」になるけれども今は「コロン1つ」の方が多くのブラウザで使えるということですね。
beforeとafterの書き方と活用例
ここからは具体的な書き方と活用例を紹介したいと思います。
文を記号ではさむ
たとえば、class="example"の要素の前後にカゴカッコ『』をつけるように指定してみましょう。
<p class="example">これは例文です</p>CSS
.example:before{
content: '『';
color: skyblue;/*色を変える*/
}
.example:after{
content: '』';
color: skyblue;/*色を変える*/
}
↑content:''の中に挿入したい文字列を入れます。文字は水色にしてみました。このように疑似要素は普通の要素と同じようにスタイルの指定ができます。
文の直前にカッコよく英文を入れてみる
<h1 class="example">ここにタイトルを書きます</h1>CSS
.example {
text-align: center; /*中央寄せ*/
}
.example:before{/*疑似要素*/
content: 'TITLE HERE';
color: gray; /*文字色*/
font-size: 2em; /*2倍サイズ*/
display: block; /*改行するように*/
}
このように本文の前にかっこよく英文を入れることなんかもできます。display: blockとすると、前後に改行が入るようになります。詳しくは以下の記事が参考になるかと思います。
ちなみに疑似要素の文字列を好きな位置で改行する方法は以下の記事で解説しています。
絶対配置で好きな位置に表示させる
before/afterをposition: absoluteで絶対配置にすることで、自分の好きな位置に配置できるようになります。
たとえば、元の要素の左上の角に寄せたいときはこの図のように書きます。絶対配置にしてtop:0 left:0とするわけですね。このとき親要素をposition:relativeにするのを忘れないようにしましょう。
positionがよく分からないという方は以下の記事を読んでみてください。
実際に書いてみましょう。
<h1>こんにちは</h1>CSS
h1 {
position: relative;
padding: 1em;/*要素内の余白*/
background: silver;/*背景色*/
}
h1:before{/*疑似要素*/
position: absolute;
content: 'ラベル';
top: 0;
left: 0;
color: white;/*文字色*/
padding: 0.2em;/*余白*/
background: #F89174;/*背景色*/
}
要素の左上に「ラベル」と書かれた疑似要素が表示されるようになりました。ちなみに絶対配置の場合、beforeをそのままafterに変えても全く同じ表示になります。
アイコンフォントを使う例
アイコンフォントを疑似要素で表示させることもできます。たとえばFontAwesomeを使うなら以下のように書きます。
◯:before {
font-family: FontAwesome;
content: '\f1e2';
}
font-family名はFontAwesomeと書きます。\f1e2というのはアイコン種類を指定するユニコードです。
ユニコードは各アイコンのページの「Unicode：〜」というところで確認できます。コードの前には\をつけましょう。
使用例
<h3>見出しにアイコンを使おう</h3>CSS
h3:before
{
font-family: FontAwesome;
content: "\f00c";
padding-right : 5px;/*文字との隙間*/
color: #f89174;/*アイコンの色*/
}
FontAwesomeを使った見出しや箇条書きの表現については、こちらの記事で詳しく解説しています。
引用ボックスを作る
アイコンを絶対配置でうまく指定すれば、引用文をそれらしく装飾することができます。
<blockquote> <p>これは引用の文章です。</p> </blockquote>CSS
blockquote{
position: relative;
background: #EFEFEF;/*背景色*/
padding: 20px 10px 15px;/*ボックス内の余白*/
}
blockquote:before{
position: absolute;
font-family: FontAwesome;
content: '\f10d';
top: 10px;/*上からの距離*/
left: 10px;/*左からの距離*/
color: silver;
font-size: 1.5em;
}
こちらの記事で引用デザインのサンプルをたくさん紹介しています。
手順リストを作る
次にFontAwesomeの指差しアイコンを使ってフローチャート的なものを作る例を紹介します。手順解説をしたいときに便利です。
<ul class="flow"> <li>最初はこれ</li> <li>次にこれ</li> <li>最後はこれ</li> </ul>CSS
.flow {
text-align: center;/*中央寄せ*/
list-style-type: none;/*ポチ消す*/
}
.flow li:not(:last-child):after{
font-family: 'FontAwesome';
content: '\f0a7';
display: block;/*前後に改行*/
font-size: 2em;/*アイコンサイズ*/
color: skyblue;/*色*/
padding: 0.3em;/*余白*/
}
この例では、liの後に疑似要素でアイコンを表示するようにしています。li:not(:last-child):afterというのは『li:afterを指定するが、最後のliは除く』という意味の指定になります。ちょっと分かりづらいですね。気になる方はおさえておきたいCSSのセレクタ25種類を読んでみてください。
疑似要素で画像を表示する
content:''の中にurl（画像のパス)を書くことで、疑似要素として画像を表示させることもできます。
<a href="/" id="example">サルワカのリンクはこちら</a>CSS
#example:before {
content: url(../img/saruwakakun.png);
display: block;/*前後に改行を入れる*/
}
なお、疑似要素で表示させた画像のサイズはwidth:◯◯pxと書いても変更することはできません。画像サイズの変更方法は以下の記事で紹介しているので、参考にして頂ければと思います。
ふきだしを作る
ボックスの前後に三角形の疑似要素をつけることで、ふきだしを作ることもできます。
<p class="example">コメントを入れます</p>CSS
.example {
position: relative;
background: #EFEFEF;
width: 300px;/*吹き出し幅*/
padding: 20px;/*内側の余白*/
border-radius: 10px;/*角の丸み*/
margin-bottom: 30px;/*下の余白*/
}
.example:before {
position: absolute;/*絶対配置*/
content: '';/*空に*/
border-top: 20px solid #EFEFEF;/*三角を作る*/
border-right: 20px solid transparent;
border-left: 20px solid transparent;
top: 100%;/*下にフィット*/
left: 50%;/*中央配置*/
transform: translateX(-50%);/*一応ズレを補正*/
}
contentは空でもOK！
上の例ではcontent: ''となっています。文字や画像などを使わずにデザインを変えたいときには、このようにcontentを空にすればOKです。なお、content:''の指定を忘れると、疑似要素が全く表示されなくなるので注意しましょう。
最後に
ここまでbeforeとafterの使い方と活用例を紹介してきました。この他にも本当にたくさんの表現ができるので、気になる方は是非ググってみてください
