【コピペOK！】マテリアルデザインのチェックボックスを作る方法

2021/06/25 25 6月, 2021 CSS HTML JavaScript

マテリアルデザインシリーズの第三弾です！

過去の記事はこちらをご覧ください。

今回はチェックボックスの作り方を紹介します。

では早速ソースコードを載せます。

HTML


<html>
<head>
    <style>
        /* 項目名 */
        .md-checkbox-label {
            display: block;
            margin-bottom: 1rem;
        }
        /* 選択肢リスト */
        .md-checkbox-ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .md-checkbox-ul > li {
            position: relative;
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }
        /* デフォルトのチェックボックスは隠す。代わりに:beforeでオリジナルのチェックボックス枠を作成 */
        .md-checkbox-checkbox {
            display: none;
        }
        .md-checkbox-checkbox + label {
            position: relative;
            padding-left: 2rem;
        }
        /* オリジナルのチェックボックス枠 */
        .md-checkbox-checkbox + label::before {
            content: '';
            display: block;
            box-sizing: border-box;
            position: absolute;
            top: 4px;
            left: 2px;
            width: 16px;
            height: 16px;
            border: 2px solid #9E9E9E;
            border-radius: 2px;
            transition: 0.15s;
        }
        /* オリジナルのチェック */
        .md-checkbox-checkbox + label::after {
            content: '';
            display: block;
            box-sizing: border-box;
            position: absolute;
            top: 11px;
            left: 3px;
            width: 0;
            height: 0;
            transform: rotate(-45deg);
            transform-origin: left top;
            border-left: 2px solid #FFF;
            border-bottom: 2px solid #FFF;
            visibility: hidden;
        }
        /* チェック時の波紋エフェクト */
        .md-checkbox-ripple {
            position: absolute;
            top: -8px;
            left: -10px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #6300ee98;
            transform: scale(0);
        }
        /* チェックされたら波紋アニメーション開始 */
        .md-checkbox-checkbox:checked ~ .md-checkbox-ripple {
            animation: ripple .4s linear;
        }
        /* チェックされたらチェックボックス内に色を塗る */
        .md-checkbox-checkbox:checked + label::before {
            border: 8px solid #6200ee;
        }
        /* チェックされたらチェックアニメーション開始 */
        .md-checkbox-checkbox:checked + label::after {
            animation: md-checkbox-anim .3s forwards;
        }
        /* 波紋アニメーション */
        @keyframes ripple {
            to {
                transform: scale(1);
                opacity: 0;
            }
        }
        /* チェックアニメーション */
        @keyframes md-checkbox-anim {
            0% {
                visibility: visible;
                width: 0;
                height: 0;
            }
            40% {
                visibility: visible;
                width: 0;
                height: 8px;
            }
            100% {
                visibility: visible;
                width: 12px;
                height: 8px;
            }
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #F5F5F5;
        }
    </style>
</head>
<body>
    <div>
        <span class="md-checkbox-label">Receive emails</span>
        <ul class="md-checkbox-ul">
            <li>
                <input type="checkbox" id="daily" class="md-checkbox-checkbox">
                <label for="daily">Daily</label>
                <span class="md-checkbox-ripple"></span>
            </li>
            <li>
                <input type="checkbox" id="weekly" class="md-checkbox-checkbox">
                <label for="weekly">Weekly</label>
                <span class="md-checkbox-ripple"></span>
            </li>
            <li>
                <input type="checkbox" id="monthly" class="md-checkbox-checkbox">
                <label for="monthly">Monthly</label>
                <span class="md-checkbox-ripple"></span>
            </li>
        </ul>
    </div>
</body>
</html>

では以下に解説していきます。

HTML


<div>
   <span class="md-checkbox-label">Receive emails</span>
   <ul class="md-checkbox-ul">
      <li>
         <input type="checkbox" id="daily" class="md-checkbox-checkbox">
         <label for="daily">Daily</label>
         <span class="md-checkbox-ripple"></span>
      </li>
      <li>
         <input type="checkbox" id="weekly" class="md-checkbox-checkbox">
         <label for="weekly">Weekly</label>
         <span class="md-checkbox-ripple"></span>
      </li>
      <li>
         <input type="checkbox" id="monthly" class="md-checkbox-checkbox">
         <label for="monthly">Monthly</label>
         <span class="md-checkbox-ripple"></span>
      </li>
   </ul>
</div>

あまり特別なことはしていないのですが、

一番上のspanタグでチェックボックスたちのグループ名を設定しており、その下のulタグがチェックボックスたちのリストになります。

liタグが1行分の要素になり、その中にはチェックボックス(input type=”checkbox”)とそれに対応する項目名(labelタグ)、チェックされた時に出る波紋エフェクト(spanタグ)があります。

labelタグのfor属性にinputタグのid名を設定することで項目名をクリックしてもチェックがON/OFFするようにしています。後述しますが、この設定がチェックのON/OFFをする上で重要になります。

CSS


/* 項目名 */
.md-checkbox-label {
   display: block;
   margin-bottom: 1rem;
}

チェックボックスたちのグループ名です。その下のチェックボックスリストとの距離を少し空けるためにmargin-bottomを設定しています。spanタグでインライン要素なのでmargin-bottomを効かせるためにdisplay: blockでブロック要素にしています。(pタグとかのブロック要素でもよかったかもです)

CSS


/* 選択肢リスト */
.md-checkbox-ul {
   margin: 0;
   padding: 0;
   list-style: none;
}
.md-checkbox-ul > li {
   position: relative;
   display: flex;
   align-items: center;
   margin-bottom: 1rem;
}

チェックボックスのリストです。

ulタグは通常左側に黒丸がついてくるのですが、それはいらなかったのでlist-style: noneで消しています。

また黒丸分のスペースを埋めるためにmarginとpaddingを0に設定しています。

この辺はリセットCSSを導入していたら書かなくてもよいかもです。

ul > liでulタグ直下のliタグへのスタイルを設定することができます。

縦方向に中央寄せdisplay: flexとalign-items: centerを設定しており、チェックボックス同士の間隔を空けたかったのでmargin-bottomを設定しています。

position: relativeで相対配置としているのはこのタグの中に作られるチェックボックスや波紋のマークがposition: absoluteで絶対配置になるため、liタグを起点とさせるための設定です。

CSS


/* デフォルトのチェックボックスは隠す。代わりに:beforeでオリジナルのチェックボックス枠を作成 */
.md-checkbox-checkbox {
   display: none;
}
.md-checkbox-checkbox + label {
   position: relative;
   padding-left: 2rem;
}

inputタグで作られるデフォルトのチェックボックスでは好き勝手にデザインをすることができません。

なので、このチェックボックスはdisplay: noneで消してしまいます。

ではどうやってチェックボックスを機能させるかというとinputタグの隣に配置したlabelタグです。

HTMLの説明でも書きましたがlabelタグのfor属性にinputタグのid名を指定することでlabelタグとinputタグは紐づいた状態になっています。labelタグをクリックするとチェックのON/OFFをすることができます。

ではチェックボックスはどこへ行ったのか。

チェックボックスはlabelタグの擬似要素で作ります。

CSS


/* オリジナルのチェックボックス枠 */
.md-checkbox-checkbox + label::before {
   content: '';
   display: block;
   box-sizing: border-box;
   position: absolute;
   top: 4px;
   left: 2px;
   width: 16px;
   height: 16px;
   border: 2px solid #9E9E9E;
   border-radius: 2px;
   transition: 0.15s;
}

「+」は隣接セレクタと呼ばれるものです。

「A + B」はA要素の隣にあるB要素という意味です。隣とは言ってもA要素の前ではなく後ろになくてはいけません。

上記の場合はmd-checkbox-checkboxクラスが設定されたinputタグのとなりのlabelタグについてのスタイルなのですが、「label::before」となっています。

「::before」とは擬似要素といってそのタグの前に擬似的な要素を作るという意味になります。

labelタグの前に擬似的な要素を作ります。

今回はbefore擬似要素でチェックボックスの枠を作っています。

文字は必要ないのでcontentは空文字を設定、ブロック要素にしたいのでdisplay: blockを設定しています。

box-sizing: border-boxでwidth、heightにborderのサイズも含めています。

positionからheightまで一気にみていくと、widthとheightで縦横16pxのチェックボックスの枠を作っています。

配置を自由に設定したいのでposition: absoluteで絶対配置とし、top: 4px、left: 2pxでliタグの上から4px、左から2pxの距離に配置しています。

borderで太さ2pxのグレーの枠線になるように設定し、

border-radiusで少し角を丸めています。

transition: 0.15sでチェックをつけられた時の背景色を0.15秒かけて塗るように設定しています。

CSS


/* オリジナルのチェック */
.md-checkbox-checkbox + label::after {
   content: '';
   display: block;
   box-sizing: border-box;
   position: absolute;
   top: 11px;
   left: 3px;
   width: 0;
   height: 0;
   transform: rotate(-45deg);
   transform-origin: left top;
   border-left: 2px solid #FFF;
   border-bottom: 2px solid #FFF;
   visibility: hidden;
}

before擬似要素と同じ要領ですが、::afterはlabelタグの後ろに擬似的な要素をつける意味になります。

after擬似要素では枠の中につくチェックマークを作っています。

チェックマークはどうやって作っているかというと実は四角のボックスを45度傾けてボックスの左と下の線だけを表示して作っています。

transform :rotate(-45deg)で反時計回りで45度傾けており、border-leftとborder-bottomで左と下を太さ2pxの白線になるよう設定しています。

また、チェックがつけられるまでは隠しておきたいのでvisibilityはhiddenに設定しています。

CSS


/* チェック時の波紋エフェクト */
.md-checkbox-ripple {
   position: absolute;
   top: -8px;
   left: -10px;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background-color: #6300ee98;
   transform: scale(0);
}

こちらではチェックをつけられた時の波紋を作っています。

width、height、border-radiusの設定によって縦横40pxの正円を作っています。

チェックがつけられるまでは隠しておきたいのでscaleは0にしておきます。

ここまででチェックボックスの土台ができあがりました。以降はチェックをつけられた時の効果を作っています。

CSS


/* チェックされたら波紋アニメーション開始 */
.md-checkbox-checkbox:checked ~ .md-checkbox-ripple {
   animation: ripple .4s linear;
}
/* 波紋アニメーション */
@keyframes ripple {
   to {
      transform: scale(1);
      opacity: 0;
   }
}

ここではチェックがつけられた時に浮かび上がる波紋のエフェクトをつくっています。

rippleという名前の波紋アニメーションを呼び出しており0.4秒かけて拡大率を0から1倍に上げると同時に徐々に透明にしています。

CSS


/* チェックされたらチェックボックス内に色を塗る */
.md-checkbox-checkbox:checked + label::before {
   border: 8px solid #6200ee;
}

チェックがつけられた時に枠の中に色を塗っています。

枠線を消してbackground-colorで背景色をつけてもよかったのですが、チェックをON/OFFする時の切り替わりでちょっとチカチカしたので、ちょっと太めのborderを設定して塗ったことにしています。

CSS


/* チェックされたらチェックアニメーション開始 */
.md-checkbox-checkbox:checked + label::after {
   animation: md-checkbox-anim .3s forwards;
}
/* チェックアニメーション */
@keyframes md-checkbox-anim {
   0% {
      visibility: visible;
      width: 0;
      height: 0;
   }
   40% {
      visibility: visible;
      width: 0;
      height: 8px;
   }
   100% {
      visibility: visible;
      width: 12px;
      height: 8px;
   }
}

チェックをつけられた時にチェックマークをつけています。

md-checkbox-animという名前のアニメーションを0.3秒かけて実行しています。

さらにforwardsを設定することでアニメーション後の状態(チェックONの状態)を維持しています。

アニメーションが40%のところまで進行したところで左から下に向かって線が引かれて、

そこから横幅が広がることで下から右上への線が引かれています。

まとめ

input type=”checkbox”のデフォルトのチェックボックスではデザインをすることができないので、

このように独自のデザインをしたい場合はデフォルトのチェックボックスを見えなくした上で擬似要素で作ることになります。

普通のチェックボックスじゃつまらない！という方は試してみてください。

したっけ！

inputタグのチェックボックスはdisplay: noneで消す
::before擬似要素でチェックボックスの枠を作る
::after擬似要素で枠の中のチェックマークを作る
チェックマークは::after擬似要素をブロック要素にして45度傾けた四角の左と下の線で作っている

本格的にプログラミングを学びたいですか？ITのエンジニアになりたいですか？

IT業界は万年人手不足であり、ニーズがあります。
パソコンとインターネットがあれば場所を問わず仕事ができるので、リモートワークが普及しつつある現代にマッチした職種と言えると思いますし、物理的に必要なものはパソコンぐらいなので初期投資にかかる費用も少なく、人並みに仕事ができればフリーランスになって会社依存を脱却することもできます。

身につけた技術は一生モノです。

もし本腰を入れて勉強したいという方はスクールに入るのも一つの手です。
いくつか紹介しますので、興味があればサイトを覗いてみてください。

DMM WEBCAMP

転職を本気で考えている方向けのプログラミングスクールです。転職を保証しているため、未経験からIT業界へ転職を求めている方へおすすめです！

DMM WEBCAMPのサイトへ

TechAcademy

最短4週間で未経験からプロを育てるオンライン完結のスクールです。どこかに通う必要なく、自宅でもプログラミングやアプリ開発を学ぶことができます。

TechAcademyのサイトへ

Want to learn programming in earnest? Want to be an IT engineer?

The IT industry is understaffed for many years and has needs.
If you have a computer and the Internet, you can work anywhere, so I think it can be said that it is a job type that matches the present age when remote work is becoming widespread. The initial investment cost is low, and if you can work like a normal person, you can become freelance and get rid of your dependence on the company.

The skills that you have acquired is something that will last a lifetime.

If you want to study in earnest, you can go to school.
I will introduce some of them, so if you are interested, please take a look at the site.

DMM WEBCAMP

This is a programming school for those who are serious about changing jobs. guarantee a job change, so it is recommended for those who are inexperienced and are looking for a job change in the IT industry!

move to DMM WEBCAMP

TechAcademy

It is an online school that trains professionals from inexperienced in a minimum of 4 weeks. You can learn programming and app development at home without having to go anywhere.

move to TechAcademy