Google Chromeの検証ツールを立ち上げ、表示を確認してみましょう。
Chrome検証ツールを立ち上げる
Google ChromeでWebページを開き、右クリックメニューで「検証」を選びます。
Windowsの場合はF12キーもしくはctrl+shift+I
Macの場合はCommand＋Option＋Iキーでも可。
画面の下半分、もしくは別ウィンドウが表示されます。 HTMLなどが書かれている、下図の点線部分が検証ツールです。
検証ツールをどこに出すかは右上の「・」が３つ縦に並んだアイコンをクリック。
「Dock side」の横に並んでいるアイコンをクリックすると、アイコン通りの場所に表示されます。
PCブラウザ向けの表示の確認ならボトムか別ウィンドウ、 スマホ向け表示の確認であればサイド表示 あたりが見やすいのではないでしょうか。
お好みに合わせて表示場所を設定してください。
検証項目について
デフォルトの状態であれば、検証ツールを立ち上げると下図３つの項目が表示されます。
（Consoleはウィンドウ下にピッタリとくっついていて分かりにくいので、ドラッグで持ち上げています）
他にもGoogle Chromeの検証ツールには色々な項目が用意されていますが、 HTMLがメインのWebサイトをデバックする分には、上記３項目でほぼ足ります。
それぞれの部分で見られる内容を紹介します。
==========================================
Elements ソースコード（HTMLの記述）が表示されます。 気になる部分のボックス構成が確認できるほか、 要素名を打ち換えることも可能です。
Styles Elementsと連動しており、要素を選択すると適用されているstyle(css)を表示してれます。 cssプロパティを追加したり、プロパティ値を変更することも出来ます。
Console 主にJavaScriptのデバックに使います。 エラーを起こしている部分や警告ログを見ることが出来ます。 HTMLファイルのリンク切れなどがある場合も教えてくれますよ。
詳しい解説は公式マニュアル(Chrome DevTools)をご確認ください。
==========================================
検証ツールを使ってみよう
早速検証ツールを使ってみましょう。
課題でも使用した 東京ビートルズ https://s3.amazonaws.com/skillhub/kadai_coding/index.html のサイトを開いて、検証ツールを立ち上げます。
歯車アイコンの横に赤いバツが表示されていますね。
バツが付いている理由はConsoleで教えてくれるので、 ウィンドウ下部からConsoleのタブをドラッグして引き上げてみましょう。
エラー内容がが見えるようになります。
上記のエラーはちょっと特殊（サーバー側との問題）なのでちょっと分かりにくいですね。
例えば画像へのパスを打ち間違えていた時には
上図のように教えてくれます。
errorが一つもないことが理想です。 検証ツールで赤いバツが表示されていたら必ず内容を確認するようにしましょう。
次回はより実用的なHTML/CSSの確認と変更を行います。