レスポンシブウェブデザイン-メディアクエリ
メディアクエリとは何ですか？
メディアクエリは、CSS3で導入されたCSS手法です。
@media特定の条件が真である場合にのみ、ルールを使用してCSSプロパティのブロックを含めます。
例
ブラウザウィンドウが600px以下の場合、背景色は水色になります。
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
ブレークポイントを追加する
このチュートリアルの前半で、行と列を含むWebページを作成しました。これは応答性がありましたが、小さな画面では見栄えがよくありませんでした。
メディアクエリはそれを助けることができます。デザインの特定の部分がブレークポイントの両側で異なる動作をするブレークポイントを追加できます。
デスクトップ
電話
メディアクエリを使用して、768pxにブレークポイントを追加します。
例
画面（ブラウザウィンドウ）が768ピクセルより小さくなると、各列の幅は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%;
}
}
常にモバイルファースト向けに設計
モバイルファーストとは、デスクトップやその他のデバイス向けにデザインする前にモバイル向けにデザインすることを意味します（これにより、小型のデバイスでページの表示が速くなります）。
これは、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%;}
}
別のブレークポイント
ブレークポイントはいくつでも追加できます。
また、タブレットと携帯電話の間にブレークポイントを挿入します。
デスクトップ
タブレット
電話
これを行うには、もう1つのメディアクエリ（600px）と、600pxより大きい（ただし768pxより小さい）デバイス用の新しいクラスのセットを追加します。
例
2つのクラスのセットはほとんど同じであることに注意してください。唯一の違いは、名前（col-とcol-s-）です。
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.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) {
/* 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%;}
}
同一のクラスが2セットあるのは奇妙に思えるかもしれませんが、HTMLで、各ブレークポイントの列で何が起こるかを決定する機会が与えられます。
HTMLの例
デスクトップの場合：
最初と3番目のセクションは両方ともそれぞれ3列にまたがります。中央のセクションは6列にまたがります。
タブレットの場合：
最初のセクションは3列にまたがり、2番目は9列にまたがり、3番目のセクションは最初の2つのセクションの下に表示され、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つのグループをターゲットにすることができます。
例
/*
Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{...}
/* Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large
laptops and desktops,
1200px and up) */
@media only screen and (min-width: 1200px) {...}
オリエンテーション：ポートレート/ランドスケープ
メディアクエリを使用して、ブラウザの向きに応じてページのレイアウトを変更することもできます。
ブラウザウィンドウがその高さよりも広い場合にのみ適用されるCSSプロパティのセット、いわゆる「横向き」の向きを設定できます。
例
向きが横向きモードの場合、Webページの背景は水色になります。
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
メディアクエリで要素を非表示にする
メディアクエリのもう1つの一般的な使用法は、さまざまな画面サイズの要素を非表示にすることです。
例
/* If the screen size is 600px wide or less, hide the element */
@media
only screen and (max-width: 600px) {
div.example {
display: none;
}
}
メディアクエリでフォントサイズを変更する
メディアクエリを使用して、さまざまな画面サイズの要素のフォントサイズを変更することもできます。
可変フォントサイズ。
例
/* If the screen size is 601px or
more, set the font-size of <div> to 80px */
@media only screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px or
less,
set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
CSS @ mediaリファレンス
すべてのメディアタイプと機能/式の完全な概要については 、CSSリファレンスの@mediaルールを参照してください。