From ef0e5625abed731ab03ceac0379b507db4ab4fb9 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 23 Nov 2021 22:14:22 +0900 Subject: 特定の CSS 値の型に関する文書を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/display-box/index.html | 125 -------------------------- files/ja/web/css/display-box/index.md | 125 ++++++++++++++++++++++++++ files/ja/web/css/display-inside/index.html | 120 ------------------------- files/ja/web/css/display-inside/index.md | 120 +++++++++++++++++++++++++ files/ja/web/css/display-internal/index.html | 129 --------------------------- files/ja/web/css/display-internal/index.md | 129 +++++++++++++++++++++++++++ files/ja/web/css/display-legacy/index.html | 120 ------------------------- files/ja/web/css/display-legacy/index.md | 120 +++++++++++++++++++++++++ files/ja/web/css/display-listitem/index.html | 63 ------------- files/ja/web/css/display-listitem/index.md | 63 +++++++++++++ files/ja/web/css/display-outside/index.html | 91 ------------------- files/ja/web/css/display-outside/index.md | 91 +++++++++++++++++++ files/ja/web/css/filter-function/index.html | 65 -------------- files/ja/web/css/filter-function/index.md | 65 ++++++++++++++ files/ja/web/css/shape/index.html | 81 ----------------- files/ja/web/css/shape/index.md | 81 +++++++++++++++++ 16 files changed, 794 insertions(+), 794 deletions(-) delete mode 100644 files/ja/web/css/display-box/index.html create mode 100644 files/ja/web/css/display-box/index.md delete mode 100644 files/ja/web/css/display-inside/index.html create mode 100644 files/ja/web/css/display-inside/index.md delete mode 100644 files/ja/web/css/display-internal/index.html create mode 100644 files/ja/web/css/display-internal/index.md delete mode 100644 files/ja/web/css/display-legacy/index.html create mode 100644 files/ja/web/css/display-legacy/index.md delete mode 100644 files/ja/web/css/display-listitem/index.html create mode 100644 files/ja/web/css/display-listitem/index.md delete mode 100644 files/ja/web/css/display-outside/index.html create mode 100644 files/ja/web/css/display-outside/index.md delete mode 100644 files/ja/web/css/filter-function/index.html create mode 100644 files/ja/web/css/filter-function/index.md delete mode 100644 files/ja/web/css/shape/index.html create mode 100644 files/ja/web/css/shape/index.md (limited to 'files/ja') diff --git a/files/ja/web/css/display-box/index.html b/files/ja/web/css/display-box/index.html deleted file mode 100644 index 6211d9b8d8..0000000000 --- a/files/ja/web/css/display-box/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: -slug: Web/CSS/display-box -tags: - - CSS - - CSS データ型 - - CSS 表示 - - Reference - - display-box -translation_of: Web/CSS/display-box ---- -
{{CSSRef}}
- -

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

- -

構文

- -

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

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

アクセシビリティの考慮

- -

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

- - - -

例

- -

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

- -

display: none

- -

HTML

- -
<p>Visible text</p>
-<p class="secret">Invisible text</p>
- -

CSS

- -
p.secret {
-  display: none;
-}
- -

結果

- -

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

- -

display: contents

- -

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

- -

HTML

- -
<div class="outer">
-  <div>Inner div.</div>
-</div>
-
- -

CSS

- -
.outer {
-  border: 2px solid red;
-  width: 300px;
-  display: contents;
-}
-
-.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)}}

- -

関連情報

- - diff --git a/files/ja/web/css/display-box/index.md b/files/ja/web/css/display-box/index.md new file mode 100644 index 0000000000..6211d9b8d8 --- /dev/null +++ b/files/ja/web/css/display-box/index.md @@ -0,0 +1,125 @@ +--- +title: +slug: Web/CSS/display-box +tags: + - CSS + - CSS データ型 + - CSS 表示 + - Reference + - display-box +translation_of: Web/CSS/display-box +--- +
{{CSSRef}}
+ +

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

+ +

構文

+ +

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

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

アクセシビリティの考慮

+ +

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

+ + + +

例

+ +

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

+ +

display: none

+ +

HTML

+ +
<p>Visible text</p>
+<p class="secret">Invisible text</p>
+ +

CSS

+ +
p.secret {
+  display: none;
+}
+ +

結果

+ +

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

+ +

display: contents

+ +

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

+ +

HTML

+ +
<div class="outer">
+  <div>Inner div.</div>
+</div>
+
+ +

CSS

+ +
.outer {
+  border: 2px solid red;
+  width: 300px;
+  display: contents;
+}
+
+.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)}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/display-inside/index.html b/files/ja/web/css/display-inside/index.html deleted file mode 100644 index 955c133f66..0000000000 --- a/files/ja/web/css/display-inside/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: -slug: Web/CSS/display-inside -tags: - - 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 に指定した場合、そのボックスはブロックレベルボックスのグリッドコンテナーとして生成されることが期待されるでしょう。

-
- -

例

- -

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

- -

HTML

- -
<div class="box">
-  <div class="float">I am a floated box!</div>
-  <p>I am content inside the container.</p>
-</div>
-
- -

CSS

- -
.box {
-    background-color: rgb(224, 206, 247);
-    border: 5px solid rebeccapurple;
-    display: flow-root;
-}
-
-.float {
-    float: left;
-    width: 200px;
-    height: 150px;
-    background-color: white;
-    border:1px solid black;
-    padding: 10px;
-}
- -

結果

- -

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

- -

ブラウザーの互換性

- -

複数のキーワードの対応

- -

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

- - - -

flow-root の対応

- -

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

- -

table の対応

- -

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

- -

grid の対応

- -

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

- -

flex の対応

- -

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

- -

ruby の対応

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/display-inside/index.md b/files/ja/web/css/display-inside/index.md new file mode 100644 index 0000000000..955c133f66 --- /dev/null +++ b/files/ja/web/css/display-inside/index.md @@ -0,0 +1,120 @@ +--- +title: +slug: Web/CSS/display-inside +tags: + - 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 に指定した場合、そのボックスはブロックレベルボックスのグリッドコンテナーとして生成されることが期待されるでしょう。

+
+ +

例

+ +

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

+ +

HTML

+ +
<div class="box">
+  <div class="float">I am a floated box!</div>
+  <p>I am content inside the container.</p>
+</div>
+
+ +

CSS

+ +
.box {
+    background-color: rgb(224, 206, 247);
+    border: 5px solid rebeccapurple;
+    display: flow-root;
+}
+
+.float {
+    float: left;
+    width: 200px;
+    height: 150px;
+    background-color: white;
+    border:1px solid black;
+    padding: 10px;
+}
+ +

結果

+ +

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

+ +

ブラウザーの互換性

+ +

複数のキーワードの対応

+ +

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

+ + + +

flow-root の対応

+ +

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

+ +

table の対応

+ +

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

+ +

grid の対応

+ +

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

+ +

flex の対応

+ +

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

+ +

ruby の対応

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/display-internal/index.html b/files/ja/web/css/display-internal/index.html deleted file mode 100644 index 3c3d25c105..0000000000 --- a/files/ja/web/css/display-internal/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: -slug: Web/CSS/display-internal -tags: - - CSS - - CSS Data Type - - 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 {
-  display: table;
-}
-
-div {
-  display: table-row;
-}
-
-label, input {
-  display: table-cell;
-  margin: 5px;
-}
- -

結果

- -

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

- -

仕様書

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

ブラウザーの互換性

- -

対応している table の値

- -

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)}}

- -

対応している ruby の値

- -

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

- -

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

- -

関連情報

- -
    -
  • {{CSSxRef("display")}} -
      -
    • {{CSSxRef("<display-outside>")}}
      • -
    • {{CSSxRef("<display-inside>")}}
      • -
    • {{CSSxRef("<display-listitem>")}}
      • -
    • {{CSSxRef("<display-box>")}}
      • -
    • {{CSSxRef("<display-legacy>")}}
      • -
    -
    • -
diff --git a/files/ja/web/css/display-internal/index.md b/files/ja/web/css/display-internal/index.md new file mode 100644 index 0000000000..3c3d25c105 --- /dev/null +++ b/files/ja/web/css/display-internal/index.md @@ -0,0 +1,129 @@ +--- +title: +slug: Web/CSS/display-internal +tags: + - CSS + - CSS Data Type + - 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 {
+  display: table;
+}
+
+div {
+  display: table-row;
+}
+
+label, input {
+  display: table-cell;
+  margin: 5px;
+}
+ +

結果

+ +

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

+ +

仕様書

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

ブラウザーの互換性

+ +

対応している table の値

+ +

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)}}

+ +

対応している ruby の値

+ +

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

+ +

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

+ +

関連情報

+ +
    +
  • {{CSSxRef("display")}} +
      +
    • {{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.html b/files/ja/web/css/display-legacy/index.html deleted file mode 100644 index cfc82921bc..0000000000 --- a/files/ja/web/css/display-legacy/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: -slug: Web/CSS/display-legacy -tags: - - CSS - - CSS Data Type - - CSS Display - - Data Type - - Reference - - display-legacy -translation_of: Web/CSS/display-legacy ---- -
{{CSSRef}}
- -

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-flex で生成します。

- -
-

HTML

- -
<div class="container">
-  <div>Flex Item</div>
-  <div>Flex Item</div>
-</div>
-
-Not a flex item
-
- -

CSS

- -
.container {
-  display: inline-flex;
-}
-
- -

結果

- -

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

-
- -

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

- -
.container {
-  display: inline flex;
-}
- -

仕様書

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

ブラウザーの互換性

- -

inline-block の対応

- -

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

- -

inline-table の対応

- -

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

- -

inline-flex の対応

- -

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

- -

inline-grid の対応

- -

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

- -

関連情報

- -
    -
  • {{CSSxRef("display")}} -
      -
    • {{CSSxRef("<display-outside>")}}
      • -
    • {{CSSxRef("<display-inside>")}}
      • -
    • {{CSSxRef("<display-listitem>")}}
      • -
    • {{CSSxRef("<display-internal>")}}
      • -
    • {{CSSxRef("<display-box>")}}
      • -
    -
    • -
diff --git a/files/ja/web/css/display-legacy/index.md b/files/ja/web/css/display-legacy/index.md new file mode 100644 index 0000000000..cfc82921bc --- /dev/null +++ b/files/ja/web/css/display-legacy/index.md @@ -0,0 +1,120 @@ +--- +title: +slug: Web/CSS/display-legacy +tags: + - CSS + - CSS Data Type + - CSS Display + - Data Type + - Reference + - display-legacy +translation_of: Web/CSS/display-legacy +--- +
{{CSSRef}}
+ +

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-flex で生成します。

+ +
+

HTML

+ +
<div class="container">
+  <div>Flex Item</div>
+  <div>Flex Item</div>
+</div>
+
+Not a flex item
+
+ +

CSS

+ +
.container {
+  display: inline-flex;
+}
+
+ +

結果

+ +

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

+
+ +

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

+ +
.container {
+  display: inline flex;
+}
+ +

仕様書

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

ブラウザーの互換性

+ +

inline-block の対応

+ +

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

+ +

inline-table の対応

+ +

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

+ +

inline-flex の対応

+ +

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

+ +

inline-grid の対応

+ +

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

+ +

関連情報

+ +
    +
  • {{CSSxRef("display")}} +
      +
    • {{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.html b/files/ja/web/css/display-listitem/index.html deleted file mode 100644 index 0bcad68de9..0000000000 --- a/files/ja/web/css/display-listitem/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: -slug: Web/CSS/display-listitem -tags: - - CSS - - CSS データ型 - - CSS 表示 - - Reference - - list-item -translation_of: Web/CSS/display-listitem ---- -
{{CSSRef}}
- -

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

- -

構文

- -

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

- -

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

- -
-

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

-
- -

例

- -

HTML

- -
<div class="fake-list">I will display as a list item</div>
-
- -

CSS

- -
.fake-list {
-  display: list-item;
-  list-style-position: inside;
-}
-
- -

結果

- -

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

- -

ブラウザーの互換性

- -

list-item の対応

- -

{{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-listitem/index.md b/files/ja/web/css/display-listitem/index.md new file mode 100644 index 0000000000..0bcad68de9 --- /dev/null +++ b/files/ja/web/css/display-listitem/index.md @@ -0,0 +1,63 @@ +--- +title: +slug: Web/CSS/display-listitem +tags: + - CSS + - CSS データ型 + - CSS 表示 + - Reference + - list-item +translation_of: Web/CSS/display-listitem +--- +
{{CSSRef}}
+ +

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

+ +

構文

+ +

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

+ +

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

+ +
+

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

+
+ +

例

+ +

HTML

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

CSS

+ +
.fake-list {
+  display: list-item;
+  list-style-position: inside;
+}
+
+ +

結果

+ +

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

+ +

ブラウザーの互換性

+ +

list-item の対応

+ +

{{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.html b/files/ja/web/css/display-outside/index.html deleted file mode 100644 index 5b4d14aef5..0000000000 --- a/files/ja/web/css/display-outside/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: -slug: Web/CSS/display-outside -tags: - - CSS - - CSS Data Type - - CSS Display - - Data Type - - Reference - - display-outside -translation_of: Web/CSS/display-outside ---- -
{{CSSRef}}
- -

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

- -

構文

- -

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

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

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

-
- -

例

- -

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

- -

HTML

- -
<span>span 1</span>
-<span>span 2</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)}}

- -

関連情報

- - diff --git a/files/ja/web/css/display-outside/index.md b/files/ja/web/css/display-outside/index.md new file mode 100644 index 0000000000..5b4d14aef5 --- /dev/null +++ b/files/ja/web/css/display-outside/index.md @@ -0,0 +1,91 @@ +--- +title: +slug: Web/CSS/display-outside +tags: + - CSS + - CSS Data Type + - CSS Display + - Data Type + - Reference + - display-outside +translation_of: Web/CSS/display-outside +--- +
{{CSSRef}}
+ +

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

+ +

構文

+ +

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

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

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

+
+ +

例

+ +

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

+ +

HTML

+ +
<span>span 1</span>
+<span>span 2</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)}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/filter-function/index.html b/files/ja/web/css/filter-function/index.html deleted file mode 100644 index cf21e6bdf8..0000000000 --- a/files/ja/web/css/filter-function/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: -slug: Web/CSS/filter-function -tags: - - CSS - - CSS データ型 - - Reference - - フィルター効果 -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') }}初回定義。
- -

関連情報

- -
    -
  • このデータ型を使用するプロパティ: {{cssxref("filter")}} 及び {{cssxref("backdrop-filter")}}
    • -
diff --git a/files/ja/web/css/filter-function/index.md b/files/ja/web/css/filter-function/index.md new file mode 100644 index 0000000000..cf21e6bdf8 --- /dev/null +++ b/files/ja/web/css/filter-function/index.md @@ -0,0 +1,65 @@ +--- +title: +slug: Web/CSS/filter-function +tags: + - CSS + - CSS データ型 + - Reference + - フィルター効果 +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') }}初回定義。
+ +

関連情報

+ +
    +
  • このデータ型を使用するプロパティ: {{cssxref("filter")}} 及び {{cssxref("backdrop-filter")}}
    • +
diff --git a/files/ja/web/css/shape/index.html b/files/ja/web/css/shape/index.html deleted file mode 100644 index c4cc8fcae2..0000000000 --- a/files/ja/web/css/shape/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: -slug: Web/CSS/shape -tags: - - CSS - - CSS Reference -translation_of: Web/CSS/shape ---- -
{{CSSRef}}
- -

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

- -
-

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

-
- -

構文

- -

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

- -

rect() 関数

- -
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>")}}
-
- -

補間

- -

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

- -

例

- -
img.clip04 {
-  clip: rect(10px, 20px, 20px, 10px);
-}
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName('CSS2.1', 'visufx.html#value-def-shape', '<shape>')}}{{Spec2('CSS2.1')}}{{cssxref("clip")}} プロパティと同時に定義
- -

ブラウザ実装状況

- -
- - -

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

-
- -

関連情報

- -
    -
  • 関連 CSS プロパティ: {{Cssxref("clip")}}
    • -
  • -moz-image-rect() 関数は rect()と似た座標を使います
    • -
diff --git a/files/ja/web/css/shape/index.md b/files/ja/web/css/shape/index.md new file mode 100644 index 0000000000..c4cc8fcae2 --- /dev/null +++ b/files/ja/web/css/shape/index.md @@ -0,0 +1,81 @@ +--- +title: +slug: Web/CSS/shape +tags: + - CSS + - CSS Reference +translation_of: Web/CSS/shape +--- +
{{CSSRef}}
+ +

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

+ +
+

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

+
+ +

構文

+ +

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

+ +

rect() 関数

+ +
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>")}}
+
+ +

補間

+ +

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

+ +

例

+ +
img.clip04 {
+  clip: rect(10px, 20px, 20px, 10px);
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('CSS2.1', 'visufx.html#value-def-shape', '<shape>')}}{{Spec2('CSS2.1')}}{{cssxref("clip")}} プロパティと同時に定義
+ +

ブラウザ実装状況

+ +
+ + +

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

+
+ +

関連情報

+ +
    +
  • 関連 CSS プロパティ: {{Cssxref("clip")}}
    • +
  • -moz-image-rect() 関数は rect()と似た座標を使います
    • +
-- cgit v1.2.3-54-g00ecf