モバイル対応のランディングページを作成する際、CSSの@mediaクエリを使ってレスポンシブデザインを実装することが一般的です。しかし、正しいコードの書き方を知らないと、意図しない表示崩れが起こることがあります。この記事では、質問者が直面した問題とその解決策を解説します。
問題の説明とコードの誤り
質問者が提供したCSSコードは、モバイル対応のために@mediaクエリを使用し、特定の画面幅に応じてスタイルを変更する方法を試みたものです。しかし、いくつかの問題があります。
提供されたCSSコード
@media screen and(max-width:768px)
p background color Black
color redこのコードにはいくつかの誤りがあります。
- 「@media screen and(max-width:768px)」という部分にスペースが不足しています。正しくは「@media screen and (max-width: 768px)」です。
- 「p background color Black」と書かれていますが、CSSの文法としては「p { background-color: black; color: red; }」のように、プロパティと値を波括弧で囲む必要があります。
CSSメディアクエリの正しい書き方
@mediaクエリを使用する際は、次のように記述することが重要です。
@media screen and (max-width: 768px) {
p { background-color: black; color: red; }
}また、もうひとつのメディアクエリ「max-width: 480px」のコードも、以下のように記述します。
@media screen and (max-width: 480px) {
p { background-color: blue; color: white; }
}写真が横並びで重なってしまう問題
質問者が言及した「写真が横並びにしているのに重なってしまう」という問題は、CSSのフレックスボックスを使用したレイアウトに関係しています。フレックスボックスを使う場合、親要素に対して適切なスタイル設定を行わなければ、意図しないレイアウト崩れが発生します。
親要素に「display: flex;」を設定している場合、各写真（子要素）が適切に配置されるためには、親要素に対して十分な幅が与えられていることを確認する必要があります。親要素の幅が狭いと、子要素が重なったり、スクロールバーが表示されたりします。
フレックスボックスの正しい使い方
.container {
display: flex;
flex-wrap: wrap;
}
img {
flex: 1;
}「flex-wrap: wrap;」を使用することで、画面幅が狭くなった場合に要素が折り返され、重ならずに表示されます。また、各画像要素に「flex: 1;」を指定することで、画像が均等に並びます。
まとめ
モバイル対応のランディングページを作成する際、@mediaクエリを正しく記述し、フレックスボックスを使ったレイアウトを適切に設定することが重要です。誤った記述や設定が原因で、画面が崩れることがありますが、正しい書き方を理解することでスムーズに解決できます。これで、質問者の問題を解決するためのCSSの書き方と注意点を押さえたことになります。
コメント