【初心者向け】CSSだけで矢印をスタイルしてコーディングを効率化しよう

2019.09.27

WEB

Webデザイン

HTML・CSSコーディングを行っていると、ナビゲーションやメニューに使われるテキスト部分がアンカーリンクであることが伝わるように、矢印アイコンの装飾が施されたデザインをよく目にします。

従来はgifやpngなどの形式で画像として書き出し、CSSの背景に指定してデザインを再現する手法が一般的でした。
しかし、最近ではスマートフォンをはじめとする高解像度のデバイスに対応するためにSVG画像を利用したり、Font Awesomeのようなアイコンフォントを利用する機会も増えてきています。

例）当ブログのナビゲーション

弊社でもデザインや要件に応じて様々な方法で対応していますが、今回はCSSのみで簡単な矢印のデザインを実現する方法をご紹介します。
画像に比べるとデザイン性では劣る面もありますが、CSSならではのメリットもあります。
覚えておいて損はないと思いますのでよろしければ最後までお付き合いください。

INDEX

CSSで矢印を作る方法
CSSで矢印を作るメリット・デメリット
さいごに

CSSで矢印を作る方法

CSSで矢印を作るには「疑似要素」の使い方と「borderプロパティ」の使い方が重要になります。
疑似要素に関しては当ブログの記事でも解説していますのでこちらも合わせてご覧ください。

【初心者向け】CSSの擬似要素と擬似クラスを理解しよう！

今回は一番簡単な「く」の字型の矢印のコードを紹介します。

HTML

<a href="#" class="arrow arrow--right">株式会社アーティス</a>

CSS

.arrow {

position: relative;

padding-right: 15px;

color: #333;

text-decoration: none;

}

.arrow::after {

content: '';

display: block;

width: 8px; /* 矢印の大きさの指定 */

height: 8px; /* 矢印の大きさの指定 */

border-top: 2px solid #333; /* 矢印の太さの指定 */

border-left: 2px solid #333; /* 矢印の太さの指定 */

}

.arrow--right::after {

transform: rotate(135deg); /* 矢印の角度の指定 */

position: absolute; /* 矢印の位置の指定 */

right: 0; /* 矢印の位置の指定 */

top: 6px; /* 矢印の位置の指定 */

}

例）テキストの右側に矢印を配置

任意の大きさを指定した空の疑似要素の2辺（今回の例では上辺と左辺）に、任意の太さのボーダーを指定し、さらにtransformプロパティで角度を指定することで好みの大きさ、角度の「く」の字型の矢印を作成することができます。

上記の例では矢印の見た目（大きさと太さ）をarrowクラスにまとめ、矢印の配置（位置と角度）をarrow–rightクラスにまとめて記述しています。
同様にarrow–leftクラスやarrow–up、arrow–downクラスを用意しておけばデザインに対して手軽に、そして柔軟に対応することも可能になります。

CSSで矢印を作るメリット・デメリット

メリット

CSSを利用した矢印のメリットは大きくわけて2つあると考えています。

1つ目は保守・メンテナンス性の良さがあげられます。

矢印の大きさ・線の太さ・線の色をすべてCSSで指定することができますので、画像と比べると修正に対する手間を軽減することができます。あらかじめスタイルを用意しておけば複数人で作業する場合にコードを共有することで作業コストの削減にも繋がります。

また、レスポンシブデザインへの対応とも相性が良く、解像度に合わせて複数の画像を用意する必要がないので、実装時、修正時ともに作業コストを抑えることができます。

2つ目は画像の読み込みを少なくすることによる通信の削減と表示速度の向上です。

今までは複数のアイコンを1枚の画像に集約し、CSSで画像の位置を調整するCSSスプライトのような技術を利用して画像の読み込み回数を減らす手法などを用いてきましたが、CSSで実装すればそのような対策も必要なくなります。

例）CSSスプライトの画像　Bootstrap2.3.2より引用

デメリット

デメリットとしてはやはり複雑なデザインを表現することができない（難しい）点があげられます。
装飾用にタグを入れ子にしたり、複数のプロパティを利用して形状を変形することはできますが、それでもやはり画像やアイコンフォントと比較すると表現力は劣ります。

メリット・デメリットを把握した上で、webサイトの要件に合わせて適切な手法を選択するようにしましょう。

さいごに

いかがでしたでしょうか？簡単な実装でしたがCSSだけで矢印を作る方法をご紹介しました。

今回は「く」の字型という一番簡単なもののみの紹介となりましたが、複数の疑似要素を組み合わせたり、回転、変形を工夫することで様々な図形を作成することも可能です。また機会があれば当ブログでも紹介したいと思います。

みなさんもCSSの矢印を上手に活用して快適なコーディングライフを満喫してください。

この記事を書いた人

なかもとソリューション事業部マークアップエンジニア: 企画・営業部を経て、システムエンジニア、マークアップエンジニアとしてweb サイト制作、webアプリケーション開発の上流から下流まで幅広く携わる。ユーザビリティ、アクセシビリティを意識したセマンティックなマークアップとより良いユーザー体験を追及して日々奔走中。三度の飯よりwebが好き。