HTML 【メタデータ】2 ~ link要素(3)media属性

Media Music Video Technology Communication Concept

メタデータ・コンテンツの要素の1つであるlink要素の中で、今回は、CSSをメディア別に切り替える方法についてまとめます。

以下のページもご参照下さい。
HTML 【 metadata 】1 ~ メタデータ・コンテンツの概要とbase要素
HTML 【 metadata 】2 ~ link要素(1)MIMEタイプ一覧と属性一覧
HTML 【 metadata 】2 ~ link要素(2)CSSファイルの読み込み

目次

1.media属性とメディアタイプ
2.media属性でCSSを切り替える
3.media属性でPDFに切り替える

1.media属性とメディアタイプ

media属性の値はメディアタイプです。
メディアタイプとは、Webサイトを出力(見る、聞く、印刷)するメディア(機器)のことで、下記のような種類があります。

メディアタイプ メディアタイプの概要
all すべての機器(デフォルト値)
screen 一般的なコンピュータ用カラーディスプレイ
tv テレビ画面(スクロール制限のあるカラーモニタ)
handheld 携帯電話などの端末(小さい画面、モノクロ、周波帯域が小さいもの)
print プリンタ
projection プロジェクタ(投影機やOHPなど)
tty 文字幅が固定された機器
speech
(以前のaural)
音声ブラウザなど音声を生成するデバイス
(CSS3ではauralは非推奨です)
braille 点字ディスプレイなど
embossed 点字プリンタ

メディアタイプを指定すると、ブラウザは関係ない機器用のスタイルシートは読み込みません。この性質を利用して、アクセシビリティを向上させられます。
関係ない機器への指定は読み込まないので、その分読み込み時間が短くなります。
※アクセシビリティ(accessibility) とは、「アクセスのしやすさ」という意味です。

media属性の値は、1つだけでなく、「screen, projection, print」のように「,(カンマ)」で区切って複数の値をまとめて指定することができます。

media属性を省略すると、メディアタイプは、デフォルトのallになります。

▲目次へ戻る

2.media属性でCSSを切り替える

●プリント用にCSSを切り替える

CSSをプリント用に切り替える場合は、次のように指定します。

<head>
<link rel=”stylesheet” media=”screen” href=”default.css” type=”text/css”>
<link rel=”stylesheet” media=”print” href=”print.css” type=”text/css”>
</head>

2種類のCSSを指定してmedia属性の値を変えています。
こうすることでブラウザは、画面(screen)ではdefault.cssで表示し、印刷時にはprint.cssを使って印刷します。

●音声ブラウザや点字ディスプレイ用にCSSを切り替える

装飾のために画像などの指定をしたCSSは、音声ブラウザなどでは無意味のため、読み込み時間が無駄になってしまいます。そこで、音声ブラウザ専用等のCSSがあれば、media属性で指定しておくと、より良い環境を提示できます。
CSSを音声ブラウザや点字ディスプレイ用に切り替える場合は、次のように指定します。

<head>
<link rel=”stylesheet” media=”screen” href=”default.css” type=”text/css”>
<link rel=”stylesheet” media=”print” href=”print.css” type=”text/css”>
<link rel=”stylesheet” media=”aural, braille, embossed” href=”print.css” type=”text/css”>
</head>

link要素の3番目に、aural、braille、embossedをまとめて指定しています。
もちろん、音声ブラウザや点字ディスプレイなどへの専用のCSSが無い場合は、3番目のlink要素は不要です。その場合は、HTML文書を正しく構築する事に留意すれば良いと思います。

●表示幅によってCSSを切り替える(スマホやタブレットへの対応等)

同じHTMLを、表示幅によってCSSを切り替えて表示することができます。そうすることで、スマホやタブレット等、小さい画面のユーザが、文字や写真をより見やすくなります。
表示幅によってCSSを切り替える場合は、次のように指定します。

<head>
<link rel=”stylesheet” type=”text/css” href=”css/default.css”>
<link rel=”stylesheet” media=”screen and (min-device-width: 480px) and (orientation:landscape)”  href=”css/yoko.css” type=”text/css”>
<link rel=”stylesheet” media=”screen and (min-device-width: 480px) and (orientation:portrait)” href=”css/tate.css” type=”text/css”>
<link rel=”stylesheet” media=”screen and (max-device-width: 480px)” href=”smartp.css” type=”text/css” />
</head>

link要素の1番目はデフォルトのCSSです。
link要素の2番目は画面幅が480px以上で「landscape(横長)」=タブレットが横持ちのときのCSS、
link要素の3番目は画面幅が480px以上で「portrait(縦長)」=タブレットが縦持ち用のCSS、
link要素の4番目は画面幅が480px以下として、スマホ用のCSSを適用する指定です。

PC用HTMLをスマホやタブレット用にも使用する場合は、幅の変化に対応できるレイアウトにすることが重要です。画像サイズをRetina Display用に倍にしておくとか、tableは使用せずlistで処理するなどの工夫が必要です。

▲目次へ戻る

3.media属性でPDFに切り替える

これまでは、外部CSSを切り替える方法でしたが、link要素でHTMLファイルそのものを他のファイルに切り替えることもできます。
例えば、印刷用のPDFファイルへの切り替えは、次のように指定します。

<head>
<link rel=”alternate” media=”print” href=”print.pdf” type=”application/pdf”>
</head>

rel=”alternate”としています。alternateという値は代替書類という意味です。
上の例では、HTMLファイルの代替書類として、print.pdfを印刷用(media=”print”)に指定しています。
このとき type属性で指定するMIMEタイプはapplication/pdfです。
(MIMEタイプについてはHTML 【 metadata 】2 ~ link要素(1)MIMEタイプ一覧と属性一覧 1.MIMEタイプ一覧をご参照下さい。)

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です