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

最終更新日:2017年11月26日  (初回投稿日:2012年06月08日)

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

<link>要素は内容が多いため 記事を分けています。

[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
  1. <link>要素の「media属性」
    1. メディアタイプ(media type)一覧
    2. メディア特性(media feature) 抜粋
  2. <link>要素の「media属性」で外部CSSを切り替える
    1. プリント用にCSSを切り替える
    2. スマホなどのデバイスの表示幅によってCSSを切り替える
  3. <link>要素の「media属性」で PDFに切り替えよう

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タイプ」をご覧ください。

次回予告

<link>要素でなく、CSSファイル内で @import や @media を使ってスタイルを切り替えるほうが、手っ取り早いし、わりと一般的です。
これを次回「ちょっとメモ」で紹介します。

関連記事
この記事をはてなブックマークに追加

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

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

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
11 | 2018/12 | 01
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.