CSSのさまざまなメディアタイプの種類と使い方を徹底解説
CSSのメディアタイプとは、ドキュメントが描画されるデバイスの種類を指します。メディアタイプごとに個別のスタイルを定義することで、画面表示・印刷・音声読み上げなど、出力先に応じた最適なデザインを実現できます。
CSS3およびMedia Queries 4で利用できるメディアタイプ
以下は、CSS3とMedia Queries 4で使用できる主なメディアタイプの一覧です。
| No. | 値と説明 |
|---|---|
| 1 | all すべてのメディアタイプのデバイスにスタイルシートが適用されます。 |
| 2 | print プリンターでの印刷時にスタイルシートが適用されます。 |
| 3 | screen パソコンの画面、タブレット、スマートフォンなどのスクリーンデバイスにスタイルシートが適用されます。 |
| 4 | speech ページの内容を音声で読み上げるスクリーンリーダーに対してスタイルシートが適用されます。 |
注意： aural（音声）、braille（点字）、embossed（浮き出し印刷）、handheld（携帯端末）、projection（プロジェクター）、tty（テレタイプ）、tv（テレビ）といった複数のメディアタイプは、Media Queries 4で非推奨となっています。これらは今後使用すべきではなく、auralタイプはspeechメディアタイプに置き換えられました。
例1：linkタグを使ってscreenとprintのスタイルを切り替える
まずは、<link>タグのmedia属性を使って、画面用と印刷用のスタイルシートを読み分ける方法を見てみましょう。
HTMLドキュメント
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" media="screen" href="screen.css"> <link rel="stylesheet" type="text/css" media="print" href="print.css"> </head> <body> <div></div> </body> </html>
CSSファイル（screen.css）
div {
height: 50px;
width: 100px;
border-radius: 20%;
border: 2px solid blueviolet;
box-shadow: 22px 12px 3px 3px lightblue;
position: absolute;
left: 30%;
top: 20px;
}
CSSファイル（print.css）
div {
height: 50px;
width: 100px;
border-radius: 20%;
border: 2px solid #dc3545;
box-shadow: 22px 12px 3px 3px #dc3545;
position: absolute;
left: 30%;
top: 20px;
}
出力結果
画面（screen）メディアタイプで表示した場合：
印刷（print）メディアタイプで表示した場合：
例2：@importルールを使ってメディアタイプごとにスタイルを読み込む
次に、@importルールを使用して、メディアタイプごとに異なるCSSファイルを読み込む方法を紹介します。
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ファイル（screen.css）
p { color: navy; font-style: italic; }
.two { color: #c303c3; font-size: 20px; }
body { background-color: honeydew; }
CSSファイル（print.css）
p { color: red; font-style: italic; }
.two { color: #989898; font-size: 40px; }
出力結果
画面（screen）メディアタイプで表示した場合：
印刷（print）メディアタイプで表示した場合：
まとめ
CSSのメディアタイプを活用することで、同じHTMLコンテンツでも「画面表示」と「印刷」それぞれに最適化されたスタイルを簡単に適用できます。<link>タグのmedia属性や@importルールを使い分けることで、ユーザーの閲覧環境に合わせた柔軟なデザインが可能になります。なお、古いメディアタイプは非推奨となっているため、実装時にはall、print、screen、speechの4種類を使用するようにしましょう。
-
CSSでリンクの各状態をスタイリングする方法：:link・:visited・:hover・:activeの使い方
CSSの擬似クラスである :link、:visited、:hover、:active を使うことで、リンクのさまざまな状態に応じて個別のスタイルを適用できます。これらを正しく機能させるためには、記述する順序が重要です。推奨される順序は以下の通りです。:link … まだ訪問していないリンク:visited … すでに訪問済みのリンク:hover … マウスカーソルが乗っている状態のリンク:active … クリックされている瞬間のリンクこの順序を守ることで、後から定義したスタイルが意図せず上書きされるのを防ぎ、すべての状態が正しく反映されます。構文CSSでリンクの状態を指定する基本構文は次の通
-
CSSメディアタイプとメディアクエリの基本を徹底解説
CSSのメディアタイプ(Media Types)とメディアクエリ(Media Queries)は、デバイスの一般的な種類(スクリーン、プリントなど)や特性(画面解像度、ビューポートの寸法など)に応じて特定のスタイルを定義するための仕組みです。レスポンシブWebデザインを実現するうえで欠かせない技術といえます。 メディアクエリの構文 メディアクエリの基本構文は以下のとおりです。 @media not | only mediatype and (expressions) { CSS-Code; } このメディアクエリが適用されるのは、主に次のようなケースです。 med