超簡単!CSS3だけで矢印アイコンを表現する方法

こんにちは、@zouです。

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

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

スポンサードリンク

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

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

では擬似要素とは?

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

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

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

li::before { background:xxx } 

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

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

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

 

kagawa

 

出典:香川大学経済学部

 

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

fds

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

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

 

sp

出典: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: ""; }
rotate

まとめ

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

では。

スポンサーリンク
スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

会社勤めのアートディレクター / デザイナー / BtoC・BtoBのクリエイティブをワンストップで担当 / ビジュアルで企業価値を高めるブランディング戦略のサポートが得意 / WEB・グラフィック・撮影・動画編集 /