最近勉強のために、色々なWEBサイトのコードを見ている。

その中で、<head>タグ内に

ってコードをよく見るけど、

この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を読み込むのね。」

って思っておけばいい。

おすすめの記事