CSS 機能リファレンス

CSS の表示と変更に関連する Chrome DevTools の機能に関するこの包括的なリファレンスで、新しいワークフローを見つけてください。

基本については、CSS を表示、変更するをご覧ください。

要素を選択する

DevTools の [Elements] パネルでは、一度に 1 つの要素の CSS を表示または変更できます。

スクリーンショットでは、DOM ツリーで青くハイライト表示されている h1 要素が選択された要素です。右側の [Styles] タブに、要素のスタイルが表示されます。左側では、ビューポート内の要素がハイライト表示されていますが、これはマウスが DOM ツリー内の要素にカーソルを合わせているためです。

チュートリアルについては、要素の CSS を表示するをご覧ください。

要素を選択する方法は多数あります。

• ビューポートで要素を右クリックし、[検証] を選択します。
• DevTools で、[Select an element] をクリックするか、Command+Shift+C キー（Mac）または Control+Shift+C キー（Windows、Linux）を押して、ビューポート内の要素をクリックします。
• DevTools で、[DOM ツリー] の要素をクリックします。
• DevTools のコンソールで document.querySelector('p') などのクエリを実行し、結果を右クリックして [Reveal in Elements panel] を選択します。

CSS を表示する

[Elements] > [Styles] タブと [Computed] タブを使用して、CSS ルールを表示し、CSS の問題を診断します。

リンクを使って目的のデータに移動する

[スタイル] タブには、さまざまな場所からさまざまな場所へのリンクが表示されます。たとえば、次のようなリンクが表示されます。

• CSS ルールの横に、スタイルシートと CSS ソースが表示されます。このようなリンクをクリックすると、[ソース] パネルが開きます。スタイルシートが縮小されている場合は、縮小されたファイルを読みやすくするをご覧ください。
• [Inherited from ...] セクションで、親要素に移動します。
• var() 呼び出しで、カスタム プロパティの宣言。
• animation のショートハンド プロパティで @keyframes に。
• ドキュメントのツールチップの [詳細] リンク。
• 多くの機能があります。

以下にその一部をご紹介します。

リンクのスタイルは異なる場合があります。リンクかどうかわからない場合は、クリックして確認してみてください。

CSS ドキュメント、詳細度、カスタム プロパティ値を含むツールチップを表示する

[要素] > [スタイル] で、特定の要素にカーソルを合わせると、役立つ情報を含むツールチップが表示されるようになりました。

CSS ドキュメントを表示する

[スタイル] タブでプロパティ名にカーソルを合わせると、CSS の簡単な説明を含むツールチップが表示されます。

[詳細] をクリックすると、このプロパティの MDN CSS リファレンスに移動します。

ツールチップをオフにするには、[ 表示しない] をオンにします。

再び有効にするには、 [設定] > [設定] > [要素] > [CSS ドキュメントのツールチップを表示] をオンにします。

ビューセレクタの特異性

[スタイル] タブでセレクタ（ネストされた CSS ルールの親セレクタ、継承されたネストルール、@nested-declarations ルールなど）にカーソルを合わせると、その詳細度の重みを示すツールチップが表示され、ビューポートで一致する要素がハイライト表示されます。

カスタム プロパティの値を表示する

--custom-property にカーソルを合わせると、ツールチップにその値が表示されます。

無効、オーバーライド、無効などの CSS を表示する

[スタイル] タブでは、さまざまな種類の CSS の問題を認識し、さまざまな方法でハイライト表示します。

[スタイル] タブで CSS を理解するをご覧ください。

要素に実際に適用されている CSS のみを表示する

[スタイル] タブには、オーバーライドされた宣言を含む、要素に適用されるすべてのルールが表示されます。オーバーライドされた宣言に関心がない場合は、[Computed] タブを使用して、要素に実際に適用されている CSS のみを表示します。

1. 要素を選択します。
2. [要素] パネルの [計算済み] タブに移動します。

[すべて表示] チェックボックスをオンにすると、すべてのプロパティが表示されます。

[計算済み] タブの CSS についてをご覧ください。

CSS プロパティをアルファベット順に表示する

[Computed] タブを使用します。要素に実際に適用されている CSS のみを表示するをご覧ください。

継承された CSS プロパティを表示する

[Computed] タブの [Show All] チェックボックスをオンにします。要素に実際に適用されている CSS のみを表示するをご覧ください。

または、[Styles] タブをスクロールして、Inherited from <element_name> という名前のセクションを見つけます。

CSS の @ 規則を表示する

アットルールは、CSS の動作を制御できる CSS ステートメントです。[要素] > [スタイル] の専用セクションに、次のアットルールが表示されます。

• @property
• @supports
• @scope
• @font-palette-values
• @position-try

@property 個のアットルールを表示

@property CSS at-rule を使用すると、CSS カスタム プロパティを明示的に定義し、JavaScript を実行せずにスタイルシートに登録できます。

[スタイル] タブで、そのようなプロパティの名前にカーソルを合わせると、プロパティの値、記述子、および [スタイル] タブの下部にある折りたたみ可能な @property セクションでの登録へのリンクを含むツールチップが表示されます。

@property ルールを編集するには、その名前または値をダブルクリックします。

@supports 個のアットルールを表示

[スタイル] タブには、要素に適用されている @supports CSS at-rule が表示されます。たとえば、次の要素を検証します。

ブラウザが lab() 関数をサポートしている場合、要素は緑色になります。サポートしていない場合は紫色になります。

@scope 個のアットルールを表示

[スタイル] タブには、要素に適用されている CSS @scope at ルールが表示されます。

新しい @scope at-rule は、CSS カスケードと継承レベル 6 の仕様の一部です。これらのルールを使用すると、CSS スタイルのスコープを設定できます。つまり、特定の要素にスタイルを明示的に適用できます。

次のプレビューで @scope ルールを確認します。

1. プレビューでカードのテキストを検査します。
2. [スタイル] タブで、@scope ルールを見つけます。

この例では、@scope ルールによって、card クラスを持つ要素内のすべての <p> 要素に対するグローバル CSS background-color 宣言がオーバーライドされます。

@scope ルールを編集するには、ダブルクリックします。

@font-palette-values 個のアットルールを表示

@font-palette-values CSS at-rule を使用すると、font-palette プロパティのデフォルト値をカスタマイズできます。[要素] > [スタイル] に、このアットルールが専用のセクションに表示されます。

次のプレビューで @font-palette-values セクションを確認します。

1. プレビューの2 行目のテキストを検査します。
2. [スタイル] で @font-palette-values セクションを見つけます。

この例では、--New フォント パレットの値が、カラーフォントのデフォルト値をオーバーライドします。

カスタム値を編集するには、ダブルクリックします。

@position-try 個のアットルールを表示

@position-try CSS ルールと position-try-options プロパティを使用すると、要素の代替アンカー位置を定義できます。詳細については、CSS アンカー ポジショニング API の概要をご覧ください。

[要素] > [スタイル] で、次の項目が解決され、リンクされます。

• position-try-options プロパティの値を専用の @position-try --name セクションに移動しました。
• position-anchor プロパティ値と anchor() 引数を、popovertarget 属性を持つ対応する要素に変換します。

次のプレビューで position-try-options の値と @position-try セクションを検査します。

1. プレビューでサブメニューを開きます。つまり、[YOUR ACCOUNT]、[STOREFRONT] の順にクリックします。
2. プレビューで id="submenu" を含む要素を検証します。
3. [スタイル] で position-try-options プロパティを見つけて、その --bottom 値をクリックします。[スタイル] タブを選択すると、対応する @position-try セクションに移動します。
4. position-anchor 値リンクまたは同じ anchor() 引数をクリックします。[Elements] パネルで、対応する popovertarget 属性を持つ要素が選択され、[Styles] タブに要素の CSS が表示されます。

値を編集するには、ダブルクリックします。

要素のボックスモデルを表示する

要素のボックスモデルを表示するには、[スタイル] タブに移動し、アクションバーの [サイドバーを表示] ボタンをクリックします。

値を変更するには、ダブルクリックします。

要素の CSS を検索してフィルタする

[Styles] タブと [Computed] タブの [Filter] ボックスを使用して、特定の CSS セレクタ（ネストされたルールの親セレクタを含む）、プロパティ、値を検索します。

[計算値] タブで継承されたプロパティも検索するには、[すべて表示] チェックボックスをオンにします。

[計算値] タブを操作するには、[グループ] をオンにして、フィルタされたプロパティを折りたたみ可能なカテゴリにグループ化します。

フォーカスのあるページをエミュレートする

ページから DevTools にフォーカスを切り替えると、フォーカスによってトリガーされるオーバーレイ要素の一部が自動的に非表示になります。たとえば、プルダウン リスト、メニュー、日付選択ツールなどです。check_box [フォーカスのあるページをエミュレート] オプションを使用すると、このような要素をフォーカスがあるかのようにデバッグできます。

こちらのデモページで、フォーカスのあるページをエミュレートしてみましょう。

1. 入力要素にフォーカスします。その下に別の要素が表示されます。
2. DevTools を開きます。ページではなく DevTools ウィンドウがフォーカスされるため、要素が再び非表示になります。
3. [要素] > [スタイル] で、[:hov] をクリックし、check_box [フォーカスのあるページをエミュレートする] をオンにして、入力要素が選択されていることを確認します。これで、その下にある要素を検査できるようになります。

[Rendering] パネルにも同じオプションがあります。

要素をフリーズするその他の方法については、画面をフリーズして消える要素を検査するをご覧ください。

疑似クラスを切り替える

疑似クラスを切り替えるには:

1. 要素を選択します。
2. [要素] パネルで、[スタイル] タブに移動します。
3. [:hov] をクリックします。
4. 有効にする擬似クラスをオンにします。

この例では、要素が実際にホバーされていないにもかかわらず、DevTools が background-color 宣言を要素に適用していることがわかります。

[Styles] タブには、すべての要素に対して次の疑似クラスが表示されます。

• :active
• :focus
• :focus-within
• :target
• :hover
• focus-visible

また、一部の要素には独自の疑似クラスがある場合があります。このような要素を選択すると、[スタイル] タブに [特定の要素の状態を強制する] セクションが表示されます。このセクションを開いて、要素に固有の疑似クラスを有効にできます。

インタラクティブなチュートリアルについては、クラスに疑似状態を追加するをご覧ください。

継承されたハイライト疑似要素を表示する

擬似要素を使用すると、要素の特定の部分のスタイルを設定できます。ハイライト疑似要素は、「選択済み」ステータスのドキュメント部分であり、このステータスをユーザーに示すために「ハイライト表示」としてスタイル設定されます。たとえば、::selection、::spelling-error、::grammar-error、::highlight などの疑似要素があります。

仕様に記載されているように、複数のスタイルが競合する場合は、カスケードによって優先されるスタイルが決まります。

ルールの継承と優先度を理解するために、継承されたハイライト擬似要素を表示できます。

1. 以下のテキストを確認します。

   親のハイライト疑似要素のスタイルを継承しました。選択してください

2. 上記のテキストの一部を選択します。

3. [スタイル] タブで、Inherited from ::selection pseudo of... セクションまで下にスクロールします。

カスケード レイヤを表示する

カスケード レイヤを使用すると、CSS ファイルをより明示的に制御して、スタイルの詳細度の競合を防ぐことができます。これは、大規模なコードベース、デザイン システム、アプリケーションでサードパーティのスタイルを管理する場合に便利です。

カスケード レイヤを表示するには、次の要素を検証し、[要素] > [スタイル] を開きます。

[スタイル] タブで、3 つのカスケード レイヤとそのスタイル（page、component、base）を確認します。

レイヤの順序を表示するには、レイヤ名または [CSS レイヤビューを切り替え] ボタンをクリックします。

page レイヤの特異性が最も高いため、要素の背景は緑色になります。

印刷モードでページを表示する

印刷モードでページを表示するには:

1. コマンド メニューを開きます。
2. まず「Rendering」と入力して [Show Rendering] を選択します。
3. [CSS メディアをエミュレート] プルダウンで [印刷] を選択します。

[Coverage] タブで使用されている CSS と使用されていない CSS を表示する

[Coverage] タブには、ページで実際に使用されている CSS が表示されます。

1. DevTools にフォーカスがある状態で Command+Shift+P（Mac）または Control+Shift+P（Windows、Linux、ChromeOS）を押すと、コマンド メニューが開きます。

2. 「coverage」と入力します。

   

3. [カバレッジを表示] を選択します。[カバレッジ] タブが表示されます。

   

4. [再読み込み] をクリックします。 ページが再読み込みされ、[カバレッジ] タブに、ブラウザが読み込む各ファイルから使用される CSS（および JavaScript）の量が概要表示されます。

   

   緑色は使用されている CSS を表します。赤は使用されていない CSS を表します。

5. CSS ファイルをクリックすると、上のプレビューで使用されている CSS の内訳が 1 行ずつ表示されます。

   

   スクリーンショットでは、devsite-google-blue.css の 55 ～ 57 行目と 65 ～ 67 行目は未使用ですが、59 ～ 63 行目は使用されています。

印刷プレビュー モードを強制する

Force DevTools Into Print Preview Mode をご覧ください。

CSS をコピー

[Styles] タブの 1 つのプルダウン メニューから、CSS ルール、宣言、プロパティ、値を個別にコピーできます。

また、CSS プロパティを JavaScript 構文でコピーすることもできます。このオプションは、CSS-in-JS ライブラリを使用している場合に便利です。

CSS をコピーするには:

1. 要素を選択します。
2. [要素] > [スタイル] タブで、CSS プロパティを右クリックします。

3. プルダウン メニューから次のいずれかのオプションを選択します。

   • 申告をコピー。プロパティとその値を CSS 構文でコピーします。 css property: value;
   • プロパティをコピー。property 名のみをコピーします。
   • [値をコピー] をクリックします。value のみをコピーします。
   • ルールのコピー。CSS ルール全体をコピーします。 css selector[, selector] { property: value; property: value; ... }
   • 宣言を JS 形式でコピー。JavaScript 構文でプロパティとその値をコピーします。 js propertyInCamelCase: 'value'
   • [宣言をすべてコピー] をクリックします。CSS ルールのすべてのプロパティとその値をコピーします。 css property: value; property: value; ...

   • すべての宣言を JS 形式でコピー。すべてのプロパティとその値を JavaScript 構文でコピーします。 ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

   • CSS の変更をすべてコピー。[スタイル] タブで行った変更をすべての宣言にコピーします。

   • 計算された値を表示します。[計算済み] タブに移動します。

CSS を変更する

このセクションでは、[要素] > [スタイル] で CSS を変更するすべての方法を一覧表示します。

さらに、次のことが可能です。

• ページ読み込み全体で CSS をオーバーライドします。
• 変更した CSS をワークスペースのローカルソースに保存する。

コード補完を使用して CSS を変更する

グラデーションやボックス シャドウなど、CSS プロパティのより複雑な組み合わせを、正確な構文を覚えていなくても試したり、複数の関連プロパティに依存するグリッド レイアウトやフレックス レイアウトをすばやく作成したりするには、CSS プロパティの入力を開始してコード補完を使用します。

要素に CSS 宣言を追加する

宣言の順序は要素のスタイル設定に影響するため、さまざまな方法で宣言を追加できます。

• インライン宣言を追加します。要素の HTML に style 属性を追加するのと同等です。
• スタイルルールに宣言を追加する。

どのようなワークフローを使用すればよいですか。ほとんどのシナリオでは、インライン宣言ワークフローを使用することをおすすめします。インライン宣言は外部宣言よりも特異性が高いため、インライン ワークフローでは、変更が要素に期待どおりに反映されることが保証されます。詳細については、セレクタタイプをご覧ください。

要素のスタイルをデバッグしていて、宣言が異なる場所で定義された場合に何が起こるかを具体的にテストする必要がある場合は、別のワークフローを使用します。

インライン宣言を追加する

インライン宣言を追加するには:

1. 要素を選択します。
2. [スタイル] タブで、[element.style] セクションの角かっこ内をクリックします。カーソルがフォーカスされ、テキストを入力できるようになります。
3. プロパティ名を入力して Enter キーを押します。

4. そのプロパティの有効な値を入力し、Enter キーを押します。[DOM ツリー] で、要素に style 属性が追加されていることを確認できます。

   

   スクリーンショットでは、選択した要素に margin-top プロパティと background-color プロパティが適用されています。[DOM ツリー] で、要素の style 属性に反映された宣言を確認できます。

スタイルルールに宣言を追加する

既存のスタイルルールに宣言を追加するには:

1. 要素を選択します。
2. [スタイル] タブで、宣言を追加するスタイルルールの括弧内をクリックします。カーソルがフォーカスされ、テキストを入力できるようになります。
3. プロパティ名を入力して Enter キーを押します。
4. そのプロパティに有効な値を入力して、Enter キーを押します。

スクリーンショットでは、スタイルルールに新しい border-bottom-style:groove 宣言が追加されています。

宣言の名前または値を変更する

宣言の名前または値をダブルクリックして変更します。値を 0.1、1、10、100 単位で増減させるためのショートカットについては、キーボード ショートカットで列挙可能な値を変更するをご覧ください。

キーボード ショートカットを使用して列挙可能な値を変更する

宣言の列挙可能な値（font-size など）を編集するときに、次のキーボード ショートカットを使用して、値を一定量ずつ増やすことができます。

• Option+上（Mac）または Alt+上（Windows、Linux）を押すと、0.1 ずつ増加します。
• 上矢印: 値を 1 ずつ変更します。現在の値が -1 ～ 1 の場合は 0.1 ずつ変更します。
• Shift+↑ で 10 ずつ増やす。
• Shift+Command+上矢印（Mac）または Ctrl+Shift+Page Up（Windows、Linux）を押すと、値が 100 ずつ増えます。

デクリメントも可能です。前述の Up の各インスタンスを Down に置き換えます。

長さの値を変更

ポインタを使用して、幅、高さ、パディング、マージン、枠線など、長さを持つプロパティを変更できます。

長さの単位を変更するには:

1. ユニット名にカーソルを合わせると、下線が引かれます。

2. 単位名をクリックして、プルダウンから単位を選択します。

長さの値を変更するには:

1. 単位値にカーソルを合わせると、ポインタが水平方向の両方向矢印に変わります。

2. 値を増減するには、水平方向にドラッグします。

値を 10 ずつ調整するには、ドラッグ中に Shift キーを押します。

要素にクラスを追加する

要素にクラスを追加するには:

1. DOM ツリーで要素を選択します。
2. [.cls] をクリックします。
3. [新しいクラスを追加] ボックスにクラスの名前を入力します。
4. Enter キーを押します。

ライトモードとダークモードの設定をエミュレートし、自動ダークモードを有効にする

自動ダークモードを切り替えるか、ライトテーマまたはダークテーマのユーザー設定をエミュレートするには:

1. [要素] > [スタイル] タブで、 [一般的なレンダリング エミュレーションを切り替える] をクリックします。

2. プルダウン リストから次のいずれかを選択します。

   • prefers-color-scheme: light。ユーザーがライトモードを好むことを示します。
   • prefers-color-scheme: dark。ユーザーがダークモードを好むことを示します。
   • ダークモードを自動的に設定する。ダークモードを実装していない場合でも、ページがダークモードで表示されます。また、prefers-color-scheme を dark に自動的に設定します。

このプルダウンは、[レンダリング] タブの [CSS メディア特性 prefers-color-scheme をエミュレートする] オプションと [自動ダークモードを有効にする] オプションのショートカットです。

クラスを切り替える

要素のクラスを有効または無効にするには:

1. DOM ツリーで要素を選択します。
2. [Element Classes] セクションを開きます。要素にクラスを追加するをご覧ください。[Add New Class] ボックスの下には、この要素に適用されているすべてのクラスが表示されます。
3. 有効または無効にするクラスの横にあるチェックボックスを切り替えます。

スタイルルールを追加する

新しいスタイルルールを追加するには:

1. 要素を選択します。
2. [新しいスタイルルール] をクリックします。DevTools は、element.style ルールの下に新しいルールを挿入します。

このスクリーンショットでは、[New Style Rule] をクリックした後に、DevTools によって h1.devsite-page-title スタイルルールが追加されています。

ルールを追加するスタイルシートを選択する

新しいスタイルルールを追加するときに、[New Style Rule] を長押しして、スタイルルールを追加するスタイルシートを選択します。

申告を切り替える

1 つの宣言のオンとオフを切り替えるには:

1. 要素を選択します。
2. [スタイル] タブで、宣言を定義するルールにカーソルを合わせます。各宣言の横にチェックボックスが表示されます。
3. 宣言の横にあるチェックボックスをオンまたはオフにします。宣言をクリアすると、DevTools はその宣言に打ち消し線を引いて、アクティブではなくなったことを示します。

スクリーンショットでは、現在選択されている要素の color プロパティがオフになっています。

アニメーション中に ::view-transition 疑似要素を編集する

アニメーションの対応するセクションをご覧ください。

詳細については、View Transitions API を使用したスムーズでシンプルなトランジションをご覧ください。

グリッド エディタでグリッド アイテムとそのコンテンツを配置する

CSS グリッドを検証するの対応するセクションをご覧ください。

カラー選択ツールで色を変更する

カラー選択ツールで HD カラーと非 HD カラーを検査してデバッグするをご覧ください。

角度時計で角度の値を変更する

角度クロックは、CSS プロパティ値の <angle> を変更するための GUI を提供します。

角度時計を開くには:

1. 角度宣言を含む要素を選択します。

2. [スタイル] タブで、変更する transform または background 宣言を見つけます。角度の値の横にある [角度のプレビュー] ボックスをクリックします。

   

   -5deg と 0.25turn の左にある小さな時計は、角度のプレビューです。

3. プレビューをクリックして、角度時計を開きます。

   

4. 角度の値を変更するには、[Angle Clock] の円をクリックするか、マウスをスクロールして角度の値を 1 ずつ増減します。

5. 角度の値を変更するためのキーボード ショートカットが他にもあります。詳しくは、[スタイル] ウィンドウのキーボード ショートカットをご覧ください。

シャドウ エディタでボックスとテキストのシャドウを変更する

シャドー エディタは、text-shadow と box-shadow の CSS 宣言を変更するための GUI を提供します。

シャドウ エディタでシャドウを変更するには:

1. シャドー宣言を含む要素を選択します。たとえば、次の要素を選択します。

2. [Styles] タブで、text-shadow 宣言または box-shadow 宣言の横にある影 アイコンを見つけます。

   

3. シャドウ アイコンをクリックして、シャドウ エディタを開きます。

   

4. シャドウのプロパティを変更します。

   • タイプ（box-shadow のみ）。[Outset] または [Inset] を選択します。
   • X オフセットと Y オフセット。青い点をドラッグするか、値を指定します。
   • ぼかし。スライダーをドラッグするか、値を指定します。
   • スプレッド（box-shadow のみ）。スライダーをドラッグするか、値を指定します。

5. 要素に適用された変更を確認します。

Easing Editor でアニメーションと切り替え効果のタイミングを編集する

イージング エディタは、transition-timing-function と animation-timing-function の値を変更するための GUI を提供します。

イージング エディタを開くには:

1. このページの <body> 要素など、タイミング関数宣言を含む要素を選択します。
2. [スタイル] タブで、transition-timing-function、animation-timing-function 宣言、または transition の短縮プロパティの横にある紫色の アイコンを見つけます。
3. アイコンをクリックして、イージング エディタを開きます。

プリセットを使用してタイミングを調整する

タイミングを調整するには、[イージング エディタ] のプリセットを使用します。

1. イージング エディタでキーワード値を設定するには、次のいずれかの選択ボタンをクリックします。
   • 線形
   • ease-in-out
   • ease-in
   • ease-out

2. プリセット スイッチャーで、 ボタンまたは ボタンをクリックして、次のいずれかのプリセットを選択します。

   • 線形プリセット: elastic、bounce、emphasized。
   • 3 次ベジェ曲線のプリセット:

タイミング キーワード	プリセット	3 次ベジェ
イーズインアウト	In Out, Sine	cubic-bezier(0.45, 0.05, 0.55, 0.95)
	イーズイン / アウト、2 次	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	イーズイン / アウト（3 次）	cubic-bezier(0.65, 0.05, 0.36, 1)
	ファストアウト、スローイン	cubic-bezier(0.4, 0, 0.2, 1)
	インアウト、バック	cubic-bezier(0.68, -0.55, 0.27, 1.55)
イーズイン	In、Sine	cubic-bezier(0.47, 0, 0.75, 0.72)
	In, Quadratic	cubic-bezier(0.55, 0.09, 0.68, 0.53)
	インチ、立方	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	内側、背面	cubic-bezier(0.6, -0.28, 0.74, 0.05)
	高速アウト、線形イン	cubic-bezier(0.4, 0, 1, 1)
イーズアウト	アウト、サイン	cubic-bezier(0.39, 0.58, 0.57, 1)
	アウト、2 次	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	Out, Cubic	cubic-bezier(0.22, 0.61, 0.36, 1)
	リニアアウト、スローイン	cubic-bezier(0, 0, 0.2, 1)
	外側、内側	cubic-bezier(0.18, 0.89, 0.32, 1.28)

カスタム タイミングを構成する

タイミング関数のカスタム値を設定するには、線上のコントロール ポイントを使用します。

• 線形関数の場合は、線の任意の場所をクリックしてコントロール ポイントを追加し、ドラッグします。ダブルクリックするとポイントが削除されます。

  

• Cubic Bezier 関数の場合は、コントロール ポイントのいずれかをドラッグします。

  

変更を行うと、エディタ上部の [プレビュー] でボールのアニメーションがトリガーされます。

（試験運用版）CSS の変更をコピーする

このテストを有効にすると、[スタイル] タブで CSS の変更が緑色でハイライト表示されます。

1 つの CSS 宣言の変更をコピーするには、ハイライト表示された宣言にカーソルを合わせ、 [Copy] ボタンをクリックします。

宣言全体で CSS の変更をすべて一度にコピーするには、任意の宣言を右クリックして [Copy all CSS changes] を選択します。

また、[変更] タブで、行った変更を追跡することもできます。