【初心者向け】 CSSだけで矢印を作る方法まとめ｜考え方がわかる実践ガイド

はじめに

WebサイトやアプリのUIにおいて、矢印はユーザーの視線を誘導し、次の行動を自然に促す重要な役割を持っています。
画像を使わず、HTMLとCSSだけで矢印を作成できるようになると、デザイン変更やレスポンシブ対応が非常に柔軟になります。

一方で、CSSでの三角形の作り方や斜線の表現方法、数値調整の考え方が分からず、手が止まってしまうケースも少なくありません。

本記事では、CSSで矢印を作る基本構造から、三角形・斜線を使った代表的な実装方法、さらに実装時の調整のコツまでを解説します。

CSSで矢印を作る基本構造

CSSで形を作る考え方

CSSで矢印を作る際は、矢印を描くというよりも、図形の組み合わせで「矢印に見せる」という考え方が重要です。

• シンプルな軸の部分
• 三角形や斜線などでできた先端部分

これらを後述の擬似要素を使用して組み合わせることで矢印を作っていきます。

理解すると、デザインに応じて柔軟に矢印を作れるようになります。

まずは仕組みを把握し、細かい数値は後から調整する、という姿勢が大切です。

HTMLで用意する土台

CSSで作る矢印は、基本的にHTML側では最小限の要素だけを用意します。

<button class="button"></button>

多くの場合、矢印そのものを表す専用のdivタグなどを増やす必要なく、装飾として矢印を追加したいボタンや要素に対してCSSで矢印を追加します。

HTMLをシンプルに保つことで、後からデザインを変更する際も修正範囲を最小限に抑えられます。

擬似要素で矢印にする

擬似要素（::before / ::after）は、HTMLに新しい要素を追加せずに装飾を加えられる仕組みです。

矢印の場合も、ボタンやリンクといった既存要素に対して、後から矢印の形を重ねるようなイメージで使われます。

擬似要素についてのわかりやすい解説は【初心者向け】CSS疑似要素 ::before と ::after｜基本と応用をわかりやすく解説をご覧ください。

この方法の特徴は、構造と見た目を明確に分けられる点にあります。
HTMLはあくまで意味や役割を表し、矢印はCSSによる装飾として扱えるため、マークアップが複雑になりません。

また、矢印の向きやサイズ、位置をCSS側だけで調整できるため、デザイン修正やレスポンシブ対応の際も影響範囲を最小限に抑えられます。

そのため「矢印は擬似要素で付ける」という考え方を基本として定着させましょう。

先端部分の作り方

矢印の先端部分の形は三角形の図形のようなものや、斜線でできたスタイリッシュなデザインなど様々です。

実現したいデザインや使用シーンに応じて、適した表現方法を選ぶことが重要になります。そのためには、まずそれぞれの作り方の特徴や考え方を理解しましょう。

三角形を使った矢印の先端

borderで作る三角形

CSSで三角形を作る最も基本的な方法が、borderを使った三角形です。

borderの仕組みを理解すれば非常にシンプルな実装方法です。

<div class="triangle"></div>

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 12px 6px 0;
  border-color: transparent #f2f2f2 transparent transparent;
}

上下左右のborderは、もともと次のような形を持っており、それが幅と高さが0の要素の中心から広がることで、4つの三角形が合わさった状態になります。

不要な方向のborderを非表示（transparent）にすることで、色を付けたborderだけが残り、結果として1つの三角形に見えるようになります。

つまり、border三角形とは「三角形を描いている」のではなく、見せたい三角形だけを残している表現方法なのです。

斜線を使った矢印の先端

transformで斜線を作る

斜線を使った矢印は、細い線を回転させて作るのが基本です。

<div class="arrow-line"></div>

.arrow-line {
  width: 12px;
  height: 2px;
  background-color: #333;
  transform: rotate(45deg);
}

このように、 transform: rotate( ) を使って角度を変えることで、簡単に斜線を表現できます。

かっこの中の数値(deg)を変えるだけで、様々な向きの矢印に応用できます。

矢印を構成するパーツの組み立て方

ここまでで作成した三角形や斜線を、擬似要素を使って四角形と組み合わせると、矢印の形として実際のUIに組み込むことができます。

ボタン＋擬似要素で作る矢印付きボタン例

この実装では、::before で矢印の棒部分、::after で三角形の先端部分を表現しています。

ボタン本体のHTMLはそのままに、CSSだけで矢印を追加できるため、構造がシンプルで管理しやすいのが特徴です。

また、色やサイズ、位置は数値を調整するだけで簡単に変更できるため、リンクボタン・CTA・次へ進む導線など、さまざまな場面で使用することができます。

<button class="button">
  詳しく見る
</button>

.button {
  position: relative;
  padding: 12px 40px 12px 20px;   /*　矢印のためにスペースをあける　*/
  background-color: #f2f2f2;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
}

矢印の棒部分（四角形）
.button::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;   /* 適宜調整する */
  transform: translateY(-50%);
  width: 12px;
  height: 2px;
  background-color: #333;
}

矢印の先端（三角形）
.button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;   /* 適宜調整する */
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent #333;
}

まずはこの形をベースに、矢印の長さや三角形の大きさを調整しながら、デザインに合わせて最適なバランスを探してみてください。

おしゃれな矢印デザインの工夫

サイズと余白の調整

矢印は、ユーザーの視線を誘導する役割を持つ一方で、主張が強すぎるとコンテンツの邪魔になり、控えめすぎると意図が伝わらなくなってしまいます。
そのため、サイズと余白のバランスを適切に調整することが重要です。

特にボタンやリンクに添える矢印の場合、テキストとの距離や矢印自体の大きさによって、クリックしやすさや視認性が大きく変わります。

周囲に十分な余白を持たせることで、要素同士が窮屈に見えず、自然な流れで視線を誘導できます。

ホバー時に変化する矢印

cssでは :hover でスタイルを指定することでホバー時に変化を加えることができます。

ホバー時の矢印に変化を加えることで、ユーザーに「操作できる要素」であることを直感的に伝えられます。 特にリンクやボタンでは、ホバー時の反応がユーザーの操作性に大きく影響します。

例えば、ホバー時に矢印の色、位置、大きさなどの変化で、自然なフィードバックを与えることができます。

こうした演出は派手である必要はなく、あくまで控えめに取り入れることがポイントです。

.button:hover::before {
  width: 30px;
  right: 12px;
}

.button:hover::after {
  right: 4px;
}

上記ではホバーした時に矢印が左右に伸びるようになっています。

このように視覚的な変化があることで、ユーザーに安心感と分かりやすさを提供することができます。

まとめ

本記事では、CSSだけで矢印を作る方法について、基本構造から三角形・斜線を使った実装方法までを解説しました。

三角形は構造が分かりやすく、斜線はデザインの自由度が高いため、用途に応じて使い分けることが重要です。

こうしたHTML/CSSを始めとするWeb制作スキルを学びたい方には、WEBMASTERSがおすすめです。
Web制作に必要な基礎知識と実践が効率よく身につくため、学習効率が大幅に向上します。
学習環境や教材が充実しており、独学ではつまずきやすいポイントも現役エンジニアがしっかりサポートしてくれます。