【CSS】簡単にチェックマークを作る方法

Webデザインにおいて、チェックマークは頻繁に使用される要素の一つです。例えば、項目が完了したことを示す際や、選択肢が選ばれていることをユーザーに知らせる場合などがあります。しかし、HTMLとCSSの初心者にとっては、このようなシンボルを作成するのは少し難しそうに感じられるかもしれません。この記事では、CSSだけで簡単にチェックマークを作成する方法を詳細に解説します。

HTMLの構造
CSSでデザイン
サンプル
まとめ

HTMLの構造

まずはHTMLの構造を簡単に作ります。チェックマークを表示するためのdiv要素を作成し、そのdiv要素にクラス名として .checkmark を指定します。

<div class="checkmark"></div>

CSSでデザイン

次に、CSSを使ってこのdiv要素をスタイリングします。以下のコードは .checkmark クラスを持つdiv要素に対して、チェックマークを描画する一例です。

.checkmark {
  width: 20px;
  height: 20px;
  position: relative;
}

.checkmark::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 12px;
  border: solid blue;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  background-color: transparent;
}

position: relative;: .checkmark divに対する基準点を設定します。
::after: 擬似要素を用いて、チェックマークを描画します。
content: “”;: 擬似要素の内容を空に設定します。
border: solid white;: 枠線を白で描きます。
border-width: 0 2px 2px 0;: 右と下に2pxの枠線を描きます。
transform: rotate(45deg);: 擬似要素を45度回転させます。