### [フォームの周りにカスタム境界線を追加する方法](https://wpforms.com/developers/how-to-put-a-border-around-your-form/) **公開日:** 2022年2月9日 **著者:** Umair Majeed **抜粋:** このチュートリアルでは、CSSを使用してフォームの周りに境界線を追加する方法を説明します。 **コンテンツ:** カスタム境界線を追加して、ウェブサイト上のフォームを目立たせたいですか？簡単なコードスニペットを使用すると、フォームの周りにスタイリッシュな境界線を追加して、視覚的な魅力を高め、ページ上でより目立たせることができます。 このガイドでは、WPFormsの周りに境界線を追加およびカスタマイズする方法を説明します。 ## フォームの設定 まず、フォームのIDを特定する必要があります。コードは、このIDを使用して特定のフォームをターゲットにするため、これは不可欠です。フォームIDの見つけ方がわからない場合は、[フォームIDとフィールドIDの見つけ方](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/#locating-the-field-id)をご覧ください。 ## 境界線コードの追加 次に、フォームの周りに境界線を作成するコードスニペットを追加する必要があります。サイトにコードスニペットを追加する方法がわからない場合は、[カスタムCSSの追加方法](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/)をご覧ください。 上記のコードは、視覚的な魅力を高めるための追加のスタイリングとともに、フォームに境界線を追加します。各行の機能は次のとおりです。 - **2行目**では、1234を実際のフォームIDに置き換えてください。 - **3行目**では、境界線の幅（2px）、スタイル（solid）、および色（#333333）を変更できます。 - **4行目**のパディングは、フォーム要素と境界線の間にスペースを作成します。 - **5行目**のborder-radiusは、フォームに角丸を追加します。 - **6行目**のbackground-colorは、フォームに白い背景を設定します。 - **7行目**のbox-shadowは、フォームの周りに微妙な影の効果を追加します。 この同じCSSをすべてのフォームに適用したい場合は、代わりにこのCSSを使用してください。 これで、フォームの周りに境界線を追加する準備がすべて整いました！フォームを中央揃えにすることもできますか？[フォームを中央揃えにする方法](https://wpforms.com/developers/how-to-center-a-form/ "フォームを中央揃えにする方法")のチュートリアルをご覧ください。 **カテゴリー:** スタイリング **タグ:** CSS ---