CSS Box Sizing 関連のリファレンスを更新

- 2021/11/14 時点の英語版に同期

11 files changed, 742 insertions, 658 deletions

diff --git a/files/ja/web/css/box-sizing/index.md b/files/ja/web/css/box-sizing/index.md
index 42e5f1e008..b13d8eba89 100644
--- a/files/ja/web/css/box-sizing/index.md
+++ b/files/ja/web/css/box-sizing/index.md
@@ -6,7 +6,7 @@ tags:
   - CSS
   - CSS ボックスモデル
   - CSS プロパティ
-  - Reference
+  - リファレンス
   - border-box
   - box model
   - box-sizing
diff --git a/files/ja/web/css/fit-content()/index.md b/files/ja/web/css/fit-content()/index.md
index e224a5ad58..b98f044338 100644
--- a/files/ja/web/css/fit-content()/index.md
+++ b/files/ja/web/css/fit-content()/index.md
@@ -1,62 +1,74 @@
 ---
-title: fit-content
-slug: Web/CSS/fit-content
+title: fit-content()
+slug: Web/CSS/fit-content()
 tags:
   - CSS
-  - CSS グリッド
   - CSS 関数
-  - Experimental
-  - Reference
-  - Web
-  - ウェブ
+  - CSS グリッド
+  - 関数
   - レイアウト
-translation_of: Web/CSS/fit-content
+  - リファレンス
+  - ウェブ
+translation_of: Web/CSS/fit-content()
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><span class="seoSummary"><strong><code>fit-content()</code></strong> は<a href="/ja/docs/Web/CSS">CSS</a> の関数で、指定された寸法を <code>min(<var>最大寸法</var>, max(<var>最小寸法</var>, <var>引数</var>))</code> の式に従って有効な寸法に制約します。</span></p>
+**`fit-content()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、指定された寸法を `min(max-content, max(min-content, 引数))` の式に従って有効な範囲の寸法に収めます。
 
-<div>{{EmbedInteractiveExample("pages/css/function-fit-content.html")}}</div>
+{{EmbedInteractiveExample("pages/css/function-fit-content.html")}}
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+この関数は [CSS グリッド](/ja/docs/Web/CSS/CSS_Grid_Layout)のプロパティにおいて、トラックの寸法を `max-content` で定義された最大寸法と `auto` で定義された最小寸法との間で、 `auto` と似た方法 (すなわち [`minmax(auto, max-content)`](/ja/docs/Web/CSS/minmax())) で計算しますが、 `auto` の最小値よりも大きい場合は*引数*がトラックの寸法になるという点が異なります。
 
-<p>この関数は <a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッド</a>のプロパティにおいて、トラックの寸法を <code><a href="/ja/docs/Web/CSS/grid-template-columns#max-content">max-content</a></code> で定義された最大寸法と <code><a href="/ja/docs/Web/CSS/grid-template-columns#auto">auto</a></code> で定義された最小寸法との間で、 <code>auto</code> と似た方法 (すなわち <code><a href="/ja/docs/Web/CSS/minmax">minmax(auto, max-content)</a></code>) で計算しますが、 <code>auto</code> の最小値よりも大きい場合は <var>引数</var> がトラックの寸法になるという点が異なります。</p>
+`max-content` および `auto` キーワードについての詳細は、 {{cssxref("grid-template-columns")}} ページを参照してください。
 
-<p>これは {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}}, {{cssxref("max-height")}} にレイアウトボックスの寸法としても使用され、最大寸法は内容の最大寸法、最小寸法は内容の最小寸法になります。</p>
+`fit-content()` 関数は {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}}, {{cssxref("max-height")}} のレイアウトボックスの寸法としても使用され、最大寸法は内容物の最大寸法、最小寸法は内容物の最小寸法になります。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<p>引数として <code>&lt;length&gt;</code> または <code>&lt;percentage&gt;</code> を受け付ける関数です。</p>
+引数として `<length>` または `<percentage>` を受け付ける関数です。
 
-<pre class="brush: css no-line-numbers">/* &lt;length&gt; 値 */
+```css
+/* <length> 値 */
 fit-content(200px)
 fit-content(5cm)
 fit-content(30vw)
 fit-content(100ch)
 
-/* &lt;percentage&gt; 値 */
+/* <percentage> 値 */
 fit-content(40%)
-</pre>
+```
+
+### 値
 
-<h3 id="Values" name="Values">値</h3>
+- {{cssxref("&lt;length&gt;")}}
+  - : 絶対的な長さ。
+- {{cssxref("&lt;percentage&gt;")}}
 
-<dl>
- <dt>{{cssxref("&lt;length&gt;")}}</dt>
- <dd>絶対的な長さ。</dd>
- <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
- <dd>指定された軸で有効な空間に対する相対的なパーセント値です。</dd>
- <dd>グリッドプロパティでは、行トラックにおける列内のグリッドコンテナーのインライン方向の寸法およびグリッドコンテナーのブロック方向の寸法の相対値です。それ以外では、書字方向に応じてレイアウトボックスの有効なインライン方向の寸法またはブロック方向の寸法に対する相対値になります。</dd>
-</dl>
+  - : 指定された軸で有効な空間に対する相対的なパーセント値です。
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+    グリッドプロパティでは、行トラックにおける列内のグリッドコンテナーのインライン方向の寸法およびグリッドコンテナーのブロック方向の寸法の相対値です。それ以外では、書字方向に応じてレイアウトボックスの有効なインライン方向の寸法またはブロック方向の寸法に対する相対値になります。
 
-{{csssyntax}}
+## 例
 
-<h2 id="Example" name="Example">例</h2>
+<h3 id="Sizing_grid_columns_with_fit-content">グリッドカラムの大きさを fit-content で指定</h3>
 
-<h3 id="CSS">CSS</h3>
+#### HTML
 
-<pre class="brush: css; highlight[3]">#container {
+```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>
+```
+
+#### CSS
+
+```css
+#container {
   display: grid;
   grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
   grid-gap: 5px;
@@ -67,51 +79,35 @@ fit-content(40%)
   padding: 10px;
 }
 
-#container &gt; div {
+#container > div {
   background-color: #8ca0ff;
   padding: 5px;
 }
-</pre>
+```
 
-<h3 id="HTML">HTML</h3>
+#### 結果
 
-<pre class="brush: html">&lt;div id="container"&gt;
-  &lt;div&gt;Item as wide as the content.&lt;/div&gt;
-  &lt;div&gt;
-    Item with more text in it. Because the contents of it are
-    wider than the maximum width, it is clamped at 300 pixels.
-  &lt;/div&gt;
-  &lt;div&gt;Flexible item&lt;/div&gt;
-&lt;/div&gt;</pre>
-
-<h3 id="Result" name="Result">結果</h3>
-
-<p>{{EmbedLiveSample("Example", "100%", 200)}}</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Sizing", "#valdef-width-fit-content-length-percentage", "fit-content()")}}</td>
-   <td>{{Spec2("CSS3 Sizing")}}</td>
-   <td>{{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}}, {{cssxref("max-height")}} のレイアウトボックスの寸法としての関数を定義。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS Grid", "#valdef-grid-template-columns-fit-content", "fit-content()")}}</td>
-   <td>{{Spec2("CSS Grid")}}</td>
-   <td>トラックの寸法として使用される際の関数を定義。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.grid-template-columns.fit-content")}}</p>
+{{EmbedLiveSample("Sizing_grid_columns_with_fit-content", "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")}}     | トラックの寸法として使用される際の関数を定義。                                                                                                                                                                                                      |
+
+## ブラウザーの互換性
+
+### width (および他の大きさのプロパティ) での対応
+
+{{Compat("css.properties.width.fit-content_function")}}
+
+### グリッドレイアウトでの対応
+
+{{Compat("css.properties.grid-template-columns.fit-content")}}
+
+## 関連情報
+
+- 関連する大きさのキーワード: {{cssxref("min-content")}}, {{cssxref("max-content")}}
+- 関連する CSS グリッドプロパティ: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}
+- グリッドレイアウトガイド: _[Line-based placement with CSS Grid](/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)_
+- グリッドレイアウトガイド: _[Grid template areas - Grid definition shorthands](/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#grid_definition_shorthands)_
diff --git a/files/ja/web/css/fit-content/index.md b/files/ja/web/css/fit-content/index.md
index 79b6973c55..55ae0ae788 100644
--- a/files/ja/web/css/fit-content/index.md
+++ b/files/ja/web/css/fit-content/index.md
@@ -3,30 +3,31 @@ title: fit-content
 slug: Web/CSS/fit-content
 tags:
   - CSS
-  - Keyword
-  - Reference
-  - Web
+  - キーワード
+  - リファレンス
+  - ウェブ
   - fit-content
 browser-compat: css.properties.width.fit-content
+translation_of: Web/CSS/fit-content
 ---
 {{CSSRef}}
 
-The **`fit-content`** behaves as `fit-content(stretch)`. In practice this means that the box will use the available space, but never more than {{cssxref("max-content")}}.
+**`fit-content`** は `fit-content(stretch)` として動作します。実際には、ボックスは利用可能な空間を使用しますが、{{cssxref("max-content")}} 以上にはならないことを意味します。
 
-When used as laid out box size for {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} and {{cssxref("max-height")}} the maximum and minimum sizes refer to the content size.
+{{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}}, {{cssxref("max-height")}} のレイアウトされたボックスの大きさとして使用される場合、最大寸法と最小寸法は、コンテンツの寸法を参照します。
 
-> **Note:** The CSS Sizing specification also defines the {{cssxref("fit-content()", "fit-content()")}} function. This page details the keyword.
+> **Note:** CSS Sizing の仕様では、{{cssxref("fit-content()", "fit-content()")}} という関数も定義されています。このページではキーワード版について詳しく説明します。
 
-## Syntax
+## 構文
 
 ```css
 width: fit-content
 block-size: fit-content
 ```
 
-## Examples
+## 例
 
-### Using fit-content for box sizing
+<h3 id="Using_fit-content_for_box_sizing">fit-content を使用してボックスの大きさを指定</h3>
 
 #### HTML
 
@@ -56,20 +57,20 @@ block-size: fit-content
 }
 ```
 
-#### Result
+#### 結果
 
 {{EmbedLiveSample("Using_fit-content_for_box_sizing", "100%", 200)}}
 
-## Specifications
+## 仕様書
 
 {{Specifications}}
 
-## Browser compatibility
+## ブラウザーの互換性
 
-### Supported for width (and other sizing properties)
+### width (および他の大きさのプロパティ) での対応
 
 {{Compat}}
 
-## See also
+## 関連情報
 
-- Related sizing keywords: {{cssxref("min-content")}}, {{cssxref("max-content")}}
+- 関連する大きさのキーワード: {{cssxref("min-content")}}, {{cssxref("max-content")}}
diff --git a/files/ja/web/css/height/index.md b/files/ja/web/css/height/index.md
index 4728fdfa86..1bc5856aff 100644
--- a/files/ja/web/css/height/index.md
+++ b/files/ja/web/css/height/index.md
@@ -3,83 +3,98 @@ title: height
 slug: Web/CSS/height
 tags:
   - CSS
-  - CSS Property
   - CSS プロパティ
-  - Layout
-  - Reference
-  - Vertical
-  - dimensions
+  - レイアウト
+  - リファレンス
+  - 垂直
+  - 寸法
   - height
-  - 'recipe:css-property'
+  - recipe:css-property
   - size
-  - レイアウト
+browser-compat: css.properties.height
 translation_of: Web/CSS/height
 ---
-<div>{{CSSRef}}</div>
-
-<p><strong><code>height</code></strong> は CSS のプロパティで、要素の高さを指定します。既定では、このプロパティは<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">コンテンツ領域</a>の高さを定義します。しかし、 {{cssxref("box-sizing")}} が <code>border-box</code> に設定されていた場合は、 <a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#border-area">境界領域</a>の高さを定義します。</p>
+{{CSSRef}}
 
-<div>{{EmbedInteractiveExample("pages/css/height.html")}}</div>
+**`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)の高さを定義します。
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+{{EmbedInteractiveExample("pages/css/height.html")}}
 
-<p>{{cssxref("min-height")}} 及び {{cssxref("max-height")}} プロパティは <code>height</code> を上書きします。</p>
+{{cssxref("min-height")}} および {{cssxref("max-height")}} プロパティは `height` を上書きします。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
-height: auto;
-
-/* &lt;length&gt; 値 */
+```css
+/* <length> 値 */
 height: 120px;
 height: 10em;
 
-/* &lt;percentage&gt; 値 */
+/* <percentage> 値 */
 height: 75%;
 
+/* キーワード値 */
+height: max-content;
+height: min-content;
+height: fit-content(20em);
+height: auto;
+
 /* グローバル値 */
 height: inherit;
 height: initial;
+height: revert;
 height: unset;
-</pre>
-
-<h3 id="Values" name="Values">値</h3>
-
-<dl>
- <dt>{{cssxref("&lt;length&gt;")}}</dt>
- <dd>絶対値で高さを定義します。</dd>
- <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
- <dd>包含ブロックの高さのパーセントで高さを定義します。</dd>
- <dt><code>auto</code></dt>
- <dd>指定された要素の高さをブラウザーが計算して決めます。</dd>
- <dt><code>max-content</code></dt>
- <dd>本来の望ましい高さです。</dd>
- <dt><code>min-content</code></dt>
- <dd>本来の最小の高さです。</dd>
- <dt><code>fit-content({{cssxref("&lt;length-percentage&gt;")}})</code></dt>
- <dd>利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち min(max-content, max(min-content, )) です。</dd>
-</dl>
-
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+```
+
+### 値
+
+- {{cssxref("&lt;length&gt;")}}
+  - : 絶対値で高さを定義します。
+- {{cssxref("&lt;percentage&gt;")}}
+  - : 包含ブロックの高さのパーセントで高さを定義します。
+- `auto`
+  - : 指定された要素の高さをブラウザーが計算して決めます。
+- `max-content`
+  - : 本来の望ましい高さです。
+- `min-content`
+  - : 本来の最小の高さです。
+- `fit-content({{cssxref("&lt;length-percentage&gt;")}})`
+  - : 利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち `min(max-content, max(min-content, <length-percentage>))` です。
+
+## アクセシビリティの考慮
+
+要素の `height` は、テキストを大きくするためにページを拡大したとき、切り捨てたられたり他のコンテンツを邪魔したりしないように設定するよう確認してください。
+
+- [MDN "WCAG を理解する ― ガイドライン 1.4 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
+- [Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)
+
+## 公式定義
+
+{{CSSInfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Example" name="Example">例</h2>
+## 例
 
-<h3 id="HTML" name="HTML">HTML</h3>
+<h3 id="Setting_height_using_pixels_and_percentages">ピクセル数とパーセント値を使用して高さを設定</h3>
 
-<pre class="brush: html notranslate">&lt;div id="taller"&gt;50ピクセルの高さです。&lt;/div&gt;
-&lt;div id="shorter"&gt;25ピクセルの高さです。&lt;/div&gt;
-&lt;div id="parent"&gt;
-  &lt;div id="child"&gt;
-    親の半分の高さです。
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
+#### HTML
 
-<h3 id="CSS">CSS</h3>
+```html
+<div id="taller">I'm 50 pixels tall.</div>
+<div id="shorter">I'm 25 pixels tall.</div>
+<div id="parent">
+  <div id="child">
+    I'm half the height of my parent.
+  </div>
+</div>
+```
 
-<pre class="brush: css notranslate">div {
+#### CSS
+
+```css
+div {
   width: 250px;
   margin-bottom: 5px;
   border: 2px solid blue;
@@ -101,65 +116,24 @@ height: unset;
   height: 50%;
   width: 75%;
 }
-</pre>
-
-<h3 id="Result" name="Result">結果</h3>
-
-<p>{{EmbedLiveSample('Example', 'auto', 240)}}</p>
-
-<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
-
-<p>テキストを大きくするためにページを拡大したとき、他のコンテンツを切り捨てたり邪魔したりしないように要素の <code>height</code> を設定するよう確認してください。</p>
-
-<ul>
- <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li>
-</ul>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Sizing', '#width-height-keywords', 'height')}}</td>
-   <td>{{Spec2('CSS4 Sizing')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'height')}}</td>
-   <td>{{Spec2('CSS3 Sizing')}}</td>
-   <td>キーワード <code>max-content</code>, <code>min-content</code>, <code>available</code>, <code>fit-content</code> の追加。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>{{cssxref("&lt;length&gt;")}} 値のサポートを追加。どの要素に用いるかを明記。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#height', 'height')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.height")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">ボックスモデル</a>, {{cssxref("box-sizing")}}</li>
- <li>{{cssxref("max-height")}}, {{cssxref("min-height")}}</li>
- <li>対応する論理的プロパティ: {{cssxref("block-size")}}, {{cssxref("inline-size")}}</li>
-</ul>
+```
+
+#### 結果
+
+{{EmbedLiveSample('Setting_height_using_pixels_and_percentages', 'auto', 240)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ボックスモデル](/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")}}
diff --git a/files/ja/web/css/max-content/index.md b/files/ja/web/css/max-content/index.md
new file mode 100644
index 0000000000..76373aef2e
--- /dev/null
+++ b/files/ja/web/css/max-content/index.md
@@ -0,0 +1,118 @@
+---
+title: max-content
+slug: Web/CSS/max-content
+tags:
+  - CSS
+  - CSS グリッド
+  - リファレンス
+  - max-content
+  - 大きさ
+browser-compat: css.properties.width.max-content
+translation_of: Web/CSS/max-content
+---
+`max-content` は大きさのキーワードで、コンテンツの内在的な最大幅や高さを表しています。テキストコンテンツの場合は、オーバーフローが発生しても、コンテンツはまったく折り返されないことを意味します。
+
+## 構文
+
+```css
+/* 長さとして使用 */
+width: max-content;
+inline-size: max-content;
+height: max-content;
+block-size: max-content;
+
+/* グリッドトラックで使用 */
+grid-template-columns: 200px 1fr max-content;
+
+/* グローバル値 */
+max-content: inherit;
+max-content: initial;
+max-content: revert;
+max-content: unset;
+```
+
+## 例
+
+<h3 id="Using_max-content_for_box_sizing">max-content をボックスの大きさに使用</h3>
+
+#### HTML
+
+```html
+<div id="container">
+  <div class="item">Item</div>
+  <div class="item">Item with more text in it which will overflow the fixed width box.</div>
+</div>
+```
+
+#### CSS
+
+```css
+#container {
+  background-color: #8cffa0;
+  padding: 10px;
+  width: 200px;
+}
+
+.item {
+  width: max-content;
+  background-color: #8ca0ff;
+  padding: 5px;
+  margin-bottom: 1em;
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample("Using_max-content_for_box_sizing", "100%", 200)}}
+
+<h3 id="Sizing_grid_columns_with_max-content">max-content をグリッド列の大きさに使用</h3>
+
+#### HTML
+
+```html
+<div id="container">
+  Item
+  <div>
+    Item with more text in it.
+  </div>
+  Flexible item
+</div>
+```
+
+#### CSS
+
+```css
+#container {
+  display: grid;
+  grid-template-columns: max-content max-content 1fr;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample("Sizing_grid_columns_with_max-content", "100%", 200)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+### width (および他の大きさのプロパティ) での対応
+
+{{Compat}}
+
+## 関連情報
+
+- 関連する大きさのキーワード: {{cssxref("min-content")}}, {{cssxref("fit-content")}}
diff --git a/files/ja/web/css/max-height/index.md b/files/ja/web/css/max-height/index.md
index fb379ee784..a2e309db37 100644
--- a/files/ja/web/css/max-height/index.md
+++ b/files/ja/web/css/max-height/index.md
@@ -3,34 +3,34 @@ title: max-height
 slug: Web/CSS/max-height
 tags:
   - CSS
-  - CSS Property
-  - Layout
-  - Maximum
-  - Reference
-  - dimensions
+  - CSS プロパティ
+  - レイアウト
+  - 最大
+  - リファレンス
+  - 寸法
   - height
   - limit
   - max-height
-  - 'recipe:css-property'
+  - recipe:css-property
   - size
+browser-compat: css.properties.max-height
 translation_of: Web/CSS/max-height
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>max-height</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の最大高を設定します。これは {{Cssxref("height")}} プロパティの<a href="/ja/docs/Web/CSS/used_value">使用値</a>が、 <code>max-height</code> に指定した値を上回ることを防ぎます。</p>
+**`max-height`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の最大高を設定します。これは {{Cssxref("height")}} プロパティの[使用値](/ja/docs/Web/CSS/used_value)が、 `max-height` に指定した値を上回ることを防ぎます。
 
-<div>{{EmbedInteractiveExample("pages/css/max-height.html")}}</div>
+{{EmbedInteractiveExample("pages/css/max-height.html")}}
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+`max-height` は {{cssxref("height")}} を上書きしますが、 {{cssxref("min-height")}} は `max-height` を上書きします。
 
-<p><code>max-height</code> は {{cssxref("height")}} を上書きしますが、 {{cssxref("min-height")}} は <code>max-height</code> を上書きします。</p>
+## 構文
 
-<h2 id="Syntax">構文</h2>
-
-<pre class="brush:css no-line-numbers">/* &lt;length&gt; 値 */
+```css
+/* <length> 値 */
 max-height: 3.5em;
 
-/* &lt;percentage&gt; 値 */
+/* <percentage> 値 */
 max-height: 75%;
 
 /* キーワード値 */
@@ -42,89 +42,60 @@ max-height: fit-content(20em);
 /* グローバル値 */
 max-height: inherit;
 max-height: initial;
+max-height: revert;
 max-height: unset;
-</pre>
+```
 
-<h3 id="Values">値</h3>
+### 値
 
-<dl>
- <dt>{{cssxref("&lt;length&gt;")}}</dt>
- <dd><code>max-height</code> を絶対的な値で定義します。</dd>
- <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
- <dd><code>max-height</code> を包含ブロックの高さに対するパーセント値で定義します。</dd>
- <dt><code>none</code></dt>
- <dd>ボックスの寸法を制限しません。</dd>
- <dt><code>max-content</code></dt>
- <dd>内容物が推奨する <code>max-height</code> です。</dd>
- <dt><code>min-content</code></dt>
- <dd>内容物の最小の <code>max-height</code> です。</dd>
- <dt><code>fit-content({{cssxref("&lt;length-percentage&gt;")}})</code></dt>
- <dd>利用可能な空白を指定された引数で置き換えた <code>fit-content</code> 式を使用します。すなわち、 <code>min(max-content, max(min-content, <var>引数</var>))</code> です。</dd>
-</dl>
+- {{cssxref("&lt;length&gt;")}}
+  - : `max-height` を絶対的な値で定義します。
+- {{cssxref("&lt;percentage&gt;")}}
+  - : `max-height` を包含ブロックの高さに対するパーセント値で定義します。
+- `none`
+  - : ボックスの寸法を制限しません。
+- `max-content`
+  - : 内容物が推奨する `max-height` です。
+- `min-content`
+  - : 内容物の最小の `max-height` です。
+- `fit-content({{cssxref("&lt;length-percentage&gt;")}})`
+  - : 利用可能な空白を指定された引数で置き換えた `fit-content` 式を使用します。すなわち、 `min(max-content, max(min-content, 引数))` です。
 
-<h2 id="Accessibility_concerns">アクセシビリティの考慮</h2>
+## アクセシビリティの考慮
 
-<p>テキストを大きくするためにページを拡大したときに、 <code>max-height</code> を設定した要素が切り取られたり、他のコンテンツを覆い隠したりしないことを確認してください。</p>
+テキストを大きくするためにページを拡大したときに、 `max-height` を設定した要素が切り取られたり、他のコンテンツを覆い隠したりしないことを確認してください。
 
-<ul>
- <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN WCAG を理解する ― ガイドライン 1.4 の解説</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li>
-</ul>
+- [MDN WCAG を理解する ― ガイドライン 1.4 の解説](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
+- [Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)
 
-<h2 id="Formal_definition">公式定義</h2>
+## 公式定義
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Formal_syntax">形式文法</h2>
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples">例</h2>
+## 例
 
-<h3 id="Setting_max-height_using_percentage_and_keyword_values">パーセント値とキーワード値を用いた max-height の設定</h3>
+### パーセント値とキーワード値を用いた max-height の設定
 
-<pre class="brush: css">table { max-height: 75%; }
+```css
+table { max-height: 75%; }
 
 form { max-height: none; }
-</pre>
-
-<h2 id="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Sizing', '#width-height-keywords', 'max-height')}}</td>
-   <td>{{Spec2('CSS4 Sizing')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'max-height')}}</td>
-   <td>{{Spec2('CSS3 Sizing')}}</td>
-   <td>キーワード <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> を追加。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'max-height')}}</td>
-   <td>{{ Spec2('CSS2.1') }}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.max-height")}}</p>
-
-<h2 id="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">ボックスモデル</a>、 {{cssxref("box-sizing")}}</li>
- <li>{{Cssxref("height")}}, {{Cssxref("min-height")}}</li>
- <li>対応する論理プロパティ: {{cssxref("max-inline-size")}}, {{cssxref("max-block-size")}}</li>
-</ul>
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ボックスモデル](/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")}}
diff --git a/files/ja/web/css/max-width/index.md b/files/ja/web/css/max-width/index.md
index 89feb27342..b5dba1255b 100644
--- a/files/ja/web/css/max-width/index.md
+++ b/files/ja/web/css/max-width/index.md
@@ -3,27 +3,34 @@ title: max-width
 slug: Web/CSS/max-width
 tags:
   - CSS
-  - CSS Property
   - CSS プロパティ
-  - Reference
+  - レイアウト
+  - Limits
+  - 最大
+  - リファレンス
+  - 寸法
+  - max-width
+  - recipe:css-property
+  - size
+  - width
+browser-compat: css.properties.max-width
 translation_of: Web/CSS/max-width
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>max-width</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の最大幅を設定します。これは {{Cssxref("width")}} プロパティの<a href="/ja/docs/Web/CSS/used_value">使用値</a>が、 <code>max-width</code> で指定した値を上回ることを防ぎます。</p>
+**`max-width`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の最大幅を設定します。これは {{Cssxref("width")}} プロパティの[使用値](/ja/docs/Web/CSS/used_value)が、 `max-width` で指定した値を上回ることを防ぎます。
 
-<div>{{EmbedInteractiveExample("pages/css/max-width.html")}}</div>
+{{EmbedInteractiveExample("pages/css/max-width.html")}}
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+`max-width` は {{cssxref("width")}} を上書きしますが、 {{cssxref("min-width")}} は `max-width` を上書きします。
 
-<p><code>max-width</code> は {{cssxref("width")}} を上書きしますが、 {{cssxref("min-width")}} は <code>max-width</code> を上書きします。</p>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+```css
+/* <length> 値 */
 max-width: 3.5em;
 
-/* &lt;percentage&gt; 値 */
+/* <percentage> 値 */
 max-width: 75%;
 
 /* キーワード値 */
@@ -35,45 +42,60 @@ max-width: fit-content(20em);
 /* グローバル値 */
 max-width: inherit;
 max-width: initial;
+max-width: revert;
 max-width: unset;
-</pre>
-
-<h3 id="Values" name="Values">値</h3>
-
-<dl>
- <dt>{{cssxref("&lt;length&gt;")}}</dt>
- <dd><code>max-width</code> を絶対的な値で定義します。</dd>
- <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
- <dd><code>max-width</code> を包含ブロックの幅に対するパーセント値で定義します。</dd>
- <dt><code>auto</code></dt>
- <dd>ブラウザーは指定された要素の <code>max-width</code> を計算して選択します。</dd>
- <dt><code>none</code></dt>
- <dd>ボックスの寸法を制限しません。</dd>
- <dt><code>max-content</code></dt>
- <dd>内容物が推奨する <code>max-width</code> です。</dd>
- <dt><code>min-content</code></dt>
- <dd>内容物の最小の <code>max-width</code> です。</dd>
- <dt><code>fit-content({{cssxref("&lt;length-percentage&gt;")}})</code></dt>
- <dd>利用可能な空白を指定された引数で置き換えた <code>fit-content</code> 式を使用します。すなわち、 <code>min(max-content, max(min-content, <var>引数</var>))</code> です。</dd>
-</dl>
-
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+```
+
+### 値
+
+- {{cssxref("&lt;length&gt;")}}
+  - : `max-width` を絶対的な値で定義します。
+- {{cssxref("&lt;percentage&gt;")}}
+  - : `max-width` を包含ブロックの幅に対するパーセント値で定義します。
+- `none`
+  - : ボックスの寸法を制限しません。
+- `max-content`
+  - : 内容物が推奨する `max-width` です。
+- `min-content`
+  - : 内容物の最小の `max-width` です。
+- `fit-content({{cssxref("&lt;length-percentage&gt;")}})`
+  - : 利用可能な空白を指定された引数で置き換えた `fit-content` 式を使用します。すなわち、 `min(max-content, max(min-content, 引数))` です。
+
+## アクセシビリティの考慮
+
+ページを拡大縮小して文字サイズを拡大した際に、 `max-width` を設定した要素が他のコンテンツを切り捨てたり妨げたりしないことを確認してください。
+
+- [MDN "WCAG を理解する ― ガイドライン 1.4 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
+- [Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
+
+<h3 id="Setting_max_width_in_pixels">最大幅をピクセル単位で設定</h3>
+
+この例では、 "child" の幅が 150 ピクセルか "parent" の幅のどちらか小さい方になります。
 
-<p>この例では、 "child" の幅が150ピクセルか "parent" の幅のどちらか小さい方になります。</p>
+#### HTML
 
-<div id="basic-max-width-demo">
-<pre class="brush: html notranslate">&lt;div id="parent"&gt;
-  &lt;div id="child"&gt;
+```html
+<div id="parent">
+  <div id="child">
     Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
+  </div>
+</div>
+```
+
+#### CSS
 
-<pre class="brush: css notranslate">#parent {
+```css
+#parent {
   background: lightblue;
   width: 300px;
 }
@@ -83,58 +105,22 @@ max-width: unset;
   width: 100%;
   max-width: 150px;
 }
-</pre>
-</div>
+```
+
+#### 結果
+
+{{EmbedLiveSample("Setting_max_width_in_pixels", 350, 100)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
 
-<p>{{EmbedLiveSample("basic-max-width-demo", 350, 100)}}</p>
-
-<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2>
-
-<p>ページを拡大縮小して文字サイズを拡大した際に、 <code>max-width</code> を設定した要素が他のコンテンツを切り捨てたり妨げたりしないことを確認してください。</p>
-
-<ul>
- <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html" rel="noopener">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li>
-</ul>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Sizing', '#width-height-keywords', 'max-width')}}</td>
-   <td>{{Spec2('CSS4 Sizing')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'max-width')}}</td>
-   <td>{{Spec2('CSS3 Sizing')}}</td>
-   <td>キーワード <code>max-content</code>, <code>min-content</code>, <code>fit-content</code>, <code>fill-available</code> を追加。</td>
-  </tr>
-  <tr>
-   <td>{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width') }}</td>
-   <td>{{ Spec2('CSS2.1') }}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.max-width")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" title="en/CSS/box_model">The box model</a>, {{cssxref("box-sizing")}}</li>
- <li>{{cssxref("width")}}, {{cssxref("min-width")}}</li>
-</ul>
+- [ボックスモデル](/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")}}
diff --git a/files/ja/web/css/min-content/index.md b/files/ja/web/css/min-content/index.md
new file mode 100644
index 0000000000..93043dd853
--- /dev/null
+++ b/files/ja/web/css/min-content/index.md
@@ -0,0 +1,106 @@
+---
+title: min-content
+slug: Web/CSS/min-content
+tags:
+  - CSS
+  - キーワード
+  - リファレンス
+  - min-content
+  - 大きさ
+browser-compat: css.properties.width.min-content
+translation_of: min-content
+---
+`min-content` は大きさのキーワードで、コンテンツの内在的な最小幅を表しています。テキストコンテンツの場合は、コンテンツがすべてのソフトラッピングの機会を使用した場合に、最も長い単語と同じくらい小さくなることを意味します。
+
+## 構文
+
+```css
+/* 長さとして使用 */
+width: min-content;
+inline-size: min-content;
+height: min-content;
+block-size: min-content;
+
+/* グリッドトラックで使用 */
+grid-template-columns: 200px 1fr min-content;
+
+/* グローバル値 */
+min-content: inherit;
+min-content: initial;
+min-content: revert;
+min-content: unset;
+```
+
+## 例
+
+<h3 id="Using_min-content_for_box_sizing">min-content をボックスの大きさに使用</h3>
+
+#### HTML
+
+```html
+<div class="item">Item</div>
+<div class="item">Item with more text in it.</div>
+```
+
+#### CSS
+
+```css
+.item {
+  width: min-content;
+  background-color: #8ca0ff;
+  padding: 5px;
+  margin-bottom: 1em;
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample("Using_min-content_for_box_sizing", "100%", 200)}}
+
+<h3 id="Sizing_grid_columns_with_min-content">min-content をグリッド列の大きさに使用</h3>
+
+#### HTML
+
+```html
+<div id="container">
+  Item
+  <div>
+    Item with more text in it.
+  </div>
+  Flexible item
+</div>
+```
+
+#### CSS
+
+```css
+#container {
+  display: grid;
+  grid-template-columns: min-content min-content 1fr;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample("Sizing_grid_columns_with_min-content", "100%", 200)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+### width (および他の大きさのプロパティ) での対応
+
+{{Compat}}
diff --git a/files/ja/web/css/min-height/index.md b/files/ja/web/css/min-height/index.md
index 3d49776065..27fbb98ff5 100644
--- a/files/ja/web/css/min-height/index.md
+++ b/files/ja/web/css/min-height/index.md
@@ -3,33 +3,33 @@ title: min-height
 slug: Web/CSS/min-height
 tags:
   - CSS
-  - CSS Property
-  - Layout
-  - Minimum
-  - Reference
-  - dimensions
+  - CSS プロパティ
+  - レイアウト
+  - 最小
+  - リファレンス
+  - 寸法
   - height
   - min-height
-  - 'recipe:css-property'
+  - recipe:css-property
   - size
+browser-compat: css.properties.min-height
 translation_of: Web/CSS/min-height
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>min-height</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の最小幅を設定します。これは {{cssxref("height")}} プロパティの<a href="/ja/docs/Web/CSS/used_value">使用値</a>が、<code>min-height</code> で指定した値を下回ることを防ぎます。</p>
+**`min-height`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の最小幅を設定します。これは {{cssxref("height")}} プロパティの[使用値](/ja/docs/Web/CSS/used_value)が、`min-height` で指定した値を下回ることを防ぎます。
 
-<div>{{EmbedInteractiveExample("pages/css/min-height.html")}}</div>
+{{EmbedInteractiveExample("pages/css/min-height.html")}}
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+`min-height` の値が {{cssxref("max-height")}} および {{cssxref("height")}} の値より大きい場合は、`min-height` の値が要素の幅になります。
 
-<p><code>min-height</code> の値が {{cssxref("max-height")}} および {{cssxref("height")}} の値より大きい場合は、<code>min-height</code> の値が要素の幅になります。</p>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+```css
+/* <length> 値 */
 min-height: 3.5em;
 
-/* &lt;percentage&gt; 値 */
+/* <percentage> 値 */
 min-height: 10%;
 
 /* キーワード値 */
@@ -40,79 +40,52 @@ min-height: fit-content(20em);
 /* グローバル値 */
 min-height: inherit;
 min-height: initial;
+min-height: revert;
 min-height: unset;
-</pre>
+```
 
-<h3 id="Values" name="Values">値</h3>
+### 値
 
-<dl>
- <dt>{{cssxref("&lt;length&gt;")}}</dt>
- <dd><code>min-height</code> を絶対的な値で定義します。</dd>
- <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
- <dd><code>min-height</code> を包含ブロックの高さに対するパーセント値で定義します。</dd>
- <dt><code>auto</code></dt>
- <dd>ブラウザーが指定された要素の <code>min-height</code> を計算して選択します。</dd>
- <dt><code>max-content</code></dt>
- <dd>内容物が推奨する <code>min-height</code> です。</dd>
- <dt><code>min-content</code></dt>
- <dd>内容物の最小の <code>min-height</code> です。</dd>
- <dt><code>fit-content({{cssxref("&lt;length-percentage&gt;")}})</code></dt>
- <dd>利用可能な空白を指定された引数で置き換えた <code>fit-content</code> 式を使用します。すなわち、 <code>min(max-content, max(min-content, <var>引数</var>))</code> です。</dd>
-</dl>
+- {{cssxref("&lt;length&gt;")}}
+  - : `min-height` を絶対的な値で定義します。
+- {{cssxref("&lt;percentage&gt;")}}
+  - : `min-height` を包含ブロックの高さに対するパーセント値で定義します。
+- `auto`
+  - : ブラウザーが指定された要素の `min-height` を計算して選択します。
+- `max-content`
+  - : 内容物が推奨する `min-height` です。
+- `min-content`
+  - : 内容物の最小の `min-height` です。
+- `fit-content({{cssxref("&lt;length-percentage&gt;")}})`
+  - : 利用可能な空白を指定された引数で置き換えた `fit-content` 式を使用します。すなわち、 `min(max-content, max(min-content, 引数))` です。
 
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+## 公式定義
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="Setting_min-height" name="Setting_min-height">min-height の設定</h3>
+### min-height の設定
 
-<pre class="brush:css; notranslate">table { min-height: 75%; }
+```css
+table { min-height: 75%; }
 
 form { min-height: 0; }
-</pre>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Sizing', '#width-height-keywords', 'min-height')}}</td>
-   <td>{{Spec2('CSS4 Sizing')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'min-height')}}</td>
-   <td>{{Spec2('CSS3 Sizing')}}</td>
-   <td>キーワード <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> を追加。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'min-height')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.min-height")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">ボックスモデル</a>, {{cssxref("box-sizing")}}</li>
- <li>{{cssxref("height")}}, {{cssxref("max-height")}}</li>
-</ul>
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat("css.properties.min-height")}}
+
+## 関連情報
+
+- [ボックスモデル](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model), {{cssxref("box-sizing")}}
+- {{cssxref("height")}}, {{cssxref("max-height")}}
diff --git a/files/ja/web/css/min-width/index.md b/files/ja/web/css/min-width/index.md
index 9660976dc7..512ec3ee29 100644
--- a/files/ja/web/css/min-width/index.md
+++ b/files/ja/web/css/min-width/index.md
@@ -3,27 +3,34 @@ title: min-width
 slug: Web/CSS/min-width
 tags:
   - CSS
-  - CSS Property
   - CSS プロパティ
-  - Reference
+  - 水平
+  - レイアウト
+  - 最小
+  - リファレンス
+  - 寸法
+  - min-width
+  - recipe:css-property
+  - size
+  - width
+browser-compat: css.properties.min-width
 translation_of: Web/CSS/min-width
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>min-width</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の最小幅を設定します。これは {{Cssxref("width")}} プロパティの<a href="/ja/docs/Web/CSS/used_value">使用値</a>が、<code>min-width</code> で指定した値を下回ることを防ぎます。</p>
+**`min-width`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の最小幅を設定します。これは {{Cssxref("width")}} プロパティの[使用値](/ja/docs/Web/CSS/used_value)が、`min-width` で指定した値を下回ることを防ぎます。
 
-<div>{{EmbedInteractiveExample("pages/css/min-width.html")}}</div>
+{{EmbedInteractiveExample("pages/css/min-width.html")}}
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+`min-width` の値が {{Cssxref("max-width")}} および {{Cssxref("width")}} の値より大きい場合は、`min-width` の値が要素の幅になります。
 
-<p><code>min-width</code> の値が {{Cssxref("max-width")}} および {{Cssxref("width")}} の値より大きい場合は、<code>min-width</code> の値が要素の幅になります。</p>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush:css no-line-numbers">/* &lt;length&gt; 値 */
+```css
+/* <length> 値 */
 min-width: 3.5em;
 
-/* &lt;percentage&gt; 値 */
+/* <percentage> 値 */
 min-width: 10%;
 
 /* キーワード値 */
@@ -34,82 +41,52 @@ min-width: fit-content(20em);
 /* グローバル値 */
 min-width: inherit;
 min-width: initial;
+min-width: revert;
 min-width: unset;
-</pre>
-
-<h3 id="Values" name="Values">値</h3>
-
-<dl>
- <dt>{{cssxref("&lt;length&gt;")}}</dt>
- <dd><code>min-width</code> を絶対的な値で定義します。</dd>
- <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
- <dd><code>min-width</code> を包含ブロックの幅に対するパーセント値で定義します。</dd>
- <dt><code>auto</code></dt>
- <dd>ブラウザーが指定された要素の <code>min-width</code> を計算して選択します。</dd>
- <dt><code>none</code></dt>
- <dd>ボックスの寸法を制限しません。</dd>
- <dt><code>max-content</code></dt>
- <dd>内容物が推奨する <code>min-width</code> です。</dd>
- <dt><code>min-content</code></dt>
- <dd>内容物の最小の <code>min-width</code> です。</dd>
- <dt><code>fit-content({{cssxref("&lt;length-percentage&gt;")}})</code></dt>
- <dd>利用可能な空白を指定された引数で置き換えた <code>fit-content</code> 式を使用します。すなわち、 <code>min(max-content, max(min-content, <var>引数</var>))</code> です。</dd>
-</dl>
-
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+```
+
+### 値
+
+- {{cssxref("&lt;length&gt;")}}
+  - : `min-width` を絶対的な値で定義します。
+- {{cssxref("&lt;percentage&gt;")}}
+  - : `min-width` を包含ブロックの幅に対するパーセント値で定義します。
+- `auto`
+  - : ブラウザーが指定された要素の `min-width` を計算して選択します。
+- `max-content`
+  - : 内容物が推奨する `min-width` です。
+- `min-content`
+  - : 内容物の最小の `min-width` です。
+- `fit-content({{cssxref("&lt;length-percentage&gt;")}})`
+  - : 利用可能な空白を指定された引数で置き換えた `fit-content` 式を使用します。すなわち、 `min(max-content, max(min-content, 引数))` です。
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
+
+### 要素の最小幅を設定
 
-<pre class="brush:css;">table { min-width: 75%; }
+```css
+table { min-width: 75%; }
 
 form { min-width: 0; }
-</pre>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Sizing', '#width-height-keywords', 'min-width')}}</td>
-   <td>{{Spec2('CSS4 Sizing')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'min-width')}}</td>
-   <td>{{Spec2('CSS3 Sizing')}}</td>
-   <td>キーワード <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> を追加。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Flexbox', '#min-size-auto', 'min-width')}}</td>
-   <td>{{Spec2('CSS3 Flexbox')}}</td>
-   <td>キーワード <code>auto</code> を追加し、初期値として使用する</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visudet.html#min-max-widths', 'min-width')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.min-width")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{Cssxref("width")}}, {{Cssxref("max-width")}}</li>
- <li><a href="/ja/docs/Web/CSS/box_model" title="CSS/box_model">ボックスモデル</a>, {{Cssxref("box-sizing")}}</li>
-</ul>
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{Cssxref("width")}}, {{Cssxref("max-width")}}
+- [ボックスモデル](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model), {{Cssxref("box-sizing")}}
diff --git a/files/ja/web/css/width/index.md b/files/ja/web/css/width/index.md
index 322e08849b..96b073a1f7 100644
--- a/files/ja/web/css/width/index.md
+++ b/files/ja/web/css/width/index.md
@@ -3,33 +3,32 @@ title: width
 slug: Web/CSS/width
 tags:
   - CSS
-  - CSS Property
-  - Layout
-  - Reference
-  - dimensions
+  - CSS プロパティ
+  - レイアウト
+  - リファレンス
+  - 寸法
   - recipe:css-property
   - size
   - width
 browser-compat: css.properties.width
 translation_of: Web/CSS/width
 ---
-<p>{{CSSRef}}</p>
+{{CSSRef}}
 
-<p><strong><code>width</code></strong> は CSS のプロパティで、要素の幅を設定します。既定では、このプロパティは<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">コンテンツ領域</a>の幅を設定しますが、 {{cssxref("box-sizing")}} を <code>border-box</code> に設定すると、<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#border-area">境界領域</a>の幅を設定します。</p>
+**`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)の幅を設定します。
 
-<div>{{EmbedInteractiveExample("pages/css/width.html")}}</div>
+{{EmbedInteractiveExample("pages/css/width.html")}}
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+{{cssxref("min-width")}} および {{cssxref("max-width")}} プロパティは `width` を上書きします。
 
-<p>{{cssxref("min-width")}} および {{cssxref("max-width")}} プロパティは <code>width</code> を上書きします。</p>
+## 構文
 
-<h2 id="Syntax">構文</h2>
-
-<pre class="brush:css no-line-numbers">/* &lt;length&gt; 値 */
+```css
+/* <length> 値 */
 width: 300px;
 width: 25em;
 
-/* &lt;percentage&gt; 値 */
+/* <percentage> 値 */
 width: 75%;
 
 /* キーワード値 */
@@ -43,57 +42,58 @@ width: inherit;
 width: initial;
 width: revert;
 width: unset;
-</pre>
+```
 
-<h3 id="Values">値</h3>
+### 値
 
-<dl>
- <dt>{{cssxref("&lt;length&gt;")}}</dt>
- <dd>絶対的な値で幅を定義します。</dd>
- <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
- <dd>親となる包含ブロックの幅に対するパーセント値で定義します。</dd>
- <dt><code>auto</code></dt>
- <dd>指定された要素の幅をブラウザーが計算して決めます。</dd>
- <dt><code>max-content</code></dt>
- <dd>望ましい固有の幅です。</dd>
- <dt><code>min-content</code></dt>
- <dd>最小の固有の幅です。</dd>
- <dt><code>fit-content({{cssxref("&lt;length-percentage&gt;")}})</code></dt>
- <dd>利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち <code>min(max-content, max(min-content, &lt;length-percentage&gt;))</code> です。</dd>
-</dl>
+- {{cssxref("&lt;length&gt;")}}
+  - : 絶対的な値で幅を定義します。
+- {{cssxref("&lt;percentage&gt;")}}
+  - : 親となる包含ブロックの幅に対するパーセント値で定義します。
+- `auto`
+  - : 指定された要素の幅をブラウザーが計算して決めます。
+- `max-content`
+  - : 望ましい固有の幅です。
+- `min-content`
+  - : 最小の固有の幅です。
+- `fit-content({{cssxref("&lt;length-percentage&gt;")}})`
+  - : 利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち `min(max-content, max(min-content, <length-percentage>))` です。
 
-<h2 id="Accessibility_concerns">アクセシビリティの考慮</h2>
+## アクセシビリティの考慮
 
-<p>ページを拡大してテキストサイズを大きくしたときに、 <code>width</code> を設定した要素が切り捨てられたり、他のコンテンツが見えなくなったりしないようにしてください。</p>
+ページを拡大してテキストサイズを大きくしたときに、 `width` を設定した要素が切り捨てられたり、他のコンテンツが見えなくなったりしないようにしてください。
 
-<ul>
- <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN WCAG の理解、 ガイドライン 1.4 の説明</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li>
-</ul>
+- [MDN WCAG の理解、 ガイドライン 1.4 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
+- [Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)
 
-<h2 id="Formal_definition">公式定義</h2>
+## 公式定義
 
-<p>{{CSSInfo}}</p>
+{{CSSInfo}}
 
-<h2 id="Formal_syntax">形式文法</h2>
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples">例</h2>
+## 例
 
 <h3 id="Default_width">既定の幅</h3>
 
-<pre class="brush:css">p.goldie {
+```css
+p.goldie {
   background: gold;
-}</pre>
+}
+```
 
-<pre class="brush:html">&lt;p class="goldie"&gt;The Mozilla community produces a lot of great software.&lt;/p&gt;</pre>
+```html
+<p class="goldie">The Mozilla community produces a lot of great software.</p>
+```
 
-<p>{{EmbedLiveSample('Default_width', '500px', '64px')}}</p>
+{{EmbedLiveSample('Default_width', '500px', '64px')}}
 
 <h3 id="Pixels_and_ems">ピクセル数と em 単位</h3>
 
-<pre class="brush: css">.px_length {
+```css
+.px_length {
   width: 200px;
   background-color: red;
   color: white;
@@ -106,96 +106,78 @@ width: unset;
   color: red;
   border: 1px solid black;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="px_length"&gt;Width measured in px&lt;/div&gt;
-&lt;div class="em_length"&gt;Width measured in em&lt;/div&gt;</pre>
+```html
+<div class="px_length">Width measured in px</div>
+<div class="em_length">Width measured in em</div>
+```
 
-<p>{{EmbedLiveSample('Pixels_and_ems', '500px', '64px')}}</p>
+{{EmbedLiveSample('Pixels_and_ems', '500px', '64px')}}
 
 <h3 id="Percentage">パーセント値</h3>
 
-<pre class="brush: css">.percent {
+```css
+.percent {
   width: 20%;
   background-color: silver;
   border: 1px solid red;
-}</pre>
+}
+```
 
-<pre class="brush: html">&lt;div class="percent"&gt;Width in percentage&lt;/div&gt;</pre>
+```html
+<div class="percent">Width in percentage</div>
+```
 
-<p>{{EmbedLiveSample('Percentage', '500px', '64px')}}</p>
+{{EmbedLiveSample('Percentage', '500px', '64px')}}
 
-<h3 id="max-content">max-content</h3>
+### max-content
 
-<pre class="brush:css;">p.maxgreen {
+```css
+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;
-}</pre>
+}
+```
 
-<pre class="brush:html">&lt;p class="maxgreen"&gt;The Mozilla community produces a lot of great software.&lt;/p&gt;</pre>
+```html
+<p class="maxgreen">The Mozilla community produces a lot of great software.</p>
+```
 
-<p>{{EmbedLiveSample('max-content', '500px', '64px')}}</p>
+{{EmbedLiveSample('max-content', '500px', '64px')}}
 
-<h3 id="min-content">min-content</h3>
+### min-content
 
-<pre class="brush:css">p.minblue {
+```css
+p.minblue {
   background: lightblue;
   width: -moz-min-content;    /* Firefox */
   width: -webkit-min-content; /* Chrome */
   width: min-content;
-}</pre>
-
-<pre class="brush:html">&lt;p class="minblue"&gt;The Mozilla community produces a lot of great software.&lt;/p&gt;</pre>
-
-<p>{{EmbedLiveSample('min-content', '500px', '155px')}}</p>
-
-<h2 id="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS4 Sizing', '#width-height-keywords', 'width')}}</td>
-   <td>{{Spec2('CSS4 Sizing')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}</td>
-   <td>{{Spec2('CSS3 Sizing')}}</td>
-   <td>キーワード <code>max-content</code>, <code>min-content</code>, <code>fit-content</code> を追加</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>適用対象の要素を詳しく記載</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#width', 'width')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">ボックスモデル</a></li>
- <li>{{cssxref("height")}}</li>
- <li>{{cssxref("box-sizing")}}</li>
- <li>{{cssxref("min-width")}}, {{cssxref("max-width")}}</li>
- <li>対応する論理的プロパティ: {{cssxref("block-size")}}, {{cssxref("inline-size")}}</li>
-</ul>
+}
+```
+
+```html
+<p class="minblue">The Mozilla community produces a lot of great software.</p>
+```
+
+{{EmbedLiveSample('min-content', '500px', '155px')}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ボックスモデル](/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")}}