実習:検証ツールで崩れたページを修正しよう【Chrome検証ツールの使い方入門】 | SkillhubAI(スキルハブエーアイ)

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

このレッスンについて

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

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

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

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

①キャッチコピー

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

【問題箇所】 file

【作りたいレイアウト】 file

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

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

【問題箇所】 file

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

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

【問題箇所】 file

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

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

【問題箇所】 file

【作りたいレイアウト】 file

⑤サイトバーのお知らせ

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

【問題箇所】 file

【作りたいレイアウト】 file

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