Bootstrap4 形状

Bootstrap 4 フォームスタイルガイド

このドキュメントでは、Bootstrap 4 フレームワークを使用して美しく機能的なフォームを作成する方法について説明します。フォームコントロールクラス、フォームレイアウト、様々なコンポーネントについて解説し、サンプルコードを交えて具体的な使用方法を示します。

フォームコントロールクラス

概要

Bootstrap 4 では、 .form-control クラスを使用して、ほとんどのフォームコントロールに基本的なスタイルを適用できます。このクラスは、入力フィールドの外観を統一し、クロスブラウザ対応性を確保します。

主な内容

  • .form-control クラス:

    • テキストボックス、パスワード入力、メールアドレス、URL、電話番号、数値、日付と時刻、カラーピッカー、ファイルアップロードなど、様々な <input> タイプに適用できます。

    • <textarea> 要素や <select> 要素にも適用できます。

  • ラベル:

    • <label> 要素には、 .col-form-label クラスを使用してフォームコントロールの高さに合わせます。

  • サイズ調整:

    • .form-control-sm クラスで小さな入力フィールドを、 .form-control-lg クラスで大きな入力フィールドを作成できます。

  • 状態:

    • readonly 属性で読み取り専用の入力フィールドを作成できます。

    • disabled 属性で無効な入力フィールドを作成できます。

例:

<label for="exampleInputEmail1" class="col-form-label">メールアドレス</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="メールアドレスを入力してください">

読み取り専用

概要

ユーザーが値を変更できない読み取り専用の入力フィールドを作成できます。

主な内容

  • <input> 要素に readonly 属性を追加します。

例:

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

読み取り専用プレーンテキスト

概要

入力フィールドの代わりに、読み取り専用のプレーンテキストとして値を表示できます。

主な内容

  • .form-control-plaintext クラスを <input> 要素に適用します。

例:

<input class="form-control-plaintext" type="text" value="読み取り専用プレーンテキスト">

ファイルブラウザ

概要

ファイルアップロードボタンをカスタマイズできます。

主な内容

  • .custom-file クラスを親要素に適用します。

  • .custom-file-input クラスを <input type="file"> 要素に適用します。

  • .custom-file-label クラスを <label> 要素に適用します。

例:

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">ファイルを選択</label>
</div>

チェックボックスとラジオボタン

概要

チェックボックスとラジオボタンをカスタマイズできます。

主な内容

  • .custom-control、 .custom-checkbox、 .custom-radio クラスを親要素に適用します。

  • .custom-control-input クラスを <input type="checkbox"> または <input type="radio"> 要素に適用します。

  • .custom-control-label クラスを <label> 要素に適用します。

例:

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

<div class="custom-control custom-radio">
  <input type="radio" class="custom-control-input" id="customRadio1" name="customRadio" checked>
  <label class="custom-control-label" for="customRadio1">選択</label>
</div>

スイッチ

概要

スイッチスタイルのチェックボックスを作成できます。

主な内容

  • .custom-switch クラスを親要素に適用します。

  • .custom-control-input クラスを <input type="checkbox"> 要素に適用します。

  • .custom-control-label クラスを <label> 要素に適用します。

例:

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">トグル</label>
</div>

選択ボックス

概要

<select> 要素を使用して、単一選択または複数選択のドロップダウンリストを作成できます。

主な内容

  • size 属性または .form-control-sm / .form-control-lg クラスでサイズを調整できます。

例:

<select class="form-control">
  <option>オプション1</option>
  <option>オプション2</option>
  <option>オプション3</option>
</select>

<select class="form-control" multiple>
  <option>オプション1</option>
  <option>オプション2</option>
  <option>オプション3</option>
</select>

レイアウト

概要

Bootstrap 4 のグリッドシステムとユーティリティクラスを使用して、様々なレイアウトのフォームを作成できます。

主な内容

  • グリッドシステム:

    • .row クラスと .col-* クラスを使用して、フォームコントロールを水平方向に配置できます。

  • フォームユーティリティ:

    • .form-group クラスでフォームコントロールをグループ化できます。

    • .form-inline クラスでインラインフォームを作成できます。

    • .form-row クラスで複数列のフォームを作成できます。

例:

<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault01">姓</label>
      <input type="text" class="form-control" id="validationDefault01" placeholder="姓" required>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationDefault02">名</label>
      <input type="text" class="form-control" id="validationDefault02" placeholder="名" required>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">登録</button>
</form>

Bootstrap 4 フォームに関する Q&A

Q1: Bootstrap 4 でフォームの入力フィールドを読み取り専用にするにはどうすればよいですか？

A1: <input> タグに readonly 属性を追加します。例: <input type="text" class="form-control" readonly>

Q2: Bootstrap 4 でチェックボックスをスイッチのように表示するにはどうすればよいですか？

A2: .custom-switch クラスを使用します。例:

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">スイッチ</label>
</div>

Q3: Bootstrap 4 でフォームのレイアウトを調整するにはどうすればよいですか？

A3: Bootstrap 4 のグリッドシステム (.row、.col-*) とフォーム関連のユーティリティクラス (.form-group、.form-inline、.form-row) を組み合わせて使用します。