### [フォームを中央揃えする方法](https://wpforms.com/developers/how-to-center-a-form/) **公開日:** 2020年11月6日 **著者:** Umair Majeed **抜粋:** このチュートリアルでは、CSSを使用してWPFormsのフォームを中央揃えする方法を説明します。 **コンテンツ:** WordPressのページでフォームを中央揃えしたいですか？ WPFormsのフォームはデフォルトでコンテナの幅全体を使用しますが、カスタムCSSを使用すると簡単に中央揃えできます。 このガイドでは、フォームとその要素を完全に中央揃えする方法を説明します。 ## フォームの設定 まず、フォームを作成する必要があります。これについてサポートが必要な場合は、いつでも[このドキュメントを参照してください](https://wpforms.com/docs/creating-first-form/ "最初のフォームの作成")。 フォームを作成してフィールドを追加したら、各**フィールドサイズ**を**大**に設定する必要があります。 これを行うには、**高度な設定**タブをクリックし、**フィールドサイズ**ドロップダウンから**大**を選択します。 ### CSSクラスの追加 フィールドサイズを大に設定した後、次に特別なCSSクラスを追加する必要があります。これを行うには、フォームビルダーを開き、**設定 » 一般**に移動します。次に、**高度な設定**セクションまでスクロールし、**フォームCSSクラス**フィールドを見つけます。このフィールドに`wpf-center`と入力します。 **注意:** CSSクラスの手順は非常に重要です。これがないと、中央揃えのCSSは機能しません。クラス名は表示されているとおりに正確に入力してください。 ## CSSコードの追加 フォームを中央揃えするための基本的なCSSコードは次のとおりです。 注意: サイトにCSSを追加する方法については、[このチュートリアルをご覧ください。](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "WPFormsのカスタムCSSスタイルの追加方法") このコードは次のことを行います。 - `margin: 0 auto`を使用してフォームを中央揃えします - 最大幅を500pxに設定します。これは、ニーズに合った量が見つかるまで調整できます。 - 小さい画面での幅を調整することにより、モバイルの応答性を確保します。 ## すべてのフォーム要素を中央揃えする フォーム内のすべて（ラベル、説明、ボタン）を中央揃えしたい場合は、この拡張バージョンを使用してください。 ## 幅のカスタマイズ フォームの幅を調整するには、CSSの次の2行を変更します。 ``` max-width: 500px !important; width: 500px !important; ``` `500px`を希望の幅に置き換えます。たとえば、より広いフォームの場合： ``` max-width: 800px !important; width: 800px !important; ``` ## よくある質問 #### Q: なぜCSSが機能しないのですか？ **A:** まず、フォームの**設定 » 一般**ページに`wpf-center`クラス名を追加したことを確認してください。これはCSSが機能しない最も一般的な理由です。それでも機能しない場合は、ブラウザのキャッシュをクリアしてページを更新してください。 #### Q: 送信ボタンだけを中央揃えするにはどうすればよいですか？ **A:** この簡略化されたCSSを使用し、フォームのCSSクラスフィールドに`wpf-center`の代わりに`wpf-center-button`クラスを追加してください。 次に、このCSSをサイトに追加します。 ``` .wpforms-container.wpf-center-button .wpforms-submit-container { text-align: center; } ``` これで、フォームを中央揃えするために必要なすべてが揃いました。次に、フォームの送信ボタンの色を変更できるようにしたいですか？[送信ボタンの色を変更する方法](https://wpforms.com/developers/how-to-change-the-submit-button-color/)に関する記事をご覧ください。 **カテゴリ:** スタイリング **タグ:** CSS ---