このレッスンについて
素材(developer_sozai)内にあるindex.htmlの表示崩れを修正して頂きます。 検証ツールも活用し、原因と解決方法を探してみてください。
次ページに解答がありますので、難しい部分は解答をご確認ください。 修正したファイルの提出は不要です。
修正が必要な5つのパーツ
index.htmlには、ここまでのレッスンで修正した箇所以外に5つの問題があります。 それぞれ作りたいレイアウトを再現できるように、検証ツールを使いながら修正してください。
①キャッチコピー
会社名の下にあるキャッチコピーを、PC幅では表示/スマホ幅では非表示にしたい。
【問題箇所】
【作りたいレイアウト】
②ヘッダーナビゲーションを等間隔にしたい
ヘッダーナビゲーションの項目間を、等間隔にしたい。 現状は、会社概要とお問い合わせの間隔が、ホームと会社概要より広くなっている。
【問題箇所】
③自社プロダクト、1つ目の横並び
画像とテキスト間の余白を設定したはずなのに、CSSが効いていない。
【問題箇所】
④自社プロダクト、2つ目の横並び
2つめの「革新的テストの~」の並びが、横並びにならない。
【問題箇所】
【作りたいレイアウト】
⑤サイトバーのお知らせ
横並びのような表示になっている箇所を、1行ずつの表示にしたい。
【問題箇所】
【作りたいレイアウト】
以上、5つのレイアウト崩れの原因と修正方法を探してみてください。