サイトをデザインしていく上で、ちょっと面白みのあるサイトにしたい、とした時にお問い合わせフォームなどのチェックボックスなども普通のよりかはひと手間加えたデザインにした方が面白みがましますよね(^^)
ひと手間はおろか、ふた手間ぐらい加えちゃうと逆にあざとくなってしまう可能性がありますが、今回はシンプルなデザインを実装したものを紹介したいと思います！
今回は以下のチェックボックスを見本としてデザインしていきたいと思います。
目次
CSSにて実際にデザインしてみる
それではまず、デザインしたチェックボックスをお見せしたいとおもます。
今回はチェックボックスもしくはチェックボックス横の文章をクリック（タップ）することでチェックボックスに赤いチェックが入ったようなデザインにしてみました。
それではHTMLコードとCSSでそれぞれ解説したいと思います！
HTMLコード
チェックボックスを表示させるために以下のようにコードを記述します。
<input id="check" type="checkbox"><label for="check">見本のチェックボックス</label>
上でいう
id=”check”
は<label for=”check”>でfor=”check”と適応させているので、この部分は同じ語句にしましょう。
※ここで設定しないとうまくチェックボックスが動かなくなります
CSS
上のようにコードを記述したら、続いてCSSでチェックボックスのデザインを設定します！
input[type="checkbox"] {
display: none;
}
label{
box-sizing: border-box;
display: inline-block;
min-height: 20px;
padding-left: 30px;
position: relative;
}
label::before {
background: #fff;
box-sizing: border-box;
border: 1px solid #000;
border-radius: 5px;
content: "";
left: 0;
height: 20px;
position: absolute;
top: 5px;
width: 20px;
}
input[type="checkbox"]:checked + label::after {
box-sizing: border-box;
border-right: 3px solid red;
border-bottom: 3px solid red;
content: "";
left: 6px;
height: 11px;
position: absolute;
top: 8px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 8px;
}
上のようにCSSを設定することで、今回の見本と同じデザインにすることができます。
デフォルトのチェックボックスを非表示にする
チェックボックスをデザインするにあたって、まず初めにデフォルトのチェックボックスを非表示にする必要があります。
そのため、cssにて
input[type="checkbox"] {
display: none;
}
と記述し、デフォルトのチェックボックスを非表示にしましょう。
labelを擬似要素が設定できるようにする
続いてチェックボックスに隣接するlabelに擬似要素が設定できるようにさせるため、
label{
box-sizing: border-box;
display: inline-block;
min-height: 20px;
padding-left: 30px;
position: relative;
}
といった感じでcssを設定しましょう。
ちなみに上のcssの4行目の
min-height: 20px;
はのちに設定するチェックボックスの高さと同じ数値を入れておくことをオススメします。。。！
また、5行目の
padding-left: 30px;
は、チェックボックスとの隙間の数値になるので、チェックボックスとの隙間をどれくらい開けたいかによって数値を変更してみましょう。
チェックボックスの枠部分の設定
続いていよいよチェックボックスの枠部分の設定をしていきます。
label::before {
background: #fff;
box-sizing: border-box;
border: 1px solid #000;
border-radius: 5px;
content: "";
left: 0;
height: 20px;
position: absolute;
top: 5px;
width: 20px;
}
今回は上記のように設定しました。
チェックボックスがクリック（タップ）された時のチェックのデザインを設定
最後に、チェックボックスがクリック（タップ）された時のチェックのデザインを設定します。
input[type="checkbox"]:checked + label::after {
box-sizing: border-box;
border-right: 3px solid red;
border-bottom: 3px solid red;
content: "";
left: 6px;
height: 11px;
position: absolute;
top: 8px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 8px;
}
上のコードの解説としまして、順番は前後しますが以下にまとめたいと思います。
チェックの線の太さと色を設定
チェックの線の太さと色を上の見本でいう3〜4行目の
border-right: 3px solid red; border-bottom: 3px solid red;
で設定しています。
要素を回転させる
続いて、10〜11行目の
transform: rotate(45deg); -webkit-transform: rotate(45deg);
にてチェックの見た目にするために要素を45度回転させましょう。
チェックのデザイン・大きさを調整
その上で、7行目・12行目の
height: 11px;
width: 8px;
でチェックのデザイン・大きさを調整させましょう。
チェックの位置を調整
最後に、6行目・9行目の
left: 6px;
top: 8px;
にてチェックの位置を調整しましょう。
まとめ
以上がチェックボックスをCSSでデザインする時の手順になります！
チェックボックスそのもの…というよりかは、本当のチェックボックスは非表示にして、疑似的に作ったチェックボックスをデザインする…というニュアンスでしょうか。
この方法である程度自分の思い描くチェックボックスのデザインにさせることができるようになると思いますので、是非ともご活用ください！
