最近勉強のために、色々なWEBサイトのコードを見ている。
その中で、<head>タグ内に
1 | link rel="stylesheet" media="screen" href="~" |
ってコードをよく見るけど、
このmedia="screen"って
「一体なんだ?」
って思ったので簡単に調べてみた。
どうやらこれは、link要素で使うmedia属性というものらしい。(属性って言葉を使うからわかりにくいよね(笑))
CSSをメディア(PCとかテレビとかの機器)によって切り替えるために必要らしい。
ちなみにmedia="screen"っていうのは、
「一般的なコンピューター用カラーディスプレイでページが読まれる時にこのCSSを使え」
という意味だそうだ。
media="~" で使われる種類としては
- all :すべての機器(これがデフォルト)
- screen :一般的なコンピュータ用カラーディスプレイ(まぁ普通のPCだね)
- tv: テレビ
- handheld :携帯電話など
- print: プリンタ
- projection :プロジェクタ
などがある。
要は難しいことを考えずに、<link rel="stylesheet media="screen" href="~">
ってコードがあれば、
「あっこれはPC用のCSSを読み込むのね。」
って思っておけばいい。