Webサイトのデザインにおいて、リンクやメニューの開閉、スライダーの次へボタンなど、あらゆる場面で使われるのが「矢印」アイコンです。
昔は画像で作ることもありましたが、現在はCSSだけで描画するのが主流です。
CSSなら色やサイズを自由に変更でき、解像度を気にせずきれいに表示できるからです。
この記事では、CSSを使って「くの字」矢印を作る基本的な仕組みから、上下左右への向きの変更、さらには角を丸くしたり二重線にしたりする応用デザインまで、コピペで使えるコードとともに徹底解説します。
 執筆者：マヒロ |
|
- OS：Windows 11 / macOS Sequoia
- IDE：Visual Studio / VS Code / IntelliJ IDEA
- その他：Chrome DevTools / 各言語最新安定版
※本メディアでは、上記環境にてコードの動作と情報の正確性を検証済みです。
CSSで「くの字」矢印を作る基本の仕組み
まずは、CSSでどのようにして「く」の形を作っているのか、その原理を理解しましょう。
仕組みがわかれば、サイズや太さの調整も自由自在です。
基本となる考え方は、「正方形の枠線（border）を2辺だけ引いて、それを回転させる」というものです。
基本的な実装コード
<div class="arrow"></div>
<style>
.arrow {
width: 20px; /* 矢印の大きさ（幅） */
height: 20px; /* 矢印の大きさ（高さ） */
border-top: 4px solid #3498db; /* 上の線 */
border-right: 4px solid #3498db; /* 右の線 */
transform: rotate(45deg); /* 45度回転させる */
}
</style>
width と height で正方形のボックスを作ります。border-top（上線）と border-right（右線）を指定することで、正方形の右上部分だけに線が引かれた状態、つまり「Ｌ」を逆にしたような形を作ります。transform: rotate(45deg); を使って時計回りに45度回転させると、角が右を向いた「くの字」の矢印が完成します。上下左右の向きを自在に変える方法
基本の形ができれば、あとは回転させる角度を変えるだけで、矢印を好きな方向に向けることができます。
transform: rotate() の数値を調整して、上下左右それぞれの向きを作ってみましょう。
/* 右向き（デフォルト） */
transform: rotate(45deg);
/* 下向き（アコーディオンメニューなどに） */
transform: rotate(135deg);
/* 左向き（「戻る」ボタンなどに） */
transform: rotate(-135deg); /* または 225deg */
/* 上向き（「トップへ戻る」などに） */
transform: rotate(-45deg); /* または 315deg */
border-top と border-right を使った場合、基本の形は「右上」に角がある状態です。これを基準に回転角度を考えます。
擬似要素（::before/::after）を使ってリンクに矢印を付ける
実務で最も多いのが、リンクボタンやリストの横に矢印アイコンを添えるパターンです。
HTMLに空の div タグを書くのはスマートではありません。
そこで、CSSの擬似要素（::before や ::after）を使って、リンクタグの中に自動的に矢印を生成する方法を紹介します。
リンクボタンの実装例
<a href="#" class="btn-arrow">詳しく見る</a>
<style>
.btn-arrow {
display: inline-block;
padding: 15px 40px 15px 20px; /* 右側に矢印用の余白を確保 */
background: #2ecc71;
color: white;
text-decoration: none;
position: relative; /* 矢印の配置基準 */
border-radius: 4px;
}
.btn-arrow::after {
content: '';
width: 8px;
height: 8px;
border-top: 2px solid white;
border-right: 2px solid white;
transform: rotate(45deg);
position: absolute; /* 絶対配置で位置を決める */
top: 50%;
right: 15px;
margin-top: -5px; /* 矢印の高さの半分だけ上にずらして中央配置 */
}
</style>
a タグに対して position: relative; を指定し、擬似要素 ::after の基準点とします。content: ''; を記述することで擬似要素を生成し、そこに先ほどと同じ要領で枠線と回転を指定して矢印を作ります。position: absolute; を使い、top: 50%; で垂直方向の中央に寄せつつ、margin-top で微調整を行っています。おしゃれなデザインバリエーション
単なる線だけの矢印だけでなく、少し工夫を加えることでデザインの幅が広がります。
角を丸くして柔らかい印象にしたり、二重線にして装飾感を強めたりする方法を見てみましょう。
角を丸くした矢印（border-radius）
.arrow-round {
width: 30px;
height: 30px;
border-top: 6px solid #e67e22;
border-right: 6px solid #e67e22;
transform: rotate(45deg);
border-radius: 4px; /* 角に丸みをつける */
}
border-radius プロパティを追加するだけで、矢印の角を丸くすることができます。二重線の矢印（border-style: double）
.arrow-double {
width: 20px;
height: 20px;
border-top: 4px double #9b59b6; /* doubleを指定 */
border-right: 4px double #9b59b6; /* doubleを指定 */
transform: rotate(45deg);
}
border-style を、通常の solid（実線）から double（二重線） に変更するだけの簡単アレンジです。border-width（太さ）が必要です。細すぎると1本の線に見えてしまうため、最低でも3px以上で調整することをおすすめします。
どうしても面倒な時はジェネレーターを活用しよう
「頭の中で角度を計算するのが面倒」「コードを書く時間を短縮したい」という場合は、Web上のジェネレーターツールを活用するのも一つの手です。
画面上でプレビューを見ながら、線の太さや角度、色を調整し、生成されたCSSコードをコピーするだけで実装できます。
- CSS Arrow Please!: 吹き出し型の矢印を作れる老舗ツール。
- CSS ICON (cssicon.space): 矢印を含む様々なアイコンのCSSコードを取得できるサイト。
HTML/CSSのスキルを活かして年収を上げる方法
以上、CSSで「くの字」矢印を作る方法について解説してきました。
| 年収アップにこだわりたい方 （平均アップ額138万円の実績） | テックゴー |
| 未経験・経験者問わず幅広く探したい方 | ユニゾンキャリア |
| 業界に精通した担当者に相談したい方 | キッカケエージェント |
| ゲーム業界への転職を志望する方 | ファミキャリ |
| エンジニア未経験からキャリアを築く方 | イーチキャリア |
