メディア・クエリ~“color-gamut”メディア・フィーチャー

“color-gamut”メディア・フィーチャーについて

“color-gamut”メディア・フィーチャーは出力デバイスが対応する色の範囲を条件とするためのメディア・フィーチャーです。デバイスが表現可能なおおよその色域を使用します。

多くのデバイスが対応している色域はsRGBと呼ばれるもので、他にもDCI-P3やDCI-P3などがあります。

sRGB

“standard Red Green Blue”の略。IEC(国際電気標準会議)によって定められた規格で一般的なディスプレイなどの多くはこの規格に準拠しています。

DCI-P3

DCI(Digital Cinema Initiatives)によって定められた規格でデジタルシネマ向けの広い色域を持ちます。最新のパソコンやスマートフォンに搭載された高画質ディスプレイにはこの色域に対応しているものもあります。DCI-P3はsRGBよりも大きい範囲の色域を含みます。

Rec.2020

4Kや8Kの超高精細画質テレビ(UHDTV)が満たすべき仕様の規格であるITU-R(国際電気通信連合 無線通信部門)勧告BT.2020で定められた規格です。Rec.2020はDCI-P3よりも大きい範囲の含みます。

指定できる値

サンプルコード

@media all and (color-gamut: srgb) {

p.sample {

background-color: #00a497; /*■*/
text-decoration: underline dotted;

}

}

@media all and (color-gamut: p3) {

p.sample {

background-color: #e198b4; /*■*/
text-decoration: underline wavy;

}

}

@media all and (color-gamut: rec2020) {

p.sample {

background-color: #fabf14; /*■*/
text-decoration: underline dashed;

}

}

<p class="sample">

猫は、上のかぎり黒くて、ことはみな白き。

</p>

猫は、上のかぎり黒くて、ことはみな白き。