【HTML】link rel="stylesheet" media="screen" href="~"におけるmedia="screen"はどういう意味??

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

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

というコードをよく見るけど、このmedia="screen"は

「一体どういうもの?」

と思ったので簡単に調べてみた。

スポンサーリンク

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

と思っておけばいい。

おすすめの記事