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] CSSで文字に影をつける方法

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

HTMLでリンクをはる

どうも、べ〜やんです。 今回は、HTMLでリンクを貼る方法をざっくり紹介します。 テキストや画像をクリックしたら、別のページに移動できるあれです。 <a href=""&gt …

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

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

[CSS] 3点リーダーの作り方

どうも、べ〜やんです。 今回は、3点リーダーの作り方を紹介します。 3点リーダーとは 3点リーダーって知ってますか? 文章が長くて表示仕切れない場合に、はみ出た部分を「…」とピリオド3つで …

[CSS] CSSで背景色と文字色を半々にする方法

どうも、べ〜やんです。 今回は、CSSで背景色と文字色が半々で入れ替わるようなデザインの作り方を紹介します。 おしゃれなデザイン 背景色と文字色が半々で入れ替わるような表現が出来ると、一段とおしゃれな …