Bootstrap - チェックボックスとラジオボタン：入門ガイド

こんにちは、未来のウェブ開発者たち！今日は、Bootstrapのフォームコントロールの楽しい世界に飛び込みます。特に、チェックボックスとラジオボタンについてです。これらの小さなインタラクティブな要素はシンプルに見えるかもしれませんが、ユーザーからの入力を収集するためには非常に強力です。では、袖をまくって始めましょう！

Bootstrap フォームコントロールの紹介

本題に入る前に、なぜBootstrapを学ぶのかに少し立ち止まってみましょう。家を建てることを考えてみてください。全てのレンガを一から作るか、既製の部品を使うかです。Bootstrapは、あなたのウェブサイトのための既製部品の宝箱のようなものです。時間を節約し、一貫性を確保します。まずは最初のコンポーネントを見てみましょう！

チェックボックス：マルチ選択の魔法

基本的なチェックボックス

チェックボックスは、ユーザーが複数のオプションを選択できる小さな四角いボックスです。一つのリストから複数のアイテムを選択させたいときに最適です。まずは最初のチェックボックスを作成してみましょう：

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
デフォルトのチェックボックス
</label>
</div>

この例では、Bootstrapのクラスを使ってチェックボックスをスタイル付けしています。form-checkクラスはラッパーを作成し、form-check-inputクラスはチェックボックス自体をスタイル付けます。ラベルのfor属性は、インプットのidと一致し、それらを結びつけます。

チェック状態

時々、チェックボックスを事前にチェック状態にしたいことがあります。それにはchecked属性を追加するだけです：

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
チェックされたチェックボックス
</label>
</div>

不確定状態

ここに面白い事实があります：チェックボックスには「不確定」という第三の状態があります。これは、あなたのティーンエージャーが部屋を片付ける時のようなものです - 完全にきれいではありませんが、完全に散らばっているわけでもありません。HTMLではこの状態を設定できませんが、JavaScriptで設定できます：

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckIndeterminate">
<label class="form-check-label" for="flexCheckIndeterminate">
不確定なチェックボックス
</label>
</div>

<script>
document.getElementById('flexCheckIndeterminate').indeterminate = true;
</script>

非活性チェックボックス

時々、チェックボックスを表示するがユーザーが操作できないようにしたいことがあります。その場合はdisabled属性が役立ちます：

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckDisabled" disabled>
<label class="form-check-label" for="flexCheckDisabled">
非活性のチェックボックス
</label>
</div>

ラジオボタン：シングル選択のチャンピオン

基本的なラジオボタン

ラジオボタンはチェックボックスのいとこのようなものです。外見は似ていますが、振る舞いが異なります。チェックボックスは複数選択を許可しますが、ラジオボタンはグループ内で1つの選択만を強制します。まずはセットのラジオボタンを作成してみましょう：

<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
デフォルトのラジオボタン
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label" for="flexRadioDefault2">
デフォルトでチェックされたラジオボタン
</label>
</div>

ラジオボタンの両方が同じname属性を持っていることに注意してください。これにより、同時に1つ만選択できるようになります。

非活性ラジオボタン

チェックボックスと同様に、ラジオボタンも非活性にできます：

<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
<label class="form-check-label" for="flexRadioDisabled">
非活性のラジオボタン
</label>
</div>

ス위ッチ：モダンなトグル

ス위ッチはチェックボックスのスタイリッシュな代替品です。オン/オフの設定に最適です。まずは一つ作成してみましょう：

<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">デフォルトのス위ッチチェックボックスインプット</label>
</div>

form-switchクラスでチェックボックスを洗練されたトグルス위ッチに変えます。

レイアウトオプション

デフォルト（積み重ね）

デフォルトでは、チェックボックスとラジオボタンは垂直に積み重ねられます：

<div class="form-check">
<input class="form-check-input" type="checkbox" id="stackedCheck1">
<label class="form-check-label" for="stackedCheck1">積み重ねられたチェックボックス1</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="stackedCheck2">
<label class="form-check-label" for="stackedCheck2">積み重ねられたチェックボックス2</label>
</div>

並列

オプションを並べて表示したい場合は、form-check-inlineクラスを使用します：

<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>

逆順

ラベルをチェックボックスの前に配置したい場合は、form-check-reverseクラスを使用します：

<div class="form-check form-check-reverse">
<input class="form-check-input" type="checkbox" id="reverseCheck1">
<label class="form-check-label" for="reverseCheck1">逆順のチェックボックス</label>
</div>

ラベルなし

時々、チェックボックスやラジオボタンにラベルを付けないことがあります：

<div>
<input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
</div>

アクセシビリティのためにaria-labelを使用してください！

トグルボタン

トグルボタンは、チェックボックスやラジオボタンをファンシーな方法で使用するものです。見た目は普通のボタンですが、チェックボックスやラジオボタンの動作をします：

<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">シングルトグル</label>

枠線スタイル

より控えめな見た目を望む場合は、枠線スタイルを使用します：

<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-outlined">シングルトグル</label>

結論

おめでとうございます！Bootstrapのチェックボックスとラジオボタンに関する大旅行を終了しました。これらの小さなコンポーネントはシンプルに見えるかもしれませんが、インタラクティブなフォームの構築において非常に重要です。実践が完璧を生むことを忘れないでください。これらの要素をさまざまな方法で組み合わせて、ユーザーにとって魅力的なフォームを作成してみてください。

以下に、私たちがカバーした方法の簡単な参照表を示します：

方法	説明
基本的なチェックボックス	<input class="form-check-input" type="checkbox">
チェックされたチェックボックス	checked属性を追加
不確定なチェックボックス	JavaScriptで設定
非活性チェックボックス	disabled属性を追加
基本的なラジオボタン	<input class="form-check-input" type="radio">
非活性ラジオボタン	disabled属性を追加
ス위ッチ	form-switchクラスを使用
並列レイアウト	form-check-inlineクラスを使用
逆順レイアウト	form-check-reverseクラスを使用
ラベルなし	ラベルを省略し、aria-labelを使用
トグルボタン	btn-checkクラスを使用
枠線スタイル	btn-outline-*クラスを使用

実験を続け、学び続け、最も重要なのは、素晴らしいウェブフォームを構築する楽しさを享受してください！

Credits: Image by storyset