### [モバイルデバイスでの複数選択フィールド列のカスタマイズ](https://wpforms.com/developers/customizing-multiple-choice-field-columns-on-mobile-devices/)
**公開日:** 2024年8月25日
**著者:** David Ozokoye
**コンテンツ:**
## はじめに
複数選択フィールドのモバイル表示で表示される列数をカスタマイズしたいですか？デフォルトでは、WPFormsの複数選択フィールドは単一列で表示されます。しかし、カスタムCSSスニペットを使用することでカスタマイズできます。
このチュートリアルでは、WPFormsの複数選択（チェックボックスと複数選択）フィールドでモバイル表示に2列表示を使用する方法を説明します。
## フォームの作成
このチュートリアルを進めるには、[新しいフォームを作成](https://wpforms.com/docs/creating-first-form/ "新しいフォームの作成")するか、既存のフォームを編集してフォームビルダーにアクセスする必要があります。フォームビルダーで、[チェックボックス](https://wpforms.com/developers/how-to-customize-the-checkbox-field-styles/ "チェックボックスフィールドスタイルのカスタマイズ方法")または[複数選択](https://wpforms.com/developers/how-to-customize-the-multiple-choice-field-styles/ "複数選択フィールドスタイルのカスタマイズ方法")フィールドをフォームに追加してください。
その後、複数選択フィールドをクリックして、フィールドオプションパネルにアクセスします。次に、**高度な設定**タブに移動します。
ここで、**選択肢のレイアウト**オプションを選択し、**2列**オプションを選択します。
フォームを表示すると、チェックボックスまたは複数選択フィールドが2列で表示されます。ただし、モバイルデバイスでは、各選択肢が単一列で表示されます。
このチュートリアルでは、カスタムCSSを使用して、複数選択およびチェックボックスフィールドがモバイル表示で列レイアウトを維持するように強制する方法を説明します。
## スニペットの追加
まず、スニペットをサイトに追加します。スニペットの追加方法と場所についてサポートが必要な場合は、[この役立つドキュメントを確認してください](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/)。
```
/**
* モバイル表示での複数選択フィールド列のカスタマイズ
*
* @link https://wpforms.com/developers/customizing-multiple-choice-field-columns-on-mobile-devices/
*/
/* チェックボックスとラジオボタン */
@media screen and (max-width: 600px) {
/* チェックボックスとラジオフィールドの両方を対象とする */
#wpforms-form-2525 .wpforms-field-checkbox ul,
#wpforms-form-2525 .wpforms-field-radio ul {
display: flex;
flex-wrap: wrap;
margin: 0; /* デフォルトのマージンをリセット */
padding: 0; /* デフォルトのパディングをリセット */
}
/* 2列レイアウトのリストアイテムを対象とする */
#wpforms-form-2525 .wpforms-list-2-columns ul li {
width: calc(50% - var(--wpforms-field-size-input-spacing));
margin-right: var(--wpforms-field-size-input-spacing);
box-sizing: border-box; /* パディングが幅に影響しないようにする */
}
/* オーバーフローを防ぐために、2番目の各アイテムのマージンを削除 */
#wpforms-form-2525 .wpforms-list-2-columns ul li:nth-child(2n) {
margin-right: 0;
}
}
```
`#wpforms-form-2525` を、これらの変更を適用したい特定のフォームのIDに置き換えてください。フォームIDとフィールドIDの取得方法がわからない場合は、[フォームIDとフィールドIDの取得方法](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "フォームIDとフィールドIDの取得方法")に関するチュートリアルを参照してください。
このスニペットにより、2列レイアウトを使用するチェックボックスおよび複数選択フィールドが、モバイル表示でレイアウトを維持するようになります。
これで、モバイル表示で複数選択（チェックボックスおよび複数選択）フィールドの列レイアウトをカスタマイズする方法を学びました。
WPFormsフィールドをカスタマイズする他の方法についてさらに知りたいですか？[WPFormsのチェックボックスフィールドにすべて選択オプションを追加する方法](https://wpforms.com/developers/how-to-add-a-select-all-option-to-a-checkbox-form-field/ "WPFormsのチェックボックスフィールドにすべて選択オプションを追加する方法")に関するチュートリアルをご覧ください。
**カテゴリー:** チュートリアル
**タグ:** CSS、フィールド
---