HTML <source> メディア属性

HTML <source> タグ

定義と使用方法

media 属性はCSSで定義される通常のメディアクエリをすべて受け入れます。

注意：この属性は複数の値を受け入れます。

例

二つのソースファイルとバックアップ画像を含む <picture> 要素：

<picture>
  <source media="(min-width:650px)" srcset="flower-1.jpg">
  <source media="(min-width:465px)" srcset="flower-2.jpg">
  <img src="flower-3.jpg" alt="Flowers" style="width:auto;">
</picture>

実際に試してみてください

文法

<source media="media_query>

可能な演算子

演算子 描述
and 規定 AND 運算子。
not 規定 NOT 運算子。
, 規定 OR 運算子。

デバイス

值 描述
all デフォルト。すべてのデバイスに適しています。
aural 音声合成器。
braille 点字反馈装置。
handheld ハンドヘルドデバイス（小さなスクリーン、限られた帯域幅）。
projection プロジェクター。
print 印刷プレビューモード/印刷ページ。
screen コンピュータ画面。
tty 電伝打字機および等幅字格子を使用する類似のメディア。
tv テレビ型端末（低解像度、限られたページング能力）。

值

值 描述
width

規定目標顯示區域的寬度。

可使用 "min-" と "max-" 接頭辞。

例：media="screen and (min-width:500px)"
height

規定目標顯示區域的高度。

可使用 "min-" と "max-" 接頭辞。

例：media="screen and (max-height:700px)"
device-width

規定目標顯示器/紙張的寬度。

可使用 "min-" と "max-" 接頭辞。

例：media="screen and (device-width:500px)"
device-height

規定目標顯示器/紙張的高度。

可使用 "min-" と "max-" 接頭辞。

例：media="screen and (device-height:500px)"
orientation

規定目標顯示器/紙張的方向。

可能的值："portrait" または "landscape"

例：media="all and (orientation: landscape)"
aspect-ratio

規定目標顯示區域的寬度/高度比。

可使用 "min-" と "max-" 接頭辞。

例：media="screen and (aspect-ratio:16/9)"
device-aspect-ratio

規定目標顯示器/紙張的 device-width/device-height 比率。

可使用 "min-" と "max-" 接頭辞。

例：media="screen and (aspect-ratio:16/9)"
color

規定目標顯示器的每種色彩的位數。

可使用 "min-" と "max-" 接頭辞。

例：media="screen and (color:3)"
color-index

規定目標顯示器能夠處理的色彩數。

可使用 "min-" と "max-" 接頭辞。

例：media="screen and (min-color-index:256)"
monochrome

规定単色フレームバッファーの各ピクセルのビット。

可使用 "min-" と "max-" 接頭辞。

例子：media="screen and (monochrome:2)"
resolution

规定ターゲット表示器/紙のピクセル密度 (dpi または dpcm)。

可使用 "min-" と "max-" 接頭辞。

例子：media="print and (resolution:300dpi)"
scan

规定 tv 表示器のスキャン方法。

可能的值は："progressive" と "interlace"。

例子：media="tv and (scan:interlace)"
grid

规定输出设备是网格还是位图。

可能的值："1" 代表网格，"0" 是其他。

例子：media="handheld and (grid:1)"

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
38.0 9.0 15.0 9.1 25.0

HTML <source> タグ