デザイン・コーディング

擬似要素でできること3選！擬似要素の使用例を紹介

2020/01/16

擬似要素の存在は知っていても、実際に使用してみたことがないという人も多いのではないでしょうか。擬似要素は、HTMLには影響を与えずにさまざまなスタイルの変更を実現できるものです。擬似要素を利用すればどのようなことができるのかを知らずに、擬似要素に手を出さないのはもったいないです。この機会に、擬似要素をマスターしてWebサイト制作のデザインの幅を広げましょう。

擬似要素を基礎から知りたい方は、以前の記事をご覧ください。

今回は、擬似要素でできることを3つ紹介します。

WebMedia参考記事

擬似要素とは？便利な擬似要素を基礎から解説！

https://www.itra.co.jp/webmedia/what-is-pseudo-elements.html

::beforeや::afterで知られる擬似要素ですが、記述方法や使用場面をしっかりと理解できていますか？擬似要素を使...

①clearfixを使ってfloatを解除する
②画像を挿入する
③アイコンを表示する
1. アイコンフォントを使用する
2. リストのマーカーを変更する
まとめ

①clearfixを使ってfloatを解除する

floatプロパティを使用すると、後に続く要素が回り込んでしまいますが、この回り込みを解除する方法はいくつかあります。擬似要素は、floatを解除する方法の1つである、「clearfix」クラスに頻繁に使用されます。

clearfixクラスは、floatを解除したい要素に、clearfixのクラスをつけて使用します。clearfixのクラスに擬似要素で::afterを付け加えてセレクタとし、float解除の記述をします。

では、実際に例を見ながら解説します。以下の大きさの違う3つの要素のうちの1つ目と2つ目の要素にfloat: left;をかけて、3つ目の要素を回り込ませてみます。
４_800x450

.box1, .box2 {
float: left;
}

以下のように、3つ目の要素が下にもぐりこんでしまいました。

HTML

<div>
<div class=”box1-box2”>
<div class=”box1”>
<p>box1</p>
<div class=”box2”>
<p>box2</p>
</div>
<div class=”box3 clearfix”>
<p>box3</p>
</div>
</div>

CSS

.box1-box2 {
float: left;
}

.clearfix::after {
content: ' ';
display: block;
clear: both;
}

「clearfix」クラスに擬似要素の::afterでclear: both;を指定すると、以下の図のように簡単にfloatの回り込みを解除することができます。

８_800x450

floatプロパティについては、以下の記事をご覧ください。

②画像を挿入する

擬似要素は、HTMLにではなく、CSSの擬似要素に直接画像を挿入することができます。「content:' ';」の中に画像を挿入する方法と、「background-image」として画像を挿入する方法があります。「content」の中に挿入すると、画像の大きさは変更できませんが、「background-image」に画像を挿入すると、画像の大きさを変更することができます。

では、こちらも実際の例を見ていきましょう。以下のようなタイトルとサブタイトルに、擬似要素を使ってマークを挿入してみます。

タイトル_800x450

HTML

<header>
<div class=”logo”>
<h1>タイトル</h1>
<h2>サブタイトル</h2>
</div>
</header>

CSS

.logo::before {
background-image: url(../img/logo-mark.png);
content: ' ';
display: inline-block;
width: 100px;
height: 250px;
background-size: contain;
vertical-align: middle;
}

タイトル変更後_800x450

このように、文字の前に擬似的に要素を作り、画像を挿入することができます。

displayプロパティの値は、inlineを選択すると画像の大きさを変更することができないので、blockまたはinline-blockを選択してください。擬似要素の画像と要素を横並びにしたいときはinline-block、擬似要素を1つ下の行に改行させたいときはblockを選択します。

また、background-sizeプロパティは、値をcontainにすると、画像の大きさを擬似要素全体の大きさとすることができます。

③アイコンを表示する

アイコンをWebサイト内に付け加える際にも、擬似要素を使用します。擬似要素を使う例としては2つ挙げられます。

アイコンフォントを使用する

1つ目は、アイコンを文字として挿入する例です。様々なアイコンを文字として扱うことを可能にするツールを導入することで、アイコンフォントとしてアイコンを利用できるようになります。

Webサイトでアイコンを文字として表示するためのツールとしては、「Font Awesome」などが挙げられます。種類の豊富なアイコンが手軽に使用できるので、ぜひ使用してみてください。

リストのマーカーを変更する

2つ目は、CSSだけでマークを作り、アイコンとして挿入する例です。今回は、liタグのリストマーカーをCSSで作ったマークに変更する方法を紹介します。

擬似要素を使うと、通常「・」で表示されるliタグのマークを矢印やチェックなどのマークに変更することが可能です。CSSの「list-style-type」プロパティでは、既定値の「disc」と呼ばれる「・」で表示されているマーカーを、丸や四角に変更することができます。しかし、CSSで指定できるのは一定のマークで、特殊なマーク、たとえば自分で作ったオリジナルのマークなどは使用することはできません。

擬似クラスの::beforeや::afterを利用すれば、リストマーカーを特殊なマークや画像に変更することができます。では、実際にCSSでリストマーカーを作ってみます。

たとえば、リストのマーカーを「＞」のような形の矢印に変更したい場合は、

HTML

<ul>
<li>1つ目の文章</li>
<li>2つ目の文章</li>
<li>3つ目の文章</li>
</ul>

CSS

ul li {
position: url(../img/logo-mark.png);
display: relative;
list-style: none;
padding-left: 20px;
}

ul li::before{
content: ' ';
position: absolute;
top: 5px;
left: -10px;
display: block;
width: 10px;
height: 10px;
border: 0px;
border-top: solid 2px #000;
border-right: solid 2px #000;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}

このように記述すると、以下のように、リストマーカーを三角形に変更することができます。
リストHTML_206x112

少しCSSについて解説すると、transformプロパティとは、要素を回転させたり、指定の角度に傾けることのできるプロパティです。今回は、上と右にborderをつけた後で、その要素を45度傾けることによって右向きの三角形を作りました。

＞_800x450

擬似要素でborderを活用すると、様々な形の三角形を作ることができます。ふきだしもborderを使って三角形を作り、擬似要素でボックスに三角形を配置することで作ることが可能です。

【コラム】-ms-や-webkit-は必要？

transformの前についている-ms-や-webkit-は、ベンダープレフィックスと呼ばれる、拡張機能であることを示すために使われる識別子です。勧告されたばかりのプロパティに対して、各ブラウザがそれらの新しいプロパティに対応するようにするために使用されます。

ベンダープレフィックスとベンダープレフィックス無しの指定を併せて記述することで、その機能の仕様が変更された際にも、その機能が結果的に勧告された際にも備えることができます。

-ms-はInternet Explorer、-webkit-はGoogle Chrome、Safariに対して指定しています。

まとめ

今回は、擬似要素を使ってできることを3つ紹介しました。擬似要素は、Webサイトを制作する上で欠かせないデザインを可能にします。特に、floatを解除する際に使用する「clearfix」や画像を擬似要素に挿入する方法は、使用頻度が高いでしょう。このような、デザインの幅を広げるツールをマスターして、より良いWebサイトの制作を目指しましょう。

WebMediaでは、今回のようなHTML・CSSに関する知識だけでなく、Webサイトの制作に役立つ情報を数多く発信しています。ぜひ、他の記事も合わせてご覧ください。

また、Web担当になったけれど、Webサイトに関する知識に自信がない、また、Webサイトを自社で制作するにも、時間や人材、知識がないというお悩みはありませんか？

WebMediaを運営するITRAでは、これまで数多くのWebサイトの制作を行ってきました。丁寧なヒアリングとサポートで、納得のWebサイト制作をお手伝いします。お気軽にお問い合わせください。

この記事の著者

ITRA株式会社

官公庁や大手企業を中心とした大規模なWebサイトを総合的にプロデュースするWeb制作会社。デザインからシステム、サーバーまでWebサイトに関わるお客様の悩みを解決します。