CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSメディアタイプとは？10種類のメディアタイプ一覧と使い方を解説

CSSメディアタイプとは

CSSのメディアタイプ（Media Type）とは、スタイルシートがどの種類のデバイスや出力媒体向けに適用されるかを指定するための仕組みです。これを利用することで、同じHTML文書に対して、画面表示用・印刷用・音声読み上げ用など、用途に応じた異なるスタイルを定義できます。

メディアタイプは、@mediaルールや<link>タグのmedia属性などを通じて指定します。

CSSで利用できるメディアタイプ一覧

以下は、CSSで定義されている主なメディアタイプの一覧です。

No.値と説明
1all（すべて）
すべてのデバイスに適用されます。
2aural（音声）
音声合成装置（スクリーンリーダーなど）向けです。※CSS 2.1で非推奨となり、CSS 3では「speech」に置き換えられました。
3braille（点字）
点字ディスプレイなど、点字による触覚フィードバックデバイス向けです。
4embossed（エンボス）
点字ページプリンター向けです。
5handheld（ハンドヘルド）
携帯端末向けです。通常、小型画面・モノクロ表示・限られた通信帯域といった環境を想定しています。
6print（印刷）
ページに分割された印刷物や、ブラウザーの印刷プレビューで表示される文書向けです。詳細はページ付きメディアに関する項目を参照してください。
7projection（投影）
プロジェクターを使ったプレゼンテーションや、OHPフィルムへの印刷向けです。詳細はページ付きメディアに関する項目を参照してください。
8screen（画面）
主にカラーコンピューターの画面向けです。
9tty
テレタイプや端末など、固定ピッチ文字グリッドを使用するメディア、あるいは表示能力が限られたポータブルデバイス向けです。
10tv（テレビ）
テレビ型のデバイス向けです。

メディアタイプの基本的な使い方

例えば、印刷時にのみ適用されるスタイルを定義したい場合は、次のように@mediaルールを記述します。

@media print {
  body {
    font-size: 12pt;
  }
}

このように書くことで、画面表示には影響を与えず、印刷時だけフォントサイズを変更できます。

補足：モダンCSSでの扱い

「aural」はCSS 2.1で非推奨となり、「handheld」も実際のモバイルデバイスではほとんどサポートされませんでした。現代のレスポンシブデザインでは、単純なメディアタイプではなく、画面幅や解像度などより細かい条件を指定できるメディアクエリ（Media Queries）を使うのが一般的です。ただし、「print」や「screen」は今でも広く活用されており、基本として押さえておきたい重要な概念です。

  1. CSSメディアタイプとメディアクエリの基本を徹底解説

    CSSのメディアタイプ(Media Types)とメディアクエリ(Media Queries)は、デバイスの一般的な種類(スクリーン、プリントなど)や特性(画面解像度、ビューポートの寸法など)に応じて特定のスタイルを定義するための仕組みです。レスポンシブWebデザインを実現するうえで欠かせない技術といえます。 メディアクエリの構文 メディアクエリの基本構文は以下のとおりです。 @media not | only mediatype and (expressions) {    CSS-Code; } このメディアクエリが適用されるのは、主に次のようなケースです。 med

  2. CSSのメディアクエリを活用したレスポンシブWebデザインの基本と実装例

    メディアクエリとは メディアクエリ(Media Queries)は、CSSで提供される技術の一つで、スマートフォン、タブレット、デスクトップPCなど、デバイスの画面サイズに応じて異なるスタイルルールを適用できる仕組みです。 これにより、単一のHTMLファイルであらゆる画面幅に対応したレスポンシブWebデザインを実現できます。ブレークポイント(画面幅の境界値)ごとに条件を指定し、その条件が一致した場合のみCSSが適用されるのが特徴です。 主な構文のポイント @media only screen and (max-width: 600px) … 幅600px以下の画面に適用 @media onl