解答：5つのレイアウト崩れの修正方法【Chrome検証ツールの使い方入門】

Google Chromeの検証ツールを使って、練習ファイルにあるレイアウト崩れを直していきましょう。

• ①キャッチコピーの表示・非表示
• ②ヘッダーナビゲーションの隙間
• わからない時は他のブラウザで見てみる
• ③自社プロダクト、1つめの横並び
• ④自社プロダクト、２個めのアイテム
• ⑤サイトバーのお知らせリスト

①キャッチコピーの表示・非表示

PCで表示されていない、キャッチコピーを見てみましょう。
画面上に表示されていないので、要素パネルから探します。

<div class="copy">をクリック。
スタイルパネルを見ると、display:noneというCSSが表示されています。

チェックを外して無効化すると、キャッチコピーが表示されました。

スマホ幅に切り替えてみましょう。
チェックを外したままですので、スマホ幅でもキャッチコピーが表示されています。

ここまでの結果から、スマートフォン向けのスタイル指定が「display:none」が、幅に関係なく適用されていると考えられます。
メディアクエリが効いていない可能性が高いでしょう。

style.cssを開いて確認してみます。
.row{}の閉じカッコが重複して、メディアクエリが閉じてしまっていました。

.copy{}の後でメディアクエリを閉じましょう。

cssファイルを上書き保存して確認すると、スマホ幅のみ非表示になります。

②ヘッダーナビゲーションの隙間

ヘッダーナビゲーションの間隔をみてみましょう。

ulタグを選択すると、会社概要とお問い合わせの間に、四角が1つあります。
この表示のされ方は、4つのアイテムが横並びになっている状態です。

ですが、要素パネルを見てもli要素は３つだけです。

こんな時の原因は「空白」が大半。
全角スペースが入っていないか、ドラッグしてみましょう。

ビンゴ。全角スペースが入っていました。

エディタの方も、よく見ると最後の<li>の前でインデント線が切れています。

全角スペースを削除しつつ、字下げ幅も合わせましょう。

保存してもう一度ブラウザで確認すると、空白の四角が消えました。
同じ間隔で並んでいます。

わからない時は他のブラウザで見てみる

原因がわからん！という時は、Chrome以外のブラウザを使ってみるのもアリです。

大抵のブラウザには検証機能がついていて、使い方も概ね同じ。
ただ、ブラウザの色というか個性のようなものがあります。

例えばFirefox。
デベロッパーモードは表示画面を右クリック→調査で起動します。

Firefoxでは、全角スペースが入っている箇所は[空白]と表示されます。
また、レイアウトパネルではFlexアイテムとして扱われている要素の一覧も表示してくれています。親切ですね。

別のブラウザのデベロッパーモードで見てみることで、ミスに気付けるかもしれません。全角スペースに限らず「わからない……」となった時は、視点を切り替えるような気持ちで別のブラウザも使ってみましょう。

③自社プロダクト、1つめの横並び

<main>タグ内、自社プロダクトのセクションを直していきましょう。
まず、横並び配置している画像とテキスト間の余白ですね。

検証ツールでテキスト（.description）をクリックしても、スタイルパネルには何の表示もされません。打ち消されているわけではなく、.descriptionへのスタイル指定自体が無いことになっています。

このような場合、原因はhtmlのクラス名とcssセレクタが一致していない可能性が大。
CSSファイルをよく見てみましょう。

discriptionと書くべきところが、discripionになっていました。
tが抜けています。

セレクタ名を直して保存すると、ちゃんとcssが効くようになります。

④自社プロダクト、２個めのアイテム

自社プロダクト、２個め。
横並びレイアウトが崩れてしまっている箇所をみていきます。

横並びにするためにdisplay:flex;を指定している「row」クラス。
これが画像のところまでで、終わってしまっています。

はみ出した<div class="description">はFlexアイテムではないので、横には並びません。

<div class="description">がrowからはみ出しているのは、要素＝HTMLファイル側の問題です。
index.htmlを見てみましょう。

インデントがガタガタすぎて、なんだかよく分かりません。
まずはインデントを整えたほうが見やすそうです。

index.htmlファイル、今回の箇所だけではなく全体的に崩れていますよね。
一個ずつ整えるのは面倒なので、一気にやっちゃいましょう。
Sublime Textの場合はソースコードを全選択（win：Ctrl +A / Mac：command + A）し、インデント最適化で全体のインデントを整えられます。

開始タグと終了タグの位置が揃ったところで、もう一回見てみましょう。
間違いなく、画像の下で<div class="row">が終了していますね。

<div class="row">の中にimageと.descriptionが入るよう直します。

レイアウト崩れが直りました。

⑤サイトバーのお知らせリスト

最後にサイドバー、お知らせの部分。
ここはヘッダーナビゲーションを横並びにするために書いた、display:flexの指定が影響していることがわかります。

セレクタを「headerの中のul」という書き方にすれば戻りそうですね。
やってみましょう。

大丈夫そうなので、style.cssを打ち替えます。

次にli要素部分の表示。
理想はこんな感じです。

先ほどと同じ様に、セレクタをli から header li に変更してみます。

リストマークが表示されました。
忘れないうちにstyle.cssでセレクタ変更を先にしておきましょう。

サイトバーのリスト部分は、下にmarginが欲しいのでそれも記述します。
「aside li」にをセレクタに指定すれば、headerの方には影響しませんね。
（marginの値は、だいたいで指定してOKです）

上書き保存して、ページを再読込します。

理想に近づきました。

リストマークの位置を、お知らせの「お」の下あたりにしたいので、ulタグのpadding-leftを変更してみましょう。スタイルパネル再上部の「element.style」欄を使います。

こんな感じで、プロパティ値は大体で入力しておき、変更しながらベストポジションを探すことも出来ます。

style.cssに書き写せば完成です！

スマホ幅表示では、まだ少し表示が変な箇所があります。
復習も兼ねて調整してみてください。
更に検証ツールに慣れることができますよ。