“media”属性｜“link”要素:外部リソースと関連付ける｜HTML－havin' a coffee break

＃

“media”属性について

“media”属性は外部リソースが対象とするメディア条件を指定します。属性値はメディアクエリで指定します。

ブラウザは“media”属性で指定された条件をもとに使用する外部リソースを選択します。例えば、ユーザーの閲覧環境に応じて適用するスタイルシートを選択させることができます。

“media”属性を指定しない場合の既定値はすべてのメディアを対象とする“all”です。

＃

指定できる値

属性値	説明
メディアクエリ	リソースが対象とするメディア条件

＃

サンプルコード



<!DOCTYPE html>

<html lang="ja">


<head>


<meta charset="UTF-8">

<link rel="icon" href="image/favicon.ico">

<meta name="robots" content="index,follow">

<meta name="keywords" content="バナナ,栄養素,産地">

<meta name="description" content="黄色くて栄養満点な果物であるバナナについて解説します。">

<link rel="stylesheet" href="css/stylesheet-sp.css" media="( max-width: 640px )">

<link rel="stylesheet" href="css/stylesheet-tab.css" media="( min-width: 640px ) and ( max-width: 1280px )">

<link rel="stylesheet" href="css/stylesheet-pc.css" media="( min-width: 1280px )">

<title>黄色いフルーツバナナ - 果物を食べる</title>


</head>

<body>


...

“link”要素~“media”属性

“media”属性について

指定できる値

サンプルコード