### [CSSを使ってフォームフィールドにマテリアルデザインを追加する方法](https://wpforms.com/developers/how-to-add-material-design-to-your-form-fields-using-css/) **公開日:** 2020年8月26日 **著者:** Umair Majeed **概要:** このチュートリアルでは、PHPとCSSを使用してフォームフィールドにマテリアルデザインを適用する方法をご紹介します。 **内容:** WPFormsのフィールドにマテリアルデザインを追加してみませんか？このデザインは、フォームフィールドにモダンで洗練された外観を与える非常に人気のある手法です。簡単なPHPスニペットとCSSを使用することで、WPFormsにこのデザインを簡単に適用できます。 このチュートリアルでは、その実現方法について各ステップを順を追って解説します。 Material Designの原則に関する詳細については、[GoogleのMaterial Designドキュメント](https://m3.material.io/)をご参照ください。 ## フォームの作成 まず、フォームを作成し、追加したいフィールドを追加する必要があります。 フォームの作成についてサポートが必要な場合は、[こちらのチュートリアル](https://wpforms.com/docs/creating-first-form/「初めてのフォームの作成方法」）をご参照ください。 このチュートリアルの目的上、ここではシンプルなフィードバックフォームを作成します。この例では、**名前**、**メールアドレス**、**件名**、**本文**のフォームフィールドを含めます。 ![フォームを作成し、フィールドを追加する](https://wpforms.com/wp-content/uploads/2020/08/wpforms-material-design-create-form.jpg)このチュートリアルでは、直接テキスト入力を受け付けるフィールドにのみ、この種のデザインを追加することに焦点を当てている点に注意してください。 すべてのフォームフィールドにこのデザインを適用すると、期待した通りの効果が得られない可能性があります。そのため、まずフォームをテストして、見た目が意図した通りになっているか確認するようにしてください。 ## Material Design – PHPスニペット 次に、小さなPHPスニペットを追加します。これは、フォームフィールドのラベルをフィールドの前から後ろに移動させるために必要です。 サイトにコードスニペットを追加する方法については、[こちらのチュートリアル](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "WPFormsにカスタムPHPまたはJavaScriptを追加する方法")をご参照ください。 このスニペットは、フォームIDが**697**の場合にのみ実行されます。フォームIDが一致する場合、最初の関数**wpf\_dev\_display\_field\_before**が、フォームフィールドの**前**にラベルを表示するように設定するPHPアクションを削除します。次の関数が、ラベルをフォームフィールドの**後**に表示するように強制します。 ## Material Design – CSS スニペット 最後のステップとして、この CSS をサイトに追加し、すべてのフォームフィールドに Material Design の外観を適用します。 すべてのセレクタ内の **697** を、ご自身のフォーム ID に置き換えてください。 サイトへのCSS追加についてサポートが必要な場合は、[こちらのチュートリアルをご覧ください。](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "WPFormsにカスタムCSSスタイルを追加する方法") ![これでフォームにマテリアルデザインが適用されました](https://wpforms.com/wp-content/uploads/2020/08/wpforms-material-design.jpg)これで完了です！ これでフォームのフィールドにマテリアルデザインが適用されました！他のCSSソリューションを試してみたい場合は、[スタイリングに関するドキュメント](https://wpforms.com/categories/docs/styling/ "WPForms スタイリングドキュメント")をご覧ください。 ## 参照アクション - [wpforms\_display\_field\_after](https://wpforms.com/developers/wpforms_display_field_after/ "wpforms_display_field_after アクションの使用") - [wpforms\_display\_field\_before](https://wpforms.com/developers/wpforms_display_field_before/ "wpforms_display_field_beforeアクションの使用") **カテゴリ:** チュートリアル **タグ:** CSS, PHP ---