### [フォームのラベルをフィールドの横に表示するようにスタイルを設定する方法](https://wpforms.com/developers/how-to-style-the-form-labels-beside-the-fields/) **公開日:** 2021年12月8日 **著者:** Umair Majeed **抜粋:** このチュートリアルでは、フォームのラベルを設定およびスタイル設定して、フォームフィールドの横に浮動させる方法を説明します。 **コンテンツ:** ラベルをフィールドの上に表示するのではなく、フィールドの横に表示することで、よりコンパクトなフォームレイアウトを作成したいですか？ WPForms はデフォルトでラベルをフィールドの上に表示しますが、CSS を使用して簡単にこのレイアウトを変更し、ラベルとフィールドを横並びに表示できます。 このチュートリアルでは、このプロフェッショナルな水平レイアウトを実現する方法を説明します。 一部のフィールドの HTML マークアップにより、このスタイル設定はすべてのフィールドタイプで完全に機能しない場合があります。これらの変更を実装した後、フォームの外観をテストすることをお勧めします。 ## フォームの設定 まず、フォームを作成し、目的のフィールドを追加する必要があります。ヘルプが必要な場合は、[最初のフォームの作成](https://wpforms.com/docs/creating-first-form/)に関するこのガイドを参照してください。 フォームを作成したら、**設定 » 一般** をクリックし、**詳細設定** の矢印をクリックしてこれらのオプションを開きます。そこに表示されたら、**フォーム CSS クラス** の中に、クラス `wpforms-inline-labels` を追加します。 この CSS クラスを使用すると、サイト上のすべてのフォームに影響を与えるのではなく、特定のフォームをターゲットにすることができます。 ## ラベルのスタイル設定の追加 次に、サイトに CSS コードを追加します。サイトに CSS を追加する方法がわからない場合は、[カスタム CSS スタイルの追加](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/)に関するこのガイドを確認してください。 ``` .wpforms-container.wpforms-inline-labels .wpforms-form .wpforms-field { display: grid; grid-template-columns: 225px auto; align-items: center; } ``` この CSS を追加すると、フォームのラベルがフォームフィールドと同じ行に表示されるようになります。 これで完了です！フォームのラベルをフォームフィールド内に表示するようにスタイル設定したいですか？ [フローティングラベルを持つフォームの作成方法](https://wpforms.com/developers/how-to-create-a-form-with-floating-labels/)に関するチュートリアルを確認してください。 ## よくある質問 #### Q: すべてのフォームにこれを適用したい場合はどうなりますか？ **A:** すべてのフォームにこれを適用したい場合は、代わりにこの CSS を使用し、**フォーム CSS クラス** を追加する際に上記のステップをスキップしてください。すべてのフォームに適用したい場合は、これは必要ありません。 ``` .wpforms-container .wpforms-form .wpforms-field { display: grid; grid-template-columns: 225px auto; align-items: center; } ``` これで完了です！次に、フォームのスタイル設定オプションについてさらに詳しく知りたいですか？ [CSS を使用して送信ボタンをパーソナライズする方法](https://wpforms.com/developers/using-css-to-personalize-the-submit-button/)に関するガイドをご覧ください。 **カテゴリ:** スタイリング **タグ:** CSS ---