From a0316dd2c57164e53651f4cb8c8de50120e72095 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 23 Nov 2021 23:35:37 +0900 Subject: CSS データ型に関する文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/23 時点の英語版に同期 --- files/ja/web/css/display-box/index.md | 160 +++++++++---------- files/ja/web/css/display-inside/index.md | 153 +++++++++--------- files/ja/web/css/display-internal/index.md | 181 ++++++++++----------- files/ja/web/css/display-legacy/index.md | 151 +++++++++--------- files/ja/web/css/display-listitem/index.md | 68 ++++---- files/ja/web/css/display-outside/index.md | 122 ++++++-------- files/ja/web/css/filter-function/index.md | 245 ++++++++++++++++++++++------- files/ja/web/css/shape/index.md | 97 +++++------- 8 files changed, 630 insertions(+), 547 deletions(-) (limited to 'files') diff --git a/files/ja/web/css/display-box/index.md b/files/ja/web/css/display-box/index.md index 6211d9b8d8..ecd171bedb 100644 --- a/files/ja/web/css/display-box/index.md +++ b/files/ja/web/css/display-box/index.md @@ -5,121 +5,111 @@ tags: - CSS - CSS データ型 - CSS 表示 - - Reference + - データ型 + - リファレンス - display-box translation_of: Web/CSS/display-box --- -
{{CSSRef}}
+{{CSSRef}} -

これらのキーワードは、要素が表示ボックスを作るかどうかを定義します。

+これらのキーワードは、要素が表示ボックスを作るかどうかを定義します。 -

構文

+## 構文 -

有効な <display-box> の値は以下のとおりです。

+有効な `` の値は以下のとおりです。 -
-
contents {{Experimental_Inline}}
-
これらの要素は自分自身のために特定のボックスを生成しません。擬似ボックスやその子ボックスで置き換えられます。なお、 CSS Display Level 3 仕様書では、 contents の値が「普通ではない要素」 — 置換要素のように、 CSS ボックスの純粋な概念に従って表示されない要素に影響する方法を定義しています。詳しくは Appendix B: Effects of display: contents on Unusual Elements を参照してください。
-
- ブラウザーのバグにより、現在のところ、この値を使用するとアクセシビリティツリーから要素を削除します。 — 読み上げソフトは中に何があるかを見ません。詳しくは後述のアクセシビリティの考慮の節をご覧ください。
-
none
-
要素の表示を無くし、レイアウトに影響を与えなくなります (文書は要素が存在しないかのように表示されます)。すべての子孫要素も表示がなくなります。
- 要素が通常占める空間を確保しつつ、実際には何も表示しないようにしたいのであれば、代わりに {{CSSxRef("visibility")}} プロパティを使用してください。
-
+- `contents` -

アクセシビリティの考慮

+ - : これらの要素は自身のために特定のボックスを生成しません。擬似ボックスやその子ボックスで置き換えられます。なお、 CSS Display Level 3 仕様書では、 `contents` の値が「普通ではない要素」 — 置換要素のように、 CSS ボックスの純粋な概念に従って表示されない要素に影響する方法を定義しています。詳しくは [Appendix B: Effects of display: contents on Unusual Elements](https://drafts.csswg.org/css-display/#unbox) を参照してください。 -

多くのブラウザーの現在の実装では、アクセシビリティツリーから display の値が contents である要素を削除します。これにより、その要素は — また、一部の版のブラウザーではその子孫要素も — 読み上げ技術で読み上げられなくなります。これは CSSWG 仕様書によれば、正しくない動作です。

+ _ブラウザーのバグにより、現在のところ、この値を使用するとアクセシビリティツリーから要素を削除します。 — 読み上げソフトは中に何があるかを見ません。詳しくは後述の[アクセシビリティの考慮](#アクセシビリティの考慮)の節をご覧ください。_ +- `none` + - : 要素の表示を無くし、レイアウトに影響を与えなくなります (文書は要素が存在しないかのように表示されます)。すべての子孫要素も表示がなくなります。 + 要素が通常占める空間を確保しつつ、実際には何も表示しないようにしたいのであれば、代わりに {{CSSxRef("visibility")}} プロパティを使用してください。 - +## アクセシビリティの考慮 -

例

+多くのブラウザーの現在の実装では、[アクセシビリティツリー](/ja/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis)から `display` の値が `contents` である要素を削除します。これにより、その要素は — また、一部の版のブラウザーではその子孫要素も — 読み上げ技術で読み上げられなくなります。これは [CSSWG 仕様書](https://drafts.csswg.org/css-display/#the-display-properties)によれば、正しくない動作です。 -

最初の例では、 secret クラスの段落に display: none を設定します。ボックスとその内容は表示されなくなります。

+- [More accessible markup with display: contents | Hidde de Vries](https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents) +- [Display: Contents Is Not a CSS Reset | Adrian Roselli](https://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html) -

display: none

+## 例 -

HTML

+最初の例では、 secret クラスの段落に `display: none` を設定します。ボックスとその内容は表示されなくなります。 -
<p>Visible text</p>
-<p class="secret">Invisible text</p>
+### display: none -

CSS

+#### HTML -
p.secret {
+```html
+
Visible text

+
Invisible text

+```
+
+#### CSS
+
+```css
+p.secret {
   display: none;
-}
+} +``` -

結果

+#### 結果 -

{{EmbedLiveSample("display_none", "100%", 60)}}

+{{EmbedLiveSample("display_none", "100%", 60)}} -

display: contents

+### display: contents -

この例では、外側の {{htmlelement("div")}} が2ピクセルの赤い境界線と 300px の幅を持っています。しかし、 display: contents も指定されているので、この <div> は表示されず、境界線や幅は適用されなくなり、子要素は親要素が存在しなかったかのように表示されます。

+この例では、外側の {{htmlelement("div")}} が 2 ピクセルの赤い境界線と 300px の幅を持っています。しかし、 `display: contents` も指定されているので、この `
` は表示されず、境界線や幅は適用されなくなり、子要素は親要素が存在しなかったかのように表示されます。 -

HTML

+#### HTML -
<div class="outer">
-  <div>Inner div.</div>
-</div>
-
+```html +
+
Inner div.
+
+``` -

CSS

+#### CSS -
.outer {
+```css
+.outer {
   border: 2px solid red;
   width: 300px;
   display: contents;
 }
 
-.outer > div {
+.outer > div {
   border: 1px solid green;
 }
-
- -

結果

- -

{{EmbedLiveSample("display_contents", 300, 60)}}

- -

仕様書

- - - - - - - - - - - - - - -
仕様書状態
{{SpecName('CSS3 Display', '#typedef-display-box', 'display-box')}}{{Spec2('CSS3 Display')}}
- -

ブラウザーの互換性

- -

contents の対応

- -

{{Compat("css.properties.display.contents", 10)}}

- -

関連情報

- - +``` + +#### 結果 + +{{EmbedLiveSample("display_contents", 300, 60)}} + +## 仕様書 + +| 仕様書 | 状態 | +| ---------------------------------------------------------------------------------------- | -------------------------------- | +| {{SpecName('CSS3 Display', '#typedef-display-box', 'display-box')}} | {{Spec2('CSS3 Display')}} | + +## ブラウザーの互換性 + +### contents の対応 + +{{Compat("css.properties.display.contents", 10)}} + +## 関連情報 + +- {{CSSxRef("display")}} + + - {{CSSxRef("<display-outside>")}} + - {{CSSxRef("<display-inside>")}} + - {{CSSxRef("<display-listitem>")}} + - {{CSSxRef("<display-internal>")}} + - {{CSSxRef("<display-legacy>")}} + +- [Display: Contents Is Not a CSS Reset | Adrian Roselli](https://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html) +- [More accessible markup with display: contents — hiddedevries.nl](https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents) diff --git a/files/ja/web/css/display-inside/index.md b/files/ja/web/css/display-inside/index.md index 955c133f66..148e83bbda 100644 --- a/files/ja/web/css/display-inside/index.md +++ b/files/ja/web/css/display-inside/index.md @@ -3,58 +3,59 @@ title: slug: Web/CSS/display-inside tags: - CSS + - CSS データ型 - CSS 表示 - - Reference - - display + - データ型 + - リファレンス - display-inside translation_of: Web/CSS/display-inside --- -
{{CSSRef}}
- -

以下のキーワードは、要素の内部の {{CSSxRef("display")}} 種別を指定し、これは要素 (置換要素ではないものとする) の内容物をレイアウトする整形コンテキストの種類を定義します。これらのキーワードは display プロパティの値として使用され、単一のキーワードとしては伝統的な目的に、または Level 3 仕様書では {{CSSxRef("<display-outside>")}} のキーワードと共に使用されます。

- -

構文

- -

有効な <display-inside> の値は以下の通りです。

- -
-
flow {{Experimental_Inline}}
-
要素は、フローレイアウト (ブロックおよびインラインのレイアウト) を使用して、内容物をレイアウトします。 -

外部表示種別が inline または run-in であり、またブロックまたはインラインの整形コンテキストに関係する場合は、インラインボックスを生成します。そうでない場合は、ブロックコンテナーボックスを生成します。

- -

ほかのプロパティ ({{cssxref("position")}}, {{cssxref("float")}}, {{cssxref("overflow")}} など) の値や、要素自体がブロックまたはインラインの整形コンテキストに関係するかによって、新たなブロック整形コンテキスト (BFC) を生成する、または内容物が親の整形コンテキストに吸収されます。

-
-
flow-root
-
要素は、新たなブロック整形コンテキストを確立するブロック要素ボックスを生成し、整形ルートがある場所を定義します。
-
table
-
HTML の {{HTMLElement("table")}} 要素と同じように動作します。これは、ブロックレベルボックスを定義します。
-
flex
-
要素は、ブロック要素のように動作しつつ、そのコンテンツをフレックスボックスモデルに従ってレイアウトします。
-
grid
-
要素は、ブロック要素のように動作しつつ、そのコンテンツをグリッドモデルに従ってレイアウトします。
-
ruby {{Experimental_Inline}}
-
要素は、インライン要素のように動作しつつ、そのコンテンツをルビ (ruby) モデルに従ってレイアウトします。HTML の {{HTMLElement("ruby")}} 要素のように動作します。
-
- -
-

メモ: 二つの値の構文に対応しているブラウザーは、 display: flex や display: grid などの内部表示種別のみが指定されていると、外部表示種別を block に設定します。これで期待通りに動作します。例えば、ある要素を display: grid に指定した場合、そのボックスはブロックレベルボックスのグリッドコンテナーとして生成されることが期待されるでしょう。

-
+{{CSSRef}} + +以下のキーワードは、要素の内部の {{CSSxRef("display")}} 種別を指定し、これは要素 (置換要素ではないものとする) の内容物をレイアウトする整形コンテキストの種類を定義します。これらのキーワードは `display` プロパティの値として使用され、単一のキーワードとしては伝統的な目的に、または Level 3 仕様書では {{CSSxRef("<display-outside>")}} のキーワードと共に使用されます。 + +## 構文 + +有効な `` の値は以下の通りです。 + +- `flow` {{Experimental_Inline}} + + - : 要素は、フローレイアウト (ブロックおよびインラインのレイアウト) を使用して、内容物をレイアウトします。 + + 外部表示種別が `inline` または `run-in` であり、またブロックまたはインラインの整形コンテキストに関係する場合は、インラインボックスを生成します。そうでない場合は、ブロックコンテナーボックスを生成します。 + + ほかのプロパティ ({{cssxref("position")}}, {{cssxref("float")}}, {{cssxref("overflow")}} など) の値や、要素自体がブロックまたはインラインの整形コンテキストに関係するかによって、新たな[ブロック整形コンテキスト](/ja/docs/Web/Guide/CSS/Block_formatting_context) (BFC) を生成する、または内容物が親の整形コンテキストに吸収されます。 -

例

+- `flow-root` + - : 要素は、新たな[ブロック整形コンテキスト](/ja/docs/Web/Guide/CSS/Block_formatting_context)を確立するブロック要素ボックスを生成し、整形ルートがある場所を定義します。 +- `table` + - : HTML の {{HTMLElement("table")}} 要素と同じように動作します。これは、ブロックレベルボックスを定義します。 +- `flex` + - : 要素は、ブロック要素のように動作しつつ、そのコンテンツを[フレックスボックスモデル](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout)に従ってレイアウトします。 +- `grid` + - : 要素は、ブロック要素のように動作しつつ、そのコンテンツを[グリッドモデル](/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)に従ってレイアウトします。 +- `ruby` {{Experimental_Inline}} + - : 要素は、インライン要素のように動作しつつ、そのコンテンツをルビ (ruby) モデルに従ってレイアウトします。HTML の {{HTMLElement("ruby")}} 要素のように動作します。 -

この例では、親ボックスは display: flow-root となり、新しいブロック整形コンテキストを確立して浮動アイテムを含みます。

+> **Note:** 二つの値の構文に対応しているブラウザーは、 `display: flex` や `display: grid` などの内部表示種別のみが指定されていると、外部表示種別を `block` に設定します。これで期待通りに動作します。例えば、ある要素を `display: grid` に指定した場合、そのボックスはブロックレベルボックスのグリッドコンテナーとして生成されることが期待されるでしょう。 -

HTML

+

例

-
<div class="box">
-  <div class="float">I am a floated box!</div>
-  <p>I am content inside the container.</p>
-</div>
-
+この例では、親ボックスは `display: flow-root` となり、新しいブロック整形コンテキストを確立して浮動アイテムを含みます。 -

CSS

+### HTML -
.box {
+```html
+

+  
I am a floated box!

+  
I am content inside the container.

+

+```
+
+### CSS
+
+```css
+.box {
     background-color: rgb(224, 206, 247);
     border: 5px solid rebeccapurple;
     display: flow-root;
@@ -67,54 +68,56 @@ translation_of: Web/CSS/display-inside
     background-color: white;
     border:1px solid black;
     padding: 10px;
-}
+} +``` + +### 結果 + +{{EmbedLiveSample("Examples", "100%", 180)}} + +## 仕様書 + +| 仕様書 | 状態 | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | +| {{SpecName('CSS3 Display', '#typedef-display-inside', 'display-inside')}} | {{Spec2('CSS3 Display')}} | -

結果

+## ブラウザーの互換性 -

{{EmbedLiveSample("Example", "100%", 180)}}

+### 複数のキーワードの対応 -

ブラウザーの互換性

+{{Compat("css.properties.display.multi-keyword_values", 10)}} -

複数のキーワードの対応

+- Chromium のバグ: -

{{Compat("css.properties.display.multi-keyword_values", 10)}}

+### flow-root の対応 - +{{Compat("css.properties.display.flow-root", 10)}} -

flow-root の対応

+### table の対応 -

{{Compat("css.properties.display.flow-root", 10)}}

+{{Compat("css.properties.display.table_values", 10)}} -

table の対応

+### grid の対応 -

{{Compat("css.properties.display.table_values", 10)}}

+{{Compat("css.properties.display.grid", 10)}} -

grid の対応

+### flex の対応 -

{{Compat("css.properties.display.grid", 10)}}

+{{Compat("css.properties.display.flex", 10)}} -

flex の対応

+### ruby の対応 -

{{Compat("css.properties.display.flex", 10)}}

+{{Compat("css.properties.display.ruby_values", 10)}} -

ruby の対応

+## 関連情報 -

{{Compat("css.properties.display.ruby_values", 10)}}

+- {{CSSxRef("display")}} -

関連情報

+ - {{CSSxRef("<display-outside>")}} + - {{CSSxRef("<display-listitem>")}} + - {{CSSxRef("<display-internal>")}} + - {{CSSxRef("<display-box>")}} + - {{CSSxRef("<display-legacy>")}} - +- [フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) +- [グリッドレイアウトの基本概念](/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout) diff --git a/files/ja/web/css/display-internal/index.md b/files/ja/web/css/display-internal/index.md index 3c3d25c105..3187e6dffb 100644 --- a/files/ja/web/css/display-internal/index.md +++ b/files/ja/web/css/display-internal/index.md @@ -3,70 +3,71 @@ title: slug: Web/CSS/display-internal tags: - CSS - - CSS Data Type + - CSS データ型 - CSS Display - - Data Type - - Reference + - データ型 + - リファレンス - display-internal translation_of: Web/CSS/display-internal --- -
{{CSSRef}}
- -

table や ruby のような一部のレイアウトモデルでは、複雑な内部構造があり、様々なその子要素や子孫要素が担う様々な役割があります。このページではこれらを「内部の」表示値として定義し、特定のレイアウトモードでのみ意味を持ちます。

- -

構文

- -

有効な <display-internal> の値は次の通りです。

- -
-
table-row-group
-
これらの要素は HTML の {{HTMLElement("tbody")}} 要素のように動作します。
-
table-header-group
-
これらの要素は HTML の {{HTMLElement("thead")}} 要素のように動作します。
-
table-footer-group
-
これらの要素は HTML の {{HTMLElement("tfoot")}} 要素のように動作します。
-
table-row
-
これらの要素は HTML の {{HTMLElement("tr")}} 要素のように動作します。
-
table-cell
-
これらの要素は HTML の {{HTMLElement("td")}} 要素のように動作します。
-
table-column-group
-
これらの要素は HTML の {{HTMLElement("colgroup")}} 要素のように動作します。
-
table-column
-
これらの要素は HTML の {{HTMLElement("col")}} 要素のように動作します。
-
table-caption
-
これらの要素は HTML の {{HTMLElement("caption")}} 要素のように動作します。
-
ruby-base {{Experimental_Inline}}
-
これらの要素は HTML の {{HTMLElement("rb")}} 要素のように動作します。
-
ruby-text {{Experimental_Inline}}
-
これらの要素は HTML の {{HTMLElement("rt")}} 要素のように動作します。
-
ruby-base-container {{Experimental_Inline}}
-
これらの要素は無名のボックスとして生成された HTML の {{HTMLElement("rbc")}} 要素のように動作します。
-
ruby-text-container {{Experimental_Inline}}
-
これらの要素は HTML の {{HTMLElement("rtc")}} 要素のように動作します。
-
- -

例

- -

CSS テーブルの例

- -

以下の例は、 CSS テーブルレイアウトを使用した単純なフォームのレイアウトを紹介します。

- -

HTML

- -
<main>
-  <div>
-    <label for="name">Name</label>
-    <input type="text" id="name" name="name">
-  </div>
-  <div>
-    <label for="age">Age</label>
-    <input type="text" id="age" name="age">
-  </div>
-</main>
- -

CSS

- -
main {
+{{CSSRef}}
+
+`table` や `ruby` のような一部のレイアウトモデルでは、複雑な内部構造があり、様々なその子要素や子孫要素が担う様々な役割があります。このページではこれらを「内部の」表示値として定義し、特定のレイアウトモードでのみ意味を持ちます。
+
+## 構文
+
+有効な `` の値は次の通りです。
+
+- `table-row-group`
+  - : これらの要素は HTML の {{HTMLElement("tbody")}} 要素のように動作します。
+- `table-header-group`
+  - : これらの要素は HTML の {{HTMLElement("thead")}} 要素のように動作します。
+- `table-footer-group`
+  - : これらの要素は HTML の {{HTMLElement("tfoot")}} 要素のように動作します。
+- `table-row`
+  - : これらの要素は HTML の {{HTMLElement("tr")}} 要素のように動作します。
+- `table-cell`
+  - : これらの要素は HTML の {{HTMLElement("td")}} 要素のように動作します。
+- `table-column-group`
+  - : これらの要素は HTML の {{HTMLElement("colgroup")}} 要素のように動作します。
+- `table-column`
+  - : これらの要素は HTML の {{HTMLElement("col")}} 要素のように動作します。
+- `table-caption`
+  - : これらの要素は HTML の {{HTMLElement("caption")}} 要素のように動作します。
+- `ruby-base` {{Experimental_Inline}}
+  - : これらの要素は HTML の {{HTMLElement("rb")}} 要素のように動作します。
+- `ruby-text` {{Experimental_Inline}}
+  - : これらの要素は HTML の {{HTMLElement("rt")}} 要素のように動作します。
+- `ruby-base-container` {{Experimental_Inline}}
+  - : これらの要素は無名のボックスとして生成された HTML の {{HTMLElement("rbc")}} 要素のように動作します。
+- `ruby-text-container` {{Experimental_Inline}}
+  - : これらの要素は HTML の {{HTMLElement("rtc")}} 要素のように動作します。
+
+## 例
+
+
CSS テーブルの例

+
+以下の例は、 CSS テーブルレイアウトを使用した単純なフォームのレイアウトを紹介します。
+
+#### HTML
+
+```html
+

+  

+    
+    
+  

+  

+    
+    
+  

+

+```
+
+#### CSS
+
+```css
+main {
   display: table;
 }
 
@@ -77,53 +78,39 @@ div {
 label, input {
   display: table-cell;
   margin: 5px;
-}
+} +``` + +#### 結果 -

結果

+{{EmbedLiveSample('CSS_tables_example', '100%', 100)}} -

{{EmbedLiveSample('CSS_tables_example', '100%', 100)}}

+## 仕様書 -

仕様書

+| 仕様書 | 状態 | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | +| {{SpecName('CSS3 Display', '#typedef-display-internal', 'display-internal')}} | {{Spec2('CSS3 Display')}} | - - - - - - - - - - - - - -
仕様書状態
{{SpecName('CSS3 Display', '#typedef-display-internal', 'display-internal')}}{{Spec2('CSS3 Display')}}
+## ブラウザーの互換性 -

ブラウザーの互換性

+### 対応している table の値 -

対応している table の値

+`table`, `table-cell`, `table-column`, `table-column-group`, `table-footer-group`, `table-header-group`, `table-row`, `table-row-group` -

table, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, table-row-group

+{{Compat("css.properties.display.table_values", 10)}} -

{{Compat("css.properties.display.table_values", 10)}}

+### 対応している ruby の値 -

対応している ruby の値

+`ruby`, `ruby-base`, `ruby-base-container`, `ruby-text`, `ruby-text-container` -

ruby, ruby-base, ruby-base-container, ruby-text, ruby-text-container

+{{Compat("css.properties.display.ruby_values", 10)}} -

{{Compat("css.properties.display.ruby_values", 10)}}

+## 関連情報 -

関連情報

+- {{CSSxRef("display")}} -
    -
  • {{CSSxRef("display")}} -
      -
    • {{CSSxRef("<display-outside>")}}
      • -
    • {{CSSxRef("<display-inside>")}}
      • -
    • {{CSSxRef("<display-listitem>")}}
      • -
    • {{CSSxRef("<display-box>")}}
      • -
    • {{CSSxRef("<display-legacy>")}}
      • -
    -
    • -
+ - {{CSSxRef("<display-outside>")}} + - {{CSSxRef("<display-inside>")}} + - {{CSSxRef("<display-listitem>")}} + - {{CSSxRef("<display-box>")}} + - {{CSSxRef("<display-legacy>")}} diff --git a/files/ja/web/css/display-legacy/index.md b/files/ja/web/css/display-legacy/index.md index cfc82921bc..06402649ae 100644 --- a/files/ja/web/css/display-legacy/index.md +++ b/files/ja/web/css/display-legacy/index.md @@ -3,118 +3,109 @@ title: slug: Web/CSS/display-legacy tags: - CSS - - CSS Data Type - - CSS Display - - Data Type - - Reference + - CSS データ型 + - CSS 表示 + - データ型 + - リファレンス - display-legacy translation_of: Web/CSS/display-legacy --- -
{{CSSRef}}
+{{CSSRef}} -

CSS 2 では display プロパティで単一のキーワードによる構文を採用しており、同じレイアウトモードのブロックレベルとインラインレベルで別々のキーワードが必要でした。このページではこれらの値を詳しく紹介します。

+CSS 2 では `display` プロパティで単一のキーワードによる構文を採用しており、同じレイアウトモードのブロックレベルとインラインレベルで別々のキーワードが必要でした。このページではこれらの値を詳しく紹介します。 -

構文

+## 構文 -

有効な <display-legacy> は以下のとおりです。

+有効な `` は以下のとおりです。 -
-
inline-block
-
この要素はブロック要素ボックスを生成しますが、周囲のコンテンツに対しては単一のインラインボックスであるかのように流れるようになります (置換要素の場合と似ています)。
-
- これは inline flow-root と等価です。
-
inline-table
-
inline-table は、 HTML には直接的に対応するものがありません。これは、 HTML の {{HTMLElement("table")}} 要素と同じようにふるまいつつ、ブロックレベルボックスではなく、インラインボックスのようにふるまいます。表ボックスの内部はブロックレベルのコンテキストになります。
-
- これは inline table と等価です。
-
inline-flex
-
要素は、インライン要素のようにふるまいつつ、そのコンテンツをフレックスボックスモデルに従ってレイアウトします。
-
- これは inline flex と等価です。
-
inline-grid
-
要素は、インライン要素のようにふるまいつつ、そのコンテンツをグリッドモデルに従ってレイアウトします。
-
- これは inline grid と等価です。
-
+- `inline-block` -

例

+ - : この要素はブロック要素ボックスを生成しますが、周囲のコンテンツに対しては単一のインラインボックスであるかのように流れるようになります (置換要素の場合と似ています)。 -

以下の例では、インラインフレックスコンテナーを従来型のキーワードである inline-flex で生成します。

+ これは `inline flow-root` と等価です。 -
-

HTML

+- `inline-table` -
<div class="container">
-  <div>Flex Item</div>
-  <div>Flex Item</div>
-</div>
+  - : `inline-table` は、 HTML には直接的に対応するものがありません。これは、 HTML の {{HTMLElement("table")}} 要素と同じようにふるまいつつ、ブロックレベルボックスではなく、インラインボックスのようにふるまいます。表ボックスの内部はブロックレベルのコンテキストになります。
+
+    これは `inline table` と等価です。
+
+- `inline-flex`
+
+  - : 要素は、インライン要素のようにふるまいつつ、その内容物をフレックスボックスモデルに従ってレイアウトします。
+
+    これは `inline flex` と等価です。
+- `inline-grid`
+
+  - : 要素は、インライン要素のようにふるまいつつ、その内容物をグリッドモデルに従ってレイアウトします。
+
+    これは `inline grid` と等価です。
+
+
例

+
+以下の例では、インラインフレックスコンテナーを従来型のキーワードである inline-flex で生成します。
+
+### HTML
+
+```html
+

+  
Flex Item

+  
Flex Item

+

 
 Not a flex item
-
+``` -

CSS

+### CSS -
.container {
+```css
+.container {
   display: inline-flex;
 }
-
+``` -

結果

+### 結果 -

{{EmbedLiveSample("Examples", 300, 150)}}

-
+{{EmbedLiveSample("Examples", 300, 150)}} -

新しい構文では、インラインフレックスコンテナーは二つの値を使用して生成され、外部表示種別が inline、内部表示種別が flex です。

+新しい構文では、インラインフレックスコンテナーは二つの値を使用して生成され、外部表示種別が inline、内部表示種別が flex です。 -
.container {
+```css
+.container {
   display: inline flex;
-}
+} +``` + +## 仕様書 -

仕様書

+| 仕様書 | 状態 | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | +| {{SpecName('CSS3 Display', '#typedef-display-legacy', 'display-legacy')}} | {{Spec2('CSS3 Display')}} | - - - - - - - - - - - - - -
仕様書状態
{{SpecName('CSS3 Display', '#typedef-display-legacy', 'display-legacy')}}{{Spec2('CSS3 Display')}}
+## ブラウザーの互換性 -

ブラウザーの互換性

+### inline-block の対応 -

inline-block の対応

+{{Compat("css.properties.display.inline-block", 10)}} -

{{Compat("css.properties.display.inline-block", 10)}}

+### inline-table の対応 -

inline-table の対応

+{{Compat("css.properties.display.inline-table", 10)}} -

{{Compat("css.properties.display.inline-table", 10)}}

+### inline-flex の対応 -

inline-flex の対応

+{{Compat("css.properties.display.inline-flex", 10)}} -

{{Compat("css.properties.display.inline-flex", 10)}}

+### inline-grid の対応 -

inline-grid の対応

+{{Compat("css.properties.display.inline-grid", 10)}} -

{{Compat("css.properties.display.inline-grid", 10)}}

+## 関連情報 -

関連情報

+- {{CSSxRef("display")}} -
    -
  • {{CSSxRef("display")}} -
      -
    • {{CSSxRef("<display-outside>")}}
      • -
    • {{CSSxRef("<display-inside>")}}
      • -
    • {{CSSxRef("<display-listitem>")}}
      • -
    • {{CSSxRef("<display-internal>")}}
      • -
    • {{CSSxRef("<display-box>")}}
      • -
    -
    • -
+ - {{CSSxRef("<display-outside>")}} + - {{CSSxRef("<display-inside>")}} + - {{CSSxRef("<display-listitem>")}} + - {{CSSxRef("<display-internal>")}} + - {{CSSxRef("<display-box>")}} diff --git a/files/ja/web/css/display-listitem/index.md b/files/ja/web/css/display-listitem/index.md index 0bcad68de9..49fa88e2e3 100644 --- a/files/ja/web/css/display-listitem/index.md +++ b/files/ja/web/css/display-listitem/index.md @@ -5,59 +5,61 @@ tags: - CSS - CSS データ型 - CSS 表示 - - Reference + - リファレンス - list-item translation_of: Web/CSS/display-listitem --- -
{{CSSRef}}
+{{CSSRef}} -

list-item キーワードは、要素に {{CSSxRef("list-style")}} プロパティで指定された内容 (例えば見出し記号) を含む ::marker 疑似要素と共に、自身の内容物のために指定された種類の基本的なボックスを生成します。

+`list-item` キーワードは、要素に {{CSSxRef("list-style")}} プロパティで指定された内容 (例えば見出し記号) を含む `::marker` 擬似要素と共に、自身の内容物のために指定された種類の基本的なボックスを生成します。 -

構文

+## 構文 -

list-item 単独の値を指定すると、要素はリストの項目のように動作します。これは {{CSSxRef("list-style-type")}} や {{CSSxRef("list-style-position")}} と共に使用することができます。

+`list-item` 単独の値を指定すると、要素はリスト項目のように動作します。これは {{CSSxRef("list-style-type")}} や {{CSSxRef("list-style-position")}} と共に使用することができます。 -

list-item は {{CSSxRef("<display-outside>")}} キーワードのいずれかと、 {{CSSxRef("<display-inside>")}} の flow または flow-root キーワードと組み合わせることもできます。

+`list-item` は {{CSSxRef("<display-outside>")}} キーワードのいずれかと、 {{CSSxRef("<display-inside>")}} の `flow` または `flow-root` キーワードと組み合わせることもできます。 -
-

メモ: 二つの値の構文に対応しているブラウザーでは、内部表示種別がないと既定で flow になります。外部表示種別が指定されないと、基本ボックスは外部表示種別が block になります。

-
+> **Note:** 二つの値の構文に対応しているブラウザーでは、内部表示種別がないと既定で `flow` になります。外部表示種別が指定されないと、基本ボックスは外部表示種別が `block` になります。 -

例

+

例

-

HTML

+### HTML -
<div class="fake-list">I will display as a list item</div>
-
+```html +
I will display as a list item
+``` -

CSS

+### CSS -
.fake-list {
+```css
+.fake-list {
   display: list-item;
   list-style-position: inside;
 }
-
+``` -

結果

+### 結果 -

{{EmbedLiveSample("Example", "100%", 150)}}

+{{EmbedLiveSample("Examples", "100%", 150)}} -

ブラウザーの互換性

+## 仕様書 -

list-item の対応

+| 仕様書 | 状態 | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | +| {{SpecName('CSS3 Display', '#typedef-display-listitem', 'display-listitem')}} | {{Spec2('CSS3 Display')}} | -

{{Compat("css.properties.display.list-item", 10)}}

+## ブラウザーの互換性 -

関連情報

+### `list-item` の対応 -
    -
  • {{CSSxRef("display")}} -
      -
    • {{CSSxRef("<display-outside>")}}
      • -
    • {{CSSxRef("<display-inside>")}}
      • -
    • {{CSSxRef("<display-internal>")}}
      • -
    • {{CSSxRef("<display-box>")}}
      • -
    • {{CSSxRef("<display-legacy>")}}
      • -
    -
    • -
+{{Compat("css.properties.display.list-item", 10)}} + +## 関連情報 + +- {{CSSxRef("display")}} + + - {{CSSxRef("<display-outside>")}} + - {{CSSxRef("<display-inside>")}} + - {{CSSxRef("<display-internal>")}} + - {{CSSxRef("<display-box>")}} + - {{CSSxRef("<display-legacy>")}} diff --git a/files/ja/web/css/display-outside/index.md b/files/ja/web/css/display-outside/index.md index 5b4d14aef5..e43c09bd75 100644 --- a/files/ja/web/css/display-outside/index.md +++ b/files/ja/web/css/display-outside/index.md @@ -3,89 +3,71 @@ title: slug: Web/CSS/display-outside tags: - CSS - - CSS Data Type - - CSS Display - - Data Type - - Reference + - CSS データ型 + - CSS 表示 + - データ型 + - リファレンス - display-outside translation_of: Web/CSS/display-outside --- -
{{CSSRef}}
+{{CSSRef}} -

<display-outside> のキーワードは、本質的にフローレイアウトにおける要素の役割である、要素の {{CSSxRef("display")}} の外部表示種別を指定します。これらのキーワードは display プロパティの値として使用され、単一のキーワードとしては伝統的な目的に、または Level 3 仕様書では {{CSSxRef("<display-inside>")}} のキーワードと共に使用されます。

+`` のキーワードは、本質的にフローレイアウトにおける要素の役割である、要素の {{CSSxRef("display")}} の外部表示種別を指定します。これらのキーワードは `display` プロパティの値として使用され、単一のキーワードとしては伝統的な目的に、または Level 3 仕様書では {{CSSxRef("<display-inside>")}} のキーワードと共に使用されます。 -

構文

+## 構文 -

有効な <display-outside> の値は以下の通りです。

+有効な `` の値は以下の通りです。 -
-
block
-
要素は、ブロック要素ボックスを生成し、通常フローでは要素の前後に改行を生成します。
-
inline
-
要素は自分自身の前後に改行を生成しない、一つ以上のインライン要素ボックスを生成します。通常フローでは、次の要素は空間があれば同じ行に来ます。
-
run-in {{Experimental_Inline}}
-
要素は、ランインボックスを生成します。 display: run-in が定義された要素の隣接する兄弟がブロックボックスの場合、ランインボックスはその次のブロックスボックスの最初のインラインボックスになります。
-
- ランイン要素は、周囲の要素に応じてインラインボックスまたはブロックボックスのように動作します。ランインボックスがブロックボックスを含んでいる場合は、ブロックボックスと同じになります。ブロックボックスが後続する場合は、ランインボックスはブロックボックスの最初のインラインボックスになります。インラインボックスが後続する場合は、ブロックボックスになります。
-
+- `block` + - : 要素は、ブロック要素ボックスを生成し、通常フローでは要素の前後に改行を生成します。 +- `inline` + - : 要素は自分自身の前後に改行を生成しない、一つ以上のインライン要素ボックスを生成します。通常フローでは、次の要素は空間があれば同じ行に来ます。 -
-

注: 二つの値の構文に対応しているブラウザーは、 display: block や display: inline などの外部表示種別のみが指定されていると、内部表示種別を flow に設定します。これで期待通りに動作します。例えば、ある要素を block になるよう指定した場合、その要素の子はブロックおよびインラインの通常フローレイアウトに加わることを期待するでしょう。

-
+> **Note:** 二つの値の構文に対応しているブラウザーは、 `display: block` や `display: inline` などの外部表示種別のみが指定されていると、内部表示種別を `flow` に設定します。これで期待通りに動作します。例えば、ある要素を block になるよう指定した場合、その要素の子はブロックおよびインラインの通常フローレイアウトに加わることを期待するでしょう。 -

例

+

例

-

以下の例では、 span 要素 (通常はインライン要素として表示) に display: block が設定されているので、改行が行われ、コンテナーのインライン方向を埋めるように拡張されます。

+以下の例では、 span 要素 (通常はインライン要素として表示) に `display: block` が設定されているので、改行が行われ、コンテナーのインライン方向を埋めるように拡張されます。 -

HTML

+### HTML -
<span>span 1</span>
-<span>span 2</span>
+```html +span 1 +span 2 +``` -

CSS

+### CSS -
span {
+```css
+span {
     display: block;
     border: 1px solid rebeccapurple;
-}
- -

結果

- -

{{EmbedLiveSample("Examples", 300, 60)}}

- -

仕様書

- - - - - - - - - - - - - - -
仕様書状態
{{SpecName('CSS3 Display', '#typedef-display-outside', 'display-outside')}}{{Spec2('CSS3 Display')}}
- -

ブラウザーの互換性

- -

{{Compat("css.properties.display.display-outside", 10)}}

- -

関連情報

- - +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", 300, 60)}} + +## 仕様書 + +| 仕様書 | 状態 | +| ---------------------------------------------------------------------------------------------------- | -------------------------------- | +| {{SpecName('CSS3 Display', '#typedef-display-outside', 'display-outside')}} | {{Spec2('CSS3 Display')}} | + +## ブラウザーの互換性 + +{{Compat("css.properties.display.display-outside", 10)}} + +## 関連情報 + +- {{CSSxRef("display")}} + + - {{CSSxRef("<display-inside>")}} + - {{CSSxRef("<display-listitem>")}} + - {{CSSxRef("<display-internal>")}} + - {{CSSxRef("<display-box>")}} + - {{CSSxRef("<display-legacy>")}} + +- [通常フローでのブロックおよびインラインレイアウト](/ja/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow) +- [整形コンテキストの紹介](/ja/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts) diff --git a/files/ja/web/css/filter-function/index.md b/files/ja/web/css/filter-function/index.md index cf21e6bdf8..398a377b10 100644 --- a/files/ja/web/css/filter-function/index.md +++ b/files/ja/web/css/filter-function/index.md @@ -4,62 +4,201 @@ slug: Web/CSS/filter-function tags: - CSS - CSS データ型 - - Reference + - データ型 - フィルター効果 + - NeedsCompatTable + - リファレンス +browser-compat: css.types.filter-function translation_of: Web/CSS/filter-function --- -
{{cssref}}
- -

CSS の <filter-function> データ型は、入力された画像の表示方法を変更することができるグラフィカル効果を表します。これは {{cssxref("filter")}} 及び {{cssxref("backdrop-filter")}} プロパティで使用します。

- -

構文

- -

<filter-function> データ型は以下の一覧にあるフィルター関数を使用して指定されます。それぞれの関数には引数が必要であり、無効な場合は、フィルターが適用されません。

- -
-
{{cssxref("filter-function/blur", "blur()")}}
-
画像をぼかします。
-
{{cssxref("filter-function/brightness", "brightness()")}}
-
画像を明るくしたり暗くしたりします。
-
{{cssxref("filter-function/contrast", "contrast()")}}
-
画像のコントラストを上げたり下げたりします。
-
{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
-
画像の背後にドロップシャドウを適用します。
-
{{cssxref("filter-function/grayscale", "grayscale()")}}
-
画像をグレイスケールに変換します。
-
{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}​​​​​​​
-
画像の色相を全体的に変更します。
-
{{cssxref("filter-function/invert", "invert()")}}
-
画像の色を反転させます。
-
{{cssxref("filter-function/opacity", "opacity()")}}
-
画像を半透明にします。
-
{{cssxref("filter-function/saturate", "saturate()")}}
-
入力画像の彩度を上げたり下げたりします。
-
{{cssxref("filter-function/sepia", "sepia()")}}
-
画像をセピア調に変換します。
-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('Filters 1.0', '#typedef-filter-function', '<filter-function>') }}{{ Spec2('Filters 1.0') }}初回定義。
- -

関連情報

+{{CSSRef}} +**``** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、入力された画像の表示方法を変更することができるグラフィカル効果を表します。これは {{cssxref("filter")}} および {{cssxref("backdrop-filter")}} プロパティで使用します。 + +## 構文 + +`` データ型は以下の一覧にあるフィルター関数を使用して指定されます。それぞれの関数には引数が必要であり、無効な場合は、フィルターが適用されません。 + +- {{cssxref("filter-function/blur()", "blur()")}} + - : 画像をぼかします。 +- {{cssxref("filter-function/brightness()", "brightness()")}} + - : 画像を明るくしたり暗くしたりします。 +- {{cssxref("filter-function/contrast()", "contrast()")}} + - : 画像のコントラストを上げたり下げたりします。 +- {{cssxref("filter-function/drop-shadow()", "drop-shadow()")}} + - : 画像の背後にドロップシャドウを適用します。 +- {{cssxref("filter-function/grayscale()", "grayscale()")}} + - : 画像をグレイスケールに変換します。 +- {{cssxref("filter-function/hue-rotate()", "hue-rotate()")}} + - : 画像の色相を全体的に変更します。 +- {{cssxref("filter-function/invert()", "invert()")}} + - : 画像の色を反転させます。 +- {{cssxref("filter-function/opacity()", "opacity()")}} + - : 画像を半透明にします。 +- {{cssxref("filter-function/saturate()", "saturate()")}} + - : 入力画像の彩度を上げたり下げたりします。 +- {{cssxref("filter-function/sepia()", "sepia()")}} + - : 画像をセピア調に変換します。 + +## 例 + +

フィルター関数の比較

+ +この例では、シンプルなグラフィックに加えて、さまざまな種類のフィルター機能を選択するための選択メニューと、フィルター機能内で使用される値を変化させるためのスライダーが用意されています。コントロールを更新すると、フィルター効果がリアルタイムで更新されるので、さまざまなフィルターの効果を調べることができます。 + +#### HTML + +```html +
    -
  • このデータ型を使用するプロパティ: {{cssxref("filter")}} 及び {{cssxref("backdrop-filter")}}
    • + 
  • +    +    + 
    • + 
  • +    + 
    • + 
  • +   

    現在の値:

    + 
+``` + +#### CSS + +```css +div { + width: 300px; + height: 300px; + background: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center; +} + +li { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 20px; +} + +input { + width: 60% +} + +output { + width: 5%; + text-align: center; +} + +select { + width: 40%; + margin-left: 2px; +} +``` + +#### JavaScript + +```js +const selectElem = document.querySelector('select'); +const divElem = document.querySelector('div'); +const slider = document.querySelector('input'); +const output = document.querySelector('output'); +const curValue = document.querySelector('p code'); + +selectElem.addEventListener('change', () => { + setSlider(selectElem.value); + setDiv(selectElem.value); +}); + +slider.addEventListener('input', () => { + setDiv(selectElem.value); +}); + +function setSlider(filter) { + if(filter === 'blur') { + slider.value = 0; + slider.min = 0; + slider.max = 30; + slider.step = 1; + slider.setAttribute('data-unit', 'px'); + } else if(filter === 'brightness' || filter === 'contrast' || filter === 'saturate') { + slider.value = 1; + slider.min = 0; + slider.max = 4; + slider.step = 0.05; + slider.setAttribute('data-unit', ''); + } else if(filter === 'drop-shadow') { + slider.value = 0; + slider.min = -20; + slider.max = 40; + slider.step = 1; + slider.setAttribute('data-unit', 'px'); + } else if(filter === 'opacity') { + slider.value = 1; + slider.min = 0; + slider.max = 1; + slider.step = 0.01; + slider.setAttribute('data-unit', ''); + } else if(filter === 'grayscale' || filter === 'invert' || filter === 'sepia') { + slider.value = 0; + slider.min = 0; + slider.max = 1; + slider.step = 0.01; + slider.setAttribute('data-unit', ''); + } else if(filter === 'hue-rotate') { + slider.value = 0; + slider.min = 0; + slider.max = 360; + slider.step = 1; + slider.setAttribute('data-unit', 'deg'); + } +} + +function setDiv(filter) { + if(filter === 'drop-shadow') { + divElem.style.filter = `${selectElem.value}(${Math.round(slider.value)}${slider.getAttribute('data-unit')} ${Math.round(slider.value)}${slider.getAttribute('data-unit')} ${Math.round(Math.abs(slider.value/2))}${slider.getAttribute('data-unit')})`; + } else { + divElem.style.filter = `${selectElem.value}(${slider.value}${slider.getAttribute('data-unit')}`; + } + + updateOutput(); + updateCurValue(); +} + +function updateOutput() { + output.textContent = slider.value; +} + +function updateCurValue() { + curValue.textContent = `filter: ${divElem.style.filter}`; +} + +setSlider(selectElem.value); +setDiv(selectElem.value); +``` + +#### 結果 + +{{EmbedLiveSample('Filter_function_comparison', '100%', 500)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このデータ型を使用するプロパティ: {{cssxref("filter")}} および {{cssxref("backdrop-filter")}} diff --git a/files/ja/web/css/shape/index.md b/files/ja/web/css/shape/index.md index c4cc8fcae2..dd5704572a 100644 --- a/files/ja/web/css/shape/index.md +++ b/files/ja/web/css/shape/index.md @@ -3,79 +3,68 @@ title: slug: Web/CSS/shape tags: - CSS - - CSS Reference + - CSS データ型 + - CSS 関数 + - データ型 + - 非推奨 + - レイアウト + - リファレンス + - ウェブ +browser-compat: css.types.shape translation_of: Web/CSS/shape --- -
{{CSSRef}}
+{{CSSRef}}{{deprecated_header}} -

<shape> CSS データ型は、ある領域の具体的な形状を表します。この領域は、要素のどの部分で {{Cssxref("clip")}} のようなプロパティが用いられるのか、定義するのに使われます。

+**``** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、ある領域の具体的な形状を表します。この領域は、{{cssxref("clip")}} プロパティが適用される要素の一部を表します。 -
-

Note: <shape> and rect() は廃止された{{cssxref("clip")}}と連動しますが、 {{cssxref("clip-path")}}が支持されました。 可能であれば、代わりにclip-pathと{{cssxref("<basic-shape>")}}データ型を使用してください。

-
+> **Note:** `` と `rect()` は {{cssxref("clip")}} と連携して動作しますが、これは {{cssxref("clip-path")}} に置き換えらえて非推奨となりました。可能であれば、代わりに `clip-path` と {{cssxref("<basic-shape>")}} データ型を使用してください。 -

構文

+## 構文 -

rect() 関数記法は、矩形の領域を作ります。

+`` データ型は `rect()` 関数を使って指定し、長方形の形で領域を生成します。 -

rect() 関数

+`rect()` -
rect(top, right, bottom, left)
-
+```css +rect(top, right, bottom, left) +``` -

引数は次の長さを表します:

+### 値 -
-
top
-
要素のボックスのボーダーの top と、矩形の top との差を表す {{cssxref("<length>")}}
-
right
-
要素のボックスのボーダーの left と、矩形の right との差を表す {{cssxref("<length>")}}
-
bottom
-
要素のボックスのボーダーの top と、矩形の bottom との差を表す {{cssxref("<length>")}}。
-
left
-
要素のボックスのボーダーの left と、矩形の left との差を表す {{cssxref("<length>")}}
-
+![](rect.png) -

補間

+- _top_ + - : {{cssxref("<length>")}} で、この要素のボックスの上の境界から、矩形の上端までのオフセットを表します。 +- _right_ + - : {{cssxref("<length>")}} で、この要素のボックスの左の境界から、矩形の右端までのオフセットを表します。 +- _bottom_ + - : {{cssxref("<length>")}} で、この要素のボックスの上の境界から、矩形の下端までのオフセットを表します。 +- _left_ + - : {{cssxref("<length>")}} で、この要素のボックスの左の境界から、矩形の左端までのオフセットを表します。 -

矩形の <shape> CSS データ型の値は、アニメーション用に補間可能です。top、right、bottom 、left のそれぞれが実数（浮動小数点数）として扱われ、補間されます。補間速度は、アニメーションに結びつけられた timing function で決められます。

+## 補間 -

例

+アニメーションの際には、`` データ型の値は、`top`、`right`、`bottom`、`left` の各要素に補間され、それぞれが実数の浮動小数点数として扱われます。補間の速度は、アニメーションに関連する[タイミング関数](/ja/docs/Web/CSS/easing-function)によって決定されます。 -
img.clip04 {
-  clip: rect(10px, 20px, 20px, 10px);
-}
+## 例 -

仕様書

+### 正しい rect() 関数の使い方の例 - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName('CSS2.1', 'visufx.html#value-def-shape', '<shape>')}}{{Spec2('CSS2.1')}}{{cssxref("clip")}} プロパティと同時に定義
+```css +img.clip04 { + clip: rect(10px, 20px, 20px, 10px); +} +``` -

ブラウザ実装状況

+## 仕様書 -
+{{Specifications}} +## ブラウザーの互換性 -

{{Compat("css.types.shape")}}

-
+{{Compat}} -

関連情報

+## 関連情報 -
    -
  • 関連 CSS プロパティ: {{Cssxref("clip")}}
    • -
  • -moz-image-rect() 関数は rect()と似た座標を使います
    • -
+- 関連する CSS プロパティ: {{Cssxref("clip")}} +- [`-moz-image-rect()`](/ja/docs/Web/CSS/-moz-image-rect) 関数は `rect()` と同様の座標を使います -- cgit v1.2.3-54-g00ecf