CSSで矢印アイコンを作るには?コピペできるサンプルコードを紹介

公開日: 2022.01.31
更新日: 2024.01.17
CSSで矢印アイコンを作るには

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

今回は、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を使った矢印アイコンのサンプルコードを紹介していきました。

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

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

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

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5