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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[HTML] 表を作るtable

どうも、べ〜やんです。 今回はHTMLでtableタグを使って表を作る方法を紹介します。 表の例 表を使う 表を使うと伝えたい情報を分かりやすく伝えることができます。 HTMLには簡単に表を作れる便利 …

アイコンを簡単に表示できる!Icongram

どうも、べ〜やんです。 今回は、簡単にアイコンを表示できるサービス『Icongram』を紹介します。 Icongramとは 引用元:Icongram Icongramは9つのアイコンライブラリからAP …

[CSS] overflowの使い方

どうも、べ〜やんです。 今回はCSSのoverflowの使い方を紹介します。 テキストが長いけどスペースを大きく取りたくない場合などに便利です。 overflowとは overflowは要素からはみ出 …

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

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

[css] 横並び、flexboxの使い方

どうも、べ〜やんです。 今回は、CSSで要素を横並びにする方法のflexboxの基本的な使い方を紹介します。 flexboxとは? 要素を横並びに配置する方法のひとつに、flexboxがあります。 f …