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

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

どうもGAHAKUです。

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

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

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

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

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

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

 

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

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

では擬似要素とは?

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

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

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

li:before { background:xxx }

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

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

 

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

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

kagawa

[参考]香川大学経済学部

 

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

fds

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

 

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

sp

出典:LIdea

 

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

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

htmlはこちら。

<ul>
 <li>CSS3で矢印アイコンを表示する方法1</li>
 <li>CSS3で矢印アイコンを表示する方法2</li>
</ul>

 

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

liの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のみで表現できるので、是非チャレンジしてみてくださいね。

でわ。

Sponsored Link

3 Comment

  1. […] http://gahakudesign.com/design/web-production/css3-arrow/ リストなどでよく使う「>(山括弧)」型の矢印の作り方が分かります。 実用的なので、すぐにでも使ってみたくなりますし、 覚えておくべき小技です。 […]

  2. 匿名 says: 返信

    -webkit-transform: rotation(45deg);ではなく
    -webkit-transform: rotate(45deg);ではないでしょうか?

    1. takakoppu says: 返信

      ご指摘ありがとうございました。
      -webkit-transform: rotate(45deg);が正しいです。

コメントを残す