ほんっとにはじめてのHTML5とCSS3：[42-2] link要素の media属性で外部CSSをメディア別に切り替えよう

[42-2] link要素の media属性で外部CSSをメディア別に切り替えよう

最終更新日：2017年11月26日　（初回投稿日：2012年06月08日）

<link>要素の2回目です。
今回は<link>要素の「media属性」で、外部CSSファイルをメディア別に切り替えてみましょう。

[42-1] link要素で外部CSSファイルの読み込み・グループ化をしよう: <link>要素全体の話と、外部CSSファイルの読み込み方法
[42-2] link要素の media属性で外部CSSをメディア別に切り替えよう　←今日はココ: media属性で外部CSSファイルを切り替えます。
（ちょっとメモ）CSSの @import と @media（メディアクエリ）: CSSファイル上で CSSを切り替える方法です。
[42-3] link要素の「rel属性」の値（リンクタイプ）: たくさんの言語に対応したサイトの場合、<link>要素で言語の切り替えができます。
[42-4] link要素でショートカットアイコン（favicon）を表示させよう: ショートカットアイコンを設定します。

本日のINDEX

media属性の値は「メディアタイプ」「メディア特性」

まずは「media属性」の値には メディアタイプ と メディア特性 があります。
それぞれ一覧にしてみました。

メディアタイプ（media type）一覧

all	すべてのデバイスに適合。デフォルト値（「media属性」を省略すると、メディアタイプは「all」になる）
print	プリント時・印刷プレビューで表示されるドキュメント向け
screen	カラーのコンピュータ画面向け
speech	音声読み上げソフト向け（ウェブブラウザでは Opera だけが実装しているようです）

CSS2.2 では「tty, tv, projection, handheld, braille, embossed, aural」というメディアタイプもあるんですが、Media Queries 4（草案）で非推奨となるので、使わないほうが良いという情報もあります。

メディア特性（media feature）抜粋

よく使うものだけ抜粋しています。

max-width	ビューポート（表示領域）の最大幅の数値を指定。（この数値以下なら適用される条件） `（例）max-width: 320px`
min-width	ビューポートの最小幅の数値を指定。（この数値以上なら適用される条件） `（例）min-width: 35rem`
max-height	ビューポートの最大高さの数値を指定。（この数値以下なら適用される条件） `（例）max-height: 820px`
min-height	ビューポートの最小高さの数値を指定。（この数値以上なら適用される条件） `（例）min-height: 50rem`
max-aspect-ratio	ビューポートのアスペクト比「幅/高さ」の最大値を指定（この比率以下なら適用される条件） `（例）max-aspect-ratio: 2/1`
min-aspect-ratio	ビューポートのアスペクト比「幅/高さ」の最小値を指定（この比率以上なら適用される条件） `（例）min-aspect-ratio: 8/5`
orientation	デバイスの縦向き横向きを、以下のキーワードで指定。 portrait（ポートレイト）= 縦向き（高さが幅以上） landscape（ランドスケープ）= 横向き（幅が高さ以上） `（例）orientation: landscape`
max-resolution	デバイスの解像度の最大値を指定。（この数値以下なら適用される条件） `（例）max-resolution: 300dpi`
min-resolution	デバイスの解像度の最小値を指定。（この数値以上なら適用される条件） `（例）min-resolution: 72dpi`

この他に、
・color（カラーディスプレイか）
・monochrome（白黒ディスプレイか）
・scan（スキャン方式がインターレースかプログレッシブか）
・grid（グリッドデバイスかビットマップデバイスか）
など、たくさんのメディア特性が用意されています。
参考：Media Queries | W3C Recommendation

Media Queries 4 では「ホバー（マウスオーバー）できるか」という条件分岐もできるようになりそう。コレはあると便利ですね。

<link>要素の「media属性」で外部CSSを切り替える

上記の「メディアタイプ」や「メディア特性」を、<link>要素の「media属性」で使用して、条件下で CSSファイルを切り替えることができます。

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

下のソースコードでは、2つの CSSファイルの「media属性」の値を変えています。
ブラウザに、通常の表示は「default.css」、印刷時には「print.css」を使うように指示しています。

<head>
  <link rel="stylesheet" media="screen" href="css/default.css">
  <link rel="stylesheet" media="print" href="css/print.css">
</head>

黒っぽい背景色で白文字の場合だと、今のブラウザならデフォルトの印刷用CSSで、白地に黒文字のプリントもできるんですが、こちらで事前にプリント用CSSも用意したほうが良い場合もあります。そんな時に使えますね

スマホなどのデバイスの表示幅によってCSSを切り替える

スマホやタブレットなどのデバイス向けの CSSを切り替えは、CSS上でメディアクエリを用いるのが一般的ですが、 <link>要素でも可能です。

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

1つ目のCSSは全体のレイアウト。
2つ目は「media属性」で「幅が480px以下」で「横長（landscape）」の条件下で「yoko.css」が適用されるようにしています。
「yoko.css」では文字色はグレーです。
3行目は「幅480px以下」で「縦長（portrait）」の条件下で「tate.css」が適用されるようにしています。
「tate.css」で文字色をブルー・背景色はピンクに指定しています。

「メディアタイプ」と「メディア特性」を「and」で繋いでいますが、「or」「not」も使えます。
「メディア特性」は（）かっこの中に入れて使います。

上のコードのサンプルを作りましたのでご覧ください。

サンプルを開く（クリックで別ウィンドウで開きます）

<link>要素の「media属性」で PDFに切り替えよう

これまでは外部CSSを切り替える方法でしたが、<link>で HTMLファイルそのものを、印刷用のPDFファイルへの切り替えることもできます。

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

「rel="alternate"」としています。「alternate」は代替えファイルということ。

「rel属性」の値については、
[42-3] link rel="alternate" で他言語サイトへ導こうをご覧ください。

この例では、HTMLの代替え書類として「print.pdf」を印刷用（media="print"）に指定しています。
このとき type属性で指定するMIMEタイプは「application/pdf」ですね。

「MIMEタイプ」については「ちょっとメモ：MIMEタイプ」をご覧ください。

次回予告

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2017-11-26（Sun）│
投稿日：2012-06-08（Fri）│
カテゴリ：はじめてのHTML

Pagetop ↑

« next ホーム prev »

コメントの投稿