CODING

[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でチェックマークを作る方法を紹介しました。

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



-CODING
-, ,

執筆者:


comment

関連記事

CSSエフェクト紹介サイト!CSSFX

どうも、べ〜やんです。 今回は、CSSのおしゃれなエフェクトを紹介してくれるサイト『CSSFX』を紹介します。 CSSFXとは 引用元:CSSFX CSSFXはCSSのクリック、ホバー、ローディング時 …

[超初心者] HTMLの書き方

どうも、べ〜やんです。 今回は、HTMLの書き方の基本的なルールをざっくりと確認していきます。 以下のHTML文をざっくり説明します。 <!DOCTYPE html> <html&g …

[CSS] CSSで文字に影をつける方法

どうも、べ〜やんです。 今回は、CSSで文字に影やアウトラインをつける方法を紹介します。 text-shadow text-shadowは文字に影をつけるプロパティです。 値は4つ使用します。 {te …

[CSS] 中央揃え

どうも、べ〜やんです。 今回はCSSでテキストやブロックを中央配置する方法を紹介します。 ブロックとインライン ブロック要素とインライン要素とでは中央揃えの方法が違うので、まずはブロック要素とインライ …

[CSS] CSSの単位vwやvh知ってますか?

どうも、べ〜やんです。 今回は、CSSで使用される単位のvw、vhを紹介します。 Viewport ビューポート vwやvhは、Viewport  Width、Viewport  heightの略で、 …