記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

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

チェックボックスを初心者の方向けに紹介。 チェックボックスとは?作成方法の基礎知識にプラスし、チェックボックスに加える事のできるタグ、カスタマイズ方法の応用編も紹介。 全てサンプルコードが付いているので、実際に手を動かして学ぶことができます。

カテゴリ: HTML/CSS

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

チェックボックスとは

下記の様なものです。

チェックボックス↓

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

ラジオボタン↓
男性女性

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

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

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

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

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

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

これを作る↓

HTMLサンプルコード

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

○inputタグ

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

○type属性

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

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

○label属性

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

サンプルコード表示結果↓
赤ラベルなし

HTMLサンプルコード

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

○name属性

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

○value属性

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

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

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

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

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

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

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

これを作る↓

HTMLサンプルコード

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

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

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

これを作る↓

HTMLサンプルコード

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

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

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

これを作る↓

HTMLサンプルコード

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

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

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

HTMLサンプルコード

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

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

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

これを作る↓

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

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

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

これを作る↓

HTMLサンプルコード

CSSサンプルコード

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

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

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

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

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

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

サンプルコード表示結果

これを作る↓

HTMLサンプルコード

CSSサンプルコード

※解説

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”を指定し、あとは必要に応じて属性を足してく事で、簡単にカスタマイズできる。

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

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。