チェックボックスの作り方
チェックボックスの作り方とその装飾について、備忘録として書き留めておこうと思います。
チェックボックスの基本
赤
黄
青
最初はどれもチェックが入っていない状態のチェックボックス。
ボックスが小さいのでちょっと押しにくいです。
<input name="color" type="checkbox" value="red">赤
<input name="color" type="checkbox" value="yellow">黄
<input name="color" type="checkbox" value="blue">青type属性の値は"checkbox"、name属性の値は任意の名前でOKですが同じグループのものは同じ名前にします。
また、<input>の外に出ているの文字列はユーザーに見せる値で、value値はデータの送信に使われる値です。
最初からチェックをいれる
赤
黄
青
最初からチェックが入ったチェックボックスです。
<input name="color" type="checkbox" value="red" checked>赤
<input name="color" type="checkbox" value="yellow" checked>黄
<input name="color" type="checkbox" value="blue" checked>青選択肢の<input>内にcheckedと書かれたものだけ、最初からチェックが入った状態になります。
全部に入れる必要はなく、好きなものだけcheckedを入れられます。
クリックしやすいチェックボックス
四角のボックスだけでなく、ラベル（「赤」とか「青」という文字）をクリックしても反応するチェックボックスです。
クリック範囲が広いので押しやすくなります。
<label><input name="color" type="checkbox" value="red">赤</label>
<label><input name="color" type="checkbox" value="yellow">黄</label>
<label><input name="color" type="checkbox" value="blue">青</label><input name="color" type="checkbox" value="red" id="red-label">
<label for="red-label">赤</label>
<input name="color" type="checkbox" value="yellow" id="yellow-label">
<label for="yellow-label">黄</label>
<input name="color" type="checkbox" value="blue" id="blue-label">
<label for="blue-label">青</label>1つ目の方法は、<input>部分を<label></label>で囲むだけ。
2つ目の方法は、<input>のid属性と<label>のfor属性の値を同じにして紐付けています。
アレンジチェックボックス
CSSで見た目をアレンジしたチェックボックスです。
<input name="color" type="checkbox" value="red" id="red-label" class="checkbox">
<label for="red-label">赤</label>
<input name="color" type="checkbox" value="yellow" id="yellow-label" class="checkbox">
<label for="yellow-label">黄</label>
<input name="color" type="checkbox" value="blue" id="blue-label" class="checkbox">
<label for="blue-label">青</label>/* 初期状態のラベル */
.checkbox + label {
cursor: pointer;
padding: 0 20px;
margin: 0 10px;
border: 2px solid #c8c8c8;
border-radius: 5px;
color: #c8c8c8;
}
/* チェックボックスの小さな四角を消す */
.checkbox {
display: none;
}
/* red-labelがチェックされた時のラベル装飾 */
#red-label:checked + label {
border: 2px solid #ff0000;
background-color: #ff0000;
color: #fff;
}
/* yellow-labelがチェックされた時のラベル装飾 */
#yellow-label:checked + label {
border: 2px solid #ffff00;
background-color: #ffff00;
color: #333;
}
/* blue-labelがチェックされた時のラベル装飾 */
#blue-label:checked + label {
border: 2px solid #0000ff;
background-color: #0000ff;
color: #fff;
}〇〇 + △△で、〇〇に隣接する△△を指します。
また、カーソルをポインターにしてクリックできることをわかりやすくしています。
まとめ
いかがでしたか？
ちょっとCSSを当てるかどうかで、使いやすさ・わかりやすさがずいぶん変わってきます。
ぜひ工夫して装飾してみてください。
最後までご覧いただきありがとうございました。
