画像を使わずに簡単に矢印アイコンが作れたら便利ですよね。

今回は、CSSを使った矢印アイコンの作り方を知りたい、という方のために、シンプルで実用的な矢印アイコンのサンプルコードを紹介します。

どれもコピペしてすぐに使うことができます。

余裕がある方は、サイトのデザインに合わせてアレンジもしてみてくださいね。

矢印アイコンの共通HTML・CSS

まずは、共通となる部分のHTMLとCSSを紹介します。

<a href="#" class="arrow">詳細はこちら</a>

.arrow {
  position: relative;
  display: block;
  padding: 0 0 0 18px;
  color: #555;
  text-decoration: none;
  font-size: 16px;
}
.arrow::before,
.arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  bottom: 0;
  margin: auto;
}

矢印アイコンとなる部分は、疑似要素のbeforeとafterで作成します。

positionを使って矢印アイコンの位置を調節していきます。

これにそれぞれの矢印のコードを付け足していきます。

くの字の矢印アイコン

くの字の形をした矢印アイコンを紹介します。

.sample01:before {
  left: 3px;
  width: 4px;
  height: 4px;
  margin-top: -5px;
  border-top: 2px solid #ff7f50;
  border-right: 2px solid #ff7f50;
  transform: rotate(45deg);
}

使うときには、先ほどの共通のHTMLのクラス名に「sample01」をつけてくださいね。

上記では、四角い要素を作成し、右と上のみに枠線を表示させました。

これを45度傾けて、矢印のように見せていますね。

「rotate(135deg)」にするなど、他の角度を指定すれば、向きの異なる矢印が作成できます。

「margin-top:-5px」の部分は、文字の高さの中央にアイコンが来るように調整したものです。

vertical-align:middleに調整しても、中心にならないことがあるためこの指定をしています。

middleの中心は「小文字のx」が基準になっており、英文では問題ないですが、和文にしたときに文字の中心がずれてしまいます。

フォントによって中心位置がまちまちなので、vertical-alignでの調整は難しいですね。

くの字の矢印アイコン【角丸背景】

先ほどのくの字の矢印アイコンに角丸の背景を付け足しました。

.sample02:before {
  left: 1px;
  width: 14px;
  height: 14px;
  margin-top: -8px;
  border-radius: 3px;
  background: #ff7f50;
}
.sample02:after {
  left: 3px;
  width: 4px;
  height: 4px;
  margin-top: -5px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}

beforeに角丸のボックスを作成しています。

矢印アイコンは先ほどと同じ形で、枠線の色を白くしています。

角丸のborder-radiusを50%にすれば、背景が正円になりますね。

他にも塗りつぶしではなく、枠線の角丸にするなどアレンジを試してみましょう。

三角の矢印アイコン

三角の矢印アイコンを作成しました。

.sample03:before {
  left: 5px;
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  margin-top: -8px;
  border: 6px solid transparent;
  border-left: 6px solid #ff7f50;
}

これは三角の部分に枠線を使っています。

要素の中身が0になるように枠線の太さを指定し、三辺は透明で一辺だけ色を付けています。

今回は左側の枠線のみ表示させているので、右向きの矢印のように見えています。

表示させる枠線を変えることで、他の向きの矢印アイコンも作成できます

三角の矢印アイコン【円の枠線】

先ほどの矢印アイコンに円の枠線を付け加えました。

.sample04:before {
  left: 0px;
  width: 12px;
  height: 12px;
  margin-top: -10px;
  border: 2px solid #ff7f50;
  border-radius: 50%;
}
.sample04:after {
  left: 6px;
  box-sizing: border-box;
  width: 4px;
  height: 4px;
  margin-top: -6px;
  border: 4px solid transparent;
  border-left: 4px solid #ff7f50;
}

円の中に入れるために、矢印の大きさを少し小さくしていますね。

その周りを枠線が囲うように設定しています。

棒とくの字が合わさった矢印アイコン

横棒の先にくの字の矢印が組み合わさったアイコンを作成します。

.sample05:before {
  left: 3px;
  width: 8px;
  height: 2px;
  margin-top: -3px;
  background: #ff7f50;
}
.sample05:after {
  left: 5px;
  width: 5px;
  height: 5px;
  margin-top: -6px;
  border-top: 2px solid #ff7f50;
  border-right: 2px solid #ff7f50;
  transform: rotate(45deg);
}

beforeで横棒の部分を作っていますね。

くの字の部分は、1つ目の矢印アイコンと同じ作り方をしています。

斜め右上向きの矢印アイコン

右上の方角を指した矢印アイコンを作成します。

.sample06:before{
  left: 2px;
  width: 10px;
  height: 2px;
  margin-top: -3px;
  background: #ff7f50;
  transform: rotate(135deg);
}
.sample06:after{
  left: 4px;
  width: 6px;
  height: 6px;
  margin-top: -7px;
  border-top: 2px solid #ff7f50;
  border-right: 2px solid #ff7f50;
}

斜めの棒をbeforeで作成しています。

要素で棒を作って、135度に傾けたものですね。

afterでは、縦横同じサイズの要素を作り、枠線を右と上のみに表示させています。

2つを組み合わせると、矢印のように見えます。

棒と三角が合わさった矢印アイコン

横棒と三角が組み合わさった矢印アイコンを作成します。

.sample07:before{
  box-sizing: border-box;
  left: 7px;
  width: 6px;
  height: 6px;
  margin-top: -8px;
  border: 6px solid transparent;
  border-left: 6px solid #ff7f50;
}
.sample07:after{
  left: 3px;
  width: 7px;
  height: 4px;
  margin-top: -4px;
  border-left: 4px solid #ff7f50;
}

三角の方は、3つ目と4つ目のアイコンでも作成しましたね。

サイズが異なりますが、基本的な作り方は同様です。

これに横棒を付け足しています。

まとめ：色々な矢印アイコンを作ってみよう

今回は、CSSを使った矢印アイコンのサンプルコードを紹介していきました。

それぞれの作り方や注意点などを解説してきましたね。

他にも組み合わせ次第で、様々な矢印を作ることができます。

ぜひ、試してみてくださいね。今回の記事が参考になれば幸いです。

＼プログラミングスクールを比較／