CSS の表示と変更を開始する

[アーティクル]
10/19/2023

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) によって作成されています。

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