ブランディングをお手伝いする福岡のデザイン事務所|ANIK

BLOG

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

最近のCSSにまだついていけてません。

でも矢印ぐらいは作れます。

 

CSS3で矢印を表現するには、borderとrotateプロパティを使用します。

 

最近はCSS3で表現できる幅が広がりましたね。

今回は使用頻度の高い矢印アイコンの表示方法についてご紹介したいと思います。

ホームページを作る時、アイコンの矢印をまだ画像で表示させている人は必見です。

 

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

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

では擬似要素とは?

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

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

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

 

 

使用頻度は高いので、ぜひ覚えておきましょう。

では、実際にどういった場面で矢印が使用されているか見ていきましょう。

 

 

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

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

 

kagawa

 

出展:香川大学経済学部

 

 

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

 

fds

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

 

 

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

 

sp

出典:LIdea

 

 

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

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

htmlはこちら。

 

 

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

liのafter擬似要素を使用します。

擬似要素に希望する線の太さでwidthとheightを指定。

4辺のうち2辺にborderで線をひいて、rotateで回転させて矢印を表現します。

CSSはこちら。

 

 

rotate

 

まとめ

擬似要素に2辺のボーダーを指定して、CSSのrotateプロパティで回転させ矢印を表現するというテクニックです。

ここで紹介した以外にも様々な三角をCSSのみで表現できるので、是非チャレンジしてみてくださいね。

でわ。

ANIK
1983年生まれ。 独学でデザインを学び、福岡の広告代理店で10年間デザイン業務に携わる。 ホームページ、広告バナー、名刺、商品パッケージ、看板、各種販促ツールのデザインを担当。 2017年よりANIKという屋号でブランディングの総合的なサポートをメインに個人活動を開始。 性格は真面目、温厚で自然が大好きです。