### [CSSクラスを使用した複数列フォームレイアウトの作成](https://wpforms.com/docs/how-to-create-multi-column-form-layouts-in-wpforms/) **公開日:** 2018年6月1日 **著者:** Umair Majeed **抜粋:** フォームフィールドを整理するために複数列レイアウト設定を使用する方法を学びます。 **コンテンツ:** フィールドを複数列で表示してフォームを簡潔にしたいですか？ WPFormsを使用すると、フォームを半分、3分の1、またはさらに複雑なレイアウトに簡単に分割できます。 このチュートリアルでは、複数列レイアウト設定を使用してフォームを最適に見せる方法を説明します。 - [ビジュアルレイアウトを使用した複数列フォームの作成](#visual) - [複数列CSSクラスの手動追加](#manual) - [複数列レイアウト使用時の追加注記](#notes) - [よくある質問](#faq) **注記:** よりシンプルでドラッグ＆ドロップで高度なフォームレイアウトを構築できる[レイアウトフィールド](https://wpforms.com/docs/how-to-use-the-layout-field-in-wpforms/)の使用をお勧めします。ただし、このチュートリアルで説明するレイアウトCSSクラスは引き続きサポートされています。 --- 開始する前に、WordPressサイトにWPFormsが[インストールおよび有効化](https://wpforms.com/docs/install-wpforms-plugin/)されており、[ライセンスが検証](https://wpforms.com/docs/verify-wpforms-license/)されていることを確認する必要があります。その後、[新規フォームを作成](https://wpforms.com/docs/creating-first-form/)するか、既存のフォームを編集してフォームビルダーにアクセスできます。 ## ビジュアルレイアウトを使用した複数列フォームの作成 WPFormsには、コードなしで複数の列を作成できるビジュアルレイアウトツールが含まれています。 このツールにアクセスするには、ビルダー内の任意のフィールドをクリックしてフィールドオプションパネルを開きます。次に、「**詳細設定**」タブをクリックします。 「CSSクラス」オプションの横にある「**レイアウトを表示**」をクリックして、ビジュアルレイアウトツールを開きます。 これにより、フォームで使用できるいくつかの既製のレイアウトオプションが表示されます。 **注記:** 「**レイアウトを表示**」オプションはWPForms Liteユーザーのみが利用できます。WPForms Proプラグインを使用している場合は、[レイアウトフィールド](https://wpforms.com/docs/how-to-use-the-layout-field-in-wpforms/)を使用して複数列のフォームフィールドを作成する必要があります。 例として、名前とメールアドレスのフィールドを隣り合わせに表示し、それぞれがフォームの幅の半分を占めるようにしたいとします。このレイアウトを作成するには、2つの均等なサイズのボックスが表示されるオプションを選択します。 このレイアウトを選択したら、この特定のフィールドを表示したい列を選択する必要があります。名前フィールドはフォームの最初にあるため、左側の列に表示したいです。 ビジュアルレイアウトツールで列をクリックすると、対応するクラスがフィールドのCSSクラス設定に自動的に追加されます。「`wpforms-one-half`」クラスはフィールドに利用可能な幅の半分を占めるように指示し、「`wpforms-first`」クラスはフィールドが新しい行を開始する必要があることを示します。 次に、メールアドレスフィールドについても同じプロセスを実行する必要があります。ただし、右側の列に配置します。 フィールドをレイアウトに追加したら、フォームビルダーで変更を保存することを忘れないでください。 ここでは、複数列レイアウトの例がサイトのフロントエンドでどのように表示されるかを示します。 CSSクラスを使用してコンパクトな複数列レイアウトを作成した[複数列見積もり依頼フォームテンプレート](https://wpforms.com/templates/multi-column-request-a-quote-form-template/)をご覧ください。 ## 複数列CSSクラスの手動追加 ビジュアルレイアウトツールを使用したくない場合は、フィールドオプションパネルの詳細設定タブの関連フィールドにCSSクラスを手動で入力できます。 複数列レイアウトで利用可能なすべてのCSSクラスを以下に示します。 - wpforms-one-half - wpforms-one-third - wpforms-one-fourth - wpforms-one-fifth - wpforms-one-sixth - wpforms-two-thirds - wpforms-two-fourths - wpforms-two-fifths - wpforms-two-sixths - wpforms-three-fourths - wpforms-three-fifths - wpforms-three-sixths - wpforms-four-fifths - wpforms-four-sixths - wpforms-five-sixths 下の画像は、3つの異なる一般的な複数列レイアウトを示しています。ラベルは、上記のリストから使用されたCSSクラスを示しています。 **注記:** 上記の画像の各行の最初のフィールドには、「`wpforms-first`」クラスも使用されています。 **注記:** 上記の画像の各行の最初のフィールドには、「`wpforms-first`」クラスも使用されています。 ## 複数列レイアウト使用時の追加注記 列クラスを使用する際には、いくつか重要な点があります。 - 列はフォームビルダーには適用されません。フォームがサイトのフロントエンドに表示されたときにのみ表示されます。レイアウトに満足していることを確認するために、公開する前に必ず[フォームをテスト](https://wpforms.com/docs/how-to-properly-test-your-wordpress-forms-before-launching-checklist/)してください。 - 各行の最初のフィールドには、列クラスに加えて「`wpforms-first`」クラスが必要です。これにより、プラグインはそれが最初のアイテムであることを認識し、フォーム内の以前の列をリセットします。 - ほとんどの場合、列クラスを使用する際は、「フィールドオプション」パネルの詳細設定タブにある「**フィールドサイズ**」を「**大**」に設定する必要があります。これにより、フィールドはその列のすべての利用可能なスペースを埋め、隣接するフィールドとの右および左の間隔を均等に保つことができます。 - [条件付きフィールド](https://wpforms.com/docs/how-to-use-conditional-logic-with-wpforms/)で複数列レイアウトを使用する場合、条件付きで表示されるフィールドは左揃えになります。これらのフィールドを好みのレイアウトに合わせて配置するには、このCSSスニペットを使用できます。 **注記:** WPFormsでのCSSの使用に慣れていない場合は、[初心者向けのCSSガイド](https://wpforms.com/docs/how-to-style-wpforms-with-custom-css-beginners-guide/)と、[WPFormsでのカスタムクラスの使用](https://wpforms.com/docs/how-to-add-custom-css-to-your-wpforms/)に関するドキュメントを参照してください。 ## よくある質問 複数列フォームレイアウトの作成に関するトップの質問への回答です。 #### フォームのプレビュー時に複数列レイアウトが機能しないのはなぜですか？ WPFormsの設定でモダンマークアップが有効になっている場合、フロントエンドでフォームを表示するときに複数列CSSクラスは機能しません。この問題を解決するには、モダンマークアップを無効にする必要があります。 **注記:** モダンマークアップを無効にすると、ブロックエディターでフォームをスタイル設定できなくなります。ブロックエディターでフォームをスタイル設定したい場合は、[レイアウトフィールド](https://wpforms.com/docs/how-to-use-the-layout-field-in-wpforms/)を使用して複数列フォームフィールドを作成することをお勧めします。 これを行うには、「**WPForms » 設定**」に移動し、「**一般**」タブを選択します。 その後、下にスクロールして「**モダンマークアップを使用**」オプションのチェックを外します。 完了したら、変更を保存することを忘れないでください。 注記: モダンマークアップ設定が見つからない場合は、WPFormsにこのオプションを表示させるためのフィルターを追加する必要があります。詳細については、[フォームスタイリング](https://wpforms.com/docs/styling-your-forms/#show-hide-modern-markup)ガイドを参照してください。 これで、複数列レイアウトでフォームを最適化できます。 次に、フォームをモバイルデバイスで見栄え良くしたいですか？フォームを、モバイルでは[フィールドを1列で表示](https://wpforms.com/docs/how-to-display-fields-in-a-single-column-on-mobile/)するように構成して、すべてのデバイスでユーザーフレンドリーにすることができます。 **カテゴリ:** スタイリング、スタイリングとカスタマイズ ---