CSSで矢印を作成・活用する方法！初心者でもわかる徹底解説！

はじめに
CSSで矢印を作成する基本的な方法
まとめ

はじめに

この記事では、CSSを使って矢印を作成・活用する方法について初心者目線でわかりやすく解説します。

サンプルコードとともに、具体的な応用例も紹介しますので、ぜひ参考にしてください。

CSSで矢印を作成する基本的な方法

CSSで矢印を作成するには、主に次の2つの方法があります。

疑似要素（::before, ::after）を使用する方法
図形を組み合わせて矢印を作成する方法（borderを利用）

疑似要素を使用した矢印の作成

疑似要素を使って矢印を作成する方法は、::beforeや::afterといった疑似要素を利用して、要素の前後に矢印を追加するものです。

【サンプルコード】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSSで矢印を作成</title>
<style>
.arrow-right::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 20px solid green;
}
</style>
</head>
<body>
<div class="arrow-right"></div>
</body>
</html>

このサンプルコードでは、緑色の右向き矢印を作成しています。

矢印の大きさや色、向きを変更する場合は、borderの値を調整してください。

図形を組み合わせた矢印の作成

borderを利用して図形を組み合わせて矢印を作成する方法では、四角形や三角形を作成し、それらを組み合わせて矢印を表現します。

【サンプルコード】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSSで矢印を作成</title>
<style>
.arrow-down {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid red;
}
</style>
</head>
<body>
<div class="arrow-down"></div>
</body>
</html>

このサンプルコードでは、赤色の下向き矢印を作成しています。

矢印の大きさや色、向きを変更する場合は、borderの値を調整してください。

矢印の応用方法とサンプルコード

それでは、実際に矢印を応用してみましょう。下記にいくつかの応用例を紹介します。

ナビゲーションメニューでの利用

ナビゲーションメニューの各項目の右側に矢印を追加することで、選択肢があることを視覚的に示すことができます。

【サンプルコード】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ナビゲーションメニューに矢印を追加</title>
<style>
nav ul {
  list-style: none;
  padding: 0;
}

nav li {
  display: inline;
  margin-right: 20px;
}

nav li::after {
  content: "›";
  margin-left: 5px;
  color: blue;
}
</style>
</head>
<body>
<nav>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>
</body>
</html>

アコーディオンメニューでの利用

アコーディオンメニューで矢印を利用することで、開閉の状態を視覚的に示すことができます。

【サンプルコード】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>アコーディオンメニューに矢印を追加</title>
<style>
.accordion-toggle {
  cursor: pointer;
  position: relative;
  padding-left: 20px;
}

.accordion-toggle::before {
  content: "▶";
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 0.3s;
}

.accordion-toggle.open::before {
  transform: rotate(90deg);
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
  const toggles = document.querySelectorAll('.accordion-toggle');
  toggles.forEach(function(toggle) {
    toggle.addEventListener('click', function() {
      this.classList.toggle('open');
    });
  });
});
</script>
</head>
<body>
<h3 class="accordion-toggle">Section 1</h3>
<p>Section 1 content...</p>
<h3 class="accordion-toggle">Section 2</h3>
<p>Section 2 content...</p>
<h3 class="accordion-toggle">Section 3</h3>
<p>Section 3 content...</p>
</body>
</html>

このサンプルコードでは、アコーディオンメニューの各セクションのタイトルに矢印を追加しています。

矢印は、タイトルをクリックすることで回転し、開閉状態を示します。