【CSS】見出しや目次の頭にアイコンを追加する【疑似要素】

Web

擬似要素、使ってますか！？

「::before」「::after」みたいなやつ！私は苦手意識がありました。でも、Web 制作ではめちゃくちゃ使うテクニックなのでこれを機に使えるようになって、せめて苦手意識だけでも克服しましょう！！！

今回は、見出しや目次、テキストなどの頭に“アイコン”を追加するという目標を掲げて、疑似要素について勉強してみようと思います。

テキスト頭に
アイコンを追加するなら
::before 疑似要素！

実は疑似要素は、「::before」「::after」以外にもたくさんあるみたいです。気になる方は参考リンクをご覧ください。

参考リンク
MDN

擬似要素

今回は、テキスト頭にアイコンを追加したいので、「::before」についてピックアップしてみていけたらと思います。（頭かお尻かだけの違いの「::after」もだいたい一緒？？）

::before 疑似要素の
使い方

::before 擬似要素は CSS で使用します。任意の要素の“前（before）”にコンテンツをねじ込むという機能です。CSS でセレクタの右側に::beforeと記述し、いつも通り波括弧でスタイルを入れていきます。その際に content プロパティに追加させたいコンテンツを記述します。

任意のセレクタ::before{
  content:"追加させたいコンテンツ";
}

そんなに難しくはないでしょ？
content プロパティとセット使うと覚えておくと良いですね！

また、疑似要素をくっ付けたセレクタが、その擬似要素の“親”になります。

何が言いたいのかというと、次項でやりますが、疑似要素が継承するスタイルの親要素はどれかということです。

::after 疑似要素も ::before 擬似要素と同じような使い方なので応用すればOKです。“前”か“後ろ”かの違い！

::before 疑似要素で追加したコンテンツの
スタイルは、親要素を継承？

::before 擬似要素で追加したコンテンツは、特に何も設定しない場合は、基本的には親要素（疑似要素をくっ付けたセレクタ）のスタイルを継承するようです。

::before 疑似要素でスタイルを設定するとそのスタイルが適用されます。

ただし、一部継承されないプロパティがあり、例えば、ボーダーやパディング、マージン、背景色などは継承されません。

background プロパティで
アイコンを追加する

::before 擬似要素を使ってアイコンを追加したい場合は、background プロパティを使用した方法がオススメです。

.title{
    content: ""; /* ← 空っぽのコンテンツを用意しておく */
    display: inline-block; /* ← 行頭に表示させるならinline-block */
    background-image: url('画像のurl');
    background-size: オススメはcover;
    background-repeat: オススメはno-repeat;
    width: 任意のサイズ;
    height: 任意のサイズ;
}

See the Pen 擬似要素 by MATSUDAI (@matsudai) on CodePen.

コードの例はこんな感じです。
まるっと使うスタイルなので、content プロパティと background-image プロパティのセットを軸になんとなく覚えておきましょう！

また、
content プロパティの値を“画像の url”として表示させることも可能ですが、サイズの調整がややめんどっちぃので個人的にはオススメしません。transform プロパティとかでサイズ調整するのかな？？

.title{
    content: "url('画像のurl')";
}

セマンティックの観点から、「background プロパティを使った方法」と「content プロパティの値に直接 画像のurl を入れる方法」ではどちらがいいのか。というと、
『アイコンを入れる』という意味においては『視覚的な装飾として』のアイコンを入れるので、 background プロパティのほうに軍配が上がるのかと思います。逆にアイコン自体が重要なコンテンツの一部であるのであれば、疑似要素など使用せずに直接 HTML に記述するべきだと思います。

「Font Awesome」で
アイコンを追加する

実戦的なコーディングとしてはこちらの方がより多く使う？

「Font Awesome」を利用してアイコンを追加するメリットは、アイコンがフォントのように扱えるのでいろいろと調整しやすいということだと思います。また、無料版でも豊富なアイコンを簡単に設定できるという点も素晴らしいですね。（ただし無料版は基本的に太さの調整などはできないようです。）デメリットとしては、サービスが終了してしまうと表示されなくなってしまう点ではないでしょうか。

他にもサイトによってはさまざまなメリット・デメリットがいろいろあると思いますが、私が思う代表例としてはこんな感じ！

「Font Awesome」でアイコンを入れる方法については参考記事をぜひご覧ください！

関連記事
サムネイル：【CSS】Font Awesome アイコンを疑似要素で付ける方法【before , after】

【CSS】Font Awesome アイコンを疑似要素で付ける方法【before , after】

「Unicode」で
アイコンを追加する

content プロパティの値に ● とか ■ とかの“シンボル”を直接入力するのではなく、 ● とか ■ とかに該当する「Unicode」という文字コードを入力するという方法です。

例えば、● の Unicode なら「U+25CF」

例えば、■ の Unicode なら「U+25A0」

CSS に記述するときは、「\」と「U+ より後ろの数字（16進数なのでアルファベットも含む）」を記述すればよいですね！

See the Pen 擬似要素_Unicode by MATSUDAI (@matsudai) on CodePen.

メリットは、Unicode は世界中のあらゆる言語をサポートした規格なので、文字化けや文字の表示に関する問題が発生しにくいです。デメリットは何といってもめんどっちぃ！というところでしょうか！コードを探すのが大変です。

まとめ

::before 擬似要素を使えば、とても簡単にテキスト頭にアイコンを追加することができます。大きく分けると content プロパティの値に「Font Awesome」などを入れる方法と、background プロパティで画像を入れる方法があるようです。それほど難しくはないので、使いこなせるようになって最適なコーディングができるようになりたいですね！

参考・出典

・MDN. 「擬似要素」. https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-elements, 2024年5月23日閲覧。

・MDN. 「Unicode」. https://developer.mozilla.org/ja/docs/Glossary/Unicode, 2024年6月1日閲覧。

・「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典. 「Unicode（ユニコード）」. https://wa3.i-3-i.info/word11422.html, 2024年6月1日閲覧。

トップへ戻る