CSS 機能リファレンス

Kayce Basques
Kayce Basques
X GitHub
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

要素を選択する

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

選択された要素の例。

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

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

要素を選択する方法はたくさんあります。

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

CSS を表示する

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

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

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

以下にその一部を示します。

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

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

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

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

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

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

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

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

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

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

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

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

一致したセレクタの特異性の重みを示すツールチップ。

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

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

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

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

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

[スタイル] タブの CSS についてをご覧ください。

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

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

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

[Computed] タブ。

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

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

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

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

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

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

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

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

CSS の @ 規則を表示する

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

@property @ 規則を表示する

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

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

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

@supports @ 規則を表示する

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

@supports at ルールを表示します。

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

@scope @ 規則を表示する

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

新しい @scope at-rules は、CSS Cascading and Inheritance Level 6 仕様の一部です。これらのルールを使用すると、CSS スタイルのスコープを設定できます。つまり、特定の要素にスタイルを明示的に適用できます。

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

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

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

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

position-try-options プロパティ、@position-try セクション、ポップオーバー ターゲット属性を持つ要素。

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

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

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

ボックスモデルの図。

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

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

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

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

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

[Computed] タブで継承されたプロパティをフィルタリングする。

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

フィルタされたプロパティをグループ化します。

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

ページから 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 メディアをエミュレート] プルダウンで [印刷] を選択します。

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

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

  1. デベロッパー ツールにフォーカスがある状態で Command+Shift+P（Mac）または Ctrl+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 行目は使用されています。

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

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

CSS をコピー

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

また、CSS プロパティを JavaScript 構文でコピーすることもできます。このオプションは、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 を変更する

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

コード補完を使用して CSS プロパティを追加する。

要素に CSS 宣言を追加する

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

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

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

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

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

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

  4. そのプロパティの有効な値を入力して、Enter キーを押します。[DOM Tree] で、要素に 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. [要素クラス] セクションを開きます。要素にクラスを追加するをご覧ください。[Add New Class] ボックスの下には、この要素に適用されているすべてのクラスが表示されます。
  3. 有効または無効にするクラスの横にあるチェックボックスを切り替えます。

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

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

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

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

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

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

新しいスタイルルールを追加する場合は、[新しいスタイルルール] 新しいスタイルルール。 をクリックして長押しし、スタイルルールを追加するスタイルシートを選択します。

スタイルシートの選択。

申告を切り替える

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

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

申告の切り替え。

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

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

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

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

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

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

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

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

角度クロックで角度の値を変更する

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

角度計を開くには:

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

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

    角度のプレビュー。

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

  3. プレビューをクリックして Angle Clock を開きます。

    角度の時計。

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

  5. 角度の値を変更するためのキーボード ショートカットが追加されました。詳しくは、[スタイル] ペインのキーボード ショートカットをご覧ください。

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

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

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

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

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

    シャドウ アイコン。

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

    シャドウ エディタ。

  4. 影のプロパティを変更します。

    • Type（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. イージング エディタでキーワード値を設定するには、ピッカーボタンのいずれかをクリックします。
    • linear 線形ボタン。
    • 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)
In Out, Quadratic cubic-bezier(0.46, 0.03, 0.52, 0.96)
In Out、Cubic cubic-bezier(0.65, 0.05, 0.36, 1)
Fast Out, Slow In cubic-bezier(0.4, 0, 0.2, 1)
In Out, Back 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)
In、Cubic cubic-bezier(0.55, 0.06, 0.68, 0.19)
イン、バック cubic-bezier(0.6, -0.28, 0.74, 0.05)
Fast Out, Linear In cubic-bezier(0.4, 0, 1, 1)
イーズアウト Out, Sine cubic-bezier(0.39, 0.58, 0.57, 1)
Out、Quadratic cubic-bezier(0.25, 0.46, 0.45, 0.94)
Out、Cubic cubic-bezier(0.22, 0.61, 0.36, 1)
Linear Out, Slow In cubic-bezier(0, 0, 0.2, 1)
Out, Back cubic-bezier(0.18, 0.89, 0.32, 1.28)

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

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

  • 線形関数の場合は、線上の任意の場所をクリックして制御点を追加し、ドラッグします。ダブルクリックしてポイントを削除します。

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

  • Cubic Bezier 関数の場合は、制御点のいずれかをドラッグします。

    3 次ベジェ関数の制御点をドラッグする。

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

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

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

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

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

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

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

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