このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

メディア・クエリ~“width”メディア・フィーチャー

記事Jan. 16th,2019
Jul. 15th,2021
出力デバイスの描画域の横幅を条件とするためのメディア・フィーチャー
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

width”メディア・フィーチャーについて

<length>”値
タイプ 範囲型

width”メディア・フィーチャーは文書が出力されるデバイスの描画領域の横幅を表すメディア・フィーチャーです。

パソコンやスマートフォンのブラウザなどの連続メディアではスクロールバーの幅を含めたビューポートの横幅を表します。プリンタ・デバイスやブラウザの印刷プレビューのようなページ化メディアではページ・ボックスの横幅を表します。

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

width”メディア・フィーチャーは値が負である時は常に“偽”となります。ただし、範囲指定した値に正の部分があれば、その範囲では“真”か“偽”かが検証されます。

指定できる値

説明
<length> 出力デバイスの描画域(ビューポート)の横幅

サンプルコード

@media all and (max-width: 640px) {
p.sample {
background-color: #00a497; /**/
text-decoration: underline dotted;
}
}

@media all and (min-width: 640px) and (max-width: 960px) {
p.sample {
background-color: #e198b4; /**/
text-decoration: underline wavy;
}
}

@media all and (min-width: 960px) {
p.sample {
background-color: #fabf14; /**/
text-decoration: underline dashed;
}
}
<p class="sample">
猫は、上のかぎり黒くて、ことはみな白き。
</p>

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

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク