CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのメディアクエリを活用したレスポンシブWebデザインの基本と実装例

メディアクエリとは

メディアクエリ(Media Queries)は、CSSで提供される技術の一つで、スマートフォン、タブレット、デスクトップPCなど、デバイスの画面サイズに応じて異なるスタイルルールを適用できる仕組みです。

これにより、単一のHTMLファイルであらゆる画面幅に対応したレスポンシブWebデザインを実現できます。ブレークポイント(画面幅の境界値)ごとに条件を指定し、その条件が一致した場合のみCSSが適用されるのが特徴です。

主な構文のポイント

  • @media only screen and (max-width: 600px) … 幅600px以下の画面に適用
  • @media only screen and (min-width: 768px) … 幅768px以上の画面に適用
  • viewportメタタグ … モバイル端末で正しく表示させるために必須

実装例：画面幅に応じて背景色が変化するページ

以下のコードは、メディアクエリを使ってレスポンシブデザインを実装した例です。画面サイズが変わると、背景色が各ブレークポイントに応じて切り替わります。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: white;
}
@media only screen and (max-width: 600px) {
    body {
        background: rgb(207, 60, 151);
    }
}
@media only screen and (min-width: 600px) {
    body {
        background: rgb(0, 128, 107);
    }
}
@media only screen and (min-width: 768px) {
    body {
        background: rgb(226, 136, 18);
    }
}
@media only screen and (min-width: 992px) {
    body {
        background: rgb(108, 25, 185);
    }
}
@media only screen and (min-width: 1200px) {
    body {
        background: rgb(13, 124, 63);
    }
}
</style>
</head>
<body>
<h1>Media queries example</h1>
<h2>Resize the screen to see background color change on different breakpoints</h2>
</body>
</html>

コードの解説

このサンプルでは、5つのブレークポイントを設定しています。それぞれの条件に該当する画面幅では、対応する背景色が適用されます。

  • 〜600px(スマートフォン想定)：ピンク系の背景色
  • 600px〜767px(大型スマホ・小型タブレット想定)：グリーン系の背景色
  • 768px〜991px(タブレット縦向き想定)：オレンジ系の背景色
  • 992px〜1199px(ノートPC・タブレット横向き想定)：パープル系の背景色
  • 1200px以上(デスクトップPC想定)：グリーン系の背景色

表示結果

上記のコードを実行すると、次のような出力が得られます。ブラウザのウィンドウ幅を変更すると、背景色がリアルタイムに切り替わることを確認できます。

CSSのメディアクエリを活用したレスポンシブWebデザインの基本と実装例

まとめ

メディアクエリを使いこなすことで、デバイスごとに最適化された見た目を1つのHTMLファイルで実現できます。実際の開発では、背景色だけでなく、文字サイズ、レイアウト(カラム数)、画像サイズなどを画面幅に応じて調整することで、より快適なユーザー体験を提供できます。

  1. CSSメディアクエリで一般的なデバイス別ブレークポイントを設定する方法

    CSSのメディアクエリ（@media）を活用すると、スマートフォン、タブレット、デスクトップPCなど、デバイスごとの画面幅（ブレークポイント）に応じてスタイルを柔軟に切り替えることができます。レスポンシブWebデザインを実現するうえで欠かせないテクニックです。 よく使われる一般的なブレークポイント 多くのWebサイトでは、以下のような画面幅がブレークポイントの目安として採用されています。 600px以下 … スマートフォン 600px〜767px … タブレット（縦向き） 768px〜991px … タブレット（横向き）・小型ノートPC 992px〜1199px … デスクトップPC 120

  2. CSSのmin()関数で作るレスポンシブロゴ｜メディアクエリ不要の実装方法

    CSS min()関数でレスポンシブロゴを作る CSSのmin()関数を活用すると、メディアクエリを一切書かずにレスポンシブなロゴを実装できます。min()は、カンマ区切りで渡した複数の値の中から最も小さい値を返す関数です。可変単位（vwなど）と固定単位（pxなど）を組み合わせることで、「画面が狭いときは縮み、一定サイズ以上には拡大しない」という挙動をたった1行で表現できます。 構文 min()関数の基本的な構文は次のとおりです。 セレクタ {     プロパティ: min(/*値1*/, /*値2*/); } サンプル1：高さにmin()を指定する 以