CSS 機能リファレンス

Kayce Basques
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

Chronicle DevTools のこの包括的なリファレンスでは、 CSS の表示や変更を行えます。

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

要素を選択する

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

選択した要素の例。

スクリーンショットの [DOM Tree] で青色でハイライト表示されている h1 要素が、選択された要素です。 右側の [スタイル] タブに、要素のスタイルが表示されます。左にある要素は ただし、これは DOM でマウスがカーソルを合わせている場合のみ Tree。

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

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

  • ビューポートで要素を右クリックし、[検証] を選択します。
  • DevTools で、[要素を選択] をクリックします。 要素を選択する または Command+Shift+C キー（Mac）または Ctrl+Shift+C キー（Windows、Linux）を押しながら、 作成します。
  • DevTools で、[DOM Tree] の要素をクリックします。
  • 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 のみを表示する

[スタイル] タブには、要素に適用されるすべてのルールが表示されます。これには、 オーバーライドされます。オーバーライドされた宣言が不要な場合は、Computed タブをクリックすると、実際に要素に適用されている CSS のみが表示されます。

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

[計算済み] タブ。

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

[計算済み] タブの CSS を理解するをご覧ください。

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

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

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

[Computed] タブの [Show All] チェックボックスをオンにします。詳細については、実際に設定されている CSS を 適用されたプロパティです。

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

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

CSS AT ルールの表示

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

@property 個の At-Rule を表示

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

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

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

@supports 個の At-Rule を表示

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

@supports at-rules を表示します。

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

@scope 個の At-Rule を表示

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

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

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

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

@scope ルール。

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

@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 個の At-Rule を表示

@position-try CSS ルールと position-try-options プロパティを使用すると、要素の代替アンカー位置を定義できます。詳しくは、CSS Anchor Positioning API の概要をご覧ください。

要素 >スタイルは、以下を解決してリンクします。

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

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

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

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

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

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

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

ボックスモデルの図

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

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

特定の CSS を検索するには、[スタイル] タブと [計算済み] タブの [フィルタ] ボックスを使用します 定義できます。

[スタイル] タブをフィルタリングする。

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

Computed タブでの継承されたプロパティのフィルタリング。

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

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

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

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

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

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

[フォーカスしたページをエミュレート] をオンにする前と後選択します。

[レンダリング] パネルに同じオプションも表示されます。

疑似クラスを切り替える

:active、:focus、:focus-within、:target、:hover、:visited、focus-visible などの疑似クラスを切り替えるには:

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

要素でのカーソルを合わせた疑似状態の切り替え。

ビューポートでは、実際に要素がマウスオーバーされていなくても、DevTools によって background-color 宣言が要素に適用されていることがわかります。

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

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

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

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

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

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

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

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

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

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

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

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

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

[Styles] タブに、3 つのカスケードレイヤとそのスタイル（page、component、base）が表示されます。

レイヤをカスケードします。

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

page レイヤの特異度が最も高いため、要素の背景は緑色です。

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

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

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

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

  1. Command+Shift+P キー（Mac）または Ctrl+Shift+P キー（Windows、Linux、ChromeOS）で DevTools を有効にします コマンド メニューを開きます。

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

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

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

    [カバレッジ] タブ

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

    CSS（および JavaScript）の使用量と未使用に関する概要です。

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

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

    使用済み CSS と未使用の CSS の行ごとの内訳。

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

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

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

CSS をコピー

[スタイル] タブのプルダウン メニューから、個別の 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. [スタイル] タブで、追加するスタイルルールの角かっこ内をクリックします。 あります。カーソルがフォーカスされ、テキストを入力できるようになります。
  3. プロパティ名を入力し、Enter キーを押します。
  4. プロパティの有効な値を入力し、Enter キーを押します。

宣言の値の変更。

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

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

宣言の名前または値をダブルクリックして変更します。詳細は、Terraform で列挙可能な値を変更する キーボード ショートカット: 値を 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+PageUp （Windows、Linux など）を使用して、値を 100 ずつ増やします。

デクリメントも機能します。前述の Up の各インスタンスを 下。

長さの値を変更する

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

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

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

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

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

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

  2. 横にドラッグして値を増減します。

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

要素にクラスを追加する

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

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

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

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

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

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

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

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

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

クラスを切り替える

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

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

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

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

  1. 要素を選択します。
  2. [新しいスタイル規則] をクリックします。 新しいスタイル規則。。DevTools によって element.style ルールの下に新しいルールを追加します。

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

スクリーンショットでは、[New Style Rule] をクリックすると、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. シャドウのプロパティを変更します。

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

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

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

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

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

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

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

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

  1. キーワードの値を設定するには、イージング エディタでいずれかの選択ツールボタンをクリックします。 <ph type="x-smartling-placeholder">
      </ph>
    • 線形 リニアボタン。
    • 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)
イーズイン イン、サイン 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)
ファストアウト、リニア入力 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-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 の変更をすべてコピーします。

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