レスポンシブWebデザインのためのCSSで画面サイズに応じた条件分岐を行う方法

2024-02-08 03:18 CSS 画面サイズ

まず、CSSメディアクエリを使用するためには、以下のようなコードをHTMLのセクション内に追加します。

<head>
  <style>
    /* 画面幅が600px未満の場合に適用するスタイル */
    @media (max-width: 599px) {
      /* スタイルの指定 */
    }

    /* 画面幅が600px以上の場合に適用するスタイル */
    @media (min-width: 600px) {
      /* スタイルの指定 */
    }
  </style>
</head>

上記のコードでは、@mediaキーワードを使用してメディアクエリを定義しています。max-widthを使用すると、指定した画面幅以下の場合にスタイルを適用することができます。同様に、min-widthを使用すると、指定した画面幅以上の場合にスタイルを適用できます。

具体的な例として、画面幅が600px未満の場合にテキストの色を赤に、600px以上の場合に青に変えるコードを示します。

<head>
  <style>
    /* 画面幅が600px未満の場合に赤色のテキストを適用 */
    @media (max-width: 599px) {
      body {
        color: red;
      }
    }

    /* 画面幅が600px以上の場合に青色のテキストを適用 */
    @media (min-width: 600px) {
      body {
        color: blue;
      }
    }
  </style>
</head>

このようにすることで、異なる画面サイズに対応するためのスタイルを指定することができます。必要に応じて、他のプロパティやセレクタに対してもメディアクエリを使用することが可能です。

以上が、CSSを使用して画面サイズに応じた条件分岐を行う方法の例です。この方法を使えば、レスポンシブなWebデザインを実現する際に役立つでしょう。