diff --git a/files/ja/web/css/height/index.md b/files/ja/web/css/height/index.md index 74b7e06a28de13..2b756aafda9b5d 100644 --- a/files/ja/web/css/height/index.md +++ b/files/ja/web/css/height/index.md @@ -1,22 +1,31 @@ --- title: height slug: Web/CSS/height +l10n: + sourceCommit: 9a3940b0231838338f65ae1c37d5b874439a3d43 --- {{CSSRef}} -**`height`** は CSS のプロパティで、要素の高さを指定します。既定では、このプロパティは[コンテンツ領域](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model#content-area)の高さを定義します。{{cssxref("box-sizing")}} が `border-box` に設定されていた場合は、 [境界領域](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model#border-area)の高さを定義します。 +**`height`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の高さを指定します。既定では、このプロパティは[コンテンツ領域](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model#コンテンツ領域)の高さを定義します。{{cssxref("box-sizing")}} が `border-box` に設定されていた場合は、 [境界領域](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model#境界領域)の高さを定義します。 {{EmbedInteractiveExample("pages/css/height.html")}} {{cssxref("min-height")}} および {{cssxref("max-height")}} プロパティは `height` を上書きします。 +> [!NOTE] +> 幾何プロパティとして、 `height` プロパティは、{{SVGElement("svg")}}、{{SVGElement("rect")}}、{{SVGElement("image")}}、{{SVGElement("foreignObject")}} の各 SVG 要素にも適用されます。 `auto` は `0` に、パーセント値は `` の場合は SVG ビューポートの高さに対する相対値に解決します。 CSS の `height` プロパティ値は、 SVG 要素に設定された {{SVGAttr("height")}} 属性値を上書きします。 + ## 構文 ```css /* 値 */ height: 120px; height: 10em; +height: 100vh; +height: anchor-size(height); +height: anchor-size(--myAnchor self-block, 250px); +height: clamp(200px, anchor-size(width)); /* 値 */ height: 75%; @@ -24,13 +33,17 @@ height: 75%; /* キーワード値 */ height: max-content; height: min-content; +height: fit-content; height: fit-content(20em); height: auto; +height: minmax(min-content, anchor-size(width)); +height: stretch; /* グローバル値 */ height: inherit; height: initial; height: revert; +height: revert-layer; height: unset; ``` @@ -39,17 +52,25 @@ height: unset; - {{cssxref("<length>")}} - : 絶対値で高さを定義します。 - {{cssxref("<percentage>")}} - - : 包含ブロックの高さのパーセントで高さを定義します。 + - : [包含ブロック](/ja/docs/Web/CSS/Containing_block)の高さのパーセント値で高さを定義します。 - `auto` - : 指定された要素の高さをブラウザーが計算して決めます。 - `max-content` - : 本来の望ましい高さです。 - `min-content` - : 本来の最小の高さです。 +- `fit-content` + - : 利用できる空間を使用しますが、 [max-content](/ja/docs/Web/CSS/max-content) を超えないようにします。すなわち、 `min(max-content, max(min-content, stretch))` です。 - `fit-content({{cssxref("<length-percentage>")}})` - : 利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち `min(max-content, max(min-content, ))` です。 +- `stretch` + + - : 要素の[マージンボックス](/ja/docs/Learn/CSS/Building_blocks/The_box_model#ボックスの構成)の高さを、[包含ブロック](/ja/docs/Web/CSS/Containing_block#包含ブロックの識別)の高さに設定します。マージンボックスが包含ブロック内で利用できる空間をすべて満たそうとするため、 100% と似たような動作をしますが、結果として得られるサイズは [box-sizing](/ja/docs/Web/CSS/box-sizing) で決定されるボックスではなく、マージンボックスに適用されます。 -## アクセシビリティの考慮 + > [!NOTE] + > ブラウザーが `stretch` 値のために使用する別名と実装状況については、[ブラウザーの互換性](#ブラウザーの互換性)の節を参照してください。 + +## アクセシビリティ 要素の `height` は、テキストを大きくするためにページを拡大したとき、切り捨てたられたり他のコンテンツを邪魔したりしないように設定するよう確認してください。 @@ -66,21 +87,21 @@ height: unset; ## 例 -

ピクセル数とパーセント値を使用して高さを設定

+### ピクセル数とパーセント値を使用して高さを設定 #### HTML -```html -
I'm 50 pixels tall.
-
I'm 25 pixels tall.
+```html-nolint live-sample___setting_height_using_pixels_and_percentages +
これは 50 ピクセルの高さです。
+
これは 25 ピクセルの高さです。
-
I'm half the height of my parent.
+
これは親の半分の高さです。
``` #### CSS -```css +```css live-sample___setting_height_using_pixels_and_percentages div { width: 250px; margin-bottom: 5px; @@ -119,8 +140,12 @@ div { ## 関連情報 -- [ボックスモデル](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) - {{cssxref("width")}} - {{cssxref("box-sizing")}} - {{cssxref("min-height")}}, {{cssxref("max-height")}} -- 対応する論理的プロパティ: {{cssxref("block-size")}}, {{cssxref("inline-size")}} +- {{cssxref("block-size")}}, {{cssxref("inline-size")}} +- {{cssxref("anchor-size()")}} +- {{cssxref("clamp", "clamp()")}} +- {{cssxref("clamp", "minmax()")}} +- [CSS 基本ボックスモデル入門](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) +- [CSS ボックスモデル](/ja/docs/Web/CSS/CSS_box_model)モジュール diff --git a/files/ja/web/css/max-height/index.md b/files/ja/web/css/max-height/index.md index eb30ec191cdc5c..42164d40e1f487 100644 --- a/files/ja/web/css/max-height/index.md +++ b/files/ja/web/css/max-height/index.md @@ -1,6 +1,8 @@ --- title: max-height slug: Web/CSS/max-height +l10n: + sourceCommit: 9a3940b0231838338f65ae1c37d5b874439a3d43 --- {{CSSRef}} @@ -16,6 +18,8 @@ slug: Web/CSS/max-height ```css /* 値 */ max-height: 3.5em; +max-height: anchor-size(height); +max-height: calc(anchor-size(--myAnchor self-block, 250px) + 2em); /* 値 */ max-height: 75%; @@ -24,12 +28,15 @@ max-height: 75%; max-height: none; max-height: max-content; max-height: min-content; +max-height: fit-content; max-height: fit-content(20em); +max-height: stretch; /* グローバル値 */ max-height: inherit; max-height: initial; max-height: revert; +max-height: revert-layer; max-height: unset; ``` @@ -45,10 +52,18 @@ max-height: unset; - : 内容物が推奨する `max-height` です。 - `min-content` - : 内容物の最小の `max-height` です。 +- `fit-content` + - : 利用できる空間を使用しますが、 [max-content](/ja/docs/Web/CSS/max-content) を超えないようにします。すなわち、 `min(max-content, max(min-content, stretch))` です。 - `fit-content({{cssxref("<length-percentage>")}})` - : 利用可能な空白を指定された引数で置き換えた `fit-content` 式を使用します。すなわち、 `min(max-content, max(min-content, 引数))` です。 +- `stretch` -## アクセシビリティの考慮 + - : 要素の[マージンボックス](/ja/docs/Learn/CSS/Building_blocks/The_box_model#ボックスの構成)の最大の高さを、[包含ブロック](/ja/docs/Web/CSS/Containing_block#包含ブロックの識別)の高さに制限します。マージンボックスが包含ブロック内で利用できる空間をすべて満たそうとするため、 `100%` と似たような動作をしますが、結果として得られるサイズは [box-sizing](/ja/docs/Web/CSS/box-sizing) で決定されるボックスではなく、マージンボックスに適用されます。 + + > [!NOTE] + > ブラウザーが `stretch` 値のために使用する別名と実装状況については、[ブラウザーの互換性](#ブラウザーの互換性)の節を参照してください。 + +## アクセシビリティ テキストを大きくするためにページを拡大したときに、 `max-height` を設定した要素が切り取られたり、他のコンテンツを覆い隠したりしないことを確認してください。 @@ -87,6 +102,10 @@ form { ## 関連情報 -- [ボックスモデル](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)、 {{cssxref("box-sizing")}} -- {{Cssxref("height")}}, {{Cssxref("min-height")}} -- 対応する論理的プロパティ: {{cssxref("max-inline-size")}}, {{cssxref("max-block-size")}} +- {{Cssxref("min-height")}} +- {{Cssxref("height")}} +- {{cssxref("max-inline-size")}} +- {{cssxref("max-block-size")}} +- {{cssxref("box-sizing")}} +- [CSS 基本ボックスモデル入門](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) +- [CSS ボックスモデル](/ja/docs/Web/CSS/CSS_box_model)モジュール diff --git a/files/ja/web/css/max-width/index.md b/files/ja/web/css/max-width/index.md index 5819a8f0719b01..388edca8e479c0 100644 --- a/files/ja/web/css/max-width/index.md +++ b/files/ja/web/css/max-width/index.md @@ -1,6 +1,8 @@ --- title: max-width slug: Web/CSS/max-width +l10n: + sourceCommit: 9a3940b0231838338f65ae1c37d5b874439a3d43 --- {{CSSRef}} @@ -16,6 +18,8 @@ slug: Web/CSS/max-width ```css /* 値 */ max-width: 3.5em; +max-width: anchor-size(--myAnchor inline, 245px); +max-width: calc(anchor-size(width) + 4em); /* 値 */ max-width: 75%; @@ -24,12 +28,15 @@ max-width: 75%; max-width: none; max-width: max-content; max-width: min-content; +max-width: fit-content; max-width: fit-content(20em); +max-width: stretch; /* グローバル値 */ max-width: inherit; max-width: initial; max-width: revert; +max-width: revert-layer; max-width: unset; ``` @@ -45,10 +52,18 @@ max-width: unset; - : 内容物が推奨する `max-width` です。 - `min-content` - : 内容物の最小の `max-width` です。 +- `fit-content` + - : 利用できる空間を使用しますが、 [max-content](/ja/docs/Web/CSS/max-content) を超えないようにします。すなわち、 `min(max-content, max(min-content, stretch))` です。 - `fit-content({{cssxref("<length-percentage>")}})` - : 利用可能な空白を指定された引数で置き換えた `fit-content` 式を使用します。すなわち、 `min(max-content, max(min-content, 引数))` です。 +- `stretch` -## アクセシビリティの考慮 + - : 要素の[マージンボックス](/ja/docs/Learn/CSS/Building_blocks/The_box_model#ボックスの構成)の最大の幅を、[包含ブロック](/ja/docs/Web/CSS/Containing_block#包含ブロックの識別)の幅に設定します。マージンボックスが包含ブロック内で利用できる空間をすべて満たそうとするため、 `100%` と似たような動作をしますが、結果として得られるサイズは [box-sizing](/ja/docs/Web/CSS/box-sizing) で決定されるボックスではなく、マージンボックスに適用されます。 + + > [!NOTE] + > ブラウザーが `stretch` 値のために使用する別名と実装状況については、[ブラウザーの互換性](#ブラウザーの互換性)の節を参照してください。 + +## アクセシビリティ ページを拡大縮小して文字サイズを拡大した際に、 `max-width` を設定した要素が他のコンテンツを切り捨てたり妨げたりしないことを確認してください。 @@ -108,6 +123,10 @@ max-width: unset; ## 関連情報 -- [ボックスモデル](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model), {{cssxref("box-sizing")}} -- {{cssxref("width")}}, {{cssxref("min-width")}} -- 対応する論理的プロパティ: {{cssxref("max-inline-size")}}, {{cssxref("max-block-size")}} +- {{Cssxref("min-width")}} +- {{Cssxref("width")}} +- {{cssxref("max-inline-size")}} +- {{cssxref("max-block-size")}} +- {{cssxref("box-sizing")}} +- [CSS 基本ボックスモデル入門](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) +- [CSS ボックスモデル](/ja/docs/Web/CSS/CSS_box_model)モジュール diff --git a/files/ja/web/css/min-height/index.md b/files/ja/web/css/min-height/index.md index 6b126a3d207d75..e8fcbe25d1c657 100644 --- a/files/ja/web/css/min-height/index.md +++ b/files/ja/web/css/min-height/index.md @@ -1,6 +1,8 @@ --- title: min-height slug: Web/CSS/min-height +l10n: + sourceCommit: 9a3940b0231838338f65ae1c37d5b874439a3d43 --- {{CSSRef}} @@ -16,6 +18,8 @@ slug: Web/CSS/min-height ```css /* 値 */ min-height: 3.5em; +min-height: anchor-size(height); +min-height: anchor-size(--myAnchor block, 200px); /* 値 */ min-height: 10%; @@ -23,12 +27,15 @@ min-height: 10%; /* キーワード値 */ min-height: max-content; min-height: min-content; +min-height: fit-content; min-height: fit-content(20em); +min-height: stretch; /* グローバル値 */ min-height: inherit; min-height: initial; min-height: revert; +min-height: revert-layer; min-height: unset; ``` @@ -44,8 +51,16 @@ min-height: unset; - : 内容物が推奨する `min-height` です。 - `min-content` - : 内容物の最小の `min-height` です。 +- `fit-content` + - : 利用できる空間を使用しますが、 [max-content](/ja/docs/Web/CSS/max-content) を超えないようにします。すなわち、 `min(max-content, max(min-content, stretch))` です。 - `fit-content({{cssxref("<length-percentage>")}})` - : 利用可能な空白を指定された引数で置き換えた `fit-content` 式を使用します。すなわち、 `min(max-content, max(min-content, 引数))` です。 +- `stretch` + + - : 要素の[マージンボックス](/ja/docs/Learn/CSS/Building_blocks/The_box_model#ボックスの構成)の最小の高さを、[包含ブロック](/ja/docs/Web/CSS/Containing_block#包含ブロックの識別)の高さに制限します。マージンボックスが包含ブロック内で利用できる空間をすべて満たそうとするため、 `100%` と似たような動作をしますが、結果として得られるサイズは [box-sizing](/ja/docs/Web/CSS/box-sizing) で決定されるボックスではなく、マージンボックスに適用されます。 + + > [!NOTE] + > ブラウザーが `stretch` 値のために使用する別名と実装状況については、[ブラウザーの互換性](#ブラウザーの互換性)の節を参照してください。 ## 公式定義 @@ -79,5 +94,10 @@ form { ## 関連情報 -- [ボックスモデル](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model), {{cssxref("box-sizing")}} -- {{cssxref("height")}}, {{cssxref("max-height")}} +- {{Cssxref("max-height")}} +- {{Cssxref("height")}} +- {{cssxref("min-inline-size")}} +- {{cssxref("min-block-size")}} +- {{cssxref("box-sizing")}} +- [CSS 基本ボックスモデル入門](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) +- [CSS ボックスモデル](/ja/docs/Web/CSS/CSS_box_model)モジュール diff --git a/files/ja/web/css/min-width/index.md b/files/ja/web/css/min-width/index.md index 25545b2f416acc..be06ac16cc483e 100644 --- a/files/ja/web/css/min-width/index.md +++ b/files/ja/web/css/min-width/index.md @@ -1,6 +1,8 @@ --- title: min-width slug: Web/CSS/min-width +l10n: + sourceCommit: 9a3940b0231838338f65ae1c37d5b874439a3d43 --- {{CSSRef}} @@ -16,6 +18,8 @@ slug: Web/CSS/min-width ```css /* 値 */ min-width: 3.5em; +min-width: anchor-size(width); +min-width: anchor-size(--myAnchor self-inline, 200%); /* 値 */ min-width: 10%; @@ -23,12 +27,15 @@ min-width: 10%; /* キーワード値 */ min-width: max-content; min-width: min-content; +min-width: fit-content; min-width: fit-content(20em); +min-width: stretch; /* グローバル値 */ min-width: inherit; min-width: initial; min-width: revert; +min-width: revert-layer; min-width: unset; ``` @@ -39,13 +46,25 @@ min-width: unset; - {{cssxref("<percentage>")}} - : `min-width` を包含ブロックの幅に対するパーセント値で定義します。 - `auto` - - : ブラウザーが指定された要素の `min-width` を計算して選択します。 + + - : 既定値です。指定した要素の自動値のソースは、その表示値によって異なります。ブロックボックス、インラインボックス、インラインブロック、および表レイアウトボックスすべてでは、`auto` は `0` に解決されます。 + + [フレックスアイテム](/ja/docs/Glossary/Flex_Item)およびグリッドアイテムの場合、最小幅の値は、 `width` プロパティの値などの指定された推奨サイズ、または要素にアスペクト比が設定され、高さが確定しているサイズである場合は変換されたサイズ、それ以外は最小コンテンツサイズが使用されます。フレックスアイテムまたはグリッドアイテムが{{glossary("scroll container","スクロールコンテナー")}}である場合、またはグリッドアイテムが複数のフレックスカラムトラックにまたがる場合、自動最小サイズは `0` になります。 + - `max-content` - - : 内容物が推奨する `min-width` です。 + - : 内容物の推奨する `min-width` です。 - `min-content` - : 内容物の最小の `min-width` です。 +- `fit-content` + - : 利用できる空間を使用しますが、 [`max-content`](/ja/docs/Web/CSS/max-content) を超えないようにします。すなわち、 `min(max-content, max(min-content, stretch))` です。 - `fit-content({{cssxref("<length-percentage>")}})` - : 利用可能な空白を指定された引数で置き換えた `fit-content` 式を使用します。すなわち、 `min(max-content, max(min-content, 引数))` です。 +- `stretch` + + - : 要素の[マージンボックス](/ja/docs/Learn/CSS/Building_blocks/The_box_model#ボックスの構成)の最小の幅を、[包含ブロック](/ja/docs/Web/CSS/Containing_block#包含ブロックの識別)の幅に制限します。マージンボックスが包含ブロック内で利用できる空間をすべて満たそうとするため、 `100%` と似たような動作をしますが、結果として得られるサイズは [box-sizing](/ja/docs/Web/CSS/box-sizing) で決定されるボックスではなく、マージンボックスに適用されます。 + + > [!NOTE] + > ブラウザーが `stretch` 値のために使用する別名と実装状況については、[ブラウザーの互換性](#ブラウザーの互換性)の節を参照してください。 ## 公式定義 @@ -79,5 +98,10 @@ form { ## 関連情報 -- {{Cssxref("width")}}, {{Cssxref("max-width")}} -- [ボックスモデル](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model), {{Cssxref("box-sizing")}} +- {{Cssxref("max-width")}} +- {{Cssxref("width")}} +- {{cssxref("min-inline-size")}} +- {{cssxref("min-block-size")}} +- {{cssxref("box-sizing")}} +- [CSS 基本ボックスモデル入門](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) +- [CSS ボックスモデル](/ja/docs/Web/CSS/CSS_box_model)モジュール diff --git a/files/ja/web/css/width/index.md b/files/ja/web/css/width/index.md index a27dca9364df4a..83a8939ffda8b2 100644 --- a/files/ja/web/css/width/index.md +++ b/files/ja/web/css/width/index.md @@ -2,12 +2,12 @@ title: width slug: Web/CSS/width l10n: - sourceCommit: 925b2bd8beeae6ce8237863637bcd28ccbb8d47f + sourceCommit: b2833ddfd45cae1bb5e050d24637865e9327408d --- {{CSSRef}} -**`width`** は CSS のプロパティで、要素の幅を設定します。既定では、このプロパティは[コンテンツ領域](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model#content-area)の幅を設定しますが、 {{cssxref("box-sizing")}} を `border-box` に設定すると、[境界領域](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model#border-area)の幅を設定します。 +**`width`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の幅を設定します。既定では、このプロパティは[コンテンツ領域](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model#コンテンツ領域)の幅を設定しますが、 {{cssxref("box-sizing")}} を `border-box` に設定すると、[境界領域](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model#境界領域)の幅を設定します。 {{EmbedInteractiveExample("pages/css/width.html")}} @@ -16,12 +16,17 @@ l10n: - `width` の値が `min-width` の値より小さい場合、`min-width` は `width` をオーバーライドします。 - `width` の値が `max-width` の値より大きい場合、`max-width` は `width` をオーバーライドします。 +> [!NOTE] +> 幾何プロパティとして、 `width` プロパティは、{{SVGElement("svg")}}、{{SVGElement("rect")}}、{{SVGElement("image")}}、{{SVGElement("foreignObject")}} の各 SVG 要素にも適用されます。 `auto` の値は `` では `100%` に、その他の要素では `0` に解決され、パーセント値は `` の場合は SVG ビューポートの高さに対する相対値に解決します。 CSS の `width` プロパティ値は、 SVG 要素に設定された {{SVGAttr("width")}} 属性の値を上書きします。 + ## 構文 ```css /* 値 */ width: 300px; width: 25em; +width: anchor-size(--myAnchor inline, 120%); +width: minmax(100px, anchor-size(width)); /* 値 */ width: 75%; @@ -32,6 +37,7 @@ width: min-content; width: fit-content; width: fit-content(20em); width: auto; +width: stretch; /* グローバル値 */ width: inherit; @@ -44,21 +50,27 @@ width: unset; ### 値 - {{cssxref("<length>")}} - - : 絶対的な値で幅を定義します。 + - : 距離の値で幅を定義します。 - {{cssxref("<percentage>")}} - : 親となる[包含ブロック](/ja/docs/Web/CSS/Containing_block)の幅に対するパーセント値で定義します。 - `auto` - : 指定された要素の幅をブラウザーが計算して決めます。 - `max-content` - - : 望ましい固有の幅です。 + - : 本来の望ましい幅です。 - `min-content` - - : 最小の固有の幅です。 + - : 本来の最小の幅です。 - `fit-content` - - : 利用可能なスペースを使用しますが、[max-content](/ja/docs/Web/CSS/max-content)、つまり `min(max-content, max(min-content, stretch))` を超えません。 -- `fit-content({{cssxref("<length-percentage>")}})` {{Experimental_Inline}} + - : 利用できる空間を使用しますが、 [max-content](/ja/docs/Web/CSS/max-content) を超えないようにします。すなわち、 `min(max-content, max(min-content, stretch))` です。 +- `fit-content({{cssxref("<length-percentage>")}})` - : 利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち `min(max-content, max(min-content, ))` です。 +- `stretch` + + - : 要素の[マージンボックス](/ja/docs/Learn/CSS/Building_blocks/The_box_model#ボックスの構成)の幅を、[包含ブロック](/ja/docs/Web/CSS/Containing_block#包含ブロックの識別)の幅に設定します。マージンボックスが包含ブロック内で利用できる空間をすべて満たそうとするため、 `100%` と似たような動作をしますが、結果として得られるサイズは [box-sizing](/ja/docs/Web/CSS/box-sizing) で決定されるボックスではなく、マージンボックスに適用されます。 + + > [!NOTE] + > ブラウザーが `stretch` 値のために使用する別名と実装状況については、[ブラウザーの互換性](#ブラウザーの互換性)の節を参照してください。 -## アクセシビリティの考慮 +## アクセシビリティ ページを拡大してテキストサイズを大きくしたときに、 `width` を設定した要素が切り捨てられたり、他のコンテンツが見えなくなったりしないようにしてください。 @@ -84,7 +96,7 @@ p.goldie { ``` ```html -

The Mozilla community produces a lot of great software.

+

The MDN community writes really great documentation.

``` {{EmbedLiveSample('Default_width', '500px', '64px')}} @@ -114,7 +126,7 @@ p.goldie { {{EmbedLiveSample('Example using pixels and ems', '500px', '64px')}} -### Percentage の例 +### パーセント値の例 ```css .percent { @@ -133,17 +145,14 @@ p.goldie { ### max-content の例 ```css -p.maxgreen { +p.max-green { 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; } ``` ```html -

The Mozilla community produces a lot of great software.

+

The MDN community writes really great documentation.

``` {{EmbedLiveSample('Example using "max-content"', '500px', '64px')}} @@ -151,16 +160,14 @@ p.maxgreen { ### min-content の例 ```css -p.minblue { +p.min-blue { background: lightblue; - width: -moz-min-content; /* Firefox */ - width: -webkit-min-content; /* Chrome */ width: min-content; } ``` ```html -

The Mozilla community produces a lot of great software.

+

The MDN community writes really great documentation.

``` {{EmbedLiveSample('Example using "min-content"', '500px', '155px')}} @@ -175,8 +182,10 @@ p.minblue { ## 関連情報 -- [ボックスモデル](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) - {{cssxref("height")}} - {{cssxref("box-sizing")}} - {{cssxref("min-width")}}, {{cssxref("max-width")}} -- 対応する論理的プロパティ: {{cssxref("block-size")}}, {{cssxref("inline-size")}} +- {{cssxref("block-size")}}, {{cssxref("inline-size")}} +- {{cssxref("anchor-size()")}} +- [CSS 基本ボックスモデル入門](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) +- [CSS ボックスモデル](/ja/docs/Web/CSS/CSS_box_model)モジュール