From 8616da5f680dfc168837f59b43233b417abb8785 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 30 Dec 2021 11:47:24 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../css/css_shapes/overview_of_css_shapes/index.md | 127 ++++++++++----------- 1 file changed, 61 insertions(+), 66 deletions(-) (limited to 'files/ja/web/css/css_shapes') diff --git a/files/ja/web/css/css_shapes/overview_of_css_shapes/index.md b/files/ja/web/css/css_shapes/overview_of_css_shapes/index.md index 419a72fb93..f732a84ab5 100644 --- a/files/ja/web/css/css_shapes/overview_of_css_shapes/index.md +++ b/files/ja/web/css/css_shapes/overview_of_css_shapes/index.md @@ -4,122 +4,117 @@ slug: Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes tags: - CSS - CSS シェイプ - - シェイプ + - ガイド - 概要 + - シェイプ translation_of: Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes --- -
{{CSSRef}}
+{{CSSRef}} -

CSS シェイプレベル１仕様書は、 CSS における幾何学的な図形 (シェイプ) を記述しています。仕様書のレベル１は、浮動状態のアイテムに適用するように設計されています。この記事では、シェイプを使用して何ができるのかの概要を紹介します。

+[CSS シェイプレベル 1 仕様書](https://www.w3.org/TR/css-shapes/)は、 CSS における幾何学的な図形 (シェイプ) を記述しています。仕様書のレベル 1 は、浮動状態のアイテムに適用するように設計されています。この記事では、シェイプを使用して何ができるのかの概要を紹介します。 -

例えば、アイテムを左にフロートした状態にすると、テキストがアイテムの右と下に矩形に回り込みます。円形のシェイプを適用すると、テキストは円形の線に沿って回り込みます。

+例えば、アイテムを左に浮動した状態にすると、テキストがアイテムの右と下に矩形に回り込みます。そこで円形のシェイプを適用すると、テキストは円形の線に沿って回り込みます。 -

これらのシェイプを作成する方法はいくつもあり、これらのガイドで CSS シェイプの動作や、利用しやすい方法を考えます。

+これらのシェイプを作成する方法はいくつもあり、これらのガイドで CSS シェイプの動作や、利用しやすい方法を考えます。 -

仕様書は何を定義しているのか

+## 仕様書は何を定義しているのか -

仕様書では、三つの新しいプロパティを定義しています。

+仕様書では、 3 つの新しいプロパティを定義しています。 - +- {{cssxref("shape-outside")}} — 基本的なシェイプを定義することができます +- {{cssxref("shape-image-threshold")}} — 透過度のしきい値を設定します。画像がシェイプの定義に使用される場合、画像の中で透過度がしきい値以上の部分のみが、シェイプとして定義されます。他の部分は無視されます。 +- {{cssxref("shape-margin")}} — 定義されたシェイプの周囲のマージンを設定します。 -

基本シェイプの定義

+## 基本シェイプの定義 -

shape-outside プロパティで、シェイプを定義することができます。これは様々な値を取り、 {{cssxref("<basic-shape>")}} データ型で定義され、すべてが異なるシェイプを定義します。とても簡単なケースから見てみましょう。

+`shape-outside` プロパティでシェイプを定義することができます。これは様々な値を取り、 {{cssxref("<basic-shape>")}} データ型で定義され、すべてが異なるシェイプを定義します。とても簡単なケースから見てみましょう。 -

次の例では、左に浮動状態にした画像があります。それから shape-outside プロパティを circle(50%) の値で適用しています。その結果として、コンテンツは画像のボックスで形成された矩形ではなく、丸い形状の周りのカーブになります。

+次の例では、左に浮動状態にした画像があります。それから `shape-outside` プロパティを `circle(50%)` の値で適用しています。その結果として、内容物は画像のボックスで形成された矩形ではなく、丸い形状の周りのカーブになります。 -

{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}

+{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}} -

仕様書のこのレベルでは、要素は <basic-shape> を適用するために浮動状態でなければなりません。これは多くの場合、単純な方法で代替されるという副作用があります。シェイプに対応したブラウザーがない場合、ユーザーは以前のように矩形のボックスの縁をコンテンツが回り込むように見えるでしょう。シェイプの対応がある場合は、見栄えが改善されます。

+仕様書のこのレベルでは、 `` を適用するためには要素が浮動状態でなければなりません。これは多くの場合、単純な方法で代替されるという副作用があります。シェイプに対応したブラウザーがない場合、ユーザーは以前のように矩形のボックスの縁を内容物が回り込むように見えるでしょう。シェイプの対応がある場合は、見栄えが改善されます。 -

基本的なシェイプ

+### 基本的なシェイプ -

circle(50%) の値は基本的なシェイプの例の一つです。仕様書では次のように、４つの <basic-shape> 値を定義しています。

+`circle(50%)` の値は基本的なシェイプの例の一つです。仕様書では次のように、 4 つの `` 値を定義しています。 -
    -
  • inset()
    • -
  • circle()
    • -
  • ellipse()
    • -
  • polygon()
    • -
+- `inset()` +- `circle()` +- `ellipse()` +- `polygon()` -

inset() の値を使用すると、テキストが矩形のシェイプに回り込みますが、オフセット値を追加すると、周囲のコンテンツの行ボックスを通常よりもオブジェクトに引き寄せて配置することができます。

+`inset()` の値を使用すると、テキストが矩形のシェイプに回り込みますが、オフセット値を追加すると、周囲の内容物の行ボックスを通常よりもオブジェクトに引き寄せて配置することができます。 -

すでに circle() が円形のシェイプを作成するのを見てきました。 ellipse() は基本的なつぶれた円です。これらの単純なシェイプで対応できない場合は、 polygon() を作成して好きなだけ複雑なシェイプにすることができます。

+すでに `circle()` が円形のシェイプを作成するのを見てきました。 `ellipse()` は基本的なつぶれた円です。これらの単純なシェイプで対応できない場合は、 `polygon()` を作成して好きなだけ複雑なシェイプにすることができます。 -

この章の基本シェイプのガイドで、利用できるそれぞれの基本シェイプとその作成方法を紹介します。

+この章の[基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes)で、利用できるそれぞれの基本シェイプとその作成方法を紹介します。 -

ボックス値からのシェイプの作成

+### ボックス値からのシェイプの作成 -

シェイプはボックス値の周りに作成することができます。従って、次のボックスの上にシェイプを作成することができます。

+シェイプはボックス値の周りに作成することができます。従って、次のボックスの上にシェイプを作成することができます。 -
    -
  • border-box
    • -
  • padding-box
    • -
  • content-box
    • -
  • margin-box
    • -
+- `border-box` +- `padding-box` +- `content-box` +- `margin-box` -

次の例では、 border-box の値を他の取りうる値に変更して、シェイプがボックスに近づいたり離れたりする様子を確認することができます。

+次の例では、 `border-box` の値を他の取りうる値に変更して、シェイプがボックスに近づいたり離れたりする様子を確認することができます。 -

{{EmbedGHLiveSample("css-examples/shapes/overview/box.html", '100%', 810)}}

+{{EmbedGHLiveSample("css-examples/shapes/overview/box.html", '100%', 810)}} -

ボックス値についてより詳しく知るには、ボックス値からのシェイプの作成を参照してください。

+ボックス値についてより詳しく知るには、[ボックス値からのシェイプの作成](/ja/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values)を参照してください。 -

画像からのシェイプの作成

+### 画像からのシェイプの作成 -

パスを作成するための面白い方法として、アルファチャネルを持つ画像を使用する方法があります。 — 文字列は画像の不透過な部分に回り込みます。これで画像の周りのコンテンツの回り込みの重ね合わせができたり、画像をページ上に表示させずに、純粋に注意深くポリゴンに変換することなく複雑なシェイプを作成する手段として利用したりすることができます。

+パスを作成するための面白い方法として、アルファチャネルを持つ画像を使用する方法があります。 — 文字列は画像の不透過な部分に回り込みます。これで画像の周りの内容物の回り込みの重ね合わせができたり、画像をページ上に表示させずに、純粋に注意深くポリゴンに変換することなく複雑なシェイプを作成する手段として利用したりすることができます。 -

なお、この方法で使用される画像は CORS に互換性がある必要があり、そうでなければ shape-outside は値として none が指定されたかのように動作し、シェイプを得ることはできません。

+なお、この方法で使用される画像は [CORS 互換性である](/ja/docs/Web/HTTP/CORS)必要があり、そうでなければ `shape-outside` は値として `none` が指定されたかのように動作し、シェイプを得ることはできません。 -

次の例では、完全に透過した領域がある画像を用い、この画像を shape-outside の URL 値として使用しています。シェイプは透過しない領域 — つまり、気球の画像の周りに作られます。

+次の例では、完全に透過した領域がある画像を用い、この画像を `shape-outside` の URL 値として使用しています。シェイプは透過しない領域 — つまり、気球の画像の周りに作られます。 -

{{EmbedGHLiveSample("css-examples/shapes/overview/image.html", '100%', 800)}}

+{{EmbedGHLiveSample("css-examples/shapes/overview/image.html", '100%', 800)}} -

shape-image-threshold

+#### `shape-image-threshold` -

shape-image-threshold プロパティは、シェイプに使われる画像の領域を定義する画像の透過性のしきい値を設定するために使用します。 shape-image-threshold が 0.0 (初期値) である場合、領域は完全に透過になります。値が 1.0 である場合は完全に不等価になります。この間の値ならば、半透過の領域をシェイプを定義する領域として設定することができます。

+`shape-image-threshold` プロパティは、シェイプに使われる画像の領域を定義する画像の透過性のしきい値を設定するために使用します。 `shape-image-threshold` が `0.0` (初期値) である場合、領域は完全に透過になります。値が `1.0` である場合は完全に不透過になります。この間の値ならば、半透過の領域をシェイプを定義する領域として設定することができます。 -

シェイプを定義する画像としてグラデーションを使用すると、しきい値が良く見えます。次の例では、しきい値を変更すると、選択した透明度のレベルに基づいてシェイプが変化するパスが変化します。

+シェイプを定義する画像としてグラデーションを使用すると、しきい値が良く見えます。次の例では、しきい値を変更すると、選択した透明度のレベルに基づいてシェイプが変化するパスが変化します。 -

{{EmbedGHLiveSample("css-examples/shapes/overview/threshold.html", '100%', 820)}}

+{{EmbedGHLiveSample("css-examples/shapes/overview/threshold.html", '100%', 820)}} -

画像からのシェイプの作成については、このガイドの画像からのシェイプでより深く見てみます。

+画像からのシェイプの作成については、このガイドの[画像からのシェイプ](/ja/docs/Web/CSS/CSS_Shapes/Shapes_From_Images)でより深く見てみます。 -

shape-margin プロパティ

+## `shape-margin` プロパティ -

{{cssxref("shape-margin")}} プロパティは shape-outside にマージンを追加します。これにより、シェイプを囲むコンテンツの行ボックスがシェイプから引き離されるため、短くなります。

+{{cssxref("shape-margin")}} プロパティは `shape-outside` にマージンを追加します。これにより、シェイプを囲む内容物の行ボックスがシェイプから引き離されるため、短くなります。 -

次の例では、基本的なシェイプに shape-margin を追加しました。マージンを変更して、初期値で設定されるシェイプの輪郭からテキストを引き離してみてください。

+次の例では、基本的なシェイプに `shape-margin` を追加しました。マージンを変更して、初期値で設定されるシェイプの輪郭からテキストを引き離してみてください。 -

{{EmbedGHLiveSample("css-examples/shapes/overview/shape-margin.html", '100%', 800)}}

+{{EmbedGHLiveSample("css-examples/shapes/overview/shape-margin.html", '100%', 800)}} -

作成されたコンテンツの浮動状態のアイテムとしての使用

+## 作成された内容物の浮動状態のアイテムとしての使用 -

上記の例では、シェイプを定義するために画像や見える要素、つまりページ上にシェイプを見ることができる形でシェイプを定義してきました。しかし、単に矩形ではない見えない線に沿ってテキストを流したい場合があるでしょう。これをシェイプを使って行うことができますが、この場合も浮動状態のアイテムが必要で、これを非表示にすることができます。これは文書に空の {{htmlelement("div")}} 又は {{htmlelement("span")}} のような冗長な要素を挿入することで実現できますが、おすすめは生成コンテンツを使うことです。つまり、 CSS のスタイルを使用して実現することができます。

+上記の例では、シェイプを定義するために画像や見える要素、つまりページ上にシェイプを見ることができる形でシェイプを定義してきました。しかし、単に矩形ではない見えない線に沿ってテキストを流したい場合があるでしょう。これをシェイプを使って行うことができますが、この場合も浮動状態のアイテムが必要で、これを非表示にすることができます。これは文書に空の {{htmlelement("div")}} または {{htmlelement("span")}} のような冗長な要素を挿入することで実現できますが、おすすめは生成された内容物を使うことです。つまり、 CSS のスタイルを使用して実現することができます。 -

次の例では、高さと幅が150pxの要素を挿入するために生成コンテンツを利用します。それから基本シェイプやボックス値、画像のアルファチャネルを使用して、文字列を折り返すシェイプを作成します。

+次の例では、高さと幅が 150px の要素を挿入するために生成されたを利用します。それから基本シェイプやボックス値、画像のアルファチャネルを使用して、文字列を折り返すシェイプを作成します。 -

{{EmbedGHLiveSample("css-examples/shapes/overview/generated-content.html", '100%', 850)}}

+{{EmbedGHLiveSample("css-examples/shapes/overview/generated-content.html", '100%', 850)}} -

clip-path との関係

+## `clip-path` との関係 -

シェイプを作成するために使われる基本シェイプとボックス値は、 {{cssxref("clip-path")}} の値として使われているものと同じです。従って、画像を使ってシェイプを作成したい場合や、画像の一部を切り抜きたい場合は、同じ値を使用してください。

+シェイプを作成するために使われる基本シェイプとボックス値は、 {{cssxref("clip-path")}} の値として使われているものと同じです。従って、画像を使ってシェイプを作成したい場合や、画像の一部を切り抜きたい場合は、同じ値を使用してください。 -

以下の画像は青い背景の四角い画像です。 shape-outside: ellipse(40% 50%); 及び clip-path: ellipse(40% 50%); を使用して、シェイプを定義するのに使われるのと同じ領域で切り取りを行うよう定義しました。

+以下の画像は青い背景の四角い画像です。 `shape-outside: ellipse(40% 50%);` および `clip-path: ellipse(40% 50%);` を使用して、シェイプを定義するのに使われるのと同じ領域で切り取りを行うよう定義しました。 -

{{EmbedGHLiveSample("css-examples/shapes/overview/clip-path.html", '100%', 800)}}

+{{EmbedGHLiveSample("css-examples/shapes/overview/clip-path.html", '100%', 800)}} -

シェイプのための開発者ツール

+## シェイプのための開発者ツール -

ブラウザーが CSS シェイプに対応するのと同時に、 Firefox は開発ツール内でシェイプパスエディターを公開しています。このツールはつまり、ページ内にあるシェイプを検査し、値の変更も行います。ポリゴンが正しくない場合は、シェイプエディターを使用して調整してから、新しい値をコピーして CSS に書き戻すことができます。

+ブラウザーが CSS シェイプに対応するのと同時に、 Firefox は開発ツール内で[シェイプパスエディター](/ja/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes)を公開しています。このツールはつまり、ページ内にあるシェイプを検査し、値の変更も行います。ポリゴンが正しくない場合は、シェイプエディターを使用して調整してから、新しい値をコピーして CSS に書き戻すことができます。 -

シェイプパスエディターは、 Firefox 60 で clip-path から生成されるシェイプと共に既定で有効になる予定です。 shape-outside で生成されるシェイプを使用することもできますが、 layout.css.shape-outside.enabled の設定を有効にした場合のみです。

+シェイプパスエディターは、 Firefox 60 で `clip-path` から生成されるシェイプと共に既定で有効になる予定です。 `shape-outside` で生成されるシェイプを使用することもできますが、 `layout.css.shape-outside.enabled` の設定を有効にした場合のみです。 -

将来の CSS シェイプ機能

+## 将来の CSS シェイプ機能 -

当初のシェイプ仕様書には、要素内にシェイプを作成するための shape-inside プロパティが含まれていました。このプロパティは、浮動状態ではないシェイプを作成することができる機能と共に、仕様書のレベル２に移動されました。当初は shape-inside が仕様書のレベル１に含まれていたため、ウェブ上のチュートリアルには両方のプロパティの詳細が書かれているかもしれません。

+当初のシェイプ仕様書には、要素内にシェイプを作成するための `shape-inside` プロパティが含まれていました。このプロパティは、浮動状態ではないシェイプを作成することができる機能と共に、仕様書の[レベル 2](https://drafts.csswg.org/css-shapes-2/) に移動されました。当初は `shape-inside` が仕様書のレベル 1 に含まれていたため、ウェブ上のチュートリアルには両方のプロパティの詳細が書かれているかもしれません。 -- cgit v1.2.3-54-g00ecf