デスクトップ
携帯
メディア・クエリは、CSS3 で導入された CSS のテクニックです。
これは、特定の条件が真である場合にのみ、@media ルールを使用し CSS プロパティのブロックをインクルードします。
ブラウザウィンドウが 500px よりも小さい場合には、背景色が水色に変わります：
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
Try it Yourself ❯
このチュートリアルの前段では、行と列を使用したレスポンシブな Web ページを作りましたが、小型画面での 外観は、余り良いものではありませんでした。
メディアクエリは、それについて手助けをしてくれます。ブレークポイントの各サイドで、デザインの特定の部分が異なった動作をする、 ブレークポイントを追加することができます。
メディアクエリを使用し、768px にブレークポイントを追加します：
画面（ブラウザウィンドウ）が 768px よりも小さくなると、各カラムの幅は 100％ になります：
/* For desktop: */
.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) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
Try it Yourself ❯
モバイルファーストとは、デスクトップやその他のデバイス用に設計するよりも前に、先ずモバイル用に設計すると言うことです （これは、小さなデバイスではページの表示が速くなります）。
これは、私たちの CSS の一部に変更を加える必要があることを意味しています。
幅が 768px より小さいときのスタイルを変更する代わりに、幅が 768px より大きいときのデザインを 変更すべきです。これが、デザインをモバイルファーストにします：
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.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%;}
}
Try it Yourself ❯
あなたは、好きなだけブレークポイントを追加することができます。
タブレットとスマホの間にもブレークポイントを挿入します。
もう 1 つのメディア・クエリ (600px に)と、600px より大きい（が、768px よりも小さい） デバイスに対する新しいクラスの組を追加することで、これを行ういます：
2 組のクラスはほとんど同じで、唯一の違いは名前（col- と col-m-）だけである点に注意してください：
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.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%;}
}
Try it Yourself ❯
デスクトップの場合：
1番目と3番目のセクションは、両方とも3カラムに跨ります。中央のセクションは6カラムに跨ります。
タブレットの場合：
1番目のセクションは3カラム、2番目のセクションは9カラム、3番目のセクションは12カラムに跨ります：
2 組の同じクラスがあることを奇妙に思えるかもしれませんが、各々のブレークポイントでカラムに何を起こさせるかを決めるための、 HTML における機会を与えてくれます：
デスクトップの場合：
1 番目と 3 番目のセクションは、両方とも 3 カラムを占有します。中央のセクションは 6 カラムを占有します。
タブレットの場合：
1 番目のセクションは 3 カラム、2 番目のセクションは 9 カラム、3 番目のセクションは 12 カラムを占有します：
<div class="row">
<div class="col-3 col-m-3">...</div>
<div
class="col-6 col-m-9">...</div>
<div
class="col-3 col-m-12">...</div>
</div>
メディアクエリは、ブラウザの方向に従ってページのレイアウトを変更するのにも使用することができます。
ブラウザウィンドウが、いわゆる「横」方向（"Landscape" orientation）と呼ばれる、 高さよりも広い場合にのみ適用される CSS プロパティの組を持つことができます：
方向が landscape mode （横方向モード）であれば、web ページの背景は水色になります：
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
Try it Yourself ❯