From 7d2c0d3e42d5bc62163a415da456c07c39bd63b6 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 16 Nov 2021 00:30:59 +0900 Subject: CSS Sizing に関するプロパティの変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/fit-content/index.html | 117 ------------------- files/ja/web/css/fit-content/index.md | 117 +++++++++++++++++++ files/ja/web/css/height/index.html | 165 -------------------------- files/ja/web/css/height/index.md | 165 ++++++++++++++++++++++++++ files/ja/web/css/max-height/index.html | 130 --------------------- files/ja/web/css/max-height/index.md | 130 +++++++++++++++++++++ files/ja/web/css/max-width/index.html | 140 ---------------------- files/ja/web/css/max-width/index.md | 140 ++++++++++++++++++++++ files/ja/web/css/min-height/index.html | 118 ------------------- files/ja/web/css/min-height/index.md | 118 +++++++++++++++++++ files/ja/web/css/min-width/index.html | 115 ------------------ files/ja/web/css/min-width/index.md | 115 ++++++++++++++++++ files/ja/web/css/width/index.html | 201 -------------------------------- files/ja/web/css/width/index.md | 201 ++++++++++++++++++++++++++++++++ 14 files changed, 986 insertions(+), 986 deletions(-) delete mode 100644 files/ja/web/css/fit-content/index.html create mode 100644 files/ja/web/css/fit-content/index.md delete mode 100644 files/ja/web/css/height/index.html create mode 100644 files/ja/web/css/height/index.md delete mode 100644 files/ja/web/css/max-height/index.html create mode 100644 files/ja/web/css/max-height/index.md delete mode 100644 files/ja/web/css/max-width/index.html create mode 100644 files/ja/web/css/max-width/index.md delete mode 100644 files/ja/web/css/min-height/index.html create mode 100644 files/ja/web/css/min-height/index.md delete mode 100644 files/ja/web/css/min-width/index.html create mode 100644 files/ja/web/css/min-width/index.md delete mode 100644 files/ja/web/css/width/index.html create mode 100644 files/ja/web/css/width/index.md (limited to 'files') diff --git a/files/ja/web/css/fit-content/index.html b/files/ja/web/css/fit-content/index.html deleted file mode 100644 index 7660b4d8c2..0000000000 --- a/files/ja/web/css/fit-content/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: fit-content() -slug: Web/CSS/fit-content -tags: - - CSS - - CSS グリッド - - CSS 関数 - - Experimental - - Reference - - Web - - ウェブ - - レイアウト -translation_of: Web/CSS/fit-content ---- -
{{CSSRef}}
- -

fit-content() はCSS の関数で、指定された寸法を min(最大寸法, max(最小寸法, 引数)) の式に従って有効な寸法に制約します。

- -
{{EmbedInteractiveExample("pages/css/function-fit-content.html")}}
- - - -

この関数は CSS グリッドのプロパティにおいて、トラックの寸法を max-content で定義された最大寸法と auto で定義された最小寸法との間で、 auto と似た方法 (すなわち minmax(auto, max-content)) で計算しますが、 auto の最小値よりも大きい場合は 引数 がトラックの寸法になるという点が異なります。

- -

これは {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}}, {{cssxref("max-height")}} にレイアウトボックスの寸法としても使用され、最大寸法は内容の最大寸法、最小寸法は内容の最小寸法になります。

- -

構文

- -

引数として <length> または <percentage> を受け付ける関数です。

- -
/* <length> 値 */
-fit-content(200px)
-fit-content(5cm)
-fit-content(30vw)
-fit-content(100ch)
-
-/* <percentage> 値 */
-fit-content(40%)
-
- -

値

- -
-
{{cssxref("<length>")}}
-
絶対的な長さ。
-
{{cssxref("<percentage>")}}
-
指定された軸で有効な空間に対する相対的なパーセント値です。
-
グリッドプロパティでは、行トラックにおける列内のグリッドコンテナーのインライン方向の寸法およびグリッドコンテナーのブロック方向の寸法の相対値です。それ以外では、書字方向に応じてレイアウトボックスの有効なインライン方向の寸法またはブロック方向の寸法に対する相対値になります。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

CSS

- -
#container {
-  display: grid;
-  grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
-  grid-gap: 5px;
-  box-sizing: border-box;
-  height: 200px;
-  width: 100%;
-  background-color: #8cffa0;
-  padding: 10px;
-}
-
-#container > div {
-  background-color: #8ca0ff;
-  padding: 5px;
-}
-
- -

HTML

- -
<div id="container">
-  <div>Item as wide as the content.</div>
-  <div>
-    Item with more text in it. Because the contents of it are
-    wider than the maximum width, it is clamped at 300 pixels.
-  </div>
-  <div>Flexible item</div>
-</div>
- -

結果

- -

{{EmbedLiveSample("Example", "100%", 200)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Sizing", "#valdef-width-fit-content-length-percentage", "fit-content()")}}{{Spec2("CSS3 Sizing")}}{{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}}, {{cssxref("max-height")}} のレイアウトボックスの寸法としての関数を定義。
{{SpecName("CSS Grid", "#valdef-grid-template-columns-fit-content", "fit-content()")}}{{Spec2("CSS Grid")}}トラックの寸法として使用される際の関数を定義。
- -

ブラウザーの互換性

- -

{{Compat("css.properties.grid-template-columns.fit-content")}}

diff --git a/files/ja/web/css/fit-content/index.md b/files/ja/web/css/fit-content/index.md new file mode 100644 index 0000000000..7660b4d8c2 --- /dev/null +++ b/files/ja/web/css/fit-content/index.md @@ -0,0 +1,117 @@ +--- +title: fit-content() +slug: Web/CSS/fit-content +tags: + - CSS + - CSS グリッド + - CSS 関数 + - Experimental + - Reference + - Web + - ウェブ + - レイアウト +translation_of: Web/CSS/fit-content +--- +
{{CSSRef}}
+ +

fit-content() はCSS の関数で、指定された寸法を min(最大寸法, max(最小寸法, 引数)) の式に従って有効な寸法に制約します。

+ +
{{EmbedInteractiveExample("pages/css/function-fit-content.html")}}
+ + + +

この関数は CSS グリッドのプロパティにおいて、トラックの寸法を max-content で定義された最大寸法と auto で定義された最小寸法との間で、 auto と似た方法 (すなわち minmax(auto, max-content)) で計算しますが、 auto の最小値よりも大きい場合は 引数 がトラックの寸法になるという点が異なります。

+ +

これは {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}}, {{cssxref("max-height")}} にレイアウトボックスの寸法としても使用され、最大寸法は内容の最大寸法、最小寸法は内容の最小寸法になります。

+ +

構文

+ +

引数として <length> または <percentage> を受け付ける関数です。

+ +
/* <length> 値 */
+fit-content(200px)
+fit-content(5cm)
+fit-content(30vw)
+fit-content(100ch)
+
+/* <percentage> 値 */
+fit-content(40%)
+
+ +

値

+ +
+
{{cssxref("<length>")}}
+
絶対的な長さ。
+
{{cssxref("<percentage>")}}
+
指定された軸で有効な空間に対する相対的なパーセント値です。
+
グリッドプロパティでは、行トラックにおける列内のグリッドコンテナーのインライン方向の寸法およびグリッドコンテナーのブロック方向の寸法の相対値です。それ以外では、書字方向に応じてレイアウトボックスの有効なインライン方向の寸法またはブロック方向の寸法に対する相対値になります。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

CSS

+ +
#container {
+  display: grid;
+  grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+
+ +

HTML

+ +
<div id="container">
+  <div>Item as wide as the content.</div>
+  <div>
+    Item with more text in it. Because the contents of it are
+    wider than the maximum width, it is clamped at 300 pixels.
+  </div>
+  <div>Flexible item</div>
+</div>
+ +

結果

+ +

{{EmbedLiveSample("Example", "100%", 200)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Sizing", "#valdef-width-fit-content-length-percentage", "fit-content()")}}{{Spec2("CSS3 Sizing")}}{{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}}, {{cssxref("max-height")}} のレイアウトボックスの寸法としての関数を定義。
{{SpecName("CSS Grid", "#valdef-grid-template-columns-fit-content", "fit-content()")}}{{Spec2("CSS Grid")}}トラックの寸法として使用される際の関数を定義。
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.grid-template-columns.fit-content")}}

diff --git a/files/ja/web/css/height/index.html b/files/ja/web/css/height/index.html deleted file mode 100644 index 4728fdfa86..0000000000 --- a/files/ja/web/css/height/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: height -slug: Web/CSS/height -tags: - - CSS - - CSS Property - - CSS プロパティ - - Layout - - Reference - - Vertical - - dimensions - - height - - 'recipe:css-property' - - size - - レイアウト -translation_of: Web/CSS/height ---- -
{{CSSRef}}
- -

height は CSS のプロパティで、要素の高さを指定します。既定では、このプロパティはコンテンツ領域の高さを定義します。しかし、 {{cssxref("box-sizing")}} が border-box に設定されていた場合は、 境界領域の高さを定義します。

- -
{{EmbedInteractiveExample("pages/css/height.html")}}
- - - -

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

- -

構文

- -
/* キーワード値 */
-height: auto;
-
-/* <length> 値 */
-height: 120px;
-height: 10em;
-
-/* <percentage> 値 */
-height: 75%;
-
-/* グローバル値 */
-height: inherit;
-height: initial;
-height: unset;
-
- -

値

- -
-
{{cssxref("<length>")}}
-
絶対値で高さを定義します。
-
{{cssxref("<percentage>")}}
-
包含ブロックの高さのパーセントで高さを定義します。
-
auto
-
指定された要素の高さをブラウザーが計算して決めます。
-
max-content
-
本来の望ましい高さです。
-
min-content
-
本来の最小の高さです。
-
fit-content({{cssxref("<length-percentage>")}})
-
利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち min(max-content, max(min-content, )) です。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<div id="taller">50ピクセルの高さです。</div>
-<div id="shorter">25ピクセルの高さです。</div>
-<div id="parent">
-  <div id="child">
-    親の半分の高さです。
-  </div>
-</div>
-
- -

CSS

- -
div {
-  width: 250px;
-  margin-bottom: 5px;
-  border: 2px solid blue;
-}
-
-#taller {
-  height: 50px;
-}
-
-#shorter {
-  height: 25px;
-}
-
-#parent {
-  height: 100px;
-}
-
-#child {
-  height: 50%;
-  width: 75%;
-}
-
- -

結果

- -

{{EmbedLiveSample('Example', 'auto', 240)}}

- -

アクセシビリティの考慮事項

- -

テキストを大きくするためにページを拡大したとき、他のコンテンツを切り捨てたり邪魔したりしないように要素の height を設定するよう確認してください。

- - - -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Sizing', '#width-height-keywords', 'height')}}{{Spec2('CSS4 Sizing')}}
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'height')}}{{Spec2('CSS3 Sizing')}}キーワード max-content, min-content, available, fit-content の追加。
{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}{{Spec2('CSS2.1')}}{{cssxref("<length>")}} 値のサポートを追加。どの要素に用いるかを明記。
{{SpecName('CSS1', '#height', 'height')}}{{Spec2('CSS1')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -

{{Compat("css.properties.height")}}

- -

関連情報

- - diff --git a/files/ja/web/css/height/index.md b/files/ja/web/css/height/index.md new file mode 100644 index 0000000000..4728fdfa86 --- /dev/null +++ b/files/ja/web/css/height/index.md @@ -0,0 +1,165 @@ +--- +title: height +slug: Web/CSS/height +tags: + - CSS + - CSS Property + - CSS プロパティ + - Layout + - Reference + - Vertical + - dimensions + - height + - 'recipe:css-property' + - size + - レイアウト +translation_of: Web/CSS/height +--- +
{{CSSRef}}
+ +

height は CSS のプロパティで、要素の高さを指定します。既定では、このプロパティはコンテンツ領域の高さを定義します。しかし、 {{cssxref("box-sizing")}} が border-box に設定されていた場合は、 境界領域の高さを定義します。

+ +
{{EmbedInteractiveExample("pages/css/height.html")}}
+ + + +

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

+ +

構文

+ +
/* キーワード値 */
+height: auto;
+
+/* <length> 値 */
+height: 120px;
+height: 10em;
+
+/* <percentage> 値 */
+height: 75%;
+
+/* グローバル値 */
+height: inherit;
+height: initial;
+height: unset;
+
+ +

値

+ +
+
{{cssxref("<length>")}}
+
絶対値で高さを定義します。
+
{{cssxref("<percentage>")}}
+
包含ブロックの高さのパーセントで高さを定義します。
+
auto
+
指定された要素の高さをブラウザーが計算して決めます。
+
max-content
+
本来の望ましい高さです。
+
min-content
+
本来の最小の高さです。
+
fit-content({{cssxref("<length-percentage>")}})
+
利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち min(max-content, max(min-content, )) です。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<div id="taller">50ピクセルの高さです。</div>
+<div id="shorter">25ピクセルの高さです。</div>
+<div id="parent">
+  <div id="child">
+    親の半分の高さです。
+  </div>
+</div>
+
+ +

CSS

+ +
div {
+  width: 250px;
+  margin-bottom: 5px;
+  border: 2px solid blue;
+}
+
+#taller {
+  height: 50px;
+}
+
+#shorter {
+  height: 25px;
+}
+
+#parent {
+  height: 100px;
+}
+
+#child {
+  height: 50%;
+  width: 75%;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Example', 'auto', 240)}}

+ +

アクセシビリティの考慮事項

+ +

テキストを大きくするためにページを拡大したとき、他のコンテンツを切り捨てたり邪魔したりしないように要素の height を設定するよう確認してください。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Sizing', '#width-height-keywords', 'height')}}{{Spec2('CSS4 Sizing')}}
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'height')}}{{Spec2('CSS3 Sizing')}}キーワード max-content, min-content, available, fit-content の追加。
{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}{{Spec2('CSS2.1')}}{{cssxref("<length>")}} 値のサポートを追加。どの要素に用いるかを明記。
{{SpecName('CSS1', '#height', 'height')}}{{Spec2('CSS1')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.height")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/max-height/index.html b/files/ja/web/css/max-height/index.html deleted file mode 100644 index fb379ee784..0000000000 --- a/files/ja/web/css/max-height/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: max-height -slug: Web/CSS/max-height -tags: - - CSS - - CSS Property - - Layout - - Maximum - - Reference - - dimensions - - height - - limit - - max-height - - 'recipe:css-property' - - size -translation_of: Web/CSS/max-height ---- -
{{CSSRef}}
- -

max-height は CSS のプロパティで、要素の最大高を設定します。これは {{Cssxref("height")}} プロパティの使用値が、 max-height に指定した値を上回ることを防ぎます。

- -
{{EmbedInteractiveExample("pages/css/max-height.html")}}
- - - -

max-height は {{cssxref("height")}} を上書きしますが、 {{cssxref("min-height")}} は max-height を上書きします。

- -

構文

- -
/* <length> 値 */
-max-height: 3.5em;
-
-/* <percentage> 値 */
-max-height: 75%;
-
-/* キーワード値 */
-max-height: none;
-max-height: max-content;
-max-height: min-content;
-max-height: fit-content(20em);
-
-/* グローバル値 */
-max-height: inherit;
-max-height: initial;
-max-height: unset;
-
- -

値

- -
-
{{cssxref("<length>")}}
-
max-height を絶対的な値で定義します。
-
{{cssxref("<percentage>")}}
-
max-height を包含ブロックの高さに対するパーセント値で定義します。
-
none
-
ボックスの寸法を制限しません。
-
max-content
-
内容物が推奨する max-height です。
-
min-content
-
内容物の最小の max-height です。
-
fit-content({{cssxref("<length-percentage>")}})
-
利用可能な空白を指定された引数で置き換えた fit-content 式を使用します。すなわち、 min(max-content, max(min-content, 引数)) です。
-
- -

アクセシビリティの考慮

- -

テキストを大きくするためにページを拡大したときに、 max-height を設定した要素が切り取られたり、他のコンテンツを覆い隠したりしないことを確認してください。

- - - -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

パーセント値とキーワード値を用いた max-height の設定

- -
table { max-height: 75%; }
-
-form { max-height: none; }
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Sizing', '#width-height-keywords', 'max-height')}}{{Spec2('CSS4 Sizing')}}
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'max-height')}}{{Spec2('CSS3 Sizing')}}キーワード max-content, min-content, fit-content を追加。
{{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'max-height')}}{{ Spec2('CSS2.1') }}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.max-height")}}

- -

関連情報

- - diff --git a/files/ja/web/css/max-height/index.md b/files/ja/web/css/max-height/index.md new file mode 100644 index 0000000000..fb379ee784 --- /dev/null +++ b/files/ja/web/css/max-height/index.md @@ -0,0 +1,130 @@ +--- +title: max-height +slug: Web/CSS/max-height +tags: + - CSS + - CSS Property + - Layout + - Maximum + - Reference + - dimensions + - height + - limit + - max-height + - 'recipe:css-property' + - size +translation_of: Web/CSS/max-height +--- +
{{CSSRef}}
+ +

max-height は CSS のプロパティで、要素の最大高を設定します。これは {{Cssxref("height")}} プロパティの使用値が、 max-height に指定した値を上回ることを防ぎます。

+ +
{{EmbedInteractiveExample("pages/css/max-height.html")}}
+ + + +

max-height は {{cssxref("height")}} を上書きしますが、 {{cssxref("min-height")}} は max-height を上書きします。

+ +

構文

+ +
/* <length> 値 */
+max-height: 3.5em;
+
+/* <percentage> 値 */
+max-height: 75%;
+
+/* キーワード値 */
+max-height: none;
+max-height: max-content;
+max-height: min-content;
+max-height: fit-content(20em);
+
+/* グローバル値 */
+max-height: inherit;
+max-height: initial;
+max-height: unset;
+
+ +

値

+ +
+
{{cssxref("<length>")}}
+
max-height を絶対的な値で定義します。
+
{{cssxref("<percentage>")}}
+
max-height を包含ブロックの高さに対するパーセント値で定義します。
+
none
+
ボックスの寸法を制限しません。
+
max-content
+
内容物が推奨する max-height です。
+
min-content
+
内容物の最小の max-height です。
+
fit-content({{cssxref("<length-percentage>")}})
+
利用可能な空白を指定された引数で置き換えた fit-content 式を使用します。すなわち、 min(max-content, max(min-content, 引数)) です。
+
+ +

アクセシビリティの考慮

+ +

テキストを大きくするためにページを拡大したときに、 max-height を設定した要素が切り取られたり、他のコンテンツを覆い隠したりしないことを確認してください。

+ + + +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

パーセント値とキーワード値を用いた max-height の設定

+ +
table { max-height: 75%; }
+
+form { max-height: none; }
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Sizing', '#width-height-keywords', 'max-height')}}{{Spec2('CSS4 Sizing')}}
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'max-height')}}{{Spec2('CSS3 Sizing')}}キーワード max-content, min-content, fit-content を追加。
{{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'max-height')}}{{ Spec2('CSS2.1') }}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.max-height")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/max-width/index.html b/files/ja/web/css/max-width/index.html deleted file mode 100644 index 89feb27342..0000000000 --- a/files/ja/web/css/max-width/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: max-width -slug: Web/CSS/max-width -tags: - - CSS - - CSS Property - - CSS プロパティ - - Reference -translation_of: Web/CSS/max-width ---- -
{{CSSRef}}
- -

max-width は CSS のプロパティで、要素の最大幅を設定します。これは {{Cssxref("width")}} プロパティの使用値が、 max-width で指定した値を上回ることを防ぎます。

- -
{{EmbedInteractiveExample("pages/css/max-width.html")}}
- - - -

max-width は {{cssxref("width")}} を上書きしますが、 {{cssxref("min-width")}} は max-width を上書きします。

- -

構文

- -
/* <length> 値 */
-max-width: 3.5em;
-
-/* <percentage> 値 */
-max-width: 75%;
-
-/* キーワード値 */
-max-width: none;
-max-width: max-content;
-max-width: min-content;
-max-width: fit-content(20em);
-
-/* グローバル値 */
-max-width: inherit;
-max-width: initial;
-max-width: unset;
-
- -

値

- -
-
{{cssxref("<length>")}}
-
max-width を絶対的な値で定義します。
-
{{cssxref("<percentage>")}}
-
max-width を包含ブロックの幅に対するパーセント値で定義します。
-
auto
-
ブラウザーは指定された要素の max-width を計算して選択します。
-
none
-
ボックスの寸法を制限しません。
-
max-content
-
内容物が推奨する max-width です。
-
min-content
-
内容物の最小の max-width です。
-
fit-content({{cssxref("<length-percentage>")}})
-
利用可能な空白を指定された引数で置き換えた fit-content 式を使用します。すなわち、 min(max-content, max(min-content, 引数)) です。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

この例では、 "child" の幅が150ピクセルか "parent" の幅のどちらか小さい方になります。

- -
-
<div id="parent">
-  <div id="child">
-    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
-  </div>
-</div>
-
- -
#parent {
-  background: lightblue;
-  width: 300px;
-}
-
-#child {
-  background: gold;
-  width: 100%;
-  max-width: 150px;
-}
-
-
- -

{{EmbedLiveSample("basic-max-width-demo", 350, 100)}}

- -

アクセシビリティの考慮事項

- -

ページを拡大縮小して文字サイズを拡大した際に、 max-width を設定した要素が他のコンテンツを切り捨てたり妨げたりしないことを確認してください。

- - - -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Sizing', '#width-height-keywords', 'max-width')}}{{Spec2('CSS4 Sizing')}}
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'max-width')}}{{Spec2('CSS3 Sizing')}}キーワード max-content, min-content, fit-content, fill-available を追加。
{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width') }}{{ Spec2('CSS2.1') }}初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/max-width/index.md b/files/ja/web/css/max-width/index.md new file mode 100644 index 0000000000..89feb27342 --- /dev/null +++ b/files/ja/web/css/max-width/index.md @@ -0,0 +1,140 @@ +--- +title: max-width +slug: Web/CSS/max-width +tags: + - CSS + - CSS Property + - CSS プロパティ + - Reference +translation_of: Web/CSS/max-width +--- +
{{CSSRef}}
+ +

max-width は CSS のプロパティで、要素の最大幅を設定します。これは {{Cssxref("width")}} プロパティの使用値が、 max-width で指定した値を上回ることを防ぎます。

+ +
{{EmbedInteractiveExample("pages/css/max-width.html")}}
+ + + +

max-width は {{cssxref("width")}} を上書きしますが、 {{cssxref("min-width")}} は max-width を上書きします。

+ +

構文

+ +
/* <length> 値 */
+max-width: 3.5em;
+
+/* <percentage> 値 */
+max-width: 75%;
+
+/* キーワード値 */
+max-width: none;
+max-width: max-content;
+max-width: min-content;
+max-width: fit-content(20em);
+
+/* グローバル値 */
+max-width: inherit;
+max-width: initial;
+max-width: unset;
+
+ +

値

+ +
+
{{cssxref("<length>")}}
+
max-width を絶対的な値で定義します。
+
{{cssxref("<percentage>")}}
+
max-width を包含ブロックの幅に対するパーセント値で定義します。
+
auto
+
ブラウザーは指定された要素の max-width を計算して選択します。
+
none
+
ボックスの寸法を制限しません。
+
max-content
+
内容物が推奨する max-width です。
+
min-content
+
内容物の最小の max-width です。
+
fit-content({{cssxref("<length-percentage>")}})
+
利用可能な空白を指定された引数で置き換えた fit-content 式を使用します。すなわち、 min(max-content, max(min-content, 引数)) です。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

この例では、 "child" の幅が150ピクセルか "parent" の幅のどちらか小さい方になります。

+ +
+
<div id="parent">
+  <div id="child">
+    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
+  </div>
+</div>
+
+ +
#parent {
+  background: lightblue;
+  width: 300px;
+}
+
+#child {
+  background: gold;
+  width: 100%;
+  max-width: 150px;
+}
+
+
+ +

{{EmbedLiveSample("basic-max-width-demo", 350, 100)}}

+ +

アクセシビリティの考慮事項

+ +

ページを拡大縮小して文字サイズを拡大した際に、 max-width を設定した要素が他のコンテンツを切り捨てたり妨げたりしないことを確認してください。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Sizing', '#width-height-keywords', 'max-width')}}{{Spec2('CSS4 Sizing')}}
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'max-width')}}{{Spec2('CSS3 Sizing')}}キーワード max-content, min-content, fit-content, fill-available を追加。
{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width') }}{{ Spec2('CSS2.1') }}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/min-height/index.html b/files/ja/web/css/min-height/index.html deleted file mode 100644 index 3d49776065..0000000000 --- a/files/ja/web/css/min-height/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: min-height -slug: Web/CSS/min-height -tags: - - CSS - - CSS Property - - Layout - - Minimum - - Reference - - dimensions - - height - - min-height - - 'recipe:css-property' - - size -translation_of: Web/CSS/min-height ---- -
{{CSSRef}}
- -

min-height は CSS のプロパティで、要素の最小幅を設定します。これは {{cssxref("height")}} プロパティの使用値が、min-height で指定した値を下回ることを防ぎます。

- -
{{EmbedInteractiveExample("pages/css/min-height.html")}}
- - - -

min-height の値が {{cssxref("max-height")}} および {{cssxref("height")}} の値より大きい場合は、min-height の値が要素の幅になります。

- -

構文

- -
/* <length> 値 */
-min-height: 3.5em;
-
-/* <percentage> 値 */
-min-height: 10%;
-
-/* キーワード値 */
-min-height: max-content;
-min-height: min-content;
-min-height: fit-content(20em);
-
-/* グローバル値 */
-min-height: inherit;
-min-height: initial;
-min-height: unset;
-
- -

値

- -
-
{{cssxref("<length>")}}
-
min-height を絶対的な値で定義します。
-
{{cssxref("<percentage>")}}
-
min-height を包含ブロックの高さに対するパーセント値で定義します。
-
auto
-
ブラウザーが指定された要素の min-height を計算して選択します。
-
max-content
-
内容物が推奨する min-height です。
-
min-content
-
内容物の最小の min-height です。
-
fit-content({{cssxref("<length-percentage>")}})
-
利用可能な空白を指定された引数で置き換えた fit-content 式を使用します。すなわち、 min(max-content, max(min-content, 引数)) です。
-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

min-height の設定

- -
table { min-height: 75%; }
-
-form { min-height: 0; }
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Sizing', '#width-height-keywords', 'min-height')}}{{Spec2('CSS4 Sizing')}}
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'min-height')}}{{Spec2('CSS3 Sizing')}}キーワード max-content, min-content, fit-content を追加。
{{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'min-height')}}{{Spec2('CSS2.1')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.min-height")}}

- -

関連情報

- - diff --git a/files/ja/web/css/min-height/index.md b/files/ja/web/css/min-height/index.md new file mode 100644 index 0000000000..3d49776065 --- /dev/null +++ b/files/ja/web/css/min-height/index.md @@ -0,0 +1,118 @@ +--- +title: min-height +slug: Web/CSS/min-height +tags: + - CSS + - CSS Property + - Layout + - Minimum + - Reference + - dimensions + - height + - min-height + - 'recipe:css-property' + - size +translation_of: Web/CSS/min-height +--- +
{{CSSRef}}
+ +

min-height は CSS のプロパティで、要素の最小幅を設定します。これは {{cssxref("height")}} プロパティの使用値が、min-height で指定した値を下回ることを防ぎます。

+ +
{{EmbedInteractiveExample("pages/css/min-height.html")}}
+ + + +

min-height の値が {{cssxref("max-height")}} および {{cssxref("height")}} の値より大きい場合は、min-height の値が要素の幅になります。

+ +

構文

+ +
/* <length> 値 */
+min-height: 3.5em;
+
+/* <percentage> 値 */
+min-height: 10%;
+
+/* キーワード値 */
+min-height: max-content;
+min-height: min-content;
+min-height: fit-content(20em);
+
+/* グローバル値 */
+min-height: inherit;
+min-height: initial;
+min-height: unset;
+
+ +

値

+ +
+
{{cssxref("<length>")}}
+
min-height を絶対的な値で定義します。
+
{{cssxref("<percentage>")}}
+
min-height を包含ブロックの高さに対するパーセント値で定義します。
+
auto
+
ブラウザーが指定された要素の min-height を計算して選択します。
+
max-content
+
内容物が推奨する min-height です。
+
min-content
+
内容物の最小の min-height です。
+
fit-content({{cssxref("<length-percentage>")}})
+
利用可能な空白を指定された引数で置き換えた fit-content 式を使用します。すなわち、 min(max-content, max(min-content, 引数)) です。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

min-height の設定

+ +
table { min-height: 75%; }
+
+form { min-height: 0; }
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Sizing', '#width-height-keywords', 'min-height')}}{{Spec2('CSS4 Sizing')}}
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'min-height')}}{{Spec2('CSS3 Sizing')}}キーワード max-content, min-content, fit-content を追加。
{{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'min-height')}}{{Spec2('CSS2.1')}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.min-height")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/min-width/index.html b/files/ja/web/css/min-width/index.html deleted file mode 100644 index 9660976dc7..0000000000 --- a/files/ja/web/css/min-width/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: min-width -slug: Web/CSS/min-width -tags: - - CSS - - CSS Property - - CSS プロパティ - - Reference -translation_of: Web/CSS/min-width ---- -
{{CSSRef}}
- -

min-width は CSS のプロパティで、要素の最小幅を設定します。これは {{Cssxref("width")}} プロパティの使用値が、min-width で指定した値を下回ることを防ぎます。

- -
{{EmbedInteractiveExample("pages/css/min-width.html")}}
- - - -

min-width の値が {{Cssxref("max-width")}} および {{Cssxref("width")}} の値より大きい場合は、min-width の値が要素の幅になります。

- -

構文

- -
/* <length> 値 */
-min-width: 3.5em;
-
-/* <percentage> 値 */
-min-width: 10%;
-
-/* キーワード値 */
-min-width: max-content;
-min-width: min-content;
-min-width: fit-content(20em);
-
-/* グローバル値 */
-min-width: inherit;
-min-width: initial;
-min-width: unset;
-
- -

値

- -
-
{{cssxref("<length>")}}
-
min-width を絶対的な値で定義します。
-
{{cssxref("<percentage>")}}
-
min-width を包含ブロックの幅に対するパーセント値で定義します。
-
auto
-
ブラウザーが指定された要素の min-width を計算して選択します。
-
none
-
ボックスの寸法を制限しません。
-
max-content
-
内容物が推奨する min-width です。
-
min-content
-
内容物の最小の min-width です。
-
fit-content({{cssxref("<length-percentage>")}})
-
利用可能な空白を指定された引数で置き換えた fit-content 式を使用します。すなわち、 min(max-content, max(min-content, 引数)) です。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -
table { min-width: 75%; }
-
-form { min-width: 0; }
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Sizing', '#width-height-keywords', 'min-width')}}{{Spec2('CSS4 Sizing')}}
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'min-width')}}{{Spec2('CSS3 Sizing')}}キーワード max-content, min-content, fit-content を追加。
{{SpecName('CSS3 Flexbox', '#min-size-auto', 'min-width')}}{{Spec2('CSS3 Flexbox')}}キーワード auto を追加し、初期値として使用する
{{SpecName('CSS2.1', 'visudet.html#min-max-widths', 'min-width')}}{{Spec2('CSS2.1')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/min-width/index.md b/files/ja/web/css/min-width/index.md new file mode 100644 index 0000000000..9660976dc7 --- /dev/null +++ b/files/ja/web/css/min-width/index.md @@ -0,0 +1,115 @@ +--- +title: min-width +slug: Web/CSS/min-width +tags: + - CSS + - CSS Property + - CSS プロパティ + - Reference +translation_of: Web/CSS/min-width +--- +
{{CSSRef}}
+ +

min-width は CSS のプロパティで、要素の最小幅を設定します。これは {{Cssxref("width")}} プロパティの使用値が、min-width で指定した値を下回ることを防ぎます。

+ +
{{EmbedInteractiveExample("pages/css/min-width.html")}}
+ + + +

min-width の値が {{Cssxref("max-width")}} および {{Cssxref("width")}} の値より大きい場合は、min-width の値が要素の幅になります。

+ +

構文

+ +
/* <length> 値 */
+min-width: 3.5em;
+
+/* <percentage> 値 */
+min-width: 10%;
+
+/* キーワード値 */
+min-width: max-content;
+min-width: min-content;
+min-width: fit-content(20em);
+
+/* グローバル値 */
+min-width: inherit;
+min-width: initial;
+min-width: unset;
+
+ +

値

+ +
+
{{cssxref("<length>")}}
+
min-width を絶対的な値で定義します。
+
{{cssxref("<percentage>")}}
+
min-width を包含ブロックの幅に対するパーセント値で定義します。
+
auto
+
ブラウザーが指定された要素の min-width を計算して選択します。
+
none
+
ボックスの寸法を制限しません。
+
max-content
+
内容物が推奨する min-width です。
+
min-content
+
内容物の最小の min-width です。
+
fit-content({{cssxref("<length-percentage>")}})
+
利用可能な空白を指定された引数で置き換えた fit-content 式を使用します。すなわち、 min(max-content, max(min-content, 引数)) です。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +
table { min-width: 75%; }
+
+form { min-width: 0; }
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Sizing', '#width-height-keywords', 'min-width')}}{{Spec2('CSS4 Sizing')}}
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'min-width')}}{{Spec2('CSS3 Sizing')}}キーワード max-content, min-content, fit-content を追加。
{{SpecName('CSS3 Flexbox', '#min-size-auto', 'min-width')}}{{Spec2('CSS3 Flexbox')}}キーワード auto を追加し、初期値として使用する
{{SpecName('CSS2.1', 'visudet.html#min-max-widths', 'min-width')}}{{Spec2('CSS2.1')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/width/index.html b/files/ja/web/css/width/index.html deleted file mode 100644 index 322e08849b..0000000000 --- a/files/ja/web/css/width/index.html +++ /dev/null @@ -1,201 +0,0 @@ ---- -title: width -slug: Web/CSS/width -tags: - - CSS - - CSS Property - - Layout - - Reference - - dimensions - - recipe:css-property - - size - - width -browser-compat: css.properties.width -translation_of: Web/CSS/width ---- -

{{CSSRef}}

- -

width は CSS のプロパティで、要素の幅を設定します。既定では、このプロパティはコンテンツ領域の幅を設定しますが、 {{cssxref("box-sizing")}} を border-box に設定すると、境界領域の幅を設定します。

- -
{{EmbedInteractiveExample("pages/css/width.html")}}
- - - -

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

- -

構文

- -
/* <length> 値 */
-width: 300px;
-width: 25em;
-
-/* <percentage> 値 */
-width: 75%;
-
-/* キーワード値 */
-width: max-content;
-width: min-content;
-width: fit-content(20em);
-width: auto;
-
-/* グローバル値 */
-width: inherit;
-width: initial;
-width: revert;
-width: unset;
-
- -

値

- -
-
{{cssxref("<length>")}}
-
絶対的な値で幅を定義します。
-
{{cssxref("<percentage>")}}
-
親となる包含ブロックの幅に対するパーセント値で定義します。
-
auto
-
指定された要素の幅をブラウザーが計算して決めます。
-
max-content
-
望ましい固有の幅です。
-
min-content
-
最小の固有の幅です。
-
fit-content({{cssxref("<length-percentage>")}})
-
利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち min(max-content, max(min-content, <length-percentage>)) です。
-
- -

アクセシビリティの考慮

- -

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

- - - -

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

既定の幅

- -
p.goldie {
-  background: gold;
-}
- -
<p class="goldie">The Mozilla community produces a lot of great software.</p>
- -

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

- -

ピクセル数と em 単位

- -
.px_length {
-  width: 200px;
-  background-color: red;
-  color: white;
-  border: 1px solid black;
-}
-
-.em_length {
-  width: 20em;
-  background-color: white;
-  color: red;
-  border: 1px solid black;
-}
-
- -
<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 {
-  width: 20%;
-  background-color: silver;
-  border: 1px solid red;
-}
- -
<div class="percent">Width in percentage</div>
- -

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

- -

max-content

- -
p.maxgreen {
-  background: lightgreen;
-  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
-  width: -moz-max-content;    /* Firefox/Gecko */
-  width: -webkit-max-content; /* Chrome */
-  width: max-content;
-}
- -
<p class="maxgreen">The Mozilla community produces a lot of great software.</p>
- -

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

- -

min-content

- -
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>
- -

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

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Sizing', '#width-height-keywords', 'width')}}{{Spec2('CSS4 Sizing')}}
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}{{Spec2('CSS3 Sizing')}}キーワード max-content, min-content, fit-content を追加
{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}{{Spec2('CSS2.1')}}適用対象の要素を詳しく記載
{{SpecName('CSS1', '#width', 'width')}}{{Spec2('CSS1')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat}}

- -

関連情報

- - diff --git a/files/ja/web/css/width/index.md b/files/ja/web/css/width/index.md new file mode 100644 index 0000000000..322e08849b --- /dev/null +++ b/files/ja/web/css/width/index.md @@ -0,0 +1,201 @@ +--- +title: width +slug: Web/CSS/width +tags: + - CSS + - CSS Property + - Layout + - Reference + - dimensions + - recipe:css-property + - size + - width +browser-compat: css.properties.width +translation_of: Web/CSS/width +--- +

{{CSSRef}}

+ +

width は CSS のプロパティで、要素の幅を設定します。既定では、このプロパティはコンテンツ領域の幅を設定しますが、 {{cssxref("box-sizing")}} を border-box に設定すると、境界領域の幅を設定します。

+ +
{{EmbedInteractiveExample("pages/css/width.html")}}
+ + + +

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

+ +

構文

+ +
/* <length> 値 */
+width: 300px;
+width: 25em;
+
+/* <percentage> 値 */
+width: 75%;
+
+/* キーワード値 */
+width: max-content;
+width: min-content;
+width: fit-content(20em);
+width: auto;
+
+/* グローバル値 */
+width: inherit;
+width: initial;
+width: revert;
+width: unset;
+
+ +

値

+ +
+
{{cssxref("<length>")}}
+
絶対的な値で幅を定義します。
+
{{cssxref("<percentage>")}}
+
親となる包含ブロックの幅に対するパーセント値で定義します。
+
auto
+
指定された要素の幅をブラウザーが計算して決めます。
+
max-content
+
望ましい固有の幅です。
+
min-content
+
最小の固有の幅です。
+
fit-content({{cssxref("<length-percentage>")}})
+
利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち min(max-content, max(min-content, <length-percentage>)) です。
+
+ +

アクセシビリティの考慮

+ +

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

+ + + +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

既定の幅

+ +
p.goldie {
+  background: gold;
+}
+ +
<p class="goldie">The Mozilla community produces a lot of great software.</p>
+ +

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

+ +

ピクセル数と em 単位

+ +
.px_length {
+  width: 200px;
+  background-color: red;
+  color: white;
+  border: 1px solid black;
+}
+
+.em_length {
+  width: 20em;
+  background-color: white;
+  color: red;
+  border: 1px solid black;
+}
+
+ +
<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 {
+  width: 20%;
+  background-color: silver;
+  border: 1px solid red;
+}
+ +
<div class="percent">Width in percentage</div>
+ +

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

+ +

max-content

+ +
p.maxgreen {
+  background: lightgreen;
+  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
+  width: -moz-max-content;    /* Firefox/Gecko */
+  width: -webkit-max-content; /* Chrome */
+  width: max-content;
+}
+ +
<p class="maxgreen">The Mozilla community produces a lot of great software.</p>
+ +

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

+ +

min-content

+ +
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>
+ +

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

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Sizing', '#width-height-keywords', 'width')}}{{Spec2('CSS4 Sizing')}}
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}{{Spec2('CSS3 Sizing')}}キーワード max-content, min-content, fit-content を追加
{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}{{Spec2('CSS2.1')}}適用対象の要素を詳しく記載
{{SpecName('CSS1', '#width', 'width')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf