ITコラム

Media Music Video Technology Communication Concept

ITコラム

2017.01.24

HTML 【メタデータ】２～ link要素（３）media属性

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

メタデータ・コンテンツについては、こちらのページもご参照下さい。

HTML 【メタデータ】１～メタデータ・コンテンツの概要とbase要素
 HTML 【メタデータ】２～ link要素（１）MIMEタイプ一覧と属性一覧
 HTML 【メタデータ】２～ link要素（２）CSSファイルの読み込み
 HTML 【メタデータ】２～ link要素（３）media属性（本ページ）
HTML 【メタデータ】２～ link要素（４）@importと@media
HTML 【メタデータ】２～ link要素（５）rel属性
 HTML 【メタデータ】３～ style要素
 HTML 【メタデータ】４～ meta要素

１．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になります。

▲目次へ戻る

２．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要素の３番目に、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要素の１番目はデフォルトのCSSです。
link要素の２番目は画面幅が480px以上で「landscape（横長）」=タブレットが横持ちのときのCSS、
link要素の３番目は画面幅が480px以上で「portrait（縦長）」=タブレットが縦持ち用のCSS、
link要素の４番目は画面幅が480px以下として、スマホ用のCSSを適用する指定です。

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

▲目次へ戻る

３．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タイプについてはMIMEタイプ一覧をご参照下さい。）

▲目次へ戻る