公開日: 2018年01月23日

【初心者向け】CSSを使って矢印を挿入する簡単な方法

「画像スライド」や「トップへ戻る」など多くのパーツで使われているCSS製の矢印。
Web系企業への就職や転職を考えている方なら、抑えておきたいテクニックですよね。
今回は、CSSを使った基本的な矢印作成方法をご紹介します。

【初心者向け】CSSを使って矢印を挿入する簡単な方法
矢印にCSSを使う理由
CSSで矢印を書く基本的な仕組み
シンプルな矢印
背景付きの矢印
画像ファイルを用いた矢印
まとめ

【初心者向け】CSSを使って矢印を挿入する簡単な方法

矢印にCSSを使う理由

CSSで矢印を書く前に「ナゼ画像ではなくCSSなのか」という点を整理しておきます。

【矢印をCSSで書く理由】

編集しやすい
早く作成できる
きれい

CSSで矢印を書いた場合、色やサイズ、角度を変えようと思うと一部のコードを書き換えるだけで終わります。ところが画像データの場合、画像データを編集して、サーバーにアップして、HTMLの画像データ読み込み先を書き換える必要がありますね。またレスポンシブデザインを考慮した場合、画面幅に応じた矢印画像を用意する必要があるため、編集に手間がかかります。これらのことからCSSで矢印を書いた方が、「編集しやすく」「早い」です。

CSSの「きれい」については、画像の場合データサイズによって「キレイさ」は変わりますが、CSSは一定です。そしてCSSの場合、画面サイズや解像度など、ユーザー環境をあまり考慮しなくてもきれいな矢印を表示できますね。

CSSで矢印を書く基本的な仕組み

CSSで矢印を書く方法はいくつかありますが、一番シンプルな方法をご紹介。 CSS基礎の復習にもなりますので、ぜひ試してみてください。

まず完成形から見てみましょう。

【CSSで矢印を書いた場合】

【上記ページのコード】

<!-- トライアングル -->
<!DOCTYPE html>
<html>
<head>
<style>
.triangle-right {
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-left: 50px solid rgb(76, 175, 80);
    border-bottom: 25px solid transparent;
}
</style>
</head>
<body>
<h2>三角形型の矢印</h2>
<p class="triangle-right"></p>
<p class="triangle-right"></p>
<p class="triangle-right"></p>
</body>
</html>

【仕組み図】

【説明】

まずHTMLコード内にCSSを適用するためのクラスを設定。今回は triangle-right 。
矢印の描画（表現）は、よくHTMLの表編集で使う border を用いて描画。
普通は、1とか2ぐらいの border 値を故意に 20とか50とかに太く設定。
CSSの基準を決めるために、width と height を 0ゼロに設定。
右向きの矢印の場合は、0ゼロ基準の左側つまり border-left に値を加算。
次に矢印の角度を表現すべく、0ゼロ基準の上側と下側に border を書く。

ここまでのコード

<!-- トライアングル -->
<!DOCTYPE html>
<html>
<head>
<style>
.triangle-right {
    width: 0;
    height: 0;
    border-top: 25px solid ;
    border-left: 50px solid rgb(76, 175, 80);
    border-bottom: 25px solid ;
}
</style>
</head>
<body>
<h2>三角形型の矢印</h2>
<p class="triangle-right"></p>
</body>
</html>

＞＞　結果

画像内の黒色部分がジャマですよね。

この黒色を消す処理については、background-color プロパティでよく使われる「透過の transparent 」を使います。すると 0ゼロ基準から border-top と border-bottom で定めた値までを透過してくれます。これでCSSを用いた矢印の完成となります。

続いて、いくつかCSSを用いた矢印の書き方をご紹介していきます。

シンプルな矢印

「トップへ戻る」や「画像スライド」でよく登場する＞のマークをCSSで描画してみます。

【コード】

<!DOCTYPE html>
<html>
<head>
<style>
i {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.right {
    transform: rotate(-45deg);
}

.left {
    transform: rotate(135deg);
}

.up {
    transform: rotate(-135deg);
}

.down {
    transform: rotate(45deg);
}
</style>
</head>
<body>

<h2>CSSで矢印</h2>
<p>右: <i class="right"></i></p>
<p>左: <i class="left"></i></p>
<p>上: <i class="up"></i></p>
<p>下: <i class="down"></i></p>
</body>
</html>

＞＞　結果

ポイントは、HTMLの iタグの枠線設定（border）で、右側と下側の 2つだけ線を描写し、その2つの線を回転して矢印を表現していることです。

背景付きの矢印

「次のページへ」や「手続きを進める」などでよく使われている背景付きの矢印描画を確認してみます。

【コード】

<!DOCTYPE html>
<html>
<head>
<style>
button {
  background: #0898b8;
  border: 1px solid #0898b8;
  color: white;
  line-height: 24px;
  padding: 6px 12px;
}

span::after {
  content: '→';
  font-size: 16px;
  margin-left: 4px;
}
</style>
</head>
<body>
<h2>三角形型の矢印</h2>
<button>
  <span>Next</span>
</button>
</body>
</html>

＞＞　結果

背景は、HTMLのボタンタグで表現して、矢印はCSSの擬似要素でコントロール。 HTMLとCSSができるだけでも、ずいぶん表現方法の幅が広がりますね。

画像ファイルを用いた矢印

こちらは画像を元にした矢印描画の事例です。実際にコードを書いてみると、「CSSの方が楽だな」と気づくと思います。

【コード】

<!DOCTYPE html>
<html>
<head>
    <style>
        .list-links {
            width: 100%;
            padding-left: 0px;
            }
            .list-links > li {
                position: relative;
                border-bottom: 1px solid #ddd;
            }
            .list-links > li:first-child {
                border-top: 1px solid #ddd;
                }
            .list-links > li::before {
                position: absolute;
                content: "";
                top: 50%;
                left: 10px;
                width: 10px;
                height: 10px;
                margin-top: -5px;
                background: url("arrow.jpg") top left no-repeat;
                background-size: 10px 10px;
                }
          .list-links > li a {
              display: block;
              position: relative;
              padding: 15px 30px 15px 30px; /* 左右にアイコン分を考慮した余白を指定 */
              font-weight: bold;
              }

          .list-links > li a::after {
            position: absolute;
            content: "";
            top: 50%;
            right: 10px;
            width: 12px;
            height: 24px;
            margin-top: -12px;
            background: url("arrow.jpg") top left no-repeat;
            background-size: 12px 24px;
            }
    </style>          
</head>
<body>
<ul class="list-links">
  <li><a>テキストテキストテキストテキストテキストテキスト</a></li>
  <li><a>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</a></li>
  <li><a>テキストテキストテキストテキストテキストテキスト</a></li>
  <li><a>テキストテキストテキストテキストテキストテキスト</a></li>
  <li><a>テキストテキストテキストテキストテキストテキスト</a></li>
</ul>
</body>
</html>

＞＞　結果