メディアクエリの記述順と優先度について紹介します。
概要
CSSのメディアクエリーの記述の順序によってページの結果結果が変わります。この記事では、メディアクエリーの記述順と
メディアクエリノー処理の優先度について紹介します。
結論
max-width を利用する場合
@media screen and (max-width: NNNpx){ ... } や
@media(max-width: NNNpx){ ... } のクエリではウィンドウのスクリーン幅がNNNピクセル以下である場合にスタイルを適用します。
最初にデフォルトのスタイルを記述し、その後、max-width の値の大きい順にメディアクエリを記述します。
min-width を利用する場合
@media screen and (min-width: NNNpx){ ... } や
@media (min-width: NNNpx){ ... } のクエリではウィンドウのスクリーン幅がNNNピクセル以上である場合にスタイルを適用します。
最初にデフォルトのスタイルを記述し、その後、min-width の値の小さい順にメディアクエリを記述します。
例1
次のコードを記述します。
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="priority-test-01.css" />
</head>
<body>
<div class="frame1">枠です。</div>
</body>
</html>
.frame1 {
border: 2px solid #808080;
}
@media screen and (max-width: 1600px) {
.frame1 {
border: 2px solid #ad0000;
}
}
@media screen and (max-width: 1200px) {
.frame1 {
border: 2px solid #cf5600;
}
}
@media screen and (max-width: 1000px) {
.frame1 {
border: 2px solid #d9b800;
}
}
@media screen and (max-width: 800px) {
.frame1 {
border: 2px solid #57a400;
}
}
@media screen and (max-width: 400px) {
.frame1 {
border: 2px solid #00b5b5;
}
}
解説
デフォルトではメディアクエリの指定のない
#808080 の枠カラーが選択されます。
メディアクエリの判定は上部から実行されます。
ウィンドウ幅が1600ピクセル以下の場合は、
max-width:1600px の条件にヒットし枠の色が
#ad0000 になります。
さらにウィンドウ幅が狭い場合は2つ目以降のメディアクエリにマッチするため、枠の色が上書きされます。
実行結果
上記のHTMLファイルをWebブラウザで表示します。幅が1600ピクセルを超える場合はデフォルトのスタイルの灰色の枠が表示されます。
ウィンドウ幅を狭めます。幅が1600ピクセル以下になると、
max-width: 1600pxに該当し、枠の色が赤になります。
さらにウィンドウ幅を狭めます。幅が1200ピクセル以下になると、
max-width: 1200pxに該当し、枠の色がオレンジになります。
続けて、ウィンドウ幅を狭めます。幅が1000ピクセル以下になると、
max-width: 1000pxに該当し、枠の色が黄色になります。
ウィンドウ幅が800ピクセル以下になると、
max-width: 800px に該当し、枠の色が緑色に変わります。
例2
次のコードを記述します。
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="priority-test-02.css" />
</head>
<body>
<div class="frame1">枠です。</div>
</body>
</html>
@media screen and (max-width: 400px) {
.frame1 {
border: 2px solid #00b5b5;
}
}
@media screen and (max-width: 800px) {
.frame1 {
border: 2px solid #57a400;
}
}
@media screen and (max-width: 1000px) {
.frame1 {
border: 2px solid #d9b800;
}
}
@media screen and (max-width: 1200px) {
.frame1 {
border: 2px solid #cf5600;
}
}
@media screen and (max-width: 1600px) {
.frame1 {
border: 2px solid #ad0000;
}
}
.frame1 {
border: 2px solid #808080;
}
解説
メディアクエリの記述により、ウィンドウ幅に応じた枠の色が設定されますが、メディアクエリの判定は上部から実行されるため、
一番最後にデフォルトのメディアクエリの指定のないスタイルが記述されているため、ウィンドウ幅の状況によらず、常にデフォルトのスタイルで上書きされるため、
#808080 の枠カラーが常に表示されます。
表示結果
上記のHTMLファイルをWebブラウザで表示します。幅が1600ピクセルを超える場合はデフォルトのスタイルの灰色の枠が表示されます。
ウィンドウ幅を狭めても、枠の色は灰色のままです。
さらにウィンドウ幅を狭めても、枠の色は灰色のまま変化しません。
例3
次のコードを記述します。
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="priority-test-03.css" />
</head>
<body>
<div class="frame1">枠です。</div>
</body>
</html>
.frame1 {
border: 2px solid #808080;
}
@media screen and (max-width: 400px) {
.frame1 {
border: 2px solid #00b5b5;
}
}
@media screen and (max-width: 800px) {
.frame1 {
border: 2px solid #57a400;
}
}
@media screen and (max-width: 1000px) {
.frame1 {
border: 2px solid #d9b800;
}
}
@media screen and (max-width: 1200px) {
.frame1 {
border: 2px solid #cf5600;
}
}
@media screen and (max-width: 1600px) {
.frame1 {
border: 2px solid #ad0000;
}
}
解説
メディアクエリの記述により、ウィンドウ幅に応じた枠の色が設定されますが、メディアクエリの判定は上部から実行されます。
一番最後にmax-widthの値が一番大きいスタイルが記述されているため、ウィンドウ幅が1600px以上でない場合は、最後のクエリにマッチするため、ウィンドウ幅が1600px以下の場合は常に
#ad0000 のカラーで枠が表示されます。
ウィンドウ幅が1600px以上の場合は、最後のクエリにもマッチしないため、デフォルトの
#808080 の枠の色になります。
表示結果
上記のHTMLをWebブラウザで表示します。下図のページが表示されます。
ウィンドウ幅を広げても枠の色は
#ad0000 のカラーのままです。
ウィンドウ幅が1600px以上になると、枠のカラーが
#808080に変わります。
例4
次のコードを記述します。
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="priority-test-04.css" />
</head>
<body>
<div class="frame1">枠です。</div>
</body>
</html>
.frame1 {
border: 2px solid #808080;
}
@media screen and (min-width: 400px) {
.frame1 {
border: 2px solid #00b5b5;
}
}
@media screen and (min-width: 800px) {
.frame1 {
border: 2px solid #57a400;
}
}
@media screen and (min-width: 1000px) {
.frame1 {
border: 2px solid #d9b800;
}
}
@media screen and (min-width: 1200px) {
.frame1 {
border: 2px solid #cf5600;
}
}
@media screen and (min-width: 1600px) {
.frame1 {
border: 2px solid #ad0000;
}
}
解説
メディアクエリの記述により、ウィンドウ幅に応じた枠の色が設定されますが、メディアクエリの判定は上部から実行されます。
一番最後にmin-widthの値が一番大きいスタイルが記述されているため、ウィンドウ幅が1600px以上でない場合は、手前のクエリにマッチするため、
ウィンドウ幅に応じて枠の色が変化します。
表示結果
上記のページをWebブラウザで表示します。ウィンドウ幅が一番狭い場合は下図の表示となります。
ウィンドウ幅を広げると色が変わります。
さらにウィンドウ幅を広げると、枠の色が変わります。
ウィンドウ幅が1600ピクセル以上になると
min-width: 1600px のクエリにマッチし
#ad0000 の枠色になります。
例5
次のコードを記述します。
コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="priority-test-05.css" />
</head>
<body>
<div class="frame1">枠です。</div>
</body>
</html>
@media screen and (min-width: 400px) {
.frame1 {
border: 2px solid #00b5b5;
}
}
@media screen and (min-width: 800px) {
.frame1 {
border: 2px solid #57a400;
}
}
@media screen and (min-width: 1000px) {
.frame1 {
border: 2px solid #d9b800;
}
}
@media screen and (min-width: 1200px) {
.frame1 {
border: 2px solid #cf5600;
}
}
@media screen and (min-width: 1600px) {
.frame1 {
border: 2px solid #ad0000;
}
}
.frame1 {
border: 2px solid #808080;
}
解説
メディアクエリの記述により、ウィンドウ幅に応じた枠の色が設定されますが、メディアクエリの判定は上部から実行されるため、
一番最後にデフォルトのメディアクエリの指定のないスタイルが記述されているため、ウィンドウ幅の状況によらず、常にデフォルトのスタイルで上書きされるため、
#808080 の枠カラーが常に表示されます。
表示結果
上記のHTMLをWebブラウザで表示します。下図のページが表示されます。
ウィンドウの幅を広げても枠の色は
#808080 のままです。
補足 : screen and を記述しない場合
メディアクエリに screen and を記述しない場合でも同様に動作します。
コード例 : 1a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="priority-test-01a.css" />
</head>
<body>
<div class="frame1">枠です。</div>
</body>
</html>
.frame1 {
border: 2px solid #808080;
}
@media (max-width: 1600px) {
.frame1 {
border: 2px solid #ad0000;
}
}
@media (max-width: 1200px) {
.frame1 {
border: 2px solid #cf5600;
}
}
@media (max-width: 1000px) {
.frame1 {
border: 2px solid #d9b800;
}
}
@media (max-width: 800px) {
.frame1 {
border: 2px solid #57a400;
}
}
@media (max-width: 400px) {
.frame1 {
border: 2px solid #00b5b5;
}
}
表示結果は例1と同じ動作になります。
コード例 : 4a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="priority-test-04a.css" />
</head>
<body>
<div class="frame1">枠です。</div>
</body>
</html>
.frame1 {
border: 2px solid #808080;
}
@media (min-width: 400px) {
.frame1 {
border: 2px solid #00b5b5;
}
}
@media (min-width: 800px) {
.frame1 {
border: 2px solid #57a400;
}
}
@media (min-width: 1000px) {
.frame1 {
border: 2px solid #d9b800;
}
}
@media (min-width: 1200px) {
.frame1 {
border: 2px solid #cf5600;
}
}
@media (min-width: 1600px) {
.frame1 {
border: 2px solid #ad0000;
}
}
表示結果は例4と同じ動作になります。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2021-04-25
作成日: 2021-04-14
