From 4f71387444b05df81fe47e2d6d99b159d0c0d4fe Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 3 Jul 2021 12:11:55 +0900 Subject: Web/CSS/width を更新 (#1290) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - conflicting 版は廃止ページからのリダイレクト前のものなので削除 - 2021/06/17 時点の英語版に同期 --- files/ja/web/css/width/index.html | 72 +++++++++++++++++---------------------- 1 file changed, 32 insertions(+), 40 deletions(-) (limited to 'files/ja/web/css/width/index.html') diff --git a/files/ja/web/css/width/index.html b/files/ja/web/css/width/index.html index b52da296f5..322e08849b 100644 --- a/files/ja/web/css/width/index.html +++ b/files/ja/web/css/width/index.html @@ -4,13 +4,13 @@ slug: Web/CSS/width tags: - CSS - CSS Property - - CSS プロパティ + - Layout - Reference - dimensions - - 'recipe:css-property' + - recipe:css-property - size - width - - 寸法 +browser-compat: css.properties.width translation_of: Web/CSS/width ---

{{CSSRef}}

@@ -21,11 +21,11 @@ translation_of: Web/CSS/width -

{{cssxref("min-width")}} および {{cssxref("max-width")}} プロパティは、 {{cssxref("width")}} を上書きします。

+

{{cssxref("min-width")}} および {{cssxref("max-width")}} プロパティは width を上書きします。

-

構文

+

構文

-
/* <length> 値 */
+
/* <length> 値 */
 width: 300px;
 width: 25em;
 
@@ -41,17 +41,11 @@ width: auto;
 /* グローバル値 */
 width: inherit;
 width: initial;
+width: revert;
 width: unset;
 

 
-
width プロパティは以下のいずれかの値で指定します。

-
-
-
-
値

+
値

 
 

  
{{cssxref("<length>")}}

@@ -68,38 +62,38 @@ width: unset;
  
利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち min(max-content, max(min-content, <length-percentage>)) です。

 

 
-
アクセシビリティの考慮

+
アクセシビリティの考慮

 
 
ページを拡大してテキストサイズを大きくしたときに、 width を設定した要素が切り捨てられたり、他のコンテンツが見えなくなったりしないようにしてください。

 
 
 
-
公式定義

+
公式定義

 
 
{{CSSInfo}}

 
-
形式文法

+
形式文法

 
 {{csssyntax}}
 
-
例

+
例

 
-
既定の幅

+
既定の幅

 
-
p.goldie {
+
p.goldie {
   background: gold;
 }

 
-
<p class="goldie">The Mozilla community produces a lot of great software.</p>

+
<p class="goldie">The Mozilla community produces a lot of great software.</p>

 
 
{{EmbedLiveSample('Default_width', '500px', '64px')}}

 
-
ピクセル数と em 単位

+
ピクセル数と em 単位

 
-
.px_length {
+
.px_length {
   width: 200px;
   background-color: red;
   color: white;
@@ -114,26 +108,26 @@ width: unset;
 }
 

 
-
<div class="px_length">Width measured in px</div>
+
<div class="px_length">Width measured in px</div>
 <div class="em_length">Width measured in em</div>

 
 
{{EmbedLiveSample('Pixels_and_ems', '500px', '64px')}}

 
-
パーセント値

+
パーセント値

 
-
.percent {
+
.percent {
   width: 20%;
   background-color: silver;
   border: 1px solid red;
 }

 
-
<div class="percent">Width in percentage</div>

+
<div class="percent">Width in percentage</div>

 
 
{{EmbedLiveSample('Percentage', '500px', '64px')}}

 
 
max-content

 
-
p.maxgreen {
+
p.maxgreen {
   background: lightgreen;
   width: intrinsic;           /* Safari/WebKit uses a non-standard name */
   width: -moz-max-content;    /* Firefox/Gecko */
@@ -141,24 +135,24 @@ width: unset;
   width: max-content;
 }

 
-
<p class="maxgreen">The Mozilla community produces a lot of great software.</p>

+
<p class="maxgreen">The Mozilla community produces a lot of great software.</p>

 
 
{{EmbedLiveSample('max-content', '500px', '64px')}}

 
 
min-content

 
-
p.minblue {
+
p.minblue {
   background: lightblue;
   width: -moz-min-content;    /* Firefox */
   width: -webkit-min-content; /* Chrome */
   width: min-content;
 }

 
-
<p class="minblue">The Mozilla community produces a lot of great software.</p>

+
<p class="minblue">The Mozilla community produces a lot of great software.</p>

 
 
{{EmbedLiveSample('min-content', '500px', '155px')}}

 
-
仕様書

+
仕様書

 
 
@@ -177,7 +171,7 @@ width: unset;
   
-   
+   
@@ -192,13 +186,11 @@ width: unset;
  

  

    {{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}
    {{Spec2('CSS3 Sizing')}}キーワード max-content, min-content, fit-content を追加キーワード max-content, min-content, fit-content を追加
   

   

    {{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}
 

 
-
ブラウザーの互換性

-
-
+
ブラウザーの互換性

 
-
{{Compat("css.properties.width")}}

+
{{Compat}}

 
-
関連情報

+
関連情報