こんなに便利！CSSの疑似要素をマスターしよう（サンプルいろいろ）

※この記事は 2 分程度でお読みいただけます。

みなさん、疑似要素使っていますか？
難しそうで敬遠されがちなCSSの疑似要素。なんでCSSから文字を入れなきゃならないの？ HTMLで書けばいいんじゃないの？ 疑似要素を使うとどんなことができるの？ そんな疑問にお答えしていきたいと思います。また、実際に使える便利な疑似要素の指定方法も、サンプルもあわせてご紹介していきます。

HTMLタグの前後にCSSから文字列を挿入できる

まずはじめに、疑似要素の基本的な機能をご説明します。疑似要素はCSSからHTMLタグの前後に、文字や要素を挿入できる指定方法です。例えば、

<div class="name">サンプルテキスト</div>

このHTMLに対して、CSSで

.name::before {
	content: 'タグの前に入ります';
}
.name::after {
	content: 'タグの後ろに入ります';
}

このように指定すると、画面上には

タグの前に入りますサンプルテキストタグの後ろに入ります

と、前後に文字を挿入して表示されます。

指定されたHTMLタグの、開始タグの直後に「::before」で指定された要素が、終了タグの直前に「::after」で指定された要素が追加されます。疑似要素を指定するダブルコロンは2つになるので、ご注意ください。

実際にはHTMLタグが挿入されるわけではありませんが、「content」で指定した内容がインライン要素として、HTMLタグの内側の前後に挿入されます。イメージとしては、「span」タグに囲われた要素が挿入されると考えてください。

<div class="name"><span>タグの前に入ります</span>サンプルテキスト<span>タグの後ろに入ります</span></div>

<!-- ↑これはあくまでイメージで、実際には「span」タグは入りません -->

行頭や文末に文字を追加するのに使える

通常の文字列を、あえてCSS側から疑似要素を使って挿入することは、あまり行うことはありませんが、行頭文字やリスト記号、文字の区切りなど、同じ文字をまとめて追加するのには、けっこう使えます。

See the Pen 2637_疑似要素（文字で使用） by Matsuyama (@nakanaka-design) on CodePen.

このように指定すれば、行頭文字や区切り文字を、HTML側でわざわざ追加しなくてもよくなります。また、修正が必要な場合も、CSSの「content」を修正すれば、すべてを一気に変更できます。

ブロック要素やインラインブロック要素としても使える！

このような形で使える疑似要素ですが、実はもっと便利な使い方があります。なんとこの疑似要素、CSSの「display」の指定が効きます。ですので、疑似要素として挿入した要素を、ブロック要素やインラインブロック要素に変更して使うこともできるのです。

さらに、通常は文字列を追加する「content」ですが、空白にすることで、文字の入っていないただの要素として使うこともできます。これによって、ボタンや見出しなどにHTMLタグを書き加えることなく、タグ内で使える装飾用のパーツとしても使うことができるようになります（beforeとafterの2つまで使える！）。

疑似要素には「content」の指定は必須

ただし、疑似要素を使うには、必ず何かしらの「content」を指定することが必要です。もし、装飾用のパーツとして使う場合は、

content: "";

これを指定することは忘れないでください。この指定がないと、疑似要素がそもそも表示されません。

文字をパーツとして使う

それでは、いくつか使用例をご紹介していきます。まずは、文字をパーツとして疑似要素で配置するやり方です。

写真にマークを追加

写真にマークを追加するサンプルです。写真を囲む親要素の疑似要素で、NEWマークをつくります。そのうえで、親要素に対して「position: absolute」で、左上に配置しています。

See the Pen 2637_疑似要素（文字でマーク） by Matsuyama (@nakanaka-design) on CodePen.

さらに、クラス名でマークを使い分けるサンプルです。通常HTMLでやろうとすると、マークを追加したい部分に、HTMLタグをわざわざ書き加える必要があります。しかし、この形なら、マークを追加したい部分にクラス名を追加するだけで、できるようになります。疑似要素は「position: absolute」で配置しているだけなので、位置をずらしてあげれば、枠外に配置することも可能です。

See the Pen 2637_疑似要素（文字でマーク・クラスで使い分け） by Matsuyama (@nakanaka-design) on CodePen.

親要素に「overflow: hidden」を指定して、枠外を非表示にしたうえで、配置を工夫してあげれば、ちょっと変わった形のマークにすることでもできます。

See the Pen 2637_疑似要素（文字でマーク・クラスで使い分け2） by Matsuyama (@nakanaka-design) on CodePen.

文字を使った簡単なアイコンを追加

文字を使った簡単なアイコンです。疑似要素で「▶」を挿入し、それをインラインブロックに変更したうえでスタイルを追加し、行頭に配置しています。

See the Pen 2637_疑似要素（文字でアイコン） by Matsuyama (@nakanaka-design) on CodePen.

見出しの装飾で使う

次は、見出しの装飾で使える疑似要素をご紹介していきます。見出しをデザインする時、通常のCSSでは実現できないことがいくつかあります。例えば、見出しにちょっと変わった枠線をつけたい、要素の大きさと異なるサイズの罫線をつけたい、枠線をずらして表示したいなど、他にもたくさんあると思います。

場合によっては、画像を使ったり、HTMLタグを書き加えないとできないこともあります。ですが、シンプルな装飾であれば、疑似要素でも十分に可能です。

文字の下に罫線がある見出し

WEBデザインでよく見るこのパーツ。見出しの下に、罫線を表示するサンプルです。「border-bottom」を使うと、要素の枠いっぱいのサイズの罫線になってしまうので、「::after」で罫線用の疑似要素を追加しています。

See the Pen 2637_疑似要素（見出し下線） by Matsuyama (@nakanaka-design) on CodePen.

罫線がついた見出し

いろいろなタイプの罫線がついた見出しのサンプルです。背景のストライプは、こちらのジェネレーターを使っています。

See the Pen 2637_疑似要素（見出し罫線） by Matsuyama (@nakanaka-design) on CodePen.

吹き出し・ラベル系の見出し

吹き出しやラベル系の見出しのサンプルです。三角形は、要素をさくっと切り抜きしてくれる「clip-path」を使っています。ジェネレーターはこちらです。

ブラウザによっては、三角形の周囲に微妙な隙間が表示されることがあります。これはブラウザのレンダリングのずれによって生じるもので、画像の配置をちょっとだけ（1pxとか）ずらしてあげることで解消します。サンプルでは指定が分かりづらくなってしまうので、その調整は行っていません。

See the Pen 2637_疑似要素（見出し吹き出し） by Matsuyama (@nakanaka-design) on CodePen.

さらに応用すると、こんなこともできます！

さらに、疑似要素を応用するとこんなこともできます。

見出しに使う文字量に応じて罫線の配置を変えたいケース。文字の左右の括弧などでよく使われます。これは文字量に応じて要素自体のサイズを変更する必要があるので、HTML側でタグがひとつ追加になります。子要素を追加して、インラインブロック要素にします。そのうえで、子要素に疑似要素を指定しましょう。

See the Pen 2637_疑似要素（見出し応用1） by Matsuyama (@nakanaka-design) on CodePen.

次はさらに応用で、疑似要素で子要素が2つ追加できるならグリッドにしちゃえばいいんじゃない？ というやつです。

「::before」「::after」で、タグの前後に2つの要素を追加して、全体をグリッドにしてしまいます。そのうえで、「grid-template-column」で文字の部分を「auto（文字量によって自動調整）」、疑似要素で追加した左右の要素に「1fr（残ったエリアを2等分）」と指定します。文字と疑似要素の隙間は「gap」で指定します。指定としては、「grid-template-column: 1fr auto 1fr」になります。

あとは、左右の疑似要素に罫線や背景を指定するだけです。

See the Pen 2637_疑似要素（見出し応用2） by Matsuyama (@nakanaka-design) on CodePen.

ボタンのパーツとして使う

疑似要素は、もちろんボタンのパーツとしても使えます。よくサンプルを配布している動くボタンなどは、この疑似要素を使って作られていることが多いです。背景や影などを疑似要素として配置して、それを組み合わせ、それぞれにアニメーションをかけることで、スタイルを実現させています。

マウスオーバーのアニメーションには、CSSの疑似クラス要素（ホバー時）と、要素の変化をスムーズにさせる「transition」を使用しています。アニメーションのために、一部HTML側の子要素を追加しているものもあります。

アイコンや背景を使ったボタン

アイコンや背景を使ったボタンのサンプルです。マウスオーバーすると、背景が横や上からスライドするボタンは、疑似要素を背景として設置し、それにアニメーションをかけます。四角形以外や、位置をずらした表示をさせたい場合は、親要素に「overflow: hidden」を指定し、枠外を非表示にします。はみ出した部分を非表示にすることで、ボタンの範囲内だけに背景が表示されるようになります。

See the Pen 2637_疑似要素（ボタン背景・アイコン） by Matsuyama (@nakanaka-design) on CodePen.

ちなみに、背景と罫線が別の色で、背景を罫線の後ろに回り込ませたい場合は、要素自体に罫線や背景をつけるのではなく、それぞれを疑似要素にして別々に設置するとやりやすいです。

See the Pen 2637_疑似要素（ボタン背景・アイコン2） by Matsuyama (@nakanaka-design) on CodePen.

罫線を使ったボタン

罫線をつかったボタンも難しくありません。疑似要素をどこに配置するのか、大きさをどうするのか、必要な罫線はどこなのかを見極めれば、CSSの設定はかなりシンプルです。

See the Pen 2637_疑似要素（ボタン罫線） by Matsuyama (@nakanaka-design) on CodePen.

立体的な動きをするボタン

影がついた立体的なボタンのサンプルです。影や罫線を疑似要素で設置しておいて、あとはマウスオーバーで動かしたい部分を「transform」でずらす、という考え方で実現できます。

See the Pen 2637_疑似要素（ボタン立体） by Matsuyama (@nakanaka-design) on CodePen.

ボタンでなくても、こんな使い方もできます！

基本的な疑似要素の使い方になれてくれば、例えば下のサンプルのような、マウスオーバーで画像に動きをつけることも可能になります。

ひとつめが、マウスオーバー時に画像に罫線をつけるパターンです。通常、画像に「border」を設定すると、画像が罫線の太さ分、縮小して表示されます。マウスオーバーの時に画像のサイズはそのまま罫線をつけたいのであれば、画像に直接罫線をつけるのではなく、疑似要素で罫線を上からかぶせてしまったほうがやりやすいです。

See the Pen 2637_疑似要素（応用） by Matsuyama (@nakanaka-design) on CodePen.

次が、マウスオーバーで画像内に要素や文字を表示するやり方です。最初は疑似要素を隠しておいて、マウスオーバーにあわせて表示させればOKです。

See the Pen 2637_疑似要素（応用2） by Matsuyama (@nakanaka-design) on CodePen.

画像を配置して使う

疑似要素を画像として、アイコンやマークなどに使うこともできます。疑似要素の「content」に、画像のファイル名を直接指定することで、疑似要素自体を画像にしてしまうこともできるのですが、サイズ指定ができないため、かなり使いづらいです。今回はより使いやすい、要素の背景画像として設定するやり方で解説していきます。

まず、疑似要素をブロック要素かインラインブロック要素にして設置したうえで、

background-image: url( /* 画像のパス */ );
background-size: contain;
aspect-ratio: /* 画像の縦横比 */ ;
width: /* 画像の横幅 */ ;

このように指定します。「background-image」は画像のファイル名を指定、「background-size」は枠に対してどのように画像を表示するかを指定します。「contain」は、枠内に画像全体が表示されるよう、自動的に調整して表示してくれます。

通常の画像の場合は、横幅にあわせて高さを調整する「height: auto」がありますが、疑似要素の場合はただのブロック要素やインラインブロック要素なので、高さを指定しないと、高さが「0px」になってしまいます。

この場合は「aspect-ratio」を使うと便利です。「aspect-ratio」は、要素の縦横比（アスペクト比）を指定できるプロパティです。「aspect-ratio: 3 / 2」と指定すると「横3：縦2」の要素ができます。「aspect-ratio: 1 / 1」もしくは省略して「aspect-ratio: 1」と指定すると正方形になります。アスペクト比が割り切れない画像であっても、元の画像サイズ（たとえば、横2123px・縦712pxの画像であれば、「aspect-ratio: 2123 / 712」）を指定しておけば、横幅だけ指定すれば縦幅を自動で調整してくれる疑似要素のできあがります。

ちなみに、わざわざ要素のサイズを個別で指定しなくても、「background-size: contain」を指定したうえで、「background-position: center top」などを指定してあげれば、すべて要素の上側に揃えて表示させることもできます。用途に応じて使い分けてください。

それでは、いくつかサンプルをご紹介します。まずは画像にマークを配置する方法です。最初のサンプルでは、文字を調整してマークにしましたが、画像にすることでより多彩な表現ができるようになります。

See the Pen 2637_疑似要素（画像1） by Matsuyama (@nakanaka-design) on CodePen.

次がボタンです。ボタンに使うアイコンなども、もちろん画像に変更することができます。

See the Pen 2637_疑似要素（画像2） by Matsuyama (@nakanaka-design) on CodePen.

最後は応用で、CSSの属性セレクター（HTMLタグの属性によって指定を切り替えられるやり方）と疑似要素を組み合わせたサンプルです。リンク先が「別ウィンドウで立ち上げの時」や「PDFファイルへのリンクの時」など、リンクの種類によってリンクのアイコンを変更することができます。

See the Pen 2637_疑似要素（画像3） by Matsuyama (@nakanaka-design) on CodePen.

引用や枠にだって使える

引用のブロックなど、枠の装飾に使うこともできます。疑似要素で使える2つの子要素を、どの部分に使えばよいのか、いろいろ考えながら試してみてください。

See the Pen 2637_疑似要素（枠） by Matsuyama (@nakanaka-design) on CodePen.

ソースコードもきれいに！積極的に使ってみよう

いろいろなパターンで疑似要素をご紹介しました。普段あまり疑似要素を使わない方は、こんなことできたんだ！と驚かれたのではないでしょうか。

CSSのボタンや見出しのサンプルコードを配布しているサイトはたくさんあります。コピーしてそのまま使ってもいいのですが、疑似要素の仕組みはけっこうかんたんです。疑似要素の基本をしっかりと理解して、オリジナルのパーツづくりに挑戦してみてください！

また、疑似要素を使うことで、HTMLにアイコン画像やパーツ用のタグなど、余計なコードを書き込むことが少なくなります。さらに、修正があった場合でも、同じパーツであれば、CSSでまとめて修正することができます。

こんなに便利でHTMLもきれいになって、メンテナンスも楽になる。いいとこだらけの疑似要素、ぜひ使ってみてください！

いつでもご相談ください！

ナカナカデザインラボでは、WEBサイト制作に必要なスキルが学べる「WEBデザインスキル講座」や、WEBにまつわることなら何でも相談OK「フリーレッスン」を、随時受け付けています。

フリーランス歴約20年の現役WEBデザイナー兼WEBデザイン講師が、分かりやすく解説をしながら、マンツーマンでレッスンを行います。プログラミングは苦手だけどWEBデザインをしてみたい、ひとりで書籍や動画教材を見てもよく分からない、自分のペースで学習を進めたい。どんな方でも大丈夫！ぜひ一度ご相談ください。