CSS 機能リファレンス

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

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

詳細な内容:

要素を選択する

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

選択した要素の例

上の図では、次の手順を実行します。

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

要素を選択するには、複数の方法があります。

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

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

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

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

CSS の表示

[要素] タブ>[スタイル] タブと [計算済み] タブを使用して、CSS ルールを表示し、CSS の問題を診断します。

[ スタイル ] タブには、次のような他のさまざまな場所へのリンクが表示されます。これらに限定されません。

  • [CSS ルール] の横にあるスタイルシートと CSS ソースに移動します。 このようなリンク は、[ソース] ツールを開きます。 スタイルシートが縮小されている場合は、「JavaScript デバッグ機能でプリプリントを使用して縮小された JavaScript ファイルを再フォーマットする」を参照してください。

  • [ 継承元 ] セクションで、親要素に移動します。

  • var()呼び出しで、 をカスタム プロパティ宣言に呼び出します。 MDN での CSS カスタム プロパティ (変数) の使用 に関するページを参照してください。

  • animationの短縮形プロパティで、@keyframesします。

  • 詳細については 、ドキュメントヒントのリンクを参照してください。

リンクのスタイルは異なる場合があります。 何かがリンクかどうかわからない場合は、それをクリックして調してみてください。

例:

  1. 新しいウィンドウまたはタブで [ To Do アプリ ] に移動します。

  2. 文字列 "タスクの追加" の上にある空白を右クリックし、[ 検査] をクリックします。

    DevTools が開き、[ 要素] ツールが選択されています。

  3. [ スタイル ] タブを選択します。

    さまざまな種類のリンクが表示されます。

    強調表示されたさまざまなリンク

CSS ドキュメント、特異性、およびカスタム プロパティ値を使用してツールヒントを表示する

[要素] ツールの [スタイル] タブには、特定の要素にカーソルを合わせると役立つ情報が表示されます。

CSS ドキュメントを表示する

CSS プロパティの説明をヒントで表示するには:

  1. 新しいウィンドウまたはタブで、 To Do アプリなどの Web ページに移動します。

  2. 文字列 "タスクの追加" の上にある空白を右クリックし、[ 検査] をクリックします。

    DevTools が開き、[ 要素] ツールが選択されています。

  3. [ スタイル ] タブを選択します。

  4. padding:など、CSS プロパティ名にカーソルを合わせます。

    ヒントが表示されます。

    CSS プロパティに関するドキュメントを含むツールヒント

    DevTools は、 VS Code カスタム データ リポジトリからヒントの説明をプルします。

  5. ヒントで、[ 詳細情報 ] リンクをクリックします。

    MDN のプロパティの CSS リファレンス ページ (CSS プロパティなど) padding表示されます。

CSS ヒントをオフにするには:

  • ツールヒントで、[ 表示しない ] チェック ボックスをオンにします。

CSS ヒントをもう一度オンにするには:

  1. DevTools で、[ DevTools のカスタマイズと制御] を選択し、[設定] を選択 します。

  2. 左側のアウトラインで [ 基本設定] を選択し、[ 要素 ] セクションまで下にスクロールします。

  3. [ CSS ドキュメントのヒントを表示する ] チェック ボックスをオンにします。

セレクターの特異性を表示する

CSS セレクターの上にマウス ポインターを合わせると、セレクターの特異性の重みを示すツールヒントが表示されます(例 : Specificity: (0,0,1))。

例:

  1. 新しいウィンドウまたはタブで、 To Do アプリなどの Web ページに移動します。

  2. Web ページを右クリックし、[ 検査] をクリックします。

    DevTools が開き、[ 要素] ツールが選択されています。

  3. DOM ツリーで、 <body> 要素を選択します。

  4. [ スタイル ] タブで、 body CSS セレクターにカーソルを合わせます。

    ヒントが表示され、 Specificity: (0,0,1)が表示されます。

    一致するセレクターの特異性の重みを持つヒント

関連項目:

カスタム プロパティの値を表示する

var(--custom-property)関数にカーソルを合わせると、ヒントにカスタム プロパティの値が表示されます。

例:

  1. 新しいウィンドウまたはタブで、 To Do アプリなどの Web ページに移動します。

  2. Web ページを右クリックし、[ 検査] をクリックします。

    DevTools が開き、[ 要素] ツールが選択されています。

  3. DOM ツリーで、 <body> 要素を選択します。

  4. [ スタイル ] タブの [ body CSS ルール] で、 --spacingの上にマウス ポインターを合わせます。

    .3rem値がヒントに表示されます。

    ヒントのカスタム プロパティの値

関連項目:

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

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

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

ルールが定義されているスタイルシートの表示

上の図では、[to-do-styles.css:5] をクリックすると、h1 CSS 規則が定義されているto-do-styles.cssの 5 行目が表示されます。

無効、オーバーライド、非アクティブ、およびその他の CSS を表示する

[ スタイル ] タブでは、さまざまな種類の CSS の問題が認識され、さまざまな方法で強調表示されます。

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

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

例:

  1. 新しいウィンドウまたはタブで、 To Do アプリなどの Web ページに移動します。

  2. [ マイ タスク] という見出しを右クリックし、[ 検査] をクリックします。

    DevTools が開き、[ 要素 ] ツールが選択され、DOM ツリーで <h1> 要素が選択されます。

  3. [要素] ツールで、[計算] タブを選択します。

    選択した要素に適用される CSS プロパティが表示されます。

    [計算済み] パネル

    斜体のプロパティ名と値は、実行時に計算される値を示します。

  4. すべてのプロパティを表示するには、[ すべて表示 ] チェック ボックスをオンにします。

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

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

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

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

CSS at-rules を表示する

At-rules は CSS ステートメントであり、CSS の動作を制御できます。

[要素] ツールの [スタイル] タブには、専用セクションに次の at-rules が表示されます。

at-rules @property 表示

@property CSS at-rule を使用すると、スタイルシートで特定の型の CSS カスタム プロパティを定義できます。

[ スタイル ] タブで、このようなプロパティの名前にカーソルを合わせると、次のようなツールヒントが表示されます。

  • プロパティの値 ( 20%など)。
  • 次のようなプロパティの記述子。 initial value: 40%
  • [スタイル] タブの下部にある折りたたみ可能な@property セクションの登録への [登録済みプロパティの表示] リンク。

例:

  1. 新しいウィンドウやタブで、 @property の at-rule を使用するページ ( [ @property のルールの表示] など) に移動します。

  2. アイテム 3 段落を右クリックし、[検査] をクリックします。

    DevTools が開き、[ 要素] ツールが選択されています。

  3. [ スタイル ] タブで、その var(--itemSize) 関数にカーソルを合わせます。

    at-property CSS at-rule のヒント

    ツールヒントには、次のものが含まれています。

    • プロパティの値 ( 100pxなど)。
    • プロパティの記述子 (初期値など)。
    • [登録済みプロパティの表示] リンク。

  4. [ 登録済みプロパティの表示 ] リンクをクリックします。

    展開された [@property ] セクションが表示され、[ スタイル ] タブの下に表示されます。

    --itemSize in the at-property section

@propertyルールを編集するには、その名前または値をダブルクリックします。 以下 の「宣言の名前または値を変更する」を参照してください。

関連項目:

at-rules @supports 表示

[ スタイル ] タブには、要素に適用されている場合、css at-rules @supports が表示されます。

たとえば、 @supports ルールを表示するには、

  1. 新しいウィンドウまたはタブで、[表示] @supports [at-rules]\(ルールの表示\) など、@supportsの at-rule を使用するページに移動します。

  2. [CIE LAB カラー スペースをサポートしています]を右クリックし、[ 検査] を選択します。

    DevTools が開きます。 要素ツールの DOM ツリーで、<div class="box">要素が選択されています。 [ スタイル ] タブに、CSS 宣言 @supports 一覧表示されます。

    at-supports at-rule の HTML の結果

  • ブラウザーで lab() 関数がサポートされている場合、要素は緑色です。

  • ブラウザーで lab() 関数がサポートされていない場合、要素は紫色になります。

CIE LAB の色空間をサポートしているブラウザー バージョンを確認するには、 Caniuse.com で "lab" を検索します。

at-rules @scope 表示

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

@scope at-rules を使用すると、CSS スタイルのスコープを設定できます。つまり、特定の要素にスタイルを明示的に適用できます。 MDN の「@scope CSS at-rule」を参照してください。

@scopeルールを表示するには:

  1. 新しいウィンドウまたはタブで、ルールの @scope を使用するページに移動します ( 例: [ルールの表示] @scope at-rules デモ)。

    at-scope at-rule の HTML & CSS の結果

  2. [カードに存在するテキストです] を右クリックし、[検査] を選択します。

    DevTools が開き、[ 要素] ツールが選択されています。

  3. [ スタイル ] タブを選択します。

  4. @scope規則を調べます。

    [スタイル] タブのスコープ内ルール

    この例では、@scope規則 (背景色 = plum) は、card クラスを持つ要素 (<div> など) 内にある<p>要素のグローバル CSS background-color宣言 (aquamarine) をオーバーライドします。

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

  5. [ スタイル ] タブで、 プラムをダブルクリックし、[ 削除] を押して、[ ベージュ] を選択します。

    デモ Web ページのカードのテキストが、プラムの背景からベージュ色の背景に変わります。

at-rules @font-palette-values 表示

@font-palette-values CSS at-rule を使用すると、font-palette プロパティの既定値をカスタマイズ (オーバーライド) できます。 [要素] ツールの [スタイル] タブには、このルールが専用セクションに表示されます。

@font-palette-values CSS ルールを表示するには:

  1. 新しいウィンドウまたはタブで、ルールの @font-palette-values を使用するページ ( [表示] @font-palette-values [at-rules ] デモなど) に移動します。

  2. [新しい色] を右クリックし、[ 検査] を選択します。

    DevTools が開き、[ 要素] ツールが選択されています。

  3. [ スタイル ] タブで、 @font-palette-values CSS 規則を見つけます。

    [スタイル] タブの at-font-palette-values ルール

    この例では、 --New フォント パレットの値は、色付きフォントの既定値をオーバーライドします。

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

  4. [ @font-palette-values CSS 規則] の [ override-colors ] プロパティで、[ 0 gold, 1 red] をダブルクリックし、「 0 blue, 1 red」と入力します。

    検査された Web ページで、"新しい色" が青と赤でレンダリングされるようになりました。

at-rules @position-try 表示

@position-try CSS 規則と position-try-fallbacks プロパティを使用すると、要素の代替アンカー位置を定義できます。

[要素] ツールの [スタイル] タブで、次の処理が解決され、リンクされます。

  • position-try-fallbacks プロパティ値 (またはプロパティ値position-try-options) は、専用の @position-try --name CSS 規則セクションにリンクします。

  • position-anchorプロパティ値とanchor()引数は、popovertarget属性を持つ対応する要素にリンクします。

たとえば、次のように、 position-try-fallbacks 値を調べ、CSS 規則 @position-try します。

  1. 新しいウィンドウまたはタブで、position-try-fallbacks値を使用するページに移動し、ルールの表示@position-tryのデモなど、ルールの@position-tryします。

  2. レンダリングされた Web ページで、サブメニューを開きます。つまり、[ アカウント] をクリックし、[ STOREFRONT] をクリックします。

    サブメニューが表示され、 LISTS、 SPECIAL OFFERS、 SIGN OUT のコマンドの一覧が表示されます。

  3. サブメニューで、上記の LISTINGS を右クリックし、[ 検査] を選択します。

    DevTools が開き、[ 要素] ツールが選択されています。 DOM ツリーでサブメニュー要素 <ul id="submenu"> が選択されます。

    at-position-try at-rule の HTML & CSS の結果

  4. [ スタイル ] タブの [ #submenu CSS ルール] で、 position-try-fallbacks プロパティを見つけて、その --bottom 値をクリックします。

    [ スタイル ] タブは、対応する [ @position-try ] セクションまで下にスクロールします。

    [スタイル] タブの at-position-try セクション

  5. [ スタイル ] タブの [ #submenu CSS ルール] で、次のいずれかのプロパティの [ --submenu ] リンクをクリックします。

    position-anchor: --submenu;
left: anchor(--submenu right);
top: anchor(--submenu top);

    DOM ツリーは、対応するpopovertarget属性値 (popovertarget="submenu") を持つ要素 (<button popovertarget="submenu">) を選択し、[スタイル] タブに要素の CSS が表示されます。

    DOM ツリーで選択されている button 要素とその CSS

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

関連項目:

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

要素のボックス モデルを表示するには、[ スタイル ] ウィンドウに移動し、下にスクロールします。

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

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

Box モデル図

関連項目:

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

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

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

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

[スタイル] パネルをフィルター処理する

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

[計算済み] パネルをフィルター処理する

フォーカスのあるページをエミュレートする

検査された Web ページから DevTools にフォーカスを切り替えると、一部のオーバーレイ要素は、フォーカスによってトリガーされた場合に自動的に非表示になります。 例:

  • ドロップダウン リスト。
  • メニュー。
  • 日付ピッカー。

ページにフォーカスがあるかのようにこのような要素をデバッグするには、次のいずれかの操作を行います。

  • [要素] ツールの [スタイル] タブで、[:hov (要素の状態の切り替え)] をクリックし、[フォーカスのあるページをエミュレートする] チェック ボックスをオンにします。
  • レンダリング ツールで、[フォーカスのあるページをエミュレートする] チェック ボックスをオンにします。

注意： このオプションがオンの場合、 document.visibilityState は visible に設定され、 visibilitychange イベントは発生しません。 MDN の 「Page Visibility API」を 参照してください。

フォーカスのあるページをエミュレートするには:

  1. 新しいウィンドウまたはタブで [フォーカスのあるページをエミュレート する]デモを開きます。

  2. 入力テキスト ボックスをクリックします。 または、 Tab キー を押して入力テキスト ボックスにフォーカスを置きます。

    入力テキスト ボックスの下に別の要素が表示され、"このメッセージはテキスト ボックスにフォーカスがある場合にのみ表示されます" と表示されます。

  3. 入力テキスト ボックスを右クリックし、[ 検査] を選択します。

    DevTools が開き、メッセージ要素が消えます。 DevTools ウィンドウは、検査された Web ページではなくフォーカスが設定されたので、メッセージ要素は消えます。

  4. [要素] ツールの [スタイル] タブで、[:hov (要素の状態の切り替え)] をクリックし、[フォーカスのあるページをエミュレートする] チェック ボックスをオンにします。

  5. 入力テキスト ボックス要素 <input id="textBox" type="text"> がまだ選択されていることを確認します。

    入力テキスト ボックスの下に、message 要素が入力テキスト ボックスの下に再表示されます。

    これで、入力テキスト ボックスの下にあるメッセージ要素を検査できるようになりました。ただし、検査されたページではなく DevTools にフォーカスがあります。

    [フォーカスのあるページをエミュレートする] チェック ボックスがオン

  6. クリーンアップ: [要素 ] ツールの [ スタイル ] タブで、[ :hov (要素の状態の切り替え)] をクリックし、[ フォーカスのあるページをエミュレート する] チェック ボックスをオフにします。

[レンダリング] ツールには、[フォーカスのあるページをエミュレートする] チェック ボックスも表示されます。表示オプションや視覚障害が異なる Web ページの外観を確認するには、「レンダリング ツール」を参照してください。

関連項目:

擬似クラスを切り替える

擬似クラスを切り替えるには:

  1. 新しいウィンドウまたはタブで、 To Do アプリなどの Web ページに移動します。

  2. タスク 1 など、タスクを入力します。

  3. Web ページを右クリックし、[ 検査] を選択します。

    DevTools が開きます。

  4. [要素] ツールを選択します。

  5. DOM ツリーで、 <li class="task"> 要素を選択します。

  6. [ スタイル ] タブを選択します。

  7. 右上の [:hov] をクリックします。

    チェックボックスが表示されます。

  8. 有効にする擬似クラスのチェック ボックスをオンにします ( :hoverなど)。

    :hover 擬似クラスの選択

    レンダリングされた Web ページでは、タスク名の横にある円にチェックマークが塗りつぶされ、赤い円の赤い X がタスクの右側に表示されます。要素が実際にはポイントされていない場合でも、要素がポイントされているかのように表示されます。

[ スタイル ] タブには、すべての要素に対して次の擬似クラスが表示されます。

さらに、要素固有の擬似クラスを持つ要素もあります。 このような要素を選択すると、[ スタイル ] タブに [ 特定の要素の状態を強制 する] セクションが表示され、要素に固有の擬似クラス ( :read-write チェックボックスなど) を展開して有効にすることができます。

'textarea' 要素の [特定の要素の状態を強制する] セクション

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

継承された強調表示擬似要素を表示する

擬似要素を使用すると、要素の特定の部分にスタイルを設定できます。 強調表示擬似要素は、"選択" 状態のドキュメント部分であり、ユーザーにこの状態を示す "強調表示" のスタイルが設定されます。

たとえば、このような擬似要素は次のとおりです。

  • ::selection
  • ::spelling-error
  • ::grammar-error
  • ::highlight

複数のスタイルが競合する場合、CSS カスケードによって優先スタイルが決まります。 MDN での CSS カスケードの概要に関するページ を参照してください。

ルールの継承と優先順位を理解するには、次のデモで継承された強調表示擬似要素を表示します。

継承された強調表示擬似要素を表示するには:

  1. 新しいウィンドウまたはタブで 擬似要素を強調表示 するデモに移動します。

  2. "親の強調表示擬似要素のスタイルを継承しました" というテキストの一部を選択します。 選択してください。

    選択したテキストが黄色の背景に赤いテキストに変わります。

  3. "親の強調表示擬似要素のスタイルを継承しました" というテキストを右クリックします。 [me!"] を選択し、[ 検査] を選択します。

    DevTools が開きます。 [要素] ツールの [スタイル] タブに、セクションが表示されます。 div.text-parent の ::selection 擬似から継承されます。

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

  4. DOM ツリーで、 <div class="text-parent"> 要素を選択します。

    [ スタイル ] タブに、セクションが表示されます: 擬似 ::selection 要素:

    [スタイル] タブの [擬似] セクションを表示する

関連項目:

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

カスケード レイヤーを使用すると、スタイル固有の競合を防ぐために、CSS ファイルをより明示的に制御できます。 これは、次の場合に役立ちます。

  • 大規模なコードベース。
  • システム設計。
  • サード パーティのスタイルの管理。

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

  1. カスケード レイヤーのデモなど、カスケード レイヤーを使用する Web ページ に移動します 。

  2. [マイ スタイルはレイヤー化されています] 要素を右クリックし、[ 検査] を選択します。

    DevTools が開きます。

  3. [要素] ツールで、[スタイル] タブを選択します。

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

    カスケード レイヤー

  5. レイヤーの順序を表示するには、レイヤー名 (ページ、 コンポーネント、または ベース) をクリックします。 または、[CSS レイヤー ビューの切り替え] アイコン [CSS レイヤー ビューの切り替え] ボタンをクリックします。

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

関連項目:

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

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

  1. Web ページに移動します。

  2. Web ページを右クリックし、[ 検査] を選択します。

    DevTools が開きます。

  3. Esc キーを 1 回または 2 回押すと、クイック ビュー ツール バーが DevTools の下部に表示されます。

  4. [クイック ビュー] ツール バーで、[その他のツール ( +)] を選択します。

  5. レンダリング ツールを選択します。

    レンダリング ツールは、DevTools の下部にある [クイック ビュー] パネルで開きます。

  6. レンダリング ツールで、[Css メディアの種類のエミュレート] ドロップダウン リストをクリックし、[印刷] を選択します。

    Web ページは、印刷のようにレンダリングされます。

  7. 完了したら、[ レンダリング ] ツールで 、[ CSS メディアの種類のエミュレート ] ドロップダウン リストをクリックし、[ エミュレーションなし] を選択します。

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

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

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

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

    コマンド メニューからカバレッジ ツールを開く

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

    カバレッジ ツール

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

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

    使用および未使用の CSS (および JavaScript) の量の概要

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

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

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

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

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

CSS のコピー

[ スタイル ] タブの 1 つのドロップダウン メニューから、個別の CSS ルール、宣言、プロパティ、または値をコピーできます。 MDN の「CSSとは」の「CSS 構文の基本」を参照してください。

さらに、JavaScript 構文で CSS プロパティをコピーすることもできます。 このオプションは、CSS-in-JS ライブラリを使用している場合に便利です。 「CSS-in-JS フレームワークのスタイル編集」を参照してください。

CSS をコピーするには:

  1. 新しいウィンドウやタブで、 To Do アプリなどの CSS を使用する Web ページに移動します。

  2. Web ページを右クリックし、[ 検査] をクリックします。

    DevTools が開き、[ 要素] ツールが選択されています。

  3. DOM ツリーで、 <h1>などの要素を選択します。

  4. [ スタイル ] タブの CSS ルール内で、 text-align: centerなどの CSS プロパティを右クリックします。

    [CSS のコピー] ドロップダウン メニュー

  5. 右クリックメニュー項目を選択します。

    • コピー宣言。 CSS 構文で プロパティとその値をコピーします。 property: value;

    • Copy プロパティ。 property名のみをコピーします。

    • 値をコピーします。 valueのみをコピーします。

    • コピー ルール。 CSS ルール全体をコピーします。 selector[, selector] { property: value; property: value; ... }

    • 宣言を JS としてコピーします。 JavaScript 構文で プロパティとその値をコピーします。 propertyInCamelCase: 'value'

    • すべての宣言をコピーします。 CSS 構文ですべてのプロパティとその値をコピーします。 property: value; property: value; ...

    • すべての宣言を JS としてコピーします。 JavaScript 構文ですべてのプロパティとその値をコピーします。 propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

    • すべての CSS 変更をコピーします。 [ スタイル ] タブで行った変更をすべての宣言にコピーします。 このメニュー項目は条件付きで表示されます。

    • 計算値を表示します。 [ 計算済 み] タブに移動します。上記 の「実際に要素に適用されている CSS のみを表示する」を参照してください。

CSS の変更

このセクションでは、 Elements>Styles で CSS を変更できるすべての方法を示します。

さらに、次のことができます。

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

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

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

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

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

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

  1. 要素を選択します。

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

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

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

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

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

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

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

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

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

  1. 要素を選択します。

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

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

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

スタイル ルールへの宣言の追加

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

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

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

宣言の値を変更する

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

キーボード ショートカットを使用して列挙可能な値を変更する

CSS 宣言の数値を変更するには、値を入力するか、方向キーを使用して特定の量だけ値をインクリメントします。 宣言の列挙可能な値 (たとえば、 font-size) を編集するときに、次のキーボード ショートカットを使用して、値を固定量だけインクリメントできます。

キーの組み合わせ アクション
Alt + 上方向キー (Windows、Linux)、Option + UpArrow (macOS) 0.1 ずつインクリメントします。
上方向キー 現在の値が -1 から 1 の間にある場合は、1 ずつ、または 0.1 ずつインクリメントします。
Shift + ↑ 10 ずつインクリメントします。
Ctrl + Shift + PgUp (Windows、Linux)、Shift + Command + UpArrow (macOS) 100 ずつインクリメントします。

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

長さの値を変更する

ポインターを使用すると、長さの値を持つプロパティ ( width、 height、 padding、 margin、 borderなど) を変更できます。

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

  1. To Do アプリなどの CSS を使用する Web ページを新しいウィンドウまたはタブで開きます。

  2. テキスト [ タスクの追加] を右クリックし、[ 検査] を選択します。

    DevTools が開き、 要素 ツールが表示されます。 <label>要素は DOM ツリーで選択されます。

  3. [ スタイル ] タブの [ .new-task-form CSS ルール] の [ max-width: ] プロパティで、 50remの上にマウス ポインターを合わせます。

    ツールヒントが表示され、同等の値と単位 ( 800px) が表示されます。

  4. 50rem値をクリックします。

    ヒントが表示されます: "マウス ホイールまたは上下キーを使用してインクリメント/デクリメントします。 Ctrl: +/-100、Shift: +/-10、Alt: +/-0.1"

  5. キーを押しながら、マウス ホイールを移動するか、 UpArrow キーと DownArrow キーを押します。

    Ctrl: 100 ずつインクリメントします。 Shift: 10 ずつインクリメントします。 Alt: 0.1 ずつインクリメントします。

    検査された Web ページでは、値 を 変更すると、[タスク入力の追加] テキスト ボックスの幅が変更されます。

  6. max-width プロパティの value フィールドで、値を 200px します ( rem 単位から px 単位に変更)。

  7. Ctrl (+/-100)、Shift (+/-10)、Alt (+/-0.1) キーを押しながら、マウス ホイールを再度移動するか、UpArrow キーと DownArrow キーを押します。

    検査された Web ページで、値を変更すると、[タスク入力の 追加 ] テキスト ボックスの幅が変更されます。

    入力テキスト ボックスの最大幅を変更する

要素にクラスを追加する

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

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

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

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

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

    [要素クラス] ウィンドウ

明るいテーマと暗いテーマの設定をエミュレートし、自動ダーク モードを有効にする

自動ダーク モードを切り替えたり、ユーザーの明るいテーマまたは暗いテーマの設定をエミュレートするには:

  1. [要素] ツールの [スタイル] タブで、右上にある [共通レンダリング エミュレーションの切り替え ] (ペイントブラシ アイコン) ボタンをクリックします。

    一般的なレンダリング エミュレーションを切り替える

  2. ドロップダウン リストから次のいずれかのオプションを選択します。

    • prefers-color-scheme: light。 ユーザーがライト テーマを優先することを示します。

    • prefers-color-scheme: dark。 ユーザーがダーク テーマを優先することを示します。

    • 自動ダーク モード。 実装していない場合でも、ページをダーク モードで表示します。 さらに、 prefers-color-scheme を自動的に dark に設定します。

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

関連項目:

クラスを切り替える

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

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

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

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

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

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

  1. 要素を選択します。

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

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

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

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

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

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

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

スタイルシートの選択

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

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

スタイル ウィンドウから始めて、特定のスタイルシートの特定の場所に スタイル ルールを追加するには:

  1. [要素] ツールの [スタイル] タブで、新しいスタイル ルールを追加する位置のすぐ上にあるスタイル ルールにカーソルを合わせます。

    CSS ルールの右側に[ 下にスタイル ルール を挿入する](アイコンの下にスタイル ルールを挿入する)ボタンが表示されます。

  2. [ 下にスタイル ルールを挿入 する] (アイコンの下にスタイル ルールを挿入する) ボタンをクリックします。

    スタイル ルールを下に挿入する

宣言を切り替える

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

  1. 要素を選択します。

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

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

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

    宣言を切り替える

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

参照:

グリッド エディターを使用してグリッド項目とその内容を揃える

参照:

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

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

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

  1. 要素を選択します。

  2. [ スタイル ] ウィンドウで、変更する color、 background-color、または同様の宣言を見つけます。 color、background-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 は、スタイルシートで見つけた色に基づいてページカラーパレットを生成します。

関連項目:

  • [material.io の カラー システム : マテリアル デザイン パレット] の色の使用法とパレット。

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

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

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

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

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

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

    スポイトの使用

関連項目:

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

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

角度時計を開くには:

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

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

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

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

    角度プレビュー

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

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

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

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

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

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

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

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

    シャドウ エディター

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

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

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

    シャドウ エディターで行われた変更の効果

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

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

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

  1. DevTools の [要素 ] ツールの DOM ツリーで、CSS アニメーションまたは遷移が適用されている要素を選択します。

    たとえば、 アニメーション化されたプロパティのデモ ページ を新しいタブまたはウィンドウで開き、アニメーションを含む緑色のボックスを右クリックし、[ 検査] を選択します。

    DevTools が開き、 要素 ツールが表示されます。

  2. Ctrl キーを押しながら F キーを押し、"spinner" を見つけて、<div class="animation-demo good">内にある<div class="spinner">要素を選択します。

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

  3. [ スタイル ] タブの [ .good .spinner CSS ルール] の animation 宣言で、 ease-in-outの左側にある [ Open 3 次ベジエ エディター (3 次 ベジエ エディター アイコン)] ボタンをクリックします。

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

    イージング エディター

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

単純なマウス クリックでタイミングを調整するには、 イージング エディターでプリセットを使用します。

  1. 上記の「イージング エディターで アニメーションと切り替えのタイミングを編集する」で説明されているように、イージング エディターを開きます。

  2. 次の 4 つのピッカー ボタンのいずれかをクリックします。

    ボタン 関数型 CSS キーワード (keyword)
    線形イージング関数 線形関数 linear
    イーズインアウトイージング関数 イーズインアウト関数 ease-in-out
    イーズイン イージング関数 イーズイン関数 ease-in
    イーズアウトイージング関数 イーズアウト関数 ease-out

    ボタンを選択すると、CSS ルールのキーワード (keyword)値が設定され (次の手順でバリアント プリセットを選択した場合は異なります)、イージング エディターの下部に [プリセット] スイッチャーが開きます。

  3. [プリセット] スイッチャーで、[左<] ボタンまたは [右>] ボタンをクリックして、次のいずれかのプリセットを選択します。

    • 線形プリセット: elastic、 bounce、または emphasized。

    • 3 次ベジエ プリセット:

    タイミング キーワード (keyword) プリセット 3 次ベジエ
    ease-in-out 出力中、サイン cubic-bezier(0.45, 0.05, 0.55, 0.95)
    ease-in-out Out、2 次 cubic-bezier(0.46, 0.03, 0.52, 0.96)
    ease-in-out Out、Cubic cubic-bezier(0.65, 0.05, 0.36, 1)
    ease-in-out Fast Out、Slow In cubic-bezier(0.4, 0, 0.2, 1)
    ease-in-out Out、Back cubic-bezier(0.68, -0.55, 0.27, 1.55)
    タイミング キーワード (keyword) プリセット 3 次ベジエ
    ease-in で、正弦 cubic-bezier(0.47, 0, 0.75, 0.72)
    ease-in では、2 次 cubic-bezier(0.55, 0.09, 0.68, 0.53)
    ease-in In、Cubic cubic-bezier(0.55, 0.06, 0.68, 0.19)
    ease-in で、戻る cubic-bezier(0.6, -0.28, 0.74, 0.05)
    ease-in 高速出力、線形入力 cubic-bezier(0.4, 0, 1, 1)
    タイミング キーワード (keyword) プリセット 3 次ベジエ
    ease-out 出力、サイン cubic-bezier(0.39, 0.58, 0.57, 1)
    ease-out Out、2 次 cubic-bezier(0.25, 0.46, 0.45, 0.94)
    ease-out Out、Cubic cubic-bezier(0.22, 0.61, 0.36, 1)
    ease-out 線形出力、低速入力 cubic-bezier(0, 0, 0.2, 1)
    ease-out Out、Back cubic-bezier(0.18, 0.89, 0.32, 1.28)

関連項目:

カスタム タイミングを構成する

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

  • 線形関数の場合は、線上の任意の場所をクリックしてコントロール ポイントを追加し、ドラッグします。 コントロール ポイントを削除するには、それをダブルクリックします。

    線形関数のコントロール ポイントをドラッグする

  • 3 次ベジエ関数の場合は、コントロール ポイントの 1 つをドラッグします。

    3 次ベジエ関数のコントロール ポイントをドラッグする

変更すると、イージング エディターの上部にあるプレビューでボール アニメーションがトリガーされます。

関連項目

デモ：

Mdn：

Github：

Web.dev:

Chrome for Developers ブログ:

Chrome ドキュメント:

material.io:

  • カラー システム: マテリアル デザイン パレットの色の使用法とパレット。

注:

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

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

  • Last updated on