超簡単！CSS3だけで矢印アイコンを表現する方法 – ゾウデザ

こんにちは、@zouです。

みなさん、WEBサイトで矢印を使う時ってどうしてますか？実は画像を使わずにCSSだけで矢印が作れるんです。CSS3で矢印を表現するには、borderとrotateプロパティを使用します。

昔に比べるとCSSで表現できる幅が広がりましたね。今回は使用頻度の高い矢印アイコンの表示方法についてご紹介したいと思います。ホームページを作る時、アイコンの矢印をまだ画像で表示させている人は必見です。

まずはCSSの擬似要素を覚えよう

CSSで矢印を表現するには、擬似要素ってやつを使います。

では擬似要素とは？

簡単に言うと、指定した要素の前後に文字や線を挿入できる透明の箱のようなイメージです。

実際に指定する際は「::before」や「::after」をCSSの要素にくっつけて記述します。

例えばリストのli要素に指定したいときは

li::before { background:xxx } 

使用頻度は高いので、ぜひ覚えておきましょう。では、実際にどういった場面で矢印が使用されているか見ていきましょう。

ナビゲーションで使用される矢印アイコン

矢印アイコンは青枠で囲んでいる箇所の様に、ナビゲーション部分で利用されるケースがとても多いです。

出典：香川大学経済学部

余談ですがアイコンを使用する場合、文字サイズよりかなり小さく表示させた方がおしゃれに仕上がります。

出典：福岡デザイン専門学校

スマホサイトのナビゲーションの装飾で使用する場合、PCとは逆に大きめに表示させると訪問者にこのサイト使いやすいなっていう印象を与えることができます。

出典：LIdea

矢印アイコンをCSSで表現する方法

ではどうやってCSSだけで矢印を表現するのか。

考え方はとても簡単です。

after擬似要素を使用します。 擬似要素に希望する線の太さでwidthとheightを指定。 4辺のうち2辺にborderで線をひいて、rotateで回転させて矢印を表現します。 CSSはこちら。  

li:a::after{ 　display: block; 　width: 5px; 　height: 5px; 　border-top: 2px solid #fff; 　border-right: 2px solid #fff; 　-webkit-transform: 　rotate(45deg); content: ""; }

まとめ

擬似要素に2辺のボーダーを指定して、CSSのrotateプロパティで回転させ矢印を表現するというテクニックです。ここで紹介した以外にも様々な三角をCSSのみで表現できるので、是非チャレンジしてみてくださいね。

では。