From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/@media/width/index.html | 82 ++++++++++++++++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 files/ja/web/css/@media/width/index.html (limited to 'files/ja/web/css/@media/width') diff --git a/files/ja/web/css/@media/width/index.html b/files/ja/web/css/@media/width/index.html new file mode 100644 index 0000000000..88f07e05bf --- /dev/null +++ b/files/ja/web/css/@media/width/index.html @@ -0,0 +1,82 @@ +--- +title: width +slug: Web/CSS/@media/width +tags: + - '@media' + - CSS + - メディアクエリ + - メディア特性 + - リファレンス +translation_of: Web/CSS/@media/width +--- +
{{cssref}}
+ +

CSS の width メディア特性は、{{glossary("viewport", "ビューポート")}}の幅 (又はページ付きメディアのページボックスの幅) をテストするために使用することができます。

+ +

構文

+ +

width 特性は、ビューポートの幅を表す {{cssxref("<length>")}} 値として指定します。これは範囲の特性であり、つまり接頭辞の付いた min-width 及び max-width の変化形を使用して、それぞれ最小値と最大値をクエリすることができます。

+ +

例

+ +

HTML

+ +
<div>ビューポートの幅を変更しながらこの要素を見ていてください。</div>
+ +

CSS

+ +
/* 正確な幅 */
+@media (width: 360px) {
+  div {
+    color: red;
+  }
+}
+
+/* 最小幅 */
+@media (min-width: 35rem) {
+  div {
+    background: yellow;
+  }
+}
+
+/* 最大幅 */
+@media (max-width: 50rem) {
+  div {
+    border: 2px solid blue;
+  }
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Example','90%')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Media Queries', '#width', 'width')}}{{Spec2('CSS4 Media Queries')}}値に負の数を取ることができるようになり、この場合は false と計算されます。
{{SpecName('CSS3 Media Queries', '#width', 'width')}}{{Spec2('CSS3 Media Queries')}}初回定義。値は非負でなければなりませんでした。
+ +

ブラウザーの対応

+ + + +

{{Compat("css.at-rules.media.width")}}

-- cgit v1.2.3-54-g00ecf