---
title: "攻略:ボタン要素をスタイリングするためのBootstrap CSSクラスオプションの作成"
slug: "walkthrough--creating-bootstrap-css-class-options-to-style-a-button-element"
abstract: "Button要素をスタイリングするためのBootstrap CSSクラスオプションの作成方法の例です。"
---
# 攻略:ボタン要素をスタイリングするためのBootstrap CSSクラスオプションの作成

このウォークスルーでは、フォームデザイナーがフォームに**「送信」ボタン**要素を追加した際に、BootstrapフレームワークのCSSオプションをス**タイリング**セクションで利用可能にする方法を説明します(以下の画像参照)。

![CSS class options available for a form element](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/SubmitButtonTesting.png)

[必要なスタイルやスクリプト](https://doc.sitecore.com/xp/ja/developers/103/sitecore-experience-manager/add-styles-and-scripts-to-sitecore-forms.html "Add styles and scripts to Sitecore Forms")をSitecoreに追加した後、ライブウェブサイトでは、スタイリングを適用すると**送信ボタン**の要素が変わります(以下の画像に示されています)。

![Live website showing the CSS styling applied to the Button element](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/PatronScreeningCompare.png)

このウォークスルーでは、以下の方法を説明します:

-   CSSクラスオプションを作成する
-   フィールドタイプを変更する

## CSSクラスオプションを作成する

使用状況に基づいてCSSクラスのオプションを分類し、例えば各フィールドタイプごとにフォルダを作成することをお勧めします。また、CSSクラスオプション用の共有フォルダを作成し、任意のフィールドタイプに適用することもできます。

CSSクラスオプションを作成するには:

1.  コンテンツエディターで */sitecore/System/Settings/Forms/Meta Data*へ行ってください。
    
2.  *CSS Class Options*フォルダを右クリックして「**Insert, Folder**」をクリックします。次に**メッセージ**ダイアログボックスで「*Button*」を入力し、「**OK」**をクリックします。
    
3.  *Button*フォルダを右クリックして「**Insert, Insert From Template**」をクリックします。
    
4.  テンプレート **から挿入** ダイアログボックスで、/System/Forms/Meta Dataに移動し、**CSSクラスオプション** テンプレートをクリックし、**アイテム名欄** に*Default*を入力してください。
    
    ![Insert from Template dialog box](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/InsertFromTemplate.png)
    
5.  「 **挿入**」をクリックします。
    
6.  コンテンツツリーで作成した**Default**アイテムを選択し、**コンテンツ** タブの**Value**欄で*btn btn-default*を入力し、変更を保存してください。
    
    > !注Valueフィールドは、クラス名をスペースで区切った組み合わせで作成できます。
    
7.  ステップ3から6を繰り返して、以下の表に挙げられた各項目を作成します。
    
    アイテム名
    
    価値
    
    小学校
    
    BTN BTN-プライマリー
    
    情報
    
    BTN BTN-Info
    
    成功
    
    BTN BTNの成功
    
    警告
    
    BTN BTN警告
    
    危険
    
    BTN BTN-デンジャー
    
8.  CSSオプションを他の要素と共有できるフォルダ*Shared*を作成します。
    
9.  *Shared*フォルダを右クリックし、「**Insert」→「Insert From Template**」をクリックし、以下の項目と関連する値を追加して、以下の表に示されているものに合わせます。前の手順と同じテンプレートを/System/Forms/Meta Data/CSS Class Option。
    
    アイテム名
    
    価値
    
    現役
    
    現役
    
    障害者
    
    故障
    
10.  変更を保存してください。
     
     コンテンツツリーは今や次のようになります。
     
     ![Final tree structure showing all CSS class options.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/ContentTreeCSSStyling.png)
     
     フォームデザイナーがフォームを開き、キャンバスの **「送信」ボタン** をクリックし、**CSSクラス名をCSSクラス** フィールドに入力すると、利用可能なクラスが表示されます。
     

## フィールドタイプを変更する

CSSクラスの[オートコンプリートリスト](https://doc.sitecore.com/xp/ja/developers/103/sitecore-experience-manager/creating-an-autocomplete-list-for-form-element-styling.html "Creating an autocomplete list for form element styling")を入力する際のオプションを指定するのは、各フィールドタイプの**Cssクラスの自動補完オプション**欄で、CSSクラスのラベルフィールドのCSSクラスの入力時に指定しますが、これら2つのフィールドは必ずしも同じである必要はありません。CSSクラスのオプションをフォルダごとに分類することで、オプションを一つずつ選ぶのではなく、単にフォルダを選択するだけでクラスオプションをフィールドタイプに適用しやすくなります。

フィールドタイプを変更するには:

1.  コンテンツエディターで*/sitecore/System/Settings/Forms/Field Types/Structure/Submit ボタン*に行ってください。
    
2.  **コンテンツ**タブの**設定**セクションの**CSSクラス自動補完オプション**フィールドで、Buttonフォルダと共有フォルダをダブルクリックして**Selected**フィールドに移動します。
    
    選択されたCssクラスのオートコンプリートオプションは、フォームデザイナーの**CSSクラス** フィールドおよび **ラベルフィールド用のCSSクラス** の両方に使用されます。
    
    ![Selected CSS class options folders](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/103/sitecore-experience-manager/images/SubmitButtonSelected.png)
    
3.  変更を保存してください。
    
    オートコンプリートリストはフォームデザイナー向けに利用可能になりました。