メディアクエリとは?
メディア クエリは、CSS3 で導入された CSS 手法です。
それは@media特定の条件が true の場合にのみ、CSS プロパティのブロックを含めるルール。
例
ブラウザ ウィンドウが 600 ピクセル以下の場合、背景色は水色になります。
@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 ルール.
