実習：検証ツールで崩れたページを修正しよう【Chrome検証ツールの使い方入門】

• このレッスンについて
• 修正が必要な5つのパーツ
• ①キャッチコピー
• ②ヘッダーナビゲーションを等間隔にしたい
• ③自社プロダクト、1つ目の横並び
• ④自社プロダクト、2つ目の横並び
• ⑤サイトバーのお知らせ

このレッスンについて

素材（developer_sozai）内にあるindex.htmlの表示崩れを修正して頂きます。
検証ツールも活用し、原因と解決方法を探してみてください。

次ページに解答がありますので、難しい部分は解答をご確認ください。
修正したファイルの提出は不要です。

修正が必要な5つのパーツ

index.htmlには、ここまでのレッスンで修正した箇所以外に5つの問題があります。
それぞれ作りたいレイアウトを再現できるように、検証ツールを使いながら修正してください。

①キャッチコピー

会社名の下にあるキャッチコピーを、PC幅では表示/スマホ幅では非表示にしたい。

【問題箇所】

【作りたいレイアウト】

②ヘッダーナビゲーションを等間隔にしたい

ヘッダーナビゲーションの項目間を、等間隔にしたい。
現状は、会社概要とお問い合わせの間隔が、ホームと会社概要より広くなっている。

【問題箇所】

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

画像とテキスト間の余白を設定したはずなのに、CSSが効いていない。

【問題箇所】

④自社プロダクト、2つ目の横並び

2つめの「革新的テストの～」の並びが、横並びにならない。

【問題箇所】

【作りたいレイアウト】

⑤サイトバーのお知らせ

横並びのような表示になっている箇所を、1行ずつの表示にしたい。

【問題箇所】

【作りたいレイアウト】

以上、５つのレイアウト崩れの原因と修正方法を探してみてください。