Bootstrap4 カスタムフォーム

この記事では、Bootstrap4 でフォームのスタイルをカスタマイズする方法について説明します。カスタムクラスの使用、チェックボックスとラジオボタンのカスタムスタイル、グリッドシステムを使用したフォームコントロールのレイアウト、サイズクラスを使用したコントロールのサイズ調整などについて解説します。

目次

1. カスタムクラスの使用
2. チェックボックスとラジオボタンのカスタムスタイル
3. グリッドシステムを使用したフォームコントロールのレイアウト
4. サイズクラス
5. 読み取り専用状態
6. 無効状態

1. カスタムクラスの使用

Bootstrap4 は、フォームコントロールのスタイルをカスタマイズするための様々なクラスを提供しています。

1.1. .form-control クラス

<input>、<textarea>、<select> 要素に .form-control クラスを追加することで、カスタムフォームコントロールとしてスタイルを設定できます。

<input type="text" class="form-control" placeholder="名前を入力してください">

1.2. .form-control-lg と .form-control-sm クラス

.form-control-lg と .form-control-sm クラスを使用すると、コントロールのサイズを調整できます。

<input type="text" class="form-control form-control-lg" placeholder="大きい入力欄">
<input type="text" class="form-control form-control-sm" placeholder="小さい入力欄">

2. チェックボックスとラジオボタンのカスタムスタイル

Bootstrap4 は、チェックボックスとラジオボタンのカスタムスタイルを提供しています。

2.1. .custom-control クラス

<div class="custom-control custom-checkbox"> または <div class="custom-control custom-radio"> でチェックボックスまたはラジオボタンを囲むことで、カスタムスタイルを実装できます。

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">チェックボックス</label>
</div>

2.2. .custom-control-input と .custom-control-label クラス

.custom-control-input クラスはチェックボックスとラジオボタンのスタイルをカスタマイズし、.custom-control-label クラスはラベルのスタイルをカスタマイズします。

2.3. .custom-control-inline クラス

.custom-control-inline クラスを使用すると、コントロールを一行に配置できます。

<div class="custom-control custom-checkbox custom-control-inline">
  <input type="checkbox" class="custom-control-input" id="customCheck2">
  <label class="custom-control-label" for="customCheck2">インラインチェックボックス</label>
</div>

3. グリッドシステムを使用したフォームコントロールのレイアウト

Bootstrap のグリッドシステムを使用して、フォームコントロールをレイアウトできます。たとえば、.row と .col-* クラスを使用します。

<div class="row">
  <div class="col-md-6">
    <input type="text" class="form-control" placeholder="名">
  </div>
  <div class="col-md-6">
    <input type="text" class="form-control" placeholder="姓">
  </div>
</div>

4. サイズクラス

前述のように、.form-control-lg と .form-control-sm クラスを使用してコントロールのサイズを調整できます。

5. 読み取り専用状態

readonly 属性を追加することで、<input> または <textarea> 要素を読み取り専用状態にすることができます。

<input type="text" class="form-control" value="読み取り専用" readonly>

6. 無効状態

disabled 属性を追加することで、<input>、<textarea>、<button>、または <select> 要素を無効にできます。

<button type="submit" class="btn btn-primary" disabled>送信</button>

参考資料

• https://getbootstrap.jp/docs/4.1/components/forms/

よくある質問

1. Q: Bootstrap4 のフォームで独自のスタイルを適用するにはどうすればよいですか？
   A: .form-control クラスで提供される基本スタイルに加えて、独自の CSS クラスを作成し、フォーム要素に適用できます。
2. Q: チェックボックスとラジオボタンのスタイルを変更するにはどうすればよいですか？
   A: Bootstrap4 は、.custom-control、.custom-checkbox、.custom-radio などのクラスを提供しており、これらを使用して独自のスタイルを実現できます。
3. Q: フォームをレスポンシブにするにはどうすればよいですか？
   A: Bootstrap のグリッドシステム (.row、.col-*) を使用して、さまざまな画面サイズに合わせてフォームのレイアウトを調整できます。