CSSメディアタイプとメディアクエリの基本を徹底解説
CSSのメディアタイプ(Media Types)とメディアクエリ(Media Queries)は、デバイスの一般的な種類(スクリーン、プリントなど)や特性(画面解像度、ビューポートの寸法など)に応じて特定のスタイルを定義するための仕組みです。レスポンシブWebデザインを実現するうえで欠かせない技術といえます。
メディアクエリの構文
メディアクエリの基本構文は以下のとおりです。
@media not | only mediatype and (expressions) {
CSS-Code;
}
このメディアクエリが適用されるのは、主に次のようなケースです。
- mediatype が、ドキュメントが描画されるデバイスの種類と一致している場合。
- not / only 演算子が指定されていない場合、メディアクエリはすべてのメディアタイプに適用されます。
- not / only 演算子が指定されている場合、それぞれ「特定のメディアタイプのみ適用」「特定のメディアタイプを除外」という動作になります。
また、メディアごとに異なるスタイルシートを用意することもできます。たとえば、印刷用と画面用で別々のスタイルシートを読み込むといった使い方が可能です。
<link rel="stylesheet" media="print and|not|only (expressions)" href="print.css">
同様に、画面用のスタイルシートは次のように指定します。
<link rel="stylesheet" media="screen and|not|only (expressions)" href="screen.css">
CSS3で定義されているメディアタイプ一覧
| 番号 | 値と説明 |
|---|---|
| 1 | all すべてのメディアタイプのデバイスにスタイルシートを適用します。 |
| 2 | print プリンターに対してスタイルシートを適用します。 |
| 3 | screen パソコンの画面、タブレット、スマートフォンなどにスタイルシートを適用します。 |
| 4 | speech ページの内容を音声で読み上げるスクリーンリーダーにスタイルシートを適用します。 |
メディア依存のスタイルシートを作成する3つの方法
- @media アットルールを使用する
- @import アットルールを使用する
- HTML の <link> 要素に media 属性を指定して使用する
サンプルコード1:@mediaを使った例
CSSメディアクエリの具体的な使用例を見てみましょう。画面幅に応じてカラムの幅と背景色が切り替わるレスポンシブレイアウトです。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.col {
float: left;
width: 20%;
padding: 40px;
}
body {
background-color: lemonchiffon;
margin: 20px;
}
@media screen and (max-width: 850px) {
.col {
width: 50%;
}
body {
background-color: mediumseagreen;
}
}
@media screen and (max-width: 550px) {
.col {
width: 100%;
}
body {
background-color: powderblue;
}
}
</style>
</head>
<body>
<div class="row">
<div class="col" style="background-color:#373;"> </div>
<div class="col" style="background-color:#363;"> </div>
<div class="col" style="background-color:#353;"> </div>
<div class="col" style="background-color:#343;"> </div>
<div class="col" style="background-color:#333;"> </div>
</div></body></html>
実行結果
上記のコードは、ブラウザの画面幅に応じて次のように表示が変化します。
画面幅が850pxより大きい場合:
画面幅が550px〜850pxの場合:
画面幅が550px未満の場合:
サンプルコード2:@importを使った例
次に、@import アットルールを使って、メディアごとに異なるスタイルシートを読み込む例を紹介します。まずはHTMLドキュメントです。
<!DOCTYPE html> <html> <head> <style type="text/css"> @import url(screen.css) screen; @import url(print.css) print; </style> </head> <body> <p> Vivamus commodo, dolor eu porttitor sagittis, orci nisl consectetur ipsum, vel volutpat nibh lectus at erat. Cras scelerisque faucibus tellus aliquam commodo.Donec sem urna, facilisis at ipsum id, viverra sollicitudin est. Nam rhoncus sollicitudin lorem, a accumsan purus varius eget. </p> <p class="two">In ultrices lectus nisi. Nulla varius ex ut tortor congue viverra. Sed sodales vehicula leo, vitae interdum elit vehicula nec. Donec turpis nunc, iaculis et nisi sit amet, feugiat lacinia metus. </p> <p>Suspendisse eget ligula et risus lobortis ornare id at elit. Suspendisse potenti. Vivamus pellentesque eleifend pellentesque. Vestibulum neque ante, iaculis a sagittis et, fermentum at metus.</p> </body> </html>
読み込まれる各CSSファイルの内容は以下のとおりです。
CSS document (screen.css):
p { color: navy; font-style: italic; }
.two { color: #c303c3; font-size: 20px; }
body { background-color: honeydew;}
CSS document (print.css):
p { color: red; font-style: italic;}
.two { color: #989898; font-size: 40px; }
実行結果
screen メディアタイプで表示した場合は、画面用のスタイルが適用されます。
print メディアタイプで表示した場合は、印刷用のスタイルが適用されます。
-
CSSメディアクエリで一般的なデバイス別ブレークポイントを設定する方法
CSSのメディアクエリ（@media）を活用すると、スマートフォン、タブレット、デスクトップPCなど、デバイスごとの画面幅（ブレークポイント）に応じてスタイルを柔軟に切り替えることができます。レスポンシブWebデザインを実現するうえで欠かせないテクニックです。 よく使われる一般的なブレークポイント 多くのWebサイトでは、以下のような画面幅がブレークポイントの目安として採用されています。 600px以下 … スマートフォン 600px〜767px … タブレット（縦向き） 768px〜991px … タブレット（横向き）・小型ノートPC 992px〜1199px … デスクトップPC 120
-
OLEDディスプレイとは?仕組みと種類(AMOLED・PMOLED)を徹底解説
デジタルディスプレイ技術はここ数十年で劇的に進化してきました。各メーカーは、経済的で耐久性が高く、かつ優れた視聴体験を提供できるスクリーンの開発にしのぎを削っています。身の回りを見渡してみると、私たちが日常的に使う電子機器の多くは、LCD・LED・CRTといったタイプの画面を採用しています。しかし、これらの技術には「消費電力が大きい」あるいは「表示品質が十分ではない」という課題がありました。 こうした課題を克服するために生まれたのが、低消費電力でありながら高い輝度を実現できる新型ディスプレイ「OLED」です。本記事では、OLEDの基本構造から種類、メリットまでをわかりやすく解説します。 OLE