レスポンシブウェブページデザイン - メディアクエリ

メディアクエリとは何ですか？

メディアクエリはCSS3で導入されたCSS技術です。

特定の条件を満たす場合にのみ使用されます @media ルールを使用してCSS属性ブロックを参照します。

例

ブラウザのウィンドウが600pxまたはそれ以下の場合、背景色は薄い青色になります：

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

実際に試してみてください

ブレイクポイントを追加

このチュートリアルの少し前に、行と列を含むウェブページを作成しましたが、このレスポンシブウェブページは小さなスクリーン上ではあまり良い効果がありませんでした。

メディアクエリは、デザインの一部がブレイクポイントの両側で異なるように見えるようにするためのものです。


デスクトップコンピュータ

携帯電話

768pxでブレイクポイントを追加するためにメディアクエリを使用します：

例

スクリーン（ブラウザのウィンドウ）が768px未満の場合、各列の幅は100％に設定されるべきです：

/* デスクトップデバイス用： */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
  /* スマートフォン用： */
  [class*="col-"] {
    width: 100%;
  }
}

実際に試してみてください

常にモバイルファーストデザイン

モバイルファースト（Mobile First）とは、デスクトップや他のデバイスに対するデザインを行う前に、まずモバイルデバイスに対するデザインに優先順位を置くことを指します（これにより、ページが小さなデバイス上でより速く表示されます）。

これは、CSSでいくつかの改善を行う必要があることを意味します。

幅が768px未満の場合、デザインを変更するのではなく、幅を変更する必要があります。私たちは「モバイルファースト」のデザインとしてこれを行いました：

例

/* スマートフォン用： */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  /* デスクトップ用： */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

実際に試してみてください

もう一つのブレイクポイント

任意の数のブレイクポイントを追加できます。

タブレットと携帯電話の間に一つのブレイクポイントを挿入します。


デスクトップコンピュータ

タブレット

携帯電話

そのため、私たちはメディアクエリ（600ピクセルで）を追加し、600ピクセル以上（768ピクセル以下）のデバイスに新しいクラス群を追加しました：

例

注意してください、2つのクラスはほぼ同じですが、名前（col- と col-s-）が唯一の違いです：

/* スマートフォン用： */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 600px) {
  /* タブレット用： */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* デスクトップ用： */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

同じクラスが2組あるのは奇妙に思えますが、HTMLを使って各断点での列の動きを決定する機会を提供しています：

HTMLの例

デスクトップ用：

第一部分と第三部分はともに3列を越えます。中間部分は6列を越えます。

タブレット用：

第一部分は3列を越え、第二部分は9列を越え、第三部分は前两部分の下に表示され、12列を越えます：

<div class="row">
  <div class="col-3 col-s-3">...</div>
  <div class="col-6 col-s-9">...</div>
  <div class="col-3 col-s-12">...</div>
</div>

実際に試してみてください

典型的なデバイスのブレイクポイント

高さと幅が異なるスクリーンやデバイスは数多くあり、それぞれのデバイスに対して正確なブレイクポイントを作成することは難しいです。簡単にするために、以下の5つのグループに焦点を当てることができます：

例

/* 超小型デバイス（電話、600px以下） */
@media only screen and (max-width: 600px) {...} 
/* 小型デバイス（縦方向のタブレットや大規模なスマートフォン、600ピクセル以上） */
@media only screen and (min-width: 600px) {...} 
/* 中型デバイス（横方向のタブレット、768ピクセル以上） */
@media only screen and (min-width: 768px) {...} 
/* 大型デバイス（ラップトップやデスクトップ、992px以上） */
@media only screen and (min-width: 992px) {...} 
/* 超大型デバイス（大規模なラップトップやデスクトップ、1200px以上） */
@media only screen and (min-width: 1200px) {...}

実際に試してみてください

方向：ポートレート / ランドスケープ

媒体クエリを使用して、ブラウザの方向に応じてページのレイアウトを変更することもできます。

横方向の方向（「横スクリーン」方向）のみ適用されるCSS属性のセットを設定できます：

例

横向模式（landscape mode）の場合、ウェブページの背景を浅青色に設定できます：

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

実際に試してみてください

媒体クエリで要素を非表示に

媒体クエリのもう一つの一般的な用途は、異なるスクリーンサイズでの要素の非表示です：

例

/* スクリーンサイズが600ピクセル以下の場合、この要素を非表示にしてください */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

実際に試してみてください

媒体クエリでフォントサイズを変更

媒体クエリを使用して、異なるスクリーンサイズでの要素のフォントサイズを変更することもできます：

例

/* スクリーンサイズが601px以上の場合、<div>のfont-sizeを80pxに設定してください */
@media only screen and (min-width: 601px) {}}
  div.example {
    font-size: 80px;
  }
}
/* スクリーンサイズが 600px またはそれ以下の場合、<div> の font-size を 30px に設定してください */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

実際に試してみてください

CSS @media リファレンスマニュアル

すべてのメディアタイプと特性/表現の完全な概要については、 CSS リファレンスマニュアルで @media ルールを参照.