実案件でよく使用する、擬似要素でのアイコンや装飾の実装方法

こんにちは！コーダーの平原です。
今回は、実際に案件でよく使用する、擬似要素を使用したアイコンや装飾の実装方法をご紹介したいと思います！
擬似要素を採用することで、HTMLタグを追加することなく、ユーザビリティを高めることに繋がるようなアイコンや装飾を実装することができるので、これがまた物凄くよく使うんですよね。
それでは見ていきましょう！

1. 右矢印アイコン
2. 下矢印アイコン
3. ハンバーガーメニュー
4. メニューの仕切り線
5. まとめ

1. 右矢印アイコン

リンクボタンなどでよく使用する右矢印アイコンです。これがあるだけで「リンクボタン」だという認知性が上がるので、色々なサイトで積極的に使用されています。
ホバーした時にアイコンを動かしたり、色を変化させたりといったエフェクトも、擬似要素に変更をかけて対応します。

2. 下矢印アイコン

下矢印アイコンは、アンカーリンクのボタンなどでよく使用します。実装の基本は、先ほどの右矢印アイコンと同じです。
唯一違う点ですが、下矢印アイコンの場合は、擬似要素に設定した「transform」プロパティの「rotate」の値を「135deg」に設することで矢印が下向きになります。

3. ハンバーガーメニュー

おなじみのハンバーガーメニューも、擬似要素を使用することで「span」タグが一個で済みます。
クリックするとCLOSE(×)になる仕様も、「span」タグを透過させて、擬似要素に指定した「transform」プロパティの「rotate」の値をそれぞれ「45deg」、「-45deg」に設定することで綺麗な「×」を実装することができます。

4. メニューの仕切り線

こちらもPC/SP問わず、ヘッダーやフッターのメニューなどによく使用します。各メニューに擬似要素で1つずつ仕切り線を作っているので、一番最後のメニューの仕切り線は非表示にするのがポイントです。

5. まとめ

今回は、擬似要素を使用したアイコンや装飾の中でも、実案件で使用頻度が高いものをご紹介しました。
どれも実装方法の難易度は低めで、画像を使用するよりもパフォーマンスが良いので、この方法での実装はメリットが多いですね！