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/box-sizing/index.md | 2 +- files/ja/web/css/fit-content()/index.md | 146 +++++++++++----------- files/ja/web/css/fit-content/index.md | 31 ++--- files/ja/web/css/height/index.md | 200 ++++++++++++++----------------- files/ja/web/css/max-content/index.md | 118 ++++++++++++++++++ files/ja/web/css/max-height/index.md | 141 +++++++++------------- files/ja/web/css/max-width/index.md | 178 +++++++++++++-------------- files/ja/web/css/min-content/index.md | 106 ++++++++++++++++ files/ja/web/css/min-height/index.md | 129 ++++++++------------ files/ja/web/css/min-width/index.md | 143 ++++++++++------------ files/ja/web/css/width/index.md | 206 +++++++++++++++----------------- 11 files changed, 742 insertions(+), 658 deletions(-) create mode 100644 files/ja/web/css/max-content/index.md create mode 100644 files/ja/web/css/min-content/index.md (limited to 'files/ja/web') 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() --- -
{{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)_ 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 +

fit-content を使用してボックスの大きさを指定

#### 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 --- -
{{CSSRef}}
- -

height は CSS のプロパティで、要素の高さを指定します。既定では、このプロパティはコンテンツ領域の高さを定義します。しかし、 {{cssxref("box-sizing")}} が border-box に設定されていた場合は、 境界領域の高さを定義します。

+{{CSSRef}} -
{{EmbedInteractiveExample("pages/css/height.html")}}
+**`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)の高さを定義します。 - +{{EmbedInteractiveExample("pages/css/height.html")}} -

{{cssxref("min-height")}} 及び {{cssxref("max-height")}} プロパティは height を上書きします。

+{{cssxref("min-height")}} および {{cssxref("max-height")}} プロパティは `height` を上書きします。 -

構文

+## 構文 -
/* キーワード値 */
-height: auto;
-
-/* <length> 値 */
+```css
+/*  値 */
 height: 120px;
 height: 10em;
 
-/* <percentage> 値 */
+/*  値 */
 height: 75%;
 
+/* キーワード値 */
+height: max-content;
+height: min-content;
+height: fit-content(20em);
+height: auto;
+
 /* グローバル値 */
 height: inherit;
 height: initial;
+height: revert;
 height: unset;
-
- -

値

- -
-
{{cssxref("<length>")}}
-
絶対値で高さを定義します。
-
{{cssxref("<percentage>")}}
-
包含ブロックの高さのパーセントで高さを定義します。
-
auto
-
指定された要素の高さをブラウザーが計算して決めます。
-
max-content
-
本来の望ましい高さです。
-
min-content
-
本来の最小の高さです。
-
fit-content({{cssxref("<length-percentage>")}})
-
利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち min(max-content, max(min-content, )) です。
-
- -

形式文法

+``` + +### 値 + +- {{cssxref("<length>")}} + - : 絶対値で高さを定義します。 +- {{cssxref("<percentage>")}} + - : 包含ブロックの高さのパーセントで高さを定義します。 +- `auto` + - : 指定された要素の高さをブラウザーが計算して決めます。 +- `max-content` + - : 本来の望ましい高さです。 +- `min-content` + - : 本来の最小の高さです。 +- `fit-content({{cssxref("<length-percentage>")}})` + - : 利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち `min(max-content, max(min-content, ))` です。 + +## アクセシビリティの考慮 + +要素の `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}} -

例

+## 例 -

HTML

+

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

-
<div id="taller">50ピクセルの高さです。</div>
-<div id="shorter">25ピクセルの高さです。</div>
-<div id="parent">
-  <div id="child">
-    親の半分の高さです。
-  </div>
-</div>
-
+#### HTML -

CSS

+```html +
I'm 50 pixels tall.
+
I'm 25 pixels tall.
+
+
+ I'm half the height of my parent. +
+
+``` -
div {
+#### CSS
+
+```css
+div {
   width: 250px;
   margin-bottom: 5px;
   border: 2px solid blue;
@@ -101,65 +116,24 @@ height: unset;
   height: 50%;
   width: 75%;
 }
-
- -

結果

- -

{{EmbedLiveSample('Example', 'auto', 240)}}

- -

アクセシビリティの考慮事項

- -

テキストを大きくするためにページを拡大したとき、他のコンテンツを切り捨てたり邪魔したりしないように要素の height を設定するよう確認してください。

- - - -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Sizing', '#width-height-keywords', 'height')}}{{Spec2('CSS4 Sizing')}}
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'height')}}{{Spec2('CSS3 Sizing')}}キーワード max-content, min-content, available, fit-content の追加。
{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}{{Spec2('CSS2.1')}}{{cssxref("<length>")}} 値のサポートを追加。どの要素に用いるかを明記。
{{SpecName('CSS1', '#height', 'height')}}{{Spec2('CSS1')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -

{{Compat("css.properties.height")}}

- -

関連情報

- -
    -
  • ボックスモデル, {{cssxref("box-sizing")}}
    • -
  • {{cssxref("max-height")}}, {{cssxref("min-height")}}
    • -
  • 対応する論理的プロパティ: {{cssxref("block-size")}}, {{cssxref("inline-size")}}
    • -
+``` + +#### 結果 + +{{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; +``` + +## 例 + +

max-content をボックスの大きさに使用

+ +#### HTML + +```html +
+ 
Item
+
Item with more text in it which will overflow the fixed width box.
+
+``` + +#### 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)}} + +

max-content をグリッド列の大きさに使用

+ +#### HTML + +```html +
+ Item +
+ Item with more text in it. +
+ Flexible item +
+``` + +#### 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 --- -
{{CSSRef}}
+{{CSSRef}} -

max-height は CSS のプロパティで、要素の最大高を設定します。これは {{Cssxref("height")}} プロパティの使用値が、 max-height に指定した値を上回ることを防ぎます。

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

max-height は {{cssxref("height")}} を上書きしますが、 {{cssxref("min-height")}} は max-height を上書きします。

+## 構文 -

構文

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

値

+### 値 -
-
{{cssxref("<length>")}}
-
max-height を絶対的な値で定義します。
-
{{cssxref("<percentage>")}}
-
max-height を包含ブロックの高さに対するパーセント値で定義します。
-
none
-
ボックスの寸法を制限しません。
-
max-content
-
内容物が推奨する max-height です。
-
min-content
-
内容物の最小の max-height です。
-
fit-content({{cssxref("<length-percentage>")}})
-
利用可能な空白を指定された引数で置き換えた fit-content 式を使用します。すなわち、 min(max-content, max(min-content, 引数)) です。
-
+- {{cssxref("<length>")}} + - : `max-height` を絶対的な値で定義します。 +- {{cssxref("<percentage>")}} + - : `max-height` を包含ブロックの高さに対するパーセント値で定義します。 +- `none` + - : ボックスの寸法を制限しません。 +- `max-content` + - : 内容物が推奨する `max-height` です。 +- `min-content` + - : 内容物の最小の `max-height` です。 +- `fit-content({{cssxref("<length-percentage>")}})` + - : 利用可能な空白を指定された引数で置き換えた `fit-content` 式を使用します。すなわち、 `min(max-content, max(min-content, 引数))` です。 -

アクセシビリティの考慮

+## アクセシビリティの考慮 -

テキストを大きくするためにページを拡大したときに、 max-height を設定した要素が切り取られたり、他のコンテンツを覆い隠したりしないことを確認してください。

+テキストを大きくするためにページを拡大したときに、 `max-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}}

+{{cssinfo}} -

形式文法

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

例

+## 例 -

パーセント値とキーワード値を用いた max-height の設定

+### パーセント値とキーワード値を用いた max-height の設定 -
table { max-height: 75%; }
+```css
+table { max-height: 75%; }
 
 form { max-height: none; }
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Sizing', '#width-height-keywords', 'max-height')}}{{Spec2('CSS4 Sizing')}}
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'max-height')}}{{Spec2('CSS3 Sizing')}}キーワード max-content, min-content, fit-content を追加。
{{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'max-height')}}{{ Spec2('CSS2.1') }}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.max-height")}}

- -

関連情報

- -
    -
  • ボックスモデル、 {{cssxref("box-sizing")}}
    • -
  • {{Cssxref("height")}}, {{Cssxref("min-height")}}
    • -
  • 対応する論理プロパティ: {{cssxref("max-inline-size")}}, {{cssxref("max-block-size")}}
    • -
+``` + +## 仕様書 + +{{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 --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`max-width`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の最大幅を設定します。これは {{Cssxref("width")}} プロパティの[使用値](/ja/docs/Web/CSS/used_value)が、 `max-width` で指定した値を上回ることを防ぎます。 -
{{EmbedInteractiveExample("pages/css/max-width.html")}}
+{{EmbedInteractiveExample("pages/css/max-width.html")}} - +`max-width` は {{cssxref("width")}} を上書きしますが、 {{cssxref("min-width")}} は `max-width` を上書きします。 -

max-width は {{cssxref("width")}} を上書きしますが、 {{cssxref("min-width")}} は max-width を上書きします。

+## 構文 -

構文

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

値

- -
-
{{cssxref("<length>")}}
-
max-width を絶対的な値で定義します。
-
{{cssxref("<percentage>")}}
-
max-width を包含ブロックの幅に対するパーセント値で定義します。
-
auto
-
ブラウザーは指定された要素の max-width を計算して選択します。
-
none
-
ボックスの寸法を制限しません。
-
max-content
-
内容物が推奨する max-width です。
-
min-content
-
内容物の最小の max-width です。
-
fit-content({{cssxref("<length-percentage>")}})
-
利用可能な空白を指定された引数で置き換えた fit-content 式を使用します。すなわち、 min(max-content, max(min-content, 引数)) です。
-
- -

形式文法

+``` + +### 値 + +- {{cssxref("<length>")}} + - : `max-width` を絶対的な値で定義します。 +- {{cssxref("<percentage>")}} + - : `max-width` を包含ブロックの幅に対するパーセント値で定義します。 +- `none` + - : ボックスの寸法を制限しません。 +- `max-content` + - : 内容物が推奨する `max-width` です。 +- `min-content` + - : 内容物の最小の `max-width` です。 +- `fit-content({{cssxref("<length-percentage>")}})` + - : 利用可能な空白を指定された引数で置き換えた `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}} -

例

+## 例 + +

最大幅をピクセル単位で設定

+ +この例では、 "child" の幅が 150 ピクセルか "parent" の幅のどちらか小さい方になります。 -

この例では、 "child" の幅が150ピクセルか "parent" の幅のどちらか小さい方になります。

+#### HTML -
-
<div id="parent">
-  <div id="child">
+```html
+

+  

     Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
-  </div>
-</div>
-
+
+ +``` + +#### CSS -
#parent {
+```css
+#parent {
   background: lightblue;
   width: 300px;
 }
@@ -83,58 +105,22 @@ max-width: unset;
   width: 100%;
   max-width: 150px;
 }
-
- +``` + +#### 結果 + +{{EmbedLiveSample("Setting_max_width_in_pixels", 350, 100)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 -

{{EmbedLiveSample("basic-max-width-demo", 350, 100)}}

- -

アクセシビリティの考慮事項

- -

ページを拡大縮小して文字サイズを拡大した際に、 max-width を設定した要素が他のコンテンツを切り捨てたり妨げたりしないことを確認してください。

- - - -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Sizing', '#width-height-keywords', 'max-width')}}{{Spec2('CSS4 Sizing')}}
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'max-width')}}{{Spec2('CSS3 Sizing')}}キーワード max-content, min-content, fit-content, fill-available を追加。
{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width') }}{{ Spec2('CSS2.1') }}初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -

{{Compat("css.properties.max-width")}}

- -

関連情報

- -
    -
  • The box model, {{cssxref("box-sizing")}}
    • -
  • {{cssxref("width")}}, {{cssxref("min-width")}}
    • -
+- [ボックスモデル](/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; +``` + +## 例 + +

min-content をボックスの大きさに使用

+ +#### HTML + +```html +
Item
+
Item with more text in it.
+``` + +#### CSS + +```css +.item { +  width: min-content; + background-color: #8ca0ff; + padding: 5px; + margin-bottom: 1em; +} +``` + +#### 結果 + +{{EmbedLiveSample("Using_min-content_for_box_sizing", "100%", 200)}} + +

min-content をグリッド列の大きさに使用

+ +#### HTML + +```html +
+ Item +
+ Item with more text in it. +
+ Flexible item +
+``` + +#### 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 --- -
{{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")}} 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 --- -
{{CSSRef}}
+{{CSSRef}} -

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

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

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

+## 構文 -

構文

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

値

- -
-
{{cssxref("<length>")}}
-
min-width を絶対的な値で定義します。
-
{{cssxref("<percentage>")}}
-
min-width を包含ブロックの幅に対するパーセント値で定義します。
-
auto
-
ブラウザーが指定された要素の min-width を計算して選択します。
-
none
-
ボックスの寸法を制限しません。
-
max-content
-
内容物が推奨する min-width です。
-
min-content
-
内容物の最小の min-width です。
-
fit-content({{cssxref("<length-percentage>")}})
-
利用可能な空白を指定された引数で置き換えた fit-content 式を使用します。すなわち、 min(max-content, max(min-content, 引数)) です。
-
- -

形式文法

+``` + +### 値 + +- {{cssxref("<length>")}} + - : `min-width` を絶対的な値で定義します。 +- {{cssxref("<percentage>")}} + - : `min-width` を包含ブロックの幅に対するパーセント値で定義します。 +- `auto` + - : ブラウザーが指定された要素の `min-width` を計算して選択します。 +- `max-content` + - : 内容物が推奨する `min-width` です。 +- `min-content` + - : 内容物の最小の `min-width` です。 +- `fit-content({{cssxref("<length-percentage>")}})` + - : 利用可能な空白を指定された引数で置き換えた `fit-content` 式を使用します。すなわち、 `min(max-content, max(min-content, 引数))` です。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 + +### 要素の最小幅を設定 -
table { min-width: 75%; }
+```css
+table { min-width: 75%; }
 
 form { min-width: 0; }
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Sizing', '#width-height-keywords', 'min-width')}}{{Spec2('CSS4 Sizing')}}
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'min-width')}}{{Spec2('CSS3 Sizing')}}キーワード max-content, min-content, fit-content を追加。
{{SpecName('CSS3 Flexbox', '#min-size-auto', 'min-width')}}{{Spec2('CSS3 Flexbox')}}キーワード auto を追加し、初期値として使用する
{{SpecName('CSS2.1', 'visudet.html#min-max-widths', 'min-width')}}{{Spec2('CSS2.1')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -

{{Compat("css.properties.min-width")}}

- -

関連情報

- - +``` + +## 仕様書 + +{{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 --- -

{{CSSRef}}

+{{CSSRef}} -

width は CSS のプロパティで、要素の幅を設定します。既定では、このプロパティはコンテンツ領域の幅を設定しますが、 {{cssxref("box-sizing")}} を border-box に設定すると、境界領域の幅を設定します。

+**`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)の幅を設定します。 -
{{EmbedInteractiveExample("pages/css/width.html")}}
+{{EmbedInteractiveExample("pages/css/width.html")}} - +{{cssxref("min-width")}} および {{cssxref("max-width")}} プロパティは `width` を上書きします。 -

{{cssxref("min-width")}} および {{cssxref("max-width")}} プロパティは width を上書きします。

+## 構文 -

構文

- -
/* <length> 値 */
+```css
+/*  値 */
 width: 300px;
 width: 25em;
 
-/* <percentage> 値 */
+/*  値 */
 width: 75%;
 
 /* キーワード値 */
@@ -43,57 +42,58 @@ width: inherit;
 width: initial;
 width: revert;
 width: unset;
-
+``` -

値

+### 値 -
-
{{cssxref("<length>")}}
-
絶対的な値で幅を定義します。
-
{{cssxref("<percentage>")}}
-
親となる包含ブロックの幅に対するパーセント値で定義します。
-
auto
-
指定された要素の幅をブラウザーが計算して決めます。
-
max-content
-
望ましい固有の幅です。
-
min-content
-
最小の固有の幅です。
-
fit-content({{cssxref("<length-percentage>")}})
-
利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち min(max-content, max(min-content, <length-percentage>)) です。
-
+- {{cssxref("<length>")}} + - : 絶対的な値で幅を定義します。 +- {{cssxref("<percentage>")}} + - : 親となる包含ブロックの幅に対するパーセント値で定義します。 +- `auto` + - : 指定された要素の幅をブラウザーが計算して決めます。 +- `max-content` + - : 望ましい固有の幅です。 +- `min-content` + - : 最小の固有の幅です。 +- `fit-content({{cssxref("<length-percentage>")}})` + - : 利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち `min(max-content, max(min-content, ))` です。 -

アクセシビリティの考慮

+## アクセシビリティの考慮 -

ページを拡大してテキストサイズを大きくしたときに、 width を設定した要素が切り捨てられたり、他のコンテンツが見えなくなったりしないようにしてください。

+ページを拡大してテキストサイズを大きくしたときに、 `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}}

+{{CSSInfo}} -

形式文法

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

例

+## 例

既定の幅

-
p.goldie {
+```css
+p.goldie {
   background: gold;
-}
+} +``` -
<p class="goldie">The Mozilla community produces a lot of great software.</p>
+```html +

The Mozilla community produces a lot of great software.

+``` -

{{EmbedLiveSample('Default_width', '500px', '64px')}}

+{{EmbedLiveSample('Default_width', '500px', '64px')}}

ピクセル数と em 単位

-
.px_length {
+```css
+.px_length {
   width: 200px;
   background-color: red;
   color: white;
@@ -106,96 +106,78 @@ width: unset;
   color: red;
   border: 1px solid black;
 }
-
+``` -
<div class="px_length">Width measured in px</div>
-<div class="em_length">Width measured in em</div>
+```html +
Width measured in px
+
Width measured in em
+``` -

{{EmbedLiveSample('Pixels_and_ems', '500px', '64px')}}

+{{EmbedLiveSample('Pixels_and_ems', '500px', '64px')}}

パーセント値

-
.percent {
+```css
+.percent {
   width: 20%;
   background-color: silver;
   border: 1px solid red;
-}
+} +``` -
<div class="percent">Width in percentage</div>
+```html +
Width in percentage
+``` -

{{EmbedLiveSample('Percentage', '500px', '64px')}}

+{{EmbedLiveSample('Percentage', '500px', '64px')}} -

max-content

+### max-content -
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;
-}
+} +``` -
<p class="maxgreen">The Mozilla community produces a lot of great software.</p>
+```html +

The Mozilla community produces a lot of great software.

+``` -

{{EmbedLiveSample('max-content', '500px', '64px')}}

+{{EmbedLiveSample('max-content', '500px', '64px')}} -

min-content

+### min-content -
p.minblue {
+```css
+p.minblue {
   background: lightblue;
   width: -moz-min-content;    /* Firefox */
   width: -webkit-min-content; /* Chrome */
   width: min-content;
-}
- -
<p class="minblue">The Mozilla community produces a lot of great software.</p>
- -

{{EmbedLiveSample('min-content', '500px', '155px')}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Sizing', '#width-height-keywords', 'width')}}{{Spec2('CSS4 Sizing')}}
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}{{Spec2('CSS3 Sizing')}}キーワード max-content, min-content, fit-content を追加
{{SpecName('CSS2.1', 'visudet.html#the-width-property', 'width')}}{{Spec2('CSS2.1')}}適用対象の要素を詳しく記載
{{SpecName('CSS1', '#width', 'width')}}{{Spec2('CSS1')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat}}

- -

関連情報

- -
    -
  • ボックスモデル
    • -
  • {{cssxref("height")}}
    • -
  • {{cssxref("box-sizing")}}
    • -
  • {{cssxref("min-width")}}, {{cssxref("max-width")}}
    • -
  • 対応する論理的プロパティ: {{cssxref("block-size")}}, {{cssxref("inline-size")}}
    • -
+} +``` + +```html +

The Mozilla community produces a lot of great software.

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