メディアクエリ

Posted on by

メディアクエリ（Media Queries）は、CSSで特定の条件に基づいてスタイルを適用するための技術です。
これにより、デバイスの画面サイズ、解像度、
向きなどに応じて異なるスタイルを適用することができます。
レスポンシブデザイン（Responsive Design）は、メディアクエリを使用して、
さまざまなデバイスや画面サイズに対応したウェブデザインを実現する方法です。

メディアクエリの基本

@media ルール

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

@media 条件 {
    /* 条件が満たされた場合に適用するスタイル */
}

条件の指定

条件には、画面の幅、高さ、解像度、向きなどを指定できます。
一般的に使用される条件は以下の通りです。

  • max-width：指定した幅以下の場合に適用
  • min-width：指定した幅以上の場合に適用
  • max-height：指定した高さ以下の場合に適用
  • min-height：指定した高さ以上の場合に適用
  • orientation：デバイスの向きを指定（portrait または landscape）

メディアクエリの使用例

画面幅に応じたスタイルの適用

異なる画面幅に応じて異なるスタイルを適用する例です。

/* 画面幅が600px以下の場合に適用 */
@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
    .container {
        padding: 10px;
    }
}

/* 画面幅が601px以上の場合に適用 */
@media (min-width: 601px) {
    body {
        background-color: lightgreen;
    }
    .container {
        padding: 20px;
    }
}

デバイスの向きに応じたスタイルの適用

デバイスの向きに応じて異なるスタイルを適用する例です。

/* デバイスが縦向きの場合に適用 */
@media (orientation: portrait) {
    body {
        font-size: 16px;
    }
}

/* デバイスが横向きの場合に適用 */
@media (orientation: landscape) {
    body {
        font-size: 18px;
    }
}

複数の条件を組み合わせたスタイルの適用

複数の条件を組み合わせて、特定の条件に基づいてスタイルを適用する例です。

/* 画面幅が600px以上かつ800px以下の場合に適用 */
@media (min-width: 600px) and (max-width: 800px) {
    body {
        background-color: lightcoral;
    }
}

/* 画面幅が801px以上かつデバイスが縦向きの場合に適用 */
@media (min-width: 801px) and (orientation: portrait) {
    body {
        background-color: lightgoldenrodyellow;
    }
}

レスポンシブデザインの実践

フレキシブルグリッドレイアウト

フレキシブルなグリッドレイアウトを使用して、画面サイズに応じたレスポンシブデザインを実現します。

css

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

HTML

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
</div>

フレックスボックスレイアウト

フレックスボックスを使用して、画面サイズに応じたレスポンシブデザインを実現します。

css

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.item {
    flex: 1 1 200px;
    margin: 10px;
}

HTML

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
</div>

レスポンシブナビゲーションバー

ナビゲーションバーを画面サイズに応じてレスポンシブにする例です。

css

.navbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #333;
}
.navbar a {
    color: white;
    padding: 14px 20px;
    text-decoration: none;
    text-align: center;
}
@media (max-width: 600px) {
    .navbar a {
        flex: 1 1 100%;
    }
}

HTML

<div class="navbar">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#services">Services</a>
    <a href="#contact">Contact</a>
</div>

まとめ

メディアクエリを使用することで、デバイスの画面サイズや向きに応じて異なるスタイルを適用でき、
レスポンシブデザインを実現することができます。
これにより、ウェブサイトがさまざまなデバイスで適切に表示され、
ユーザーにとって使いやすいデザインを提供することが可能になります。
メディアクエリを駆使して、フレキシブルグリッドやフレックスボックスなどの技術を組み合わせることで、より柔軟でレスポンシブなウェブデザインを作成することができます。