GoogleChromeの「デベロッパーツール」の基本的な使い方を見ておこう!

動画レクチャー
GoogleChromeの「デベロッパーツール」の基本的な使い方〜要素とスタイルを検証する方法〜

この動画のポイント&おさらい

  • 右端上のボタンから「Dock side」から、ウィンドウを別々の表示にする
  • 左側「Elements」HTMLが表示されている
  • HTMLは階層構造になっている
  • 階層構造が折りたたまれていて、開閉式になっている
  • 右側「Styles」スタイルシート(CSS)
  • 左端上のボタンをクリックした状態で、特定の要素を検証できる
  • 調べたい部分にマウスを移動してクリックする
  • 調べたい部分のCSSを見てみよう
  • CSSを追加して、シミュレーションすることができる
  • 色々とCSSをいじってみよう
  • チェックマークを入れると適用、外すと適用されなくなる(コメントアウト)
  • シミュレーションなので、変更が保存されているわけではない!
  • デベロッパーツールはある程度のCSSなどのスキルがあればとても便利

コメント