[CSS] CSSでチェックマークを作る方法

どうも、べ〜やんです。

今回はCSSでチェックマークを作る方法を初心者の方用に紹介します。

リストなどのデザインのバリエーションを増やすのに便利です。

チェックマーク

リストなどによく使われるチェックマークをCSSで作ってみます。

↓枠線の応用ですので、枠線の作り方がわからない方はこちらもどうぞ。

[css] borderで枠線をつける方法

↓リストにチェックマーク

See the Pen rNNwgbz by beeyan (@orientado) on CodePen.

作り方の説明

チェックマークは枠線の応用です。空の要素の枠線の一部分だけを使っているイメージです。

空の要素の枠線とはこんな感じです。↓

content: ''; /* 中身が空 */
width: 10px; /* 枠の大きさ */
height: 5px; /* 枠の大きさ */
border: 2px solid #25AF01; /* 枠線の太さ、種類、色 */

See the Pen bGGRPVE by beeyan (@orientado) on CodePen.

チェックマークには左と下の線だけを使います。↓

border-left: 2px solid #25AF01;
border-bottom: 2px solid #25AF01;

See the Pen KKKqjVW by beeyan (@orientado) on CodePen.

あとは角度か変えて傾けてあげています。↓

transform: rotate(-45deg);

See the Pen bGGRPpp by beeyan (@orientado) on CodePen.

似ている形

CSSを少し変えるだけで作れる形を少し紹介します。

• 正方形
• 正方形で傾ける
• 正方形の右と下だけで傾ける
• 枠線ではなく背景色

See the Pen jOOwjVB by beeyan (@orientado) on CodePen.

おわりに

今回はCSSでチェックマークを作る方法を紹介しました。

図形がどのように作られているかを理解すれば、他にもいろんな図形を作れますね。