CSS の表示と変更

Kayce Basques 氏
Kayce Basques
ソフィア・エメリアノバ
Sofia Emelianova

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

要素の CSS を表示する

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

    調べて!

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

    ハイライト表示されている要素です。

  3. [DOM Tree] で、Inspect me! 要素の data-message 属性の値を見つけます。

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

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

    [Styles] ペインには、[DOM Tree] で現在選択されている要素に適用されている CSS ルールが表示されます(この要素は Inspect me! 要素のままです)。

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

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

CSS 宣言を要素に追加する

要素の CSS 宣言を変更または追加する場合は、[Styles] ペインを使用します。

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

    背景色を追加して。

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

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

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

[Styles] ペインで要素に CSS 宣言を追加する。

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

[Styles] ペインでは、CSS クラスを要素に適用または削除した場合に要素の外観を確認できます。

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

    自分にクラスを追加

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

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

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

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

[Styles] ペインを使用して、要素に CSS 疑似状態を恒久的に適用します。DevTools は、:active:focus:hover:visited などをサポートしています。

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

    カーソルを合わせろ!

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

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

  4. [:hover] チェックボックスをオンにします。要素にカーソルを合わせなくても、背景色は以前と同様に変化します。

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

要素のサイズを変更する

[Styles] ペインにある [Box Model] のインタラクティブ図を使用して、要素の幅、高さ、パディング、マージン、枠線の長さを変更します。

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

    余白を変えて!

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

  3. [Styles] ペインの [Box Model] 図で、[padding] にカーソルを合わせます。要素のパディングがビューポートでハイライト表示されます。 要素のパディング。

  4. [Box Model] の左余白をダブルクリックします。現在、要素にマージンがないため、left-margin の値は - です。

  5. 100」と入力して Enter キーを押します。 要素の左余白を変更すると、

[Box Model] はデフォルトでピクセルに設定されていますが、25%10vw などの他の値も指定できます。