CSS の表示と変更

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

要素の CSS を表示する

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

    検査して

  2. DOM Tree で、Inspect me! 要素が青色でハイライト表示されていることを確認します。

    ハイライト表示された要素。

  3. DOM ツリーで、Inspect me! 要素の data-message 属性の値を確認します。

  4. 下のテキスト ボックスに属性の値を入力します。

  5. [要素] > [スタイル] タブで、aloha クラスルールを見つけます。

    [スタイル] タブには、DOM ツリーで選択した要素に適用されている CSS ルールが一覧表示されます。この要素は引き続き Inspect me! 要素です。

  6. aloha クラスは padding の値を宣言しています。この値と単位をスペースなしで下のテキスト ボックスに入力します。

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

要素に CSS 宣言を追加する

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

  1. 下の Add a background color to me! テキストを右クリックし、[検証] を選択します。

    背景色を追加して

  2. [スタイル] タブの上部にある element.style をクリックします。

  3. 「background-color」と入力して Enter キーを押します。

  4. 「honeydew」と入力して Enter キーを押します。DOM ツリーでは、要素にインライン スタイル宣言が適用されていることがわかります。

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

要素に CSS クラスを追加する

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

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

    クラスを追加して

  2. [.cls] をクリックします。DevTools にテキスト ボックスが表示され、選択した要素にクラスを追加できます。

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

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

クラスに疑似状態を追加する

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

  1. 以下の Hover over me! のテキストにカーソルを合わせます。背景色が変更されます。

    カーソルを合わせる

  2. Hover over me! テキストを右クリックし、[検証] を選択します。

  3. [スタイル] タブで、:hov をクリックします。

  4. [:hover] チェックボックスをオンにします。実際に要素にホバーしていなくても、背景色が以前と同じように変化します。

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

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

要素のサイズを変更する

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

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

    マージンを変更したい

  2. ボックスモデルを表示するには、[スタイル] タブのアクションバーで サイドバーを表示します。 [サイドバーを表示] ボタンをクリックします。 [サイドバーを表示] ボタン。

  3. [スタイル] タブの [ボックスモデル] 図で、[パディング] にカーソルを合わせます。要素のパディングがビューポートでハイライト表示されます。 要素のパディング。

  4. [ボックスモデル] で左の余白をダブルクリックします。現在、要素には余白がないため、margin-left の値は - です。

  5. 「100」と入力して Enter キーを押します。 要素の margin-left を変更する。

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