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] visibilityで非表示にする方法

どうも、べ〜やんです。 今回は、要素を不可視にするvisibilityプロパティを紹介します。 visibilityとは visibilityとは要素を不可視にできるプロパティです。 使用される値は三 …

[CSS] white-spaceの使い方/空白・改行

どうも、べ〜やんです。 今回は、半角スペースや改行の表示を指定するプロパティのwhite-spaceを紹介します。 white-spaceとは white-spaceとはHTMLに書いた半角スペースや …

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

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

[jQuery] jQueryでハンバーガーメニューを作る

どうも、べ〜やんです。 今回は、jQueryを使ってハンバーガーメニューを作る方法を紹介します。 ハンバーガーメニューとは ハンバーガーメニューとは、例えばヘッダーのメニューを隠しておいてアイコンをク …

[css] font-sizeの種類

どうも、べ〜やんです。 今回は、CSSで指定するフォントサイズの種類と簡単な使い方をまとめて紹介します。 フォントサイズの種類 フォントサイズを適当に決めてませんか?なんとなくpxだけを使ってませんか …