“color-index”メディア・フィーチャー｜メディア・フィーチャー｜メディア・クエリ｜CSS－havin' a coffee break

＃

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

“color-index”メディア・フィーチャーは出力デバイスのカラーテーブルのエントリ数を条件とするためのメディア・フィーチャーです。インデックスカラーで色を表現するデバイスのカラーテーブルにある色の数を指します。

一般的なカラーディスプレイは赤、緑、青の3色を混ぜて色を表現するRGBカラーモデルを使用していますが、初期のパソコンなどは各色がどのくらい含まれているかを表したRGB値を画素一つ一つに記録できるほどメモリ容量に余裕がありませんでした。そこでカラーテーブル(もしくはカラーパレット、カラーマップなど)と呼ばれる色の一覧を定義しておいてRGB値はそこに記録しておき、画素毎にはそのカラーテーブルの何番目の色というように記録してメモリの使用量を抑制できるようにしました。この方式をインデックスカラーと呼びます。

表現する色数が増えていくとカラーテーブルを使用するより画素毎にRGB値を記録した方がメモリの使用量が小さくなります。この方式をダイレクトカラーと呼びます。現代の一般的なパソコンやスマートフォンはダイレクトカラーを使用し、カラーテーブルを使用しません。

値は範囲コンテキスト、もしくは“min-”接頭辞と“max-”接頭辞で範囲指定できます。

＃

指定できる値

値	説明
<integer>	出力デバイスのカラーテーブルのエントリ数
0	出力デバイスはカラーテーブルを使用しない
(省略)	出力デバイスはカラーテーブルを使用している

＃

サンプルコード



@media (min-color-index: 256) {


.sample {



/* カラーテーブルに256色以上あるデバイスに適用されるスタイル。 */



}


}




@media (color-index) {


.sample {



/* カラーテーブルを使用しているデバイスに適用されるスタイル。 */



}


}

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

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

指定できる値

サンプルコード