デベロッパーツール（Chrome検証ツール）について
【要参考】
①デベロッパーツール
CSS でデザインを始める前に | HTML-CSS 入門講座 | 情報デザイン工房 濱屋 ※L3.9以下が分かりやすい
②リセットCSS
CSS でデザインを始める前に | HTML-CSS 入門講座 | 情報デザイン工房 濱屋 ※L3.7以下が分かりやすい
デベロッパーツールはGoogle Chromeに標準で搭載されているデバッグツールで、WebサイトのHTML構成や表示スピード、通信状況などを確認できます。 特別なツールやプログラムを使わずブラウザのみで手軽に利用でき、エンジニアの私もWebサービスの開発やテスト、デザインのチェックを行うときに頻繁に使っています。
【ワンポイントアドバイス】
ソースコードは実際に記述したコードの内容で、デベロッパーツールはブラウジングされた内容として出力されます。コードの誤り等を見つけるのに便利ですので、しっかり使いこなせるようにしておきましょう。
【参考サイト】
- Google Chromeデベロッパーツールとは？使い方や簡易的な …
- Chromeのデベロッパーツールって何？何が出来るか徹底解説 …
- 初心者向け！Chromeの検証機能（デベロッパーツール）の …
リセットCSSについて
ブラウザが持っているデフォルトのスタイルを打ち消すCSSをリセットCSSといいます。リセットCSSを使用することでブラウザが持っているスタイルに依存することなく、Webページを自由にデザインすることが可能になります。リセットCSSには、正解のリセットCSSというものはありません。自分のコーディングスタイルに合わせてリセットCSSも成長させてください。
＜流れ＞
①リセットCSS（reset.css）で一旦余計な箇所のデフォルトスタイルを打ち消し
②スタイルCSS（style.css）でデザインを作っていく
※リセットCSSもスタイルCSSもHTMLファイルのheadに書くけど、必ず、
<link href=”reset.css” rel=”stylesheet”>
<link href=”style.css” rel=”stylesheet”>
↑のように、</head>の直前にリセット、スタイルの順で書く
（リセットしてからスタイル設定の順のため）
◆先生より
リセットCSSはデザインの流行などがあり、それに合わせる形などでもネットにたくさんあるが、数も多く、自分で書いていないのでどこをリセットしたかがわからない。
自分で書いた方がいいとのこと。
【参考サイト】