---
title: 実験の JavaScript と CSS：すべてのバリエーションを対象とした JavaScriptとCSSの実行
description: Optimizely では、特定のバリエーションで実行するためのバリエーションコードに加えて、実験JavaScript と実験 CSS を使用して、オリジナルを含むすべてのバリエーションでJSとCSSを実行できます。
---

[OptimizelyのFAQ ](https://optimizely.gaprise.jp/faq)

# [実験の JavaScript と CSS：すべてのバリエーションを対象とした JavaScriptとCSSの実行](https://optimizely.gaprise.jp/faq/optimizely-classic/optimizely-classic-build/541)

 作成者: [株式会社ギャプライズ（Optimizely）](https://optimizely.gaprise.jp/faq/author/株式会社ギャプライズoptimizely)｜Jun 4, 2020 2:17:00 PM

Optimizely では、カスタム JavaScript と CSS を実験に使用することができます。特定のバリエーションで実行するためのバリエーションコードに加えて、実験JavaScript と実験 CSS を使用して、オリジナルを含むすべてのバリエーションでJSとCSSを実行できます。

> ヒント：  
> プロジェクト JavaScript はエンタープライズアカウントで使用できます。これによってプロジェクトレベルでカスタム JavaScript を挿入することができ、サイトのコードに直接的な変更を加えないで済みます。

実験 JavaScript と実験 CSS を使用するには、エディターに移動し、[オプション]メニューを開きます。

目次

1.[実験 JAVASCRIPT](https://optimizely.gaprise.jp/faq/optimizely-classic/optimizely-classic-build/541?hs_amp=true#ch1)  
2.[実験 CSS](https://optimizely.gaprise.jp/faq/optimizely-classic/optimizely-classic-build/541?hs_amp=true#ch2)

 

 

## 実験 JAVASCRIPT

実験 JavaScript では、元のページを含むすべてのバリエーションにアクセス可能なJavaScript を書くことができます。

多くの場合、以下の目的で使用します。

- 使用しているアナリティクスサービスに Optimizely の情報を送信する。
- カスタム目標への API 呼び出しを追加する。
- 複数のバリエーションで使用できる関数を追加し、バリエーションコードの中で違うパラメーターを指定してそれらの関数を呼び出す。

たとえば、以下のコードは、訪問者が特定の要素までスクロールしたときにカスタムイベント API 呼び出しを送信します。

このコードは、バリエーションごとに正しいバリエーションインデックスを指定して追跡呼び出しを送信しますが、実装するのは一度だけで十分です。

別の例として、このコードを実験 JavaScript に入力することができます。

```
window.bringUpAlert = function(value) { alert("You are in " + value); ];
```

続けて、特定のバリエーションのためのバリエーションコードの中で、自分で選んだ値を指定して関数を呼び出すことができます。

```
bringUpAlert("Variation #1")
```

## 実験 CSS

実験 CSS は強力なツールであり、ページ上の新しいコンテンツの CSS プロパティーを定義でき、コンテンツをインラインで書かずに済みます。

実験 CSS はすべてのバリエーションに影響するので、既存のクラスや要素の CSS を変更するとすべてのバリエーション（元のページを含む）の表示が変わります。

実験 CSS の最も効果的な使用方法は、新しいクラスを定義し、これらのクラスを使用して新しいコンテンツを作成することや、これらのクラスを追加することで既存の要素を変更することでしょう。

例：

上のスクリーンショットでは purchaseForm と呼ばれるクラスを定義しており、このクラスは、自身が割り当てられる要素に背景画像プロパティーを設定します。このクラスのホバー状態も定義しています。この CSS を使えば、自分のバリエーションでロールオーバーを作成できます。

続けて以下のコードを <Edit Code> セクションに追加すれば、id が「buyButton」の要素にこれらのプロパティーを割り当てることができます。

これは実験 CSS を使って既存のコンテンツにスタイルを設定する方法の一例にすぎません。複数のクラスを定義してから、[コードの編集] セクションを使用して、これらのクラスを参照する新しい HTML を挿入するなら、非常に少ない労力で新しいコンテンツを作成できます。

バリエーションに特有の CSS を作成したい場合、以下の jQuery セレクターを使って  
[コードの編集] ボックスに入力します。

```
$("body").append('<style> YOUR_CSS_HERE</style>');
```

CSS を直接 [コードの編集] ボックスに入力できないことにご注意ください。CSS を<style> タグに挿入し、以下のようにします。

CSS を圧縮する必要があるなら、HTML Minifier のようなツールを使用し、バリエーションコードに入力する前に CSS を簡略化します。

[完全な記事を表示](https://optimizely.gaprise.jp/faq/optimizely-classic/optimizely-classic-build/541)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "株式会社ギャプライズ（Optimizely）"
  },
  "dateModified" : "2022-02-23T07:44:11.052Z",
  "datePublished" : "2020-06-04T14:17:00Z",
  "headline" : "実験の JavaScript と CSS：すべてのバリエーションを対象とした JavaScriptとCSSの実行",
  "image" : {
    "@type" : "ImageObject",
    "height" : 630,
    "url" : "https://f.hubspotusercontent10.net/hubfs/19917462/optimizely/optimizely-blog.png",
    "width" : 1200
  },
  "mainEntityOfPage" : "https://optimizely.gaprise.jp/faq/optimizely-classic/optimizely-classic-build/541",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "OptimizelyのFAQ"
  }
}
```