このページは Cloud Translation API によって翻訳されました。

CSS の表示と変更

Kayce Basques

Sofia Emelianova

以下のインタラクティブなチュートリアルで、Chrome DevTools を使用してページの CSS を表示、変更する方法の基本を学びます。

要素の CSS を表示する

下の Inspect me! テキストを右クリックし、[検証] を選択します。DevTools の [要素] パネルが開きます。

検査して
DOM Tree で、Inspect me! 要素が青色でハイライト表示されていることを確認します。
DOM ツリーで、Inspect me! 要素の data-message 属性の値を確認します。
下のテキストボックスに属性の値を入力します。
[要素] > [スタイル] タブで、aloha クラスルールを見つけます。

[スタイル] タブには、DOM ツリーで選択した要素に適用されている CSS ルールが一覧表示されます。この要素は引き続き Inspect me! 要素です。
aloha クラスは padding の値を宣言しています。この値と単位をスペースなしで下のテキストボックスに入力します。

手順 1 のスクリーンショットのように、DevTools ウィンドウをビューポートの右側にドッキングする場合は、DevTools の配置を変更するをご覧ください。

要素の CSS 宣言を変更または追加する場合は、[スタイル] タブを使用します。

[スタイル] タブから要素に CSS 宣言を追加する。

[スタイル] タブを使用すると、CSS クラスを要素に適用または削除したときに要素がどのように表示されるかを確認できます。

下の Add a class to me! 要素を右クリックし、[検証] を選択します。

クラスを追加して
[.cls] をクリックします。DevTools にテキストボックスが表示され、選択した要素にクラスを追加できます。
[新しいクラスを追加] テキストボックスに color_me と入力し、Enter キーを押します。[新しいクラスを追加] テキストボックスの下にチェックボックスが表示されます。ここでクラスのオンとオフを切り替えることができます。Add a class to me! 要素に他のクラスが適用されている場合は、ここでそれらのクラスのオンとオフを切り替えることもできます。

要素に color_me クラスを適用します。

[スタイル] タブを使用して、CSS 疑似状態を要素に適用します。

要素のホバー疑似状態を切り替える。

詳細については、疑似クラスを切り替えるをご覧ください。

[スタイル] タブの [ボックスモデル] インタラクティブダイアグラムを使用して、要素の幅、高さ、パディング、余白、枠線の長さを変更します。

下の Change my margin! 要素を右クリックし、[検証] を選択します。

マージンを変更したい
ボックスモデルを表示するには、[スタイル] タブのアクションバーで [サイドバーを表示] ボタンをクリックします。
[スタイル] タブの [ボックスモデル] 図で、[パディング] にカーソルを合わせます。要素のパディングがビューポートでハイライト表示されます。
[ボックスモデル] で左の余白をダブルクリックします。現在、要素には余白がないため、margin-left の値は - です。
「100」と入力して Enter キーを押します。

ボックスモデルのデフォルトはピクセルですが、25% や 10vw などの他の値も使用できます。