CSS 機能リファレンス

CSS の表示と変更に関連する Microsoft Edge DevTools 機能の次の包括的なリファレンスで、新しいワークフローについて説明します。

基本については、「 CSS の表示と変更の概要」を参照してください。

要素を選択する

DevTools の Elements ツールを使用すると、一度に 1 つの要素の CSS を表示または変更できます。 選択した要素が DOM ツリーで強調表示されます。 要素のスタイルが [ スタイル ] ウィンドウに表示されます。 チュートリアルについては、「 要素の CSS を表示する」を参照してください。

次の図では、h1DOM ツリーで強調表示されている要素が選択された要素です。 右側の [スタイル] ウィンドウに要素の スタイル が表示されます。 左側では、要素はビューポートで強調表示されていますが、マウスが 現在 DOM ツリーの上に置かれているためです。

要素を選択する方法は多数あります。

• レンダリングされた Web ページで、ページ要素を右クリックし、[ 検査] をクリックします。

• DevTools で、 要素の選択 () をクリックするか、 Ctrl + Shift + C (Windows、Linux) または Command + Shift + C (macOS) を押して、ビューポートで要素をクリックします。

• DevTools で、 DOM ツリーの要素をクリックします。

• DevTools で、コンソールでなどのdocument.querySelector('p')クエリを実行し、結果を右クリックし、[要素] パネルで [表示] を選択します。

ルールが定義されている外部スタイルシートを表示する

[ スタイル ] ウィンドウで、CSS ルールの横にあるリンクをクリックして、ルールを定義する外部スタイルシートを開きます。 [ソース] ツールの [エディター] ウィンドウでスタイルシートが開きます。

スタイルシートが縮小されている場合は、[エディター] ウィンドウの下部にある [書式 ()] ボタンをクリックします。 詳細については、「 プリティプリントを使用して縮小された JavaScript ファイルを再フォーマットする」を参照してください。

次の図では、 をクリック https://learn.microsoft.com/_themes/docs.theme/master/en-us/_themes/styles/b66bc881.site-ltr.css:2 すると、 の https://learn.microsoft.com/_themes/docs.theme/master/_themes/styles/b66bc881.site-ltr.css2 行目に .content h1:first-of-type アクセスし、CSS ルールが定義されています。

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

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

1. 要素を選択します。

2. [要素] ツールの [計算] ウィンドウに移動します。

   広い DevTools ウィンドウでは、[ 計算] ウィンドウは存在しません。 [計算] ウィンドウの内容が [スタイル] ウィンドウに表示されます。

   継承されたプロパティは不透明です。

3. 継承されたすべての値を表示するには、[ すべて表示 ] チェック ボックスをオンにします。

   次の図では、[ 計算] ウィンドウに、現在選択 h1 されている要素に適用されている CSS プロパティが表示されています。

   

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

[計算] ウィンドウを使用します。 実際に要素に適用される CSS のみを表示するに関するページを参照してください。

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

[計算] ウィンドウの [すべて表示] チェック ボックスをオンにします。 実際に要素に適用される CSS のみを表示するに関するページを参照してください。

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

要素 のボックス モデル を表示するには、[ スタイル ] ウィンドウに移動します。 DevTools ウィンドウが狭い場合、 ボックス モデル ダイアグラムはパネルの下部にあります。

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

次の図では、[スタイル] ウィンドウの [ボックス モデル] ダイアグラムに、現在選択h1されている要素のボックス モデルが表示されています。

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

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

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

次の図では、[ スタイル ] ウィンドウがフィルター処理され、検索クエリ を含むルールのみが表示されます color。

次の図では、[ 計算] ペインがフィルター処理され、検索クエリ を含む宣言のみが表示されます 100%。

擬似クラスを切り替える

、、、または :visitedなどの:active:focus:hover擬似クラスを切り替えるには:

1. 要素を選択します。

2. [ 要素 ] ツールで、[ スタイル ] ウィンドウに移動します。

3. [:hov] をクリックします。

4. 有効にする擬似クラスを選択します。

   次の図は、擬似クラスを切り替える方法を :hover 示しています。 ビューポートでは、要素が background-color: cornflowerblue 実際にホバーされていない場合でも、宣言が要素に適用されます。

   

対話型のチュートリアルについては、「 擬似状態をクラスに追加する」を参照してください。

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

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

1. コマンド メニューを開きます。

2. と入力 renderingし、[レンダリングの 表示] を選択します。

3. [ Css Media のエミュレート ] ドロップダウン リストをクリックし、[ 印刷] を選択します。

カバレッジ ツールを使用して、使用済み CSS と未使用の CSS を表示する

カバレッジ ツールは、ページが実際に使用する CSS を示します。

1. DevTools にフォーカスがある間、Ctrl + Shift + P (Windows、Linux) または Command + Shift + P (macOS) を押してコマンド メニューを開きます。

2. と入力 coverageし、[カバレッジの 表示] を選択します。

   

   カバレッジ ツールが表示されます。

   

3. [インストルメント化の開始] をクリックし、ページを更新します)。 ページが更新され 、カバレッジ ツールは、ブラウザーが読み込む各ファイルから使用される CSS (および JavaScript) の概要を示します。 緑色は、使用されている CSS を表します。 赤は未使用の CSS を表します。

   使用および使用されていない CSS (および JavaScript) の量の概要:

   

4. 使用されている CSS の詳細を行ごとに表示するには、CSS ファイルをクリックします。

   次の図では、145 ~ 147 行目と 149 行目から 151 b66bc881.site-ltr.css 行目は使用されませんが、163 行目から 166 行目が使用されています。

   

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

「 DevTools を印刷プレビュー モードに強制する」を参照してください。

CSS 宣言を要素に追加する 2 つの方法

宣言の順序は、要素のスタイル設定方法に影響します。 宣言を追加するには、インライン宣言を追加するか、スタイル ルールに宣言を追加します。 これら 2 つの方法については、次のセクションで説明します。

要素へのインライン CSS 宣言の追加

インライン宣言の追加は、要素の style HTML に属性を追加することと同じです。 ほとんどのシナリオでは、インライン宣言を使用する必要があります。

インライン宣言は外部宣言よりも特異性が高いので、インライン宣言を使用すると、特定の予期される要素で変更が確実に有効になります。 特異性の詳細については、「 セレクターの種類」を参照してください。

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

1. 要素を選択します。

2. [ スタイル ] ウィンドウで、 element.style セクションの角かっこの間をクリックします。 カーソルにフォーカスが合い、テキストを入力できます。

3. プロパティ名を入力し、 Enter キーを押します。

4. そのプロパティの有効な値を入力し、Enter キーを押 します。 DOM ツリーでは、 要素にstyle属性が追加されています。

または、プロパティ フィールドに値を入力すると、DevTools によって一致するプロパティの一覧が提案されます 。選択する値 ペア。 たとえば、プロパティ フィールドに「」と入力boldすると、DevTools によって、 と font-weight: bolder が可能なルールとして提案font-weight: boldされます。 Enter キーを押してルールを適用します。

次の図では、 margin-top プロパティと background-color プロパティが選択した要素に適用されています。 DOM ツリーでは、宣言が要素のstyle属性に反映されます。

既存のスタイル規則に CSS 宣言を追加する

要素のスタイルをデバッグしていて、宣言が別の場所で定義されている場合の動作を具体的にテストする必要がある場合は、既存のスタイル規則に宣言を追加します。

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

1. 要素を選択します。

2. [ スタイル ] ウィンドウで、宣言を追加するスタイル ルールの角かっこの間をクリックします。 カーソルにフォーカスが合い、テキストを入力できます。

3. プロパティ名を入力し、 Enter キーを押します。

4. そのプロパティの有効な値を入力し、Enter キーを押 します。

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

CSS 宣言の名前を変更するには、宣言の名前をダブルクリックします。

CSS 宣言の値を変更するには、宣言の値をダブルクリックします。 次のスクリーンショットは、リストから値を選択する方法を示しています。

数値を変更するには、次のセクションに従って値を入力するか、方向キーを使用します。

数値宣言値をインクリメントする

CSS 宣言の数値を変更するには、値を入力するか、矢印キーを使用して値を特定の量だけインクリメントします。

ショートカット キー	増分
Alt + 上方向キー (Windows、Linux) または Option + 上方向キー (macOS)	0.1
上方向キー	1 (現在の値が -1 ~ 1 の場合は 0.1)
Shift + ↑	10
Shift + Page Up (Windows、Linux) または Shift + Command + 上方向キー (macOS)	100

デクリメントするには、上方向キー (またはページ上方向キー) の代わりに下方向キー (またはページ下方向キー) を押します。

要素にクラスを追加する

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

1. DOM ツリーで要素を選択します。

2. [.cls] をクリックします。

3. [新しいクラスの追加] テキスト ボックスに 、クラス の名前を入力します。

4. [Enter] キーを押します。

   

クラスを切り替える

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

1. DOM ツリーで要素を選択します。

2. [ 要素クラス ] ウィンドウを開きます。 「要素にクラスを追加する」を参照してください。 [ 新しいクラスの追加] テキスト ボックスの下には、この要素に適用されているすべてのクラスがあります。

3. 有効または無効にするクラスの横にあるチェック ボックスをオンにします。

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

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

1. 要素を選択します。

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

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

   

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

既定では、スタイル ルールを追加すると、DevTools によってドキュメント内にという名前 inspector-stylesheet の新しいスタイル シートが作成され、このスタイル シートに新しいスタイル ルールが追加されます。

代わりに、既存のスタイルシートにルールを追加するには:

• [ 新しいスタイルルール ()]をクリックして長押しし、リストからスタイルシートを選択してスタイルルールを追加します。

特定の場所にスタイル ルールを追加する

既定では、[ 新しい スタイル ルール] をクリックしてスタイル ルールを追加すると、スタイル シートの element.style ルールの下に新しいルールが inspector-stylesheet 挿入されます。

代わりに[スタイル]ペインの特定の場所に スタイル ルールを追加するには:

1. 新しいスタイル ルールを追加する位置のすぐ上にあるスタイル ルールにカーソルを合わせます。

2. [ 下にスタイル ルールを挿入 ] をクリックします ()。

宣言を切り替える

1 つの宣言をオンまたはオフに切り替えるには:

1. 要素を選択します。

2. [ スタイル ] ウィンドウで、宣言を定義するルールにマウス ポインターを合わせます。 各宣言の横にチェック ボックスが表示されます。

3. 宣言の横にあるチェック ボックスをオンまたはオフにします。 宣言をクリアすると、DevTools はそれをクロスアウトして、アクティブでなくなったことを示します。

   次の図では、 margin-top 現在選択されている要素のプロパティがオフになっています。

   

カラー ピッカーを使用して色を変更する

カラー ピッカーには、変更colorとbackground-color宣言のためのユーザー インターフェイスが用意されています。

カラー ピッカーを開くには:

1. 要素を選択します。

2. [ スタイル ] ウィンドウで、変更する color、 background-color、または同様の宣言を見つけます。 、background-color、または同様の値のcolor左側には小さな四角形があり、これは色のプレビューです。

   次の図では、 の rgba(0, 0, 0, 0.7) 左側にある小さな四角形は、その色のプレビューです。

   

3. プレビューをクリックして カラー ピッカーを開きます。

   

次の図と一覧では、 カラー ピッカーの各 UI 要素について説明します。

吹き出し	コンポーネント	説明
1	色合い
2	スポイト	スポイトを使用してページの色をサンプリングする
3	クリップボードにコピー	[表示値] をクリップボードにコピーします。
4	表示値	RGBA、HSLA、または色の 16 進表現。
5	カラー パレット	四角形をクリックして色を変更します。
6	色相
7	不透明度
8	値スイッチャーの表示	現在の色の RGBA、HSLA、16 進表現を切り替えます。
9	カラー パレット スイッチャー	マテリアル デザイン パレット、カスタム パレット、またはページ カラー パレットを切り替えます。 DevTools は、スタイルシートで見つけた色に基づいてページカラーパレットを生成します。

スポイトを使用してページの色をサンプリングする

選択した色をページ上の他の色に変更するには:

1. スポイト アイコン (イト) をクリックします。 カーソルが虫眼鏡に変わります。

2. サンプリングする色を持つピクセルを画面上の任意の場所にポイントします。

3. クリックして確定します。

   次の図では、 カラー ピッカー は、現在の色の rgba(0,0,0,0.7)値 である を示しています。これは黒に近い値です。 特定の色は、クリックした後にビューポートで現在強調表示されている黒のバージョンに変わります。

   

関連項目:

• カラー ピッカーを使用してテキストと色のコントラストをテストする

角度クロックを使用して角度の値を変更する

角度クロックは、CSS プロパティ値の角度の量を変更するためのユーザー インターフェイスを提供します。

角度時計を開くには:

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

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

   次の図では、 の左側 100deg にある小さなクロックが角度のプレビューです。

3. プレビューをクリックして 角度時計を開きます。

   

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

角度の値を変更するためのキーボード ショートカットが増えています。 詳細については、 スタイル ウィンドウのキーボード ショートカットを参照してください。

影エディターを使用してボックスとテキストの影を変更する

シャドウ エディターを使用して、HTML 要素の または text-shadow CSS プロパティのbox-shadow値を変更します。

1. または 宣言を持つ要素をbox-shadow選択します。text-shadow

   たとえば、新しいタブまたはウィンドウで 1DIV デモ ページ を開き、ページを右クリックし、[ 検査 ] を選択して DevTools を開き、[ 要素 ] ツールで要素を <div class="demos"> 選択します。

2. [ スタイル ] ウィンドウの CSS ルールで .demos 宣言を box-shadow 見つけて、その [シャドウ エディターを開く ] () ボタンをクリックします。

   シャドウ エディターが開きます。

   

3. シャドウ プロパティを次のように変更します。

   プロパティ	変更方法
   型	[ アウトセット] または [インセット] を選択します。 の場合 box-shadowのみ。
   X オフセット	テキスト ボックスに値を指定するか、青いドットをドラッグします。
   Y オフセット	テキスト ボックスに値を指定するか、青いドットをドラッグします。
   Blur	テキスト ボックスに値を指定するか、スライダーをドラッグします。
   普及	テキスト ボックスに値を指定するか、スライダーをドラッグします。 の場合 box-shadowのみ。

   変更は、レンダリングされた Web ページの要素にリアルタイムで適用されます。

   

イージング エディターを使用してアニメーションと切り替えのタイミングを編集する

イージング エディターを使用して、HTML 要素の animation-timing-function または transition-timing-function プロパティの値を変更します。

1. CSS アニメーションまたは遷移が適用されている要素を選択します。

   たとえば、 アニメーション化されたプロパティ デモ ページ を新しいタブまたはウィンドウで開き、ページを右クリックし、[ 検査 ] を選択して DevTools を開き、[ 要素 ] ツールで Ctrl キーを押しながら F キー を押して "spinner" を見つけて、要素を <div class="spinner"> 選択します。

   このデモ ページの赤と緑のボックスは、2 つの異なる CSS アニメーションです。 どちらのアニメーションも CSS プロパティを使用 animation して CSS で実行され、タイミング関数を定義します ease-in-out 。

2. [スタイル] ウィンドウで、CSS ルールで宣言をanimation.bad .spinner見つけて、[3 次ベジエ エディターを開く ] () ボタンをクリックします。

   イージング エディターが開きます。

   

3. アニメーション タイミング関数のプロパティを変更します。

   • 一覧から定義済みのタイミング関数のいずれかを選択します。
   • 3 次ベジエ曲線ハンドルをドラッグして、独自のタイミング関数を作成します。

   変更は、レンダリングされた Web ページの要素にリアルタイムで適用されます。

   

注:

このページの一部は、 Google によって 作成および共有され、 クリエイティブ・コモンズ属性 4.0 国際ライセンスに記載されている条件に従って使用される作業に基づく変更です。 元のページは ここに あり、 Kayce Basques (テクニカル ライター、Chrome DevTools & Lighthouse) によって作成されています。

この作品は 、クリエイティブ・コモンズ属性4.0国際ライセンスに基づきライセンスされています。