【CSS】チェックマークや矢印をCSSだけで作る汎用テクニック集

WebサイトやアプリのUIでは、チェックマークや矢印といったシンプルなアイコンが頻繁に使われます。これらを画像やSVGで用意する方法もありますが、色変更やサイズ調整、ダークモード対応のたびに管理コストが増えるという課題があります。実務では、できるだけ依存物を減らし、CSSだけで表現できるものはCSSで作るほうが保守性の高い設計になります。本記事では、チェックマークや矢印をCSSだけで作るための汎用的なテクニックを、実践的なコード例とともに解説します。

CSSだけでアイコンを作る基本的な考え方

CSSアイコンの基本は、擬似要素（::before や ::after）と、border・background・transform を組み合わせることです。HTML構造を増やさず、装飾をCSS側に閉じ込めることで、マークアップの意味構造を保ったまま表現を追加できます。色やサイズを currentColor や em 単位で設計しておくと、文字サイズやテーマカラーに自然に追従します。

チェックマークをborderで作る基本形

チェックマークは、2本の線を組み合わせた形状のため、border の一部だけを表示し、要素を回転させることで再現できます。この方法は最も汎用性が高く、多くのUIで使われています。

.check {
  position: relative;
  width: 1em;
  height: 1em;
}

.check::before {
  content: "";
  position: absolute;
  left: 0.25em;
  top: 0.45em;
  width: 0.5em;
  height: 0.25em;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

線の太さや角度を調整することで、太め・細めなどのバリエーションも簡単に作れます。

丸付きチェックマークの作り方

チェックマークに背景の丸を付けたい場合は、要素本体で円を作り、擬似要素でチェックを描画します。ボタンや完了状態の表示によく使われるパターンです。

.check-circle {
  position: relative;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: currentColor;
}

.check-circle::before {
  content: "";
  position: absolute;
  left: 0.45em;
  top: 0.75em;
  width: 0.45em;
  height: 0.25em;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

背景色とチェック色を分けることで、視認性の高いアイコンになります。

三角形を使った矢印の基本

矢印は、CSSの三角形テクニックを使うことで簡単に作れます。border の一方向だけに色を付け、他を透明にすることで三角形が生成されます。

.arrow-right {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.4em 0 0.4em 0.6em;
  border-color: transparent transparent transparent currentColor;
}

この方法は軽量で、リストマーカーやリンク装飾としてもよく使われます。

線だけで作る矢印（> 風）

よりシャープな矢印を作りたい場合は、border を使って2本の線を組み合わせる方法が有効です。チェックマークと同様に、回転を使って形を整えます。

.arrow-line {
  position: relative;
  width: 0.6em;
  height: 0.6em;
}

.arrow-line::before {
  content: "";
  position: absolute;
  width: 0.45em;
  height: 0.45em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

このタイプは、ナビゲーションや詳細リンクの補助アイコンとして相性が良い表現です。

方向を変える場合の考え方

上下左右の向きを変えたい場合は、アイコンの形を作り直すのではなく、transform: rotate() で回転させるのが基本です。これにより、同一のCSSを再利用でき、管理が容易になります。

.arrow-down {
  transform: rotate(90deg);
}

サイズと色を柔軟に制御する設計

CSSアイコンは em 単位でサイズを指定し、色は currentColor を使うことで、テキストサイズや色指定と自然に連動します。これにより、ボタンや見出しの中に配置しても違和感が出にくくなります。

アクセシビリティと役割分離の注意点

チェックマークや矢印は視覚的な補助要素であり、情報そのものを担うべきではありません。意味を持つ要素はHTMLで表現し、CSSアイコンはあくまで装飾として使うことが重要です。疑似要素で作ることで、スクリーンリーダーへの影響も最小限に抑えられます。

実務での使い分け指針

単色でシンプルなアイコンはCSSで作り、複雑な形状や多色表現が必要な場合のみSVGを使う、という線引きが現実的です。CSSだけで作れる範囲を把握しておくことで、不要なアセット管理を減らし、実装スピードと保守性を両立できます。

まとめ

チェックマークや矢印は、擬似要素・border・transform を組み合わせることで、画像を使わずにCSSだけで表現できます。currentColor や em 単位を活用すれば、テーマ変更やレスポンシブにも強い設計になります。小さなUI要素こそCSSで汎用化しておくことが、長期的に見て扱いやすいフロントエンド実装につながります。