HTMLチェックボックスの作成＋カスタマイズ方法（サンプルコードつき）

こんにちは！
最近WEB制作をはじめたばかりだけど「そもそもチェックボックスってなに？・・」「チェックボックスを作成してみたいけどやり方が・・」「チェックボックスってむずかしそう・・」
そのように考えている、WEB制作初心者の方も多いのではないでしょうか？
チェックボックスは、多くのお問い合わせホームで採用されており、作成できる様になるとWEB制作の幅が広がります。今回は、WEB制作初心者のかた向けに、チェックボックスの作成・カスタマイズ方法を具体的に、サンプルコード付きで解説していきます。

1 チェックボックスとは
- 1.1 チェックボックスは各OS、ブラウザで微妙に表示が違う
2 チェックボックスの使い方・設置方法
- 2.1 シンプルなチェックボックスを作る方法を解説
3 それぞれのタグ、属性について解説
4 様々なタイプのチェックボックスとそれぞれの属性について解説
5 チェックボックスをCSSで装飾する方法
- 5.1 CSSでボタンを縦並びにするには？
- 5.2 CSSでチェックボックスのデザインを変えよう
6 まとめ

チェックボックスとは

下記の様なものです。

チェックボックス↓

赤青黄

一度は見たことあるのではないでしょうか？入力フォームの選択ボタンであり、複数選択の中から選択をしてもらい「複数回答」できるボタンです。
これに対して、ラジオボタンは複数選択肢の中から一つだけを選択してもらい、「1つだけを回答」できるボタンです。下記のようなものです。

ラジオボタン↓

男性女性

ポイントは、選択肢の中から「1つだけを回答」して欲しいのか、「複数回答可」を可能にするのかです。
今回は「チェックボックス」について詳しく解説していきます。ラジオボタンについてより詳しく知りたい方は、下記の記事を参考にしてみてください。
https://www.tagindex.com/html_tag/form/input_radio.html

チェックボックスは各OS、ブラウザで微妙に表示が違う

チェックボックスの見た目は、OSやブラウザによって微妙に違います。デフォルトのチェックボックスは少し小さいので、CSSでカスタマイズする事も可能です。(CSSでカスタマイズについては、後で解説します。)

チェックボックスの使い方・設置方法

シンプルなチェックボックスを作る方法を解説

よく見られる例として、色を選択するチェックボックスの最も簡単な作り方を紹介します。

これを作る↓

赤青黄

HTMLサンプルコード

<input type="checkbox" name="color" value="red"> 赤
<input type="checkbox" name="color" value="blue"> 青
<input type="checkbox" name="color" value="yellow"> 黄

<input type="checkbox" name="color" value="red"> 赤

<input type="checkbox" name="color" value="blue"> 青

<input type="checkbox" name="color" value="yellow"> 黄

それぞれのタグ、属性について解説

○inputタグ

お問い合わせフォームなど、ユーザーに何かしらを入力→送信してもらいたい時に、使用するタグです。 type属性と合わせて使用し、様々な入力フォームの型を作成する事ができます。

○type属性

フォームの型の種類を指定する際に、使用する属性です。つまり”checkbox”を指定すると、チェックボックスで表示される、その他のtype属性を指定をすると、違う型のフォームで表示されます。
この様に、type属性”checkbox”を指定する事で、チェックボックスを表示できます。

<input type="checkbox" name="color" value="red"> 〇〇

1	<input type="checkbox" name="color" value="red"> 〇〇

〇〇には、表示したい項目名を記載します。赤という項目名を表示したければ、〇〇に赤と記載します。

<input type="checkbox" name="color" value="red"> 赤

1	<input type="checkbox" name="color" value="red"> 赤

○label属性

フォームの中で、フォーム項目名と構成部品（チェックボックスなど）を関連付ける属性です。

サンプルコード表示結果↓

赤ラベルなし青ラベルあり

HTMLサンプルコード

<input type="checkbox" name="color" value="red"> 赤ラベルなし
 
 <label>
       <input type="checkbox" name="color" value="blue"> 青ラベルあり
</label>

<input type="checkbox" name="color" value="red"> 赤ラベルなし

<label>

<input type="checkbox" name="color" value="blue"> 青ラベルあり

</label>

※解説
基本、チェックボックス作成の際は、label属性と合わせて使用するようにして下さい。理由は、クリックできる選択範囲が広くなり、ユーザーが使いやすくなる為です。上記の例として表示は変わりませんが、ラベル属性を使用していない「赤ラベルなし」と表示されたテキスト部をクリックしても、□にチェックマークを入れる事ができません。しかし、ラベル属性を使用した、「青ラベルあり」と表示されたテキスト部をクリックすると、□にチェックを入れる事ができます。ラベル属性を使用することでクリックできる範囲を広げる事ができます。

○name属性

グループの名前を指定する属性です。色を選択するチェックボックスであれあれば、「name=”color”」などと指定する事で、このチェックボックスのグループが、なんのグループなのかを特定でき、情報をプログラム側にも送る事ができます。

<label>
   <input type="checkbox" name="color" value="red"> 赤
</label>
          
<label>
   <input type="checkbox" name="color" value="blue"> 青
</label>
 
<label>
    <input type="checkbox" name="color" value="yellow"> 黄
</label>

<label>

<input type="checkbox" name="color" value="red"> 赤

</label>

<label>

<input type="checkbox" name="color" value="blue"> 青

</label>

<label>

<input type="checkbox" name="color" value="yellow"> 黄

</label>

○value属性

プログラム側に値を渡す事ができる属性です。 value=”red” と指定する事により、red(赤)という値が、プログラム側に渡されます。今回の例では赤が選択されたら、プログラム側に「value=”red”項目」が送信されます。

<label>
   <input type="checkbox" name="color" value="red"> 赤
</label>
          
<label>
   <input type="checkbox" name="color" value="blue"> 青
</label>
 
<label>
    <input type="checkbox" name="color" value="yellow"> 黄
</label>

<label>

<input type="checkbox" name="color" value="red"> 赤

</label>

<label>

<input type="checkbox" name="color" value="blue"> 青

</label>

<label>

<input type="checkbox" name="color" value="yellow"> 黄

</label>

この様に、各属性を埋めることで、簡単に表示する事ができます。

様々なタイプのチェックボックスとそれぞれの属性について解説

ここからは少し応用編、チェックボックスに追加できる他の機能を解説していきます。

最初からどれかにチェックがついている形のチェックボックスを作る[checked属性]

最初からチェックマークが選択された状態を作る事ができます。

チェックマークが選択された状態

これを作る↓

赤青黄

HTMLサンプルコード

<label>
   <input type="checkbox" name="color" value="red" checked> 赤
</label>
          
<label>
    <input type="checkbox" name="color" value="blue"> 青
</label>
<label>
     <input type="checkbox" name="color" value="yellow"> 黄
</label>

<label>

<input type="checkbox" name="color" value="red" checked> 赤

</label>

<label>

<input type="checkbox" name="color" value="blue"> 青

</label>

<label>

<input type="checkbox" name="color" value="yellow"> 黄

</label>

※解説
最初から選択された状態にしたい項目に、checkedを入れます。同じname内(同じグループ内)の1つに、この属性を指定する事で表示できます。

最初からどれかの項目に、フォーカスを当てる事ができる[autofocus属性]

該当部を最初から、自動的にフォーカスさせる事ができます。下記の様な状態です。

これを作る↓

赤青黄

HTMLサンプルコード

<label>
 <input type="checkbox" name="color" value="red" autofocus> 赤
</label>
<label>
  <input type="checkbox" name="color" value="blue"> 青
</label>
 
<label>
  <input type="checkbox" name="color" value="yellow"> 黄
</label>

<label>

<input type="checkbox" name="color" value="red" autofocus> 赤

</label>

<label>

<input type="checkbox" name="color" value="blue"> 青

</label>

<label>

<input type="checkbox" name="color" value="yellow"> 黄

</label>

※解説
最初からフォーカスされた状態にしておきたい項目に、autofocusを入れます。同じname内(同じグループ内)の1つに、この属性を指定する事で表示できます。

最初から項目を選択できない状態にする[disabled属性]

属性が指定された項目は選択不可になります。赤が選択できない状態になっています。下記の様な状態です。

これを作る↓

赤青黄

HTMLサンプルコード

<label>
  <input type="checkbox" name="color" value="red" disabled> 赤
</label>
          
<label>
   <input type="checkbox" name="color" value="blue"> 青
</label>
 
<label>
   <input type="checkbox" name="color" value="yellow"> 黄
</label>

<label>

<input type="checkbox" name="color" value="red" disabled> 赤

</label>

<label>

<input type="checkbox" name="color" value="blue"> 青

</label>

<label>

<input type="checkbox" name="color" value="yellow"> 黄

</label>

※解説
選択不可にしたい項目に、disabledを入れます。同じname内の1つにこの属性を指定する事で、選択不可にできます。

入力を必須項目にできる[required属性]

入力を必須にする事ができます。同じname内の1つにこの属性を指定すると、そのグループが入力必須になります。

HTMLサンプルコード

<label>
  <input type="checkbox" name="color" value="red" required> 赤
</label>
          
<label>
    <input type="checkbox" name="color" value="blue"> 青
</label>
 
<label>
    <input type="checkbox" name="color" value="yellow"> 黄
</label>

<label>

<input type="checkbox" name="color" value="red" required> 赤

</label>

<label>

<input type="checkbox" name="color" value="blue"> 青

</label>

<label>

<input type="checkbox" name="color" value="yellow"> 黄

</label>

※解説
requiredを指定する事で、 name=”color”が指定されているグループ、つまり、赤、青、黄のどれかにチェックをしなければ、送信する事ができません。

input idとの関連づけをできる[for属性]

これまでは、[label]タグの中に[input]タグを入れてましたが、外にあってもfor属性、idタグで関連つけをすることができます。

これを作る↓

赤

<label for="color-select">赤</label>
<div>
  <input type="checkbox" name="color" value="red" id="color-select">
</div>

<div>

</div>

「for=”color-select”」と「 id=”color-select”」の関連付がされ、ラベルが外にあってもチェックマークが入る様になります。

チェックボックスをCSSで装飾する方法

CSSでボタンを縦並びにするには？

これを作る↓

赤青黄

HTMLサンプルコード

<label>
   <input type="checkbox" name="color" value="red"> 赤
</label>
              
<label>
   <input type="checkbox" name="color" value="blue"> 青
</label>
  
<label>
  <input type="checkbox" name="color" value="yellow"> 黄
</label>

<label>

<input type="checkbox" name="color" value="red"> 赤

</label>

<label>

<input type="checkbox" name="color" value="blue"> 青

</label>

<label>

<input type="checkbox" name="color" value="yellow"> 黄

</label>

CSSサンプルコード

label {
   display: block;
   margin: 5px 0;
 }

label {

display: block;

margin: 5px 0;

}

※解説
label属性にdisplay: blockを指定する事により、label属性をブロック要素にし、縦並びにする事ができます。またお好みに合わせて、marginを指定し幅を調整することもできます。

CSSでチェックボックスのデザインを変えよう

○チェックボックスのカスタマイズ

通常のチェックボックスでは「少し小さい」「チェックの箇所を大きくしたい」「□の枠の色を変えたい」「チェックされた時の色を変えたい」などの場合にカスタマイズはおススメです。

○カスタマイズのポイント

デフォルトのinput要素を非表示にする。デフォルトのチェックボックスの見た目は変更することはできません。したがって「デフォルトのチェックボックスを非表示にする」→「オリジナルのチェックボックスを作成する」といった流れになります。
それではチェックボックスのカスタマイズについて、解説していきます。

サンプルコード表示結果

これを作る↓

赤青黄

HTMLサンプルコード

<label class="custum-checkbox">
   <input type="checkbox">
   <span class="custum-mark"></span>
   赤
 </label>
  <label class="custum-checkbox">
   <input type="checkbox">
   <span class="custum-mark"></span>
   青
 </label>
 
 <label class="custum-checkbox">
   <input type="checkbox">
   <span class="custum-mark"></span>
   黄
 </label>

赤

</label>

青

</label>

黄

</label>

CSSサンプルコード

.custum-checkbox {
 position: relative;
 padding-left: 30px;
 cursor: pointer;
 user-select: none;
}
 
 
.custum-checkbox input {
 display: none;
}
 
 
.custum-mark {
 position: absolute;
 top: 0;
 left: 0;
 height: 23px;
 width: 23px;
 border: solid 2px gray;
 border-radius: 5px;
 box-sizing: border-box;
}
 
.custum-mark:after {
 content: "";
 position: absolute;
 left: 5px;
 top: 1px;
 width: 6px;
 height: 11px;
 border: solid #ffffff;
 border-width: 0 3px 3px 0;
 transform: rotate(45deg);
 opacity: 0;
}
 
 
.custum-checkbox input:checked + .custum-mark {
 background: red;
 border-color: red;
}
 
 
.custum-checkbox input:checked + .custum-mark:after {
 opacity: 1;
}

.custum-checkbox {

position: relative;

padding-left: 30px;

cursor: pointer;

user-select: none;

}

.custum-checkbox input {

display: none;

}

.custum-mark {

position: absolute;

top: 0;

left: 0;

height: 23px;

width: 23px;

border: solid 2px gray;

border-radius: 5px;

box-sizing: border-box;

}

.custum-mark:after {

content: "";

position: absolute;

left: 5px;

top: 1px;

width: 6px;

height: 11px;

border: solid #ffffff;

border-width: 0 3px 3px 0;

transform: rotate(45deg);

opacity: 0;

}

.custum-checkbox input:checked + .custum-mark {

background: red;

border-color: red;

}

.custum-checkbox input:checked + .custum-mark:after {

opacity: 1;

}

※解説

HTMLのサンプルコード

それぞれの項目にクラスをあてていきます。
[label]属性→custum-checkbox
[input]属性→checkbox
[span]属性→custum-mark

CSSサンプルコード

.custum-checkboxクラス
position: relative;でチェックボックスの親ポジションを決める
padding-lef;tでチェックボックス同士の横幅を指定する
cursor:pointerでマウスカーソルを重ねた時のカーソル表示を「指マーク」にしてわかりやすくする
user-select: noneでクリック時にテキストが選択されてしまうことを防ぐ

.custum-checkbox inputクラス
display:none;でデフォルトのチェックボックスを非表示にする

.custum-markクラス
position: absolute; top left でチェックボックスの位置を指定する
hegiht width; でチェックボックスの枠の大きさを指定する
border: solid 2px gray;で枠線の太さ、色を指定する
border-radius:で枠線の角丸を指定する
box-sizing: border-box;でパディングとボーダーを幅と高さに含める

.custum-mark:afterクラス
after擬似要素でチェックマークを作成
position: absolute;　left topでチェックマークの位置を指定
width,heightでチェックマークの長さを指定
border: solid #fffff;でチェックマークの色を指定
border-widthでボーダーの太さ（チェックマーク）を指定
transform: rotate(45deg);チェックマークの形になるように変形させる
opacity: 0;でチェックされるまでは、非表示にする

.custum-checkbox input:checked + .custum-mark クラス
checkedセレクターを使用します。
input:checkedの記述により、チェックボックスにチェックが入ったときだけ、このクラスのCSSが適用され、さらに「+ custum-mark」の記述により、 custum-markクラスもチェックボックスにチェックが入った時にこのCSSが適用されます。
つまりこのクラスでは、チェックボックスにチェックが入ったときに、「.custum-checkbox　input」「.custum-mark 」クラスにbackground: red; border-color: red;が適用されいるということになります。

.custum-checkbox input:checked + .custum-mark:afterクラス
こちらも、チェックボックスにチェックが入った時に、「.custum-mark:after」クラスにopacit: 1;が適用され、チェックマークが表示されます。

まとめ

最後に、チェックボックスのポイントを簡単にまとめた2点を紹介していきます。

1.チェックボックスは、複数選択肢の中から「複数選択可」の場合に有効（ラジオボタンは複数選択肢の中から1つしか選択できない）

2.type属性、type=”checekbox”を指定し、あとは必要に応じて属性を足してく事で、簡単にカスタマイズできる。

とてもシンプルですが、多くのお問い合わせフォームでも採用されています。よろしければご活用ください。

その他、同じような話題で以下も取り上げていますので、よろしければご覧ください。