CSS 機能リファレンス

Kayce Basques
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

要素を選択する

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

選択された要素の例。

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

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

要素を選択するにはさまざまな方法があります。

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

CSS を表示

[要素] > [スタイル] タブと [計算済み] タブを使用して、CSS ルールを表示し、CSS の問題を診断します。

[スタイル] タブには、さまざまな場所にあるさまざまな場所へのリンクが表示されます。以下に例を示します。

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

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

さまざまなリンクがハイライト表示されています。

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

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

[要素] > [スタイル] では、特定の要素にカーソルを合わせると、有用な情報を示すツールチップが表示されます。

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

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

CSS プロパティに関するドキュメントを含むツールチップ。

[詳細] をクリックして、このプロパティの MDN CSS リファレンスをご覧ください。

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

再度オンにするには、設定] をタップします。 [設定] > [設定] > [要素] > チェックボックス。 [CSS ドキュメントのツールチップを表示する] をオンにします。

セレクタの特定度を表示する

セレクタにカーソルを合わせると、特定性の重みが示されたツールチップが表示されます。

一致したセレクタの特定度重みを含むツールチップ。

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

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

ツールチップ内のカスタム プロパティの値。

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

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

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

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

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

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

[計算済み] タブ。

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

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

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

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

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

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

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

[スタイル] タブの [... から継承] セクションを表示します。

CSS アットルールを表示する

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

@property アットルールを表示する

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

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

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

@supports アットルールを表示する

[スタイル] タブには、要素に適用されている場合に CSS アットルール @supports が表示されます。たとえば、次の要素を調べます。

@supports アットルールを表示します。

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

@scope 個の At-Rule を表示

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

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

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

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

@scope ルール。

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

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

@font-palette-values 個の At-Rule を表示

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

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

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

@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 セクションを確認します。

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

position-try-options プロパティ、@position-try セクション、popover target 属性が指定された要素

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

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

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

ボックスモデルの図。

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

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

特定の CSS プロパティまたは値を検索するには、[スタイル] タブと [計算済み] タブの [フィルタ] ボックスを使用します。

[スタイル] タブのフィルタリング。

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

[計算済み] タブで継承されたプロパティをフィルタする。

[計算済み] タブを操作するには、[グループ] チェックボックスをオンにして、フィルタされたプロパティを折りたたみ可能なカテゴリに分類します。

フィルタされたプロパティのグループ化。

フォーカスされているページをエミュレートする

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

こちらのデモページで、フォーカスのあるページをエミュレートしてみてください。

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

[フォーカスのあるページをエミュレート] オプションをオンにする前と後。

[レンダリング] パネルでも同じオプションを使用できます。

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

疑似クラスを切り替える

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

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

要素のホバー疑似状態を切り替える。

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

[スタイル] タブには、すべての要素について以下の疑似クラスが表示されます。

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

「textarea」要素の [特定の要素の状態を強制] セクション。

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

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

擬似要素を使用すると、要素の特定の部分にスタイルを設定できます。ハイライト疑似要素は、ステータスが「選択済み」のドキュメント部分であり、このステータスをユーザーに示すために「ハイライト表示」のスタイルが設定されています。たとえば、::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 メディアをエミュレート] プルダウンで [print] を選択します。

[カバレッジ] タブで使用済みと未使用の CSS を確認する

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

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

  2. coverage を入力します。

    コマンド メニューから [カバレッジ] タブを開きます。

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

    [カバー率] タブ。

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

    使用されている CSS（および JavaScript）と使用されていない CSS（および JavaScript）の概要。

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

  5. 上のプレビューで CSS ファイルをクリックすると、使用される CSS が行ごとに分類されて表示されます。

    使用されている CSS と使用されていない CSS の行ごとの分類。

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

印刷プレビュー モードを強制的に表示する

DevTools を強制的に印刷プレビュー モードにするをご覧ください。

CSS をコピー

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

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

CSS をコピーするには:

  1. 要素を選択します。
  2. [要素] > [スタイル] タブで、CSS プロパティを右クリックします。 [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 宣言を追加する

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

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

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

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

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

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

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

    インライン宣言を追加。

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

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

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

  1. 要素を選択します。
  2. [Styles] タブで、宣言を追加するスタイルルールのかっこ内をクリックします。カーソルがフォーカスされ、テキストを入力できるようになります。
  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+Up（Mac）または Ctrl+Shift+PageUp（Windows、Linux）を押すと、値が 100 ずつ増加します。

減算も可能です。前述の Up の各インスタンスを Down に置き換えるだけです。

長さの値を変更する

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

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

  1. ユニット名にカーソルを合わせると、アンダーラインが引かれていることがわかります。

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

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

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

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

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

要素にクラスを追加する

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

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

[要素クラス] セクション。

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

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

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

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

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

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

クラスを切り替える

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

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

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

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

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

新しいスタイルルールの追加。

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

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

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

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

申告を切り替える

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. 角度の値を変更するには、角度時計の円をクリックするか、マウスをスクロールして、角度の値を 1 ずつ増減します。

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

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

シャドウ エディタには、text-shadow と box-shadow の CSS 宣言を変更するための GUI が用意されています。

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

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

  2. [Styles] タブで、text-shadow 宣言または box-shadow 宣言の隣にある影 シャドウ。 アイコンを探します。

    影のアイコン。

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

    シャドウ エディタです。

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

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

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

イージング エディタでアニメーションと遷移のタイミングを編集する

イージング エディタには、transition-timing-function と animation-timing-function の値を変更するための GUI が用意されています。

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

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

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

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

  1. エアシング エディタでキーワード値を設定するには、次のいずれかの選択ツールボタンをクリックします。
    • 線形 リニアボタン。
    • ease-in-out Ease-in-out ボタン。
    • イーズイン 緩やかに開始ボタン。
    • ease-out 減衰ボタン。

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

    • リニア プリセット: elastic、bounce、または emphasized。
    • 3 次ベジェのプリセット:
速度キーワード プリセット 3 次ベジェ曲線
イーズインアウト インアウト、サイン cubic-bezier(0.45, 0.05, 0.55, 0.95)
イン / アウト、二次関数 cubic-bezier(0.46, 0.03, 0.52, 0.96)
イン / アウト、キュービック 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)
次, 二次方程式 cubic-bezier(0.55, 0.09, 0.68, 0.53)
In、Cubic 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)
外向き、二次曲線 cubic-bezier(0.25, 0.46, 0.45, 0.94)
外出、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)

カスタム速度を設定する

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

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

    一次関数のコントロール ポイントをドラッグしている様子。

  • 3 次ベジェ曲線関数の場合は、いずれかのコントロール ポイントをドラッグします。

    3 次ベジェ関数のコントロール ポイントをドラッグする。

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

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

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

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

CSS 宣言の変更をコピーする。

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

CSS の変更をすべてコピーします。

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