CSS の表示と変更を開始する
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スタイルの値を見つけてコピーします。![検査された要素に適用された CSS クラスが [スタイル] パネルで強調表示されています](index-images/inspect-me-styles.png)
ページ ビューで、[埋め込みの値] テキスト ボックスに
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 宣言を追加する](index-images/add-background-color-to-me-styles-p.png)
要素に 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 では、 :active、 :focus、 :hover、 :visitedがサポートされています。
まず、 前の「要素の CSS を表示する」チュートリアルを 実行することをお勧めします。
新しいウィンドウまたはタブで CSS サンプル デモ ページを開きます。
Hover Over Me!テキストにカーソルを合わせます。 背景色が変わります。Hover Over Me!テキストを右クリックし、[検査] を選択します。[ スタイル ] パネルで、[ 要素の状態の切り替え (:hov)] ボタンをクリックします。
[ :hover]\(:hover\) チェック ボックスをオンにします。 実際に要素の上にマウス ポインターを置いていない場合でも、背景色は最初の手順で行ったように変わります。
次のスクリーンショットは、要素の
:hover擬似状態を切り替える結果を示しています。
要素の寸法を変更する
要素の幅、高さ、パディング、余白、罫線の長さを変更するには、[スタイル] パネルの [ボックス モデル] 対話型図を使用します。
まず、 前の「要素の CSS を表示する」チュートリアルを 実行することをお勧めします。
新しいウィンドウまたはタブで CSS サンプル デモ ページを開きます。
Change My Margin!テキストを右クリックし、[検査] を選択します。[スタイル] パネルの [ボックス モデル] 図で、パディングの上にマウス ポインターを合わせます。 要素のパディングがビューポートで強調表示されます。
DevTools ウィンドウのサイズによっては、[ スタイル] パネルの下部までスクロールして ボックス モデルを表示する必要がある場合があります。
ボックス モデルの左側の余白をダブルクリックします。現在、値は
-です。-は、要素にmargin-leftの値がないことを意味します。「
100px」と入力し、 Enter キーを押します。 ボックス モデルの既定値はピクセルですが、25%や10vwなど、他の値も受け入れます。要素のパディングの上にマウス ポインターを置きます。
要素の左余白を変更する:
メディア クエリのデバッグ
CSS メディア クエリ は、Web サイトを各ユーザーの構成設定の変更に反応させる方法です。 最も一般的なユース ケースは、ビューポートのサイズに応じてページに異なる CSS レイアウトを提供することです。
個別のレイアウトを使用すると、モバイル デバイス用の 1 列レイアウトと複数列レイアウトが可能になります。使用可能な画面の不動産が増える場合は、複数列レイアウトを使用できます。
CSS で定義したメディア クエリをデバッグまたはテストするには:
新しいウィンドウまたはタブで CSS サンプル デモ ページを開きます。
DevTools を開くには、Web ページを右クリックし、[ 検査] を選択します。
[ デバイス エミュレーションの切り替え ] (
![[デバイス エミュレーション] アイコン](index-images/device-emulation-icon-light-theme.png)
) ボタンをクリックします。 または、DevTools にフォーカスがある場合は、 Ctrl + Shift + M (Windows、Linux) または Command + Shift + M (macOS) を押します。デバイス ツール バーが Web ページで開き、Web ページが [デバイス エミュレーション] ウィンドウに表示されるようになりました。
デバイス ツール バーを開き、右上の [ その他のオプション ] (
) ボタンをクリックし、[ メディア クエリの表示] を選択します。
Web ページの上にある色付きのバーは、さまざまなメディア クエリを表します。
バーの境界にマウス ポインターを合わせると、さまざまなメディア クエリの値が表示されます。 各メディア クエリ値をクリックして、一致するように Web ページのサイズを変更します。
メディア クエリを含む CSS ファイルを開き、ソース コードを編集するには、色付きのバーのいずれかを右クリックし、[ ソース コードで表示] を選択します。 [ソース] ツールが表示され、CSS ファイルで対応するメディア クエリが強調表示されます。
注
このページの一部の情報は、Google によって作成および共有されている著作物に基づいており、Creative Commons Attribution 4.0 International License に記載されている条項に従って使用されています。 元のページは ここに あり、ケイス・バスクによって作成されています。
