column

ITコラム

Media Music Video Technology Communication Concept

プログラミングノウハウ

2017.01.24

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

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

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

HTML 【メタデータ】1 ~ メタデータ・コンテンツの概要とbase要素
HTML 【メタデータ】2 ~ link要素(1)MIMEタイプ一覧と属性一覧
HTML 【メタデータ】2 ~ link要素(2)CSSファイルの読み込み
HTML 【メタデータ】2 ~ link要素(3)media属性( 本ページ )
HTML 【メタデータ】2 ~ link要素(4)@importと@media
HTML 【メタデータ】2 ~ link要素(5)rel属性
HTML 【メタデータ】3 ~ style要素
HTML 【メタデータ】4 ~ meta要素

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

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

▲目次へ戻る

無料説明会

SHARE

最新記事

無料説明会に参加してみる

INTERNOUS,inc. All rights reserved.

無料オンライン説明会へ