SVGで作るスマホ用チェックボックスの基本

前回はCSSだけで作る角丸ボタンの基本を紹介しました。
今回はSVGを使ってきれいに チェックボックス を作る作り方を紹介します。
チェックボックスもスマホサイトではよく見かけると思います。
同意を求めるときや、最終確認の際に チェックボックス は必需品だと思います。
目立たせたい場合もあると思うので、デザインがその分自由自在に出来たらいいですよね。
しかしデフォルトのデザインをそのまま使うとチェックボックスのデザインは以下のように・・・

今回は下記のようなフラットなデザインを簡単に作る方法を紹介します。

HTMLのコード

まず以下のようなHTMLを作ります。

<div>
  <input id="agree" name="agree" type="checkbox" value="1">
    <label for="agree">
      <span>利用規約に同意する</span>
    </label>
</div>

解説

labelタグのfor属性

文書中のfor属性の値と同じIDを持つ最初の要素が、このラベル要素の示すラベル付きコントロールになります。

inputタグのtype属性

表示するコントロールの種類です。この属性を指定しない場合のデフォルトタイプはtextです。
type属性をcheckboxにすると、これで送信する値を定義しているため、value 属性を使用しなければいけません。

inputタグのvalue属性

コントロールの初期値です。この属性はtype属性の値がradioまたはcheckbox である場合を除き、省略可能です。
チェックボックスを作るには、inputタグにtype属性とvalue属性をつけます。（value属性は省略可能です。）
そしてinputタグのidとlabelタグのfor属性を同じにする必要があるということです。

CSSのコード

上記のHTMLに以下のCSSをあてると簡単にフラットなデザインにできてしまいます。

input[type=”checkbox”]{
    display: none;	/*解説1*/
}
input[type=”checkbox”]+label{
    position: relative;	/*解説2*/
    display: table;	/*解説3*/
    height: 30px;
    cursor: pointer;
}
input[type=”checkbox”]+label:before{ /*解説4*/
    position: absolute;	
    box-sizing: border-box;	/*解説5*/
    width: 30px;
    height: 30px;
    content: url('../img/check.svg');	/*解説6*/
    border: 2px solid  #a6a6a6;
    border-radius: 5px;
    background: #fff;
}
input[type=”checkbox”]+label>span{
    vertical-align: middle;
    display: table-cell;	
    padding-left: 40px;
}
input[type=”checkbox”]:checked + label:before { /*解説7*/
    position: absolute;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    border: 2px solid #367cd9;
    content: url('../img/check_white.svg');
    border-radius: 5px;
    background: #367cd9;
}

解説

解説1：display:none;

まずデフォルトのinputタグをdisplay：none;で消します。

参考資料
https://developer.mozilla.org/ja/docs/Web/CSS/display

解説2：position:relative;

すべての要素を位置指定されていないものとして配置した後、レイアウトを維持したまま、その要素の位置を決めます。
relativeがついた要素を基準にabsoluteがついている要素の位置を固定します。

参考資料
https://developer.mozilla.org/ja/docs/Web/CSS/position

position:absolute;

要素のためのスペースが確保されません。
代わりに、その要素の位置を、位置指定された祖先要素のうちもっとも近いもの、もしくは、その要素の包含ブロックを基準にして決めます。

参考資料
https://developer.mozilla.org/ja/docs/Web/CSS/position

解説3：display:table;

<table>要素と同じような働きです。これは、ブロックレベルボックスを定義します。

参考資料
https://developer.mozilla.org/ja/docs/Web/CSS/display

解説4：:before

そしてinputタグの代わりとなるlabelタグを用いてbefore要素でフラットデザインを作っていきます。
before要素はマッチした要素の最初の子要素となる擬似要素を生成します。
label:beforeということはlabelタグの前に書かれたコンテンツを挿入することになります。

参考資料
https://developer.mozilla.org/ja/docs/Web/CSS/::before

解説5：box-sizing:border-box;

box-sizing:border-box;はwidthとheightによって定義される領域内にパディング領域及びボーダー領域が含まれます。
よってこれを書かないとborder分の4px分チェックボックスの領域が大きくなってしまいます。

参考資料
https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing

解説6：content: url(‘../img/check.svg’);

content プロパティは、::before疑似要素及び::after疑似要素をその対象とし、これらの内容を生成する CSS プロパティです。
よってcontentプロパティに画像を置くとチェックボックス内にチェック画像を見せることができます。

今回使っているSVGファイルは以下のファイルから参照できます。
svg_check

参考資料
https://developer.mozilla.org/ja/docs/Web/CSS/content

解説7：input[type=’checkbox’]:checked + label:before

checked要素があるのでチェックボックスをクリックした際の当てたいスタイルを書いていきます。
よって背景色と矢印の画像が変化します。

参考資料
https://developer.mozilla.org/ja/docs/Web/CSS/:checked

SVGできれいにスマホ用 チェックボックス を作る作り方（横並び編）

ではもう一つ、下記のように横並びにしたい場合のコードも紹介します。

HTMLのコード

<div class="frame1">
    <div class="frame2">
      <input id="agree1" name="agree1" type="checkbox" value="1">
        <label for="agree1">
          <span>利用規約に同意する</span>
        </label>
    </div>
    <div class="frame2">
      <input id="resistration1" name="resistration1" type="checkbox" value="2">
        <label for="resistration1">
          <span>メルマガに登録する</span>
        </label>
    </div>
</div>

解説

チェックボックスを横並びにするためにframe1というクラスのついたdivタグを1つ追加し、チェックボックスの2つのdivタグを囲いました。
チェックボックスのdivタグを全体のdivタグの半分半分で表示させる構造にします。

CSSのコード

先程のCSSに以下のCSSを追加したら完成します。

div.frame1 {
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;	/*解説1*/
}
div.frame2{
    display: inline-block;
    width: 50%;
    text-align: -webkit-center;
}

解説

解説1：white-space: nowrap;

要素内の空白文字を詰めます。
これを書くことでチェックボックスのあるdivタグを50%にしても折り返らないようになります。

参考資料
https://developer.mozilla.org/ja/docs/Web/CSS/white-space

チェックボックスのデザインを自分で自由自在に作るのは難しいと思っていた方、ぜひ上記のコードで簡単かつきれいなチェックボックスを作ってみてください。