【CSS】サイトの画面幅に応じて条件分岐するサンプルコード

こんにちは！今回はCSSの「メディアクエリ」を使って、ウェブサイトの表示を画面幅に応じて変える方法をプログラミング初心者向けにわかりやすく解説します。

Contents

メディアクエリとは？
基本的な書き方
サンプルコード
注意点

メディアクエリとは？

メディアクエリは、ウェブページの表示をデバイスの種類や画面の大きさに応じて調整するためのCSSの機能です。これにより、同じHTMLを使ってPC、タブレット、スマートフォンなど、さまざまなデバイスに対応したデザインを実現できます。これを「レスポンシブデザイン」と言います。

基本的な書き方

メディアクエリは以下のように書きます。

css

@media screen and (max-width: 600px) {

　　　　/* ここに600px以下の画面幅のときのCSSを書く */

この例では、画面幅が600px以下のときに適用されるCSSを指定しています。max-width: 600pxの部分が条件となり、この条件を満たすときにだけ中のCSSが適用されます。

サンプルコード

では、メディアクエリを使って画面幅に応じて背景色を変える例を見てみましょう。

html

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: lightblue;

}

@media screen and (min-width: 600px) {
body {
background-color: lightgreen;
}
}@media screen and (min-width: 900px) {
body {
background-color: lightyellow;
}
}

</style> </head> <body> <h1>Responsive Design Test</h1> <p>Resize the browser window to see how the background color changes.</p> </body> </html>

この例では、画面幅が600px未満のときは背景色がlightblue、600px以上900px未満のときはlightgreen、900px以上のときはlightyellowになります。

注意点

メディアクエリは上から順に評価され、後から指定したCSSが前のCSSを上書きします。そのため、条件が重なる場合は、細かい条件を先に書き、広範な条件を後に書くことが一般的です。

また、メディアクエリを使うときは、全ての画面幅で適切に表示されるように、ウェブサイトのデザインを慎重に計画することが重要です。

以上が、CSSのメディアクエリを使ったレスポンシブデザインの基本的な説明です。メディアクエリを使うことで、さまざまなデバイスで適切に表示されるウェブサイトを作ることができます。ぜひ挑戦してみてください。

関連記事：https://allabout.co.jp/gm/gc/396404/