From 6d0dda3295c6f3ffc906e64b9706dcdb10a731f8 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 16 Nov 2021 00:43:26 +0900 Subject: fit-content() を更新準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/fit-content/index.md | 144 ++++++++++++---------------------- 1 file changed, 51 insertions(+), 93 deletions(-) (limited to 'files/ja/web/css/fit-content/index.md') diff --git a/files/ja/web/css/fit-content/index.md b/files/ja/web/css/fit-content/index.md index 7660b4d8c2..79b6973c55 100644 --- a/files/ja/web/css/fit-content/index.md +++ b/files/ja/web/css/fit-content/index.md @@ -1,117 +1,75 @@ --- -title: fit-content() +title: fit-content slug: Web/CSS/fit-content tags: - CSS - - CSS グリッド - - CSS 関数 - - Experimental + - Keyword - Reference - Web - - ウェブ - - レイアウト -translation_of: Web/CSS/fit-content + - fit-content +browser-compat: css.properties.width.fit-content --- -
{{CSSRef}}
+{{CSSRef}} -

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

+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")}}. -
{{EmbedInteractiveExample("pages/css/function-fit-content.html")}}
+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. - +> **Note:** The CSS Sizing specification also defines the {{cssxref("fit-content()", "fit-content()")}} function. This page details the keyword. -

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

+## Syntax -

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

+```css +width: fit-content +block-size: fit-content +``` -

構文

+## Examples -

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

+### Using fit-content for box sizing -
/* <length> 値 */
-fit-content(200px)
-fit-content(5cm)
-fit-content(30vw)
-fit-content(100ch)
+#### HTML
 
-/* <percentage> 値 */
-fit-content(40%)
-
+```html +
+
Item
+
Item with more text in it.
+
Item with more text in it, hopefully we have added enough text so the text will start to wrap.
+
+``` -

値

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

形式文法

+.item { +  width: -moz-fit-content; +  width: fit-content; + background-color: #8ca0ff; + padding: 5px; + margin-bottom: 1em; +} +``` -{{csssyntax}} +#### Result -

例

+{{EmbedLiveSample("Using_fit-content_for_box_sizing", "100%", 200)}} -

CSS

+## Specifications -
#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;
-}
+{{Specifications}}
 
-#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")}}

+## Browser compatibility + +### Supported for width (and other sizing properties) + +{{Compat}} + +## See also + +- Related sizing keywords: {{cssxref("min-content")}}, {{cssxref("max-content")}} -- cgit v1.2.3-54-g00ecf