画面サイズに応じて変わる魔法：CSSメディアクエリ入門

Hello, チャリセです！

WEBアプリ開発する際、レスポンシブ化する方法について紹介させていただきます。
まずは、CSSメディアクエリからですが、CSSメディアクエリは、異なるデバイスやビューポートサイズに基づいて、ウェブページのスタイルを動的に調整するための強力なツールです。これにより、スマートフォン、タブレット、デスクトップなど、様々なデバイスに対応したレスポンシブなデザインが可能になります。

メディアクエリの基本

メディアクエリは、@media ルールを使用して定義されます。基本的な構文は以下の通りです：

@media media-type and (media-feature-rule) {
  /* スタイルルール */
}

ここで、media-type はスクリーン（screen）、プリント（print）などのメディアタイプを指定し、media-feature-rule は特定の条件（例：画面の幅や高さ）を設定します。

では、まず簡単なサンプルを作っていきましょう！コードの解説はサンプルの最後でご確認お願いします。

<!DOCTYPE html>
<html>

<head>
    <title>レスポンシブデザインサンプル</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f8f8f8;
            color: #333;
        }
        
        .container {
            width: 80%;
            margin: 0 auto;
            padding: 20px;
        }
        /* ビューポートの幅が600px以下の場合のスタイル */
        
        @media screen and (max-width: 600px) {
            body {
                background-color: lightblue;
            }
            .container {
                background-color: #fff;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            }
        }
        /* ビューポートの幅が601pxから900pxの場合のスタイル */
        
        @media screen and (min-width: 601px) and (max-width: 900px) {
            body {
                background-color: lightgreen;
            }
            .container {
                width: 70%;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>レスポンシブウェブデザインのデモ</h1>
        <p>画面サイズに応じてスタイルが変わります。</p>
    </div>
</body>

</html>

このコードは、画面サイズに応じて背景色やコンテナの幅が変わるシンプルなレスポンシブデザインを実現します。

小さい画面（600px以下）: この範囲では、body に lightblue 背景色を適用し、.container には白色の背景とボックスシャドウを設定しています。これにより、読みやすさを高めています。
中間サイズの画面（601pxから900px）: ここでは、body の背景色を lightgreen に変更し、.container の幅を70%に調整しています。これにより、中間サイズの画面での表示を最適化しています。