### [モバイル端末でフィールドを1列に表示する](https://wpforms.com/docs/how-to-display-fields-in-a-single-column-on-mobile/)

**公開日:** 2023年11月23日
**著者:** David Ozokoye

**概要:** レイアウト用CSSクラスを使用して、モバイル端末でフォームを1列表示にする方法をご紹介します。

**内容:**

モバイル端末で閲覧する際、複数列のフォームレイアウトを1列に変換したいとお考えですか？大きな画面では複数列のレイアウトが見栄えが良い場合もありますが、小さな画面では1列のフォームレイアウトに変更することで、フォームをプロフェッショナルで使いやすいものにすることができます。

このチュートリアルでは、モバイルデバイスからサイトにアクセスするユーザーに対してのみ、複数列のレイアウトを1列に変更する方法をご紹介します。

- [複数列のフォームレイアウトの作成](#multi-column)
- [モバイルでフィールドを1列に表示する](#single-column-mobile)

**注：** ユーザーの画面サイズに合わせて自動的に調整される高度なフォームレイアウトを、より簡単にドラッグ＆ドロップで作成するには、[レイアウトフィールド](https://wpforms.com/docs/how-to-use-the-layout-field-in-wpforms/)の使用をお勧めします。ただし、このチュートリアルで取り上げるレイアウト用CSSクラスは引き続きサポートされています。

---

作業を始める前に、まずWordPressサイトにWPFormsが[インストールされ、有効化されている](https://wpforms.com/docs/install-wpforms-plugin/ "WPFormsプラグインのインストール方法")ことを確認し、[ライセンスが有効であることを確認](https://wpforms.com/docs/verify-wpforms-license/ "WPFormsライセンスの確認方法") されていることを確認してください。その後、[新しいフォームを作成](https://wpforms.com/docs/creating-first-form/ "最初のフォームの作成方法") するか、既存のフォームを編集してフォームビルダーにアクセスできます。

カスタマイズ可能な[複数列の見積依頼フォームテンプレート](https://wpforms.com/templates/multi-column-request-a-quote-form-template/)をぜひご活用いただき、簡単に始めましょう。

## 複数列のフォームレイアウトの作成

WPFormsを使えば、[複数列のフォーム](https://wpforms.com/docs/how-to-create-multi-column-form-layouts-in-wpforms/ "WPFormsで複数列のフォームレイアウトを作成する方法")を簡単に作成できます。この例では、次のCSSクラス `wpforms-one-half` を使用して、2列レイアウトを作成してみましょう。 以下は、この複数列フォームの表示例です。

![2列フォームレイアウト](https://wpforms.com/wp-content/uploads/2021/10/two-column-form-layout.png)**注：** 上の画像の各行の最初のフィールドには、`wpforms-first`クラスも使用されています（つまり、`wpforms-one-half wpforms-first`）。このクラスは、そのフィールドが新しい行を開始する必要があることを指定します。

2列のフォームレイアウトを作成した後、モバイルデバイスからサイトにアクセスするユーザーに対しては、フォームフィールドが1列で表示されるようにする必要があります。

## モバイルでフィールドを1列で表示する

モバイルでフィールドを1列で表示するには、あらかじめ定義されたCSSクラスを使用する必要があります。フォームビルダーでフィールドをクリックして**フィールドオプション**を表示します。次に、**詳細**セクションの**CSSクラス**フィールドに`wpforms-mobile-full`クラスを追加します。

![wpforms-mobile-full クラス](https://wpforms.com/wp-content/uploads/2021/10/wpforms-mobile-full-class.png)最後に、フォーム内の他のフィールドについても同様に設定し、変更を保存するために**保存**ボタンをクリックすることを忘れないでください。

これで、モバイルユーザーには、複数列のフォームレイアウトが1列で表示されるようになります。 以下は、モバイル端末でのフォームの表示例です：

![シングルカラムのモバイル表示](https://wpforms.com/wp-content/uploads/2021/10/single-column-mobile-view.png)これで完了です！これで、モバイル端末ではマルチカラムレイアウトからシングルカラムに切り替わるフォームを作成できるようになりました。

次に、フォームの外観をさらにカスタマイズしたいですか？その場合は、フォームに[カスタムCSSを追加する方法](https://wpforms.com/docs/how-to-add-custom-css-to-your-wpforms/ "WPFormsにカスタムCSSを追加する方法")に関するチュートリアルをぜひご覧ください。

**カテゴリ：** スタイリング、スタイリングとカスタマイズ

---