<html lang="ja-jp" dir="ltr"><head></head><body>### [複数の選択肢とチェックボックスの選択肢で複数列レイアウトを作成する方法](https://wpforms.com/docs/how-to-create-a-multi-column-layout-for-radio-buttons-and-checkboxes/)

**公開日:** 2023年11月26日
**著者:** Umair Majeed

**抜粋:** 選択肢（ラジオボタン、チェックボックス）を複数列で表示するように設定する方法を学びます。

**本文:**

選択肢（ラジオボタン、複数選択、チェックボックス、チェックボックス項目）を複数列で表示したいですか？複数列レイアウトは、フォームの外観を改善し、ユーザーがナビゲートしやすくすることができます。

このチュートリアルでは、選択肢（ラジオボタン、複数選択、チェックボックス、チェックボックス項目）を2列または3列形式で表示するように設定する方法を説明します。

![複数列チェックボックスフィールド](https://wpforms.com/wp-content/uploads/2023/06/multiple-column-checkbox-field.gif "複数列チェックボックスフィールド")

---

このチュートリアルを開始する前に、WPFormsがWordPressサイトに[インストールされ、有効化されている](https://wpforms.com/docs/install-wpforms-plugin/)ことを確認してください。次に、[新しいフォームを作成](https://wpforms.com/docs/creating-first-form/ "最初のフォームを作成する")するか、既存のフォームを編集します。

### フォームに複数選択フィールドを追加する

まず、フォームに次のいずれかの種類のフィールドを追加します。

- チェックボックス
- チェックボックス項目
- 選択式（ラジオボタン）
- 複数選択

**注意:** フォームにどのフィールドを使用するか迷っていますか？[WPFormsで適切なフィールドを選択するための完全ガイド](https://wpforms.com/docs/how-to-choose-the-right-form-field-for-your-forms/)をご覧ください。

フォームビルダーの左側にあるフィールドをクリックするか、プレビューエリアにドラッグアンドドロップしてフォームに追加できます。

![フォームにチェックボックスフィールドを追加する](https://wpforms.com/wp-content/uploads/2018/08/adding-checkboxes-field.gif)

**注意:** [選択式](https://wpforms.com/docs/how-to-customize-the-multiple-choice-field-in-wpforms/)および複数選択フィールドでは、ユーザーは一度に1つのオプションしか選択できません。一度に複数のオプションを選択できるようにしたい場合は、代わりに[チェックボックス](https://wpforms.com/docs/how-to-customize-the-checkboxes-field-in-wpforms/)またはチェックボックス項目フィールドを使用することをお勧めします。

そうしたら、プレビューエリアのフィールドをクリックして、フィールドオプションにアクセスします。フィールドを好きなようにカスタマイズし、すべての選択肢を追加してください。このプロセスを高速化するには、[**一括追加**オプション](https://wpforms.com/docs/how-to-bulk-add-choices-for-multiple-choice-checkbox-and-dropdown-fields/)を使用できます。

![チェックボックスフィールドにオプションを一括追加する](https://wpforms.com/wp-content/uploads/2021/08/bulk-add-checkboxes-choices.png)

**注意:** フィールドのオプションの設定方法がわからない場合は、[WPFormsでフィールドオプションをカスタマイズする方法](https://wpforms.com/docs/how-to-customize-form-field-options/)に関するチュートリアルを参照してください。

### 選択肢のレイアウトを選択する

選択式、チェックボックス、チェックボックス項目、または複数選択フィールドに満足したら、フィールドオプションパネルの**高度な設定**タブをクリックします。

![チェックボックスフィールドの高度なフィールドオプションにアクセスする](https://wpforms.com/wp-content/uploads/2021/08/checkboxes-advanced-field-options.png)

ここで、**選択肢のレイアウト**ドロップダウンを探します。次のオプションから選択できます。

- **1列:** すべての選択肢を1つの列に表示します。これはデフォルトのオプションです。
- **2列:** 選択肢を2つの列にできるだけ均等に分割します。
- **3列:** 選択肢を3つの列にできるだけ均等に分割します。
- **インライン:** 各行にできるだけ多くの選択肢を自動的に配置します。

![チェックボックスフィールドの選択肢レイアウトを選択する](https://wpforms.com/wp-content/uploads/2018/03/checkboxes-choice-layout-options.png)

これは、フロントエンドで2列のチェックボックスフィールドがどのように表示されるかの例です。

このフォームを完了するには、ブラウザでJavaScriptを有効にしてください。

##### このフォームデモをお試しください！

興味のあるクラブを選択してください。
- アート
- 映画
- フランス語
- 数学
- 音楽
- スペイン語
- 読書
- ディベート

送信![読み込み中](https://wpforms.com/wp-content/plugins/wpforms/assets/images/submit-spin.svg)

そして、これは同じチェックボックスフィールドの選択肢が3列レイアウトで表示された例です。

このフォームを完了するには、ブラウザでJavaScriptを有効にしてください。

##### このフォームデモをお試しください！

興味のあるクラブを選択してください。
- アート
- 映画
- フランス語
- 数学
- 音楽
- スペイン語
- 読書
- ディベート

送信![読み込み中](https://wpforms.com/wp-content/plugins/wpforms/assets/images/submit-spin.svg)

フォームがすべてのデバイスで見栄え良く表示されるように、選択式、複数選択、チェックボックス、チェックボックス項目のフィールドの複数列レイアウトは、モバイルデバイスで表示される際に自動的に単一列に戻ります。

これで、フォームの選択式、チェックボックス、複数選択、チェックボックス項目のフィールドで複数列レイアウトを作成できるようになりました。

次に、フィールドの選択肢に画像を追加したいですか？[WPFormsで画像選択肢を追加する方法](https://wpforms.com/docs/how-to-add-image-choices-to-fields/ "WPFormsで画像選択肢を追加する方法")に関するチュートリアルを確認してください。

**カテゴリ:** スタイリング、フィールドのカスタマイズ

---</body></html>