---
title: "フォームのスタイリングを変更する"
slug: "change-the-styling-of-a-form"
abstract: "フォーム要素にCSSスタイルを設定しましょう。"
---
# フォームのスタイリングを変更する

例えば、フォームにスタイリングを加えて、会社のブランドの色やフォントを使うことができます。

![Example of a form with company branding](https://doc.sitecore.com/api/markdown-image/xp/ja/users/91/sitecore-experience-platform/images/LighthouseForm.png)

テキストに追加できるHTMLスタイルのほかに、すべてのフォーム要素にCSSスタイルを設定したり、フィールドとラベルの両方に割り当てるCSSクラスを定義することもできます。

> !注ラベルのCSSクラスとCSSクラスは異なる場合があります。

フォーム要素のスタイルを変更するには:

1.  **フォームデザイナー**のフォームキャンバスで、スタイル付けしたいフォーム要素をクリックします。
    
2.  **フォーム要素**ペインのス**タイリング**セクションの**CSSクラス**フィールドで、フィールドのクラスを入力するか、利用可能なクラスのリストから選択してください。
    
    例えば、**送信** ボタンに色をつけるには、.btn-successクラスを使います:
    
    ![Use CSS class field to color the submit button example.](https://doc.sitecore.com/api/markdown-image/xp/ja/users/91/sitecore-experience-platform/images/97C917BF15CE49C5A52C0B70D8085F17.png)
    
3.  **CSSクラスのラベル**フィールドで、そのラベルのクラスを入力するか、利用可能なクラスのリストから選択してください。
    
    例えば、チェックリストボタンをインデントするには .checkbox-inlineクラスを使います。
    
    ![Inline checkbox CSS class for label example.](https://doc.sitecore.com/api/markdown-image/xp/ja/users/91/sitecore-experience-platform/images/StylingSectionPre101.png)
    
4.  **「応募**」をクリックします。
    
    > !注ウェブサイトに公開する前にフォームをプレビューすることをお勧めします。フォームアプリケーションでの表示方法は、ウェブページの実際のフォームのスタイルを反映していない場合があります。