CSS の表示と変更を開始する
DevTools を使用してページの CSS を表示および変更する方法の基本については、この記事の対話型チュートリアル セクションに従ってください。
要素の CSS を表示する
新しいウィンドウまたはタブで CSS サンプル デモ ページを開きます。(新しいウィンドウまたはタブでリンクを開くには、リンクを右クリックします。 または、 Ctrl キー (Windows、Linux の場合) または コマンド (macOS の場合) を長押しし、リンクをクリックします。
テキストを
Inspect Me!
右クリックし、[ 検査] を選択します。[要素] ツールの [DOM ツリー] パネルで、
Inspect Me!
要素が強調表示されています。要素で
Inspect Me!
、 属性の値をdata-message
見つけてコピーします。ページ ビューで、[データ メッセージの
data-message
値] テキスト ボックスにコピーした 値を 入力します。テキストを
Inspect Me!
右クリックし、[ 検査] を選択します。DevTools の [要素 ] ツールで、[ スタイル ] パネルを選択します。 要素が
Inspect Me!
[スタイル] パネルで強調表示されています。要素で
Inspect Me!
、クラス規則をaloha
見つけます。 このルールは要素に適用されているため、Inspect Me!
表示されます。クラスで
aloha
、スタイルの値をpadding
見つけてコピーします。ページ ビューの [埋め込みの値] テキスト ボックスに値を貼り付けます
padding
。
要素に CSS 宣言を追加する
CSS 宣言を要素に変更または追加する場合は、[ スタイル] パネルを使用します。
まず、 前の「要素の CSS を表示する」チュートリアルを 実行することをお勧めします。
新しいウィンドウまたはタブで CSS サンプル デモ ページを開きます。
テキストを
Add A Background Color To Me!
右クリックし、[ 検査] を選択します。[スタイル] パネルの上部付近をクリック
element.style
します。ドロップダウン リストから入力
background-color
または選択し、 Enter キーを押します。色のドロップダウン リストから入力
honeydew
または選択し、 Enter キーを押します。 色を選択すると、要素に適用されるインライン スタイル宣言が DOM ツリーに表示されます。宣言は
background-color:honeydew
、[スタイル] パネルのセクションをelement.style
使用して 要素に適用されます。
要素に CSS クラスを追加する
CSS クラスが要素に適用されたとき、または要素から削除されたときの要素の外観を表示するには、[ スタイル ] パネルを参照してください。
まず、 前の「要素の CSS を表示する」チュートリアルを 実行することをお勧めします。
新しいウィンドウまたはタブで CSS サンプル デモ ページを開きます。
テキストを
Add A Class To Me!
右クリックし、[ 検査] を選択します。[ 要素クラス (.cls)] ボタンをクリックします。 DevTools には、検査対象のページ要素に CSS クラスを追加できるテキスト ボックスが表示されます。
[新しいクラスの追加] テキスト ボックスに「」と入力
color_me
し、Enter キーを押します。 [ 新しいクラスの追加 ] テキスト ボックスの下にチェック ボックスが表示され、クラスのオンとオフを切り替えることができます。 要素に他のAdd A Class To Me!
クラスが適用されている場合は、ここから各クラスを切り替えることもできます。クラスは
color_me
、スタイル パネルの .cls セクションを使用して 要素に適用されます。
擬似状態をクラスに追加する
CSS 擬似状態を要素に永続的に適用するには、[ スタイル] パネルを使用します。 DevTools では、、、:hover
:focus
、および が:visited
サポートされています:active
。
まず、 前の「要素の CSS を表示する」チュートリアルを 実行することをお勧めします。
新しいウィンドウまたはタブで CSS サンプル デモ ページを開きます。
テキストの上にマウス ポインターを
Hover Over Me!
合わせます。 背景色が変わります。テキストを
Hover Over Me!
右クリックし、[ 検査] を選択します。[ スタイル ] パネルで、[ 要素の状態の切り替え (:hov)] ボタンをクリックします。
[ :hover]\(:hover\) チェック ボックスをオンにします。 実際に要素の上にマウス ポインターを置いていない場合でも、背景色は最初の手順で行ったように変わります。
次のスクリーンショットは、要素で擬似状態を
:hover
切り替える結果を示しています。
要素の寸法を変更する
要素の幅、高さ、パディング、余白、罫線の長さを変更するには、[スタイル] パネルの [ボックス モデル] 対話型図を使用します。
まず、 前の「要素の CSS を表示する」チュートリアルを 実行することをお勧めします。
新しいウィンドウまたはタブで CSS サンプル デモ ページを開きます。
テキストを
Change My Margin!
右クリックし、[ 検査] を選択します。[スタイル] パネルの [ボックス モデル] 図で、パディングの上にマウス ポインターを合わせます。 要素のパディングがビューポートで強調表示されます。
DevTools ウィンドウのサイズによっては、[ スタイル] パネルの下部までスクロールして ボックス モデルを表示する必要がある場合があります。
ボックス モデルの左側の余白をダブルクリックします。現在の値
-
は です。 は-
、 要素に の値がないことを意味しますmargin-left
。「」と入力
100px
し、 Enter キーを押します。 ボックス モデルの既定値はピクセルですが、 や10vw
など25%
、他の値も受け入れます。要素のパディングの上にマウス ポインターを置きます。
要素の左余白を変更する:
メディア クエリのデバッグ
CSS メディア クエリ は、Web サイトを各ユーザーの構成設定の変更に反応させる方法です。 最も一般的なユース ケースは、ビューポートのサイズに応じてページに異なる CSS レイアウトを提供することです。
個別のレイアウトを使用すると、モバイル デバイス用の 1 列レイアウトと複数列レイアウトが可能になります。使用可能な画面の不動産が増える場合は、複数列レイアウトを使用できます。
CSS で定義したメディア クエリをデバッグまたはテストするには:
新しいウィンドウまたはタブで CSS サンプル デモ ページを開きます。
DevTools を開くには、Web ページを右クリックし、[ 検査] を選択します。
[ デバイス エミュレーションの切り替え ] () ボタンをクリックします。 または、DevTools にフォーカスがある場合は、 Ctrl + Shift + M (Windows、Linux) または Command + Shift + M (macOS) を押します。
デバイス ツール バーが Web ページで開き、Web ページが [デバイス エミュレーション] ウィンドウに表示されるようになりました。
デバイス ツール バーを開き、右上の [ その他のオプション ] () ボタンをクリックし、[ メディア クエリの表示] を選択します。
Web ページの上にある色付きのバーは、さまざまなメディア クエリを表します。
バーの境界にマウス ポインターを合わせると、さまざまなメディア クエリの値が表示されます。 各メディア クエリ値をクリックして、一致するように Web ページのサイズを変更します。
メディア クエリを含む CSS ファイルを開き、ソース コードを編集するには、色付きのバーのいずれかを右クリックし、[ ソース コードで表示] を選択します。 [ソース] ツールが表示され、CSS ファイルで対応するメディア クエリが強調表示されます。
注
このページの一部の情報は、Google によって作成および共有されている著作物に基づいており、Creative Commons Attribution 4.0 International License に記載されている条項に従って使用されています。 元のページは ここに あり、 Kayce Basques (テクニカル ライター、Chrome DevTools & Lighthouse) によって作成されています。