“media”属性｜“meta”要素:その他のメタデータ｜HTML－havin' a coffee break

＃

“media”属性について

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

“media”属性は“name”属性の値が“theme-color”である場合にだけ使用することができ、テーマカラーが適用されるメディアやデバイスを指定することができます。複数の“meta”要素に“media”属性で同じメディア条件を指定してはいけません。

＃

指定できる値

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

＃

サンプルコード



<!DOCTYPE html>

<html lang="ja">


<head>


<meta charset="UTF-8">

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

<meta name="theme-color" content="#a2d7dd" media="(prefers-color-scheme: light)">

<meta name="theme-color" content="#1f3134" media="(prefers-color-scheme: dark)">

<link rel="stylesheet" type="text/css" href="css/stylesheet.css" media="all">

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


</head>

<body>


...

“meta”要素~“media”属性

“media”属性について

指定できる値

サンプルコード