---
title: "ウェブ体験でCSSを使う"
slug: "use-css-in-a-web-experience"
abstract: "ウェブ体験でカスケーディングスタイルシート(CSS)を使い、組織のブランディングを適用する方法を説明しています。"
---
# ウェブ体験でCSSを使う

ウェブ体験でカスケーディングスタイルシート(CSS)を使い、組織の色、フォント、レイアウト、ブランディングを体験に適用できます。

また、動的データを実行することで1:1のパーソナライズを促進する体験として、バリアントのCSSを編集することも可能です。これを行うには、[API応答に](https://doc.sitecore.com/personalize/ja/users/sitecore-personalize/introduction-to-experiments-in-sitecore-personalize/introduction-to-web-experiments-in-sitecore-personalize/compose-the-api-request-for-a-web-experiment/compose-the-api-request-for-a-web-experiment.html "Compose the API request for a web experiment") 動的データを含めるように設定し、バリアントが実行された際にサーバーからデータを要求し、その後バリアントに渡すようにする必要があります。

ウェブ体験でCSSを使用する方法:

1.  **エクスペリエンス**タイルで、設定したいバリアントの隣にある**編集**アイコンをクリックします。
    
2.  コードエディターの**CSS**タブで、ウェブ体験のレイアウトをフォーマットするために使いたいCSSを入力してください。
    
3.  CSSに動的データを挿入するには、**データ** タブの **データセレクタ** 検索ボックスで、ゲストのメールアドレスやその他の識別子を入力して検索してください。これにより、データモデルの属性やパスにアクセスできます。
    
    > !ヒントコードの設定やテスト時によく使うゲストがいる場合は、スターアイコンをクリックしてゲストをブックマークし、検索しなくて済むようにしましょう。
    
    ![Editing the HTML to apply personalization in a variant.](https://doc.sitecore.com/api/markdown-image/personalize/ja/users/sitecore-personalize/images/Use_CSS_custom_code.png)
    
4.  動的なゲストデータを含めるには、**ゲストデータモデル** ツリーの下で「 ![Copy icon](https://doc.sitecore.com/api/markdown-image/personalize/ja/users/sitecore-personalize/images/copy_data.png) 」をクリックし、「 **Copy Path as Handlebars**」をクリックしてください。
    
5.  意思決定モデル応答からの動的データを含めるには、**意思決定モデル応答** ツリーを展開し、「 ![Copy icon](https://doc.sitecore.com/api/markdown-image/personalize/ja/users/sitecore-personalize/images/copy_data.png) 」をクリックして「 **パスをハンドルバーとしてコピー**」をクリックしてください。
    
6.  体験応答の動的データを含めるには、**体験応答** ツリーを展開し、![Copy icon](https://doc.sitecore.com/api/markdown-image/personalize/ja/users/sitecore-personalize/images/copy_data.png) をクリックして「 **Copy Path as Handlebars**」をクリックしてください。
    
7.  **CSS**タブでデータを貼り付け、接頭辞にcontextを付けます。例えば、CSSの {{decisionOffers.0.attributes.PromoText}} に含まれるデータを含めるには、{{context.decisionOffers.0.attributes.PromoText}}として参照しなければなりません。
    
8.  **「保存**」をクリックします。
    
9.  コードエディタを閉じるには ![back.png](https://doc.sitecore.com/api/markdown-image/personalize/ja/users/sitecore-personalize/images/back.png) をクリックしてください。
    

> !注箱出しのウェブテンプレートを使う場合、またはそのテンプレートからJavaScriptをコピーした場合は、contextオブジェクト内でAPI応答の属性を参照しなければなりません。例えば、CSSにAPI応答のimageURLを含めるには、次のように参照してください:
> 
> background-image: URL("{{context.imageURL}}")