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 の簡単な説明とツールチップを表示するには、[スタイル] タブでプロパティ名にカーソルを合わせます。
[詳細] をクリックして、このプロパティの 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
のアットルールを表示
@property
CSS @ ルールを使用すると、JavaScript を実行しなくても CSS カスタム プロパティを明示的に定義してスタイルシートに登録できます。
[スタイル] タブで該当するプロパティの名前にカーソルを合わせると、プロパティの値、記述子、登録へのリンクを示すツールチップが、[スタイル] タブの下部にある折りたたみ可能な @property
セクションに表示されます。
@property
ルールを編集するには、ルールの名前または値をダブルクリックします。
@supports
のアットルールを表示
@supports
CSS @ ルールが要素に適用されている場合、そのルールが [スタイル] タブに表示されます。たとえば、次の要素を調べます。
ブラウザが lab()
関数をサポートしている場合、要素は緑色、サポートしていない場合には紫色になります。
@scope
のアットルールを表示
[スタイル] タブには、要素に適用されている CSS の @scope
@ ルールが表示されます。
新しい @scope
at-rules は CSS のカスケーディングと継承レベル 6 の仕様の一部です。これらのルールを使用すると、CSS スタイルの範囲を設定できます。つまり、特定の要素にスタイルを明示的に適用できます。
次のプレビューで @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
セクションを見つけます。
この例では、--New
フォントパレットの値により、カラーフォントのデフォルト値がオーバーライドされます。
カスタム値を編集するには、値をダブルクリックします。
@position-try
のアットルールを表示
@position-try
CSS ルールと position-try-options
プロパティを使用すると、要素の代替アンカー位置を定義できます。詳しくは、CSS Anchor Positioning API の紹介をご覧ください。
[要素] > [スタイル] は、position-try-options
の値を解決し、各オプションを専用の @position-try --name
セクションにリンクします。
次のプレビューで position-try-options
値と @position-try
セクションを調べます。
- プレビューでサブメニューを開きます([YOUR ACCOUNT]、[STOREFRONT] の順にクリックします)。
- プレビューで、
id="submenu"
を使用して要素を検査します。 - [スタイル] で、
position-try-options
プロパティを見つけて、その--bottom
値をクリックします。[Styles] タブには、対応する@position-try
セクションが表示されます。
セクションの値を編集するには、値をダブルクリックします。
要素のボックスモデルを表示する
要素のボックスモデルを表示するには、[スタイル] タブに移動し、アクションバーの [サイドバーを表示] ボタンをクリックします。
値を変更するには、値をダブルクリックします。
要素の 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
などです。
仕様で説明したように、複数のスタイルが競合する場合は、カスケードが最適なスタイルを決定します。
ルールの継承と優先度をより深く理解するには、継承されたハイライトの疑似要素を確認します。
-
親のハイライト擬似要素のスタイルを継承しました。私を選んでください!
上のテキストの一部を選択してください。
[スタイル] タブで、下にスクロールして
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 を変更する方法について説明します。
さらに、次のことが可能です。
要素に 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 の変更を宣言全体で一度にコピーするには、宣言を右クリックして [Copy all CSS changes] を選択します。
また、[変更] タブで行った変更を追跡できます。