このページは Cloud Translation API によって翻訳されました。

CSS 機能リファレンス

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

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

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

要素を選択する

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

選択された要素の例。

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

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

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

ビューポートで要素を右クリックして、[検証] を選択します。
DevTools で、[要素を選択] をクリックするか、Command+Shift+C（Mac）または Ctrl+Shift+C（Windows、Linux）を押して、ビューポートで要素をクリックします。
DevTools で、[DOM Tree] の要素をクリックします。
DevTools で、コンソールで document.querySelector('p') のようなクエリを実行し、結果を右クリックして、[Reveal in Elements パネル] を選択します。

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 のみを表示するをご覧ください。

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

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

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

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

CSS の at-rules を表示

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

@property
@supports
@scope
@font-palette-values

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

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

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

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

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

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

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

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

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

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

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

注: @scope at-rule 機能は試験運用版です。テストするには、chrome://flags/#enable-experimental-web-platform-features で試験運用版のウェブプラットフォーム機能のフラグを有効にします。そうしないと、次のプレビューが機能しません。

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

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

@scope ルール。

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

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

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

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

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

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

@font-palette-values ルール。

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

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

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

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

ボックスモデルの図。

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

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

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

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

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

継承されたプロパティの [計算済み] タブでのフィルタリング。

[計算済み] タブに移動するには、[グループ化] チェックボックスをオンにして、フィルタした宿泊施設を折りたたみ可能なカテゴリに分類します。

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

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

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

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

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

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

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

疑似クラスを切り替える

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

要素を選択します。
[要素] パネルで [スタイル] タブに移動します。
[:hov] をクリックします。
有効にする疑似クラスにチェックを入れます。

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

ビューポートでは、実際に要素にカーソルを合わせなくても、DevTools によって background-color 宣言が要素に適用されていることがわかります。

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

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

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

仕様で説明したように、複数のスタイルが競合する場合は、カスケードが最適なスタイルを決定します。

注: この機能を有効にするには、--enable-blink-features=HighlightInheritance フラグを指定して Chrome を実行します。

ルールの継承と優先度をより深く理解するには、継承されたハイライトの疑似要素を確認します。

下のテキストを調べます。

親のハイライト擬似要素のスタイルを継承しました。私を選んでください！
上のテキストの一部を選択してください。
[スタイル] タブで、下にスクロールして Inherited from ::selection pseudo of... セクションを見つけます。

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

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

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

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

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

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

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

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

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

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

コマンドメニューを開きます。
「Rendering」と入力し、[Show Rendering] を選択します。
[Emulate CSS Media] プルダウンで [print] を選択します。

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

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

DevTools にフォーカスした状態で Command+Shift+P（Mac）または Ctrl+Shift+P（Windows、Linux、ChromeOS）を押して、コマンドメニューを開きます。
「coverage」と入力します。
[Show Coverage] を選択します。[カバレッジ] タブが表示されます。
[ 再読み込み] をクリックします。ページが再読み込みされると、[カバレッジ] タブに、ブラウザが読み込む各ファイルでの CSS（および JavaScript）の使用量の概要が表示されます。

緑色は CSS が使用されていることを表します。赤は使用されていない CSS を表します。
CSS ファイルをクリックすると、その CSS で使用されている CSS の内訳を上のプレビューで確認できます。

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

印刷プレビューモードを適用

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

CSS をコピー

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

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

CSS をコピーするには:

要素を選択します。
[要素] > [スタイル] タブで、CSS プロパティを右クリックします。
プルダウンメニューから、次のいずれかのオプションを選択します。
- 宣言をコピー。プロパティとその値を 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 宣言を追加する

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

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

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

要素のスタイルをデバッグしていて、宣言が異なる場所で定義されているときの挙動を具体的にテストする必要がある場合は、もう一方のワークフローを使用します。

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

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

要素を選択します。
[スタイル] タブで、element.style セクションのかっこ内をクリックします。カーソルがフォーカスされ、テキストを入力できるようになります。
プロパティ名を入力して、Enter キーを押します。
そのプロパティの有効な値を入力して、Enter キーを押します。[DOM Tree] で、style 属性が要素に追加されていることを確認できます。

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

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

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

要素を選択します。
[スタイル] タブで、宣言を追加するスタイルルールの角かっこの内側をクリックします。カーソルにフォーカスが合わせられ、テキストを入力できるようになります。
プロパティ名を入力して、Enter キーを押します。
そのプロパティの有効な値を入力して、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 で置き換えるだけです。

長さの値を変更する

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

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

ユニット名にカーソルを合わせると、下線が表示されます。
ユニット名をクリックして、プルダウンからユニットを選択します。

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

単位値にカーソルを合わせると、ポインタが水平の二重矢印に変わります。
横にドラッグして値を増減します。

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

要素にクラスを追加する

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

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

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

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

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

[要素] > [スタイル] タブで、 [共通のレンダリングエミュレーションを切り替える] をクリックします。
プルダウンリストから次のいずれかを選択します。
- prefers-color-scheme: light を返します。ユーザーがライトモードを優先することを示します。
- prefers-color-scheme: ダークユーザーがダークモードを選択することを示します。
- 自動ダークモードダークモードを実装していない場合でも、ページがダークモードで表示されます。また、prefers-color-scheme を自動的に dark に設定します。

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

クラスを切り替える

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

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

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

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

要素を選択します。
[新しいスタイル規則] をクリックします。DevTools によって、element.style ルールの下に新しいルールが挿入されます。

新しいスタイルルールを追加しています。

スクリーンショットで、DevTools で [New Style Rule] をクリックすると h1.devsite-page-title スタイルルールが追加されます。

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

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

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

申告を切り替える

1 つの申告をオンまたはオフにするには:

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

宣言を切り替える。

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

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

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

詳しくは、View Transitions API を使用したスムーズでシンプルな遷移をご覧ください。

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

対応する CSS グリッドを検査するをご覧ください。

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

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

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

角度時計の GUI では、CSS プロパティ値の <angle> を変更できます。

Angle Clock を開くには:

角度の宣言で要素を選択します。
[Styles] タブで、変更する transform 宣言または background 宣言を見つけます。角度値の横にある [Angle Preview] ボックスをクリックします。

-5deg と 0.25turn の左側にある小さな時計は、角度のプレビューです。
プレビューをクリックして [Angle Clock] を開きます。
角度の値を変更するには、[Angle Clock] 円をクリックするか、マウスをスクロールして角度値を 1 ずつ増減します。
角度の値を変更するためのキーボードショートカットは他にもあります。詳しくは、[スタイル] ペインのキーボードショートカットをご覧ください。

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

Shadow Editor には、text-shadow および box-shadow CSS 宣言を変更するための GUI が用意されています。

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

シャドウ宣言で要素を選択します。たとえば、次の要素を選択します。
[Styles] タブで、text-shadow 宣言または box-shadow 宣言の隣にあるシャドウアイコンを探します。
シャドウアイコンをクリックして、シャドウエディタを開きます。
シャドウのプロパティを変更します。
- [タイプ]（box-shadow のみ）（[アウトセット] または [インセット]）を選択します。
- X オフセットと Y オフセット。青い点をドラッグするか、値を指定します。
- ぼかし。スライダーをドラッグするか、値を指定します。
- スプレッド（box-shadow の場合のみ）: スライダーをドラッグするか、値を指定します。
要素に適用された変更を確認します。

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

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

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

このページの <body> 要素のように、時間関数を宣言している要素を選択します。
[スタイル] タブで、transition-timing-function、animation-timing-function 宣言、または transition 短縮プロパティの横にある紫色のアイコンを探します。
アイコンをクリックしてイージングエディタを開きます。

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

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

イージングエディタでキーワード値を設定するには、次のいずれかの選択ツールボタンをクリックします。
- リニア
- ease-in-out
- イーズイン
- ease-out
プリセットの切り替えで、またはボタンをクリックして、次のいずれかのプリセットを選択します。
- 線形プリセット: elastic、bounce、emphasized。
- Cubic Bezier プリセット:

速度に関するキーワード	プリセット	キュービックベジェ
イーズインアウト	インアウト、サイン	`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)`
	Fast Out、Slow In	`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、二次関数	`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)`
	出力、二次関数	`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)`

カスタム速度を設定する

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

線形関数の場合は、ライン上の任意の場所をクリックしてコントロールポイントを追加し、ドラッグします。ダブルクリックするとポイントを削除できます。
キュービックベジェ関数の場合は、コントロールポイントのいずれかをドラッグします。

なんらかの変更を加えると、エディタの上部にある [プレビュー] でボールのアニメーションがトリガーされます。

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

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

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

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

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

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

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