Css-media-types

提供:Dev Guides
移動先:案内検索

CSS-メディアタイプ

スタイルシートの最も重要な機能の1つは、画面、紙、スピーチシンセサイザー、点字デバイスなど、さまざまなメディアでのドキュメントの表示方法を指定することです。

現在、スタイルシートのメディアの依存関係を指定する方法は2つあります-

  • @mediaまたは@import at-rulesを使用して、スタイルシートからターゲットメディアを指定します。 *ドキュメント言語内でターゲットメディアを指定します。

@mediaルール

_ @ media_ルールは、ルールセットのターゲットメディアタイプ(カンマ区切り)を指定します。

以下に例を示します-

<style tyle = "text/css">
   <!--
      @media print {
         body { font-size: 10pt }
      }

      @media screen {
         body { font-size: 12pt }
      }
      @media screen, print {
         body { line-height: 1.2 }
      }
   -->
</style>

ドキュメント言語

HTML 4.0では、LINK要素の_media_属性は外部スタイルシートのターゲットメディアを指定します-

以下は例です-

<style tyle = "text/css">
   <!--
      <!doctype html public "-//w3c//dtd html 4.0//en">
      <html>
         <head>
            <title>link to a target medium</title>
            <link rel = "stylesheet" type = "text/css" media = "print,
               handheld" href = "foo.css">
         </head>

         <body>
            <p>the body...
         </body>
      </html>
   -->
</style>

認識されるメディアタイプ

CSSメディアタイプに選択された名前は、関連するプロパティが意味を持つターゲットデバイスを反映しています。 これらは、メディアタイプが参照するデバイスの意味を示します。 以下は、さまざまなメディアタイプのリストです-

Sr.No. Value & Description
1
  • all*

すべてのデバイスに適しています。

2

aural

音声シンセサイザーを対象としています。

3

braille

点字触覚フィードバックデバイスを対象としています。

4

embossed

点字ページングプリンターを対象としています。

5

handheld

ハンドヘルドデバイス(通常、小さな画面、モノクロ、制限された帯域幅)を対象としています。

6

print

ページングされた不透明な素材、および印刷プレビューモードで画面に表示されるドキュメントを対象としています。 ページメディアのセクションを参照してください。

7

projection

プロジェクターやOHPフィルムへの印刷など、投影されたプレゼンテーションを対象としています。 ページメディアのセクションを参照してください。

8

screen

主にカラーのコンピューター画面を対象としています。

9

tty

テレタイプ、端末、表示機能が制限されているポータブルデバイスなど、固定ピッチの文字グリッドを使用するメディアを対象としています。

10

tv

テレビタイプのデバイスを対象としています。

-メディアタイプ名は大文字と小文字を区別しません。