CSS

デベロッパーツールを使ってみよう

Chromeのデベロッパーツールを使って読み込まれたCSSについて確認していきます。

  • デベロッパーツールの起動
  • Elmentsパネル
  • HTML/CSSの確認
  • Styles/Computedタブ

デベロッパーツールの起動

・設定した CSS がブラウザでどう解釈されるか確認する方法を見ていきましょう。Chrome ではそのためのツールが用意されていて、3つの点が縦に並んだアイコンのメニューから「その他のツール」->「デベロッパーツール」と選んであげれば OK です。

・ショートカットもあり,macOS だと、 Command + Option + I 、 Windows だったら、 Control + Shift + I で OK です。

Elmentsパネル

・HTML/CSS の学習に限って言えば、Elements パネルが使えるようになれば OK です。Elements パネルの左側ではブラウザが解釈した HTML 、右側では CSS で設定されたスタイルを確認することができます。

HTML/CSSの確認

・h1 を探してみましょう。たどっていく方法と矢印アイコンを使って、クリックしたあとに直接要素をクリックする方法があります。もしくはデベロッパーツールが開いていない状態で調べたい要素を右クリックして、「検証」とすると、その要素を選択した状態でデベロッパーツールを開いてくれるので覚えておくと良いかと思います。

セレクターを選択すると前回設定した color プロパティが表示されていて、 styles.css の 1 行目に書かれていると表示されています。

・下のほうには別のプロパティがいろいろ設定されていますが、ブラウザが標準で持っている CSS になります。

Styles/Computedタブ

・設定されているこれらのスタイルをまとめて一覧で見せてくれるのが、こちらの Computed タブになります。

・このデベロッパーツールは他にもできることがたくさんあるのですが、まずはこちらでスタイルが確認できるようになっておくと良いでしょう。

ー広告ー

 

 






-CSS