From b878d4a1cf8abdbaef200f64391ed6af2d80c2a6 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 16 Nov 2021 10:16:30 +0900 Subject: CSS Box Sizing 関連のリファレンスを更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/14 時点の英語版に同期 --- files/ja/web/css/min-height/index.md | 129 ++++++++++++++--------------------- 1 file changed, 51 insertions(+), 78 deletions(-) (limited to 'files/ja/web/css/min-height') 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 --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`min-height`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の最小幅を設定します。これは {{cssxref("height")}} プロパティの[使用値](/ja/docs/Web/CSS/used_value)が、`min-height` で指定した値を下回ることを防ぎます。 -
{{EmbedInteractiveExample("pages/css/min-height.html")}}
+{{EmbedInteractiveExample("pages/css/min-height.html")}} - +`min-height` の値が {{cssxref("max-height")}} および {{cssxref("height")}} の値より大きい場合は、`min-height` の値が要素の幅になります。 -

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

+## 構文 -

構文

- -
/* <length> 値 */
+```css
+/*  値 */
 min-height: 3.5em;
 
-/* <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;
-
+``` -

値

+### 値 -
-
{{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, 引数)) です。
-
+- {{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}}

+{{cssinfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 -

min-height の設定

+### min-height の設定 -
table { min-height: 75%; }
+```css
+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")}}

- -

関連情報

- - +``` + +## 仕様書 + +{{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")}} -- cgit v1.2.3-54-g00ecf