CSS の表示と変更

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

要素の CSS を表示する

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

    検査して

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

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

  3. [DOM Tree] で、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! 要素を右クリックして、[Inspect] を選択します。

    クラスを追加して

  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. Box Model を表示するには、[Styles] タブのアクションバーにある サイドバーを表示します。 [サイドバーを表示] ボタンをクリックします。 [サイドバーを表示] ボタン。

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

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

  5. 「100」と入力して Enter キーを押します。 要素の左マージンの変更。

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