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/fit-content()/index.md | 146 ++++++++++++++++---------------- 1 file changed, 71 insertions(+), 75 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 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() --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`fit-content()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、指定された寸法を `min(max-content, max(min-content, 引数))` の式に従って有効な範囲の寸法に収めます。 -
{{EmbedInteractiveExample("pages/css/function-fit-content.html")}}
+{{EmbedInteractiveExample("pages/css/function-fit-content.html")}} - +この関数は [CSS グリッド](/ja/docs/Web/CSS/CSS_Grid_Layout)のプロパティにおいて、トラックの寸法を `max-content` で定義された最大寸法と `auto` で定義された最小寸法との間で、 `auto` と似た方法 (すなわち [`minmax(auto, max-content)`](/ja/docs/Web/CSS/minmax())) で計算しますが、 `auto` の最小値よりも大きい場合は*引数*がトラックの寸法になるという点が異なります。 -

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

+`max-content` および `auto` キーワードについての詳細は、 {{cssxref("grid-template-columns")}} ページを参照してください。 -

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

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

構文

+## 構文 -

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

+引数として `` または `` を受け付ける関数です。 -
/* <length> 値 */
+```css
+/*  値 */
 fit-content(200px)
 fit-content(5cm)
 fit-content(30vw)
 fit-content(100ch)
 
-/* <percentage> 値 */
+/*  値 */
 fit-content(40%)
-
+``` + +### 値 -

値

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

形式文法

+ グリッドプロパティでは、行トラックにおける列内のグリッドコンテナーのインライン方向の寸法およびグリッドコンテナーのブロック方向の寸法の相対値です。それ以外では、書字方向に応じてレイアウトボックスの有効なインライン方向の寸法またはブロック方向の寸法に対する相対値になります。 -{{csssyntax}} +## 例 -

例

+

グリッドカラムの大きさを fit-content で指定

-

CSS

+#### HTML -
#container {
+```html
+

+  
Item as wide as the content.

+  

+    Item with more text in it. Because the contents of it are
+    wider than the maximum width, it is clamped at 300 pixels.
+  

+  
Flexible item

+

+```
+
+#### 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 > div {
+#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")}}

+{{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)_ -- cgit v1.2.3-54-g00ecf