CSS 機能リファレンス

CSS の表示と変更に関連する Microsoft Edge DevTools 機能の次の包括的なリファレンスで、新しいワークフローを発見してください。

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

詳細な内容:

• 要素を選択する
• CSS を表示する
  • リンクを使用して移動する
  • CSS ドキュメント、特異性、カスタム プロパティ値を含むヒントを表示する
    • CSS ドキュメントを表示する
    • セレクターの特異性の表示
    • カスタム プロパティの値を表示する
  • ルールが定義されている外部スタイルシートを表示する
  • 無効、オーバーライド、非アクティブ、その他の CSS を表示する
  • 要素に実際に適用されている CSS のみを表示する
  • CSS プロパティをアルファベット順に表示する
  • 継承された CSS プロパティを表示する
  • CSS の at-rules を表示する
    • @propertyルールの表示
    • @supportsルールの表示
    • @scopeルールの表示
    • @font-palette-valuesルールの表示
    • @position-tryルールの表示
  • 要素のボックス モデルを表示する
  • 要素の CSS の検索とフィルター処理
  • フォーカスされたページをエミュレートする
  • 擬似クラス
  • 継承された強調表示擬似要素を表示する
  • カスケード レイヤーの表示
  • ページを印刷モードで表示する
  • カバレッジ ツールを使用して使用済みおよび未使用の CSS を表示する
  • 印刷プレビュー モードの強制
• CSS のコピー
• CSS の変更
  • 要素に CSS 宣言を追加する 2 つの方法
    • 要素へのインライン CSS 宣言の追加
    • 既存のスタイル ルールへの CSS 宣言の追加
  • 宣言名または値を変更する
  • キーボード ショートカットを使用して列挙可能な値を変更する
  • 長さの値を変更する
  • 要素にクラスを追加する
  • ライト テーマとダーク テーマの設定をエミュレートし、自動ダーク モードを有効にする
  • クラスの切り替え
  • スタイル ルールを追加する
    • ルールを追加するスタイル シートを選択する
    • スタイル ルールをスタイルシートの特定の位置に追加する
  • 宣言を切り替える
  • アニメーション中に擬似要素 ::view-transition 編集する
  • グリッド項目とそのコンテンツをグリッド エディターに合わせて配置する
  • カラー ピッカーを使用して色を変更する
  • スポイトでページ外の色をサンプリングする
  • 角度クロックで角度の値を変更する
  • シャドウ エディターを使用してボックスとテキストの影を変更する
  • イージング エディターを使用してアニメーションと切り替えのタイミングを編集する
    • プリセットを使用してタイミングを調整する
    • カスタムのタイミングを構成する
• 関連項目

要素を選択する

DevTools の 要素 ツールを使用すると、一度に 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 プロパティ名にマウス ポインターを合わせます。

   ヒントが表示されます。

   

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

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

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

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

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

CSS のヒントを再度オンにするには:

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

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

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

セレクターの特異性の表示

CSS セレクターにマウス ポインターを合わせると、セレクターの特異度の重みを示すヒントが表示されます。次のような特 異度: (0,0,1):

例:

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

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

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

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

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

   ヒントが表示され、 特異度: (0,0,1):

   

関連項目:

• 特異性 - MDN。

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

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

例:

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

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

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

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

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

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

   

関連項目:

• カスタム プロパティ (--*): CSS 変数 - MDN。

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

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

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

上の図では、[to-do-styles.css:5] をクリックすると、h1 CSS ルールが定義されている to-do-styles.css の 5 行目に移動します。

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

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

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

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

例:

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

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

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

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

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

   

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

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

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

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

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

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

CSS の at-rules を表示する

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

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

• @property- 以下の「@propertyルールの表示」を参照してください。
• @supports- 以下の「@supportsルールの表示」を参照してください。
• @scope- 以下の「@scopeルールの表示」を参照してください。
• @font-palette-values- 以下の「@font-palette-valuesルールの表示」を参照してください。
• @position-try- 以下の「@position-tryルールの表示」を参照してください。

@propertyルールの表示

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

[ スタイル] タブでそのようなプロパティの名前にマウス ポインターを合わせると、次の項目を含むヒントが表示されます。

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

例:

1. 新しいウィンドウまたはタブで [View @property at-rules] など、@property at-rule を使用するページに移動します。

2. 項目 3 段落を右クリックし、[検査] をクリックします。

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

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

   

   ヒントには次の内容が含まれます。

   • プロパティの値 ( 100px など)。
   • プロパティの記述子 (初期値など)。
   • 登録 されているプロパティ リンクを表示 。

4. [ 登録されているプロパティを表示 ] リンクをクリックします。

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

   

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

関連項目:

• @property: Web.dev で CSS 変数に超能力を与えます 。
• カスタム プロパティ (--*): MDN の CSS 変数 。

@supportsルールの表示

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

たとえば、 @supports ルールを表示するには、次のようにします。

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

2. [CIE LAB 色空間をサポートします!] を右クリックし、[ 検査] を選択します。

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

   

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

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

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

@scopeルールの表示

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

@scope at-rules を使用すると、CSS スタイルの範囲を指定することができます。つまり、特定の要素にスタイルを明示的に適用します。 MDN @scope CSS at-rule を参照してください。

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

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

   

2. [I'm the text that lives on a カード] を右クリックし、[検査] を選択します。

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

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

4. @scope ルールを調べます。

   

   この例では、card クラスを持つ要素 (<div>など) 内にある<p>要素について、@scope ルール (背景色 = プラム) がグローバル CSS background-color宣言 (アクアマリン) を上書きします。

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

5. [ スタイル] タブで、 plum をダブルクリックし、 Delete キーを押して、 ベージュを選択します。

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

@font-palette-valuesルールの表示

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

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

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

2. [new colors] を右クリックし、[ 検査] を選択します。

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

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

   

   この例では、 --New フォント パレットの値が、カラー フォントの既定値を上書きします。

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

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

   検査された Web ページでは、"新しい色" が青と赤として表示されます。

@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 値と @position-try CSS ルールを調べます。

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

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

   サブメニューが表示され、コマンドのリストが表示されます: LISTINGS、SPECIAL OFFERS、SIGN OUT。

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

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

   

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

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

   

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

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

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

   

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

関連項目:

• @position-try CSS at-rule, at MDN.

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

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

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

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

関連項目:

• MDN のボックス モデル。

要素の CSS の検索とフィルター処理

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

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

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

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

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

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

• ドロップダウン リスト。
• メニュー。
• 日付の選択。

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

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

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

フォーカスされたページをエミュレートしてみるには:

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

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

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

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

   DevTools が開き、メッセージ要素が表示されなくなります。 検査対象の Web ページではなく DevTools ウィンドウにフォーカスが表示されるため、メッセージ要素が消えます。

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

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

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

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

   

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

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

関連項目:

• Chrome for Developers ブログの「画面のフリーズ & 消えてしまう要素を検査する」をご覧ください。

擬似クラス

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

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

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

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

   DevTools が開きます。

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

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

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

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

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

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

   

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

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

• :active - MDN。
• :focus
• :focus-within
• :target
• :hover
• :focus-visible

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

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

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

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

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

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

複数のスタイルが競合する場合、CSS カスケードによって優先スタイルが決定されます。 Introduction to the CSS cascade at MDN を参照してください。

ルールの継承と優先順位をより深く理解するには、次のデモで継承された強調表示擬似要素を確認してください。

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

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

2. "私は親の強調表示擬似要素のスタイルを継承しました。 私を選んで!」

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

3. 「私は両親の強調表示擬似要素のスタイルを継承しました。 自分を選択!"、次に [ 検査] を選択します。

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

   

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

   [ スタイル] タブに、次のセクションが表示されます: Pseudo ::selection element:

   

関連項目:

• MDN の擬似要素。

カスケード レイヤーの表示

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

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

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

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

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

   DevTools が開きます。

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

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

   

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

   page層の特異度が最も高いため、要素の背景は緑色です。

関連項目:

• カスケードレイヤー (MDN)。

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

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

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

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

   DevTools が開きます。

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

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

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

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

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

   Web ページは印刷中のように表示されます。

7. 完了したら、 レンダリング ツールで、[ 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 ファイルをクリックします。

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

   

印刷プレビュー モードの強制

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

CSS のコピー

[スタイル] タブの単一のドロップダウン メニューから、個別の CSS ルール、宣言、プロパティ、または値をコピーできます。「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 プロパティを右クリックします。

   

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

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

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

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

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

   • Copy declaration as JS. JavaScript 構文のプロパティとその値をコピーします。 propertyInCamelCase: 'value'

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

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

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

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

CSS の変更

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

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

• ページ読み込み全体で CSS をオーバーライドします。 「 ローカル コピーで Web ページのリソースを上書きする ([上書き] タブ)」を参照してください。

• 変更された 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 キー + ↑キー (macOS)	0.1 ずつ増加します。
上方向キー	1 ずつ増分します。または、現在の値が -1 から 1 の間にある場合は 0.1 ずつ増えます。
Shift + ↑	10 ずつ増やします。
Ctrl+Shift+PgUp (Windows、Linux)、Shift+Command+UpArrow (macOS)	100 ずつ増やします。

減らすには、上方向 (または PageUp) キーではなく下方向 (またはPageDown) キーを押します。

長さの値を変更する

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

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

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

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

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

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

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

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

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

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

   Ctrl: 100 ずつ増加します。 シフト: 10 ずつ増やします。 Alt: 0.1 ずつ増分します。

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

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

7. もう一度マウスホイールを動かすか、Ctrl (+/-100)、Shift (+/-10)、または Alt (+/-0.1) キーを押しながら ↑キーと ↓ キーを押します。

   検査した 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および自動ダーク モード オプションを有効にするためのショートカットです。

関連項目:

• [レンダリングされたページでダーク モードまたはライト スキームをエミュレートする] でレンダリング ツールを使用してダーク モードまたはライト モードをエミュレートする。
• ダーク テーマとライト テーマのコントラストの問題を確認します
• Chrome for Developers ブログの自動ダーク テーマ。
• prefers-color-scheme: こんにちは、暗闇、web.dev の私の古い友人 。

クラスの切り替え

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

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 編集する

参照:

• アニメーション中に ::view-transition 擬似要素を編集する アニメーション: Chrome ドキュメントで CSS アニメーション効果を検査および変更します。
• Chrome ドキュメントの View Transition API を使用してスムーズなトランジションを実現する。

グリッド項目とそのコンテンツをグリッド エディターに合わせて配置する

参照:

• グリッド アイテムとそのコンテンツを配置する:CSS グリッド レイアウトの検査のグリッド エディター ポップアップ。

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

カラー ピッカーには、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、または Hex 表現。
5	カラー パレット	正方形をクリックして色を変更します。
6	色相
7	不透明度
8	表示値スイッチャー	現在の色の RGBA、HSLA、および Hex 表現を切り替えます。
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 要素のアニメーション タイミング関数または遷移タイミング関数プロパティの値を変更します。

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

1. DevTools の 要素ツールの DOM ツリーで、CSS アニメーションまたは画面切り替えが適用されている要素を選択します。

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

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

2. Ctrl+F を押して「スピナー」を見つけて、<div class="animation-demo good">内の<div class="spinner">要素を選択します。

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

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

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

   

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

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

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

2. 4 つのピッカー ボタンのうち 1 つをクリックします。

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

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

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

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

   • キュービック ベジエ プリセット:

   タイミングキーワード (keyword)	プリセット	キュービック ベジエ
   ease-in-out	入力、出力、サイン	cubic-bezier(0.45, 0.05, 0.55, 0.95)
   ease-in-out	In Out, Quadratic	cubic-bezier(0.46, 0.03, 0.52, 0.96)
   ease-in-out	In, 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	In Out, Back	cubic-bezier(0.68, -0.55, 0.27, 1.55)

   タイミングキーワード (keyword)	プリセット	キュービック ベジエ
   ease-in	In, Sine	cubic-bezier(0.47, 0, 0.75, 0.72)
   ease-in	In, Quadratic	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	In, Back	cubic-bezier(0.6, -0.28, 0.74, 0.05)
   ease-in	高速出力、線形入力	cubic-bezier(0.4, 0, 1, 1)

   タイミングキーワード (keyword)	プリセット	キュービック ベジエ
   イーズアウト	出力、サイン	cubic-bezier(0.39, 0.58, 0.57, 1)
   イーズアウト	Out, 2 次	cubic-bezier(0.25, 0.46, 0.45, 0.94)
   イーズアウト	Out, Cubic	cubic-bezier(0.22, 0.61, 0.36, 1)
   イーズアウト	Linear Out、Slow In	cubic-bezier(0, 0, 0.2, 1)
   イーズアウト	アウト、バック	cubic-bezier(0.18, 0.89, 0.32, 1.28)

関連項目:

• MDN のベジエ曲線。

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

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

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

  

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

  

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

関連項目

• CSS の表示と変更を開始します。
• 要素の CSS を表示します。
• JavaScript デバッグ機能で、縮小された JavaScript ファイルを整形出力で再フォーマットします。
• 表示オプションや視覚障穣が異なる Web ページの外観を確認するためのレンダリング ツール。
• クラスに擬似状態を追加します。
• コマンド メニュー
• DevTools を強制的に印刷プレビュー モードにします。
• ローカル コピーで Web ページ リソースを上書きする ([上書き] タブ)。
• ワークスペース内のファイルを編集して保存します ([ソース] ツールの [ワークスペース] タブ)。
• [レンダリングされたページでダーク モードまたはライト スキームをエミュレートする] でレンダリング ツールを使用してダーク モードまたはライト モードをエミュレートする。
• ダーク テーマとライト テーマのコントラストの問題を確認します
• グリッド アイテムとそのコンテンツを配置する:CSS グリッド レイアウトの検査のグリッド エディター ポップアップ。
• カラー ピッカーを使用してテキストの色のコントラストをテストする
• [スタイル] ウィンドウのキーボード ショートカット。

デモ:

• To Do アプリ
• @propertyルールの表示
• @supportsルールの表示
• @scopeルールの表示
• @font-palette-valuesルールの表示
• @position-tryルールの表示
• フォーカスされたページをエミュレートする
• 擬似要素を強調表示する
• カスケード レイヤー
• 1DIV
• アニメーション付きプロパティ デモ ページ

MDN:

• CSS カスタム プロパティ (変数) の使用
• padding CSS プロパティ
• 特異性
• カスタム プロパティ (--*): CSS 変数
  • カスタム プロパティ (--*): CSS 変数
• @scope CSS の規則
• @position-try CSS at-rule
• @font-palette-values CSS at-rule
• ボックス モデル
• ページ可視性 API
• :active
• :focus
• :focus-within
• :target
• :hover
• :focus-visible
• CSS カスケードの概要
• 擬似要素
• カスケード レイヤー。
• CSS 構文の基本CSS とは?
• 特異性のセレクターの種類。
• アニメーション タイミング 関数
• transition-timing-function
• ベジェ曲線

GitHub:

• VS Code カスタム データ - "microsoft / vscode-custom-data" リポジトリ。

Web.dev:

• @property: CSS 変数にスーパーパワーを与える
• prefers-color-scheme: こんにちは暗闇、私の古い友人

開発者向け Chrome ブログ:

• 画面のフリーズ & 消える要素を検査する
• 自動ダーク テーマ

Chrome ドキュメント:

• アニメーション中に ::view-transition 擬似要素を編集する アニメーション: Chrome ドキュメントで CSS アニメーション効果を検査および変更します。
• Chrome ドキュメントの View Transition API を使用してスムーズなトランジションを実現する。

material.io:

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

注:

このページの一部の情報は、 Google によって 作成および共有されている著作物に基づいており、 Creative Commons Attribution 4.0 International License に記載されている条項に従って使用されています。 元のページは ここ にあり、Kayce Basques によって作成されています。

この著作物は、 Creative Commons Attribution 4.0 International License に従って使用許諾されています。