.net column

.NET開発者のためのブログメディア
チェック

Bootstrapでチェックボックスやラジオボタンを実装する

2020年02月10日

入力フォームなどを作成する際、「チェックボックスやラジオボタンが簡単に実装できればな~」と思ったことはありませんか?そんなときに使えるのがBootstrapです。もちろんHTMLで実装することもできるのですが、Bootstrapを使うとよりお洒落なチェックボックスやラジオボタンを実装することができるのです。さっそくご紹介します。

SE
BootstrapはHTML/CSS/JavaScriptで構成されるWebフレームワークでしたね。
PL
クオリティの高いデザインのサイトが簡単に作れるので、色んなWebサイトで使われていますよ。
【前提】
Bootstrapを利用する際は、BootstrapのCSSやJSをダウンロードし、HTMLのヘッダー内に読み込む必要があります。よく分からない……という方は、下記の記事を参考にしてみてください。

【Bootstrapの導入】Bootstrapをダウンロードしてから使うまで

Bootstrapでチェックボックスを実装しよう

まずは、Bootstrapでチェックボックスを実装していきたいと思います。
チェックボックスを作成する際は、「.form-check」「.form-check-input」「.form-check-label」を使います。使い方は下記のとおりです。

チェックボックスの実装例1

※下記コードをbody内に記載してください。

では、実際にブラウザで見ていきましょう。

【ブラウザで見た画面】
チェックボックス表示1

ちゃんと複数選択できるチェックボックスに仕上がっています。とはいえ、「何か味気ないチェックボックスだな…」と思った方もいるのではないでしょうか。そんな方は、「.custom-controll」「.custom-checkbox」を使うことをおすすめします。

チェックボックスの実装例2

こちらのコードも実装してみましょう。

label要素のclassが「custom」になっていることが分かると思います。
それでは、こちらもブラウザでチェックしていきましょう。

【ブラウザで見た画面】
チェックボックス表示2

選択したときに周りが青くなり、選択済になると完全に青くなっています。いろいろなサイトでよく見る感じに仕上がりました。
チェックボックスの実装は以上です。

Bootstrapでラジオボタンを実装しよう

では次に、Bootstrapでラジオボタンを実装していきたいと思います。
ラジオボタンもチェックボックスと同様、「.form-check」「.form-check-input」「.form-check-label」を使っていきます。コードは以下のとおりです。

ラジオボタンの実装例1

「type」がradioに変わっていることが分かるかと思います。
ブラウザで見ていきましょう。

【ブラウザで見た画面】
ラジオボタン表示1

しっかりとラジオボタンが出来上がりました。
上記のとおり、「checked」を入れるとデフォルトで選択させることもできます。

ラジオボタンの実装例2

また、先ほどと同様に「custom」を使うとちょっとお洒落なラジオボタンに仕上がります。

【ブラウザで見た画面】
ラジオボタン表示2

以上で、ラジオボタンの実装は完了です。
もっと知りたい方は、Bootstrapの公式サイトも参考にしてみてください。

SE
簡単にお洒落な選択肢が作成できましたね。
PL
Bootstrapはユーザーにとっても使いやすくデザインされています。

Bootstrapでサクッとお洒落なフォームを作ろう

今回は、Bootstrapでチェックボックスとラジオボタンの実装をしていきました。申し込みフォームや商品のアンケートなど、フォームのデザインは思っている以上にユーザーにとって重要なポイントです。ユーザー受けするお洒落なフォームを作成したい方は、ぜひBootstrapを活用してみましょう。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)