スタイルの編集

By Kayce Basques

Technical Writer, Chrome DevTools & Lighthouse

By Meggin Kearney

Meggin is a Tech Writer

[Styles] ペインを使用して、要素に関連付けられている CSS スタイルを変更します。

[Styles] ペイン

TL;DR

[Styles] ペインでは、既存のスタイルの編集、新しいスタイルの追加、スタイルのルールの追加など、さまざまな CSS の変更をローカルで行うことができます。
スタイルを保持する（再読み込み時にスタイルが解除されないようにする）場合は、スタイルを開発ワークスペースに保持する必要があります。

要素に適用されたスタイルの調査

要素を選択して、スタイルを調査します。 [Styles] ペインに、選択された要素に適用される CSS ルールが、優先順位が高いものから低いものの順に表示されます。

最上位には element.style があります。これらは、スタイルプロパティ（たとえば、<p style="color:green">）を使用して要素に直接適用されるか、DevTools で適用されるスタイルです。
その下には、要素に一致する任意の CSS ルールがあります。たとえば、以下のスクリーンショットでは、選択された要素が tools.css で定義されたルールから line-height:24px を受け取ります。
その下には継承されたスタイルがあります。これには、選択された要素の祖先に一致する、任意の継承可能なスタイルルールが含まれます。たとえば、以下のスクリーンショットでは、選択された要素が user agent stylesheet から display:list-item を継承します。

以下の画像のラベルは、画像の下にある箇条書き項目に対応しています。

注釈付きの [Styles] ペイン

要素に一致するセレクターに関連付けられているスタイルです。
ユーザーエージェントスタイルシートは明確にラベルで示され、多くの場合ウェブページの CSS でオーバーライドされます。
カスケードルールでオーバーライドされたルールは取り消し線で示されます。
継承されたスタイルは [Inherited from <NODE>] ヘッダーの下にグループとして表示されます。ヘッダーで DOM ノードをクリックすると、DOM ツリービュー内のノードの位置にナビゲートされます（CSS 2.1 プロパティの表に、どのプロパティが継承可能かが示されています）。
灰色で表示されているエントリは、定義されておらず、実行時に計算されるルールです。

スタイルをデバッグするには、カスケードと継承の動作を理解することが不可欠です。カスケードは、ルールが重複した場合に、どのルールが優先されるかを決定するために CSS の宣言に重み付けする方法に関するものです。継承は、HTML 要素がそれを含む要素（祖先）から CSS プロパティを継承する方法に関するものです。詳細については、カスケードに関する W3C ドキュメントをご覧ください。

セレクターの影響を受ける要素の調査

[Styles] ペインで CSS セレクターにカーソルを合わせると、セレクターの影響を受けるすべての要素が表示されます。たとえば、以下のスクリーンショットでは、セレクター .wf-tools-guide__section-link a の上にカーソルがあります。ライブページで、このセレクターの影響を受けるすべての <a> 要素を確認できます。

セレクターの影響を受ける要素の表示

注: この機能では、ビューポート内にある要素のみがハイライト表示されます。ビューポートの外にある他の要素もセレクターの影響を受けている可能性があります。

CSS クラスの追加、有効化、および無効化

[.cls] ボタンをクリックして、現在選択されている要素に関連付けられているすべての CSS クラスを表示します。ここから、次の操作を実行できます。

現在要素に関連付けられているクラスの有効化または無効化。
要素への新しいクラスの追加。

クラスペイン

既存のプロパティ名または値の編集

CSS プロパティ名または値をクリックして編集します。名前または値がハイライト表示されている状態で、Tab キーを押すと、次のプロパティ、名前、またはセレクターに移動します。 Shift キーを押したまま Tab キーを押すと、逆方向に移動します。

数値の CSS プロパティ値を編集する場合は、以下のキーボードショートカットを使用して、値を増加および減少させます。

↑キーと↓キーを押すと、値が 1 ずつ（または現在の値が -1 と 1 の間の場合は 0.1 ずつ）増加および減少します。
Alt+↑キーと Alt+↓キーを押すと、値が 0.1 ずつ増加および減少します。
Shift+↑キーを押すと 10 ずつ増加し、Shift+↓キーを押すと 10 ずつ減少します。
Shift+PageUp キー（Windows、Linux）または Shift+Function+↑キー（Mac）を押すと、値が 100 ずつ増加します。 Shift+PageDown キー（Windows、Linux）または Shift+Function+↓キー（Mac）を押すと、値が 100 ずつ減少します。

新しいプロパティ宣言の追加

編集可能な CSS ルール内で空のスペースをクリックして、新しい宣言を作成します。宣言を入力するか、CSS を [Styles] ペインに貼り付けます。プロパティとその値が解析され、正しい項目に入力されます。

注: スタイルの宣言を有効または無効にするには、その隣にあるチェックボックスをオンまたはオフにします。

スタイルルールの追加

新規スタイルルール（新規スタイルルールボタン）ボタンをクリックして、新しい CSS ルールを追加します。

ボタンを押し続けて、ルールを追加するスタイルシートを選択します。

動的スタイル（疑似クラス）の追加または削除

動的な疑似クラスセレクター（:active、:focus、:hover、:visited など）を手動で要素に設定できます。

これらの動的な状態を要素に設定するには、次の 2 つの方法があります。

[Elements] パネル内で要素を右クリックし、メニューから対象の疑似クラスを選択して有効または無効にします。
[Elements] パネルで要素を選択し、[Styles] ペインで [:hov] ボタンをクリックし、チェックボックスを使用して、現在選択されている要素に対してセレクターを有効または無効にします。

スタイルルールへの background-color または color の追加

[Styles] ペインでは、color 宣言と background-color 宣言をスタイルルールに追加するためのショートカットを使用できます。

スタイルルールの右下に、スリードットアイコンがあります。これを表示するには、スタイルルールにカーソルを合わせる必要があります。

このアイコンにカーソルを合わせると、color 宣言（ color 宣言の追加）または background-color 宣言（ background-color 宣言の追加）を追加するためのボタンが表示されます。これらのボタンのいずれかをクリックして、スタイルルールに宣言を追加します。

カラーピッカーを使用した色の変更

カラーピッカーを開くには、[Styles] ペインで色を定義する CSS 宣言（color: blue など）を見つけます。宣言値の左側に、小さい色付きの正方形があります。正方形の色は、宣言値に対応しています。この小さい正方形をクリックすると、カラーピッカーが開きます。

カラーピッカーを開く

カラーピッカーは、複数の方法で操作できます。

スポイト。詳細については、スポイトを参照してください。
現在の色。現在の値のビジュアル表現です。
現在の値。現在の色の 16 進数、RGBA、または HSL 表現です。
カラーパレット。詳細については、カラーパレットを参照してください。
濃淡セレクター。
色相セレクター。
不透明度セレクター。
色値セレクター。クリックすると、RGBA、HSL、16 進数が切り替わります。
カラーパレットセレクター。クリックして異なるテンプレートを選択します。

注釈付きのカラーピッカー

スポイト

スポイトボタンをクリックして有効にし（有効になったスポイト）、ライブページで色にカーソルを合わせてクリックすると、現在選択されている宣言値が、カーソルを合わせている色に設定されます。

スポイトの動作

カラーパレット

カラーピッカーでは、以下のカラーパレットを使用できます。

ページカラー。ページの CSS から自動的に生成される色のセット。
マテリアルデザイン。マテリアルデザインの仕様に準拠する色のコレクション。
カスタム。ユーザーが選択した任意の色のセット。DevTools では、ページを移動しても、ユーザーが削除するまでカスタムパレットが保存されます。

カスタムカラーパレットの変更

プラス記号ボタンを押すと、現在の色がパレットに追加されます。色を押し続けて別の位置にドラッグすると移動できます。ごみ箱アイコンにドラッグすると削除されます。色を右クリックして [Remove color] を選択すると削除されます。 [Remove all to the right] を選択すると、現在選択している色の右側にある色すべてが削除されます。カラーパレット領域内の任意の場所を右クリックし、[Clear template] を選択すると、テンプレートの色がすべて削除されます。

CSS カスタムプロパティ（CSS 変数）の表示と編集

CSS カスタムプロパティ（非公式な名称は CSS 変数）を定義または使用する宣言は、他の宣言と同様に表示および編集できます。

カスタムプロパティは通常、:root セレクターで定義されます。 :root で定義されたカスタムプロパティを表示するには、html 要素を調べます。

:root で定義されたカスタムプロパティ

ただし、必ずしも :root セレクターでカスタムプロパティを定義する必要はありません。他の要素で定義した場合、定義を表示するには、カスタムプロパティを定義した要素を調べます。

カスタムプロパティを使用する宣言値は、他の宣言値と同様に表示および編集できます。

以下のスクリーンショットのように var(--main-color) などの宣言値が示されている場合は、宣言がカスタムプロパティを使用していることを意味します。これらの値はその他の宣言値と同様に編集できます。現時点で、カスタムプロパティの定義を直接表示する方法はありません。

カスタムプロパティの使用

Sass、Less、または Stylus の編集

Sass、Less、Stylus、またはその他の CSS プリプロセッサを使用している場合は、生成された CSS 出力ファイルを Styles エディタで編集しても、元のソースにマップされないため、役に立ちません。

CSS ソースマップを使用すると、生成されたファイルが DevTools によって自動的に元のソースファイルにマップされるため、[Sources] パネルでファイルをライブ編集して、DevTools を終了したり、ページを更新したりせずに結果を表示できます。

プリプロセッサのワークフロー

生成された CSS ファイルによってスタイルが提供される要素を調べる場合、[Elements] パネルには生成された CSS ファイルではなく、元のソースファイルへのリンクが表示されます。

.scss スタイルシートが表示されている [Elements] パネル

ソースファイルにジャンプするには、次のようにします。

リンクをクリックして、[Sources] パネルで（編集可能な）ソースファイルを開きます。
任意の CSS プロパティ名または値を Ctrl キーを押しながらクリック（または Cmd キーを押しながらクリック）してソースファイルを開き、該当する行にジャンプします。

.scss ファイルが表示されている [Sources] パネル

DevTools で CSS プリプロセッサファイルへの変更を保存すると、CSS プリプロセッサによって CSS ファイルが再生成されます。続けて DevTools が新しく生成された CSS ファイルを再読み込みします。

CSS ソースマップと自動再読み込みの有効化と無効化

CSS ソースマップは既定で有効になっています。生成された CSS ファイルの自動再読み込みを有効にすることができます。CSS ソースマップと CSS 再読み込みを有効にするには、次のようにします。

DevTools の [Settings] を開き、[General] をクリックします。
[Enable CSS source maps] と [Auto-reload generated CSS] をオンにします。

要件と問題点

外部エディタで行われた変更は、関連付けられているソースファイルを含む [Sources] タブにフォーカスが戻るまで DevTools で検出されません。
Sass、LESS、およびその他のコンパイラで生成された CSS ファイルを手動で編集すると、ページが再読み込みされるまで、ソースマップの関連付けが失われます。
ワークスペースを使用している場合は、生成された CSS ファイルがワークスペースにもマップされていることを確認してください。これを確認するには、[Sources] パネルの右側のツリーで、CSS がローカルフォルダから提供されていることを確認します。
ソースファイルを変更したときに DevTools で自動的にスタイルが再読み込みされるようにするには、ソースファイルが変更されるたびに CSS ファイルを再生成するようにプリプロセッサを設定する必要があります。そうしない場合、CSS ファイルを手動で再生成し、ページを再読み込みして変更を確認する必要があります。
サイトまたはアプリには、ウェブサーバーからアクセスする（file:// URL からではなく）必要があり、サーバーは CSS ファイルとともに、ソースマップ（.css.map）とソースファイル（.scss など）を提供する必要があります。
ワークスペース機能を使用していない場合は、ウェブサーバーで Last-Modified ヘッダーも提供する必要があります。

ソースマップのセットアップ方法については、CSS と JS プリプロセッサのセットアップを参照してください。