[42-2] link media=" " で 外部CSSをメディア別に切り替えよう

<link>要素の2回目です。(全部で4〜5回続く予定です。)
(第1弾は「[42-1] <link>で外部CSSファイルの読み込み、グループ化をしよう」

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

<link>要素の「media属性」

まずは「media属性」の値=メディアタイプを見てみましょう。
下記のようにけっこうたくさん用意されています。
メディアとは、ウェブサイトを出力(見る、聞く、印刷)するメディア(機器)のこと。

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

メディアタイプを指定すれば、ブラウザは関係ない機器用のスタイルシートを読み込みません。 この性質を利用して、アクセシビリティを向上させられます。

関係ない機器への指定は読み込まないので、当然ながら読み込み時間が少なくなります。

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

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

「media属性」で外部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」を使って印刷します。

[使い方の例]
・パソコン画面上は大きめの文字にして、プリント時は用紙節約のために文字を小さめにする。
→screen用のCSSと、print用のCSSのフォントサイズ指定を変えておく。
・お店の地図ページなどで、地図と一緒に住所・電話番号・営業時間・定休日などをプリントできるようにする。
→screen用のCSSでは、住所・電話番号などの文字情報を「display:none;」にしておく。

黒っぽい背景色で、文字が白いサイトの場合(可読性が低いのでお勧めしないけど)、今時のブラウザは自前の印刷用CSSで、白地に黒文字のプリントをするらしいです。
でもそれだと制作者の意図どおりにプリントされるとは限らないので、プリント用CSSも用意して、media属性で指定しておくのがいいみたい。

●音声ブラウザや点字ディスプレイ用にCSSを切り替える
装飾のために画像やフォントの指定をしたCSSは、音声ブラウザなどでは、読み込み時間がかかるだけで無駄。音声ブラウザなど専用のCSSがあれば media属性で指定しておくのがベスト。

<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が無いのなら、HTML文書をキチンと構築してあればOKなので、3行目は不要です。

「HTML文書をキチンと構築」とは、HTMLの各要素をその役割どおりに使っておくことです。
例えば、見出しは「h1〜h6」で、セクションはセクション用の要素(article, aside, section, nav)で…とか。
そして文書の構造以外の情報(デザイン・レイアウトなど)はCSSで行う。これが基本ルールなんですわ。
このへんが参考になるかなあ…↓
[12-2] なんでHTMLとCSSはセットなの?
[17-2] セクションを表す要素(article, aside, section, nav)
[17-3] セクションと見出しのルール(section, h1〜h6)

●スマホやタブレット用に、表示幅によってCSSを切り替える
同じHTMLを、表示幅によって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>

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

PC用HTMLをスマホやタブレット用に流用するなら、幅が変わってもOKな「レスポンシブレイアウト」にすること。画像サイズをRetina Display用に倍にしておくとか、tableはやめてlistで処理する…など、工夫が必要です。

実際にスタイルシートの切り替えを見るために、サンプルを作ってみました。
→link要素の「media属性」で表示幅によってCSSを切り替える
(honttoni42-2.html)
をご覧ください。(別ウィンドウで開きます)

media属性を使うより手っ取り早い、CSSの「@import」と「@media」

実は、<link>要素でなく、CSSファイル内でメディアの切り替え指定を行う方法もあります。
@import と @media を使います。こっちの方がHTMLにいろいろ書かなくて済んでスマートというか手っ取り早いっぽい。これは次回「ちょっとメモ」で紹介します。

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

これまでは、外部CSSを切り替える方法でしたが、<link>でHTMLファイルそのものを、他のファイルに切り替えることもできます。
いちばん使いそうなのは、印刷用のPDFファイルへの切り替え。下記のように指定します。

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

「rel="alternate"」としていますね。「alternate」という値は代替え書類ということ。
この「alternate」もよく使います。
この例では、HTMLの代替え書類として「print.pdf」を印刷用(media="print")に指定しています。
このとき type属性で指定するMIMEタイプは「application/pdf」ですね。

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

<link>の属性とその値の一覧表

今回使ったのは「media」属性だけですね。<link>にはこのほかたくさんの属性があり、属性の使い分けでいろんな事ができます。
「<link>要素の属性一覧表」を作っていますので、参考にしてください。

次回予告

外部CSSの場合、<link>のmedia属性でメディアを切り替えるより、CSS内で「@import」や「@media」を使う方法の方が良いと思います。次回はそれを紹介します 。

その次は<link>のつづき。<link>を使って、他言語サイトやモバイル版サイトへ導くことができるんだそうです。

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

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

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 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.