From 9bf6693b2edd5281c1577856895c55653a41dc01 Mon Sep 17 00:00:00 2001 From: MDN Date: Sat, 19 Mar 2022 00:13:08 +0000 Subject: [CRON] sync translated content --- files/ja/web/css/_colon_host()/index.md | 80 ----- files/ja/web/css/_colon_host_function/index.md | 81 +++++ files/ja/web/css/attr()/index.md | 220 -------------- files/ja/web/css/attr/index.md | 221 ++++++++++++++ files/ja/web/css/basic-shape/circle()/index.md | 59 ---- files/ja/web/css/basic-shape/circle/index.md | 60 ++++ files/ja/web/css/basic-shape/ellipse()/index.md | 67 ----- files/ja/web/css/basic-shape/ellipse/index.md | 68 +++++ files/ja/web/css/basic-shape/inset()/index.md | 51 ---- files/ja/web/css/basic-shape/inset/index.md | 52 ++++ files/ja/web/css/basic-shape/polygon()/index.md | 51 ---- files/ja/web/css/basic-shape/polygon/index.md | 52 ++++ files/ja/web/css/calc()/index.md | 168 ----------- files/ja/web/css/calc/index.md | 169 +++++++++++ files/ja/web/css/clamp()/index.md | 111 ------- files/ja/web/css/clamp/index.md | 112 +++++++ files/ja/web/css/counter()/index.md | 123 -------- files/ja/web/css/counter/index.md | 124 ++++++++ files/ja/web/css/counters()/index.md | 166 ----------- files/ja/web/css/counters/index.md | 167 +++++++++++ files/ja/web/css/cross-fade()/index.md | 146 --------- files/ja/web/css/cross-fade/index.md | 147 +++++++++ files/ja/web/css/element()/index.md | 89 ------ files/ja/web/css/element/index.md | 90 ++++++ files/ja/web/css/env()/index.md | 222 -------------- files/ja/web/css/env/index.md | 223 ++++++++++++++ files/ja/web/css/filter-function/blur()/index.md | 59 ---- files/ja/web/css/filter-function/blur/index.md | 60 ++++ .../web/css/filter-function/brightness()/index.md | 60 ---- .../ja/web/css/filter-function/brightness/index.md | 61 ++++ .../ja/web/css/filter-function/contrast()/index.md | 60 ---- files/ja/web/css/filter-function/contrast/index.md | 61 ++++ .../web/css/filter-function/drop-shadow()/index.md | 76 ----- .../web/css/filter-function/drop-shadow/index.md | 77 +++++ .../web/css/filter-function/grayscale()/index.md | 59 ---- .../ja/web/css/filter-function/grayscale/index.md | 60 ++++ .../web/css/filter-function/hue-rotate()/index.md | 61 ---- .../ja/web/css/filter-function/hue-rotate/index.md | 62 ++++ files/ja/web/css/filter-function/invert()/index.md | 59 ---- files/ja/web/css/filter-function/invert/index.md | 60 ++++ .../ja/web/css/filter-function/opacity()/index.md | 62 ---- files/ja/web/css/filter-function/opacity/index.md | 63 ++++ .../ja/web/css/filter-function/saturate()/index.md | 60 ---- files/ja/web/css/filter-function/saturate/index.md | 61 ++++ files/ja/web/css/filter-function/sepia()/index.md | 59 ---- files/ja/web/css/filter-function/sepia/index.md | 60 ++++ files/ja/web/css/fit-content()/index.md | 113 ------- files/ja/web/css/fit-content_function/index.md | 114 +++++++ .../ja/web/css/gradient/conic-gradient()/index.md | 243 --------------- files/ja/web/css/gradient/conic-gradient/index.md | 243 +++++++++++++++ .../ja/web/css/gradient/linear-gradient()/index.md | 198 ------------- files/ja/web/css/gradient/linear-gradient/index.md | 198 +++++++++++++ .../ja/web/css/gradient/radial-gradient()/index.md | 143 --------- files/ja/web/css/gradient/radial-gradient/index.md | 143 +++++++++ .../gradient/repeating-conic-gradient()/index.md | 177 ----------- .../css/gradient/repeating-conic-gradient/index.md | 178 +++++++++++ .../gradient/repeating-linear-gradient()/index.md | 149 ---------- .../gradient/repeating-linear-gradient/index.md | 149 ++++++++++ .../gradient/repeating-radial-gradient()/index.md | 152 ---------- .../gradient/repeating-radial-gradient/index.md | 152 ++++++++++ files/ja/web/css/image/image()/index.md | 154 ---------- files/ja/web/css/image/image-set()/index.md | 93 ------ files/ja/web/css/image/image-set/index.md | 93 ++++++ files/ja/web/css/image/image/index.md | 155 ++++++++++ files/ja/web/css/image/paint()/index.md | 103 ------- files/ja/web/css/image/paint/index.md | 103 +++++++ files/ja/web/css/max()/index.md | 100 ------- files/ja/web/css/max/index.md | 101 +++++++ files/ja/web/css/min()/index.md | 99 ------- files/ja/web/css/min/index.md | 100 +++++++ files/ja/web/css/minmax()/index.md | 139 --------- files/ja/web/css/minmax/index.md | 140 +++++++++ files/ja/web/css/repeat()/index.md | 140 --------- files/ja/web/css/repeat/index.md | 141 +++++++++ files/ja/web/css/symbols()/index.md | 67 ----- files/ja/web/css/symbols/index.md | 68 +++++ .../web/css/transform-function/matrix()/index.md | 166 ----------- .../ja/web/css/transform-function/matrix/index.md | 167 +++++++++++ .../web/css/transform-function/matrix3d()/index.md | 254 ---------------- .../web/css/transform-function/matrix3d/index.md | 255 ++++++++++++++++ .../css/transform-function/perspective()/index.md | 173 ----------- .../css/transform-function/perspective/index.md | 174 +++++++++++ .../web/css/transform-function/rotate()/index.md | 287 ------------------ .../ja/web/css/transform-function/rotate/index.md | 288 ++++++++++++++++++ .../web/css/transform-function/rotate3d()/index.md | 326 -------------------- .../web/css/transform-function/rotate3d/index.md | 327 +++++++++++++++++++++ .../web/css/transform-function/rotatex()/index.md | 176 ----------- .../ja/web/css/transform-function/rotatex/index.md | 177 +++++++++++ .../web/css/transform-function/rotatey()/index.md | 176 ----------- .../ja/web/css/transform-function/rotatey/index.md | 177 +++++++++++ .../web/css/transform-function/rotatez()/index.md | 172 ----------- .../ja/web/css/transform-function/rotatez/index.md | 173 +++++++++++ .../ja/web/css/transform-function/scale()/index.md | 212 ------------- files/ja/web/css/transform-function/scale/index.md | 213 ++++++++++++++ .../web/css/transform-function/scale3d()/index.md | 171 ----------- .../ja/web/css/transform-function/scale3d/index.md | 172 +++++++++++ .../web/css/transform-function/scalex()/index.md | 164 ----------- .../ja/web/css/transform-function/scalex/index.md | 165 +++++++++++ .../web/css/transform-function/scaley()/index.md | 166 ----------- .../ja/web/css/transform-function/scaley/index.md | 167 +++++++++++ .../web/css/transform-function/scalez()/index.md | 142 --------- .../ja/web/css/transform-function/scalez/index.md | 143 +++++++++ .../ja/web/css/transform-function/skew()/index.md | 244 --------------- files/ja/web/css/transform-function/skew/index.md | 245 +++++++++++++++ .../ja/web/css/transform-function/skewx()/index.md | 182 ------------ files/ja/web/css/transform-function/skewx/index.md | 183 ++++++++++++ .../ja/web/css/transform-function/skewy()/index.md | 177 ----------- .../css/transform-function/translate()/index.md | 199 ------------- .../web/css/transform-function/translate/index.md | 200 +++++++++++++ .../css/transform-function/translate3d()/index.md | 152 ---------- .../css/transform-function/translate3d/index.md | 153 ++++++++++ .../css/transform-function/translatex()/index.md | 163 ---------- .../web/css/transform-function/translatex/index.md | 163 ++++++++++ .../css/transform-function/translatey()/index.md | 174 ----------- .../web/css/transform-function/translatey/index.md | 175 +++++++++++ .../css/transform-function/translatez()/index.md | 129 -------- .../web/css/transform-function/translatez/index.md | 130 ++++++++ files/ja/web/css/url()/index.md | 191 ------------ files/ja/web/css/url/index.md | 192 ++++++++++++ files/ja/web/css/var()/index.md | 85 ------ files/ja/web/css/var/index.md | 86 ++++++ 121 files changed, 8394 insertions(+), 8519 deletions(-) delete mode 100644 files/ja/web/css/_colon_host()/index.md create mode 100644 files/ja/web/css/_colon_host_function/index.md delete mode 100644 files/ja/web/css/attr()/index.md create mode 100644 files/ja/web/css/attr/index.md delete mode 100644 files/ja/web/css/basic-shape/circle()/index.md create mode 100644 files/ja/web/css/basic-shape/circle/index.md delete mode 100644 files/ja/web/css/basic-shape/ellipse()/index.md create mode 100644 files/ja/web/css/basic-shape/ellipse/index.md delete mode 100644 files/ja/web/css/basic-shape/inset()/index.md create mode 100644 files/ja/web/css/basic-shape/inset/index.md delete mode 100644 files/ja/web/css/basic-shape/polygon()/index.md create mode 100644 files/ja/web/css/basic-shape/polygon/index.md delete mode 100644 files/ja/web/css/calc()/index.md create mode 100644 files/ja/web/css/calc/index.md delete mode 100644 files/ja/web/css/clamp()/index.md create mode 100644 files/ja/web/css/clamp/index.md delete mode 100644 files/ja/web/css/counter()/index.md create mode 100644 files/ja/web/css/counter/index.md delete mode 100644 files/ja/web/css/counters()/index.md create mode 100644 files/ja/web/css/counters/index.md delete mode 100644 files/ja/web/css/cross-fade()/index.md create mode 100644 files/ja/web/css/cross-fade/index.md delete mode 100644 files/ja/web/css/element()/index.md create mode 100644 files/ja/web/css/element/index.md delete mode 100644 files/ja/web/css/env()/index.md create mode 100644 files/ja/web/css/env/index.md delete mode 100644 files/ja/web/css/filter-function/blur()/index.md create mode 100644 files/ja/web/css/filter-function/blur/index.md delete mode 100644 files/ja/web/css/filter-function/brightness()/index.md create mode 100644 files/ja/web/css/filter-function/brightness/index.md delete mode 100644 files/ja/web/css/filter-function/contrast()/index.md create mode 100644 files/ja/web/css/filter-function/contrast/index.md delete mode 100644 files/ja/web/css/filter-function/drop-shadow()/index.md create mode 100644 files/ja/web/css/filter-function/drop-shadow/index.md delete mode 100644 files/ja/web/css/filter-function/grayscale()/index.md create mode 100644 files/ja/web/css/filter-function/grayscale/index.md delete mode 100644 files/ja/web/css/filter-function/hue-rotate()/index.md create mode 100644 files/ja/web/css/filter-function/hue-rotate/index.md delete mode 100644 files/ja/web/css/filter-function/invert()/index.md create mode 100644 files/ja/web/css/filter-function/invert/index.md delete mode 100644 files/ja/web/css/filter-function/opacity()/index.md create mode 100644 files/ja/web/css/filter-function/opacity/index.md delete mode 100644 files/ja/web/css/filter-function/saturate()/index.md create mode 100644 files/ja/web/css/filter-function/saturate/index.md delete mode 100644 files/ja/web/css/filter-function/sepia()/index.md create mode 100644 files/ja/web/css/filter-function/sepia/index.md delete mode 100644 files/ja/web/css/fit-content()/index.md create mode 100644 files/ja/web/css/fit-content_function/index.md delete mode 100644 files/ja/web/css/gradient/conic-gradient()/index.md create mode 100644 files/ja/web/css/gradient/conic-gradient/index.md delete mode 100644 files/ja/web/css/gradient/linear-gradient()/index.md create mode 100644 files/ja/web/css/gradient/linear-gradient/index.md delete mode 100644 files/ja/web/css/gradient/radial-gradient()/index.md create mode 100644 files/ja/web/css/gradient/radial-gradient/index.md delete mode 100644 files/ja/web/css/gradient/repeating-conic-gradient()/index.md create mode 100644 files/ja/web/css/gradient/repeating-conic-gradient/index.md delete mode 100644 files/ja/web/css/gradient/repeating-linear-gradient()/index.md create mode 100644 files/ja/web/css/gradient/repeating-linear-gradient/index.md delete mode 100644 files/ja/web/css/gradient/repeating-radial-gradient()/index.md create mode 100644 files/ja/web/css/gradient/repeating-radial-gradient/index.md delete mode 100644 files/ja/web/css/image/image()/index.md delete mode 100644 files/ja/web/css/image/image-set()/index.md create mode 100644 files/ja/web/css/image/image-set/index.md create mode 100644 files/ja/web/css/image/image/index.md delete mode 100644 files/ja/web/css/image/paint()/index.md create mode 100644 files/ja/web/css/image/paint/index.md delete mode 100644 files/ja/web/css/max()/index.md create mode 100644 files/ja/web/css/max/index.md delete mode 100644 files/ja/web/css/min()/index.md create mode 100644 files/ja/web/css/min/index.md delete mode 100644 files/ja/web/css/minmax()/index.md create mode 100644 files/ja/web/css/minmax/index.md delete mode 100644 files/ja/web/css/repeat()/index.md create mode 100644 files/ja/web/css/repeat/index.md delete mode 100644 files/ja/web/css/symbols()/index.md create mode 100644 files/ja/web/css/symbols/index.md delete mode 100644 files/ja/web/css/transform-function/matrix()/index.md create mode 100644 files/ja/web/css/transform-function/matrix/index.md delete mode 100644 files/ja/web/css/transform-function/matrix3d()/index.md create mode 100644 files/ja/web/css/transform-function/matrix3d/index.md delete mode 100644 files/ja/web/css/transform-function/perspective()/index.md create mode 100644 files/ja/web/css/transform-function/perspective/index.md delete mode 100644 files/ja/web/css/transform-function/rotate()/index.md create mode 100644 files/ja/web/css/transform-function/rotate/index.md delete mode 100644 files/ja/web/css/transform-function/rotate3d()/index.md create mode 100644 files/ja/web/css/transform-function/rotate3d/index.md delete mode 100644 files/ja/web/css/transform-function/rotatex()/index.md create mode 100644 files/ja/web/css/transform-function/rotatex/index.md delete mode 100644 files/ja/web/css/transform-function/rotatey()/index.md create mode 100644 files/ja/web/css/transform-function/rotatey/index.md delete mode 100644 files/ja/web/css/transform-function/rotatez()/index.md create mode 100644 files/ja/web/css/transform-function/rotatez/index.md delete mode 100644 files/ja/web/css/transform-function/scale()/index.md create mode 100644 files/ja/web/css/transform-function/scale/index.md delete mode 100644 files/ja/web/css/transform-function/scale3d()/index.md create mode 100644 files/ja/web/css/transform-function/scale3d/index.md delete mode 100644 files/ja/web/css/transform-function/scalex()/index.md create mode 100644 files/ja/web/css/transform-function/scalex/index.md delete mode 100644 files/ja/web/css/transform-function/scaley()/index.md create mode 100644 files/ja/web/css/transform-function/scaley/index.md delete mode 100644 files/ja/web/css/transform-function/scalez()/index.md create mode 100644 files/ja/web/css/transform-function/scalez/index.md delete mode 100644 files/ja/web/css/transform-function/skew()/index.md create mode 100644 files/ja/web/css/transform-function/skew/index.md delete mode 100644 files/ja/web/css/transform-function/skewx()/index.md create mode 100644 files/ja/web/css/transform-function/skewx/index.md delete mode 100644 files/ja/web/css/transform-function/skewy()/index.md delete mode 100644 files/ja/web/css/transform-function/translate()/index.md create mode 100644 files/ja/web/css/transform-function/translate/index.md delete mode 100644 files/ja/web/css/transform-function/translate3d()/index.md create mode 100644 files/ja/web/css/transform-function/translate3d/index.md delete mode 100644 files/ja/web/css/transform-function/translatex()/index.md create mode 100644 files/ja/web/css/transform-function/translatex/index.md delete mode 100644 files/ja/web/css/transform-function/translatey()/index.md create mode 100644 files/ja/web/css/transform-function/translatey/index.md delete mode 100644 files/ja/web/css/transform-function/translatez()/index.md create mode 100644 files/ja/web/css/transform-function/translatez/index.md delete mode 100644 files/ja/web/css/url()/index.md create mode 100644 files/ja/web/css/url/index.md delete mode 100644 files/ja/web/css/var()/index.md create mode 100644 files/ja/web/css/var/index.md (limited to 'files/ja/web') diff --git a/files/ja/web/css/_colon_host()/index.md b/files/ja/web/css/_colon_host()/index.md deleted file mode 100644 index 138003d847..0000000000 --- a/files/ja/web/css/_colon_host()/index.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: ':host()' -slug: Web/CSS/:host() -tags: - - ':host()' - - CSS - - Layout - - Pseudo-class - - Reference - - Selector - - Web -browser-compat: css.selectors.hostfunction -translation_of: Web/CSS/:host() ---- -{{CSSRef}} - -**`:host()`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)関数で、その中で使われている CSS を含む[シャドウ DOM](/ja/docs/Web/Web_Components/Using_shadow_DOM) のシャドウホストを選択します（従ってカスタム要素をそのシャドウ DOM 内部から選択できます）。ただし、関数の引数として与えられたセレクターがシャドウホストと一致した場合のみです。 - -この最も明白な使用法は、特定のカスタム要素インスタンスにのみクラス名を付け、関数の引数として関連するクラスセレクターを指定することです。特定の祖先の内部にあるカスタム要素のインスタンスのみを選択するために、子孫セレクター式でこれを使用することはできません。それは {{CSSxRef(":host-context()")}} の仕事です。 - -> **Note:** これは、シャドウ DOM の外部で使用されても効果がありません。 - -```css -/* セレクターの引数に一致する場合のみ、 - シャドウルートのホストを選択 */ -:host(.special-custom-element) { - font-weight: bold; -} -``` - -## 構文 - -{{CSSSyntax}} - -## 例 - -### シャドウホストの選択的なスタイル付け - -以下のスニペットは、 [host-selectors example](https://github.com/mdn/web-components-examples/tree/master/host-selectors) ([ライブでも確認](https://mdn.github.io/web-components-examples/host-selectors/)) から引用したものです。 - -この例では、テキストを囲むことができるシンプルなカスタム要素 `` を用意しています。 - -```html -

Host selectors example

-``` - -要素のコンストラクター内で `style` と `span` の各要素を作成し、 `span` にカスタム要素の内容を入れ、 `style` 要素にいくつかの CSS ルールを入れています。 - -```js -let style = document.createElement('style'); -let span = document.createElement('span'); -span.textContent = this.textContent; - -const shadowRoot = this.attachShadow({mode: 'open'}); -shadowRoot.appendChild(style); -shadowRoot.appendChild(span); - -style.textContent = 'span:hover { text-decoration: underline; }' + - ':host-context(h1) { font-style: italic; }' + - ':host-context(h1):after { content: " - no links in headers!" }' + - ':host-context(article, aside) { color: gray; }' + - ':host(.footer) { color : red; }' + - ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }'; -``` - -ルール `:host(.footer) { color : red; }` は、文書内の `` 要素（この例ではシャドウホスト）のインスタンスで `footer` クラスがあるものにスタイルを設定します。このルールを使って {{htmlelement("footer")}} 内の要素のインスタンスに特殊な色を設定しています。 - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [ウェブコンポーネント](/ja/docs/Web/Web_Components) -- {{CSSxRef(":host")}} -- {{CSSxRef(":host-context()")}} diff --git a/files/ja/web/css/_colon_host_function/index.md b/files/ja/web/css/_colon_host_function/index.md new file mode 100644 index 0000000000..66823eb0b1 --- /dev/null +++ b/files/ja/web/css/_colon_host_function/index.md @@ -0,0 +1,81 @@ +--- +title: ':host()' +slug: Web/CSS/:host_function +tags: + - ':host()' + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: Web/CSS/:host() +original_slug: Web/CSS/:host() +browser-compat: css.selectors.hostfunction +--- +{{CSSRef}} + +**`:host()`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)関数で、その中で使われている CSS を含む[シャドウ DOM](/ja/docs/Web/Web_Components/Using_shadow_DOM) のシャドウホストを選択します（従ってカスタム要素をそのシャドウ DOM 内部から選択できます）。ただし、関数の引数として与えられたセレクターがシャドウホストと一致した場合のみです。 + +この最も明白な使用法は、特定のカスタム要素インスタンスにのみクラス名を付け、関数の引数として関連するクラスセレクターを指定することです。特定の祖先の内部にあるカスタム要素のインスタンスのみを選択するために、子孫セレクター式でこれを使用することはできません。それは {{CSSxRef(":host-context()")}} の仕事です。 + +> **Note:** これは、シャドウ DOM の外部で使用されても効果がありません。 + +```css +/* セレクターの引数に一致する場合のみ、 + シャドウルートのホストを選択 */ +:host(.special-custom-element) { + font-weight: bold; +} +``` + +## 構文 + +{{CSSSyntax}} + +## 例 + +### シャドウホストの選択的なスタイル付け + +以下のスニペットは、 [host-selectors example](https://github.com/mdn/web-components-examples/tree/master/host-selectors) ([ライブでも確認](https://mdn.github.io/web-components-examples/host-selectors/)) から引用したものです。 + +この例では、テキストを囲むことができるシンプルなカスタム要素 `` を用意しています。 + +```html +

Host selectors example

+``` + +要素のコンストラクター内で `style` と `span` の各要素を作成し、 `span` にカスタム要素の内容を入れ、 `style` 要素にいくつかの CSS ルールを入れています。 + +```js +let style = document.createElement('style'); +let span = document.createElement('span'); +span.textContent = this.textContent; + +const shadowRoot = this.attachShadow({mode: 'open'}); +shadowRoot.appendChild(style); +shadowRoot.appendChild(span); + +style.textContent = 'span:hover { text-decoration: underline; }' + + ':host-context(h1) { font-style: italic; }' + + ':host-context(h1):after { content: " - no links in headers!" }' + + ':host-context(article, aside) { color: gray; }' + + ':host(.footer) { color : red; }' + + ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }'; +``` + +ルール `:host(.footer) { color : red; }` は、文書内の `` 要素（この例ではシャドウホスト）のインスタンスで `footer` クラスがあるものにスタイルを設定します。このルールを使って {{htmlelement("footer")}} 内の要素のインスタンスに特殊な色を設定しています。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ウェブコンポーネント](/ja/docs/Web/Web_Components) +- {{CSSxRef(":host")}} +- {{CSSxRef(":host-context()")}} diff --git a/files/ja/web/css/attr()/index.md b/files/ja/web/css/attr()/index.md deleted file mode 100644 index e9f97a85f2..0000000000 --- a/files/ja/web/css/attr()/index.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -title: attr() -slug: Web/CSS/attr() -tags: - - CSS - - CSS 関数 - - 関数 - - レイアウト - - リファレンス - - ウェブ - - attr -browser-compat: css.types.attr -translation_of: Web/CSS/attr() ---- -{{CSSRef}} - -> **Note:** `attr()` 関数はどの CSS プロパティでも使用することができますが、 {{CSSxRef("content")}} 以外のプロパティでの対応は実験的であり、型や単位の引数の対応はまちまちです。 - -**`attr()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、選択された要素の属性の値を受け取り、スタイルシートの中で使うために使用されます。[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)で使用することもでき、その場合は擬似要素を作る元になった要素の属性値が返されます。 - -```css -/* 単純な使用法 */ -attr(data-count); -attr(title); - -/* 型付き */ -attr(src url); -attr(data-count number); -attr(data-width px); - -/* 代替値付き */ -attr(data-count number, 0); -attr(src url, ""); -attr(data-width px, inherit); -attr(data-something, "default"); -``` - -## 構文 - -### 値 - -- `attribute-name` - - : CSS で参照する、 HTML 要素の属性名です。 -- `` {{Experimental_Inline}} - - - : 属性値の型またはその単位を示すキーワードです。 HTML では暗黙に単位を持つ属性があります。属性に対して無効な値を `` で与えると、 `attr()` 式も無効になります。省略すると既定値の `string` になります。有効な値は以下の通りです。 - - - `string` - - - : 属性値は CSS {{CSSxRef("<string>")}} として扱われます。再解析はされず、特に文字は CSS エスケープで他の文字に変換されることなく、そのまま使用されます。 - - 既定値は空文字列です。 - - - `color` {{Experimental_Inline}} - - - : 属性値はハッシュ (3 値または 6 値のハッシュ) またはキーワードとして解析されます。妥当な CSS の {{CSSxRef("<string>")}} 値でなければなりません。前後の空白は除去されます。 - - 既定値は `currentcolor` です。 - - - `url` {{Experimental_Inline}} - - - : 属性値は、 CSS の `url()` 関数の中で使用される文字列として解析されます。 - 相対 URL は、スタイルシートからの相対ではなく、元の文書からの相対で解決されます。 - 前後の空白は除去されます。 - - 既定値は、一般的なエラーの状況で存在しない文書を指す `about:invalid` の URL です。 - - - `integer` {{Experimental_Inline}} - - - : 属性値は CSS の {{CSSxRef("<integer>")}} として解析されます。妥当ではない場合、つまり整数ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 - 前後の空白は除去されます。 - - 既定値は `0`、または `0` が妥当な値ではないプロパティでは、プロパティの最小値です。 - - - `number` {{Experimental_Inline}} - - - : 属性値は CSS の {{CSSxRef("<number>")}} として解析されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 - 前後の空白は除去されます。 - - 既定値は `0`、または `0` が妥当な値ではないプロパティでは、プロパティの最小値です。 - - - `length` {{Experimental_Inline}} - - - : 属性値は CSS の {{CSSxRef("<length>")}} の距離として単位を含んで (`12.5em` など) 解釈されます。妥当ではない場合、つまり長さではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 - 指定された値が相対的な長さの場合は、 `attr()` は絶対的な値に変換して計算します。
- 前後の空白は除去されます。 - - 既定値は `0`、または `0` が妥当な値ではないプロパティでは、プロパティの最小値です。 - - - `em`, `ex`, `px`, `rem`, `vw`, `vh`, `vmin`, `vmax`, `mm`, `cm`, `in`, `pt`, or `pc` {{Experimental_Inline}} - - - : 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (`12.5` など) で解析され、特定の単位を付けた {{CSSxRef("<length>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 - 指定された値が相対的な長さの場合は、 `attr()` は絶対的な値に変換して計算します。
- 前後の空白は除去されます。 - - 既定値は `0`、または `0` が妥当な値ではないプロパティでは、プロパティの最小値です。 - - - `angle` {{Experimental_Inline}} - - - : 属性値は CSS の {{CSSxRef("<angle>")}} の大きさとして単位を含んで (`30.5deg` など) 解釈されます。妥当ではない場合、つまり角度ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 - 前後の空白は除去されます。 - - 既定値は `0deg`、または `0deg` が妥当な値ではないプロパティでは、プロパティの最小値です。 - - - `deg`, `grad`, `rad` {{Experimental_Inline}} - - - : 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (`12.5` など) で解析され、特定の単位を付けた {{CSSxRef("<angle>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 - 前後の空白は除去されます。 - - 既定値は `0deg`、または `0deg` が妥当な値ではないプロパティでは、プロパティの最小値です。 - - - `time` {{Experimental_Inline}} - - - : 属性値は CSS の {{CSSxRef("<time>")}} の大きさとして単位を含んで (`30.5ms` など) 解釈されます。妥当ではない場合、つまり時間ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 - 前後の空白は除去されます。 - - 既定値は `0s`、または `0s` が妥当な値ではないプロパティでは、プロパティの最小値です。 - - - `s`, `ms` {{Experimental_Inline}} - - - : 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (`12.5` など) で解析され、特定の単位を付けた {{CSSxRef("<time>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 - 前後の空白は除去されます。 - - 既定値は `0s`、または `0s` が妥当な値ではないプロパティでは、プロパティの最小値です。 - - - `frequency` {{Experimental_Inline}} - - - : 属性値は CSS の {{CSSxRef("<frequency>")}} の大きさとして単位を含んで (`30.5ms` など) 解釈されます。妥当ではない場合、つまり周波数ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 - - 既定値は `0Hz`、または `0Hz` が妥当な値ではないプロパティでは、プロパティの最小値です。 - - - `Hz`, `kHz` {{Experimental_Inline}} - - - : 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (`12.5` など) で解析され、特定の単位を付けた {{CSSxRef("<frequency>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 - 前後の空白は除去されます。 - - 既定値は `0Hz`、または `0Hz` が妥当な値ではないプロパティでは、プロパティの最小値です。 - - - `%` {{Experimental_Inline}} - - - : 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (`12.5` など) で解析され、 {{CSSxRef("<percentage>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 - 指定された値が長さの場合は、 `attr()` は絶対的な値に変換して計算します。 - 前後の空白は除去されます。 - - 既定値は `0%`、または `0%` が妥当な値ではないプロパティでは、プロパティの最小値です。 - -- `` {{Experimental_Inline}} - - : 関連する属性が見つからないか、無効値を含むときに使われる値です。設定されていない場合は、 CSS は各 `` で定義された既定値を使います。 - -### 形式文法 - -{{CSSSyntax}} - -## 例 - -

content プロパティ

- -#### HTML - -```html -

world

-``` - -#### CSS - -```css -[data-foo]::before { - content: attr(data-foo) " "; -} -``` - -#### 結果 - -{{EmbedLiveSample("content_property", "100%", 50)}} - -

<color> 値

- -{{SeeCompatTable}} - -#### HTML - -```html -
background expected to be red if your browser does not support advanced usage of attr()
-``` - -#### CSS - -```css hidden -.background { - height: 100vh; -} -``` - -```css -.background { - background-color: red; -} - -.background[data-background] { - background-color: attr(data-background color, red); -} -``` - -#### 結果 - -{{EmbedLiveSample("color_value", "100%", 50)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [属性セレクター](/ja/docs/Web/CSS/Attribute_selectors) -- [HTML `data-*` 属性](/ja/docs/Web/HTML/Global_attributes/data-*) -- [SVG `data-*` 属性](/ja/docs/Web/SVG/Attribute/data-*) diff --git a/files/ja/web/css/attr/index.md b/files/ja/web/css/attr/index.md new file mode 100644 index 0000000000..890c73f11e --- /dev/null +++ b/files/ja/web/css/attr/index.md @@ -0,0 +1,221 @@ +--- +title: attr() +slug: Web/CSS/attr +tags: + - CSS + - CSS 関数 + - 関数 + - レイアウト + - リファレンス + - ウェブ + - attr +translation_of: Web/CSS/attr() +original_slug: Web/CSS/attr() +browser-compat: css.types.attr +--- +{{CSSRef}} + +> **Note:** `attr()` 関数はどの CSS プロパティでも使用することができますが、 {{CSSxRef("content")}} 以外のプロパティでの対応は実験的であり、型や単位の引数の対応はまちまちです。 + +**`attr()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、選択された要素の属性の値を受け取り、スタイルシートの中で使うために使用されます。[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)で使用することもでき、その場合は擬似要素を作る元になった要素の属性値が返されます。 + +```css +/* 単純な使用法 */ +attr(data-count); +attr(title); + +/* 型付き */ +attr(src url); +attr(data-count number); +attr(data-width px); + +/* 代替値付き */ +attr(data-count number, 0); +attr(src url, ""); +attr(data-width px, inherit); +attr(data-something, "default"); +``` + +## 構文 + +### 値 + +- `attribute-name` + - : CSS で参照する、 HTML 要素の属性名です。 +- `` {{Experimental_Inline}} + + - : 属性値の型またはその単位を示すキーワードです。 HTML では暗黙に単位を持つ属性があります。属性に対して無効な値を `` で与えると、 `attr()` 式も無効になります。省略すると既定値の `string` になります。有効な値は以下の通りです。 + + - `string` + + - : 属性値は CSS {{CSSxRef("<string>")}} として扱われます。再解析はされず、特に文字は CSS エスケープで他の文字に変換されることなく、そのまま使用されます。 + + 既定値は空文字列です。 + + - `color` {{Experimental_Inline}} + + - : 属性値はハッシュ (3 値または 6 値のハッシュ) またはキーワードとして解析されます。妥当な CSS の {{CSSxRef("<string>")}} 値でなければなりません。前後の空白は除去されます。 + + 既定値は `currentcolor` です。 + + - `url` {{Experimental_Inline}} + + - : 属性値は、 CSS の `url()` 関数の中で使用される文字列として解析されます。 + 相対 URL は、スタイルシートからの相対ではなく、元の文書からの相対で解決されます。 + 前後の空白は除去されます。 + + 既定値は、一般的なエラーの状況で存在しない文書を指す `about:invalid` の URL です。 + + - `integer` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<integer>")}} として解析されます。妥当ではない場合、つまり整数ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 前後の空白は除去されます。 + + 既定値は `0`、または `0` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `number` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<number>")}} として解析されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 前後の空白は除去されます。 + + 既定値は `0`、または `0` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `length` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<length>")}} の距離として単位を含んで (`12.5em` など) 解釈されます。妥当ではない場合、つまり長さではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 指定された値が相対的な長さの場合は、 `attr()` は絶対的な値に変換して計算します。
+ 前後の空白は除去されます。 + + 既定値は `0`、または `0` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `em`, `ex`, `px`, `rem`, `vw`, `vh`, `vmin`, `vmax`, `mm`, `cm`, `in`, `pt`, or `pc` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (`12.5` など) で解析され、特定の単位を付けた {{CSSxRef("<length>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 指定された値が相対的な長さの場合は、 `attr()` は絶対的な値に変換して計算します。
+ 前後の空白は除去されます。 + + 既定値は `0`、または `0` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `angle` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<angle>")}} の大きさとして単位を含んで (`30.5deg` など) 解釈されます。妥当ではない場合、つまり角度ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 前後の空白は除去されます。 + + 既定値は `0deg`、または `0deg` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `deg`, `grad`, `rad` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (`12.5` など) で解析され、特定の単位を付けた {{CSSxRef("<angle>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 前後の空白は除去されます。 + + 既定値は `0deg`、または `0deg` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `time` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<time>")}} の大きさとして単位を含んで (`30.5ms` など) 解釈されます。妥当ではない場合、つまり時間ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 前後の空白は除去されます。 + + 既定値は `0s`、または `0s` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `s`, `ms` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (`12.5` など) で解析され、特定の単位を付けた {{CSSxRef("<time>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 前後の空白は除去されます。 + + 既定値は `0s`、または `0s` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `frequency` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<frequency>")}} の大きさとして単位を含んで (`30.5ms` など) 解釈されます。妥当ではない場合、つまり周波数ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + + 既定値は `0Hz`、または `0Hz` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `Hz`, `kHz` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (`12.5` など) で解析され、特定の単位を付けた {{CSSxRef("<frequency>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 前後の空白は除去されます。 + + 既定値は `0Hz`、または `0Hz` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `%` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (`12.5` など) で解析され、 {{CSSxRef("<percentage>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 指定された値が長さの場合は、 `attr()` は絶対的な値に変換して計算します。 + 前後の空白は除去されます。 + + 既定値は `0%`、または `0%` が妥当な値ではないプロパティでは、プロパティの最小値です。 + +- `` {{Experimental_Inline}} + - : 関連する属性が見つからないか、無効値を含むときに使われる値です。設定されていない場合は、 CSS は各 `` で定義された既定値を使います。 + +### 形式文法 + +{{CSSSyntax}} + +## 例 + +

content プロパティ

+ +#### HTML + +```html +

world

+``` + +#### CSS + +```css +[data-foo]::before { + content: attr(data-foo) " "; +} +``` + +#### 結果 + +{{EmbedLiveSample("content_property", "100%", 50)}} + +

<color> 値

+ +{{SeeCompatTable}} + +#### HTML + +```html +
background expected to be red if your browser does not support advanced usage of attr()
+``` + +#### CSS + +```css hidden +.background { + height: 100vh; +} +``` + +```css +.background { + background-color: red; +} + +.background[data-background] { + background-color: attr(data-background color, red); +} +``` + +#### 結果 + +{{EmbedLiveSample("color_value", "100%", 50)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [属性セレクター](/ja/docs/Web/CSS/Attribute_selectors) +- [HTML `data-*` 属性](/ja/docs/Web/HTML/Global_attributes/data-*) +- [SVG `data-*` 属性](/ja/docs/Web/SVG/Attribute/data-*) diff --git a/files/ja/web/css/basic-shape/circle()/index.md b/files/ja/web/css/basic-shape/circle()/index.md deleted file mode 100644 index 5c1b236415..0000000000 --- a/files/ja/web/css/basic-shape/circle()/index.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: circle() -slug: Web/CSS/basic-shape/circle() -tags: - - CSS - - CSS データ型 - - CSS シェイプ - - circle - - CSS 関数 - - データ型 - - Reference -browser-compat: css.types.basic-shape.circle -translation_of: Web/CSS/basic-shape/circle() ---- -{{CSSRef}} - -**`circle()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("<basic-shape>")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。 - -## 構文 - -```css -shape-outside: circle(50%); -clip-path: circle(6rem at 12rem 8rem); -``` - -### 値 - -- `` - - - : {{cssxref("length")}}、{{cssxref("percentage")}}、または `closest-side` および `farthest-side` の値の何れかです。 - - - `closest-side` - - : シェイプの中心から参照ボックスの最も近い辺までの長さを使用します。円の場合は、あらゆる軸で最も近い辺となります。 - - `farthest-side` - - : シェイプの中心から参照ボックスの最も遠い辺までの長さを使用します。円の場合は、あらゆる軸で最も近い辺となります。 - -- `` - - : 円の中心を移動します。{{cssxref("length")}}、{{cssxref("percentage")}}、または `left` のような値の何れかです。 - -## 例 - -### 基本的な円 - -下の例では、{{cssxref("shape-outside")}} プロパティの値が `circle(50%)` となっており、浮動要素に円を定義して、テキストが回り込むようになっています。 - -{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} -- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) diff --git a/files/ja/web/css/basic-shape/circle/index.md b/files/ja/web/css/basic-shape/circle/index.md new file mode 100644 index 0000000000..ac8ecca800 --- /dev/null +++ b/files/ja/web/css/basic-shape/circle/index.md @@ -0,0 +1,60 @@ +--- +title: circle() +slug: Web/CSS/basic-shape/circle +tags: + - CSS + - CSS データ型 + - CSS シェイプ + - circle + - CSS 関数 + - データ型 + - Reference +translation_of: Web/CSS/basic-shape/circle() +original_slug: Web/CSS/basic-shape/circle() +browser-compat: css.types.basic-shape.circle +--- +{{CSSRef}} + +**`circle()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("<basic-shape>")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。 + +## 構文 + +```css +shape-outside: circle(50%); +clip-path: circle(6rem at 12rem 8rem); +``` + +### 値 + +- `` + + - : {{cssxref("length")}}、{{cssxref("percentage")}}、または `closest-side` および `farthest-side` の値の何れかです。 + + - `closest-side` + - : シェイプの中心から参照ボックスの最も近い辺までの長さを使用します。円の場合は、あらゆる軸で最も近い辺となります。 + - `farthest-side` + - : シェイプの中心から参照ボックスの最も遠い辺までの長さを使用します。円の場合は、あらゆる軸で最も近い辺となります。 + +- `` + - : 円の中心を移動します。{{cssxref("length")}}、{{cssxref("percentage")}}、または `left` のような値の何れかです。 + +## 例 + +### 基本的な円 + +下の例では、{{cssxref("shape-outside")}} プロパティの値が `circle(50%)` となっており、浮動要素に円を定義して、テキストが回り込むようになっています。 + +{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} +- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) diff --git a/files/ja/web/css/basic-shape/ellipse()/index.md b/files/ja/web/css/basic-shape/ellipse()/index.md deleted file mode 100644 index 54b5f5b6b4..0000000000 --- a/files/ja/web/css/basic-shape/ellipse()/index.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: ellipse() -slug: Web/CSS/basic-shape/ellipse() -tags: - - CSS - - CSS データ型 - - CSS シェイプ - - ellipse - - CSS 関数 - - データ型 - - Reference -browser-compat: css.types.basic-shape.ellipse -translation_of: Web/CSS/basic-shape/ellipse() ---- -{{CSSRef}} - -**`ellipse()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("<basic-shape>")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。 - -## 構文 - -```css -shape-outside: ellipse(40% 50% at left); -shape-outside: ellipse(closest-side farthest-side at 30%); -``` - -楕円は基本的に円を潰したものなので、`ellipse()` は、2 つの半径 x と y を指定しなければならないことを除けば、 {{cssxref("basic-shape/circle()","circle()")}} とよく似た方法で動作します。 - -### 値 - -- `` - - - : 2 つの半径で、x および y をその順で指定します。{{cssxref("length")}}、{{cssxref("percentage")}}、または `closest-side` および `farthest-side` の値の何れかです。 - - - `closest-side` - - : シェイプの中心から参照ボックスの最も近い辺までの長さを使用します。楕円の場合は、半径の軸で最も近い辺となります。 - - `farthest-side` - - : シェイプの中心から参照ボックスの最も遠い辺までの長さを使用します。楕円の場合は、半径の軸で最も遠い辺となります。 - -- `` - - : 円の中心を移動します。{{cssxref("length")}}、{{cssxref("percentage")}}、または `left` のような値の何れかです。 - -## 例 - -### 基本的な ellipse() の例 - -この例では、x 半径が 40%、y 半径が 50%、位置が左の楕円を示しています。これは、楕円の中心がボックスの左端にあることを意味しており、テキストを回り込ませるための半楕円の形になります。これらの値を変更すると、楕円の変化を確認することができます。 - -{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse.html", '100%', 800)}} - -### closest-side / farthest-side の値の使用 - -キーワード値の `closest-side` と `farthest-side` は、浮動要素の参照ボックスの大きさに基づいて、素早く楕円を作成するのに便利です。 - -{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse-keywords.html", '100%', 800)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} -- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) diff --git a/files/ja/web/css/basic-shape/ellipse/index.md b/files/ja/web/css/basic-shape/ellipse/index.md new file mode 100644 index 0000000000..3fb705600e --- /dev/null +++ b/files/ja/web/css/basic-shape/ellipse/index.md @@ -0,0 +1,68 @@ +--- +title: ellipse() +slug: Web/CSS/basic-shape/ellipse +tags: + - CSS + - CSS データ型 + - CSS シェイプ + - ellipse + - CSS 関数 + - データ型 + - Reference +translation_of: Web/CSS/basic-shape/ellipse() +original_slug: Web/CSS/basic-shape/ellipse() +browser-compat: css.types.basic-shape.ellipse +--- +{{CSSRef}} + +**`ellipse()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("<basic-shape>")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。 + +## 構文 + +```css +shape-outside: ellipse(40% 50% at left); +shape-outside: ellipse(closest-side farthest-side at 30%); +``` + +楕円は基本的に円を潰したものなので、`ellipse()` は、2 つの半径 x と y を指定しなければならないことを除けば、 {{cssxref("basic-shape/circle()","circle()")}} とよく似た方法で動作します。 + +### 値 + +- `` + + - : 2 つの半径で、x および y をその順で指定します。{{cssxref("length")}}、{{cssxref("percentage")}}、または `closest-side` および `farthest-side` の値の何れかです。 + + - `closest-side` + - : シェイプの中心から参照ボックスの最も近い辺までの長さを使用します。楕円の場合は、半径の軸で最も近い辺となります。 + - `farthest-side` + - : シェイプの中心から参照ボックスの最も遠い辺までの長さを使用します。楕円の場合は、半径の軸で最も遠い辺となります。 + +- `` + - : 円の中心を移動します。{{cssxref("length")}}、{{cssxref("percentage")}}、または `left` のような値の何れかです。 + +## 例 + +### 基本的な ellipse() の例 + +この例では、x 半径が 40%、y 半径が 50%、位置が左の楕円を示しています。これは、楕円の中心がボックスの左端にあることを意味しており、テキストを回り込ませるための半楕円の形になります。これらの値を変更すると、楕円の変化を確認することができます。 + +{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse.html", '100%', 800)}} + +### closest-side / farthest-side の値の使用 + +キーワード値の `closest-side` と `farthest-side` は、浮動要素の参照ボックスの大きさに基づいて、素早く楕円を作成するのに便利です。 + +{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse-keywords.html", '100%', 800)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} +- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) diff --git a/files/ja/web/css/basic-shape/inset()/index.md b/files/ja/web/css/basic-shape/inset()/index.md deleted file mode 100644 index 7afdcbb0eb..0000000000 --- a/files/ja/web/css/basic-shape/inset()/index.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: inset() -slug: Web/CSS/basic-shape/inset() -tags: - - CSS - - CSS データ型 - - CSS シェイプ - - inset - - CSS 関数 - - データ型 - - Reference -browser-compat: css.types.basic-shape.inset -translation_of: Web/CSS/basic-shape/inset() ---- -{{CSSRef}} - -**`inset()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("<basic-shape>")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。内部の矩形を定義します。 - -## 構文 - -```css -shape-outside: inset(20px 50px 10px 0 round 50px); -``` - -### 値 - -- `{1,4}` - - : 4 つの引数がすべて与えられた場合、参照ボックスの内側に向けた上、右、下、左のオフセットを表し、内部の矩形の辺の位置を定義します。これらの引数は margin 一括指定の構文に従っており、4 つの内側の位置すべてに 1 つ、2 つ、または 4 つの値を設定することができます。 -- `` - - : オプションの [``](/ja/docs/Web/CSS/border-radius) 引数は、 border-radius 一括指定の構文を使用して内部の矩形の角の丸みを定義します。 - -## 例 - -### 基本的な内側の矩形の例 - -下記の例では、浮動要素の上にコンテンツを引き寄せるために、`inset()` のシェイプを使用しています。オフセット値を変更するとシェイプの変化を確認することができます。 - -{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset.html", '100%', 800)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} -- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) diff --git a/files/ja/web/css/basic-shape/inset/index.md b/files/ja/web/css/basic-shape/inset/index.md new file mode 100644 index 0000000000..06de859d46 --- /dev/null +++ b/files/ja/web/css/basic-shape/inset/index.md @@ -0,0 +1,52 @@ +--- +title: inset() +slug: Web/CSS/basic-shape/inset +tags: + - CSS + - CSS データ型 + - CSS シェイプ + - inset + - CSS 関数 + - データ型 + - Reference +translation_of: Web/CSS/basic-shape/inset() +original_slug: Web/CSS/basic-shape/inset() +browser-compat: css.types.basic-shape.inset +--- +{{CSSRef}} + +**`inset()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("<basic-shape>")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。内部の矩形を定義します。 + +## 構文 + +```css +shape-outside: inset(20px 50px 10px 0 round 50px); +``` + +### 値 + +- `{1,4}` + - : 4 つの引数がすべて与えられた場合、参照ボックスの内側に向けた上、右、下、左のオフセットを表し、内部の矩形の辺の位置を定義します。これらの引数は margin 一括指定の構文に従っており、4 つの内側の位置すべてに 1 つ、2 つ、または 4 つの値を設定することができます。 +- `` + - : オプションの [``](/ja/docs/Web/CSS/border-radius) 引数は、 border-radius 一括指定の構文を使用して内部の矩形の角の丸みを定義します。 + +## 例 + +### 基本的な内側の矩形の例 + +下記の例では、浮動要素の上にコンテンツを引き寄せるために、`inset()` のシェイプを使用しています。オフセット値を変更するとシェイプの変化を確認することができます。 + +{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset.html", '100%', 800)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} +- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) diff --git a/files/ja/web/css/basic-shape/polygon()/index.md b/files/ja/web/css/basic-shape/polygon()/index.md deleted file mode 100644 index 9a2df5b4d0..0000000000 --- a/files/ja/web/css/basic-shape/polygon()/index.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: polygon() -slug: Web/CSS/basic-shape/polygon() -tags: - - CSS - - CSS データ型 - - CSS シェイプ - - polygon - - CSS 関数 - - データ型 - - Reference -browser-compat: css.types.basic-shape.polygon -translation_of: Web/CSS/basic-shape/polygon() ---- -{{CSSRef}} - -**`polygon()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("<basic-shape>")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。 - -## 構文 - -```css -clip-path: polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%); -``` - -### 値 - -- `` - - : オプションで `nonzero` (省略時の既定値) または `evenodd` のどちらかであり、[塗りつぶしルール](/ja/docs/Web/SVG/Attribute/fill-rule)を指定します。 -- `[]#` - - : 3 組以上の値です (多角形は少なくとも三角形を描く必要があります)。これらの値は、リファレンスボックスを基準にして描かれる座標です。 - -## 例 - -### 基本的な polygon() の例 - -この例では、`polygon()` を使って、テキストを回り込ませるシェイプを作成しています。値を変更するとシェイプの変化を確認することができます。 - -{{EmbedGHLiveSample("css-examples/shapes/basic-shape/polygon.html", '100%', 800)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} -- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) diff --git a/files/ja/web/css/basic-shape/polygon/index.md b/files/ja/web/css/basic-shape/polygon/index.md new file mode 100644 index 0000000000..910b233dbf --- /dev/null +++ b/files/ja/web/css/basic-shape/polygon/index.md @@ -0,0 +1,52 @@ +--- +title: polygon() +slug: Web/CSS/basic-shape/polygon +tags: + - CSS + - CSS データ型 + - CSS シェイプ + - polygon + - CSS 関数 + - データ型 + - Reference +translation_of: Web/CSS/basic-shape/polygon() +original_slug: Web/CSS/basic-shape/polygon() +browser-compat: css.types.basic-shape.polygon +--- +{{CSSRef}} + +**`polygon()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("<basic-shape>")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。 + +## 構文 + +```css +clip-path: polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%); +``` + +### 値 + +- `` + - : オプションで `nonzero` (省略時の既定値) または `evenodd` のどちらかであり、[塗りつぶしルール](/ja/docs/Web/SVG/Attribute/fill-rule)を指定します。 +- `[]#` + - : 3 組以上の値です (多角形は少なくとも三角形を描く必要があります)。これらの値は、リファレンスボックスを基準にして描かれる座標です。 + +## 例 + +### 基本的な polygon() の例 + +この例では、`polygon()` を使って、テキストを回り込ませるシェイプを作成しています。値を変更するとシェイプの変化を確認することができます。 + +{{EmbedGHLiveSample("css-examples/shapes/basic-shape/polygon.html", '100%', 800)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} +- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) diff --git a/files/ja/web/css/calc()/index.md b/files/ja/web/css/calc()/index.md deleted file mode 100644 index 3e8ca05a43..0000000000 --- a/files/ja/web/css/calc()/index.md +++ /dev/null @@ -1,168 +0,0 @@ ---- -title: calc() -slug: Web/CSS/calc() -tags: - - CSS - - CSS 関数 - - 計算 - - 演算 - - 関数 - - レイアウト - - リファレンス - - ウェブ - - calc -browser-compat: css.types.calc -translation_of: Web/CSS/calc() ---- -{{CSSRef}} - -**`calc()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 CSS のプロパティ値を指定する際に計算を行うことができるものです。 {{cssxref("<length>")}}、{{cssxref("<frequency>")}}、{{cssxref("<angle>")}}、{{cssxref("<time>")}}、{{cssxref("<percentage>")}}、{{cssxref("<number>")}}、{{cssxref("<integer>")}} が利用できる場所ならば使用できます。

- -{{EmbedInteractiveExample("pages/css/function-calc.html")}} - -## 構文 - -```css -/* プロパティ: calc(式) */ -width: calc(100% - 80px); -``` - -`calc()` 関数は1つの式を引数として取り、式の結果が値として使用されます。式は以下の演算子を組み合わせたもので、標準的な[演算子の優先順位の規則](/ja/docs/Learn/JavaScript/First_steps/Math#operator_precedence")を使用します。 - -- `+` - - : 加算です。 -- `-` - - : 減算です。 -- `*` - - : 乗算です。引数の少なくとも 1 つは {{cssxref("<number>")}} でなければなりません。 -- `/` - - : 除算です。右側は {{cssxref("<number>")}} でなければなりません。 - -式のオペランドは任意の {{cssxref("<length>")}} 構文の値にすることができます。式の中のそれぞれの値に異なる単位を使用することもできます。必要に応じて、計算の順番を設定するために括弧を使用することもできます。 - -### メモ - -- `+` 演算子と `-` 演算子は**前後に{{Glossary("whitespace", "ホワイトスペース")}}を置く必要があります**。たとえば、 `calc(50% -8px)` と記述した場合、パーセント表記と負の長さが連続しているものとみなされ、無効な式となるからです。 `calc(50% - 8px)` はパーセント表記、減算記号、長さの順に並んでいるものと解釈されます。また、 `calc(8px + -50%)` は長さ、加算記号、負のパーセント表記の順に並んでいるものと解釈されます。 -- `*` 演算子と `/` 演算子には前後のホワイトスペースは必要ありませんが、こちらにもホワイトスペースを用いて記述ルールに一貫性を持たせておくことは認められており、推奨されています。 -- ゼロで除算を行うと、 HTML パーサーで生成されるエラーになります。 -- 自動レイアウトおよび固定レイアウトのテーブルで列・列グループ・行・行グループ・セルの幅や高さに対してパーセンテージを含む数式を指定すると、 `auto` が指定されたものとして扱います。 -- `calc()` 関数は入れ子にすることができ、内側のものは単なる括弧として扱われます。 - -### 形式文法 - -{{csssyntax}} - -## アクセシビリティの考慮 - -`calc()` を使用してテキストの大きさを制御する場合は、一方の値が[相対的な長さの単位](/ja/docs/Web/CSS/length#relative_length_units)になることを確認してください。 - -```css -h1 { - font-size: calc(1.5rem + 3vw); -} -``` - -これによって、ページが拡大縮小されたときにテキストの大きさが変化します。 - -- [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) - -## 整数での使用 - -**`calc()`** は {{cssxref("<integer>")}} が求められる場面で使用することができ、その値は次のように、最も近い整数に丸められます。 - -```css -.modal { - z-index: calc(3 / 2); -} -``` - -これによって最終的に `.modal` は `z-index` の値は 2 になります。 - -**Note:** Chrome ブラウザーでは現在のところ、整数が求められる場面で **`calc()`** から返される一部の値を受け付けません。例えば、結果が整数になる場合であっても割り算は受け付けません。すなわち、 `z-index: calc(4 / 2);` は受け付けられません。 - -## 例 - -

余白をつけてオブジェクトを画面に配置する

- -`calc()` でマージン設定を持つボックス配置がしやすくなります。この例では CSS でウィンドウを横切るように広がるバナーを作ります。バナーの両側とウィンドウの縁は 40 ピクセル空けます。 - -```css -.banner { - position: absolute; - left: 40px; - width: calc(100% - 80px); - border: solid black 1px; - box-shadow: 1px 2px; - background-color: yellow; - padding: 6px; - text-align: center; - box-sizing: border-box; -} -``` - -```html - -``` - -{{EmbedLiveSample('Positioning_an_object_on_screen_with_a_margin', 'auto', '60')}} - -

フォームフィールドの大きさを自動的に隅に合うように調整

- -`calc()` はフォーム要素のサイズ変更にも利用できます。適切なマージンを維持しながら、コンテナの縁を突き破らないように、利用できるスペースいっぱいに広げます。 - -いくらかの CSS を見てみましょう。 - -```css -input { - padding: 2px; - display: block; - width: calc(100% - 1em); -} - -#formbox { - width: calc(100% / 6); - border: 1px solid black; - padding: 4px; -} -``` - -ここで、フォームはウィンドウの取り得る幅の 1/6 を使うように指定しています。それから、入力項目が必ず妥当なサイズを持つように再度 `calc()` を使い、コンテナーの幅 - 1em の幅になるように指定します。次の HTML でこの CSS を使います。

- -```html -
-
- - -
-
-``` - -{{EmbedLiveSample('Automatically_sizing_form_fields_to_fit_their_container', '700', '80')}} - -### 入れ子の `calc()` と CSS 変数 - -`calc()` で [CSS 変数](/ja/docs/Web/CSS/CSS_Variables) を使用することもできます。以下のコードを見てみてください。

- -```css -.foo { - --widthA: 100px; - --widthB: calc(var(--widthA) / 2); - --widthC: calc(var(--widthB) / 2); - width: var(--widthC); -} -``` - -すべての変数が展開された後、 `widthC` の値は `calc( calc( 100px / 2) / 2)` になります。この値が .foo の width プロパティに割り当てられたとき、内部にあるすべての `calc()` は (入れ子の深さにかかわらず) 単なる括弧になり、`width` プロパティの値は最終的に `calc( ( 100px / 2) / 2)`、すなわち `25px` になります。要するに、`calc()` の内部にある `calc()` は単なる括弧と同等です。 - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog](https://hacks.mozilla.org/2010/06/css3-calc/) diff --git a/files/ja/web/css/calc/index.md b/files/ja/web/css/calc/index.md new file mode 100644 index 0000000000..575feddff4 --- /dev/null +++ b/files/ja/web/css/calc/index.md @@ -0,0 +1,169 @@ +--- +title: calc() +slug: Web/CSS/calc +tags: + - CSS + - CSS 関数 + - 計算 + - 演算 + - 関数 + - レイアウト + - リファレンス + - ウェブ + - calc +translation_of: Web/CSS/calc() +original_slug: Web/CSS/calc() +browser-compat: css.types.calc +--- +{{CSSRef}} + +**`calc()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 CSS のプロパティ値を指定する際に計算を行うことができるものです。 {{cssxref("<length>")}}、{{cssxref("<frequency>")}}、{{cssxref("<angle>")}}、{{cssxref("<time>")}}、{{cssxref("<percentage>")}}、{{cssxref("<number>")}}、{{cssxref("<integer>")}} が利用できる場所ならば使用できます。

+ +{{EmbedInteractiveExample("pages/css/function-calc.html")}} + +## 構文 + +```css +/* プロパティ: calc(式) */ +width: calc(100% - 80px); +``` + +`calc()` 関数は1つの式を引数として取り、式の結果が値として使用されます。式は以下の演算子を組み合わせたもので、標準的な[演算子の優先順位の規則](/ja/docs/Learn/JavaScript/First_steps/Math#operator_precedence")を使用します。 + +- `+` + - : 加算です。 +- `-` + - : 減算です。 +- `*` + - : 乗算です。引数の少なくとも 1 つは {{cssxref("<number>")}} でなければなりません。 +- `/` + - : 除算です。右側は {{cssxref("<number>")}} でなければなりません。 + +式のオペランドは任意の {{cssxref("<length>")}} 構文の値にすることができます。式の中のそれぞれの値に異なる単位を使用することもできます。必要に応じて、計算の順番を設定するために括弧を使用することもできます。 + +### メモ + +- `+` 演算子と `-` 演算子は**前後に{{Glossary("whitespace", "ホワイトスペース")}}を置く必要があります**。たとえば、 `calc(50% -8px)` と記述した場合、パーセント表記と負の長さが連続しているものとみなされ、無効な式となるからです。 `calc(50% - 8px)` はパーセント表記、減算記号、長さの順に並んでいるものと解釈されます。また、 `calc(8px + -50%)` は長さ、加算記号、負のパーセント表記の順に並んでいるものと解釈されます。 +- `*` 演算子と `/` 演算子には前後のホワイトスペースは必要ありませんが、こちらにもホワイトスペースを用いて記述ルールに一貫性を持たせておくことは認められており、推奨されています。 +- ゼロで除算を行うと、 HTML パーサーで生成されるエラーになります。 +- 自動レイアウトおよび固定レイアウトのテーブルで列・列グループ・行・行グループ・セルの幅や高さに対してパーセンテージを含む数式を指定すると、 `auto` が指定されたものとして扱います。 +- `calc()` 関数は入れ子にすることができ、内側のものは単なる括弧として扱われます。 + +### 形式文法 + +{{csssyntax}} + +## アクセシビリティの考慮 + +`calc()` を使用してテキストの大きさを制御する場合は、一方の値が[相対的な長さの単位](/ja/docs/Web/CSS/length#relative_length_units)になることを確認してください。 + +```css +h1 { + font-size: calc(1.5rem + 3vw); +} +``` + +これによって、ページが拡大縮小されたときにテキストの大きさが変化します。 + +- [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) + +## 整数での使用 + +**`calc()`** は {{cssxref("<integer>")}} が求められる場面で使用することができ、その値は次のように、最も近い整数に丸められます。 + +```css +.modal { + z-index: calc(3 / 2); +} +``` + +これによって最終的に `.modal` は `z-index` の値は 2 になります。 + +**Note:** Chrome ブラウザーでは現在のところ、整数が求められる場面で **`calc()`** から返される一部の値を受け付けません。例えば、結果が整数になる場合であっても割り算は受け付けません。すなわち、 `z-index: calc(4 / 2);` は受け付けられません。 + +## 例 + +

余白をつけてオブジェクトを画面に配置する

+ +`calc()` でマージン設定を持つボックス配置がしやすくなります。この例では CSS でウィンドウを横切るように広がるバナーを作ります。バナーの両側とウィンドウの縁は 40 ピクセル空けます。 + +```css +.banner { + position: absolute; + left: 40px; + width: calc(100% - 80px); + border: solid black 1px; + box-shadow: 1px 2px; + background-color: yellow; + padding: 6px; + text-align: center; + box-sizing: border-box; +} +``` + +```html + +``` + +{{EmbedLiveSample('Positioning_an_object_on_screen_with_a_margin', 'auto', '60')}} + +

フォームフィールドの大きさを自動的に隅に合うように調整

+ +`calc()` はフォーム要素のサイズ変更にも利用できます。適切なマージンを維持しながら、コンテナの縁を突き破らないように、利用できるスペースいっぱいに広げます。 + +いくらかの CSS を見てみましょう。 + +```css +input { + padding: 2px; + display: block; + width: calc(100% - 1em); +} + +#formbox { + width: calc(100% / 6); + border: 1px solid black; + padding: 4px; +} +``` + +ここで、フォームはウィンドウの取り得る幅の 1/6 を使うように指定しています。それから、入力項目が必ず妥当なサイズを持つように再度 `calc()` を使い、コンテナーの幅 - 1em の幅になるように指定します。次の HTML でこの CSS を使います。

+ +```html +
+
+ + +
+
+``` + +{{EmbedLiveSample('Automatically_sizing_form_fields_to_fit_their_container', '700', '80')}} + +### 入れ子の `calc()` と CSS 変数 + +`calc()` で [CSS 変数](/ja/docs/Web/CSS/CSS_Variables) を使用することもできます。以下のコードを見てみてください。

+ +```css +.foo { + --widthA: 100px; + --widthB: calc(var(--widthA) / 2); + --widthC: calc(var(--widthB) / 2); + width: var(--widthC); +} +``` + +すべての変数が展開された後、 `widthC` の値は `calc( calc( 100px / 2) / 2)` になります。この値が .foo の width プロパティに割り当てられたとき、内部にあるすべての `calc()` は (入れ子の深さにかかわらず) 単なる括弧になり、`width` プロパティの値は最終的に `calc( ( 100px / 2) / 2)`、すなわち `25px` になります。要するに、`calc()` の内部にある `calc()` は単なる括弧と同等です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog](https://hacks.mozilla.org/2010/06/css3-calc/) diff --git a/files/ja/web/css/clamp()/index.md b/files/ja/web/css/clamp()/index.md deleted file mode 100644 index a230b40d6c..0000000000 --- a/files/ja/web/css/clamp()/index.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: clamp() -slug: Web/CSS/clamp() -tags: - - CSS - - CSS 関数 - - 計算 - - 演算 - - 関数 - - レイアウト - - リファレンス - - ウェブ - - clamp -browser-compat: css.types.clamp -translation_of: Web/CSS/clamp() ---- -{{CSSRef}} - -**`clamp()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、値を上限と下限の間に制限します。 `clamp()` によって、定義された最大値と最小値の間の値を選択することができます。最小値、推奨値、最大値の3つの引数を取ります。 `clamp()` 関数は {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<number>")}}, {{CSSxRef("<integer>")}} のいずれでも使用することができます。 - -`clamp(MIN, VAL, MAX)` は `{{CSSxRef("max()")}}(MIN, {{CSSxRef("min()")}}(VAL, MAX))` と同等です。 - -{{EmbedInteractiveExample("pages/css/function-clamp.html")}} - -これらの例のように、フォントの大きさに `clamp()` を使用すると、ビューポートの大きさに合わせてフォントの大きさを設定することができますが、最小フォントサイズを下回ったり、最大フォントサイズを上回ったりすることはありません。これは [Fluid Typography](https://css-tricks.com/snippets/css/fluid-typography/) のコードと同じ効果がありますが、1 行で済み、メディアクエリーも使用しません。 - -## 構文 - -`clamp()` 関数は、3 つの式を最小値、推奨値、最大値の順で引数としてカンマ区切りで受け取ります。 - -最小値は最も小さい (最も負側の) 値です。これは許される値の範囲の下限です。推奨値がこの値よりも小さい場合、最小値が使用されます。 - -推奨値は、結果が最小値と最大値の間である限り使用される値の式です。 - -最大値は最も大きな (最も正側の) 値で、推奨値がこの上限値よりも大きい場合にプロパティの値に代入されます。 - -式は計算関数 (詳しくは {{CSSxRef("calc()")}} を参照)、リテラル値、 {{CSSxRef("attr()")}} のように正しい引数の型 ({{CSSxRef("<length>")}} など) として評価されるその他の式、重複した {{CSSxRef("min()")}} および {{CSSxRef("max()")}} 関数などです。数式としては、 `calc()` 関数自体を使用せずに加算、減算、乗算、除算を使用することができます。計算順を指定するために括弧を使用することもできます。 - -式の中でそれぞれの値に異なる単位を使用し、いずれかの引数を構成する計算関数の中で異なる単位を使用することもできます。 - -### メモ - -- 自動レイアウト、固定レイアウトを問わず、表の列、列グループ、行、行グループ、セルの幅や高さのパーセント値を出力する数式は、 `auto` が指定されたものとして扱われる*ことが*あります。 -- 式の値として `max()` および `min()` 関数を重ねることは許可されており、内側のものは単純な括弧として扱われます。式は完全な数式であるため、 `calc()` 関数自体を使用せずに加算、減算、乗算、除算を使用することができます。 -- 式は加算 ( + )、減算 ( - )、乗算 ( \* )、除算 ( / ) 演算子で組み合わせた値にすることがができ、標準の演算子の優先順位を使用します。 + および - 演算子の両側に空白を入れることを忘れないでください。式の中の値には {{CSSxRef("<length>")}} の構文の値にすることができます。式の中のそれぞれの値に異なる単位を使用することができます。必要に応じて、計算順を指定するために括弧を使用することもできます。 -- {{CSSxRef("min()")}} および {{CSSxRef("max()")}} を `clamp()` 関数の中で使用したくなるでしょう。 - -### 形式文法 - -{{CSSSyntax}} - -## 例 - -### min, max, clamp の比較 - -この例では、いくつかの大きさに対して {{CSSxRef("min()")}}、{{CSSxRef("max()")}}、{{CSSxRef("clamp()")}} を利用した単純なレスポンシブの例を紹介します。 - -[``](/ja/docs/Web/HTML/Element/body) 要素の [`width`](/ja/docs/Web/CSS/width) には、`min(1000px, calc(70% + 100px))` が設定されています。これは、`calc(70% + 100px)` の結果が `1000px` よりも小さい場合には、その値に設定されることを意味しています。`min()` では最大値を設定することができます。 - -[`

`](/ja/docs/Web/HTML/Element/p) 要素の [`font-size`](/ja/docs/Web/CSS/font-size) には、`max(1.2rem, 1.2vw)` が設定されています。すなわち、計算された `1.2vw` の値が `1.2rem` の値よりも大きい場合には、代わりにその値が設定されます。`max()` では、最小値を設定することができ、このような場合にはアクセシビリティの観点からも便利です。 - -[`

`](/ja/docs/Web/HTML/Element/Heading_Elements) 要素の `font-size` は、`clamp(1.8rem, 2.5vw, 2.8rem)` と設定されています。これは、`2.5vw` の計算値が `1.8rem` の値よりも大きくなるまで、`font-size` が `1.8rem` に設定されることを意味します。この時点では、`2.5vw` の計算値が `2.8rem` の計算値よりも大きくなるまで、`font-size` は `2.5vw` に設定されます。この時点で、`font-size` は `2.8rem` に設定されます。`clamp()` では、最小値と最大値を設定することができます。 - -操作してみたい場合は、[GitHub で公開されている例](https://mdn.github.io/css-examples/min-max-clamp/)を参照してください。 - -#### HTML - -```html -

Simple responsive test

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci, eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula. Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis, libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit. Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum. Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.

- -

Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem.

-``` - -#### CSS - -```css -html { - font-family: sans-serif; -} - -body { - margin: 0 auto; - width: min(1000px, calc(70% + 100px)); -} - -h1 { - letter-spacing: 2px; - font-size: clamp(1.8rem, 2.5vw, 2.8rem); -} - -p { - line-height: 1.5; - font-size: max(1.2rem, 1.2vw); -} -``` - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{CSSxRef("calc()")}} -- {{CSSxRef("max()")}} -- {{CSSxRef("min()")}} -- [CSS 値](/ja/docs/Learn/CSS/Building_blocks/Values_and_units) diff --git a/files/ja/web/css/clamp/index.md b/files/ja/web/css/clamp/index.md new file mode 100644 index 0000000000..bfdd03f109 --- /dev/null +++ b/files/ja/web/css/clamp/index.md @@ -0,0 +1,112 @@ +--- +title: clamp() +slug: Web/CSS/clamp +tags: + - CSS + - CSS 関数 + - 計算 + - 演算 + - 関数 + - レイアウト + - リファレンス + - ウェブ + - clamp +translation_of: Web/CSS/clamp() +original_slug: Web/CSS/clamp() +browser-compat: css.types.clamp +--- +{{CSSRef}} + +**`clamp()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、値を上限と下限の間に制限します。 `clamp()` によって、定義された最大値と最小値の間の値を選択することができます。最小値、推奨値、最大値の3つの引数を取ります。 `clamp()` 関数は {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<number>")}}, {{CSSxRef("<integer>")}} のいずれでも使用することができます。 + +`clamp(MIN, VAL, MAX)` は `{{CSSxRef("max()")}}(MIN, {{CSSxRef("min()")}}(VAL, MAX))` と同等です。 + +{{EmbedInteractiveExample("pages/css/function-clamp.html")}} + +これらの例のように、フォントの大きさに `clamp()` を使用すると、ビューポートの大きさに合わせてフォントの大きさを設定することができますが、最小フォントサイズを下回ったり、最大フォントサイズを上回ったりすることはありません。これは [Fluid Typography](https://css-tricks.com/snippets/css/fluid-typography/) のコードと同じ効果がありますが、1 行で済み、メディアクエリーも使用しません。 + +## 構文 + +`clamp()` 関数は、3 つの式を最小値、推奨値、最大値の順で引数としてカンマ区切りで受け取ります。 + +最小値は最も小さい (最も負側の) 値です。これは許される値の範囲の下限です。推奨値がこの値よりも小さい場合、最小値が使用されます。 + +推奨値は、結果が最小値と最大値の間である限り使用される値の式です。 + +最大値は最も大きな (最も正側の) 値で、推奨値がこの上限値よりも大きい場合にプロパティの値に代入されます。 + +式は計算関数 (詳しくは {{CSSxRef("calc()")}} を参照)、リテラル値、 {{CSSxRef("attr()")}} のように正しい引数の型 ({{CSSxRef("<length>")}} など) として評価されるその他の式、重複した {{CSSxRef("min()")}} および {{CSSxRef("max()")}} 関数などです。数式としては、 `calc()` 関数自体を使用せずに加算、減算、乗算、除算を使用することができます。計算順を指定するために括弧を使用することもできます。 + +式の中でそれぞれの値に異なる単位を使用し、いずれかの引数を構成する計算関数の中で異なる単位を使用することもできます。 + +### メモ + +- 自動レイアウト、固定レイアウトを問わず、表の列、列グループ、行、行グループ、セルの幅や高さのパーセント値を出力する数式は、 `auto` が指定されたものとして扱われる*ことが*あります。 +- 式の値として `max()` および `min()` 関数を重ねることは許可されており、内側のものは単純な括弧として扱われます。式は完全な数式であるため、 `calc()` 関数自体を使用せずに加算、減算、乗算、除算を使用することができます。 +- 式は加算 ( + )、減算 ( - )、乗算 ( \* )、除算 ( / ) 演算子で組み合わせた値にすることがができ、標準の演算子の優先順位を使用します。 + および - 演算子の両側に空白を入れることを忘れないでください。式の中の値には {{CSSxRef("<length>")}} の構文の値にすることができます。式の中のそれぞれの値に異なる単位を使用することができます。必要に応じて、計算順を指定するために括弧を使用することもできます。 +- {{CSSxRef("min()")}} および {{CSSxRef("max()")}} を `clamp()` 関数の中で使用したくなるでしょう。 + +### 形式文法 + +{{CSSSyntax}} + +## 例 + +### min, max, clamp の比較 + +この例では、いくつかの大きさに対して {{CSSxRef("min()")}}、{{CSSxRef("max()")}}、{{CSSxRef("clamp()")}} を利用した単純なレスポンシブの例を紹介します。 + +[``](/ja/docs/Web/HTML/Element/body) 要素の [`width`](/ja/docs/Web/CSS/width) には、`min(1000px, calc(70% + 100px))` が設定されています。これは、`calc(70% + 100px)` の結果が `1000px` よりも小さい場合には、その値に設定されることを意味しています。`min()` では最大値を設定することができます。 + +[`

`](/ja/docs/Web/HTML/Element/p) 要素の [`font-size`](/ja/docs/Web/CSS/font-size) には、`max(1.2rem, 1.2vw)` が設定されています。すなわち、計算された `1.2vw` の値が `1.2rem` の値よりも大きい場合には、代わりにその値が設定されます。`max()` では、最小値を設定することができ、このような場合にはアクセシビリティの観点からも便利です。 + +[`

`](/ja/docs/Web/HTML/Element/Heading_Elements) 要素の `font-size` は、`clamp(1.8rem, 2.5vw, 2.8rem)` と設定されています。これは、`2.5vw` の計算値が `1.8rem` の値よりも大きくなるまで、`font-size` が `1.8rem` に設定されることを意味します。この時点では、`2.5vw` の計算値が `2.8rem` の計算値よりも大きくなるまで、`font-size` は `2.5vw` に設定されます。この時点で、`font-size` は `2.8rem` に設定されます。`clamp()` では、最小値と最大値を設定することができます。 + +操作してみたい場合は、[GitHub で公開されている例](https://mdn.github.io/css-examples/min-max-clamp/)を参照してください。 + +#### HTML + +```html +

Simple responsive test

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci, eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula. Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis, libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit. Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum. Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.

+ +

Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem.

+``` + +#### CSS + +```css +html { + font-family: sans-serif; +} + +body { + margin: 0 auto; + width: min(1000px, calc(70% + 100px)); +} + +h1 { + letter-spacing: 2px; + font-size: clamp(1.8rem, 2.5vw, 2.8rem); +} + +p { + line-height: 1.5; + font-size: max(1.2rem, 1.2vw); +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{CSSxRef("calc()")}} +- {{CSSxRef("max()")}} +- {{CSSxRef("min()")}} +- [CSS 値](/ja/docs/Learn/CSS/Building_blocks/Values_and_units) diff --git a/files/ja/web/css/counter()/index.md b/files/ja/web/css/counter()/index.md deleted file mode 100644 index b525841d28..0000000000 --- a/files/ja/web/css/counter()/index.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: counter() -slug: Web/CSS/counter() -tags: - - CSS - - CSS カウンター - - CSS 関数 - - 関数 - - リファレンス -browser-compat: css.types.counter -translation_of: Web/CSS/counter() ---- -{{CSSRef}} - -**`counter()`** は [CSS](/ja/docs/Web/CSS) の関数で、指定された名前付きカウンターの現在値があれば、その文字列を返します。[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)において用いるのが多いものの、理論的には [``](/ja/docs/Web/CSS/string) に対応するすべての箇所で用いることができます。 - -```css -/* 単純な使用法 */ -counter(countername); - -/* カウンターの表示の変更 */ -counter(countername, upper-roman) -``` - -[カウンター](/ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters)自身には視覚的効果が何もありません。 `counter()` 関数 (および {{cssxref("counters()")}} 関数) は開発者が定義した文字列 (または画像) を返すことでカウンターは利用価値が生まれます。 - -> **Note:** `counter()` 関数は CSS プロパティとも併用できますが、 {{CSSxRef("content")}} 以外のプロパティにおける対応は実験的であり、型または単位の引数への対応は限られています。 -> -> [ブラウザーの互換性の表](#ブラウザーの互換性)を注意深く確認してから本番環境に用いてください。 - -## 構文 - -### 値 - -- {{cssxref("<custom-ident>")}} - - : カウンターを識別する名前であり、{{cssxref("counter-reset")}} および {{cssxref("counter-increment")}} に用いた名前と、大文字小文字まで同一でなければなりません。名前をダッシュ 2 つで始めることはできず、また `none`, `unset`, `initial`, `inherit` という名前は禁止です。 -- `` - - : {{cssxref("<list-style-type>")}} 名、 {{cssxref("<@counter-style>")}} 名、 {{cssxref("symbols()")}} 関数の何れかです。カウンタースタイル名には `numeric`, `alphabetic`, `symbolic` などの単純な定義済みスタイル、より複雑なアジアやエチオピアのカウンタースタイル、その他の[定義済みカウンタースタイル](/ja/docs/Web/CSS/CSS_Counter_Styles)があります。省略された場合は、既定で `decimal` になります。 - -### 形式文法 - -{{CSSSyntax}} - -## 例 - -### 既定値と upper-roman との比較 - -#### HTML - -```html -
    -
  1. -
  2. -
  3. -
-``` - -#### CSS - -```css -ol { - counter-reset: listCounter; -} -li { - counter-increment: listCounter; -} -li::after { - content: "[" counter(listCounter) "] == [" - counter(listCounter, upper-roman) "]"; -} -``` - -#### 結果 - -{{EmbedLiveSample("default_value_compared_to_upper_Roman", "100%", 150)}} - -### decimal-leading-zero と lower-alpha との比較 - -#### HTML - -```html -
    -
  1. -
  2. -
  3. -
-``` - -#### CSS - -```css -ol { - counter-reset: count; -} -li { - counter-increment: count; -} -li::after { - content: "[" counter(count, decimal-leading-zero) "] == [" - counter(count, lower-alpha) "]"; -} -``` - -#### 結果 - -{{EmbedLiveSample("decimal-leading-zero_compared_to_lower-alpha", "100%", 150)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [CSS カウンターの使用](/ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters) -- {{cssxref("counter-reset")}} -- {{cssxref("counter-set")}} -- {{cssxref("counter-increment")}} -- {{cssxref("@counter-style")}} -- CSS の [`counters()`](/ja/docs/Web/CSS/counters()) 関数 diff --git a/files/ja/web/css/counter/index.md b/files/ja/web/css/counter/index.md new file mode 100644 index 0000000000..8416fed3c2 --- /dev/null +++ b/files/ja/web/css/counter/index.md @@ -0,0 +1,124 @@ +--- +title: counter() +slug: Web/CSS/counter +tags: + - CSS + - CSS カウンター + - CSS 関数 + - 関数 + - リファレンス +translation_of: Web/CSS/counter() +original_slug: Web/CSS/counter() +browser-compat: css.types.counter +--- +{{CSSRef}} + +**`counter()`** は [CSS](/ja/docs/Web/CSS) の関数で、指定された名前付きカウンターの現在値があれば、その文字列を返します。[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)において用いるのが多いものの、理論的には [``](/ja/docs/Web/CSS/string) に対応するすべての箇所で用いることができます。 + +```css +/* 単純な使用法 */ +counter(countername); + +/* カウンターの表示の変更 */ +counter(countername, upper-roman) +``` + +[カウンター](/ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters)自身には視覚的効果が何もありません。 `counter()` 関数 (および {{cssxref("counters()")}} 関数) は開発者が定義した文字列 (または画像) を返すことでカウンターは利用価値が生まれます。 + +> **Note:** `counter()` 関数は CSS プロパティとも併用できますが、 {{CSSxRef("content")}} 以外のプロパティにおける対応は実験的であり、型または単位の引数への対応は限られています。 +> +> [ブラウザーの互換性の表](#ブラウザーの互換性)を注意深く確認してから本番環境に用いてください。 + +## 構文 + +### 値 + +- {{cssxref("<custom-ident>")}} + - : カウンターを識別する名前であり、{{cssxref("counter-reset")}} および {{cssxref("counter-increment")}} に用いた名前と、大文字小文字まで同一でなければなりません。名前をダッシュ 2 つで始めることはできず、また `none`, `unset`, `initial`, `inherit` という名前は禁止です。 +- `` + - : {{cssxref("<list-style-type>")}} 名、 {{cssxref("<@counter-style>")}} 名、 {{cssxref("symbols()")}} 関数の何れかです。カウンタースタイル名には `numeric`, `alphabetic`, `symbolic` などの単純な定義済みスタイル、より複雑なアジアやエチオピアのカウンタースタイル、その他の[定義済みカウンタースタイル](/ja/docs/Web/CSS/CSS_Counter_Styles)があります。省略された場合は、既定で `decimal` になります。 + +### 形式文法 + +{{CSSSyntax}} + +## 例 + +### 既定値と upper-roman との比較 + +#### HTML + +```html +
    +
  1. +
  2. +
  3. +
+``` + +#### CSS + +```css +ol { + counter-reset: listCounter; +} +li { + counter-increment: listCounter; +} +li::after { + content: "[" counter(listCounter) "] == [" + counter(listCounter, upper-roman) "]"; +} +``` + +#### 結果 + +{{EmbedLiveSample("default_value_compared_to_upper_Roman", "100%", 150)}} + +### decimal-leading-zero と lower-alpha との比較 + +#### HTML + +```html +
    +
  1. +
  2. +
  3. +
+``` + +#### CSS + +```css +ol { + counter-reset: count; +} +li { + counter-increment: count; +} +li::after { + content: "[" counter(count, decimal-leading-zero) "] == [" + counter(count, lower-alpha) "]"; +} +``` + +#### 結果 + +{{EmbedLiveSample("decimal-leading-zero_compared_to_lower-alpha", "100%", 150)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS カウンターの使用](/ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters) +- {{cssxref("counter-reset")}} +- {{cssxref("counter-set")}} +- {{cssxref("counter-increment")}} +- {{cssxref("@counter-style")}} +- CSS の [`counters()`](/ja/docs/Web/CSS/counters()) 関数 diff --git a/files/ja/web/css/counters()/index.md b/files/ja/web/css/counters()/index.md deleted file mode 100644 index ab28c38df1..0000000000 --- a/files/ja/web/css/counters()/index.md +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: counters() -slug: Web/CSS/counters() -tags: - - CSS - - CSS カウンター - - CSS 関数 - - 関数 - - リファレンス -browser-compat: css.types.counters -translation_of: Web/CSS/counters() ---- -{{CSSRef}} - -**`counter()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、階層的なカウンターを利用できるようにし、指定された名前付きカウンターがあれば、その現在値を表す連結された文字列を返します。 `counters()` 関数には `counters(name, string)` と `counters(name, string, style)` の二つの形式があります。一般的には[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)と一緒に使用されますが、理論的には [``](/ja/docs/Web/CSS/string) 値に対応している場所ならばどこでも使用できます。生成されるテキストは、指定された名前を持つすべてのカウンターの値で、指定された文字列で区切られた一番外側から一番内側までの値です。カウンターは、指定されたスタイルで表示され、スタイルが指定されていない場合は既定で `decimal` で表示されます。 - -```css -/* 単純な使用法 - スタイルは既定で decimal */ -counters(countername, '-'); - -/* カウンターの表示の変更 */ -counters(countername, '.', upper-roman) -``` - -[カウンター](/ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters)自身には視覚的効果が何もありません。 `counters()` 関数 (および {{cssxref("counter()")}} 関数) は開発者が定義した文字列 (または画像) を返すことでカウンターは利用価値が生まれます。 - -> **Note:** `counters()` 関数は CSS プロパティとも併用できますが、 {{CSSxRef("content")}} 以外のプロパティにおける対応は実験的であり、型または単位の引数への対応は限られています。 -> -> [ブラウザーの互換性の表](#ブラウザーの互換性)を注意深く確認してから本番環境に用いてください。 - -## 構文 - -### 値 - -- {{cssxref("<custom-ident>")}} - - : カウンターを識別する名前であり、 {{cssxref("counter-reset")}} および {{cssxref("counter-increment")}} に用いた名前と、大文字小文字まで同一でなければなりません。名前をダッシュ 2 つで始めることはできず、また `none`, `unset`, `initial`, `inherit` という名前は禁止です。 -- `` - - : カウンタースタイル名または [`symbols()`](/ja/docs/Web/CSS/symbols()) 関数です。カウンタースタイル名には `numeric`, `alphabetic`, `symbolic` などの単純な定義済みスタイル、より複雑なアジアやエチオピアのカウンタースタイル、その他の[定義済みカウンタースタイル](/ja/docs/Web/CSS/CSS_Counter_Styles)があります。省略された場合は、既定で `decimal` になります。 -- {{cssxref("<string>")}} - - : 任意の数のテキスト文字です。ラテン文字以外は Unicode エスケープシーケンスでエンコードする必要があります。例えば `\000A9` は著作権記号を表します。 - -### 形式文法 - -{{CSSSyntax}} - -## 例 - -### 既定値と upper-roman との比較 - -#### HTML - -```html -
    -
  1. -
      -
    1. -
    2. -
    3. -
    -
    2. -
  2. -
  3. -
  4. -
      -
    1. -
    2. -
        -
      1. -
      2. -
      3. -
      -
      3. -
    -
    5. -
-``` - -#### CSS - -```css -ol { - counter-reset: listCounter; -} -li { - counter-increment: listCounter; -} -li::marker { - content: counters(listCounter, '.', upper-roman) ') '; -} -li::before { - content: counters(listCounter, ".") " == " counters(listCounter, ".", lower-roman) ; -} -``` - -#### 結果 - -{{EmbedLiveSample("default_value_compared_to_upper_Roman", "100%", 150)}} - -### decimal-leading-zero と lower-alpha との比較 - -#### HTML - -```html -
    -
  1. -
      -
    1. -
    2. -
    3. -
    -
    2. -
  2. -
  3. -
  4. -
      -
    1. -
    2. -
        -
      1. -
      2. -
      3. -
      -
      3. -
    -
    5. -
-``` - -#### CSS - -```css -ol { - counter-reset: count; -} -li { - counter-increment: count; -} -li::marker { - content: counters(count, '.', upper-alpha) ') '; -} -li::before { - content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha); -} -``` - -#### 結果 - -{{EmbedLiveSample("decimal-leading-zero_compared_to_lower-alpha", "100%", 150)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [CSS カウンターの使用](/ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters) -- {{cssxref("counter-set")}} -- {{cssxref("counter-reset")}} -- {{cssxref("counter-increment")}} -- {{cssxref("@counter-style")}} -- CSS の [`counter()`](/ja/docs/Web/CSS/counter()) 関数 -- {{cssxref("::marker")}} diff --git a/files/ja/web/css/counters/index.md b/files/ja/web/css/counters/index.md new file mode 100644 index 0000000000..f49b9ba981 --- /dev/null +++ b/files/ja/web/css/counters/index.md @@ -0,0 +1,167 @@ +--- +title: counters() +slug: Web/CSS/counters +tags: + - CSS + - CSS カウンター + - CSS 関数 + - 関数 + - リファレンス +translation_of: Web/CSS/counters() +original_slug: Web/CSS/counters() +browser-compat: css.types.counters +--- +{{CSSRef}} + +**`counter()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、階層的なカウンターを利用できるようにし、指定された名前付きカウンターがあれば、その現在値を表す連結された文字列を返します。 `counters()` 関数には `counters(name, string)` と `counters(name, string, style)` の二つの形式があります。一般的には[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)と一緒に使用されますが、理論的には [``](/ja/docs/Web/CSS/string) 値に対応している場所ならばどこでも使用できます。生成されるテキストは、指定された名前を持つすべてのカウンターの値で、指定された文字列で区切られた一番外側から一番内側までの値です。カウンターは、指定されたスタイルで表示され、スタイルが指定されていない場合は既定で `decimal` で表示されます。 + +```css +/* 単純な使用法 - スタイルは既定で decimal */ +counters(countername, '-'); + +/* カウンターの表示の変更 */ +counters(countername, '.', upper-roman) +``` + +[カウンター](/ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters)自身には視覚的効果が何もありません。 `counters()` 関数 (および {{cssxref("counter()")}} 関数) は開発者が定義した文字列 (または画像) を返すことでカウンターは利用価値が生まれます。 + +> **Note:** `counters()` 関数は CSS プロパティとも併用できますが、 {{CSSxRef("content")}} 以外のプロパティにおける対応は実験的であり、型または単位の引数への対応は限られています。 +> +> [ブラウザーの互換性の表](#ブラウザーの互換性)を注意深く確認してから本番環境に用いてください。 + +## 構文 + +### 値 + +- {{cssxref("<custom-ident>")}} + - : カウンターを識別する名前であり、 {{cssxref("counter-reset")}} および {{cssxref("counter-increment")}} に用いた名前と、大文字小文字まで同一でなければなりません。名前をダッシュ 2 つで始めることはできず、また `none`, `unset`, `initial`, `inherit` という名前は禁止です。 +- `` + - : カウンタースタイル名または [`symbols()`](/ja/docs/Web/CSS/symbols()) 関数です。カウンタースタイル名には `numeric`, `alphabetic`, `symbolic` などの単純な定義済みスタイル、より複雑なアジアやエチオピアのカウンタースタイル、その他の[定義済みカウンタースタイル](/ja/docs/Web/CSS/CSS_Counter_Styles)があります。省略された場合は、既定で `decimal` になります。 +- {{cssxref("<string>")}} + - : 任意の数のテキスト文字です。ラテン文字以外は Unicode エスケープシーケンスでエンコードする必要があります。例えば `\000A9` は著作権記号を表します。 + +### 形式文法 + +{{CSSSyntax}} + +## 例 + +### 既定値と upper-roman との比較 + +#### HTML + +```html +
    +
  1. +
      +
    1. +
    2. +
    3. +
    +
    2. +
  2. +
  3. +
  4. +
      +
    1. +
    2. +
        +
      1. +
      2. +
      3. +
      +
      3. +
    +
    5. +
+``` + +#### CSS + +```css +ol { + counter-reset: listCounter; +} +li { + counter-increment: listCounter; +} +li::marker { + content: counters(listCounter, '.', upper-roman) ') '; +} +li::before { + content: counters(listCounter, ".") " == " counters(listCounter, ".", lower-roman) ; +} +``` + +#### 結果 + +{{EmbedLiveSample("default_value_compared_to_upper_Roman", "100%", 150)}} + +### decimal-leading-zero と lower-alpha との比較 + +#### HTML + +```html +
    +
  1. +
      +
    1. +
    2. +
    3. +
    +
    2. +
  2. +
  3. +
  4. +
      +
    1. +
    2. +
        +
      1. +
      2. +
      3. +
      +
      3. +
    +
    5. +
+``` + +#### CSS + +```css +ol { + counter-reset: count; +} +li { + counter-increment: count; +} +li::marker { + content: counters(count, '.', upper-alpha) ') '; +} +li::before { + content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha); +} +``` + +#### 結果 + +{{EmbedLiveSample("decimal-leading-zero_compared_to_lower-alpha", "100%", 150)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS カウンターの使用](/ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters) +- {{cssxref("counter-set")}} +- {{cssxref("counter-reset")}} +- {{cssxref("counter-increment")}} +- {{cssxref("@counter-style")}} +- CSS の [`counter()`](/ja/docs/Web/CSS/counter()) 関数 +- {{cssxref("::marker")}} diff --git a/files/ja/web/css/cross-fade()/index.md b/files/ja/web/css/cross-fade()/index.md deleted file mode 100644 index b654ae148f..0000000000 --- a/files/ja/web/css/cross-fade()/index.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: cross-fade() -slug: Web/CSS/cross-fade() -tags: - - CSS - - CSS 関数 - - CSS-4 画像 - - 実験的 - - 関数 - - Reference - - ウェブ -browser-compat: css.types.image.cross-fade -translation_of: Web/CSS/cross-fade() ---- -{{CSSRef}} - -**`cross-fade()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、2 枚以上の画像を所定の透過度で合成するために使用することができます。これは単色で色を薄めたり、放射状グラデーションとの組み合わせでページの特定の領域を強調させたりするような、数多くの単純な画像加工に使用することができます。 - -## 構文 - -**重要**: 仕様書と現在の実装とで構文が異なっています。仕様書の構文を先に説明します。 - -## 仕様書上の構文 - -`cross-fade()` 関数は、画像と、他の画像と合成したときにそれぞれの画像が占める割合を定義したパーセント値のリストを取ります。パーセント値は引用符なしで記述し、`'%'` 記号を含め、 0% から 100% までの間である必要があります。 - -この関数は CSS の中で、通常の画像の参照が利用できるところならばどこでも利用できます。 - -#### cross-fade のパーセント値 - -子のパーセント値は、それぞれの画像の混合率の値と考えてください。つまり、0% の値は画像が完全に透明であり、100% の値は完全に不透明になります。 - -```css -cross-fade( url(white.png) 0%, url(black.png) 100%); /* 完全に黒 */ -cross-fade( url(white.png) 25%, url(black.png) 75%); /* 黒 25%、白 75% */ -cross-fade( url(white.png) 50%, url(black.png) 50%); /* 黒 50%、白 50% */ -cross-fade( url(white.png) 75%, url(black.png) 25%); /* 白 75%、黒 25% */ -cross-fade( url(white.png) 100%, url(black.png) 0%); /* 完全に白 */ -cross-fade( url(green.png) 75%, url(red.png) 75%); /* 緑と赤がともに 75% */ -``` - -パーセント値が省略された場合は、指定されたすべてのパーセント値が合計され、`100%` から減算されます。その結果が `0%` より大きい場合は、パーセント値が省略されているすべての画像で均等に分割されます。 - -最も単純なケースは、2 つの画像を互いにフェードアウトさせる場合です。そのためには、パーセント値を設定する必要があるのは片方の画像だけで、もう片方の画像はそれに応じてフェードされます。例えば、1 枚目の画像に 0% の値を設定すると 2 枚目の画像のみが表示され、100% の値を設定すると 1 枚目の画像のみが表示されます。25% の値を設定すると、1 枚目の画像は 25%、2 枚目の画像は 75% で表示されます。75% の場合はその逆で、1 枚目が 75%、2 枚目が 25% になります。 - -以下のように書くこともできます。 - -```css -cross-fade( url(white.png) 0%, url(black.png)); /* 完全に黒 */ -cross-fade( url(white.png) 25%, url(black.png)); /* 黒 25%、白 75% */ -cross-fade( url(white.png), url(black.png)); /* 白 50%、白 50% */ -cross-fade( url(white.png) 75%, url(black.png)); /* 白 75%、黒 25% */ -cross-fade( url(white.png) 100%, url(black.png)); /* 完全に白 */ -cross-fade( url(green.png) 75%, url(red.png) 75%); /* 緑と赤がともに 75% */ -``` - -パーセント値が宣言されていない場合は、両方の画像が 50% の混合率となり、cross-fade では両方の画像が均等に合成されたように描画されます。上述の 50%/50% の例では、パーセント値を記載する必要はありませんでした。パーセント値が省略された場合、含まれるパーセント値が合計され、100% から差し引かれます。その結果、0 より大きい場合は、パーセント値が省略されたすべての画像で均等に分割されます。 - -最後の例では、両方のパーセント値の合計が 100% ではないため、両方の画像にそれぞれの混合率が含まれています。 - -パーセント値が宣言されておらず、3 つの画像が含まれている場合、それぞれの画像は 33.33% の混合率になります。以下の 2 つは (ほぼ) 同じ線です。 - -```css -cross-fade( url(red.png), url(yellow.png), url(blue.png)); /* 3 つとも 33.3333% の混合率となる */ -cross-fade( url(red.png) 33.33%, url(yellow.png) 33.33%, url(blue.png) 33.33%); -``` - -### 古い、実装されている構文 - -```css -cross-fade( , , ) -``` - -`cross-fade()` 関数の仕様では、複数の画像を指定し、それぞれの画像に他の値とは独立した透明度の値を持たせることができます。これは必ずしもそうではありませんでした。一部のブラウザーで実装されている元の構文では、2 つの画像しか使用できず、その 2 つの画像の透明度の合計がちょうど 100% になります。オリジナルの構文は Safari が対応しており、`-webkit-` の接頭辞付きのものは Chrome、Opera、その他の blink ベースのブラウザーで対応しています。 - -```css -cross-fade(url(white.png), url(black.png), 0%); /* 完全に黒 */ -cross-fade(url(white.png), url(black.png), 25%); /* 黒 25%、白 75% */ -cross-fade(url(white.png), url(black.png), 50%); /* 白 50%、白 50% */ -cross-fade(url(white.png), url(black.png), 75%); /* 白 75%、黒 25% */ -cross-fade(url(white.png), url(black.png), 100%); /* 完全に白 */ -``` - -実装されている構文では、カンマで区切られた 2 つの画像を最初に宣言し、その後にカンマと必要なパーセント値を宣言します。カンマやパーセント値を省略すると、その値は無効になります。パーセント値は、最初に宣言された画像の混合率です。含まれるパーセントは 100% から差し引かれ、その差が 2 番目の画像の混合率になります。 - -仕様書の構文の項にある緑/赤の例 (パーセント値の合計が 150%) と黄/赤/青の例 (3 つの画像を使用) は、この実装では不可能です。 - -## アクセシビリティの考慮 - -ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。背景画像を使用する場合は、色のコントラストを大きくして、画像がない場合と同様に、画像の上にどのような文字も読み取れるようにしてください。 - -- [MDN "WCAG を理解する ― ガイドライン 1.1 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content) -- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) - -## 形式文法 - -{{csssyntax}} - -## 例 - -

cross-fade の古い構文

- -#### HTML - -```html -
-``` - -#### CSS - -```css -.crossfade { - width: 300px; - height: 300px; - background-image: -webkit-cross-fade( - url('br.png'), - url('tr.png'), - 75%); - background-image: cross-fade( - url('br.png'), - url('tr.png'), - 75%); -} -``` - -#### 結果 - -{{EmbedLiveSample("Older_syntax_for_cross-fade", "330", "330")}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("image")}} -- {{cssxref("url()")}} -- {{cssxref("image/image()", "image()")}} -- {{cssxref("image/image-set()", "image-set()")}} -- {{cssxref("element()")}} -- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) -- グラデーション関数: {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} diff --git a/files/ja/web/css/cross-fade/index.md b/files/ja/web/css/cross-fade/index.md new file mode 100644 index 0000000000..ed47aea7f2 --- /dev/null +++ b/files/ja/web/css/cross-fade/index.md @@ -0,0 +1,147 @@ +--- +title: cross-fade() +slug: Web/CSS/cross-fade +tags: + - CSS + - CSS 関数 + - CSS-4 画像 + - 実験的 + - 関数 + - Reference + - ウェブ +translation_of: Web/CSS/cross-fade() +original_slug: Web/CSS/cross-fade() +browser-compat: css.types.image.cross-fade +--- +{{CSSRef}} + +**`cross-fade()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、2 枚以上の画像を所定の透過度で合成するために使用することができます。これは単色で色を薄めたり、放射状グラデーションとの組み合わせでページの特定の領域を強調させたりするような、数多くの単純な画像加工に使用することができます。 + +## 構文 + +**重要**: 仕様書と現在の実装とで構文が異なっています。仕様書の構文を先に説明します。 + +## 仕様書上の構文 + +`cross-fade()` 関数は、画像と、他の画像と合成したときにそれぞれの画像が占める割合を定義したパーセント値のリストを取ります。パーセント値は引用符なしで記述し、`'%'` 記号を含め、 0% から 100% までの間である必要があります。 + +この関数は CSS の中で、通常の画像の参照が利用できるところならばどこでも利用できます。 + +#### cross-fade のパーセント値 + +子のパーセント値は、それぞれの画像の混合率の値と考えてください。つまり、0% の値は画像が完全に透明であり、100% の値は完全に不透明になります。 + +```css +cross-fade( url(white.png) 0%, url(black.png) 100%); /* 完全に黒 */ +cross-fade( url(white.png) 25%, url(black.png) 75%); /* 黒 25%、白 75% */ +cross-fade( url(white.png) 50%, url(black.png) 50%); /* 黒 50%、白 50% */ +cross-fade( url(white.png) 75%, url(black.png) 25%); /* 白 75%、黒 25% */ +cross-fade( url(white.png) 100%, url(black.png) 0%); /* 完全に白 */ +cross-fade( url(green.png) 75%, url(red.png) 75%); /* 緑と赤がともに 75% */ +``` + +パーセント値が省略された場合は、指定されたすべてのパーセント値が合計され、`100%` から減算されます。その結果が `0%` より大きい場合は、パーセント値が省略されているすべての画像で均等に分割されます。 + +最も単純なケースは、2 つの画像を互いにフェードアウトさせる場合です。そのためには、パーセント値を設定する必要があるのは片方の画像だけで、もう片方の画像はそれに応じてフェードされます。例えば、1 枚目の画像に 0% の値を設定すると 2 枚目の画像のみが表示され、100% の値を設定すると 1 枚目の画像のみが表示されます。25% の値を設定すると、1 枚目の画像は 25%、2 枚目の画像は 75% で表示されます。75% の場合はその逆で、1 枚目が 75%、2 枚目が 25% になります。 + +以下のように書くこともできます。 + +```css +cross-fade( url(white.png) 0%, url(black.png)); /* 完全に黒 */ +cross-fade( url(white.png) 25%, url(black.png)); /* 黒 25%、白 75% */ +cross-fade( url(white.png), url(black.png)); /* 白 50%、白 50% */ +cross-fade( url(white.png) 75%, url(black.png)); /* 白 75%、黒 25% */ +cross-fade( url(white.png) 100%, url(black.png)); /* 完全に白 */ +cross-fade( url(green.png) 75%, url(red.png) 75%); /* 緑と赤がともに 75% */ +``` + +パーセント値が宣言されていない場合は、両方の画像が 50% の混合率となり、cross-fade では両方の画像が均等に合成されたように描画されます。上述の 50%/50% の例では、パーセント値を記載する必要はありませんでした。パーセント値が省略された場合、含まれるパーセント値が合計され、100% から差し引かれます。その結果、0 より大きい場合は、パーセント値が省略されたすべての画像で均等に分割されます。 + +最後の例では、両方のパーセント値の合計が 100% ではないため、両方の画像にそれぞれの混合率が含まれています。 + +パーセント値が宣言されておらず、3 つの画像が含まれている場合、それぞれの画像は 33.33% の混合率になります。以下の 2 つは (ほぼ) 同じ線です。 + +```css +cross-fade( url(red.png), url(yellow.png), url(blue.png)); /* 3 つとも 33.3333% の混合率となる */ +cross-fade( url(red.png) 33.33%, url(yellow.png) 33.33%, url(blue.png) 33.33%); +``` + +### 古い、実装されている構文 + +```css +cross-fade( , , ) +``` + +`cross-fade()` 関数の仕様では、複数の画像を指定し、それぞれの画像に他の値とは独立した透明度の値を持たせることができます。これは必ずしもそうではありませんでした。一部のブラウザーで実装されている元の構文では、2 つの画像しか使用できず、その 2 つの画像の透明度の合計がちょうど 100% になります。オリジナルの構文は Safari が対応しており、`-webkit-` の接頭辞付きのものは Chrome、Opera、その他の blink ベースのブラウザーで対応しています。 + +```css +cross-fade(url(white.png), url(black.png), 0%); /* 完全に黒 */ +cross-fade(url(white.png), url(black.png), 25%); /* 黒 25%、白 75% */ +cross-fade(url(white.png), url(black.png), 50%); /* 白 50%、白 50% */ +cross-fade(url(white.png), url(black.png), 75%); /* 白 75%、黒 25% */ +cross-fade(url(white.png), url(black.png), 100%); /* 完全に白 */ +``` + +実装されている構文では、カンマで区切られた 2 つの画像を最初に宣言し、その後にカンマと必要なパーセント値を宣言します。カンマやパーセント値を省略すると、その値は無効になります。パーセント値は、最初に宣言された画像の混合率です。含まれるパーセントは 100% から差し引かれ、その差が 2 番目の画像の混合率になります。 + +仕様書の構文の項にある緑/赤の例 (パーセント値の合計が 150%) と黄/赤/青の例 (3 つの画像を使用) は、この実装では不可能です。 + +## アクセシビリティの考慮 + +ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。背景画像を使用する場合は、色のコントラストを大きくして、画像がない場合と同様に、画像の上にどのような文字も読み取れるようにしてください。 + +- [MDN "WCAG を理解する ― ガイドライン 1.1 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content) +- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +## 形式文法 + +{{csssyntax}} + +## 例 + +

cross-fade の古い構文

+ +#### HTML + +```html +
+``` + +#### CSS + +```css +.crossfade { + width: 300px; + height: 300px; + background-image: -webkit-cross-fade( + url('br.png'), + url('tr.png'), + 75%); + background-image: cross-fade( + url('br.png'), + url('tr.png'), + 75%); +} +``` + +#### 結果 + +{{EmbedLiveSample("Older_syntax_for_cross-fade", "330", "330")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("image")}} +- {{cssxref("url()")}} +- {{cssxref("image/image()", "image()")}} +- {{cssxref("image/image-set()", "image-set()")}} +- {{cssxref("element()")}} +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- グラデーション関数: {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} diff --git a/files/ja/web/css/element()/index.md b/files/ja/web/css/element()/index.md deleted file mode 100644 index f790c32369..0000000000 --- a/files/ja/web/css/element()/index.md +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: element() -slug: Web/CSS/element() -tags: - - CSS - - CSS 関数 - - CSS4-images - - 関数 - - レイアウト - - Reference - - ウェブ -browser-compat: css.types.image.element -translation_of: Web/CSS/element() ---- -{{CSSRef}}{{SeeCompatTable}} - -**`element()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、任意の HTML 要素から生成された {{cssxref("<image>")}} 値を定義します。この画像は動的で、HTML 要素が変更されると、この関数の結果を使う CSS プロパティが自動的に更新されます。 - -特に便利な使い道としては、HTML の {{HTMLElement("canvas")}} 要素の画像を背景に使うというものです。 - -Gecko ブラウザーでは、標準外の {{domxref("document.mozSetImageElement()")}} メソッドで背景として使われる要素を既定の CSS の背景要素と取り替えることができます。 - -## 構文 - -```css -element(id) -``` - -ここで: - -- _id_ - - : 背景として使う要素の ID です。要素の HTML 属性 #_id_ に定義されているものです。 - -## 例 - -この例を[ライブで見る](https://media.prod.mdn.mozit.cloud/samples/cssref/moz-element.html)には、`-moz-element()` に対応している Firefox が必要です。 - -

いくらか現実的な例

- -この例では hidden 状態の {{HTMLElement("div")}} を背景に使います。背景要素はグラデーションを使うだけでなく、背景の一部として描画されるテキストも含んでいます。 - -```html -
-

This box uses the element with the #myBackground1 ID as its background!

-
- -
-
-

This text is part of the background. Cool, huh?

-
-
-``` - -"myBackground1" という ID を持つ {{HTMLElement("div")}} 要素が、"This box uses the element with the #myBackground1 ID as its background!" という段落を含むコンテンツの背景に使われています。 - -![](example1.png) - -

いくらか突飛な例

- -この例は hidden 状態の {{HTMLElement("button")}} 要素を、背景の繰り返しパターンとして使います。これは、好きな要素を背景として使うことができるという例ですが、すぐれたデザインとはいえないかもしれません。 - -```html -
-
- -
- -
-``` - -![](example2.png) - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("image/image()", "image()")}} -- {{cssxref("image/image-set()", "image-set()")}} -- {{cssxref("<image>")}} -- {{cssxref("<gradient>")}} -- {{cssxref("element()")}} -- {{cssxref("cross-fade()")}} -- {{domxref("document.mozSetImageElement()")}} diff --git a/files/ja/web/css/element/index.md b/files/ja/web/css/element/index.md new file mode 100644 index 0000000000..bdd17e1c78 --- /dev/null +++ b/files/ja/web/css/element/index.md @@ -0,0 +1,90 @@ +--- +title: element() +slug: Web/CSS/element +tags: + - CSS + - CSS 関数 + - CSS4-images + - 関数 + - レイアウト + - Reference + - ウェブ +translation_of: Web/CSS/element() +original_slug: Web/CSS/element() +browser-compat: css.types.image.element +--- +{{CSSRef}}{{SeeCompatTable}} + +**`element()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、任意の HTML 要素から生成された {{cssxref("<image>")}} 値を定義します。この画像は動的で、HTML 要素が変更されると、この関数の結果を使う CSS プロパティが自動的に更新されます。 + +特に便利な使い道としては、HTML の {{HTMLElement("canvas")}} 要素の画像を背景に使うというものです。 + +Gecko ブラウザーでは、標準外の {{domxref("document.mozSetImageElement()")}} メソッドで背景として使われる要素を既定の CSS の背景要素と取り替えることができます。 + +## 構文 + +```css +element(id) +``` + +ここで: + +- _id_ + - : 背景として使う要素の ID です。要素の HTML 属性 #_id_ に定義されているものです。 + +## 例 + +この例を[ライブで見る](https://media.prod.mdn.mozit.cloud/samples/cssref/moz-element.html)には、`-moz-element()` に対応している Firefox が必要です。 + +

いくらか現実的な例

+ +この例では hidden 状態の {{HTMLElement("div")}} を背景に使います。背景要素はグラデーションを使うだけでなく、背景の一部として描画されるテキストも含んでいます。 + +```html +
+

This box uses the element with the #myBackground1 ID as its background!

+
+ +
+
+

This text is part of the background. Cool, huh?

+
+
+``` + +"myBackground1" という ID を持つ {{HTMLElement("div")}} 要素が、"This box uses the element with the #myBackground1 ID as its background!" という段落を含むコンテンツの背景に使われています。 + +![](example1.png) + +

いくらか突飛な例

+ +この例は hidden 状態の {{HTMLElement("button")}} 要素を、背景の繰り返しパターンとして使います。これは、好きな要素を背景として使うことができるという例ですが、すぐれたデザインとはいえないかもしれません。 + +```html +
+
+ +
+ +
+``` + +![](example2.png) + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("image/image()", "image()")}} +- {{cssxref("image/image-set()", "image-set()")}} +- {{cssxref("<image>")}} +- {{cssxref("<gradient>")}} +- {{cssxref("element()")}} +- {{cssxref("cross-fade()")}} +- {{domxref("document.mozSetImageElement()")}} diff --git a/files/ja/web/css/env()/index.md b/files/ja/web/css/env()/index.md deleted file mode 100644 index 818c2fbfdf..0000000000 --- a/files/ja/web/css/env()/index.md +++ /dev/null @@ -1,222 +0,0 @@ ---- -title: env() -slug: Web/CSS/env() -tags: - - CSS - - CSS 変数 - - CSS 関数 - - Draft - - 関数 - - リファレンス - - 変数 - - env - - env() -browser-compat: css.properties.custom-property.env -translation_of: Web/CSS/env() ---- -{{CSSRef}} - -**`env()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、ユーザーエージェントが定義した環境変数の値を、 {{cssxref("var()")}} 関数や[カスタムプロパティ](/ja/docs/Web/CSS/--*)と同じ方法で CSS に挿入するために使用することができます。異なる点は、ユーザーが定義しているのではなくユーザーエージェントが定義しているものであること、カスタムプロパティは宣言されている要素のスコープであるのに対し、環境変数は文書でグローバルなスコープであることです。 - -加えて、宣言の外部で使用することができないカスタムプロパティとは異なり、 `env()` 関数はプロパティ値の任意の部分、記述子の任意の部分 (例 [メディアクエリールール](/ja/docs/Web/CSS/@media)) で使用することができます。仕様書が発展すると、セレクターなどの他の場所でも使用することができるかもしれません。 - -もともとは iOS ブラウザーで、開発者が内容物をビューポートの安全な領域に配置できるように提供されていたもので、仕様で定義されている `safe-area-inset-*` の値を使用することで、矩形以外の画面を使用している閲覧者でも、内容物が見えることを保証するのに役立ちます。 - -例えば、 `env()` によって解決される一般的な問題として、端末の通知がアプリのユーザーインターフェースの一部を覆ってしまうというものがあります。 `env()` を使って固定要素を配置することで、ビューポートの安全な領域に確実に表示させることができます。 - -`env()` 変数のもう一つの使用例は、アプリケーションのウィンドウの表面積をフルに活用するために、ウィンドウ制御オーバーレイ機能を使用するデスクトップの[プログレッシブウェブアプリ](/ja/docs/Web/Progressive_web_apps) (PWA) のためのものです。 `titlebar-area-*` 値を使用すると、タイトルバーがあったであろう場所に要素を配置し、内容物がウィンドウ制御ボタンにかからないようにすることができます。 - -## 構文 - -```css -/* 代替値なしで 4 つの安全な矩形までの寸法値を使用 */ -env(safe-area-inset-top); -env(safe-area-inset-right); -env(safe-area-inset-bottom); -env(safe-area-inset-left); - -/* 代替値付きで使用 */ -env(safe-area-inset-top, 20px); -env(safe-area-inset-right, 1em); -env(safe-area-inset-bottom, 0.5vh); -env(safe-area-inset-left, 1.4rem); -``` - -### 値 - -- `safe-area-inset-top`, `safe-area-inset-right`, `safe-area-inset-bottom`, `safe-area-inset-left` - - : `safe-area-inset-*` の値は 4 つの環境変数から成り、矩形ではない画面において、ビューポートの縁から、内容物を置いても切り取られる危険がない安全な矩形までの寸法を、上、右、下、左で定義します。一般的なノートパソコンのモニターなどの矩形のビューポートでは、これらの値はゼロに等しくなります。矩形ではない画面 — 例えば円い腕時計の画面 — では、矩形の中のすべての内容物が表示できるような矩形から、ユーザーエージェントが設定します。 -- `titlebar-area-x`, `titlebar-area-y`, `titlebar-area-width`, `titlebar-area-height` - - : `titlebar-area-*` 変数は、デスクトップ端末にインストールされた PWA に有用です。デスクトップの PWA が `window-controls-overlay` で [display_override](/ja/docs/Web/Manifest/display_override) の値を使用すると、 `titlebar-area-*` 変数を使用して内容物がウィンドウの制御ボタン（すなわち、最小化、最大化、閉じるボタン）に重ならないようにすることができます。 - -**注**: ほかの CSS プロパティとは異なり、ユーザーエージェントの定義するプロパティ名は大文字・小文字が区別されます。 - -### 形式文法 - -{{CSSSyntax}} - -## 使用方法 - -ブラウザーに画面上の利用可能な範囲全体を使用するように指示し、 `env()` 変数を使用できるようにするには、新しいビューポートのメタ値を追加する必要があります。 - -```html - -``` - -You can then use `env()` in your CSS: - -```css -body { - padding: - env(safe-area-inset-top, 20px) - env(safe-area-inset-right, 20px) - env(safe-area-inset-bottom, 20px) - env(safe-area-inset-left, 20px); -} -``` - -## 例 - -### env() を使用して端末の UI がボタンに被らないようにする - -次の例では、 `env()` を使用して、固定アプリのツールバーのボタンが、画面の下部に表示される端末の通知によって隠れないようにしています。デスクトップでは、 `safe-area-inset-bottom` は `0` です。しかし、 iOS のような画面下部に通知を表示する端末では、通知を表示するためのスペースを残す値が含まれています。これを {{cssxref("padding-bottom")}} の値として使用することで、その端末で自然に見える隙間を作ることができます。 - -```html -
アプリのメイン内容物はこちらです。
-
- - -
-``` - -```css -body { - display: flex; - flex-direction: column; - min-height: 100vh; - font: 1em system-ui; -} - -main { - flex: 1; - background-color: #eee; - padding: 1em; -} - -footer { - flex: none; - display: flex; - gap: 1em; - justify-content: space-evenly; - background: black; - padding: 1em 1em calc(1em + env(safe-area-inset-bottom)); - /* safe-area-inset-bottom の値を最初の 1em のパディングに追加します。 - この変数が正の値であるデバイスでは、より大きな黒い領域が表示されます。 */ - position: sticky; - bottom: 0; -} - -button { - padding: 1em; - background: white; - color: black; - margin: 0; - width: 100%; - border: none; - font: 1em system-ui; -} -``` - -{{EmbedLiveSample("Using_env_to_ensure_buttons_are_not_obscured_by_device_UI", "200px", "500px")}} - -### 代替値の仕様 - -以下の例では、 `env()` の第 2 引数を使用して、環境変数が利用できなかった場合の代替値を提供しています。 - -```html -

- お使いのブラウザーが env() 関数に対応している場合、 - この段落のテキストと左の境界の間に 50px のパディングが設定されますが、 - 上、右、下には設定されません。 - これは、他の CSS プロパティとは異なり、ユーザーエージェントプロパティ名は - 大文字・小文字が区別されるため、 padding: 0 0 0 50px - と同等の CSS になるからです。 -

-``` - -```css -p { - width: 300px; - border: 2px solid red; - padding: - env(safe-area-inset-top, 50px) - env(safe-area-inset-right, 50px) - env(safe-area-inset-bottom, 50px) - env(SAFE-AREA-INSET-LEFT, 50px); -} -``` - -{{EmbedLiveSample("Using_the_fallback_value", "350px", "250px")}} - -### 値の例 - -```css -padding: env(safe-area-inset-bottom, 50px); /* 画面が矩形のユーザーエージェントではゼロ */ -padding: env(Safe-area-inset-bottom, 50px); /* UA プロパティは大文字・小文字を区別するため 50px */ -padding: env(x, 50px 20px); /* x が妥当な環境変数でなければ padding: '50px 20px' が設定される */ -padding: env(x, 50px, 20px); /* x が妥当な環境変数でなく、 '50px, 20px' が妥当なパディング値でないため無視 */ -``` - -代替値の構文は、カスタムプロパティの場合と同様、カンマが許容されます。ただし、プロパティ値がカンマに対応していない場合、値は妥当ではなくなります。 - -**注**: ユーザーエージェントプロパティは [all](/ja/docs/Web/CSS/all) プロパティでリセットされません。 - -### env() を使用して、デスクトップの PWA でウィンドウ制御ボタンが内容物に被らないようにする - -次の例では、ウィンドウ制御オーバーレイ機能を使用する PWA で表示される内容物が、オペレーティングシステムのウィンドウ制御ボタンで隠れないようにするために `env()` を使用しています。 `titlebar-area-*` の値は、通常タイトルバーが表示されていたであろう矩形を定義します。モバイル端末など、ウィンドウ制御オーバーレイ機能に対応していない端末では、代替値が使用されます。 - -デスクトップ端末にインストールされた PWA は、通常次のように表示されます。 - -![デスクトップにインストールされた PWA が通常どのように見えるかを示す図。ウィンドウの操作ボタンとタイトルバー、その下にウェブコンテンツが表示される。](desktop-pwa-window.png) - -ウィンドウ制御オーバーレイ機能では、ウェブコンテンツがアプリのウィンドウ表面全体を覆い、ウィンドウ制御ボタンや PWA ボタンがオーバーレイ表示されます。 - -![デスクトップにインストールされた PWA がウィンドウ制御オーバーレイ機能により、ウィンドウ制御ボタン、タイトルバーなし、ウィンドウ全体に広がるウェブコンテンツがどのように見えるかの図](desktop-pwa-window-wco.png) - -```html -
ここにアプリのタイトルが入る
-
ここにアプリのメインコンテンツが入る
-``` - -```css -header { - position: fixed; - left: env(titlebar-area-x); - top: env(titlebar-area-y); - width: env(titlebar-area-width); - height: env(titlebar-area-height); -} - -main { - margin-top: env(titlebar-area-height); -} -``` - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{CSSxRef("var()", "var(…)")}} -- [CSS カスタムプロパティと変数のカスケード](/ja/docs/Web/CSS/CSS_Variables) -- [カスタムプロパティ (--\*)](/ja/docs/Web/CSS/--*) -- [CSS カスタムプロパティ (変数) の使用](/ja/docs/Web/CSS/Using_CSS_custom_properties) -- {{CSSxRef("@viewport", "viewport-fit (@viewport)")}} -- [Customize the window controls overlay of your PWA's title bar](https://web.dev/window-controls-overlay/) -- [Display content in the title bar](https://docs.microsoft.com/microsoft-edge/progressive-web-apps-chromium/how-to/window-controls-overlay) -- [Breaking Out of the Box](https://alistapart.com/article/breaking-out-of-the-box/) diff --git a/files/ja/web/css/env/index.md b/files/ja/web/css/env/index.md new file mode 100644 index 0000000000..797bad559a --- /dev/null +++ b/files/ja/web/css/env/index.md @@ -0,0 +1,223 @@ +--- +title: env() +slug: Web/CSS/env +tags: + - CSS + - CSS 変数 + - CSS 関数 + - Draft + - 関数 + - リファレンス + - 変数 + - env + - env() +translation_of: Web/CSS/env() +original_slug: Web/CSS/env() +browser-compat: css.properties.custom-property.env +--- +{{CSSRef}} + +**`env()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、ユーザーエージェントが定義した環境変数の値を、 {{cssxref("var()")}} 関数や[カスタムプロパティ](/ja/docs/Web/CSS/--*)と同じ方法で CSS に挿入するために使用することができます。異なる点は、ユーザーが定義しているのではなくユーザーエージェントが定義しているものであること、カスタムプロパティは宣言されている要素のスコープであるのに対し、環境変数は文書でグローバルなスコープであることです。 + +加えて、宣言の外部で使用することができないカスタムプロパティとは異なり、 `env()` 関数はプロパティ値の任意の部分、記述子の任意の部分 (例 [メディアクエリールール](/ja/docs/Web/CSS/@media)) で使用することができます。仕様書が発展すると、セレクターなどの他の場所でも使用することができるかもしれません。 + +もともとは iOS ブラウザーで、開発者が内容物をビューポートの安全な領域に配置できるように提供されていたもので、仕様で定義されている `safe-area-inset-*` の値を使用することで、矩形以外の画面を使用している閲覧者でも、内容物が見えることを保証するのに役立ちます。 + +例えば、 `env()` によって解決される一般的な問題として、端末の通知がアプリのユーザーインターフェースの一部を覆ってしまうというものがあります。 `env()` を使って固定要素を配置することで、ビューポートの安全な領域に確実に表示させることができます。 + +`env()` 変数のもう一つの使用例は、アプリケーションのウィンドウの表面積をフルに活用するために、ウィンドウ制御オーバーレイ機能を使用するデスクトップの[プログレッシブウェブアプリ](/ja/docs/Web/Progressive_web_apps) (PWA) のためのものです。 `titlebar-area-*` 値を使用すると、タイトルバーがあったであろう場所に要素を配置し、内容物がウィンドウ制御ボタンにかからないようにすることができます。 + +## 構文 + +```css +/* 代替値なしで 4 つの安全な矩形までの寸法値を使用 */ +env(safe-area-inset-top); +env(safe-area-inset-right); +env(safe-area-inset-bottom); +env(safe-area-inset-left); + +/* 代替値付きで使用 */ +env(safe-area-inset-top, 20px); +env(safe-area-inset-right, 1em); +env(safe-area-inset-bottom, 0.5vh); +env(safe-area-inset-left, 1.4rem); +``` + +### 値 + +- `safe-area-inset-top`, `safe-area-inset-right`, `safe-area-inset-bottom`, `safe-area-inset-left` + - : `safe-area-inset-*` の値は 4 つの環境変数から成り、矩形ではない画面において、ビューポートの縁から、内容物を置いても切り取られる危険がない安全な矩形までの寸法を、上、右、下、左で定義します。一般的なノートパソコンのモニターなどの矩形のビューポートでは、これらの値はゼロに等しくなります。矩形ではない画面 — 例えば円い腕時計の画面 — では、矩形の中のすべての内容物が表示できるような矩形から、ユーザーエージェントが設定します。 +- `titlebar-area-x`, `titlebar-area-y`, `titlebar-area-width`, `titlebar-area-height` + - : `titlebar-area-*` 変数は、デスクトップ端末にインストールされた PWA に有用です。デスクトップの PWA が `window-controls-overlay` で [display_override](/ja/docs/Web/Manifest/display_override) の値を使用すると、 `titlebar-area-*` 変数を使用して内容物がウィンドウの制御ボタン（すなわち、最小化、最大化、閉じるボタン）に重ならないようにすることができます。 + +**注**: ほかの CSS プロパティとは異なり、ユーザーエージェントの定義するプロパティ名は大文字・小文字が区別されます。 + +### 形式文法 + +{{CSSSyntax}} + +## 使用方法 + +ブラウザーに画面上の利用可能な範囲全体を使用するように指示し、 `env()` 変数を使用できるようにするには、新しいビューポートのメタ値を追加する必要があります。 + +```html + +``` + +You can then use `env()` in your CSS: + +```css +body { + padding: + env(safe-area-inset-top, 20px) + env(safe-area-inset-right, 20px) + env(safe-area-inset-bottom, 20px) + env(safe-area-inset-left, 20px); +} +``` + +## 例 + +### env() を使用して端末の UI がボタンに被らないようにする + +次の例では、 `env()` を使用して、固定アプリのツールバーのボタンが、画面の下部に表示される端末の通知によって隠れないようにしています。デスクトップでは、 `safe-area-inset-bottom` は `0` です。しかし、 iOS のような画面下部に通知を表示する端末では、通知を表示するためのスペースを残す値が含まれています。これを {{cssxref("padding-bottom")}} の値として使用することで、その端末で自然に見える隙間を作ることができます。 + +```html +
アプリのメイン内容物はこちらです。
+
+ + +
+``` + +```css +body { + display: flex; + flex-direction: column; + min-height: 100vh; + font: 1em system-ui; +} + +main { + flex: 1; + background-color: #eee; + padding: 1em; +} + +footer { + flex: none; + display: flex; + gap: 1em; + justify-content: space-evenly; + background: black; + padding: 1em 1em calc(1em + env(safe-area-inset-bottom)); + /* safe-area-inset-bottom の値を最初の 1em のパディングに追加します。 + この変数が正の値であるデバイスでは、より大きな黒い領域が表示されます。 */ + position: sticky; + bottom: 0; +} + +button { + padding: 1em; + background: white; + color: black; + margin: 0; + width: 100%; + border: none; + font: 1em system-ui; +} +``` + +{{EmbedLiveSample("Using_env_to_ensure_buttons_are_not_obscured_by_device_UI", "200px", "500px")}} + +### 代替値の仕様 + +以下の例では、 `env()` の第 2 引数を使用して、環境変数が利用できなかった場合の代替値を提供しています。 + +```html +

+ お使いのブラウザーが env() 関数に対応している場合、 + この段落のテキストと左の境界の間に 50px のパディングが設定されますが、 + 上、右、下には設定されません。 + これは、他の CSS プロパティとは異なり、ユーザーエージェントプロパティ名は + 大文字・小文字が区別されるため、 padding: 0 0 0 50px + と同等の CSS になるからです。 +

+``` + +```css +p { + width: 300px; + border: 2px solid red; + padding: + env(safe-area-inset-top, 50px) + env(safe-area-inset-right, 50px) + env(safe-area-inset-bottom, 50px) + env(SAFE-AREA-INSET-LEFT, 50px); +} +``` + +{{EmbedLiveSample("Using_the_fallback_value", "350px", "250px")}} + +### 値の例 + +```css +padding: env(safe-area-inset-bottom, 50px); /* 画面が矩形のユーザーエージェントではゼロ */ +padding: env(Safe-area-inset-bottom, 50px); /* UA プロパティは大文字・小文字を区別するため 50px */ +padding: env(x, 50px 20px); /* x が妥当な環境変数でなければ padding: '50px 20px' が設定される */ +padding: env(x, 50px, 20px); /* x が妥当な環境変数でなく、 '50px, 20px' が妥当なパディング値でないため無視 */ +``` + +代替値の構文は、カスタムプロパティの場合と同様、カンマが許容されます。ただし、プロパティ値がカンマに対応していない場合、値は妥当ではなくなります。 + +**注**: ユーザーエージェントプロパティは [all](/ja/docs/Web/CSS/all) プロパティでリセットされません。 + +### env() を使用して、デスクトップの PWA でウィンドウ制御ボタンが内容物に被らないようにする + +次の例では、ウィンドウ制御オーバーレイ機能を使用する PWA で表示される内容物が、オペレーティングシステムのウィンドウ制御ボタンで隠れないようにするために `env()` を使用しています。 `titlebar-area-*` の値は、通常タイトルバーが表示されていたであろう矩形を定義します。モバイル端末など、ウィンドウ制御オーバーレイ機能に対応していない端末では、代替値が使用されます。 + +デスクトップ端末にインストールされた PWA は、通常次のように表示されます。 + +![デスクトップにインストールされた PWA が通常どのように見えるかを示す図。ウィンドウの操作ボタンとタイトルバー、その下にウェブコンテンツが表示される。](desktop-pwa-window.png) + +ウィンドウ制御オーバーレイ機能では、ウェブコンテンツがアプリのウィンドウ表面全体を覆い、ウィンドウ制御ボタンや PWA ボタンがオーバーレイ表示されます。 + +![デスクトップにインストールされた PWA がウィンドウ制御オーバーレイ機能により、ウィンドウ制御ボタン、タイトルバーなし、ウィンドウ全体に広がるウェブコンテンツがどのように見えるかの図](desktop-pwa-window-wco.png) + +```html +
ここにアプリのタイトルが入る
+
ここにアプリのメインコンテンツが入る
+``` + +```css +header { + position: fixed; + left: env(titlebar-area-x); + top: env(titlebar-area-y); + width: env(titlebar-area-width); + height: env(titlebar-area-height); +} + +main { + margin-top: env(titlebar-area-height); +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{CSSxRef("var()", "var(…)")}} +- [CSS カスタムプロパティと変数のカスケード](/ja/docs/Web/CSS/CSS_Variables) +- [カスタムプロパティ (--\*)](/ja/docs/Web/CSS/--*) +- [CSS カスタムプロパティ (変数) の使用](/ja/docs/Web/CSS/Using_CSS_custom_properties) +- {{CSSxRef("@viewport", "viewport-fit (@viewport)")}} +- [Customize the window controls overlay of your PWA's title bar](https://web.dev/window-controls-overlay/) +- [Display content in the title bar](https://docs.microsoft.com/microsoft-edge/progressive-web-apps-chromium/how-to/window-controls-overlay) +- [Breaking Out of the Box](https://alistapart.com/article/breaking-out-of-the-box/) diff --git a/files/ja/web/css/filter-function/blur()/index.md b/files/ja/web/css/filter-function/blur()/index.md deleted file mode 100644 index 8ff94873c5..0000000000 --- a/files/ja/web/css/filter-function/blur()/index.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: blur() -slug: Web/CSS/filter-function/blur() -tags: - - CSS - - CSS 関数 - - フィルター効果 - - 関数 - - リファレンス -browser-compat: css.types.filter-function.blur -translation_of: Web/CSS/filter-function/blur() ---- -{{CSSRef}} - -**`blur()`** は [CSS](/ja/docs/Web/CSS) の関数で、入力画像に[ガウシアンぼかし](https://ja.wikipedia.org/wiki/%E3%82%AC%E3%82%A6%E3%82%B7%E3%82%A2%E3%83%B3%E3%81%BC%E3%81%8B%E3%81%97)を適用します。返値は {{cssxref("<filter-function>")}} です。 - -{{EmbedInteractiveExample("pages/css/function-blur.html")}} - -## 構文 - -```css -blur(radius) -``` - -### 引数 - -- `radius` - - : ぼかしの半径で、 {{cssxref("<length>")}} で指定します。ガウス関数の標準偏差の値を定義します。つまり、画面上のピクセルをいくつ互いに混合するかということです。すなわち、大きい値になるほどよりぼかしが入ります。 `0` の値は入力を変更しません。補間時の欠損値は `0` です。 - -## 例 - -### ピクセル数と rem を用いた blur の設定 - -```css -blur(0) /* 効果なし */ -blur(8px) /* 半径 8px でぼかす */ -blur(1.17rem) /* 半径 1.17rem でぼかす */ -``` - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("<filter-function>")}} -- {{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()")}} diff --git a/files/ja/web/css/filter-function/blur/index.md b/files/ja/web/css/filter-function/blur/index.md new file mode 100644 index 0000000000..c2d632c8de --- /dev/null +++ b/files/ja/web/css/filter-function/blur/index.md @@ -0,0 +1,60 @@ +--- +title: blur() +slug: Web/CSS/filter-function/blur +tags: + - CSS + - CSS 関数 + - フィルター効果 + - 関数 + - リファレンス +translation_of: Web/CSS/filter-function/blur() +original_slug: Web/CSS/filter-function/blur() +browser-compat: css.types.filter-function.blur +--- +{{CSSRef}} + +**`blur()`** は [CSS](/ja/docs/Web/CSS) の関数で、入力画像に[ガウシアンぼかし](https://ja.wikipedia.org/wiki/%E3%82%AC%E3%82%A6%E3%82%B7%E3%82%A2%E3%83%B3%E3%81%BC%E3%81%8B%E3%81%97)を適用します。返値は {{cssxref("<filter-function>")}} です。 + +{{EmbedInteractiveExample("pages/css/function-blur.html")}} + +## 構文 + +```css +blur(radius) +``` + +### 引数 + +- `radius` + - : ぼかしの半径で、 {{cssxref("<length>")}} で指定します。ガウス関数の標準偏差の値を定義します。つまり、画面上のピクセルをいくつ互いに混合するかということです。すなわち、大きい値になるほどよりぼかしが入ります。 `0` の値は入力を変更しません。補間時の欠損値は `0` です。 + +## 例 + +### ピクセル数と rem を用いた blur の設定 + +```css +blur(0) /* 効果なし */ +blur(8px) /* 半径 8px でぼかす */ +blur(1.17rem) /* 半径 1.17rem でぼかす */ +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("<filter-function>")}} +- {{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()")}} diff --git a/files/ja/web/css/filter-function/brightness()/index.md b/files/ja/web/css/filter-function/brightness()/index.md deleted file mode 100644 index bdabac3a94..0000000000 --- a/files/ja/web/css/filter-function/brightness()/index.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: brightness() -slug: Web/CSS/filter-function/brightness() -tags: - - CSS - - CSS 関数 - - フィルター効果 - - 関数 - - リファレンス -browser-compat: css.types.filter-function.brightness -translation_of: Web/CSS/filter-function/brightness() ---- -{{CSSRef}} - -**`brightness()`** は [CSS](/ja/docs/Web/CSS) の関数で、入力画像に線形乗算を適用し、明るくしたり暗くしたりします。その結果は {{cssxref("<filter-function>")}} です。 - -{{EmbedInteractiveExample("pages/css/function-brightness.html")}} - -## 構文 - -```css -brightness(amount) -``` - -### 引数 - -- `amount` - - : 結果の明るさで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 `100%` 未満の値では画像が暗くなり、 `100%` を超える値では画像が明るくなります。 `0%` の値では画像が完全に黒くなり、 `100%` の値では入力が変更されないままになります。補間時の欠損値は `1` です。 - -## 例 - -### 数値とパーセント値を用いた brightness の設定 - -```css ->brightness(0%) /* 完全に黒 */ -brightness(0.4) /* 明るさ 40% */ -brightness(1) /* 効果なし */ -brightness(200%) /* 明るさ 2 倍 */ -``` - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("<filter-function>")}} -- {{cssxref("filter-function/blur()", "blur()")}} -- {{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()")}} diff --git a/files/ja/web/css/filter-function/brightness/index.md b/files/ja/web/css/filter-function/brightness/index.md new file mode 100644 index 0000000000..152694ef5f --- /dev/null +++ b/files/ja/web/css/filter-function/brightness/index.md @@ -0,0 +1,61 @@ +--- +title: brightness() +slug: Web/CSS/filter-function/brightness +tags: + - CSS + - CSS 関数 + - フィルター効果 + - 関数 + - リファレンス +translation_of: Web/CSS/filter-function/brightness() +original_slug: Web/CSS/filter-function/brightness() +browser-compat: css.types.filter-function.brightness +--- +{{CSSRef}} + +**`brightness()`** は [CSS](/ja/docs/Web/CSS) の関数で、入力画像に線形乗算を適用し、明るくしたり暗くしたりします。その結果は {{cssxref("<filter-function>")}} です。 + +{{EmbedInteractiveExample("pages/css/function-brightness.html")}} + +## 構文 + +```css +brightness(amount) +``` + +### 引数 + +- `amount` + - : 結果の明るさで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 `100%` 未満の値では画像が暗くなり、 `100%` を超える値では画像が明るくなります。 `0%` の値では画像が完全に黒くなり、 `100%` の値では入力が変更されないままになります。補間時の欠損値は `1` です。 + +## 例 + +### 数値とパーセント値を用いた brightness の設定 + +```css +>brightness(0%) /* 完全に黒 */ +brightness(0.4) /* 明るさ 40% */ +brightness(1) /* 効果なし */ +brightness(200%) /* 明るさ 2 倍 */ +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("<filter-function>")}} +- {{cssxref("filter-function/blur()", "blur()")}} +- {{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()")}} diff --git a/files/ja/web/css/filter-function/contrast()/index.md b/files/ja/web/css/filter-function/contrast()/index.md deleted file mode 100644 index 10c8968679..0000000000 --- a/files/ja/web/css/filter-function/contrast()/index.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: contrast() -slug: Web/CSS/filter-function/contrast() -tags: - - CSS - - CSS 関数 - - フィルター効果 - - 関数 - - リファレンス -browser-compat: css.types.filter-function.contrast -translation_of: Web/CSS/filter-function/contrast() ---- -{{CSSRef}} - -**`contrast()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、入力画像のコントラストを調整します。結果は {{cssxref("<filter-function>")}} です。 - -{{EmbedInteractiveExample("pages/css/function-contrast.html")}} - -## 構文 - -```css -contrast(amount) -``` - -### 引数 - -- `amount` - - : 結果のコントラストで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 `100%` 未満の値ではコントラストが下がり、 `100%` を超える値ではコントラストが上がります。 `0%` の値では画像が完全に灰色になり、 `100%` の値では入力が変更されないままになります。補間時の欠損値は `1` です。 - -## 例 - -### 数値とパーセント値を使用した contrast の設定 - -```css -contrast(0) /* 完全な灰色 */ -contrast(65%) /* 65% のコントラスト */ -contrast(1) /* 効果なし */ -contrast(200%) /* 2 倍のコントラスト */ -``` - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("<filter-function>")}} -- {{cssxref("filter-function/blur()", "blur()")}} -- {{cssxref("filter-function/brightness()", "brightness()")}} -- {{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()")}} diff --git a/files/ja/web/css/filter-function/contrast/index.md b/files/ja/web/css/filter-function/contrast/index.md new file mode 100644 index 0000000000..1a15d43334 --- /dev/null +++ b/files/ja/web/css/filter-function/contrast/index.md @@ -0,0 +1,61 @@ +--- +title: contrast() +slug: Web/CSS/filter-function/contrast +tags: + - CSS + - CSS 関数 + - フィルター効果 + - 関数 + - リファレンス +translation_of: Web/CSS/filter-function/contrast() +original_slug: Web/CSS/filter-function/contrast() +browser-compat: css.types.filter-function.contrast +--- +{{CSSRef}} + +**`contrast()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、入力画像のコントラストを調整します。結果は {{cssxref("<filter-function>")}} です。 + +{{EmbedInteractiveExample("pages/css/function-contrast.html")}} + +## 構文 + +```css +contrast(amount) +``` + +### 引数 + +- `amount` + - : 結果のコントラストで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 `100%` 未満の値ではコントラストが下がり、 `100%` を超える値ではコントラストが上がります。 `0%` の値では画像が完全に灰色になり、 `100%` の値では入力が変更されないままになります。補間時の欠損値は `1` です。 + +## 例 + +### 数値とパーセント値を使用した contrast の設定 + +```css +contrast(0) /* 完全な灰色 */ +contrast(65%) /* 65% のコントラスト */ +contrast(1) /* 効果なし */ +contrast(200%) /* 2 倍のコントラスト */ +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("<filter-function>")}} +- {{cssxref("filter-function/blur()", "blur()")}} +- {{cssxref("filter-function/brightness()", "brightness()")}} +- {{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()")}} diff --git a/files/ja/web/css/filter-function/drop-shadow()/index.md b/files/ja/web/css/filter-function/drop-shadow()/index.md deleted file mode 100644 index 90f1ce5ab3..0000000000 --- a/files/ja/web/css/filter-function/drop-shadow()/index.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: drop-shadow() -slug: Web/CSS/filter-function/drop-shadow() -tags: - - CSS - - CSS 関数 - - フィルター効果 - - 関数 - - リファレンス -browser-compat: css.types.filter-function.drop-shadow -translation_of: Web/CSS/filter-function/drop-shadow() ---- -{{CSSRef}} - -**`drop-shadow()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、入力画像にドロップシャドウ効果を適用します。結果は {{cssxref("<filter-function>")}} です。 - -{{EmbedInteractiveExample("pages/css/function-drop-shadow.html")}} - -ドロップシャドウは効果的にぼけ、入力画像のアルファマスクのバージョンからずれ、特定の色で描かれて画像の下に混合されます。 - -> **Note:** この関数はいくらか {{Cssxref("box-shadow")}} プロパティと似ています。 `box-shadow` プロパティは要素の*ボックス全体*の背後に長方形の影を作成しますが、 `drop-shadow()` フィルター関数は*画像自体*の形 (アルファチャネル) に合った影を作成します。 - -## 構文 - -```css -drop-shadow(offset-x offset-y blur-radius color) -``` - -`drop-shadow()` 関数は `` 型の引数 ({{cssxref("box-shadow")}} プロパティで定義) を受け付けますが、 `inset` キーワードと `spread` 引数が許可されないという例外があります。 - -### 引数 - -- `offset-x` `offset-y` (必須) - - : 影のオフセットを指定する 2 つの {{cssxref("<length>")}} 値です。 `offset-x` は水平方向の距離を表し、負の数で影を要素の左方に配置します。 `offset-y` は垂直方向の距離を表し、負の数で影を要素の上方に配置します。どちらの値も `0` であれば、影は要素の真後ろに配置されます。 -- `blur-radius` (任意) - - : 影をぼかす半径で、 {{cssxref("<length>")}} で指定します。値が大きくなるほど、影は広く薄くなります。指定されていない場合は、既定値の `0` になり、辺がはっきりとしてぼけなくなります。負の数は許可されていません。 -- `color` (任意) - - : 影の色で、 {{cssxref("<color>")}} で指定します。指定されなかった場合は、 {{cssxref("color")}} プロパティの値が使用されます。 - -## 例 - -### ピクセル単位のオフセットとぼかし半径を用いたドロップシャドウの設定 - -```css -/* 10px のぼかしで広がりのない黒い影 */ -drop-shadow(16px 16px 10px black) -``` - -### rem 単位ののオフセットとぼかし半径を用いたドロップシャドウの設定 - -```css -/* 1rem のぼかしで 3rem の広がりの赤っぽい影 */ -drop-shadow(.5rem .5rem 1rem #e23) -``` - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("<filter-function>")}} -- CSS の {{cssxref("box-shadow")}} プロパティ -- {{cssxref("filter-function/blur()", "blur()")}} -- {{cssxref("filter-function/brightness()", "brightness()")}} -- {{cssxref("filter-function/contrast()", "contrast()")}} -- {{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()")}} diff --git a/files/ja/web/css/filter-function/drop-shadow/index.md b/files/ja/web/css/filter-function/drop-shadow/index.md new file mode 100644 index 0000000000..cf3905205d --- /dev/null +++ b/files/ja/web/css/filter-function/drop-shadow/index.md @@ -0,0 +1,77 @@ +--- +title: drop-shadow() +slug: Web/CSS/filter-function/drop-shadow +tags: + - CSS + - CSS 関数 + - フィルター効果 + - 関数 + - リファレンス +translation_of: Web/CSS/filter-function/drop-shadow() +original_slug: Web/CSS/filter-function/drop-shadow() +browser-compat: css.types.filter-function.drop-shadow +--- +{{CSSRef}} + +**`drop-shadow()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、入力画像にドロップシャドウ効果を適用します。結果は {{cssxref("<filter-function>")}} です。 + +{{EmbedInteractiveExample("pages/css/function-drop-shadow.html")}} + +ドロップシャドウは効果的にぼけ、入力画像のアルファマスクのバージョンからずれ、特定の色で描かれて画像の下に混合されます。 + +> **Note:** この関数はいくらか {{Cssxref("box-shadow")}} プロパティと似ています。 `box-shadow` プロパティは要素の*ボックス全体*の背後に長方形の影を作成しますが、 `drop-shadow()` フィルター関数は*画像自体*の形 (アルファチャネル) に合った影を作成します。 + +## 構文 + +```css +drop-shadow(offset-x offset-y blur-radius color) +``` + +`drop-shadow()` 関数は `` 型の引数 ({{cssxref("box-shadow")}} プロパティで定義) を受け付けますが、 `inset` キーワードと `spread` 引数が許可されないという例外があります。 + +### 引数 + +- `offset-x` `offset-y` (必須) + - : 影のオフセットを指定する 2 つの {{cssxref("<length>")}} 値です。 `offset-x` は水平方向の距離を表し、負の数で影を要素の左方に配置します。 `offset-y` は垂直方向の距離を表し、負の数で影を要素の上方に配置します。どちらの値も `0` であれば、影は要素の真後ろに配置されます。 +- `blur-radius` (任意) + - : 影をぼかす半径で、 {{cssxref("<length>")}} で指定します。値が大きくなるほど、影は広く薄くなります。指定されていない場合は、既定値の `0` になり、辺がはっきりとしてぼけなくなります。負の数は許可されていません。 +- `color` (任意) + - : 影の色で、 {{cssxref("<color>")}} で指定します。指定されなかった場合は、 {{cssxref("color")}} プロパティの値が使用されます。 + +## 例 + +### ピクセル単位のオフセットとぼかし半径を用いたドロップシャドウの設定 + +```css +/* 10px のぼかしで広がりのない黒い影 */ +drop-shadow(16px 16px 10px black) +``` + +### rem 単位ののオフセットとぼかし半径を用いたドロップシャドウの設定 + +```css +/* 1rem のぼかしで 3rem の広がりの赤っぽい影 */ +drop-shadow(.5rem .5rem 1rem #e23) +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("<filter-function>")}} +- CSS の {{cssxref("box-shadow")}} プロパティ +- {{cssxref("filter-function/blur()", "blur()")}} +- {{cssxref("filter-function/brightness()", "brightness()")}} +- {{cssxref("filter-function/contrast()", "contrast()")}} +- {{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()")}} diff --git a/files/ja/web/css/filter-function/grayscale()/index.md b/files/ja/web/css/filter-function/grayscale()/index.md deleted file mode 100644 index 520fe781fc..0000000000 --- a/files/ja/web/css/filter-function/grayscale()/index.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: grayscale() -slug: Web/CSS/filter-function/grayscale() -tags: - - CSS - - CSS 関数 - - フィルター効果 - - 関数 - - リファレンス -browser-compat: css.types.filter-function.grayscale -translation_of: Web/CSS/filter-function/grayscale() ---- -{{CSSRef}} - -**`grayscale()`** は [CSS](/ja/docs/Web/CSS) の関数は、入力画像をグレースケールに変換します。結果は {{cssxref("<filter-function>")}} です。 - -{{EmbedInteractiveExample("pages/css/function-grayscale.html")}} - -## 構文 - -```css -grayscale(amount) -``` - -### 引数 - -- `amount` - - : 変換の度合いで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 `100%` の値では完全にグレースケールになり、 `0%` の値では入力が変更されないままになります。 `0%` と `100%` の間の値は、効果の割合です。省略時の既定値は `1` です。補間時の欠損値は `0` です。 - -## 例 - -### grayscale() の正しい値の例 - -```css -grayscale(0) /* 効果なし */ -grayscale(.7) /* 70% グレースケール */ -grayscale(100%) /* 完全なグレースケール */ -``` - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("<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/hue-rotate()", "hue-rotate()")}} -- {{cssxref("filter-function/invert()", "invert()")}} -- {{cssxref("filter-function/opacity()", "opacity()")}} -- {{cssxref("filter-function/saturate()", "saturate()")}} -- {{cssxref("filter-function/sepia()", "sepia()")}} diff --git a/files/ja/web/css/filter-function/grayscale/index.md b/files/ja/web/css/filter-function/grayscale/index.md new file mode 100644 index 0000000000..d5e359542c --- /dev/null +++ b/files/ja/web/css/filter-function/grayscale/index.md @@ -0,0 +1,60 @@ +--- +title: grayscale() +slug: Web/CSS/filter-function/grayscale +tags: + - CSS + - CSS 関数 + - フィルター効果 + - 関数 + - リファレンス +translation_of: Web/CSS/filter-function/grayscale() +original_slug: Web/CSS/filter-function/grayscale() +browser-compat: css.types.filter-function.grayscale +--- +{{CSSRef}} + +**`grayscale()`** は [CSS](/ja/docs/Web/CSS) の関数は、入力画像をグレースケールに変換します。結果は {{cssxref("<filter-function>")}} です。 + +{{EmbedInteractiveExample("pages/css/function-grayscale.html")}} + +## 構文 + +```css +grayscale(amount) +``` + +### 引数 + +- `amount` + - : 変換の度合いで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 `100%` の値では完全にグレースケールになり、 `0%` の値では入力が変更されないままになります。 `0%` と `100%` の間の値は、効果の割合です。省略時の既定値は `1` です。補間時の欠損値は `0` です。 + +## 例 + +### grayscale() の正しい値の例 + +```css +grayscale(0) /* 効果なし */ +grayscale(.7) /* 70% グレースケール */ +grayscale(100%) /* 完全なグレースケール */ +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("<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/hue-rotate()", "hue-rotate()")}} +- {{cssxref("filter-function/invert()", "invert()")}} +- {{cssxref("filter-function/opacity()", "opacity()")}} +- {{cssxref("filter-function/saturate()", "saturate()")}} +- {{cssxref("filter-function/sepia()", "sepia()")}} diff --git a/files/ja/web/css/filter-function/hue-rotate()/index.md b/files/ja/web/css/filter-function/hue-rotate()/index.md deleted file mode 100644 index 8170c4c277..0000000000 --- a/files/ja/web/css/filter-function/hue-rotate()/index.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: hue-rotate() -slug: Web/CSS/filter-function/hue-rotate() -tags: - - CSS - - CSS 関数 - - フィルター効果 - - 関数 - - リファレンス -browser-compat: css.types.filter-function.hue-rotate -translation_of: Web/CSS/filter-function/hue-rotate() ---- -{{CSSRef}} - -**`hue-rotate()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素およびその中身のコンテンツの[色相環](https://ja.wikipedia.org/wiki/%E8%89%B2%E7%9B%B8)を回転させます。結果は {{cssxref("<filter-function>")}} です。 - -{{EmbedInteractiveExample("pages/css/function-hue-rotate.html")}} - -## 構文 - -```css -hue-rotate(angle) -``` - -### 引数 - -- `angle` - - : 入力サンプルの色相の相対的な変化量を、 {{cssxref("<angle>")}} で指定します。 `0deg` は入力を変更しないままにします。正の回転角は色相の値を増加させるのに対し、負の回転角は色相の値を減少させます。補間時の欠損値は `0` です。最小値または最大値はなく、 `hue-rotate(Ndeg)` は `N` を 360 で割った余りと等価です。 - -## 例 - -### hue-rotate の正しい値の例 - -```css -hue-rotate(-90deg) /* 270 度の回転と同じ */ -hue-rotate(0deg) /* 効果なし */ -hue-rotate(90deg) /* 90 度の回転 */ -hue-rotate(.5turn) /* 180 度の回転 */ -hue-rotate(405deg) /* 45 度の回転と同じ */ -``` - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("<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/invert()", "invert()")}} -- {{cssxref("filter-function/opacity()", "opacity()")}} -- {{cssxref("filter-function/saturate()", "saturate()")}} -- {{cssxref("filter-function/sepia()", "sepia()")}} diff --git a/files/ja/web/css/filter-function/hue-rotate/index.md b/files/ja/web/css/filter-function/hue-rotate/index.md new file mode 100644 index 0000000000..e214eeff5f --- /dev/null +++ b/files/ja/web/css/filter-function/hue-rotate/index.md @@ -0,0 +1,62 @@ +--- +title: hue-rotate() +slug: Web/CSS/filter-function/hue-rotate +tags: + - CSS + - CSS 関数 + - フィルター効果 + - 関数 + - リファレンス +translation_of: Web/CSS/filter-function/hue-rotate() +original_slug: Web/CSS/filter-function/hue-rotate() +browser-compat: css.types.filter-function.hue-rotate +--- +{{CSSRef}} + +**`hue-rotate()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素およびその中身のコンテンツの[色相環](https://ja.wikipedia.org/wiki/%E8%89%B2%E7%9B%B8)を回転させます。結果は {{cssxref("<filter-function>")}} です。 + +{{EmbedInteractiveExample("pages/css/function-hue-rotate.html")}} + +## 構文 + +```css +hue-rotate(angle) +``` + +### 引数 + +- `angle` + - : 入力サンプルの色相の相対的な変化量を、 {{cssxref("<angle>")}} で指定します。 `0deg` は入力を変更しないままにします。正の回転角は色相の値を増加させるのに対し、負の回転角は色相の値を減少させます。補間時の欠損値は `0` です。最小値または最大値はなく、 `hue-rotate(Ndeg)` は `N` を 360 で割った余りと等価です。 + +## 例 + +### hue-rotate の正しい値の例 + +```css +hue-rotate(-90deg) /* 270 度の回転と同じ */ +hue-rotate(0deg) /* 効果なし */ +hue-rotate(90deg) /* 90 度の回転 */ +hue-rotate(.5turn) /* 180 度の回転 */ +hue-rotate(405deg) /* 45 度の回転と同じ */ +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("<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/invert()", "invert()")}} +- {{cssxref("filter-function/opacity()", "opacity()")}} +- {{cssxref("filter-function/saturate()", "saturate()")}} +- {{cssxref("filter-function/sepia()", "sepia()")}} diff --git a/files/ja/web/css/filter-function/invert()/index.md b/files/ja/web/css/filter-function/invert()/index.md deleted file mode 100644 index a5550ebf12..0000000000 --- a/files/ja/web/css/filter-function/invert()/index.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: invert() -slug: Web/CSS/filter-function/invert() -tags: - - CSS - - CSS 関数 - - フィルター効果 - - 関数 - - リファレンス -browser-compat: css.types.filter-function.invert -translation_of: Web/CSS/filter-function/invert() ---- -{{CSSRef}} - -**`invert()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、入力画像の色サンプルを反転します。結果は {{cssxref("<filter-function>")}} です。 - -{{EmbedInteractiveExample("pages/css/function-invert.html")}} - -## 構文 - -```css -invert(amount) -``` - -### 引数 - -- `amount` - - : 変換の度合いで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 `100%` の値では完全に反転され、 `0%` の値では入力が変更されないままになります。 `0%` と `100%` の間の値は、効果の割合です。補間時の欠損値は `0` です。 - -## 例 - -### invert() の正しい値の例 - -```css -invert(0) /* 効果なし */ -invert(.6) /* 60% 反転 */ -invert(100%) /* 完全に反転 */ -``` - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("<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/opacity()", "opacity()")}} -- {{cssxref("filter-function/saturate()", "saturate()")}} -- {{cssxref("filter-function/sepia()", "sepia()")}} diff --git a/files/ja/web/css/filter-function/invert/index.md b/files/ja/web/css/filter-function/invert/index.md new file mode 100644 index 0000000000..776fb898ef --- /dev/null +++ b/files/ja/web/css/filter-function/invert/index.md @@ -0,0 +1,60 @@ +--- +title: invert() +slug: Web/CSS/filter-function/invert +tags: + - CSS + - CSS 関数 + - フィルター効果 + - 関数 + - リファレンス +translation_of: Web/CSS/filter-function/invert() +original_slug: Web/CSS/filter-function/invert() +browser-compat: css.types.filter-function.invert +--- +{{CSSRef}} + +**`invert()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、入力画像の色サンプルを反転します。結果は {{cssxref("<filter-function>")}} です。 + +{{EmbedInteractiveExample("pages/css/function-invert.html")}} + +## 構文 + +```css +invert(amount) +``` + +### 引数 + +- `amount` + - : 変換の度合いで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 `100%` の値では完全に反転され、 `0%` の値では入力が変更されないままになります。 `0%` と `100%` の間の値は、効果の割合です。補間時の欠損値は `0` です。 + +## 例 + +### invert() の正しい値の例 + +```css +invert(0) /* 効果なし */ +invert(.6) /* 60% 反転 */ +invert(100%) /* 完全に反転 */ +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("<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/opacity()", "opacity()")}} +- {{cssxref("filter-function/saturate()", "saturate()")}} +- {{cssxref("filter-function/sepia()", "sepia()")}} diff --git a/files/ja/web/css/filter-function/opacity()/index.md b/files/ja/web/css/filter-function/opacity()/index.md deleted file mode 100644 index edee2ef5b5..0000000000 --- a/files/ja/web/css/filter-function/opacity()/index.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: opacity() -slug: Web/CSS/filter-function/opacity() -tags: - - CSS - - CSS 関数 - - フィルター効果 - - 関数 - - リファレンス -browser-compat: css.types.filter-function.opacity -translation_of: Web/CSS/filter-function/opacity() ---- -{{CSSRef}} - -**`opacity()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、入力画像のサンプルに透過性を適用します。結果は {{cssxref("<filter-function>")}} です。 - -{{EmbedInteractiveExample("pages/css/function-opacity.html")}} - -> **Note:** この関数はもっと一般的な {{Cssxref("opacity")}} プロパティと似ています。違いはフィルターの場合、ブラウザーによってはハードウェアアクセラレーションにより性能が上がることです。 - -## 構文 - -```css -opacity(amount) -``` - -### 引数 - -- `amount` - - : 変換の度合いで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 `0%` の値では完全に透明になり、 `100%` の値では入力が変更されないままになります。 `0%` と `100%` の間の値は、効果の割合です。補間時の欠損値は `1` です。 - -## 例 - -### opacity() の正しい値の例 - -```css -opacity(0%) /* 完全に透過 */ -opacity(50%) /* 50% 透過 */ -opacity(1) /* 効果なし */ -``` - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("<filter-function>")}} -- CSS の {{cssxref("opacity")}} プロパティ -- {{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/saturate()", "saturate()")}} -- {{cssxref("filter-function/sepia()", "sepia()")}} diff --git a/files/ja/web/css/filter-function/opacity/index.md b/files/ja/web/css/filter-function/opacity/index.md new file mode 100644 index 0000000000..4d0303231b --- /dev/null +++ b/files/ja/web/css/filter-function/opacity/index.md @@ -0,0 +1,63 @@ +--- +title: opacity() +slug: Web/CSS/filter-function/opacity +tags: + - CSS + - CSS 関数 + - フィルター効果 + - 関数 + - リファレンス +translation_of: Web/CSS/filter-function/opacity() +original_slug: Web/CSS/filter-function/opacity() +browser-compat: css.types.filter-function.opacity +--- +{{CSSRef}} + +**`opacity()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、入力画像のサンプルに透過性を適用します。結果は {{cssxref("<filter-function>")}} です。 + +{{EmbedInteractiveExample("pages/css/function-opacity.html")}} + +> **Note:** この関数はもっと一般的な {{Cssxref("opacity")}} プロパティと似ています。違いはフィルターの場合、ブラウザーによってはハードウェアアクセラレーションにより性能が上がることです。 + +## 構文 + +```css +opacity(amount) +``` + +### 引数 + +- `amount` + - : 変換の度合いで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 `0%` の値では完全に透明になり、 `100%` の値では入力が変更されないままになります。 `0%` と `100%` の間の値は、効果の割合です。補間時の欠損値は `1` です。 + +## 例 + +### opacity() の正しい値の例 + +```css +opacity(0%) /* 完全に透過 */ +opacity(50%) /* 50% 透過 */ +opacity(1) /* 効果なし */ +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("<filter-function>")}} +- CSS の {{cssxref("opacity")}} プロパティ +- {{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/saturate()", "saturate()")}} +- {{cssxref("filter-function/sepia()", "sepia()")}} diff --git a/files/ja/web/css/filter-function/saturate()/index.md b/files/ja/web/css/filter-function/saturate()/index.md deleted file mode 100644 index 7c6612b369..0000000000 --- a/files/ja/web/css/filter-function/saturate()/index.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: saturate() -slug: Web/CSS/filter-function/saturate() -tags: - - CSS - - CSS 関数 - - フィルター効果 - - 関数 - - リファレンス -browser-compat: css.types.filter-function.saturate -translation_of: Web/CSS/filter-function/saturate() ---- -{{CSSRef}} - -**`saturate()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、入力画像の彩度を上げたり下げたりします。結果は {{cssxref("<filter-function>")}} です。 - -{{EmbedInteractiveExample("pages/css/function-saturate.html")}} - -## 構文 - -```css -saturate(amount) -``` - -### 引数 - -- `amount` - - : 変換の量で、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 `100%` 未満の値では彩度を下げ、 `100%` を超える値では彩度を上げます。 `0%` の値では画像が完全に彩度がなくなり、 `100%` の値では入力が変更されないままになります。補間時の欠損値は `1` です。 - -## 例 - -### saturate() の正しい値の例 - -```css -saturate(0) /* 彩度なし */ -saturate(.4) /* 彩度 40% */ -saturate(100%) /* 効果なし */ -saturate(200%) /* 2 倍の彩度 */ -``` - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("<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/sepia()", "sepia()")}} diff --git a/files/ja/web/css/filter-function/saturate/index.md b/files/ja/web/css/filter-function/saturate/index.md new file mode 100644 index 0000000000..d0e12188bc --- /dev/null +++ b/files/ja/web/css/filter-function/saturate/index.md @@ -0,0 +1,61 @@ +--- +title: saturate() +slug: Web/CSS/filter-function/saturate +tags: + - CSS + - CSS 関数 + - フィルター効果 + - 関数 + - リファレンス +translation_of: Web/CSS/filter-function/saturate() +original_slug: Web/CSS/filter-function/saturate() +browser-compat: css.types.filter-function.saturate +--- +{{CSSRef}} + +**`saturate()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、入力画像の彩度を上げたり下げたりします。結果は {{cssxref("<filter-function>")}} です。 + +{{EmbedInteractiveExample("pages/css/function-saturate.html")}} + +## 構文 + +```css +saturate(amount) +``` + +### 引数 + +- `amount` + - : 変換の量で、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 `100%` 未満の値では彩度を下げ、 `100%` を超える値では彩度を上げます。 `0%` の値では画像が完全に彩度がなくなり、 `100%` の値では入力が変更されないままになります。補間時の欠損値は `1` です。 + +## 例 + +### saturate() の正しい値の例 + +```css +saturate(0) /* 彩度なし */ +saturate(.4) /* 彩度 40% */ +saturate(100%) /* 効果なし */ +saturate(200%) /* 2 倍の彩度 */ +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("<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/sepia()", "sepia()")}} diff --git a/files/ja/web/css/filter-function/sepia()/index.md b/files/ja/web/css/filter-function/sepia()/index.md deleted file mode 100644 index e3708e8cbe..0000000000 --- a/files/ja/web/css/filter-function/sepia()/index.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: sepia() -slug: Web/CSS/filter-function/sepia() -tags: - - CSS - - CSS 関数 - - フィルター効果 - - 関数 - - リファレンス -browser-compat: css.types.filter-function.sepia -translation_of: Web/CSS/filter-function/sepia() ---- -{{CSSRef}} - -**`sepia()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、入力画像をセピア色に、より暖かい、より黄色/茶色がかったの表現に変換します。結果は {{cssxref("<filter-function>")}} です。 - -{{EmbedInteractiveExample("pages/css/function-sepia.html")}} - -## 構文 - -```css -sepia(amount) -``` - -### 引数 - -- `amount` - - : 変換の度合いで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 `100%` の値では完全にセピア色になり、 `0%` の値では入力が変更されないままになります。 `0%` と `100%` の間の値は、効果の割合です。補間時の欠損値は `0` です。 - -## 例 - -### sepia() の正しい値の例 - -```css -sepia(0) /* 効果なし */ -sepia(.65) /* 65% セピア色 */ -sepia(100%) /* 完全にセピア色 */ -``` - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("<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()")}} diff --git a/files/ja/web/css/filter-function/sepia/index.md b/files/ja/web/css/filter-function/sepia/index.md new file mode 100644 index 0000000000..853dae74d3 --- /dev/null +++ b/files/ja/web/css/filter-function/sepia/index.md @@ -0,0 +1,60 @@ +--- +title: sepia() +slug: Web/CSS/filter-function/sepia +tags: + - CSS + - CSS 関数 + - フィルター効果 + - 関数 + - リファレンス +translation_of: Web/CSS/filter-function/sepia() +original_slug: Web/CSS/filter-function/sepia() +browser-compat: css.types.filter-function.sepia +--- +{{CSSRef}} + +**`sepia()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、入力画像をセピア色に、より暖かい、より黄色/茶色がかったの表現に変換します。結果は {{cssxref("<filter-function>")}} です。 + +{{EmbedInteractiveExample("pages/css/function-sepia.html")}} + +## 構文 + +```css +sepia(amount) +``` + +### 引数 + +- `amount` + - : 変換の度合いで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 `100%` の値では完全にセピア色になり、 `0%` の値では入力が変更されないままになります。 `0%` と `100%` の間の値は、効果の割合です。補間時の欠損値は `0` です。 + +## 例 + +### sepia() の正しい値の例 + +```css +sepia(0) /* 効果なし */ +sepia(.65) /* 65% セピア色 */ +sepia(100%) /* 完全にセピア色 */ +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("<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()")}} diff --git a/files/ja/web/css/fit-content()/index.md b/files/ja/web/css/fit-content()/index.md deleted file mode 100644 index 93f77251dc..0000000000 --- a/files/ja/web/css/fit-content()/index.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: fit-content() -slug: Web/CSS/fit-content() -tags: - - CSS - - CSS 関数 - - CSS グリッド - - 関数 - - レイアウト - - リファレンス - - ウェブ -translation_of: Web/CSS/fit-content() ---- -{{CSSRef}} - -**`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")}} - -この関数は [CSS グリッド](/ja/docs/Web/CSS/CSS_Grid_Layout)のプロパティにおいて、トラックの寸法を `max-content` で定義された最大寸法と `auto` で定義された最小寸法との間で、 `auto` と似た方法 (すなわち [`minmax(auto, max-content)`](/ja/docs/Web/CSS/minmax())) で計算しますが、 `auto` の最小値よりも大きい場合は*引数*がトラックの寸法になるという点が異なります。 - -`max-content` および `auto` キーワードについての詳細は、 {{cssxref("grid-template-columns")}} ページを参照してください。 - -`fit-content()` 関数は {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}}, {{cssxref("max-height")}} のレイアウトボックスの寸法としても使用され、最大寸法は内容物の最大寸法、最小寸法は内容物の最小寸法になります。 - -## 構文 - -引数として `` または `` を受け付ける関数です。 - -```css -/* 値 */ -fit-content(200px) -fit-content(5cm) -fit-content(30vw) -fit-content(100ch) - -/* 値 */ -fit-content(40%) -``` - -### 値 - -- {{cssxref("<length>")}} - - : 絶対的な長さ。 -- {{cssxref("<percentage>")}} - - - : 指定された軸で有効な空間に対する相対的なパーセント値です。 - - グリッドプロパティでは、行トラックにおける列内のグリッドコンテナーのインライン方向の寸法およびグリッドコンテナーのブロック方向の寸法の相対値です。それ以外では、書字方向に応じてレイアウトボックスの有効なインライン方向の寸法またはブロック方向の寸法に対する相対値になります。 - -## 例 - -

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

- -#### HTML - -```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; - 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_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_function/index.md b/files/ja/web/css/fit-content_function/index.md new file mode 100644 index 0000000000..06d7ebad1a --- /dev/null +++ b/files/ja/web/css/fit-content_function/index.md @@ -0,0 +1,114 @@ +--- +title: fit-content() +slug: Web/CSS/fit-content_function +tags: + - CSS + - CSS 関数 + - CSS グリッド + - 関数 + - レイアウト + - リファレンス + - ウェブ +translation_of: Web/CSS/fit-content() +original_slug: Web/CSS/fit-content() +--- +{{CSSRef}} + +**`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")}} + +この関数は [CSS グリッド](/ja/docs/Web/CSS/CSS_Grid_Layout)のプロパティにおいて、トラックの寸法を `max-content` で定義された最大寸法と `auto` で定義された最小寸法との間で、 `auto` と似た方法 (すなわち [`minmax(auto, max-content)`](/ja/docs/Web/CSS/minmax())) で計算しますが、 `auto` の最小値よりも大きい場合は*引数*がトラックの寸法になるという点が異なります。 + +`max-content` および `auto` キーワードについての詳細は、 {{cssxref("grid-template-columns")}} ページを参照してください。 + +`fit-content()` 関数は {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}}, {{cssxref("max-height")}} のレイアウトボックスの寸法としても使用され、最大寸法は内容物の最大寸法、最小寸法は内容物の最小寸法になります。 + +## 構文 + +引数として `` または `` を受け付ける関数です。 + +```css +/* 値 */ +fit-content(200px) +fit-content(5cm) +fit-content(30vw) +fit-content(100ch) + +/* 値 */ +fit-content(40%) +``` + +### 値 + +- {{cssxref("<length>")}} + - : 絶対的な長さ。 +- {{cssxref("<percentage>")}} + + - : 指定された軸で有効な空間に対する相対的なパーセント値です。 + + グリッドプロパティでは、行トラックにおける列内のグリッドコンテナーのインライン方向の寸法およびグリッドコンテナーのブロック方向の寸法の相対値です。それ以外では、書字方向に応じてレイアウトボックスの有効なインライン方向の寸法またはブロック方向の寸法に対する相対値になります。 + +## 例 + +

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

+ +#### HTML + +```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; + 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_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/gradient/conic-gradient()/index.md b/files/ja/web/css/gradient/conic-gradient()/index.md deleted file mode 100644 index d5e01f3ad7..0000000000 --- a/files/ja/web/css/gradient/conic-gradient()/index.md +++ /dev/null @@ -1,243 +0,0 @@ ---- -title: conic-gradient() -slug: Web/CSS/gradient/conic-gradient() -tags: - - CSS - - CSS Function - - CSS Images - - Function - - Graphics - - Layout - - Reference - - Web - - gradient -browser-compat: css.types.image.gradient.conic-gradient -translation_of: Web/CSS/gradient/conic-gradient() -original_slug: Web/CSS/conic-gradient() ---- -{{CSSRef}} - -**`conic-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 (中心から広がるのではなく) 中心点の周りを回りながら色が変化する画像を生成します。扇型グラデーションの例としては、円グラフや色相環などがあります。 `conic-gradient()` 関数の結果は {{CSSxRef("<gradient>")}} データ型のオブジェクトであり、これは {{CSSxRef("<image>")}} の特殊型です。 - -{{EmbedInteractiveExample("pages/css/function-conic-gradient.html")}} - -## 構文 - -```css -/* 45度回転した扇形グラデーション、 - 青で始まり赤で終わる */ -conic-gradient(from 45deg, blue, red); - -/* 青みがかった紫のボックス。グラデーションは青から赤へと - 進みます。しかし、扇形グラデーションの中心が左上にある - ため、右下の四分の一しか見えません。 */ -conic-gradient(from 90deg at 0 0, blue, red); - -/* 色相環 */ -background: conic-gradient( - hsl(360, 100%, 50%), - hsl(315, 100%, 50%), - hsl(270, 100%, 50%), - hsl(225, 100%, 50%), - hsl(180, 100%, 50%), - hsl(135, 100%, 50%), - hsl(90, 100%, 50%), - hsl(45, 100%, 50%), - hsl(0, 100%, 50%) -); -``` - -### 値 - -- {{CSSxRef("<angle>")}} - - : `from` キーワードに続いて角度を指定することで、時計回りのグラデーションの位置を定義します。 -- `` - - : {{cssxref("background-position")}} プロパティと同じ長さ、順番、キーワード値を使用して、グラデーションの中心の位置を定義します。省略すると、既定値は`center`、すなわちグラデーションに配置されます。 -- `` - - : 色経由点の {{CSSxRef("<color>")}} 値で、その後にオプションで 1 ～ 2 個の位置 (グラデーションの円周軸に沿った {{CSSxRef("<angle>")}}) が続きます。 -- `` - - : 隣接する色経由点の間でグラデーションがどのように進行するかを定義する補間のヒントです。長さは、 2 つの色経由点の間のどの位置でグラデーションの色が色の遷移の中間点に到達するかを定義します。省略した場合、色の遷移の中間点は 2 つの色経由点間の中間点になります。 - -> **Note:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。 - -## 解説 - -他のグラデーションと同様、扇形グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。自身の寸法は適用先の要素の寸法、または要素の寸法以外で設定された `` の寸法に一致します。 - -繰り返して 360 度の回転を埋める扇形グラデーションを生成するには、代わりに {{CSSxRef("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} 関数を使用してください。 - -`` は `` データ型に属するため、 `` が使用できるところでしか使用できません。このため、 `conic-gradient()` は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} データ型を使用するプロパティでは動作しません。

- -> **Note:** 英語ではなぜ "conic" (円錐) グラデーションと呼ばれるのか。色経由点が一方よりもう一方が明るい場合、上から見た円錐のように見えるからです。 - -### 扇型グラデーションの構成 - -扇形グラデーションの構文は放射グラデーションと似ていますが、色経由点はグラデーションの中心から現れるグラデーション軸上ではなく、グラデーション円弧、すなわち円周上に配置されます。扇形グラデーションでは、色の遷移は円の中心を回るように、上から始まって時計回りに行われます。放射グラデーションでは、色の遷移は楕円の中心から外に向けて、すべての方向に行われます。 - -![扇形グラデーションの円周と放射グラデーションの軸に沿った色経由点](screenshot_2018-11-29_21.09.19.png) - -扇形グラデーションは、回転角度とグラデーションの中心を指定し、色経由点のリストを指定します。[長さ](/ja/docs/Web/CSS/length)を指定して色経由点を配置する線形グラデーションや放射グラデーションとは異なり、扇形グラデーションの色経由点は角度を指定します。単位には[度](/ja/docs/Web/CSS/angle)を表す `deg`、グラードを表す `grad`、ラジアンを表す `rad`、回転数を表す `turn` があります。 1 つの円は 360 度、 400 グラード、 2π ラジアン、 1 回転になります。扇形グラデーションに対応しているブラウザーはパーセント値も受け付けており、 100% は 360 度に相当しますが、これは仕様にはありません。 - -放射グラデーションと同様に、扇形グラデーションの構文では、グラデーションの中心を画像内のどこにでも、あるいは画像の外側にでも配置することができます。位置の値は、 2 値の背景位置の構文に似ています。 - -グラデーション円弧は、グラデーションの円周です。グラデーションまたは円弧の*始点*は北、つまり 12 時の方向です。そして、グラデーションは _from_ の角度だけ回転します。グラデーションの色は、角度のついた色経由点、それらの開始点、終了点、および、その間、および、任意の角度のついた色経由点によって決定されます。色間の遷移は、隣接する色の色経由点の間のカラーヒントで変更することができます。 - -#### グラデーションのカスタマイズ - -グラデーション円弧上に角度のついた色経由点をさらに追加することで、複数の色の間で高度なカスタマイズされた遷移を行うことができます。色経由点の位置は、 {{CSSxRef("<angle>")}} を使って明示的に定義することができます。色経由点の位置を指定しない場合は、前の色経由点と後の色経由点の中間に配置されます。最初の色経由点と最後の色経由点に角度を指定しない場合、その値はそれぞれ 0deg と 360deg です。次の2つのグラデーションは同等です。 - -```css -conic-gradient(red, orange, yellow, green, blue); -conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg); -``` - -既定では、色はある色経由点の色から次の色経由点の色へとスムーズに移行し、色と色の中間点が色移行の中間点となります。カラーヒントを追加して色遷移の中間点を示すことで、この色遷移の中間点を 2 つの色経由点間の任意の位置に移動させることができます。次の例は、開始点から 10% の印までは赤一色で、回転の 80% 以上で赤から青に移行し、最後の 10% は青一色になっています。しかし、赤から青へのグラデーション変化の中間点は 20％ の位置になります。 80grad (20％) のカラーヒントがなかった場合は 50％ の位置になります。 - -```css -conic-gradient(red 40grad, 80grad, blue 360grad); -``` - -2 つ以上の色経由点が同じ場所にある場合、その場所で宣言された最初の色と最後の色の間に不連続の (硬い) 色変化として表示されます。扇形グラデーションを使用して円グラフを作成するには、 -- 背景画像はアクセシビリティが確保できないため、正しい方法ではありませんが -- 隣接する 2 つの色経由点の色経由点の角度が同じである、硬い色経由点を使用します。これを実現する最も簡単な方法は、複数のポジションの色経由点を使用することです。次の 2 つの宣言は等価です。 - -```css -conic-gradient(#fff 0.09turn, #bbb 0.09turn, #bbb 0.27turn, #666 0.27turn, #666 0.54turn, #000 0.54turn); -conic-gradient(#fff 0turn 0.09turn, #bbb 0.09turn 0.27turn, #666 0.27turn 0.54turn, #000 0.54turn 1turn); -``` - -色経由点は、昇順に並べる必要があります。後続の色経由点がより低い値であった場合、前の色経由点の値を上書きし、硬い (不連続の) 色変化を生成します。次の例では、 30% の地点で赤から黄色に変化し、グラデーションの 35% の地点で黄色から青に変化しています。 - -```css -conic-gradient(red .8rad, yellow .6rad, blue 1.3rad); -``` - -扇形グラデーションでは、他にもさまざまな効果を作り出すことができます。奇しくも市松模様もその一つです。左上と右下の白、左下と右上の黒で四分円を作り、グラデーションを16回 (横に4回、下に4回) 繰り返すと市松模様になります。 - -```css -conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad); -background-size: 25% 25%; -``` - -そして、そうですね、異なる角度のユニットを混ぜて使うこともできますが、やめておきましょう。以上、読みにくかったですね。 - -## アクセシビリティの考慮 - -ブラウザは、背景画像に関する特別な情報を支援技術に提供しません。これは主に画面リーダーにとって重要なことで、画面リーダーはその存在を告知しないため、ユーザーに何も伝えられません。扇形グラデーションを使って円グラフや市松模様などの効果を出すことは可能ですが、 CSS 画像は代替テキストを割り当てるネイティブな方法を提供していないため、扇形グラデーションで表現された画像は画面リーダーのユーザーが認知することはできません。ページの全体的な目的を理解するために重要な情報が画像に含まれている場合は、文書内で意味的に記述する方が良いでしょう。 - -- [MDN WCAG を理解する, ガイドライン 1.1 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) -- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) - -## 例 - -

40 度のグラデーション

- -```css hidden -div { - width: 100px; - height: 100px; -} -``` - -```html hidden -
-``` - -```css -div { - background-image: - conic-gradient(from 40deg, #fff, #000); -} -``` - -{{EmbedLiveSample("Gradient_at_40-degrees", 120, 120)}} - -

中心をずらしたグラデーション

- -```css hidden -div { - width: 100px; - height: 100px; -} -``` - -```html hidden -
-``` - -```css -div { - background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg); -} -``` - -{{EmbedLiveSample("Off-centered_gradient", 120, 120)}} - -

グラデーションの円グラフ

- -This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect. - -```css hidden -div { - width: 100px; - height: 100px; -} -``` - -```html hidden -
-``` - -```css -div { - background: conic-gradient( - red 36deg, orange 36deg 170deg, yellow 170deg); - border-radius: 50% -} -``` - -{{EmbedLiveSample("Gradient_pie-chart", 120, 120)}} - -

市松模様

- -```css hidden -div { - width: 100px; - height: 100px; -} -``` - -```html hidden -
-``` - -```css -div { - background: - conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn) - top left / 25% 25% repeat; - border: 1px solid; -} -``` - -{{EmbedLiveSample("Checkerboard", 120, 120)}} - -### その他の conic-gradient の例 - -他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) -- 他のグラデーション関数: {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} -- {{cssxref("<image>")}} -- {{cssxref("image/image()","image()")}} -- {{cssxref("element()")}} -- {{cssxref("image/image-set()","image-set()")}} -- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/conic-gradient/index.md b/files/ja/web/css/gradient/conic-gradient/index.md new file mode 100644 index 0000000000..25b8f907a6 --- /dev/null +++ b/files/ja/web/css/gradient/conic-gradient/index.md @@ -0,0 +1,243 @@ +--- +title: conic-gradient() +slug: Web/CSS/gradient/conic-gradient +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Graphics + - Layout + - Reference + - Web + - gradient +translation_of: Web/CSS/gradient/conic-gradient() +original_slug: Web/CSS/gradient/conic-gradient() +browser-compat: css.types.image.gradient.conic-gradient +--- +{{CSSRef}} + +**`conic-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 (中心から広がるのではなく) 中心点の周りを回りながら色が変化する画像を生成します。扇型グラデーションの例としては、円グラフや色相環などがあります。 `conic-gradient()` 関数の結果は {{CSSxRef("<gradient>")}} データ型のオブジェクトであり、これは {{CSSxRef("<image>")}} の特殊型です。 + +{{EmbedInteractiveExample("pages/css/function-conic-gradient.html")}} + +## 構文 + +```css +/* 45度回転した扇形グラデーション、 + 青で始まり赤で終わる */ +conic-gradient(from 45deg, blue, red); + +/* 青みがかった紫のボックス。グラデーションは青から赤へと + 進みます。しかし、扇形グラデーションの中心が左上にある + ため、右下の四分の一しか見えません。 */ +conic-gradient(from 90deg at 0 0, blue, red); + +/* 色相環 */ +background: conic-gradient( + hsl(360, 100%, 50%), + hsl(315, 100%, 50%), + hsl(270, 100%, 50%), + hsl(225, 100%, 50%), + hsl(180, 100%, 50%), + hsl(135, 100%, 50%), + hsl(90, 100%, 50%), + hsl(45, 100%, 50%), + hsl(0, 100%, 50%) +); +``` + +### 値 + +- {{CSSxRef("<angle>")}} + - : `from` キーワードに続いて角度を指定することで、時計回りのグラデーションの位置を定義します。 +- `` + - : {{cssxref("background-position")}} プロパティと同じ長さ、順番、キーワード値を使用して、グラデーションの中心の位置を定義します。省略すると、既定値は`center`、すなわちグラデーションに配置されます。 +- `` + - : 色経由点の {{CSSxRef("<color>")}} 値で、その後にオプションで 1 ～ 2 個の位置 (グラデーションの円周軸に沿った {{CSSxRef("<angle>")}}) が続きます。 +- `` + - : 隣接する色経由点の間でグラデーションがどのように進行するかを定義する補間のヒントです。長さは、 2 つの色経由点の間のどの位置でグラデーションの色が色の遷移の中間点に到達するかを定義します。省略した場合、色の遷移の中間点は 2 つの色経由点間の中間点になります。 + +> **Note:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。 + +## 解説 + +他のグラデーションと同様、扇形グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。自身の寸法は適用先の要素の寸法、または要素の寸法以外で設定された `` の寸法に一致します。 + +繰り返して 360 度の回転を埋める扇形グラデーションを生成するには、代わりに {{CSSxRef("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} 関数を使用してください。 + +`` は `` データ型に属するため、 `` が使用できるところでしか使用できません。このため、 `conic-gradient()` は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} データ型を使用するプロパティでは動作しません。

+ +> **Note:** 英語ではなぜ "conic" (円錐) グラデーションと呼ばれるのか。色経由点が一方よりもう一方が明るい場合、上から見た円錐のように見えるからです。 + +### 扇型グラデーションの構成 + +扇形グラデーションの構文は放射グラデーションと似ていますが、色経由点はグラデーションの中心から現れるグラデーション軸上ではなく、グラデーション円弧、すなわち円周上に配置されます。扇形グラデーションでは、色の遷移は円の中心を回るように、上から始まって時計回りに行われます。放射グラデーションでは、色の遷移は楕円の中心から外に向けて、すべての方向に行われます。 + +![扇形グラデーションの円周と放射グラデーションの軸に沿った色経由点](screenshot_2018-11-29_21.09.19.png) + +扇形グラデーションは、回転角度とグラデーションの中心を指定し、色経由点のリストを指定します。[長さ](/ja/docs/Web/CSS/length)を指定して色経由点を配置する線形グラデーションや放射グラデーションとは異なり、扇形グラデーションの色経由点は角度を指定します。単位には[度](/ja/docs/Web/CSS/angle)を表す `deg`、グラードを表す `grad`、ラジアンを表す `rad`、回転数を表す `turn` があります。 1 つの円は 360 度、 400 グラード、 2π ラジアン、 1 回転になります。扇形グラデーションに対応しているブラウザーはパーセント値も受け付けており、 100% は 360 度に相当しますが、これは仕様にはありません。 + +放射グラデーションと同様に、扇形グラデーションの構文では、グラデーションの中心を画像内のどこにでも、あるいは画像の外側にでも配置することができます。位置の値は、 2 値の背景位置の構文に似ています。 + +グラデーション円弧は、グラデーションの円周です。グラデーションまたは円弧の*始点*は北、つまり 12 時の方向です。そして、グラデーションは _from_ の角度だけ回転します。グラデーションの色は、角度のついた色経由点、それらの開始点、終了点、および、その間、および、任意の角度のついた色経由点によって決定されます。色間の遷移は、隣接する色の色経由点の間のカラーヒントで変更することができます。 + +#### グラデーションのカスタマイズ + +グラデーション円弧上に角度のついた色経由点をさらに追加することで、複数の色の間で高度なカスタマイズされた遷移を行うことができます。色経由点の位置は、 {{CSSxRef("<angle>")}} を使って明示的に定義することができます。色経由点の位置を指定しない場合は、前の色経由点と後の色経由点の中間に配置されます。最初の色経由点と最後の色経由点に角度を指定しない場合、その値はそれぞれ 0deg と 360deg です。次の2つのグラデーションは同等です。 + +```css +conic-gradient(red, orange, yellow, green, blue); +conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg); +``` + +既定では、色はある色経由点の色から次の色経由点の色へとスムーズに移行し、色と色の中間点が色移行の中間点となります。カラーヒントを追加して色遷移の中間点を示すことで、この色遷移の中間点を 2 つの色経由点間の任意の位置に移動させることができます。次の例は、開始点から 10% の印までは赤一色で、回転の 80% 以上で赤から青に移行し、最後の 10% は青一色になっています。しかし、赤から青へのグラデーション変化の中間点は 20％ の位置になります。 80grad (20％) のカラーヒントがなかった場合は 50％ の位置になります。 + +```css +conic-gradient(red 40grad, 80grad, blue 360grad); +``` + +2 つ以上の色経由点が同じ場所にある場合、その場所で宣言された最初の色と最後の色の間に不連続の (硬い) 色変化として表示されます。扇形グラデーションを使用して円グラフを作成するには、 -- 背景画像はアクセシビリティが確保できないため、正しい方法ではありませんが -- 隣接する 2 つの色経由点の色経由点の角度が同じである、硬い色経由点を使用します。これを実現する最も簡単な方法は、複数のポジションの色経由点を使用することです。次の 2 つの宣言は等価です。 + +```css +conic-gradient(#fff 0.09turn, #bbb 0.09turn, #bbb 0.27turn, #666 0.27turn, #666 0.54turn, #000 0.54turn); +conic-gradient(#fff 0turn 0.09turn, #bbb 0.09turn 0.27turn, #666 0.27turn 0.54turn, #000 0.54turn 1turn); +``` + +色経由点は、昇順に並べる必要があります。後続の色経由点がより低い値であった場合、前の色経由点の値を上書きし、硬い (不連続の) 色変化を生成します。次の例では、 30% の地点で赤から黄色に変化し、グラデーションの 35% の地点で黄色から青に変化しています。 + +```css +conic-gradient(red .8rad, yellow .6rad, blue 1.3rad); +``` + +扇形グラデーションでは、他にもさまざまな効果を作り出すことができます。奇しくも市松模様もその一つです。左上と右下の白、左下と右上の黒で四分円を作り、グラデーションを16回 (横に4回、下に4回) 繰り返すと市松模様になります。 + +```css +conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad); +background-size: 25% 25%; +``` + +そして、そうですね、異なる角度のユニットを混ぜて使うこともできますが、やめておきましょう。以上、読みにくかったですね。 + +## アクセシビリティの考慮 + +ブラウザは、背景画像に関する特別な情報を支援技術に提供しません。これは主に画面リーダーにとって重要なことで、画面リーダーはその存在を告知しないため、ユーザーに何も伝えられません。扇形グラデーションを使って円グラフや市松模様などの効果を出すことは可能ですが、 CSS 画像は代替テキストを割り当てるネイティブな方法を提供していないため、扇形グラデーションで表現された画像は画面リーダーのユーザーが認知することはできません。ページの全体的な目的を理解するために重要な情報が画像に含まれている場合は、文書内で意味的に記述する方が良いでしょう。 + +- [MDN WCAG を理解する, ガイドライン 1.1 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) +- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +## 例 + +

40 度のグラデーション

+ +```css hidden +div { + width: 100px; + height: 100px; +} +``` + +```html hidden +
+``` + +```css +div { + background-image: + conic-gradient(from 40deg, #fff, #000); +} +``` + +{{EmbedLiveSample("Gradient_at_40-degrees", 120, 120)}} + +

中心をずらしたグラデーション

+ +```css hidden +div { + width: 100px; + height: 100px; +} +``` + +```html hidden +
+``` + +```css +div { + background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg); +} +``` + +{{EmbedLiveSample("Off-centered_gradient", 120, 120)}} + +

グラデーションの円グラフ

+ +This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect. + +```css hidden +div { + width: 100px; + height: 100px; +} +``` + +```html hidden +
+``` + +```css +div { + background: conic-gradient( + red 36deg, orange 36deg 170deg, yellow 170deg); + border-radius: 50% +} +``` + +{{EmbedLiveSample("Gradient_pie-chart", 120, 120)}} + +

市松模様

+ +```css hidden +div { + width: 100px; + height: 100px; +} +``` + +```html hidden +
+``` + +```css +div { + background: + conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn) + top left / 25% 25% repeat; + border: 1px solid; +} +``` + +{{EmbedLiveSample("Checkerboard", 120, 120)}} + +### その他の conic-gradient の例 + +他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- 他のグラデーション関数: {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} +- {{cssxref("<image>")}} +- {{cssxref("image/image()","image()")}} +- {{cssxref("element()")}} +- {{cssxref("image/image-set()","image-set()")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/linear-gradient()/index.md b/files/ja/web/css/gradient/linear-gradient()/index.md deleted file mode 100644 index 963db61405..0000000000 --- a/files/ja/web/css/gradient/linear-gradient()/index.md +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: linear-gradient() -slug: Web/CSS/gradient/linear-gradient() -tags: - - CSS - - CSS 画像 - - CSS 関数 - - Function - - Graphics - - Layout - - Reference - - Web - - gradient -translation_of: Web/CSS/gradient/linear-gradient() -original_slug: Web/CSS/linear-gradient() -browser-compat: css.types.image.gradient.linear-gradient ---- -{{CSSRef}} - -**`linear-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、二つ以上の色の連続的な直線に沿った変化から構成される画像を生成します。結果は {{CSSxRef("<gradient>")}} データ型のオブジェクトであり、これは {{CSSxRef("<image>")}} の特殊型です。 - -{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}} - -## 構文 - -```css -/* 45度に傾いたグラデーションで、 - 青から始まり赤で終わる */ -linear-gradient(45deg, blue, red); - -/* 右下から左上に向かうグラデーションで、 - 青から始まり赤で終わる */ -linear-gradient(to left top, blue, red); - -/* 色経由点: 下から上に向かうグラデーションで、 - 青から始まり、長さの 40% のところで緑になり、 - 赤で終わる */ -linear-gradient(0deg, blue, green 40%, red); - -/* 色ヒント: 左から右に向かうグラデーションで、 - 赤から始まり、グラデーションの長さ全体の - 10% に中間点が来て、残りの 90% の長さをかけて - 青色に変わる */ -linear-gradient(.25turn, red, 10%, blue); - -/* 複数位置の色経由点: 45 度傾いたグラデーションで、 - 左下半分が赤で右上半分が青、 - 赤から青への変化は明確な線 */ -linear-gradient(45deg, red 0 50%, blue 50% 100%); -``` - -### 値 - -- `` - - - : グラデーション軸の開始点の位置。指定する場合は、 `to` に続けて 2 つ以下のキーワードから成ります。一つは水平方向の辺 (`left` または `right`)、もう一方は垂直方向の辺 (`top` または `bottom`) です。辺を表すキーワードは順不同です。指定しない場合は、 `to bottom` が既定になります。 - - `to top`, `to bottom`, `to left`, `to right` の値は、 `0deg`, `180deg`, `270deg`, `90deg` の角度にそれぞれ対応します。他の値は角度に変換されます。 - -- {{CSSxRef("<angle>")}} - - : グラデーション軸の方向を角度で示します。 `0deg` の値は `to top` と等価で、値が増加するとそこから時計回りに回ります。 -- `` - - : 色経由点の {{CSSxRef("<color>")}} の値であり、任意でその後に停止位置を指定します (グラデーションの軸に沿った {{CSSxRef("<percentage>")}} または {{CSSxRef("<length>")}} の位置)。 -- `` - - : 隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。 - -> **Note:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。 -> -> なお、上記の最初の例は、 Mozilla Firefox (特にバージョン 80.0b3) では、正確には図のようには表示されません。描かれているように表示するには、 html の height プロパティを 100% または 100vh に設定する必要があります。 - -## 解説 - -他のグラデーションと同様、線形グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、画像本来の寸法や、推奨される縦横比を持たないということです。実際の寸法は、適用先の要素の寸法と一致します。 - -繰り返して領域を埋め尽くす線形グラデーションを生成するには、代わりに {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}} 関数を使用してください。 - -`` は CSS の `` データ型に所属しますので、 `` が使用できるところでのみ使用できます。このため、 `linear-gradient` は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} を要求するプロパティでは動作しません。 - -### 線形グラデーションの構成 - -線形グラデーションは、グラデーション軸 (Gradient line) と呼ばれる軸によって定義されます。軸上の各点にはそれぞれ違った色が割り当てられます。なめらかなグラデーションを作成するために、 `linear-gradient()` 関数はグラデーション軸と直行する直線を、グラデーション軸上の交点の色で連続して引きます。 - -![linear-gradient.png](linear-gradient.png) - -グラデーション軸は、グラデーション画像を含むボックスの中心と、角度によって定義されます。グラデーションの色は、開始点 (Starting point)、 終了点 (Ending point) と、省略可能な色経由点 (color-stop point) の各点でそれぞれ定義されます。 - -開始点は、グラデーション軸の最初の色が始まる点です。終了点は最後の色が終わるところです。これらの点は、グラデーション軸とそれに直交し、ボックスの同一象限にあるコーナーを通る直線との交点によって定義されます。ただ、もっと簡単に、ボックスの中心を原点としたときの開始点の点対称な位置としても定義できます。こうした何だかややこしい開始点と終了点の定義が、*マジックコーナー*と呼ばれる興味深い効果を生みました。開始点と終了点に近いコーナーは、それぞれ開始点と終了点と同じ色を持ちます。 - -#### グラデーションのカスタマイズ - -グラデーション軸に色経由点を追加することで、開始点と終了点の間で高度にカスタマイズした変化を作成することができます。色経由点は {{CSSxRef("<length>")}} や {{CSSxRef("<percentage>")}} データ型を使って、明示的に定義することができます。もし場所を定義しなかったときは、直前の点と直後の点の中間点になります。以下の二つのグラデーションは等価です。 - -```css -linear-gradient(red, orange, yellow, green, blue); -linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%); -``` - -ある色経由点の色から次の色経由点の色まで滑らかに色が変化し、色と色の中間点は、既定では色の変化の中間の位置になります。色の変化の中間点をどこに置くかを示すために、二つの色の間でラベルのない % の色ヒントを追加することで、色の中間点を二つの色経由点の間の任意の位置に移動することができます。次の例では、純粋な赤を先頭から 10% の位置まで、純粋な青を 90% の位置から末尾までに配置します。 10% から 90％ までの間は、赤から青への色変化ですが、色ヒントがない 30% があるので、変化の中間点は 50% の位置ではなく 30% の位置になります。 - -```css -linear-gradient(red 10%, 30%, blue 90%); -``` - -二つ以上の色経由点が同じ位置である場合、その位置で宣言された最初と最後の色の間で明確な線になります。 - -色経由点は昇順に並べてください。次の色経由点がより小さな値になると、以前の色経由点を上書きすることになり、急な変化になります。以下の例では、赤から始まって 40% の位置で黄色になり、それから 25% にわたって黄色から青への変化になります。 - -```css -linear-gradient(red 40%, yellow 30%, blue 65%); -``` - -色経由点には複数の位置が利用できます。 CSS 宣言の中で二つの位置を含めることで、二つの隣り合う色経由点として色を宣言することができます。 - -```css -linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%); -linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%); -linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%); -``` - -既定では、 0% の経由点に色がない場合、宣言されている最初の色がその場所の色になります。同様に、最後の色経由点に位置が宣言されていない場合は、最後の色が 100% の位置まで続くか、 100% の位置の色になります。 - -## 例 - -

45 度 のグラデーション

- -```css hidden -body { - width: 100vw; - height: 100vh; -} -``` - -```css -body { - background: linear-gradient(45deg, red, blue); -} -``` - -{{EmbedLiveSample("Gradient_at_a_45-degree_angle", 120, 120)}} - -

グラデーション軸の 60% から始まるグラデーション

- -```css hidden -body { - width: 100vw; - height: 100vh; -} -``` - -```css -body { - background: linear-gradient(135deg, orange 60%, cyan); -} -``` - -{{EmbedLiveSample("Gradient_that_starts_at_60_of_the_gradient_line", 120, 120)}} - -

複数の位置の色経由点があるグラデーション

- -この例は複数の位置の色経由点を使用しており、隣り合う色に同じ色経由値があるため、縞模様の効果になります。 - -```css hidden -body { - width: 100vw; - height: 100vh; -} -``` - -```css -body { - background: linear-gradient(to right, - red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%); -} -``` - -{{EmbedLiveSample("Gradient_with_multi-position_color_stops", 120, 120)}} - -

その他のグラデーションの例

- -他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) -- 他のグラデーション関数: {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} -- {{CSSxRef("<image>")}} -- {{cssxref("element()")}} -- {{cssxref("image/image()","image()")}} -- {{cssxref("image/image-set()","image-set()")}} -- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/linear-gradient/index.md b/files/ja/web/css/gradient/linear-gradient/index.md new file mode 100644 index 0000000000..a03f52dc83 --- /dev/null +++ b/files/ja/web/css/gradient/linear-gradient/index.md @@ -0,0 +1,198 @@ +--- +title: linear-gradient() +slug: Web/CSS/gradient/linear-gradient +tags: + - CSS + - CSS 画像 + - CSS 関数 + - Function + - Graphics + - Layout + - Reference + - Web + - gradient +translation_of: Web/CSS/gradient/linear-gradient() +original_slug: Web/CSS/gradient/linear-gradient() +browser-compat: css.types.image.gradient.linear-gradient +--- +{{CSSRef}} + +**`linear-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、二つ以上の色の連続的な直線に沿った変化から構成される画像を生成します。結果は {{CSSxRef("<gradient>")}} データ型のオブジェクトであり、これは {{CSSxRef("<image>")}} の特殊型です。 + +{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}} + +## 構文 + +```css +/* 45度に傾いたグラデーションで、 + 青から始まり赤で終わる */ +linear-gradient(45deg, blue, red); + +/* 右下から左上に向かうグラデーションで、 + 青から始まり赤で終わる */ +linear-gradient(to left top, blue, red); + +/* 色経由点: 下から上に向かうグラデーションで、 + 青から始まり、長さの 40% のところで緑になり、 + 赤で終わる */ +linear-gradient(0deg, blue, green 40%, red); + +/* 色ヒント: 左から右に向かうグラデーションで、 + 赤から始まり、グラデーションの長さ全体の + 10% に中間点が来て、残りの 90% の長さをかけて + 青色に変わる */ +linear-gradient(.25turn, red, 10%, blue); + +/* 複数位置の色経由点: 45 度傾いたグラデーションで、 + 左下半分が赤で右上半分が青、 + 赤から青への変化は明確な線 */ +linear-gradient(45deg, red 0 50%, blue 50% 100%); +``` + +### 値 + +- `` + + - : グラデーション軸の開始点の位置。指定する場合は、 `to` に続けて 2 つ以下のキーワードから成ります。一つは水平方向の辺 (`left` または `right`)、もう一方は垂直方向の辺 (`top` または `bottom`) です。辺を表すキーワードは順不同です。指定しない場合は、 `to bottom` が既定になります。 + + `to top`, `to bottom`, `to left`, `to right` の値は、 `0deg`, `180deg`, `270deg`, `90deg` の角度にそれぞれ対応します。他の値は角度に変換されます。 + +- {{CSSxRef("<angle>")}} + - : グラデーション軸の方向を角度で示します。 `0deg` の値は `to top` と等価で、値が増加するとそこから時計回りに回ります。 +- `` + - : 色経由点の {{CSSxRef("<color>")}} の値であり、任意でその後に停止位置を指定します (グラデーションの軸に沿った {{CSSxRef("<percentage>")}} または {{CSSxRef("<length>")}} の位置)。 +- `` + - : 隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。 + +> **Note:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。 +> +> なお、上記の最初の例は、 Mozilla Firefox (特にバージョン 80.0b3) では、正確には図のようには表示されません。描かれているように表示するには、 html の height プロパティを 100% または 100vh に設定する必要があります。 + +## 解説 + +他のグラデーションと同様、線形グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、画像本来の寸法や、推奨される縦横比を持たないということです。実際の寸法は、適用先の要素の寸法と一致します。 + +繰り返して領域を埋め尽くす線形グラデーションを生成するには、代わりに {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}} 関数を使用してください。 + +`` は CSS の `` データ型に所属しますので、 `` が使用できるところでのみ使用できます。このため、 `linear-gradient` は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} を要求するプロパティでは動作しません。 + +### 線形グラデーションの構成 + +線形グラデーションは、グラデーション軸 (Gradient line) と呼ばれる軸によって定義されます。軸上の各点にはそれぞれ違った色が割り当てられます。なめらかなグラデーションを作成するために、 `linear-gradient()` 関数はグラデーション軸と直行する直線を、グラデーション軸上の交点の色で連続して引きます。 + +![linear-gradient.png](linear-gradient.png) + +グラデーション軸は、グラデーション画像を含むボックスの中心と、角度によって定義されます。グラデーションの色は、開始点 (Starting point)、 終了点 (Ending point) と、省略可能な色経由点 (color-stop point) の各点でそれぞれ定義されます。 + +開始点は、グラデーション軸の最初の色が始まる点です。終了点は最後の色が終わるところです。これらの点は、グラデーション軸とそれに直交し、ボックスの同一象限にあるコーナーを通る直線との交点によって定義されます。ただ、もっと簡単に、ボックスの中心を原点としたときの開始点の点対称な位置としても定義できます。こうした何だかややこしい開始点と終了点の定義が、*マジックコーナー*と呼ばれる興味深い効果を生みました。開始点と終了点に近いコーナーは、それぞれ開始点と終了点と同じ色を持ちます。 + +#### グラデーションのカスタマイズ + +グラデーション軸に色経由点を追加することで、開始点と終了点の間で高度にカスタマイズした変化を作成することができます。色経由点は {{CSSxRef("<length>")}} や {{CSSxRef("<percentage>")}} データ型を使って、明示的に定義することができます。もし場所を定義しなかったときは、直前の点と直後の点の中間点になります。以下の二つのグラデーションは等価です。 + +```css +linear-gradient(red, orange, yellow, green, blue); +linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%); +``` + +ある色経由点の色から次の色経由点の色まで滑らかに色が変化し、色と色の中間点は、既定では色の変化の中間の位置になります。色の変化の中間点をどこに置くかを示すために、二つの色の間でラベルのない % の色ヒントを追加することで、色の中間点を二つの色経由点の間の任意の位置に移動することができます。次の例では、純粋な赤を先頭から 10% の位置まで、純粋な青を 90% の位置から末尾までに配置します。 10% から 90％ までの間は、赤から青への色変化ですが、色ヒントがない 30% があるので、変化の中間点は 50% の位置ではなく 30% の位置になります。 + +```css +linear-gradient(red 10%, 30%, blue 90%); +``` + +二つ以上の色経由点が同じ位置である場合、その位置で宣言された最初と最後の色の間で明確な線になります。 + +色経由点は昇順に並べてください。次の色経由点がより小さな値になると、以前の色経由点を上書きすることになり、急な変化になります。以下の例では、赤から始まって 40% の位置で黄色になり、それから 25% にわたって黄色から青への変化になります。 + +```css +linear-gradient(red 40%, yellow 30%, blue 65%); +``` + +色経由点には複数の位置が利用できます。 CSS 宣言の中で二つの位置を含めることで、二つの隣り合う色経由点として色を宣言することができます。 + +```css +linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%); +linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%); +linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%); +``` + +既定では、 0% の経由点に色がない場合、宣言されている最初の色がその場所の色になります。同様に、最後の色経由点に位置が宣言されていない場合は、最後の色が 100% の位置まで続くか、 100% の位置の色になります。 + +## 例 + +

45 度 のグラデーション

+ +```css hidden +body { + width: 100vw; + height: 100vh; +} +``` + +```css +body { + background: linear-gradient(45deg, red, blue); +} +``` + +{{EmbedLiveSample("Gradient_at_a_45-degree_angle", 120, 120)}} + +

グラデーション軸の 60% から始まるグラデーション

+ +```css hidden +body { + width: 100vw; + height: 100vh; +} +``` + +```css +body { + background: linear-gradient(135deg, orange 60%, cyan); +} +``` + +{{EmbedLiveSample("Gradient_that_starts_at_60_of_the_gradient_line", 120, 120)}} + +

複数の位置の色経由点があるグラデーション

+ +この例は複数の位置の色経由点を使用しており、隣り合う色に同じ色経由値があるため、縞模様の効果になります。 + +```css hidden +body { + width: 100vw; + height: 100vh; +} +``` + +```css +body { + background: linear-gradient(to right, + red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%); +} +``` + +{{EmbedLiveSample("Gradient_with_multi-position_color_stops", 120, 120)}} + +

その他のグラデーションの例

+ +他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- 他のグラデーション関数: {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} +- {{CSSxRef("<image>")}} +- {{cssxref("element()")}} +- {{cssxref("image/image()","image()")}} +- {{cssxref("image/image-set()","image-set()")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/radial-gradient()/index.md b/files/ja/web/css/gradient/radial-gradient()/index.md deleted file mode 100644 index 127f5f85ac..0000000000 --- a/files/ja/web/css/gradient/radial-gradient()/index.md +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: radial-gradient() -slug: Web/CSS/gradient/radial-gradient() -tags: - - CSS - - CSS Function - - CSS Images - - Function - - Graphics - - Layout - - Reference - - Web - - gradient -translation_of: Web/CSS/gradient/radial-gradient() -original_slug: Web/CSS/radial-gradient() -browser-compat: css.types.image.gradient.radial-gradient ---- -{{CSSRef}} - -**`radial-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、二つ以上の色の連続的な推移が原点から放射状に広がる画像を生成します。形状は円形または楕円形にになります。関数の結果は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊形です。 - -{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}} - -## 構文 - -```css -/* コンテナーの中央にあるグラデーション、 - 赤で始まり、青へ変わり、緑で終わる */ -radial-gradient(circle at center, red 0, blue, green 100%) -``` - -放射状のグラデーションは、グラデーションの中心 (0％ の楕円の位置) と、*末端図形* (100％ の楕円) の大きさと形状を示すことで指定します。  - -## 値 - -- {{cssxref("<position>")}} - - : グラデーションの位置で、 {{cssxref("background-position")}} や {{cssxref("transform-origin")}} と同じ方法で解釈されます。指定されなかった場合、既定値は `center` です。 -- `` - - : グラデーションの末端図形です。値は `circle` (つまり、グラデーションの形状が一定の半径の円) か `ellipse` (つまり、軸に沿った楕円) のいずれかです。指定されなかった場合、既定値は `ellipse` です。 -- `` - - - : グラデーションの末端図形の大きさを決定します。省略した場合の既定値は farthest-corner です。これは明示的に指定することも、キーワードで指定することもできます。ここでのキーワード定義では、グラデーションボックスのエッジは有限の線分ではなく、両方向に無限に伸びているものと考えてください。 - - グラデーションが円でも楕円でも `` に以下のキーワードを使用することができます。 - - | キーワード | 説明 | - | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | - | `closest-side` | グラデーションの末端図形は、ボックスの中心から最も近い辺 (circle の場合) または中心から最も近い縦の辺と横の辺 (ellipse の場合) に内接します。 | - | `closest-corner` | グラデーションの末端図形は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。 | - | `farthest-side` | `closest-side` と同様ですが、末端図形がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。 | - | `farthest-corner` | 既定値で、グラデーションの末端図形は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。 | - - `` を `circle` と指定した場合、大きさを明示的に [``](/ja/docs/Web/CSS/length) として与えることができ、円形の広がりの大きさを明示的に指定します。負の値は不正です。 - - `` を `ellipse` と指定するか省略した場合、大きさを二つの [``](/ja/docs/Web/CSS/length-percentage) で指定して明示的な楕円の大きさを指定することができます。 1 つ目の値は水平の広がり、 2 つ目の値は垂直の広がりです。パーセント値はグラデーションボックスの対応する長さからの相対値です。負の値は不正です。 - -- `` - - : 色経由点の {{cssxref("<color>")}} 値と、それに続く 1 つまたは 2 つの省略可能な経由位置 (グラデーション軸沿いの {{cssxref("<percentage>")}} または {{cssxref("<length>")}}) です。 percentage が `0%`、または length が `0` の場合は、グラデーションの中心を表します。 `100%` は末端図形と仮想グラデーション光線の交点を表します。その間のパーセント値はグラデーション光線における直線的な位置です。 -- `` - - : color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。 - -## 解説 - -

他のグラデーションと同様、放射グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然な寸法や推奨される寸法、推奨される縦横比もありません。具体的な寸法は、適用先の要素の寸法に一致します。 - -繰り返してコンテナーを埋める放射グラデーションを生成するには、代わりに {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} 関数を使用してください。 - -`` は `` データ型に属するため、 `` が使用できるところでしか使用できません。このため、 `radial-gradient()` は {{cssxref("background-color")}} や、その他の {{cssxref("<color>")}} データ型を使用するプロパティでは動作しません。

- -### 放射グラデーションの構成 - -![](radial_gradient.png)放射グラデーションは*中心点*、*末端図形*、および二つ以上の*色経由点*で定義されます。 - -滑らかなグラデーションを生成するために、 `radial-gradient()` 関数は中央から*末端図形* (およびその先) に向けて一連の同心円の形状を描きます。図形の端は円または楕円です。 - -色経由点は、中心から右方向に水平に延びる*仮想グラデーション光線*の上に配置されます。色経由点の位置を決めるパーセント値は、図形の端とこのグラデーション光線の交点を `100%` としたときの相対値です。各形状は単色で、色は交差したグラデーション光線の色によって定義されます。 - -## 例 - -

シンプルなグラデーション

- -```html hidden -
-``` - -```css hidden -.radial-gradient { - width: 240px; - height: 120px; -} -``` - -```css -.radial-gradient { - background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%); -} -``` - -{{EmbedLiveSample('Simple_gradient', 120, 120)}} - -

中央から外れたグラデーション

- -```html hidden -
-``` - -```css hidden -.radial-gradient { - width: 240px; - height: 120px; -} -``` - -```css -.radial-gradient { - background-image: radial-gradient(farthest-corner at 40px 40px, - #f35 0%, #43e 100%); -} -``` - -{{EmbedLiveSample('Non-centered_gradient', 240, 120)}} - -### 他の radial-gradient の例 - -他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) -- 他のグラデーション関数: {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} -- {{cssxref("<image>")}} -- {{cssxref("image/image()","image()")}} -- {{cssxref("element()")}} -- {{cssxref("image/image-set()","image-set()")}} -- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/radial-gradient/index.md b/files/ja/web/css/gradient/radial-gradient/index.md new file mode 100644 index 0000000000..030750158a --- /dev/null +++ b/files/ja/web/css/gradient/radial-gradient/index.md @@ -0,0 +1,143 @@ +--- +title: radial-gradient() +slug: Web/CSS/gradient/radial-gradient +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Graphics + - Layout + - Reference + - Web + - gradient +translation_of: Web/CSS/gradient/radial-gradient() +original_slug: Web/CSS/gradient/radial-gradient() +browser-compat: css.types.image.gradient.radial-gradient +--- +{{CSSRef}} + +**`radial-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、二つ以上の色の連続的な推移が原点から放射状に広がる画像を生成します。形状は円形または楕円形にになります。関数の結果は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊形です。 + +{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}} + +## 構文 + +```css +/* コンテナーの中央にあるグラデーション、 + 赤で始まり、青へ変わり、緑で終わる */ +radial-gradient(circle at center, red 0, blue, green 100%) +``` + +放射状のグラデーションは、グラデーションの中心 (0％ の楕円の位置) と、*末端図形* (100％ の楕円) の大きさと形状を示すことで指定します。 + +## 値 + +- {{cssxref("<position>")}} + - : グラデーションの位置で、 {{cssxref("background-position")}} や {{cssxref("transform-origin")}} と同じ方法で解釈されます。指定されなかった場合、既定値は `center` です。 +- `` + - : グラデーションの末端図形です。値は `circle` (つまり、グラデーションの形状が一定の半径の円) か `ellipse` (つまり、軸に沿った楕円) のいずれかです。指定されなかった場合、既定値は `ellipse` です。 +- `` + + - : グラデーションの末端図形の大きさを決定します。省略した場合の既定値は farthest-corner です。これは明示的に指定することも、キーワードで指定することもできます。ここでのキーワード定義では、グラデーションボックスのエッジは有限の線分ではなく、両方向に無限に伸びているものと考えてください。 + + グラデーションが円でも楕円でも `` に以下のキーワードを使用することができます。 + + | キーワード | 説明 | + | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | + | `closest-side` | グラデーションの末端図形は、ボックスの中心から最も近い辺 (circle の場合) または中心から最も近い縦の辺と横の辺 (ellipse の場合) に内接します。 | + | `closest-corner` | グラデーションの末端図形は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。 | + | `farthest-side` | `closest-side` と同様ですが、末端図形がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。 | + | `farthest-corner` | 既定値で、グラデーションの末端図形は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。 | + + `` を `circle` と指定した場合、大きさを明示的に [``](/ja/docs/Web/CSS/length) として与えることができ、円形の広がりの大きさを明示的に指定します。負の値は不正です。 + + `` を `ellipse` と指定するか省略した場合、大きさを二つの [``](/ja/docs/Web/CSS/length-percentage) で指定して明示的な楕円の大きさを指定することができます。 1 つ目の値は水平の広がり、 2 つ目の値は垂直の広がりです。パーセント値はグラデーションボックスの対応する長さからの相対値です。負の値は不正です。 + +- `` + - : 色経由点の {{cssxref("<color>")}} 値と、それに続く 1 つまたは 2 つの省略可能な経由位置 (グラデーション軸沿いの {{cssxref("<percentage>")}} または {{cssxref("<length>")}}) です。 percentage が `0%`、または length が `0` の場合は、グラデーションの中心を表します。 `100%` は末端図形と仮想グラデーション光線の交点を表します。その間のパーセント値はグラデーション光線における直線的な位置です。 +- `` + - : color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。 + +## 解説 + +

他のグラデーションと同様、放射グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然な寸法や推奨される寸法、推奨される縦横比もありません。具体的な寸法は、適用先の要素の寸法に一致します。 + +繰り返してコンテナーを埋める放射グラデーションを生成するには、代わりに {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} 関数を使用してください。 + +`` は `` データ型に属するため、 `` が使用できるところでしか使用できません。このため、 `radial-gradient()` は {{cssxref("background-color")}} や、その他の {{cssxref("<color>")}} データ型を使用するプロパティでは動作しません。

+ +### 放射グラデーションの構成 + +![](radial_gradient.png)放射グラデーションは*中心点*、*末端図形*、および二つ以上の*色経由点*で定義されます。 + +滑らかなグラデーションを生成するために、 `radial-gradient()` 関数は中央から*末端図形* (およびその先) に向けて一連の同心円の形状を描きます。図形の端は円または楕円です。 + +色経由点は、中心から右方向に水平に延びる*仮想グラデーション光線*の上に配置されます。色経由点の位置を決めるパーセント値は、図形の端とこのグラデーション光線の交点を `100%` としたときの相対値です。各形状は単色で、色は交差したグラデーション光線の色によって定義されます。 + +## 例 + +

シンプルなグラデーション

+ +```html hidden +
+``` + +```css hidden +.radial-gradient { + width: 240px; + height: 120px; +} +``` + +```css +.radial-gradient { + background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%); +} +``` + +{{EmbedLiveSample('Simple_gradient', 120, 120)}} + +

中央から外れたグラデーション

+ +```html hidden +
+``` + +```css hidden +.radial-gradient { + width: 240px; + height: 120px; +} +``` + +```css +.radial-gradient { + background-image: radial-gradient(farthest-corner at 40px 40px, + #f35 0%, #43e 100%); +} +``` + +{{EmbedLiveSample('Non-centered_gradient', 240, 120)}} + +### 他の radial-gradient の例 + +他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- 他のグラデーション関数: {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} +- {{cssxref("<image>")}} +- {{cssxref("image/image()","image()")}} +- {{cssxref("element()")}} +- {{cssxref("image/image-set()","image-set()")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/repeating-conic-gradient()/index.md b/files/ja/web/css/gradient/repeating-conic-gradient()/index.md deleted file mode 100644 index f9780d9829..0000000000 --- a/files/ja/web/css/gradient/repeating-conic-gradient()/index.md +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: repeating-conic-gradient() -slug: Web/CSS/gradient/repeating-conic-gradient() -tags: - - CSS - - CSS Function - - CSS Images - - Function - - Graphics - - Layout - - Reference - - Web - - gradient -browser-compat: css.types.image.gradient.repeating-conic-gradient -translation_of: Web/CSS/gradient/repeating-conic-gradient() ---- -{{CSSRef}} - -**`repeating-conic-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 ([単一のグラデーション](conic-gradient())ではなく) 繰り返しのグラデーションからなる、色の遷移が (中心から[放射状に広がるのではなく](repeating-radial-gradient\(\))) 中心点の周りを回転する画像を生成します。 - -## 構文 - -```css -/* スターバースト: 青の上に青のスターブラスト: - このグラデーションは左上 4 分の 1 の位置を中心とした - 明るい青と暗い青のスターブラストで、 3 度傾いている - ため垂直線がありません。 */ -background: repeating-conic-gradient( - from 3deg at 25% 25%, - hsl(200, 100%, 50%) 0deg 15deg, - hsl(200, 100%, 60%) 10deg 30deg); -); -``` - -### 値 - -- {{CSSxRef("<angle>")}} - - : `from` キーワードに続いて角度を指定することで、時計回りのグラデーションの位置を定義します。 -- `` - - : {{cssxref("background-position")}} プロパティと同じ長さ、順番、キーワード値を使用して、グラデーションの中心の位置を定義します。省略すると、既定値は`center`、すなわちグラデーションに配置されます。 -- `` - - : 色経由点の {{CSSxRef("<color>")}} 値で、その後にオプションで 1 ～ 2 個の位置 (グラデーションの円周軸に沿った {{CSSxRef("<angle>")}}) が続きます。最後の色経由点から最初の色経由点までの角度が反復グラデーションの大きさを定義します。 -- `` - - : 隣接する色経由点の間でグラデーションがどのように進行するかを定義する補間のヒントです。長さは、 2 つの色経由点の間のどの位置でグラデーションの色が色の遷移の中間点に到達するかを定義します。省略した場合、色の遷移の中間点は 2 つの色経由点間の中間点になります。 - -> **Note:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。 - -## 解説 - -反復扇形グラデーションの例にはスターバーストがあります。 `repeating-conic-gradient()` 関数の返値は {{CSSxRef("<gradient>")}} データ型のオブジェクトで、これは {{CSSxRef("<image>")}} の特殊形です。 - -最初と最後の色経由点がどちらも 0 度以上か 360 度未満になっていない場合、 conic-gradient は繰り返されません。 - -他のグラデーションと同様、扇形グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。自身の寸法は適用先の要素の寸法、または要素の寸法以外で設定された `` の寸法に一致します。 - -`` は `` データ型に属するため、 `` が使用できるところでしか使用できません。このため、 `conic-gradient()` は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} データ型を使用するプロパティでは動作しません。

- -> **Note:** 反復しない扇形グラデーションを作成するには、グラデーションを 360 度の回転にするか、 {{cssxref("gradient/conic-gradient()", "conic-gradient()")}} 関数を使用するかしてください。 - -### 反復扇形グラデーションの理解 - -repeating-conic-gradient の構文は、 {{cssxref("gradient/conic-gradient()", "conic-gradient()")}} や {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} の構文に似ています。反復しない扇形グラデーションのように、色経由点はグラデーションの円弧の周りに配置されます。反復放射グラデーションのように、反復部分の大きさは、最後の色経由点の角度から最初の色経由点を引いたものになります。 - -![反復／反復なしの扇形／放射グラデーションの色経由点の比較](repeatingconicgradient.png) - -上記のグラデーションは 3 分の 1 が青、 3 分の 1 が赤、 3 分の 1 が黄色として定義されています。 - - repeating-conic-gradient(from 0deg, red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg); - - repeating-radial-gradient(red 0 8%, yellow 8% 16%, blue 16% 24%); - - conic-gradient(red 120deg, yellow 120deg 240deg, blue 240deg); - - radial-gradient(red 33%, yellow 33% 66%, blue 66%); - -反復グラデーションを繰り返すためには、最初と最後の色経由点を定義します。繰り返さないグラデーションと同様に、最初と最後の色経由点は、明示的に宣言されていない場合、 0 と 100% または 360deg のいずれかであると仮定されます。これらの値を既定値とした場合、反復アークは360度となるため、繰り返されません。 - -繰り返しのない扇形グラデーションと同様に、色経由点はグラデーションの中心から出ているグラデーション軸上ではなく、グラデーション円弧 (円の円周) の周りに配置されます。 `from ` が宣言されていない場合は一番上から始まり、最大と最小の色の角度の違いである角度の大きさ分だけ時計回りに進み、それを繰り返すことで、円の中心を回るように色が推移します。 - -繰り返しの扇形グラデーションは、回転角度とグラデーションの中心を指定し、さらに色経由点のリストを指定します。反復のない扇形グラデーションと同様に、反復扇形グラデーションの色経由点は {{cssxref('angle')}} で指定します。単位は、度は `deg`、グラデーションは `grad`、ラジアンは `rad`、ターンは `turn` です。円は、360 度、400 グラード、2πラジアン、1 ターンです。反復扇形グラデーションに対応しているブラウザーでは、360 度を 100% とするパーセント値も受け付けますが、これは仕様にはありません。 - -放射グラデーションと扇形グラデーションの構文は、グラデーションの中心を画像内または画像外の任意の場所に配置することができます。位置を指定する値は、 2 値の {{cssxref('background-position')}} の構文と同様です。 - -グラデーション円弧はグラデーションの円周の一部です。 0 度は北、つまり 12 時の方向です。グラデーションの色は、角度のついた色経由点、その開始点、終了点、そしてその間にある、任意の角度の色経由点ポイントによって決定されます。色の遷移は、隣接する色の色経由点の間にあるカラーヒントで変更することができます。 - -#### グラデーションのカスタマイズ - -グラデーションの円弧上に角度のついた色経由点ポイントをさらに追加することで、複数の色の間の高度なカスタマイズされた移行を行うことができます。色経由点の位置は、{{CSSxRef("<angle>")}} を使って明示的に定義することができます。色経由点の位置を指定しない場合は、その前の色経由点と後の色経由点の中間に配置されます。反復しないグラデーションと同様に、最初と最後の色経由点の角度を指定しない場合、その値は 0 度と 360 度になります。いずれの角度も指定しない場合は、非反復の円錐形グラデーションになります。最初と最後の色経由点にそれぞれ 0 度と 360 度以外の値を宣言すると、グラデーションはその値に基づいて繰り返されます。例えば、最初の色に角度を宣言せず、最後の色止めに 10% と宣言した場合、円弧は 10 回繰り返されます。むしろ、最初に宣言した色経由点が起点となり、最後の色経由点は最後に宣言した色経由点の角度となります。次の 2 つのグラデーションは等価です。 - -```css -repeating-conic-gradient(red, orange, yellow, green, blue 50%); -repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg) -``` - -既定では、色はある色経由点の色から次の色経由点の色へとスムーズに移行し、色と色の中間点が色移行の中間点となります。この色遷移の中間点は、色遷移の中間点の位置を示すカラーヒントを追加することで、 2 つの色経由点間の任意の位置に移動させることができます。 - -2 つ以上の色経由点が同じ場所にある場合、その場所で宣言された最初の色と最後の色の間で硬い線になります。 - -異なる角度の単位を混在させることは可能ですが、やめておきましょう。 CSS が読みづらくなります。 - -## アクセシビリティの考慮 - -ブラウザは、背景画像に関する特別な情報を支援技術に提供しません。これは主に画面リーダーにとって重要なことで、画面リーダーはその存在を告知しないため、ユーザーに何も伝えられません。扇形グラデーションを使って円グラフや市松模様などの効果を出すことは可能ですが、 CSS 画像は代替テキストを割り当てるネイティブな方法を提供していないため、扇形グラデーションで表現された画像は画面リーダーのユーザーが認知することはできません。ページの全体的な目的を理解するために重要な情報が画像に含まれている場合は、文書内で意味的に記述する方が良いでしょう。 - -- [MDN WCAG を理解する, ガイドライン 1.1 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) -- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) - -## 例 - -

白黒のスターブラスト

- -```css hidden -div { - width: 200px; - height: 200px; -} -``` - -```html hidden -
-``` - -```css -div { - background-image: - repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg); -} -``` - -{{EmbedLiveSample("Black_and_white_starburst", 220, 220)}} - -

中心をずらしたグラデーション

- -このグラデーションは 18 回繰り返されますが、右半分しか見えないので、 9 回の繰り返しにしか見えません。 - -```css hidden -div { - width: 200px; - height: 200px; -} -``` - -```html hidden -
-``` - -```css -div { - background: repeating-conic-gradient( - from 3deg at 25% 25%, - green, blue 2deg 5deg, green, yellow 15deg 18deg, green 20deg); -} -``` - -{{EmbedLiveSample("Off-centered_gradient", 220, 220)}} - -### その他の repeating-conic-gradient の例 - -それ以外の例は [CSS グラデーション](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) -- その他のグラデーション関数: {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} -- {{cssxref("<image>")}} -- {{cssxref("image/image()","image()")}} -- {{cssxref("element()")}} -- {{cssxref("image/image-set()","image-set()")}} -- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/repeating-conic-gradient/index.md b/files/ja/web/css/gradient/repeating-conic-gradient/index.md new file mode 100644 index 0000000000..623549739e --- /dev/null +++ b/files/ja/web/css/gradient/repeating-conic-gradient/index.md @@ -0,0 +1,178 @@ +--- +title: repeating-conic-gradient() +slug: Web/CSS/gradient/repeating-conic-gradient +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Graphics + - Layout + - Reference + - Web + - gradient +translation_of: Web/CSS/gradient/repeating-conic-gradient() +original_slug: Web/CSS/gradient/repeating-conic-gradient() +browser-compat: css.types.image.gradient.repeating-conic-gradient +--- +{{CSSRef}} + +**`repeating-conic-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 ([単一のグラデーション](conic-gradient())ではなく) 繰り返しのグラデーションからなる、色の遷移が (中心から[放射状に広がるのではなく](repeating-radial-gradient\(\))) 中心点の周りを回転する画像を生成します。 + +## 構文 + +```css +/* スターバースト: 青の上に青のスターブラスト: + このグラデーションは左上 4 分の 1 の位置を中心とした + 明るい青と暗い青のスターブラストで、 3 度傾いている + ため垂直線がありません。 */ +background: repeating-conic-gradient( + from 3deg at 25% 25%, + hsl(200, 100%, 50%) 0deg 15deg, + hsl(200, 100%, 60%) 10deg 30deg); +); +``` + +### 値 + +- {{CSSxRef("<angle>")}} + - : `from` キーワードに続いて角度を指定することで、時計回りのグラデーションの位置を定義します。 +- `` + - : {{cssxref("background-position")}} プロパティと同じ長さ、順番、キーワード値を使用して、グラデーションの中心の位置を定義します。省略すると、既定値は`center`、すなわちグラデーションに配置されます。 +- `` + - : 色経由点の {{CSSxRef("<color>")}} 値で、その後にオプションで 1 ～ 2 個の位置 (グラデーションの円周軸に沿った {{CSSxRef("<angle>")}}) が続きます。最後の色経由点から最初の色経由点までの角度が反復グラデーションの大きさを定義します。 +- `` + - : 隣接する色経由点の間でグラデーションがどのように進行するかを定義する補間のヒントです。長さは、 2 つの色経由点の間のどの位置でグラデーションの色が色の遷移の中間点に到達するかを定義します。省略した場合、色の遷移の中間点は 2 つの色経由点間の中間点になります。 + +> **Note:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。 + +## 解説 + +反復扇形グラデーションの例にはスターバーストがあります。 `repeating-conic-gradient()` 関数の返値は {{CSSxRef("<gradient>")}} データ型のオブジェクトで、これは {{CSSxRef("<image>")}} の特殊形です。 + +最初と最後の色経由点がどちらも 0 度以上か 360 度未満になっていない場合、 conic-gradient は繰り返されません。 + +他のグラデーションと同様、扇形グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。自身の寸法は適用先の要素の寸法、または要素の寸法以外で設定された `` の寸法に一致します。 + +`` は `` データ型に属するため、 `` が使用できるところでしか使用できません。このため、 `conic-gradient()` は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} データ型を使用するプロパティでは動作しません。

+ +> **Note:** 反復しない扇形グラデーションを作成するには、グラデーションを 360 度の回転にするか、 {{cssxref("gradient/conic-gradient()", "conic-gradient()")}} 関数を使用するかしてください。 + +### 反復扇形グラデーションの理解 + +repeating-conic-gradient の構文は、 {{cssxref("gradient/conic-gradient()", "conic-gradient()")}} や {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} の構文に似ています。反復しない扇形グラデーションのように、色経由点はグラデーションの円弧の周りに配置されます。反復放射グラデーションのように、反復部分の大きさは、最後の色経由点の角度から最初の色経由点を引いたものになります。 + +![反復／反復なしの扇形／放射グラデーションの色経由点の比較](repeatingconicgradient.png) + +上記のグラデーションは 3 分の 1 が青、 3 分の 1 が赤、 3 分の 1 が黄色として定義されています。 + + repeating-conic-gradient(from 0deg, red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg); + + repeating-radial-gradient(red 0 8%, yellow 8% 16%, blue 16% 24%); + + conic-gradient(red 120deg, yellow 120deg 240deg, blue 240deg); + + radial-gradient(red 33%, yellow 33% 66%, blue 66%); + +反復グラデーションを繰り返すためには、最初と最後の色経由点を定義します。繰り返さないグラデーションと同様に、最初と最後の色経由点は、明示的に宣言されていない場合、 0 と 100% または 360deg のいずれかであると仮定されます。これらの値を既定値とした場合、反復アークは360度となるため、繰り返されません。 + +繰り返しのない扇形グラデーションと同様に、色経由点はグラデーションの中心から出ているグラデーション軸上ではなく、グラデーション円弧 (円の円周) の周りに配置されます。 `from ` が宣言されていない場合は一番上から始まり、最大と最小の色の角度の違いである角度の大きさ分だけ時計回りに進み、それを繰り返すことで、円の中心を回るように色が推移します。 + +繰り返しの扇形グラデーションは、回転角度とグラデーションの中心を指定し、さらに色経由点のリストを指定します。反復のない扇形グラデーションと同様に、反復扇形グラデーションの色経由点は {{cssxref('angle')}} で指定します。単位は、度は `deg`、グラデーションは `grad`、ラジアンは `rad`、ターンは `turn` です。円は、360 度、400 グラード、2πラジアン、1 ターンです。反復扇形グラデーションに対応しているブラウザーでは、360 度を 100% とするパーセント値も受け付けますが、これは仕様にはありません。 + +放射グラデーションと扇形グラデーションの構文は、グラデーションの中心を画像内または画像外の任意の場所に配置することができます。位置を指定する値は、 2 値の {{cssxref('background-position')}} の構文と同様です。 + +グラデーション円弧はグラデーションの円周の一部です。 0 度は北、つまり 12 時の方向です。グラデーションの色は、角度のついた色経由点、その開始点、終了点、そしてその間にある、任意の角度の色経由点ポイントによって決定されます。色の遷移は、隣接する色の色経由点の間にあるカラーヒントで変更することができます。 + +#### グラデーションのカスタマイズ + +グラデーションの円弧上に角度のついた色経由点ポイントをさらに追加することで、複数の色の間の高度なカスタマイズされた移行を行うことができます。色経由点の位置は、{{CSSxRef("<angle>")}} を使って明示的に定義することができます。色経由点の位置を指定しない場合は、その前の色経由点と後の色経由点の中間に配置されます。反復しないグラデーションと同様に、最初と最後の色経由点の角度を指定しない場合、その値は 0 度と 360 度になります。いずれの角度も指定しない場合は、非反復の円錐形グラデーションになります。最初と最後の色経由点にそれぞれ 0 度と 360 度以外の値を宣言すると、グラデーションはその値に基づいて繰り返されます。例えば、最初の色に角度を宣言せず、最後の色止めに 10% と宣言した場合、円弧は 10 回繰り返されます。むしろ、最初に宣言した色経由点が起点となり、最後の色経由点は最後に宣言した色経由点の角度となります。次の 2 つのグラデーションは等価です。 + +```css +repeating-conic-gradient(red, orange, yellow, green, blue 50%); +repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg) +``` + +既定では、色はある色経由点の色から次の色経由点の色へとスムーズに移行し、色と色の中間点が色移行の中間点となります。この色遷移の中間点は、色遷移の中間点の位置を示すカラーヒントを追加することで、 2 つの色経由点間の任意の位置に移動させることができます。 + +2 つ以上の色経由点が同じ場所にある場合、その場所で宣言された最初の色と最後の色の間で硬い線になります。 + +異なる角度の単位を混在させることは可能ですが、やめておきましょう。 CSS が読みづらくなります。 + +## アクセシビリティの考慮 + +ブラウザは、背景画像に関する特別な情報を支援技術に提供しません。これは主に画面リーダーにとって重要なことで、画面リーダーはその存在を告知しないため、ユーザーに何も伝えられません。扇形グラデーションを使って円グラフや市松模様などの効果を出すことは可能ですが、 CSS 画像は代替テキストを割り当てるネイティブな方法を提供していないため、扇形グラデーションで表現された画像は画面リーダーのユーザーが認知することはできません。ページの全体的な目的を理解するために重要な情報が画像に含まれている場合は、文書内で意味的に記述する方が良いでしょう。 + +- [MDN WCAG を理解する, ガイドライン 1.1 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) +- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +## 例 + +

白黒のスターブラスト

+ +```css hidden +div { + width: 200px; + height: 200px; +} +``` + +```html hidden +
+``` + +```css +div { + background-image: + repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg); +} +``` + +{{EmbedLiveSample("Black_and_white_starburst", 220, 220)}} + +

中心をずらしたグラデーション

+ +このグラデーションは 18 回繰り返されますが、右半分しか見えないので、 9 回の繰り返しにしか見えません。 + +```css hidden +div { + width: 200px; + height: 200px; +} +``` + +```html hidden +
+``` + +```css +div { + background: repeating-conic-gradient( + from 3deg at 25% 25%, + green, blue 2deg 5deg, green, yellow 15deg 18deg, green 20deg); +} +``` + +{{EmbedLiveSample("Off-centered_gradient", 220, 220)}} + +### その他の repeating-conic-gradient の例 + +それ以外の例は [CSS グラデーション](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- その他のグラデーション関数: {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} +- {{cssxref("<image>")}} +- {{cssxref("image/image()","image()")}} +- {{cssxref("element()")}} +- {{cssxref("image/image-set()","image-set()")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/repeating-linear-gradient()/index.md b/files/ja/web/css/gradient/repeating-linear-gradient()/index.md deleted file mode 100644 index de9a11c8ab..0000000000 --- a/files/ja/web/css/gradient/repeating-linear-gradient()/index.md +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: repeating-linear-gradient() -slug: Web/CSS/gradient/repeating-linear-gradient() -tags: - - CSS - - CSS Function - - CSS Images - - Function - - Gradients - - Graphics - - Layout - - Reference - - Web -browser-compat: css.types.image.gradient.repeating-linear-gradient -translation_of: Web/CSS/gradient/repeating-linear-gradient() -original_slug: Web/CSS/repeating-linear-gradient() ---- -{{CSSRef}} - -**`repeating-linear-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、反復線形グラデーションによる画像を生成します。 {{cssxref("gradient/linear-gradient()", "linear-gradient()")}} と似ており、同じ引数を取りますが、両方向に無限に色経由点を繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊型です。 - -{{EmbedInteractiveExample("pages/css/function-repeating-linear-gradient.html")}} - -繰り返すグラデーションの長さは、最初の色経由点と最後の色経由点の間の距離です。最初の色に color-stop-length がない場合、 color-stop-length の既定値は 0 になります。それぞれの繰り返しにおいて、色経由点の位置は基本的な線形グラデーションの長さの倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるでしょう。これは最初の色を最後の色として再び使用することで修正することができます。 - -他のグラデーションと同じく、線形反復グラデーションも[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。 - -`` は CSS の `` データ型に所属しますので、 `` が使用できるところでのみ使用できます。このため、 `repeating-linear-gradient()` は {{Cssxref("background-color")}} や、その他の {{cssxref("<color>")}} を要求するプロパティでは動作しません。 - -## 構文 - -```css -/* 45 度方向に軸を延ばし、青で始め赤で終わり、 - 3 回繰り返す反復グラデーション */ -repeating-linear-gradient(45deg, blue, red 33.3%); - -/* 右下から左上に延び、青で始め赤で終わり、 - 20px ごとに繰り返す反復グラデーション */ -repeating-linear-gradient(to left top, blue, red 20px); - -/* 下から上に延び、青で始め、 40% から緑になり、 - 赤で終わるグラデーション。最後の色経由点が既定で - 100% なので、グラデーションは繰り返されない */ -repeating-linear-gradient(0deg, blue, green 40%, red); - -/* 5 回繰り返し、左から右に、赤で始まり、緑に変わり、 - 赤に戻るグラデーション */ -repeating-linear-gradient(to right, red 0%, green 10%, red 20%); -``` - -### 値 - -- `` - - - : グラデーション線の開始点の位置。指定する場合は、 `to` に続けて 2 つ以下のキーワードを指定します。一つは水平方向の辺 (`left` または `right`)、もう一方は垂直方向の辺 (`top` または `bottom`) です。辺を表すキーワードは順不同です。指定しない場合は、 `to bottom` が既定になります。 - - `to top`, `to bottom`, `to left`, `to right` の値は、 `0deg`, `180deg`, `270deg`, `90deg` の角度にそれぞれ対応します。他の値は角度に変換されます。 - -- {{cssxref("<angle>")}} - - : グラデーション線の方向を角度で示します。 `0deg` の値は `to top` と等価で、値が増加するとそこから時計回りに回ります。 -- `` - - : 色経由点の {{CSSxRef("<color>")}} の値であり、任意でその後に停止位置を指定します(グラデーションの軸に沿った {{CSSxRef("<percentage>")}} または {{CSSxRef("<length>")}} の位置)。 `0%` のパーセント値または `0` の長さは、グラデーションの先頭を表します。 `100%` の値は画像の寸法の 100% であり、つまりグラデーションは反復されません。 -- `` - - : color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。 - -> **Note:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。 - -### 形式文法 - -```css -repeating-linear-gradient( [ | to ,]? ) - \---------------------------------/ \---------------/ - グラデーション線の定義 色経由点のリスト - -where = [left | right] || [top | bottom] - and = [ [, ? ]? ]#, - and = [ ]? - and = [ | ]{1,2} - and = [ | ] -``` - -## 例 - -

縞模様

- -```css hidden -body { - width: 100vw; - height: 100vh; -} -``` - -```css -body { - background-image: repeating-linear-gradient(-45deg, - transparent, - transparent 20px, - black 20px, - black 40px); - /* 複数の色経由点の位置 */ - background-image: repeating-linear-gradient(-45deg, - transparent 0 20px, - black 20px 40px); -} -``` - -{{EmbedLiveSample('Zebra_stripes', 120, 120)}} - -

10 回繰り返す水平線

- -```css hidden -body { - width: 100vw; - height: 100vh; -} -``` - -```css -body { - background-image: repeating-linear-gradient(to bottom, - rgb(26,198,204), - rgb(26,198,204) 7%, - rgb(100,100,100) 10%); -} -``` - -{{EmbedLiveSample('Ten_repeating_horizontal_bars', 120, 120)}} - -最後の色経由点が 10% であり、グラデーションが垂直なので、反復グラデーション内の各グラデーションは 10% の高さになり、 10 本の水平線に相当します。 - -> **Note:** 他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) -- 他のグラデーション関数: {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} -- {{cssxref("<image>")}} -- {{cssxref("image/image()","image()")}} -- {{cssxref("element()")}} -- {{cssxref("image/image-set()","image-set()")}} -- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/repeating-linear-gradient/index.md b/files/ja/web/css/gradient/repeating-linear-gradient/index.md new file mode 100644 index 0000000000..9ba6a864b9 --- /dev/null +++ b/files/ja/web/css/gradient/repeating-linear-gradient/index.md @@ -0,0 +1,149 @@ +--- +title: repeating-linear-gradient() +slug: Web/CSS/gradient/repeating-linear-gradient +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Gradients + - Graphics + - Layout + - Reference + - Web +translation_of: Web/CSS/gradient/repeating-linear-gradient() +original_slug: Web/CSS/gradient/repeating-linear-gradient() +browser-compat: css.types.image.gradient.repeating-linear-gradient +--- +{{CSSRef}} + +**`repeating-linear-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、反復線形グラデーションによる画像を生成します。 {{cssxref("gradient/linear-gradient()", "linear-gradient()")}} と似ており、同じ引数を取りますが、両方向に無限に色経由点を繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊型です。 + +{{EmbedInteractiveExample("pages/css/function-repeating-linear-gradient.html")}} + +繰り返すグラデーションの長さは、最初の色経由点と最後の色経由点の間の距離です。最初の色に color-stop-length がない場合、 color-stop-length の既定値は 0 になります。それぞれの繰り返しにおいて、色経由点の位置は基本的な線形グラデーションの長さの倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるでしょう。これは最初の色を最後の色として再び使用することで修正することができます。 + +他のグラデーションと同じく、線形反復グラデーションも[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。 + +`` は CSS の `` データ型に所属しますので、 `` が使用できるところでのみ使用できます。このため、 `repeating-linear-gradient()` は {{Cssxref("background-color")}} や、その他の {{cssxref("<color>")}} を要求するプロパティでは動作しません。 + +## 構文 + +```css +/* 45 度方向に軸を延ばし、青で始め赤で終わり、 + 3 回繰り返す反復グラデーション */ +repeating-linear-gradient(45deg, blue, red 33.3%); + +/* 右下から左上に延び、青で始め赤で終わり、 + 20px ごとに繰り返す反復グラデーション */ +repeating-linear-gradient(to left top, blue, red 20px); + +/* 下から上に延び、青で始め、 40% から緑になり、 + 赤で終わるグラデーション。最後の色経由点が既定で + 100% なので、グラデーションは繰り返されない */ +repeating-linear-gradient(0deg, blue, green 40%, red); + +/* 5 回繰り返し、左から右に、赤で始まり、緑に変わり、 + 赤に戻るグラデーション */ +repeating-linear-gradient(to right, red 0%, green 10%, red 20%); +``` + +### 値 + +- `` + + - : グラデーション線の開始点の位置。指定する場合は、 `to` に続けて 2 つ以下のキーワードを指定します。一つは水平方向の辺 (`left` または `right`)、もう一方は垂直方向の辺 (`top` または `bottom`) です。辺を表すキーワードは順不同です。指定しない場合は、 `to bottom` が既定になります。 + + `to top`, `to bottom`, `to left`, `to right` の値は、 `0deg`, `180deg`, `270deg`, `90deg` の角度にそれぞれ対応します。他の値は角度に変換されます。 + +- {{cssxref("<angle>")}} + - : グラデーション線の方向を角度で示します。 `0deg` の値は `to top` と等価で、値が増加するとそこから時計回りに回ります。 +- `` + - : 色経由点の {{CSSxRef("<color>")}} の値であり、任意でその後に停止位置を指定します(グラデーションの軸に沿った {{CSSxRef("<percentage>")}} または {{CSSxRef("<length>")}} の位置)。 `0%` のパーセント値または `0` の長さは、グラデーションの先頭を表します。 `100%` の値は画像の寸法の 100% であり、つまりグラデーションは反復されません。 +- `` + - : color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。 + +> **Note:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。 + +### 形式文法 + +```css +repeating-linear-gradient( [ | to ,]? ) + \---------------------------------/ \---------------/ + グラデーション線の定義 色経由点のリスト + +where = [left | right] || [top | bottom] + and = [ [, ? ]? ]#, + and = [ ]? + and = [ | ]{1,2} + and = [ | ] +``` + +## 例 + +

縞模様

+ +```css hidden +body { + width: 100vw; + height: 100vh; +} +``` + +```css +body { + background-image: repeating-linear-gradient(-45deg, + transparent, + transparent 20px, + black 20px, + black 40px); + /* 複数の色経由点の位置 */ + background-image: repeating-linear-gradient(-45deg, + transparent 0 20px, + black 20px 40px); +} +``` + +{{EmbedLiveSample('Zebra_stripes', 120, 120)}} + +

10 回繰り返す水平線

+ +```css hidden +body { + width: 100vw; + height: 100vh; +} +``` + +```css +body { + background-image: repeating-linear-gradient(to bottom, + rgb(26,198,204), + rgb(26,198,204) 7%, + rgb(100,100,100) 10%); +} +``` + +{{EmbedLiveSample('Ten_repeating_horizontal_bars', 120, 120)}} + +最後の色経由点が 10% であり、グラデーションが垂直なので、反復グラデーション内の各グラデーションは 10% の高さになり、 10 本の水平線に相当します。 + +> **Note:** 他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- 他のグラデーション関数: {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} +- {{cssxref("<image>")}} +- {{cssxref("image/image()","image()")}} +- {{cssxref("element()")}} +- {{cssxref("image/image-set()","image-set()")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/repeating-radial-gradient()/index.md b/files/ja/web/css/gradient/repeating-radial-gradient()/index.md deleted file mode 100644 index 8142f54a54..0000000000 --- a/files/ja/web/css/gradient/repeating-radial-gradient()/index.md +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: repeating-radial-gradient() -slug: Web/CSS/gradient/repeating-radial-gradient() -tags: - - CSS - - CSS Function - - CSS Images - - Function - - Gradients - - Graphics - - Layout - - Reference - - Web -browser-compat: css.types.image.gradient.repeating-radial-gradient -translation_of: Web/CSS/gradient/repeating-radial-gradient() -original_slug: Web/CSS/repeating-radial-gradient() ---- -{{CSSRef}} - -**`repeating-radial-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、原点から広がり反復するグラデーションから成る画像を生成します。 {{cssxref("gradient/radial-gradient()", "radial-gradient()")}} と似ており、同じ引数を取りますが、 {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}} と同様にすべての方向に色経由点を無限に繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊型です。 - -{{EmbedInteractiveExample("pages/css/function-repeating-radial-gradient.html")}} - -それぞれの繰り返しにおいて、色経由点の位置は基本的な放射グラデーションの寸法 (最初と最後の色経由点の間の距離) の倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるので、最初の色を最後の色として繰り返すことで緩和できます。 - -他のグラデーションと同じく、放射反復グラデーションも[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。 - -`` は `` データ型に属するため、 `` が使用できるところでしか使用できません。このため、 `repeating-radial-gradient()` は {{cssxref("background-color")}} や、その他の {{cssxref("<color>")}} データ型を使用するプロパティでは動作しません。 - -## 構文 - -```css -/* コンテナーの中央からのグラデーションで、 - 赤で始まり、青に変化し、緑で終わり、 - それぞれ 30px ごとに色が繰り返される */ -repeating-radial-gradient(circle at center, red 0, blue, green 30px); - -/* 左上の角付近の楕円形のグラデーションで、 - 赤で始まり、緑に変化し、また戻り、 - 中央と右下の角の間で5回繰り返され、 - 中央と左上の角の間は1回だけ */ -repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%); -``` - -### 値 - -- {{cssxref("<position>")}} - - : グラデーションの位置で、 {{cssxref("background-position")}} や {{cssxref("transform-origin")}} と同じ方法で解釈されます。指定されなかった場合、既定値は `center` です。 -- `` - - : グラデーションの形状です。 `circle` (グラデーションの形状が一定の半径の円の意味) か `ellipse` (軸に沿った楕円の意味) のいずれかです。指定されなかった場合、既定値は `ellipse` です。 -- `` - - - : 終端の形状の大きさを指定するキーワードです。利用可能な値は次の通りです。 - - | キーワード | 説明 | - | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | - | `closest-side` | グラデーションの終端の形状は、中心から最も近いボックスの辺に (circle の場合) または中心から最も近い縦の辺と横の辺に (ellipse の場合) 内接します。 | - | `closest-corner` | グラデーションの終端の形状は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。 | - | `farthest-side` | `closest-side` と同様ですが、終端の形状がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。 | - | `farthest-corner` | グラデーションの終端の形状は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。 | - - > **Note:** この関数の初期の実装では、他のキーワード (`cover` および `contain`) をそれぞれ標準の `farthest-corner` および `closest-side` の別名として含めていました。実装によってはすでに古い形を外しているので、標準的なキーワードのみを使用してください。 - -- `` - - : 色経由点の {{cssxref("<color>")}} 値と、それに続く省略可能な経由位置 (グラデーション軸沿いの {{cssxref("<percentage>")}} または {{cssxref("<length>")}}) です。 percentage が `0%`、または length が `0` の場合は、グラデーションの中心を表します。 `100%` は終端の形状と仮想グラデーション光の交点を表します。その間のパーセント値は仮想グラデーション光における直線的な位置です。 - -### 形式文法 - -```css -repeating-radial-gradient( - [[ circle || ] [at ]? , | - [ ellipse || [ | ]{2}] [at ]? , | - [[ circle | ellipse ] || ] [at ]? , | - at , ) - \---------------------------------------------------------------/\-----------------/ - Contour, size and position of the ending shape List of color stops - -where = closest-corner | closest-side | farthest-corner | farthest-side - and = [ [, ? ]? ]#, - and = [ ]? - and = [ | ]{1,2} - and = [ | ] -``` - -## 例 - -

白と黒のグラデーション

- -```html hidden -
-``` - -```css hidden -.radial-gradient { - width: 120px; - height: 120px; -} -``` - -```css -.radial-gradient { - background: repeating-radial-gradient(black, black 5px, white 5px, white 10px); -} -``` - -{{EmbedLiveSample('Black_and_white_gradient', 120, 120)}} - -

最も遠い角

- -```html hidden -
-``` - -```css hidden -.radial-gradient { - width: 240px; - height: 120px; -} -``` - -```css -.radial-gradient { - background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%, - red, black 5%, blue 5%, green 10%); - background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%, - red 0 5%, green 5% 10%); -} -``` - -{{EmbedLiveSample('Farthest-corner', 120, 120)}} - -楕円のグラデーションは左上から 20% の位置が中心となり、中心と最も遠い角 (右下の角) の間で 10 回繰り返します。色経由点で複数の位置に対応しているブラウザーでは、赤と緑の縞模様の楕円が表示されます。この構文にまだ対応していないブラウザーでは、赤から黒、それから青から緑へと変化するグラデーションが表示されます。 - -> **Note:** 他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)をご覧ください。 - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) -- 他のグラデーション関数: {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} -- {{cssxref("<image>")}} -- {{cssxref("image/image()","image()")}} -- {{cssxref("element()")}} -- {{cssxref("image/image-set()","image-set()")}} -- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/repeating-radial-gradient/index.md b/files/ja/web/css/gradient/repeating-radial-gradient/index.md new file mode 100644 index 0000000000..25e24893b5 --- /dev/null +++ b/files/ja/web/css/gradient/repeating-radial-gradient/index.md @@ -0,0 +1,152 @@ +--- +title: repeating-radial-gradient() +slug: Web/CSS/gradient/repeating-radial-gradient +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Gradients + - Graphics + - Layout + - Reference + - Web +translation_of: Web/CSS/gradient/repeating-radial-gradient() +original_slug: Web/CSS/gradient/repeating-radial-gradient() +browser-compat: css.types.image.gradient.repeating-radial-gradient +--- +{{CSSRef}} + +**`repeating-radial-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、原点から広がり反復するグラデーションから成る画像を生成します。 {{cssxref("gradient/radial-gradient()", "radial-gradient()")}} と似ており、同じ引数を取りますが、 {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}} と同様にすべての方向に色経由点を無限に繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊型です。 + +{{EmbedInteractiveExample("pages/css/function-repeating-radial-gradient.html")}} + +それぞれの繰り返しにおいて、色経由点の位置は基本的な放射グラデーションの寸法 (最初と最後の色経由点の間の距離) の倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるので、最初の色を最後の色として繰り返すことで緩和できます。 + +他のグラデーションと同じく、放射反復グラデーションも[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。 + +`` は `` データ型に属するため、 `` が使用できるところでしか使用できません。このため、 `repeating-radial-gradient()` は {{cssxref("background-color")}} や、その他の {{cssxref("<color>")}} データ型を使用するプロパティでは動作しません。 + +## 構文 + +```css +/* コンテナーの中央からのグラデーションで、 + 赤で始まり、青に変化し、緑で終わり、 + それぞれ 30px ごとに色が繰り返される */ +repeating-radial-gradient(circle at center, red 0, blue, green 30px); + +/* 左上の角付近の楕円形のグラデーションで、 + 赤で始まり、緑に変化し、また戻り、 + 中央と右下の角の間で5回繰り返され、 + 中央と左上の角の間は1回だけ */ +repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%); +``` + +### 値 + +- {{cssxref("<position>")}} + - : グラデーションの位置で、 {{cssxref("background-position")}} や {{cssxref("transform-origin")}} と同じ方法で解釈されます。指定されなかった場合、既定値は `center` です。 +- `` + - : グラデーションの形状です。 `circle` (グラデーションの形状が一定の半径の円の意味) か `ellipse` (軸に沿った楕円の意味) のいずれかです。指定されなかった場合、既定値は `ellipse` です。 +- `` + + - : 終端の形状の大きさを指定するキーワードです。利用可能な値は次の通りです。 + + | キーワード | 説明 | + | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | + | `closest-side` | グラデーションの終端の形状は、中心から最も近いボックスの辺に (circle の場合) または中心から最も近い縦の辺と横の辺に (ellipse の場合) 内接します。 | + | `closest-corner` | グラデーションの終端の形状は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。 | + | `farthest-side` | `closest-side` と同様ですが、終端の形状がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。 | + | `farthest-corner` | グラデーションの終端の形状は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。 | + + > **Note:** この関数の初期の実装では、他のキーワード (`cover` および `contain`) をそれぞれ標準の `farthest-corner` および `closest-side` の別名として含めていました。実装によってはすでに古い形を外しているので、標準的なキーワードのみを使用してください。 + +- `` + - : 色経由点の {{cssxref("<color>")}} 値と、それに続く省略可能な経由位置 (グラデーション軸沿いの {{cssxref("<percentage>")}} または {{cssxref("<length>")}}) です。 percentage が `0%`、または length が `0` の場合は、グラデーションの中心を表します。 `100%` は終端の形状と仮想グラデーション光の交点を表します。その間のパーセント値は仮想グラデーション光における直線的な位置です。 + +### 形式文法 + +```css +repeating-radial-gradient( + [[ circle || ] [at ]? , | + [ ellipse || [ | ]{2}] [at ]? , | + [[ circle | ellipse ] || ] [at ]? , | + at , ) + \---------------------------------------------------------------/\-----------------/ + Contour, size and position of the ending shape List of color stops + +where = closest-corner | closest-side | farthest-corner | farthest-side + and = [ [, ? ]? ]#, + and = [ ]? + and = [ | ]{1,2} + and = [ | ] +``` + +## 例 + +

白と黒のグラデーション

+ +```html hidden +
+``` + +```css hidden +.radial-gradient { + width: 120px; + height: 120px; +} +``` + +```css +.radial-gradient { + background: repeating-radial-gradient(black, black 5px, white 5px, white 10px); +} +``` + +{{EmbedLiveSample('Black_and_white_gradient', 120, 120)}} + +

最も遠い角

+ +```html hidden +
+``` + +```css hidden +.radial-gradient { + width: 240px; + height: 120px; +} +``` + +```css +.radial-gradient { + background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%, + red, black 5%, blue 5%, green 10%); + background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%, + red 0 5%, green 5% 10%); +} +``` + +{{EmbedLiveSample('Farthest-corner', 120, 120)}} + +楕円のグラデーションは左上から 20% の位置が中心となり、中心と最も遠い角 (右下の角) の間で 10 回繰り返します。色経由点で複数の位置に対応しているブラウザーでは、赤と緑の縞模様の楕円が表示されます。この構文にまだ対応していないブラウザーでは、赤から黒、それから青から緑へと変化するグラデーションが表示されます。 + +> **Note:** 他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)をご覧ください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- 他のグラデーション関数: {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} +- {{cssxref("<image>")}} +- {{cssxref("image/image()","image()")}} +- {{cssxref("element()")}} +- {{cssxref("image/image-set()","image-set()")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/image/image()/index.md b/files/ja/web/css/image/image()/index.md deleted file mode 100644 index e34c87244d..0000000000 --- a/files/ja/web/css/image/image()/index.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: image() -slug: Web/CSS/image/image() -tags: - - CSS - - CSS 関数 - - CSS 画像 - - 関数 - - Reference - - ウェブ -browser-compat: css.types.image.image -translation_of: Web/CSS/image/image() ---- -{{CSSRef}} - -**`image()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 {{CSSxRef("<image>")}} を {{CSSxRef("url()")}} 関数と同様の様式で定義しますが、画像の書字方向を指定したり、メディアフラグメントで定義された画像の一部だけを表示したり、指定された画像がどれも描画できなかった場合の予備として単色を指定するなどの機能が追加されています。 - -> **Note:** CSS の `image()` 関数を {{DOMxRef("HTMLImageElement/Image", '`HTMLImageElement` のコンストラクターである `Image()`', '', 1)}} と混同しないでください。 - -## 構文 - -{{CSSSyntax("image()")}} - -ここで - -- `image-tags`{{Optional_Inline}} - - : 画像の書字方向、左書きならば `ltr`、右書きならば `rtl` です。 -- `image-src` {{Optional_Inline}} - - : 0 個以上の {{CSSxRef("url()")}} または {{CSSxRef("<string>")}} で、画像のソースをオプションの画像フラグメント識別子と共に指定します。 -- `color`{{Optional_Inline}} - - : 色であり、 `image-src` が見つからなかったり、対応していなかったり、宣言されていなかったりした場合の代替として使用される単色の背景色を指定します。 - -### 書字方向の認識 - -`image()` 表記の最初のオプション引数は、画像の書字方向です。この引数が含まれている場合、画像が反対の書字方向を持つ要素で使用されると、横書きモードでは画像が水平に反転します。書字方向を省略した場合は、言語の方向が変わっても画像は反転しません。 - -### 画像フラグメント - -`url()` と `image()` の大きな違いは、メディアフラグメント識別子 (開始点の x 軸と y 軸、幅と高さ) を画像ソースに追加することで、ソース画像の一部分のみを表示することができることです。引数で定義された画像の範囲は、独立した画像になります。構文は次のようになります。 - -```css -background-image: image('myimage.webp#xywh=0,20,40,60'); -``` - -要素の背景画像は、画像 _myImage.webp_ のうち、 0px, 20px の座標 (左上隅) から始まり、幅 40px、高さ 60px の部分になります。 - - -`#xywh=#,#,#,#` というメディアフラグメントの構文は、カンマで区切られた 4 つの数値を取ります。最初の 2 つの値は、作成されるボックスの始点の X および Y 座標を表します。 3 つ目の値はボックスの幅、最後の値は高さです。既定では、これらはピクセル値です。[メディア仕様書の spacial dimension definition](https://www.w3.org/TR/media-frags/#naming-space) によると、パーセント値にも対応しています。 - -```css -xywh=160,120,320,240 /* results in a 320x240 image at x=160 and y=120 */ -xywh=pixel:160,120,320,240 /* results in a 320x240 image at x=160 and y=120 */ -xywh=percent:25,25,50,50 /* results in a 50%x50% image at x=25% and y=25% */ -``` - -イメージフラグメントは、 `url()` 記法でも使用できます。 `#xywh=#,#,#,#` というメディアフラグメントの構文は「後方互換」であり、メディアフラグメントが理解できない場合は無視され、 `url()` で使用してもソースの呼び出しが壊れることはありません。ブラウザーがメディアフラグメントの表記を理解していない場合、フラグメントを無視して画像全体を表示します。 - -`image()` を理解できるブラウザーはフラグメント表記も理解できます。したがって、フラグメントが `image()` の中で理解できない場合は、その画像は無効とみなされます。 - -### 色による代替 - -`image()` で画像ソースと一緒に色が指定されていると、画像が無効で表示されない場合の代替として機能します。このような場合、`image()` 関数は、画像が含まれていないかのように描画を行い、単一色の画像を生成します。例として、白いテキストの背景に暗い色の画像を使用する場合を考えてみましょう。画像が描画されない場合、前景のテキストを読みやすくするために暗い背景色が必要になることがあります。 - -画像ソースを省略して色を含めることは有効で、色見本を作成します。背景色を宣言すると、すべての背景画像の下や後ろに配置されるのとは異なり、これは他の画像の上に (通常は半透明の) 色を配置するために使用できます。 - -色見本の寸法は、 {{CSSxRef("background-size")}} プロパティで設定できます。これは、要素全体を覆うように色を設定する `background-color` とは異なります。 `image(color)` と `background-color` の両方を配置すると、 {{CSSxRef("background-clip")}} と {{CSSxRef("background-origin")}} プロパティの影響を受けます。 - -## アクセシビリティの考慮 - -ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に画面リーダーにとって重要なことで、画面リーダーはその存在を告知しないため、ユーザーに何も伝えません。画像に、ページ全体の目的を理解するために重要な情報が含まれている場合は、文書内で意味的に記述したほうがよいでしょう。 - -- [MDN WCAG を理解する, ガイドライン 1.1 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) -- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) - -この機能は、画像の読み込みに失敗したときに予備の色を提供することで、アクセシビリティの向上に役立ちます。この機能は、すべての背景画像に背景色を含めることで実現できますが、 CSS の `image()` 関数では、画像の読み込みに失敗したときに背景色のみを含めることができます。つまり、透過 PNG/GIF/WebP の読み込みに失敗したときに、予備の色を追加することができます。 - -## 例 - -

書字方向を意識した画像

- -```html -
  • 行頭記号が左側で右向きの矢印になります。
    • -
  • 行頭記号は同じ矢印で、左を指します。
    • - -``` - -```css -ul { - list-style-image: image(ltr 'rightarrow.png'); -} -``` - -左書きのリスト項目 (要素自体に `dir="ltr"` が設定されているもの、祖先から書字方向を継承しているもの、ページの既定値) では、画像がそのまま使用されます。 `
  • ` に `dir="rtl"` が設定されているリスト項目や、祖先から右から左への指向性を受け継いでいるリスト項目 (アラビア語やヘブライ語に設定されている文書など) では、 `transform: scalex(-1)` が設定されているかのように、箇条書きのテキストが水平方向に反転して右に表示されます。テキストも左書きで表示されます。 - -{{EmbedLiveSample("Directionally-sensitive_images", "100%", 200)}} - -

    背景画像のある範囲の表示

    - -```html -
    この上にカーソルを移動してください。どのように見えますか？
    -``` - -```css -.box:hover { - cursor: image("sprite.png#xywh=32,64,16,16"); -} -``` - -ユーザーがボックスの上にカーソルを移動させると、カーソルは x=32 と y=64 の位置から始まる 16x16 ピクセルの範囲のスプライト画像に変わります。 - -{{EmbedLiveSample("Displaying_a_section_of_the_background_image", "100%", 100)}} - -

    背景画像の上に色を配置

    - -```css hidden -.quarterlogo {height: 200px; width: 200px; border: 1px solid;} -``` - -```css -.quarterlogo { - background-image: - image(rgba(0, 0, 0, 0.25)), - url("firefox.png"); - background-size: 25%; - background-repeat: no-repeat; -} -``` - -```html - -``` - -上記の例は、 Firefox のロゴの背景画像に半透明の黒いマスクをかぶせています。 {{cssxref("background-color")}} プロパティを使用していた場合は、色はロゴ画像の上ではなく背後に表示されていたでしょう。また、コンテナー全体の背景色も同じになっていたでしょう。 `image()` と {{CSSxRef("background-size")}} プロパティを使用し、 {{CSSxRef("background-repeat")}} プロパティで画像が繰り返されないようにしたため、色見本はコンテナーの 4 分の 1 しか覆っていません。 - -{{EmbedLiveSample("Putting_color_on_top_of_a_background_image", "100%", 220)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{CSSxRef("<image>")}} -- {{CSSxRef("element()")}} -- {{CSSxRef("url()")}} -- {{CSSxRef("clip-path")}} -- {{CSSxRef("-moz-image-rect")}} -- {{CSSxRef("<gradient>")}} -- {{CSSxRef("image/image-set()")}} -- {{CSSxRef("cross-fade()")}} diff --git a/files/ja/web/css/image/image-set()/index.md b/files/ja/web/css/image/image-set()/index.md deleted file mode 100644 index 8fbb72453c..0000000000 --- a/files/ja/web/css/image/image-set()/index.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: image-set() -slug: Web/CSS/image/image-set() -tags: - - CSS - - CSS Function - - CSS-4 Images - - Function - - Reference - - Web -browser-compat: css.types.image.image-set -translation_of: Web/CSS/image/image-set() -original_slug: Web/CSS/image-set() ---- -{{cssref}} - -**`image-set()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)表記で、主に高解像度の画面において、指定されたセットから最も適切な CSS 画像をブラウザーに選択させる方法です。 - -解像度と帯域は端末やネットワークアクセスによって様々です。 `image-set()` 関数は、画像オプションのセットを提供して — それぞれが解像度の宣言に関連付けられ — ブラウザーが端末および設定にもっともふさわしいものを選択することで、ユーザーの端末にもっとも適切な解像度の画像を配信します。解像度はファイルサイズのプロキシーとして使用することができます。 — 高解像度の画面で遅いモバイル接続を使用しているユーザーエージェントは、高解像度の画面の読み込みを待つよりも、低解像度の画像を受信したほうが良いかもしれません。 - -`image-set()` はそれぞれのユーザーが必要なことを判断するのではなく、オプションを提供することができます。 - -## 構文 - -```css -image-set() = image-set( # ) -where = [ | ] and - is an -``` - -### 値 - -- `` - - : [``](/ja/docs/Web/CSS/image) は画像セット以外のあらゆる画像を指定できます。 `image-set()` 関数は他の `image-set()` 関数の中に入れ子にすることはできません。 -- `` - - : 画像への `url()` です。 -- ``{{optional_inline}} - - : [``](/ja/docs/Web/CSS/resolution) の単位には、 `x` や `dppx` (dots per pixel 単位)、dpi (dots per inch)、dpcm (dots per centimeter) があります。 `image-set()` 内の画像すべて、解像度が固有でなければなりません。 -- `type()`{{optional_inline}} - - : 有効な MIME タイプの文字列、例えば "image/jpeg" です。 - -## 例 - -### image-set() を使用して代替の background-image オプションの提供 - -この例は [`image-set()`](https://drafts.csswg.org/css-images-4/#funcdef-image-set) を使用して 2 つの代替 {{cssxref("background-image")}} オプションを提供する方法を示しています。解像度の必要性に応じて、通常版と高解像度版から選択します。 - -{{EmbedGHLiveSample("css-examples/images/image-set.html", '100%', 600)}} - -> **Note:** 上記の例では、 `-webkit` の接頭辞が付いた版を Chrome および Safari に対応させるために併用しています。 Firefox 90 では (標準のプロパティを追加していない開発者の互換性を確保するために) `-webkit-image-set()` を `image-set()` の別名として使用する対応が追加されました。 - -### image-set() を使用して別な画像形式を提供 - -次の例では `type()` 関数を使用して画像を AVIF および JPEG 形式で提供しています。ブラウザーが avif に対応している場合は、このバージョンが選択されます。それ以外の場合は jpeg バージョンを使用します。 - -{{EmbedGHLiveSample("css-examples/images/image-set-type.html", '100%', 600)}} - -#### 代替画像の提供 - -`image-set()` には内蔵のフォールバックはありません。したがって、この関数に対応していないブラウザーのための背景画像を設定するには、 `image-set()` を使用する行の前に別の宣言が必要です。 - -```css -.box { - background-image: url("large-balloons.jpg"); - background-image: image-set( - url("large-balloons.avif") type("image/avif"), - url("large-balloons.jpg") type("image/jpeg")); -} -``` - -## アクセシビリティの考慮 - -

    ブラウザーは支援技術に対して、背景画像についての特別な情報を何も提供しません。これは主に読み上げソフトにとって重要であり、読み上げソフトは背景画像が存在することをアナウンスせず、したがってユーザーには何も伝えられません。もし画像がページ全体の目的を理解するのに重要な情報を含んでいる場合は、文書中に意味的に記述するようにしてください。

    - -- [MDN WCAG を理解する, ガイドライン 1.1 の解説](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) -- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("image")}} -- {{cssxref("image/image()", "image()")}} -- {{cssxref("element()")}} -- {{cssxref("url()")}} -- {{cssxref("<gradient>")}} -- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/image/image-set/index.md b/files/ja/web/css/image/image-set/index.md new file mode 100644 index 0000000000..309c6c1fdd --- /dev/null +++ b/files/ja/web/css/image/image-set/index.md @@ -0,0 +1,93 @@ +--- +title: image-set() +slug: Web/CSS/image/image-set +tags: + - CSS + - CSS Function + - CSS-4 Images + - Function + - Reference + - Web +translation_of: Web/CSS/image/image-set() +original_slug: Web/CSS/image/image-set() +browser-compat: css.types.image.image-set +--- +{{cssref}} + +**`image-set()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)表記で、主に高解像度の画面において、指定されたセットから最も適切な CSS 画像をブラウザーに選択させる方法です。 + +解像度と帯域は端末やネットワークアクセスによって様々です。 `image-set()` 関数は、画像オプションのセットを提供して — それぞれが解像度の宣言に関連付けられ — ブラウザーが端末および設定にもっともふさわしいものを選択することで、ユーザーの端末にもっとも適切な解像度の画像を配信します。解像度はファイルサイズのプロキシーとして使用することができます。 — 高解像度の画面で遅いモバイル接続を使用しているユーザーエージェントは、高解像度の画面の読み込みを待つよりも、低解像度の画像を受信したほうが良いかもしれません。 + +`image-set()` はそれぞれのユーザーが必要なことを判断するのではなく、オプションを提供することができます。 + +## 構文 + +```css +image-set() = image-set( # ) +where = [ | ] and + is an +``` + +### 値 + +- `` + - : [``](/ja/docs/Web/CSS/image) は画像セット以外のあらゆる画像を指定できます。 `image-set()` 関数は他の `image-set()` 関数の中に入れ子にすることはできません。 +- `` + - : 画像への `url()` です。 +- ``{{optional_inline}} + - : [``](/ja/docs/Web/CSS/resolution) の単位には、 `x` や `dppx` (dots per pixel 単位)、dpi (dots per inch)、dpcm (dots per centimeter) があります。 `image-set()` 内の画像すべて、解像度が固有でなければなりません。 +- `type()`{{optional_inline}} + - : 有効な MIME タイプの文字列、例えば "image/jpeg" です。 + +## 例 + +### image-set() を使用して代替の background-image オプションの提供 + +この例は [`image-set()`](https://drafts.csswg.org/css-images-4/#funcdef-image-set) を使用して 2 つの代替 {{cssxref("background-image")}} オプションを提供する方法を示しています。解像度の必要性に応じて、通常版と高解像度版から選択します。 + +{{EmbedGHLiveSample("css-examples/images/image-set.html", '100%', 600)}} + +> **Note:** 上記の例では、 `-webkit` の接頭辞が付いた版を Chrome および Safari に対応させるために併用しています。 Firefox 90 では (標準のプロパティを追加していない開発者の互換性を確保するために) `-webkit-image-set()` を `image-set()` の別名として使用する対応が追加されました。 + +### image-set() を使用して別な画像形式を提供 + +次の例では `type()` 関数を使用して画像を AVIF および JPEG 形式で提供しています。ブラウザーが avif に対応している場合は、このバージョンが選択されます。それ以外の場合は jpeg バージョンを使用します。 + +{{EmbedGHLiveSample("css-examples/images/image-set-type.html", '100%', 600)}} + +#### 代替画像の提供 + +`image-set()` には内蔵のフォールバックはありません。したがって、この関数に対応していないブラウザーのための背景画像を設定するには、 `image-set()` を使用する行の前に別の宣言が必要です。 + +```css +.box { + background-image: url("large-balloons.jpg"); + background-image: image-set( + url("large-balloons.avif") type("image/avif"), + url("large-balloons.jpg") type("image/jpeg")); +} +``` + +## アクセシビリティの考慮 + +

    ブラウザーは支援技術に対して、背景画像についての特別な情報を何も提供しません。これは主に読み上げソフトにとって重要であり、読み上げソフトは背景画像が存在することをアナウンスせず、したがってユーザーには何も伝えられません。もし画像がページ全体の目的を理解するのに重要な情報を含んでいる場合は、文書中に意味的に記述するようにしてください。

    + +- [MDN WCAG を理解する, ガイドライン 1.1 の解説](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) +- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("image")}} +- {{cssxref("image/image()", "image()")}} +- {{cssxref("element()")}} +- {{cssxref("url()")}} +- {{cssxref("<gradient>")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/image/image/index.md b/files/ja/web/css/image/image/index.md new file mode 100644 index 0000000000..4f4482fc6e --- /dev/null +++ b/files/ja/web/css/image/image/index.md @@ -0,0 +1,155 @@ +--- +title: image() +slug: Web/CSS/image/image +tags: + - CSS + - CSS 関数 + - CSS 画像 + - 関数 + - Reference + - ウェブ +translation_of: Web/CSS/image/image() +original_slug: Web/CSS/image/image() +browser-compat: css.types.image.image +--- +{{CSSRef}} + +**`image()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 {{CSSxRef("<image>")}} を {{CSSxRef("url()")}} 関数と同様の様式で定義しますが、画像の書字方向を指定したり、メディアフラグメントで定義された画像の一部だけを表示したり、指定された画像がどれも描画できなかった場合の予備として単色を指定するなどの機能が追加されています。 + +> **Note:** CSS の `image()` 関数を {{DOMxRef("HTMLImageElement/Image", '`HTMLImageElement` のコンストラクターである `Image()`', '', 1)}} と混同しないでください。 + +## 構文 + +{{CSSSyntax("image()")}} + +ここで + +- `image-tags`{{Optional_Inline}} + - : 画像の書字方向、左書きならば `ltr`、右書きならば `rtl` です。 +- `image-src` {{Optional_Inline}} + - : 0 個以上の {{CSSxRef("url()")}} または {{CSSxRef("<string>")}} で、画像のソースをオプションの画像フラグメント識別子と共に指定します。 +- `color`{{Optional_Inline}} + - : 色であり、 `image-src` が見つからなかったり、対応していなかったり、宣言されていなかったりした場合の代替として使用される単色の背景色を指定します。 + +### 書字方向の認識 + +`image()` 表記の最初のオプション引数は、画像の書字方向です。この引数が含まれている場合、画像が反対の書字方向を持つ要素で使用されると、横書きモードでは画像が水平に反転します。書字方向を省略した場合は、言語の方向が変わっても画像は反転しません。 + +### 画像フラグメント + +`url()` と `image()` の大きな違いは、メディアフラグメント識別子 (開始点の x 軸と y 軸、幅と高さ) を画像ソースに追加することで、ソース画像の一部分のみを表示することができることです。引数で定義された画像の範囲は、独立した画像になります。構文は次のようになります。 + +```css +background-image: image('myimage.webp#xywh=0,20,40,60'); +``` + +要素の背景画像は、画像 _myImage.webp_ のうち、 0px, 20px の座標 (左上隅) から始まり、幅 40px、高さ 60px の部分になります。 + + +`#xywh=#,#,#,#` というメディアフラグメントの構文は、カンマで区切られた 4 つの数値を取ります。最初の 2 つの値は、作成されるボックスの始点の X および Y 座標を表します。 3 つ目の値はボックスの幅、最後の値は高さです。既定では、これらはピクセル値です。[メディア仕様書の spacial dimension definition](https://www.w3.org/TR/media-frags/#naming-space) によると、パーセント値にも対応しています。 + +```css +xywh=160,120,320,240 /* results in a 320x240 image at x=160 and y=120 */ +xywh=pixel:160,120,320,240 /* results in a 320x240 image at x=160 and y=120 */ +xywh=percent:25,25,50,50 /* results in a 50%x50% image at x=25% and y=25% */ +``` + +イメージフラグメントは、 `url()` 記法でも使用できます。 `#xywh=#,#,#,#` というメディアフラグメントの構文は「後方互換」であり、メディアフラグメントが理解できない場合は無視され、 `url()` で使用してもソースの呼び出しが壊れることはありません。ブラウザーがメディアフラグメントの表記を理解していない場合、フラグメントを無視して画像全体を表示します。 + +`image()` を理解できるブラウザーはフラグメント表記も理解できます。したがって、フラグメントが `image()` の中で理解できない場合は、その画像は無効とみなされます。 + +### 色による代替 + +`image()` で画像ソースと一緒に色が指定されていると、画像が無効で表示されない場合の代替として機能します。このような場合、`image()` 関数は、画像が含まれていないかのように描画を行い、単一色の画像を生成します。例として、白いテキストの背景に暗い色の画像を使用する場合を考えてみましょう。画像が描画されない場合、前景のテキストを読みやすくするために暗い背景色が必要になることがあります。 + +画像ソースを省略して色を含めることは有効で、色見本を作成します。背景色を宣言すると、すべての背景画像の下や後ろに配置されるのとは異なり、これは他の画像の上に (通常は半透明の) 色を配置するために使用できます。 + +色見本の寸法は、 {{CSSxRef("background-size")}} プロパティで設定できます。これは、要素全体を覆うように色を設定する `background-color` とは異なります。 `image(color)` と `background-color` の両方を配置すると、 {{CSSxRef("background-clip")}} と {{CSSxRef("background-origin")}} プロパティの影響を受けます。 + +## アクセシビリティの考慮 + +ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に画面リーダーにとって重要なことで、画面リーダーはその存在を告知しないため、ユーザーに何も伝えません。画像に、ページ全体の目的を理解するために重要な情報が含まれている場合は、文書内で意味的に記述したほうがよいでしょう。 + +- [MDN WCAG を理解する, ガイドライン 1.1 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) +- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +この機能は、画像の読み込みに失敗したときに予備の色を提供することで、アクセシビリティの向上に役立ちます。この機能は、すべての背景画像に背景色を含めることで実現できますが、 CSS の `image()` 関数では、画像の読み込みに失敗したときに背景色のみを含めることができます。つまり、透過 PNG/GIF/WebP の読み込みに失敗したときに、予備の色を追加することができます。 + +## 例 + +

    書字方向を意識した画像

    + +```html +
  • 行頭記号が左側で右向きの矢印になります。
    • +
  • 行頭記号は同じ矢印で、左を指します。
    • + +``` + +```css +ul { + list-style-image: image(ltr 'rightarrow.png'); +} +``` + +左書きのリスト項目 (要素自体に `dir="ltr"` が設定されているもの、祖先から書字方向を継承しているもの、ページの既定値) では、画像がそのまま使用されます。 `
  • ` に `dir="rtl"` が設定されているリスト項目や、祖先から右から左への指向性を受け継いでいるリスト項目 (アラビア語やヘブライ語に設定されている文書など) では、 `transform: scalex(-1)` が設定されているかのように、箇条書きのテキストが水平方向に反転して右に表示されます。テキストも左書きで表示されます。 + +{{EmbedLiveSample("Directionally-sensitive_images", "100%", 200)}} + +

    背景画像のある範囲の表示

    + +```html +
    この上にカーソルを移動してください。どのように見えますか？
    +``` + +```css +.box:hover { + cursor: image("sprite.png#xywh=32,64,16,16"); +} +``` + +ユーザーがボックスの上にカーソルを移動させると、カーソルは x=32 と y=64 の位置から始まる 16x16 ピクセルの範囲のスプライト画像に変わります。 + +{{EmbedLiveSample("Displaying_a_section_of_the_background_image", "100%", 100)}} + +

    背景画像の上に色を配置

    + +```css hidden +.quarterlogo {height: 200px; width: 200px; border: 1px solid;} +``` + +```css +.quarterlogo { + background-image: + image(rgba(0, 0, 0, 0.25)), + url("firefox.png"); + background-size: 25%; + background-repeat: no-repeat; +} +``` + +```html + +``` + +上記の例は、 Firefox のロゴの背景画像に半透明の黒いマスクをかぶせています。 {{cssxref("background-color")}} プロパティを使用していた場合は、色はロゴ画像の上ではなく背後に表示されていたでしょう。また、コンテナー全体の背景色も同じになっていたでしょう。 `image()` と {{CSSxRef("background-size")}} プロパティを使用し、 {{CSSxRef("background-repeat")}} プロパティで画像が繰り返されないようにしたため、色見本はコンテナーの 4 分の 1 しか覆っていません。 + +{{EmbedLiveSample("Putting_color_on_top_of_a_background_image", "100%", 220)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{CSSxRef("<image>")}} +- {{CSSxRef("element()")}} +- {{CSSxRef("url()")}} +- {{CSSxRef("clip-path")}} +- {{CSSxRef("-moz-image-rect")}} +- {{CSSxRef("<gradient>")}} +- {{CSSxRef("image/image-set()")}} +- {{CSSxRef("cross-fade()")}} diff --git a/files/ja/web/css/image/paint()/index.md b/files/ja/web/css/image/paint()/index.md deleted file mode 100644 index b6b033151b..0000000000 --- a/files/ja/web/css/image/paint()/index.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: paint() -slug: Web/CSS/image/paint() -tags: - - CSS - - CSS 関数 - - CSS4-images - - 関数 - - Houdini - - リファレンス - - ウェブ -browser-compat: css.types.image.paint -translation_of: Web/CSS/image/paint() -original_slug: Web/CSS/paint() ---- -{{CSSRef}}{{SeeCompatTable}} - -**`paint()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 PaintWorklet で生成された {{cssxref("<image>")}} の値を定義します。 - -## 構文 - -```css -paint(workletName, parameters) -``` - -凡例 - -- _workletName_ - - : 登録された Worklet の名前です。 -- _parameters_ - - : PaintWorklet へ渡される省略可能な追加の引数です。 - -## 例 - -### 基本的な使用例 - -CSS の paint() 関数で追加の引数を渡すことができます。この例では、 2 つの引数を渡しています。リストアイテムのグループの背景画像が塗りつぶしか輪郭線だけかと、輪郭線の太さです。 - -```html hidden -
      -    
    • item 1
      • -    
    • item 2
      • -    
    • item 3
      • -    
    • item 4
      • -    
    • item 5
      • -    
    • item 6
      • -    
    • item 7
      • -    
    • item 8
      • -    
    • item 9
      • -    
    • item 10
      • -    
    • item 11
      • -    
    • item 12
      • -    
    • item 13
      • -    
    • item 14
      • -    
    • item 15
      • -    
    • item 16
      • -    
    • item 17
      • -    
    • item 18
      • -    
    • item 19
      • -    
    • item 20
      • -
    -``` - -```js hidden - CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js'); -``` - -```css -li { - --boxColor: hsla(55, 90%, 60%, 1.0); - background-image: paint(hollowHighlights, stroke, 2px); -} - -li:nth-of-type(3n) { - --boxColor: hsla(155, 90%, 60%, 1.0); - background-image: paint(hollowHighlights, filled, 3px); -} - -li:nth-of-type(3n+1) { - --boxColor: hsla(255, 90%, 60%, 1.0); - background-image: paint(hollowHighlights, stroke, 1px); -} -``` - -boxColor を定義しているセレクターブロックにカスタムプロパティを設定しました。カスタムプロパティは PaintWorklet にアクセスすることができます。 - -{{EmbedLiveSample("Examples", 300, 300)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{domxref('PaintWorklet')}} -- {{domxref('CSS Painting API')}} -- [CSS Painting API の使用](/ja/docs/Web/API/CSS_Painting_API/Guide) -- {{cssxref("<image>")}} -- {{domxref("canvas")}} diff --git a/files/ja/web/css/image/paint/index.md b/files/ja/web/css/image/paint/index.md new file mode 100644 index 0000000000..0f304f82bc --- /dev/null +++ b/files/ja/web/css/image/paint/index.md @@ -0,0 +1,103 @@ +--- +title: paint() +slug: Web/CSS/image/paint +tags: + - CSS + - CSS 関数 + - CSS4-images + - 関数 + - Houdini + - リファレンス + - ウェブ +translation_of: Web/CSS/image/paint() +original_slug: Web/CSS/image/paint() +browser-compat: css.types.image.paint +--- +{{CSSRef}}{{SeeCompatTable}} + +**`paint()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 PaintWorklet で生成された {{cssxref("<image>")}} の値を定義します。 + +## 構文 + +```css +paint(workletName, parameters) +``` + +凡例 + +- _workletName_ + - : 登録された Worklet の名前です。 +- _parameters_ + - : PaintWorklet へ渡される省略可能な追加の引数です。 + +## 例 + +### 基本的な使用例 + +CSS の paint() 関数で追加の引数を渡すことができます。この例では、 2 つの引数を渡しています。リストアイテムのグループの背景画像が塗りつぶしか輪郭線だけかと、輪郭線の太さです。 + +```html hidden +
      +    
    • item 1
      • +    
    • item 2
      • +    
    • item 3
      • +    
    • item 4
      • +    
    • item 5
      • +    
    • item 6
      • +    
    • item 7
      • +    
    • item 8
      • +    
    • item 9
      • +    
    • item 10
      • +    
    • item 11
      • +    
    • item 12
      • +    
    • item 13
      • +    
    • item 14
      • +    
    • item 15
      • +    
    • item 16
      • +    
    • item 17
      • +    
    • item 18
      • +    
    • item 19
      • +    
    • item 20
      • +
    +``` + +```js hidden + CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js'); +``` + +```css +li { + --boxColor: hsla(55, 90%, 60%, 1.0); + background-image: paint(hollowHighlights, stroke, 2px); +} + +li:nth-of-type(3n) { + --boxColor: hsla(155, 90%, 60%, 1.0); + background-image: paint(hollowHighlights, filled, 3px); +} + +li:nth-of-type(3n+1) { + --boxColor: hsla(255, 90%, 60%, 1.0); + background-image: paint(hollowHighlights, stroke, 1px); +} +``` + +boxColor を定義しているセレクターブロックにカスタムプロパティを設定しました。カスタムプロパティは PaintWorklet にアクセスすることができます。 + +{{EmbedLiveSample("Examples", 300, 300)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref('PaintWorklet')}} +- {{domxref('CSS Painting API')}} +- [CSS Painting API の使用](/ja/docs/Web/API/CSS_Painting_API/Guide) +- {{cssxref("<image>")}} +- {{domxref("canvas")}} diff --git a/files/ja/web/css/max()/index.md b/files/ja/web/css/max()/index.md deleted file mode 100644 index 1d5a961416..0000000000 --- a/files/ja/web/css/max()/index.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: max() -slug: Web/CSS/max() -tags: - - CSS - - CSS 関数 - - Calculate - - Compute - - 関数 - - レイアウト - - リファレンス - - ウェブ - - max -browser-compat: css.types.max -translation_of: Web/CSS/max() ---- -{{CSSRef}} - -**`max()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 CSS プロパティの値としてカンマで区切られた式のリストから最大の (最も正である) 値を設定できます。 `max()` 関数は {{CSSxRef("<length>")}}、{{CSSxRef("<frequency>")}}、{{CSSxRef("<angle>")}}、{{CSSxRef("<time>")}}、{{CSSxRef("<percentage>")}}、{{CSSxRef("<number>")}}、{{CSSxRef("<integer>")}} が使用できるところならばどこでも使用することができます。 - -{{EmbedInteractiveExample("pages/css/function-max.html")}} - -上の例では、幅が 400px 以上になりますが、ビューポートが 2000px よりも広い場合 (1vw が 20px になるため、 20vw が 400px になる場合) はより広くなります。 `max()` の値はプロパティが取りうる最小の値を提供するものとして考えてください。 - -## 構文 - -`max()` 関数は、引数としてカンマで区切った 1 つ以上の式を取り、もっとも大きい (最も正である) 式の値をプロパティに割り当てられた値として使用します。 - -式は、 (算術演算子を用いた) 数式、リテラル値、あるいは、有効な引数の型 ({{CSSxRef("<length>")}} など) に評価される {{CSSxRef("attr()", "attr()")}} などの式や、ネストされた {{CSSxRef("min()", "min()")}} や `max()` 関数を用いることができます。 - -式の各値に異なる単位を使用することができます。必要に応じて、計算順序を決めるために括弧を使用することもできます。 - -## メモ - -- 表の列、列グループ、行、行グループ、セルの幅と高さのパーセント値を含む数式は、自動レイアウト表と固定レイアウト表のどちらでも、あたかも `auto` が指定されていたかのように扱われる*可能性があります*。 -- `min()` や他の `max()` 関数を式の値として入れ子にすることが認められています。式は完全な数式なので、 `calc()` 関数自体を使わずに直接加算、減算、乗算、除算を使うことができます。 -- 式は、標準的な演算子の優先順位規則を使用して、加算 ( + )、減算 ( - )、乗算 ( * )、除算 ( / ) の各演算子を組み合わせた値にすることができます。オペランドの + と - の両側には必ず空白を入れてください。式の中のオペランドは、任意の `` 構文値を使用できます。 -- `min()` と `max()` の値を組み合わせたり、 `max()` を `clamp()` や `calc()` 関数の中で使用したりすることができます (そしてよく必要になります)。 - -### 形式文法 - -{{CSSSyntax}} - -## 例 - -

    フォントに最小値を設定する

    - -CSS 関数のもう一つの使用例は、少なくとも最小サイズを確保しながらフォントサイズを拡大していくことで、読みやすさを確保しながらレスポンシブなフォントサイズを可能にします。 - -多少の CSS を見てみましょう。 - -```css -h1 { - font-size: 2rem; -} -h1.responsive { - font-size: max(4vw, 2em, 2rem); -} -``` - -フォントサイズは最小で 2rem、ページの既定のフォントサイズの 2 倍になります。これは、それが読みやすく、アクセシビリティを確保することを保証します。 - -```html -

    このテキストは常に読みやすいですが、サイズは変わりません。

    -

    このテキストは、常に読みやすく、ある意味でレスポンシブです。

    -``` - -{{EmbedLiveSample("Setting_a_minimum_size_for_a_font", "100%", "300")}} - -`max()` 関数はプロパティに許される最小値を探るものと考えてください。 - -

    アクセシビリティの考慮

    - -`max()` を使用してテキストのサイズを制御する場合は、テキストが常に十分に読める大きさであることを確認してください。提案としては、 {{CSSxRef("min()", "min()")}} 関数を `max()` の中で入れ子にして使用し、その二番目の値として常に十分な大きさの[相対的な長さの単位](/ja/docs/Web/CSS/length#相対的な長さの単位)を持つようにします。 - -```css -small { - font-size: max(min(0.5vw, 0.5em), 1rem); -} -``` - -これにより、ページが拡大縮小されたときにテキストの大きさが拡大縮小され、最小サイズは _1rem_ になります。 - -- [MDN Understanding WCAG, Guideline 1.4 explanations](/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) - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{CSSxRef("calc()", "calc()")}} -- {{CSSxRef("clamp()", "clamp()")}} -- {{CSSxRef("min()", "min()")}} -- [CSS 値](/ja/docs/Learn/CSS/Building_blocks/Values_and_units) diff --git a/files/ja/web/css/max/index.md b/files/ja/web/css/max/index.md new file mode 100644 index 0000000000..5c4b31c597 --- /dev/null +++ b/files/ja/web/css/max/index.md @@ -0,0 +1,101 @@ +--- +title: max() +slug: Web/CSS/max +tags: + - CSS + - CSS 関数 + - Calculate + - Compute + - 関数 + - レイアウト + - リファレンス + - ウェブ + - max +translation_of: Web/CSS/max() +original_slug: Web/CSS/max() +browser-compat: css.types.max +--- +{{CSSRef}} + +**`max()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 CSS プロパティの値としてカンマで区切られた式のリストから最大の (最も正である) 値を設定できます。 `max()` 関数は {{CSSxRef("<length>")}}、{{CSSxRef("<frequency>")}}、{{CSSxRef("<angle>")}}、{{CSSxRef("<time>")}}、{{CSSxRef("<percentage>")}}、{{CSSxRef("<number>")}}、{{CSSxRef("<integer>")}} が使用できるところならばどこでも使用することができます。 + +{{EmbedInteractiveExample("pages/css/function-max.html")}} + +上の例では、幅が 400px 以上になりますが、ビューポートが 2000px よりも広い場合 (1vw が 20px になるため、 20vw が 400px になる場合) はより広くなります。 `max()` の値はプロパティが取りうる最小の値を提供するものとして考えてください。 + +## 構文 + +`max()` 関数は、引数としてカンマで区切った 1 つ以上の式を取り、もっとも大きい (最も正である) 式の値をプロパティに割り当てられた値として使用します。 + +式は、 (算術演算子を用いた) 数式、リテラル値、あるいは、有効な引数の型 ({{CSSxRef("<length>")}} など) に評価される {{CSSxRef("attr()", "attr()")}} などの式や、ネストされた {{CSSxRef("min()", "min()")}} や `max()` 関数を用いることができます。 + +式の各値に異なる単位を使用することができます。必要に応じて、計算順序を決めるために括弧を使用することもできます。 + +## メモ + +- 表の列、列グループ、行、行グループ、セルの幅と高さのパーセント値を含む数式は、自動レイアウト表と固定レイアウト表のどちらでも、あたかも `auto` が指定されていたかのように扱われる*可能性があります*。 +- `min()` や他の `max()` 関数を式の値として入れ子にすることが認められています。式は完全な数式なので、 `calc()` 関数自体を使わずに直接加算、減算、乗算、除算を使うことができます。 +- 式は、標準的な演算子の優先順位規則を使用して、加算 ( + )、減算 ( - )、乗算 ( * )、除算 ( / ) の各演算子を組み合わせた値にすることができます。オペランドの + と - の両側には必ず空白を入れてください。式の中のオペランドは、任意の `` 構文値を使用できます。 +- `min()` と `max()` の値を組み合わせたり、 `max()` を `clamp()` や `calc()` 関数の中で使用したりすることができます (そしてよく必要になります)。 + +### 形式文法 + +{{CSSSyntax}} + +## 例 + +

    フォントに最小値を設定する

    + +CSS 関数のもう一つの使用例は、少なくとも最小サイズを確保しながらフォントサイズを拡大していくことで、読みやすさを確保しながらレスポンシブなフォントサイズを可能にします。 + +多少の CSS を見てみましょう。 + +```css +h1 { + font-size: 2rem; +} +h1.responsive { + font-size: max(4vw, 2em, 2rem); +} +``` + +フォントサイズは最小で 2rem、ページの既定のフォントサイズの 2 倍になります。これは、それが読みやすく、アクセシビリティを確保することを保証します。 + +```html +

    このテキストは常に読みやすいですが、サイズは変わりません。

    +

    このテキストは、常に読みやすく、ある意味でレスポンシブです。

    +``` + +{{EmbedLiveSample("Setting_a_minimum_size_for_a_font", "100%", "300")}} + +`max()` 関数はプロパティに許される最小値を探るものと考えてください。 + +

    アクセシビリティの考慮

    + +`max()` を使用してテキストのサイズを制御する場合は、テキストが常に十分に読める大きさであることを確認してください。提案としては、 {{CSSxRef("min()", "min()")}} 関数を `max()` の中で入れ子にして使用し、その二番目の値として常に十分な大きさの[相対的な長さの単位](/ja/docs/Web/CSS/length#相対的な長さの単位)を持つようにします。 + +```css +small { + font-size: max(min(0.5vw, 0.5em), 1rem); +} +``` + +これにより、ページが拡大縮小されたときにテキストの大きさが拡大縮小され、最小サイズは _1rem_ になります。 + +- [MDN Understanding WCAG, Guideline 1.4 explanations](/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) + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{CSSxRef("calc()", "calc()")}} +- {{CSSxRef("clamp()", "clamp()")}} +- {{CSSxRef("min()", "min()")}} +- [CSS 値](/ja/docs/Learn/CSS/Building_blocks/Values_and_units) diff --git a/files/ja/web/css/min()/index.md b/files/ja/web/css/min()/index.md deleted file mode 100644 index 94f0d57623..0000000000 --- a/files/ja/web/css/min()/index.md +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: min() -slug: Web/CSS/min() -tags: - - CSS - - CSS 関数 - - Calculate - - Compute - - 関数 - - レイアウト - - リファレンス - - min -browser-compat: css.types.min -translation_of: Web/CSS/min() ---- -{{CSSRef}} - -**`min()`** は [CSS](/ja/docs/Web/CSS) 関数で、 CSS プロパティの値としてカンマで区切られた式のリストから最小の (最も負である) 値を設定できます。 `min()` 関数は {{CSSxRef("<length>")}}、{{CSSxRef("<frequency>")}},、{{CSSxRef("<angle>")}}、{{CSSxRef("<time>")}}、{{CSSxRef("<percentage>")}}、{{CSSxRef("<number>")}}、{{CSSxRef("<integer>")}} が利用できるところならばどこでも使用することができます。 - -{{EmbedInteractiveExample("pages/css/function-min.html")}} - -上の例では、幅は最大 80px ですが、ビューポートの幅が 800px 未満または em の幅が 20px 未満の場合は狭くなります。言い換えれば、最大幅は 80px です。 `min()` の値はプロパティが取りうる*最大の*値を提供するものとして考えてください。 - -## 構文 - -`min()` 関数は、引数としてカンマで区切った 1 つ以上の式を取り、もっとも小さい (最も負である) 式の値の結果を値として使用します。 - -式は ({{CSSxRef("<length>")}} などの) 有効な引数の型として評価される、 (算術演算子を使用した) 数式、リテラル値、 {{CSSxRef("attr()")}} などのその他の式にすることができます。 - -必要に応じて、式の各値に異なる単位を使用することができます。必要に応じて、計算順序を決めるために括弧を使用することもできます。 - -### メモ - -- 表の列、列グループ、行、行グループ、セルの幅と高さのパーセント値を含む数式は、自動レイアウト表と固定レイアウト表のどちらでも、あたかも `auto` が指定されていたかのように扱われる可能性があります。 -- `max()` や他の `min()` 関数を式の値として入れ子にすることが認められています。式は完全な数式なので、 `calc()` 関数自体を使わずに直接加算、減算、乗算、除算を使うことができます。 -- 式は、標準的な演算子の優先順位規則を使用して、加算 ( + )、減算 ( - )、乗算 ( * )、除算 ( / ) の各演算子を組み合わせた値にすることができます。オペランドの + と - の両側には必ず空白を入れてください。式の中のオペランドは、任意の `` 構文値を使用できます。 -- `min()` と `max()` の値を組み合わせたり、 `min()` を `clamp()` や `calc()` 関数の中で使用したりすることができます (そしてよく必要になります)。 -- 複数の制約を適用する場合は、3 つ以上の引数を与えることができます。 - -### 形式文法 - -{{CSSSyntax}} - -## アクセシビリティの考慮 - -`min()` を使用して最大フォントサイズを設定する場合、読めるようにするためにフォントが少なくとも 200% まで拡大できるようにしてください (ズーム機能などの支援技術なしで)。 - -- [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) - -## 例 - -

    ラベルと入力欄のために最大値を設定する

    - -CSS 関数のもう一つの使用例は、レスポンシブなフォームコントロールに最大サイズを設定します。ラベルと入力欄の幅をフォームの幅の縮小に合わせて縮小できるようにします。 - -いくらか CSS を見てください。 - -```css -input, label { - padding: 2px; - box-sizing: border-box; - display: inline-block; - width: min(40%, 400px); - background-color: pink; -} - -form { - margin: 4px; - border: 1px solid black; - padding: 4px; -} -``` - -ここでは、フォーム自体は、マージン、境界、パディングを含めて、親の幅の 100% になります。入力欄とラベルは、フォームのパディングまでの幅の 40% または幅 400px のどちらか小さい方になるように宣言します。言い換えれば、ラベルと入力欄の幅の最大値は 400px です。最も狭くなるのはフォームの幅の 40% であり、スマートウォッチの画面では非常に小さくなります。 - -```html -
    - - -
    -``` - -{{EmbedLiveSample("Setting_a_maximum_size_for_a_label_and_input", "100%", "110")}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{CSSxRef("calc()")}} -- {{CSSxRef("clamp()")}} -- {{CSSxRef("max()")}} -- [CSS 値](/ja/docs/Learn/CSS/Building_blocks/Values_and_units) diff --git a/files/ja/web/css/min/index.md b/files/ja/web/css/min/index.md new file mode 100644 index 0000000000..ee7f91923b --- /dev/null +++ b/files/ja/web/css/min/index.md @@ -0,0 +1,100 @@ +--- +title: min() +slug: Web/CSS/min +tags: + - CSS + - CSS 関数 + - Calculate + - Compute + - 関数 + - レイアウト + - リファレンス + - min +translation_of: Web/CSS/min() +original_slug: Web/CSS/min() +browser-compat: css.types.min +--- +{{CSSRef}} + +**`min()`** は [CSS](/ja/docs/Web/CSS) 関数で、 CSS プロパティの値としてカンマで区切られた式のリストから最小の (最も負である) 値を設定できます。 `min()` 関数は {{CSSxRef("<length>")}}、{{CSSxRef("<frequency>")}},、{{CSSxRef("<angle>")}}、{{CSSxRef("<time>")}}、{{CSSxRef("<percentage>")}}、{{CSSxRef("<number>")}}、{{CSSxRef("<integer>")}} が利用できるところならばどこでも使用することができます。 + +{{EmbedInteractiveExample("pages/css/function-min.html")}} + +上の例では、幅は最大 80px ですが、ビューポートの幅が 800px 未満または em の幅が 20px 未満の場合は狭くなります。言い換えれば、最大幅は 80px です。 `min()` の値はプロパティが取りうる*最大の*値を提供するものとして考えてください。 + +## 構文 + +`min()` 関数は、引数としてカンマで区切った 1 つ以上の式を取り、もっとも小さい (最も負である) 式の値の結果を値として使用します。 + +式は ({{CSSxRef("<length>")}} などの) 有効な引数の型として評価される、 (算術演算子を使用した) 数式、リテラル値、 {{CSSxRef("attr()")}} などのその他の式にすることができます。 + +必要に応じて、式の各値に異なる単位を使用することができます。必要に応じて、計算順序を決めるために括弧を使用することもできます。 + +### メモ + +- 表の列、列グループ、行、行グループ、セルの幅と高さのパーセント値を含む数式は、自動レイアウト表と固定レイアウト表のどちらでも、あたかも `auto` が指定されていたかのように扱われる可能性があります。 +- `max()` や他の `min()` 関数を式の値として入れ子にすることが認められています。式は完全な数式なので、 `calc()` 関数自体を使わずに直接加算、減算、乗算、除算を使うことができます。 +- 式は、標準的な演算子の優先順位規則を使用して、加算 ( + )、減算 ( - )、乗算 ( * )、除算 ( / ) の各演算子を組み合わせた値にすることができます。オペランドの + と - の両側には必ず空白を入れてください。式の中のオペランドは、任意の `` 構文値を使用できます。 +- `min()` と `max()` の値を組み合わせたり、 `min()` を `clamp()` や `calc()` 関数の中で使用したりすることができます (そしてよく必要になります)。 +- 複数の制約を適用する場合は、3 つ以上の引数を与えることができます。 + +### 形式文法 + +{{CSSSyntax}} + +## アクセシビリティの考慮 + +`min()` を使用して最大フォントサイズを設定する場合、読めるようにするためにフォントが少なくとも 200% まで拡大できるようにしてください (ズーム機能などの支援技術なしで)。 + +- [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) + +## 例 + +

    ラベルと入力欄のために最大値を設定する

    + +CSS 関数のもう一つの使用例は、レスポンシブなフォームコントロールに最大サイズを設定します。ラベルと入力欄の幅をフォームの幅の縮小に合わせて縮小できるようにします。 + +いくらか CSS を見てください。 + +```css +input, label { + padding: 2px; + box-sizing: border-box; + display: inline-block; + width: min(40%, 400px); + background-color: pink; +} + +form { + margin: 4px; + border: 1px solid black; + padding: 4px; +} +``` + +ここでは、フォーム自体は、マージン、境界、パディングを含めて、親の幅の 100% になります。入力欄とラベルは、フォームのパディングまでの幅の 40% または幅 400px のどちらか小さい方になるように宣言します。言い換えれば、ラベルと入力欄の幅の最大値は 400px です。最も狭くなるのはフォームの幅の 40% であり、スマートウォッチの画面では非常に小さくなります。 + +```html +
    + + +
    +``` + +{{EmbedLiveSample("Setting_a_maximum_size_for_a_label_and_input", "100%", "110")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{CSSxRef("calc()")}} +- {{CSSxRef("clamp()")}} +- {{CSSxRef("max()")}} +- [CSS 値](/ja/docs/Learn/CSS/Building_blocks/Values_and_units) diff --git a/files/ja/web/css/minmax()/index.md b/files/ja/web/css/minmax()/index.md deleted file mode 100644 index 6b7773ed40..0000000000 --- a/files/ja/web/css/minmax()/index.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: minmax() -slug: Web/CSS/minmax() -tags: - - CSS - - CSS 関数 - - CSS グリッド - - Experimental - - 関数 - - リファレンス - - ウェブ - - レイアウト -browser-compat: css.properties.grid-template-columns.minmax -translation_of: Web/CSS/minmax() ---- -{{CSSRef}} - -**`minmax()`** は [CSS](/ja/docs/Web/CSS) の関数で、寸法の範囲を _min_ 以上、 _max_ 以下で定義します。 [CSS グリッド](/ja/docs/Web/CSS/CSS_Grid_Layout)で使用されます。 - -{{EmbedInteractiveExample("pages/css/function-minmax.html")}} - -## 構文 - -```css -/* , 値 */ -minmax(200px, 1fr) -minmax(400px, 50%) -minmax(30%, 300px) -minmax(100px, max-content) -minmax(min-content, 400px) -minmax(max-content, auto) -minmax(auto, 300px) -minmax(min-content, auto) - -/* , 値 */ -minmax(200px, 1fr) -minmax(30%, 300px) -minmax(400px, 50%) -minmax(50%, min-content) -minmax(300px, max-content) -minmax(200px, auto) - -/* , 値 */ -minmax(400px, 50%) -minmax(30%, 300px) -minmax(min-content, 200px) -minmax(max-content, 200px) -minmax(auto, 300px) -``` - -_min_ および _max_ の 2 つの引数を取る関数です。 - -どちらの引数も ``, ``, ``, またはキーワード値 `max-content`, `min-content`, `auto` のうちの一つを取ります。 - -もし _min_ が _max_ より大きい場合は無視され、 `minmax(min,max)` は _min_ として扱われます。最大値として、 {{cssxref("flex_value","<flex>")}} 値はグリッドトラックのフレックス係数を設定します。それは _min_ としては無効です。 - -### 値 - -- {{cssxref("<length>")}} - - : 負ではない寸法。 -- {{cssxref("<percentage>")}} - - : 負ではないパーセント値で、列グリッドトラックのグリッドコンテナーのインライン寸法、および行グリッドトラックのグリッドコンテナーのブロック寸法からの相対値。グリッドコンテナーの寸法がトラックの寸法に依存する場合、 `` は `auto` として扱う必要があります。{{glossary("user agent", "ユーザーエージェント")}}は、グリッドコンテナーの寸法に対するトラックの固有の寸法の貢献度を調整し、パーセント値を尊重して最小限の量だけトラックの最終的な寸法を増加させることがあります。 -- {{cssxref("<flex>")}} - - : 単位 `fr` がついた負ではない寸法で、トラックのフレックス係数を指定します。それぞれの `<flex>` による寸法のトラックは、フレックス係数の割合に従って残りの空間を配分します。 -- `max-content` - - : グリッドトラックを占めるグリッドアイテムの max-content の貢献度の最大値を表します。 -- `min-content` - - : グリッドトラックを占めるグリッドアイテムの min-content の貢献度の最大値を表します。 -- `auto` - - : 最大値としては、 `max-content` と同じです。最小値としては、グリッドトラックを占めるグリッドアイテムの ({{cssxref("min-width")}}/{{cssxref("min-height")}} で決定する) 最大の最小値を表します。 - -

    形式文法

    - -{{csssyntax}} - -

    CSS プロパティ

    - -`minmax()` 関数は次の中で使用することができます。 - -- [grid-template-columns](/ja/docs/Web/CSS/grid-template-columns) -- [grid-template-rows](/ja/docs/Web/CSS/grid-template-rows) -- [grid-auto-columns](/ja/docs/Web/CSS/grid-auto-columns) -- [grid-auto-rows](/ja/docs/Web/CSS/grid-auto-rows) - -## 例 - -### CSS - -```css -#container { - display: grid; - grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px; - grid-gap: 5px; - box-sizing: border-box; - height: 200px; - width: 100%; - background-color: #8cffa0; - padding: 10px; -} - -#container > div { - background-color: #8ca0ff; - padding: 5px; -} -``` - -### HTML - -```html -
    -
    - Item as wide as the content, but at most 300 pixels. -
    -
    - Item with flexible width but a minimum of 200 pixels. -
    -
    - Inflexible item of 150 pixels width. -
    -
    -``` - -### 結果 - -{{EmbedLiveSample("Examples", "100%", 200)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- グリッドレイアウトガイド: [グリッドレイアウトの基本概念 - minmax() によるトラックの寸法制御](/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#トラックのサイズ指定と_minmax()) -- [CSS グリッドと論理的な値と書字方向](/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes) -- 動画チュートリアル: _[Introducing minmax()](https://gridbyexample.com/video/series-minmax/)_ diff --git a/files/ja/web/css/minmax/index.md b/files/ja/web/css/minmax/index.md new file mode 100644 index 0000000000..03733a7e1c --- /dev/null +++ b/files/ja/web/css/minmax/index.md @@ -0,0 +1,140 @@ +--- +title: minmax() +slug: Web/CSS/minmax +tags: + - CSS + - CSS 関数 + - CSS グリッド + - Experimental + - 関数 + - リファレンス + - ウェブ + - レイアウト +translation_of: Web/CSS/minmax() +original_slug: Web/CSS/minmax() +browser-compat: css.properties.grid-template-columns.minmax +--- +{{CSSRef}} + +**`minmax()`** は [CSS](/ja/docs/Web/CSS) の関数で、寸法の範囲を _min_ 以上、 _max_ 以下で定義します。 [CSS グリッド](/ja/docs/Web/CSS/CSS_Grid_Layout)で使用されます。 + +{{EmbedInteractiveExample("pages/css/function-minmax.html")}} + +## 構文 + +```css +/* , 値 */ +minmax(200px, 1fr) +minmax(400px, 50%) +minmax(30%, 300px) +minmax(100px, max-content) +minmax(min-content, 400px) +minmax(max-content, auto) +minmax(auto, 300px) +minmax(min-content, auto) + +/* , 値 */ +minmax(200px, 1fr) +minmax(30%, 300px) +minmax(400px, 50%) +minmax(50%, min-content) +minmax(300px, max-content) +minmax(200px, auto) + +/* , 値 */ +minmax(400px, 50%) +minmax(30%, 300px) +minmax(min-content, 200px) +minmax(max-content, 200px) +minmax(auto, 300px) +``` + +_min_ および _max_ の 2 つの引数を取る関数です。 + +どちらの引数も ``, ``, ``, またはキーワード値 `max-content`, `min-content`, `auto` のうちの一つを取ります。 + +もし _min_ が _max_ より大きい場合は無視され、 `minmax(min,max)` は _min_ として扱われます。最大値として、 {{cssxref("flex_value","<flex>")}} 値はグリッドトラックのフレックス係数を設定します。それは _min_ としては無効です。 + +### 値 + +- {{cssxref("<length>")}} + - : 負ではない寸法。 +- {{cssxref("<percentage>")}} + - : 負ではないパーセント値で、列グリッドトラックのグリッドコンテナーのインライン寸法、および行グリッドトラックのグリッドコンテナーのブロック寸法からの相対値。グリッドコンテナーの寸法がトラックの寸法に依存する場合、 `` は `auto` として扱う必要があります。{{glossary("user agent", "ユーザーエージェント")}}は、グリッドコンテナーの寸法に対するトラックの固有の寸法の貢献度を調整し、パーセント値を尊重して最小限の量だけトラックの最終的な寸法を増加させることがあります。 +- {{cssxref("<flex>")}} + - : 単位 `fr` がついた負ではない寸法で、トラックのフレックス係数を指定します。それぞれの `<flex>` による寸法のトラックは、フレックス係数の割合に従って残りの空間を配分します。 +- `max-content` + - : グリッドトラックを占めるグリッドアイテムの max-content の貢献度の最大値を表します。 +- `min-content` + - : グリッドトラックを占めるグリッドアイテムの min-content の貢献度の最大値を表します。 +- `auto` + - : 最大値としては、 `max-content` と同じです。最小値としては、グリッドトラックを占めるグリッドアイテムの ({{cssxref("min-width")}}/{{cssxref("min-height")}} で決定する) 最大の最小値を表します。 + +

    形式文法

    + +{{csssyntax}} + +

    CSS プロパティ

    + +`minmax()` 関数は次の中で使用することができます。 + +- [grid-template-columns](/ja/docs/Web/CSS/grid-template-columns) +- [grid-template-rows](/ja/docs/Web/CSS/grid-template-rows) +- [grid-auto-columns](/ja/docs/Web/CSS/grid-auto-columns) +- [grid-auto-rows](/ja/docs/Web/CSS/grid-auto-rows) + +## 例 + +### CSS + +```css +#container { + display: grid; + grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px; + grid-gap: 5px; + box-sizing: border-box; + height: 200px; + width: 100%; + background-color: #8cffa0; + padding: 10px; +} + +#container > div { + background-color: #8ca0ff; + padding: 5px; +} +``` + +### HTML + +```html +
    +
    + Item as wide as the content, but at most 300 pixels. +
    +
    + Item with flexible width but a minimum of 200 pixels. +
    +
    + Inflexible item of 150 pixels width. +
    +
    +``` + +### 結果 + +{{EmbedLiveSample("Examples", "100%", 200)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- グリッドレイアウトガイド: [グリッドレイアウトの基本概念 - minmax() によるトラックの寸法制御](/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#トラックのサイズ指定と_minmax()) +- [CSS グリッドと論理的な値と書字方向](/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes) +- 動画チュートリアル: _[Introducing minmax()](https://gridbyexample.com/video/series-minmax/)_ diff --git a/files/ja/web/css/repeat()/index.md b/files/ja/web/css/repeat()/index.md deleted file mode 100644 index 6fc208c093..0000000000 --- a/files/ja/web/css/repeat()/index.md +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: repeat() -slug: Web/CSS/repeat() -tags: - - CSS - - CSS 関数 - - CSS グリッド - - 関数 - - レイアウト - - リファレンス - - ウェブ -browser-compat: css.properties.grid-template-columns.repeat -translation_of: Web/CSS/repeat() ---- -{{CSSRef}} - -**`repeat()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、トラックリスト内での部分的な繰り返しを表し、列や行の繰り返しをよりコンパクトに書くことができます。 - -この関数は CSS グリッドのプロパティである {{cssxref("grid-template-columns")}} と {{cssxref("grid-template-rows")}} の中で使うことができます。 - -```css -/* 値 */ -repeat(4, 1fr) -repeat(4, [col-start] 250px [col-end]) -repeat(4, [col-start] 60% [col-end]) -repeat(4, [col-start] 1fr [col-end]) -repeat(4, [col-start] min-content [col-end]) -repeat(4, [col-start] max-content [col-end]) -repeat(4, [col-start] auto [col-end]) -repeat(4, [col-start] minmax(100px, 1fr) [col-end]) -repeat(4, [col-start] fit-content(200px) [col-end]) -repeat(4, 10px [col-start] 30% [col-middle] auto [col-end]) -repeat(4, [col-start] min-content [col-middle] max-content [col-end]) - -/* 値 */ -repeat(auto-fill, 250px) -repeat(auto-fit, 250px) -repeat(auto-fill, [col-start] 250px [col-end]) -repeat(auto-fit, [col-start] 250px [col-end]) -repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end]) -repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end]) - -/* 値 */ -repeat(4, 250px) -repeat(4, [col-start] 250px [col-end]) -repeat(4, [col-start] 60% [col-end]) -repeat(4, [col-start] minmax(100px, 1fr) [col-end]) -repeat(4, [col-start] fit-content(200px) [col-end]) -repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end]) -``` - -## 構文 - -### 値 - -- {{cssxref("<length>")}} - - : 正の整数で表される長さです。 -- {{cssxref("<percentage>")}} - - : 負の数ではないパーセント値で、列グリッドトラック内のグリッドコンテナーのインライン寸法と、行グリッドトラック内のグリッドコンテナーのブロック寸法との相対的値を表します。グリッドコンテナーの寸法がトラックの寸法に依存する場合、 `` は `auto` として扱う必要があります。ユーザーエージェントは、トラックの本質的な寸法の寄与をグリッドコンテナーの寸法に調整し、トラックの最終的な寸法を、パーセント値を尊重する結果となる最小の量だけ増加させることができます。 -- {{cssxref("<flex>")}} - - : トラックのフレックス要素を明示している `fr` 単位の負ではない寸法。それぞれのフレックスサイズのトラックは、それらのフレックス要素に比例して残りの空間を配分します。 -- `max-content` - - : グリッドトラックにあるグリッドアイテムの最も大きい max-content を表します。 -- `min-content` - - : グリッドトラックにあるグリッドアイテムの最も大きい min-content を表します。 -- `auto` - - : 最大値としては、 `max-content` と同じです。最小値としては、グリッドトラックを占めるグリッドアイテムの最大最小サイズ ({{cssxref("min-width")}}/{{cssxref("min-height")}} で指定されたもの) を表します。 -- `auto-fill` - - : グリッドコンテナーが関連する軸に、定義されたまたは最大の幅を持っている場合、繰り返しの数は、グリッドコンテナーをオーバーフローさせない最大の正の数になります。各トラックは定義されているならば、最大トラック幅を調整する関数 (`grid-template-rows` または `grid-template-columns` を定義するために使用されるそれぞれ独立した値) として扱われます。それ以外の場合は、最小トラック幅を調整する関数として扱い、グリッドギャップを考慮に入れます。何回繰り返してもオーバーフローしてしまう場合は、繰り返しを 1 とする。そうでなければ、グリッドコンテナーが関連する軸に、定義された最小の寸法をもっている場合、繰り返しの数は最小の要件を満たす可能性がある最小の正の整数になります。その他の場合は、指定されたトラックリストは `1` 回のみ繰り返します。。 -- `auto-fit` - - - : `auto-fill` と同様に動作しますが、グリッドアイテムを配置した後、空の繰り返しトラックが折りたたまれる点が異なります。空のトラックとは、フロー内のグリッドアイテムが配置されていない、またはそれをまたいで配置されているものがないトラックのことです。 (これは、すべてのトラックが空の場合、すべてのトラックが折りたたまれる結果になる可能性があります。) - - 折り畳まれたトラックは、 `0px`　の固定トラックサイジング機能を1つ持っているものとして扱われ、その左右の溝も折り畳まれます。 - - 自動反復トラックの数を見つけるために、ユーザーエージェントは、ゼロによる除算を避けるために、トラックの寸法をユーザーエージェントが指定した値 (例えば `1px`) に切り下げます。 - -## 例 - -### repeat() を使用したグリッド列の指定 - -#### HTML - -```html -
    -
    - This item is 50 pixels wide. -
    -
    - Item with flexible width. -
    -
    - This item is 50 pixels wide. -
    -
    - Item with flexible width. -
    -
    - Inflexible item of 100 pixels width. -
    -
    -``` - -#### CSS - -```css -#container { - display: grid; - grid-template-columns: repeat(2, 50px 1fr) 100px; - grid-gap: 5px; - box-sizing: border-box; - height: 200px; - width: 100%; - background-color: #8cffa0; - padding: 10px; -} - -#container > div { - background-color: #8ca0ff; - padding: 5px; -} -``` - -#### 結果 - -{{EmbedLiveSample("Specifying_grid_columns_using_repeat", "100%", 200)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- 関連する 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")}} -- グリッドレイアウトガイド: [CSS グリッドでの線ベースの配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid) -- グリッドレイアウトガイド: [グリッドテンプレート領域 - グリッド定義の一括指定](/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#グリッド定義の一括指定) diff --git a/files/ja/web/css/repeat/index.md b/files/ja/web/css/repeat/index.md new file mode 100644 index 0000000000..b30112c893 --- /dev/null +++ b/files/ja/web/css/repeat/index.md @@ -0,0 +1,141 @@ +--- +title: repeat() +slug: Web/CSS/repeat +tags: + - CSS + - CSS 関数 + - CSS グリッド + - 関数 + - レイアウト + - リファレンス + - ウェブ +translation_of: Web/CSS/repeat() +original_slug: Web/CSS/repeat() +browser-compat: css.properties.grid-template-columns.repeat +--- +{{CSSRef}} + +**`repeat()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、トラックリスト内での部分的な繰り返しを表し、列や行の繰り返しをよりコンパクトに書くことができます。 + +この関数は CSS グリッドのプロパティである {{cssxref("grid-template-columns")}} と {{cssxref("grid-template-rows")}} の中で使うことができます。 + +```css +/* 値 */ +repeat(4, 1fr) +repeat(4, [col-start] 250px [col-end]) +repeat(4, [col-start] 60% [col-end]) +repeat(4, [col-start] 1fr [col-end]) +repeat(4, [col-start] min-content [col-end]) +repeat(4, [col-start] max-content [col-end]) +repeat(4, [col-start] auto [col-end]) +repeat(4, [col-start] minmax(100px, 1fr) [col-end]) +repeat(4, [col-start] fit-content(200px) [col-end]) +repeat(4, 10px [col-start] 30% [col-middle] auto [col-end]) +repeat(4, [col-start] min-content [col-middle] max-content [col-end]) + +/* 値 */ +repeat(auto-fill, 250px) +repeat(auto-fit, 250px) +repeat(auto-fill, [col-start] 250px [col-end]) +repeat(auto-fit, [col-start] 250px [col-end]) +repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end]) +repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end]) + +/* 値 */ +repeat(4, 250px) +repeat(4, [col-start] 250px [col-end]) +repeat(4, [col-start] 60% [col-end]) +repeat(4, [col-start] minmax(100px, 1fr) [col-end]) +repeat(4, [col-start] fit-content(200px) [col-end]) +repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end]) +``` + +## 構文 + +### 値 + +- {{cssxref("<length>")}} + - : 正の整数で表される長さです。 +- {{cssxref("<percentage>")}} + - : 負の数ではないパーセント値で、列グリッドトラック内のグリッドコンテナーのインライン寸法と、行グリッドトラック内のグリッドコンテナーのブロック寸法との相対的値を表します。グリッドコンテナーの寸法がトラックの寸法に依存する場合、 `` は `auto` として扱う必要があります。ユーザーエージェントは、トラックの本質的な寸法の寄与をグリッドコンテナーの寸法に調整し、トラックの最終的な寸法を、パーセント値を尊重する結果となる最小の量だけ増加させることができます。 +- {{cssxref("<flex>")}} + - : トラックのフレックス要素を明示している `fr` 単位の負ではない寸法。それぞれのフレックスサイズのトラックは、それらのフレックス要素に比例して残りの空間を配分します。 +- `max-content` + - : グリッドトラックにあるグリッドアイテムの最も大きい max-content を表します。 +- `min-content` + - : グリッドトラックにあるグリッドアイテムの最も大きい min-content を表します。 +- `auto` + - : 最大値としては、 `max-content` と同じです。最小値としては、グリッドトラックを占めるグリッドアイテムの最大最小サイズ ({{cssxref("min-width")}}/{{cssxref("min-height")}} で指定されたもの) を表します。 +- `auto-fill` + - : グリッドコンテナーが関連する軸に、定義されたまたは最大の幅を持っている場合、繰り返しの数は、グリッドコンテナーをオーバーフローさせない最大の正の数になります。各トラックは定義されているならば、最大トラック幅を調整する関数 (`grid-template-rows` または `grid-template-columns` を定義するために使用されるそれぞれ独立した値) として扱われます。それ以外の場合は、最小トラック幅を調整する関数として扱い、グリッドギャップを考慮に入れます。何回繰り返してもオーバーフローしてしまう場合は、繰り返しを 1 とする。そうでなければ、グリッドコンテナーが関連する軸に、定義された最小の寸法をもっている場合、繰り返しの数は最小の要件を満たす可能性がある最小の正の整数になります。その他の場合は、指定されたトラックリストは `1` 回のみ繰り返します。。 +- `auto-fit` + + - : `auto-fill` と同様に動作しますが、グリッドアイテムを配置した後、空の繰り返しトラックが折りたたまれる点が異なります。空のトラックとは、フロー内のグリッドアイテムが配置されていない、またはそれをまたいで配置されているものがないトラックのことです。 (これは、すべてのトラックが空の場合、すべてのトラックが折りたたまれる結果になる可能性があります。) + + 折り畳まれたトラックは、 `0px`　の固定トラックサイジング機能を1つ持っているものとして扱われ、その左右の溝も折り畳まれます。 + + 自動反復トラックの数を見つけるために、ユーザーエージェントは、ゼロによる除算を避けるために、トラックの寸法をユーザーエージェントが指定した値 (例えば `1px`) に切り下げます。 + +## 例 + +### repeat() を使用したグリッド列の指定 + +#### HTML + +```html +
    +
    + This item is 50 pixels wide. +
    +
    + Item with flexible width. +
    +
    + This item is 50 pixels wide. +
    +
    + Item with flexible width. +
    +
    + Inflexible item of 100 pixels width. +
    +
    +``` + +#### CSS + +```css +#container { + display: grid; + grid-template-columns: repeat(2, 50px 1fr) 100px; + grid-gap: 5px; + box-sizing: border-box; + height: 200px; + width: 100%; + background-color: #8cffa0; + padding: 10px; +} + +#container > div { + background-color: #8ca0ff; + padding: 5px; +} +``` + +#### 結果 + +{{EmbedLiveSample("Specifying_grid_columns_using_repeat", "100%", 200)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 関連する 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")}} +- グリッドレイアウトガイド: [CSS グリッドでの線ベースの配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid) +- グリッドレイアウトガイド: [グリッドテンプレート領域 - グリッド定義の一括指定](/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#グリッド定義の一括指定) diff --git a/files/ja/web/css/symbols()/index.md b/files/ja/web/css/symbols()/index.md deleted file mode 100644 index f090a117bd..0000000000 --- a/files/ja/web/css/symbols()/index.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: symbols() -slug: Web/CSS/symbols() -tags: - - CSS - - CSS カウンタースタイル - - Function - - リファレンス -browser-compat: css.properties.list-style-type.symbols -translation_of: Web/CSS/symbols() ---- -{{CSSRef}} - -**`symbols()`** は CSS の関数で、カウンタースタイルをインラインで、 {{cssxref("list-style")}} のようなプロパティの値で直接定義することができます。 {{cssxref("@counter-style")}} とは異なり、 `symbols()` は*無名*です (すなわち一度しか使用できません)。 {{cssxref("@counter-style")}} よりも機能は劣りますが、より簡単でより短く書くことができます。 - -## 構文 - -```css -symbols() = symbols( ? [ | ]+ ); -``` - -`` は以下のうちの一つで指定することができます。 - -- `cyclic`: このシステムでは、与えられた値を定義された順に循環させ、最後に到達すると最初に戻ります。 -- `numeric`: このシステムでは、与えられた値を位取り記数法の連続した単位として解釈します。 -- `alphabetic`: このシステムでは、与えられた値をアルファベット記数法として解釈します。位取り記数法と似ていますが、 `0` がありません。 -- `symbolic`: このシステムでは値を循環させ、循環ごとに数を増やします（最初の循環では 1 回、 2 回目は 2 回、など）。 -- `fixed`: このシステムでは与えられた値を一度ずつ使用し、その後はアラビア数字で代替します。 - -## 例 - -### HTML - -```html -
      -
    1. One
      2. -
    2. Two
      3. -
    3. Three
      4. -
    4. Four
      5. -
    5. Five
      6. -
    -``` - -### CSS - -```css -ol { - list-style: symbols(cyclic "*" "†" "‡"); -} -``` - -### 結果 - -{{EmbedLiveSample('Examples','100%',200)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("@counter-style")}} -- {{cssxref("list-style-type")}} および対応する一括指定である {{cssxref("list-style")}} diff --git a/files/ja/web/css/symbols/index.md b/files/ja/web/css/symbols/index.md new file mode 100644 index 0000000000..c8abc9d9ec --- /dev/null +++ b/files/ja/web/css/symbols/index.md @@ -0,0 +1,68 @@ +--- +title: symbols() +slug: Web/CSS/symbols +tags: + - CSS + - CSS カウンタースタイル + - Function + - リファレンス +translation_of: Web/CSS/symbols() +original_slug: Web/CSS/symbols() +browser-compat: css.properties.list-style-type.symbols +--- +{{CSSRef}} + +**`symbols()`** は CSS の関数で、カウンタースタイルをインラインで、 {{cssxref("list-style")}} のようなプロパティの値で直接定義することができます。 {{cssxref("@counter-style")}} とは異なり、 `symbols()` は*無名*です (すなわち一度しか使用できません)。 {{cssxref("@counter-style")}} よりも機能は劣りますが、より簡単でより短く書くことができます。 + +## 構文 + +```css +symbols() = symbols( ? [ | ]+ ); +``` + +`` は以下のうちの一つで指定することができます。 + +- `cyclic`: このシステムでは、与えられた値を定義された順に循環させ、最後に到達すると最初に戻ります。 +- `numeric`: このシステムでは、与えられた値を位取り記数法の連続した単位として解釈します。 +- `alphabetic`: このシステムでは、与えられた値をアルファベット記数法として解釈します。位取り記数法と似ていますが、 `0` がありません。 +- `symbolic`: このシステムでは値を循環させ、循環ごとに数を増やします（最初の循環では 1 回、 2 回目は 2 回、など）。 +- `fixed`: このシステムでは与えられた値を一度ずつ使用し、その後はアラビア数字で代替します。 + +## 例 + +### HTML + +```html +
      +
    1. One
      2. +
    2. Two
      3. +
    3. Three
      4. +
    4. Four
      5. +
    5. Five
      6. +
    +``` + +### CSS + +```css +ol { + list-style: symbols(cyclic "*" "†" "‡"); +} +``` + +### 結果 + +{{EmbedLiveSample('Examples','100%',200)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("@counter-style")}} +- {{cssxref("list-style-type")}} および対応する一括指定である {{cssxref("list-style")}} diff --git a/files/ja/web/css/transform-function/matrix()/index.md b/files/ja/web/css/transform-function/matrix()/index.md deleted file mode 100644 index a522b300fd..0000000000 --- a/files/ja/web/css/transform-function/matrix()/index.md +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: matrix() -slug: Web/CSS/transform-function/matrix() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.matrix -translation_of: Web/CSS/transform-function/matrix() ---- -{{CSSRef}} - -**`matrix()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、二次元同次変換行列を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -> **Note:** `matrix(a, b, c, d, tx, ty)` は `matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)` の短縮形です。 - -## 構文 - -`matrix()` 関数は 6 つの値で指定されます。定数は内蔵されていて引数としては渡されず、その他の引数は列優先の順で記述されます。 - -```css -matrix(a, b, c, d, tx, ty) -``` - -### 値 - -- _a_ _b_ _c_ _d_ - - : {{cssxref("<number>")}} で、線形変換を記述します。 -- _tx_ _ty_ - - : {{cssxref("<number>")}} で、適用する変換を記述します。 - - - - - - - - - - - - - - - - - - - - - -
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    - a c b d - - a c tx b d ty 0 0 1 - - a c tx b d ty 0 0 1 - - a c 0 tx b d 0 ty 0 0 1 0 0 0 0 1 -
    [a b c d tx ty]
    - -値は次の関数を表します。 -`matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )` - -

    例

    - -### HTML - -```html -
    Normal
    -
    Changed
    -``` - -### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.changed { - transform: matrix(1, 2, -1, 1, 80, 80); - background-color: pink; -} -``` - -### 結果 - -{{EmbedLiveSample("Examples", 350, 350)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} -- [`matrix3d()`](/ja/docs/Web/CSS/transform-function/matrix3d()) -- [Understanding the CSS Transforms Matrix](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/) diff --git a/files/ja/web/css/transform-function/matrix/index.md b/files/ja/web/css/transform-function/matrix/index.md new file mode 100644 index 0000000000..d01b1fd491 --- /dev/null +++ b/files/ja/web/css/transform-function/matrix/index.md @@ -0,0 +1,167 @@ +--- +title: matrix() +slug: Web/CSS/transform-function/matrix +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/matrix() +original_slug: Web/CSS/transform-function/matrix() +browser-compat: css.types.transform-function.matrix +--- +{{CSSRef}} + +**`matrix()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、二次元同次変換行列を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +> **Note:** `matrix(a, b, c, d, tx, ty)` は `matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)` の短縮形です。 + +## 構文 + +`matrix()` 関数は 6 つの値で指定されます。定数は内蔵されていて引数としては渡されず、その他の引数は列優先の順で記述されます。 + +```css +matrix(a, b, c, d, tx, ty) +``` + +### 値 + +- _a_ _b_ _c_ _d_ + - : {{cssxref("<number>")}} で、線形変換を記述します。 +- _tx_ _ty_ + - : {{cssxref("<number>")}} で、適用する変換を記述します。 + + + + + + + + + + + + + + + + + + + + + +
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    + a c b d + + a c tx b d ty 0 0 1 + + a c tx b d ty 0 0 1 + + a c 0 tx b d 0 ty 0 0 1 0 0 0 0 1 +
    [a b c d tx ty]
    + +値は次の関数を表します。 +`matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )` + +

    例

    + +### HTML + +```html +
    Normal
    +
    Changed
    +``` + +### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.changed { + transform: matrix(1, 2, -1, 1, 80, 80); + background-color: pink; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", 350, 350)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} +- [`matrix3d()`](/ja/docs/Web/CSS/transform-function/matrix3d()) +- [Understanding the CSS Transforms Matrix](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/) diff --git a/files/ja/web/css/transform-function/matrix3d()/index.md b/files/ja/web/css/transform-function/matrix3d()/index.md deleted file mode 100644 index f441acebd2..0000000000 --- a/files/ja/web/css/transform-function/matrix3d()/index.md +++ /dev/null @@ -1,254 +0,0 @@ ---- -title: matrix3d() -slug: Web/CSS/transform-function/matrix3d() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.matrix3d -translation_of: Web/CSS/transform-function/matrix3d() ---- -{{CSSRef}} - -**`matrix3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 4x4 の三次元同次変換行列を定義します。 -結果は {{cssxref("<transform-function>")}} データ型になります。 - -## 構文 - -`matrix3d()` 関数は 16 個の値で指定します。列優先の順で記述します。 - -```css -matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) -``` - -### 値 - -- _a1_ _b1_ _c1_ _d1_ _a2_ _b2_ _c2_ _d2_ - _a3_ _b3_ _c3_ _d3_ - - : {{cssxref("<number>")}} で、線形変換を記述します。 -- _a4_ _b4_ _c4 d4_ - - : {{cssxref("<number>")}} で、適用する変換を記述します。 - - - - - - - - - - - - - - - - - -
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    - この変換は三次元空間に適用され、平面で表現することはできません。 - - 一般的な三次元[アファイン変換](https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%95%E3%82%A3%E3%83%B3%E5%86%99%E5%83%8F)は、変換が線形変換ではないので、デカルト座標行列を使用して表現することはできません。 - - a1 a2 a3 a4 b1 b2 b3 b4 c1 c2 c3 c4 d1 d2 d3 d4 -
    - -## 例 - -### つぶれる立方体の例 - -次の例は、DOM 要素と変換から作成された立方体を示しており、ポインターを置いたりフォーカスしたりすることで `matrix3d()` 変換を適用することができます。 - -#### HTML - -```html -
    - 
    1
    - 
    2
    - 
    3
    - 
    4
    - 
    5
    - 
    6
    -
    -``` - -#### CSS - -```css -#example-element { - width: 100px; - height: 100px; - transform-style: preserve-3d; - transition: transform 1.5s; - transform: rotate3d(1, 1, 1, 30deg); - margin: 50px auto; -} - -#example-element:hover, #example-element:focus { - transform: rotate3d(1, 1, 1, 30deg) matrix3d(1,0,0,0,0,1,6,0,0,0,1,0,50,100,0,1.1); -} - -.face { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - position: absolute; - backface-visibility: inherit; - font-size: 60px; - color: #fff; -} - -.front { - background: rgba(90,90,90,.7); - transform: translateZ(50px); -} - -.back { - background: rgba(0,210,0,.7); - transform: rotateY(180deg) translateZ(50px); -} - -.right { - background: rgba(210,0,0,.7); - transform: rotateY(90deg) translateZ(50px); -} - -.left { - background: rgba(0,0,210,.7); - transform: rotateY(-90deg) translateZ(50px); -} - -.top { - background: rgba(210,210,0,.7); - transform: rotateX(90deg) translateZ(50px); -} - -.bottom { - background: rgba(210,0,210,.7); - transform: rotateX(-90deg) translateZ(50px); -} -``` - -#### 結果 - -{{EmbedLiveSample('Cube_squashing_example', '100%', '300px')}} - -### 行列変換と拡大縮小の例 - -もう一つの `transform3d()` の例は、変換と拡大縮小をアニメーションと組み合わせて実装したものです。 - -#### HTML - -```html -
    -Lorem ipsum dolor sit amet, consectetur adipisicing elit. -Quos quaerat sit soluta, quisquam exercitationem delectus qui unde in facere -necessitatibus aut quia porro dolorem nesciunt enim, at consequuntur aliquam esse? -
    -``` - -#### CSS - -```css -html { -  width: 100%; -} -body { -  height: 100vh; -  /* Centering content */ -  display: flex; -  flex-flow: row wrap; -  justify-content: center; -  align-content: center; - -} -.foo { -  width: 50%; -  padding: 1em; -  color: white; -  background: #ff8c66; -  border: 2px dashed black; -  text-align: center; -  font-family: system-ui, sans-serif; -  font-size: 14px; -   /* Setting up animation for better demonstration */ -  animation: MotionScale 2s alternate linear infinite; -} - -@keyframes MotionScale { -  from { -    /* -      Identity matrix is used as basis here. -      The matrix below describes the -      following transformations: -        Translates every X point by -50px -        Translates every Y point by -100px -        Translates every Z point by 0 -        Scales down by 10% -    */ -    transform: matrix3d( -      1,0,0,0, -      0,1,0,0, -      0,0,1,0, -      -50,-100,0,1.1 -    ); - -  } -  50% { -    transform: matrix3d( -      1,0,0,0, -      0,1,0,0, -      0,0,1,0, -      0,0,0,0.9 -    ); -  } -  to { -     transform: matrix3d( -      1,0,0,0, -      0,1,0,0, -      0,0,1,0, -      50,100,0,1.1 -    ) -  } -} -``` - -#### 結果 - -{{EmbedLiveSample('Matrix_translation_and_scale_example', '100%', '400px')}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} -- [Understanding the CSS Transforms Matrix](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/) diff --git a/files/ja/web/css/transform-function/matrix3d/index.md b/files/ja/web/css/transform-function/matrix3d/index.md new file mode 100644 index 0000000000..b3d1168891 --- /dev/null +++ b/files/ja/web/css/transform-function/matrix3d/index.md @@ -0,0 +1,255 @@ +--- +title: matrix3d() +slug: Web/CSS/transform-function/matrix3d +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/matrix3d() +original_slug: Web/CSS/transform-function/matrix3d() +browser-compat: css.types.transform-function.matrix3d +--- +{{CSSRef}} + +**`matrix3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 4x4 の三次元同次変換行列を定義します。 +結果は {{cssxref("<transform-function>")}} データ型になります。 + +## 構文 + +`matrix3d()` 関数は 16 個の値で指定します。列優先の順で記述します。 + +```css +matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) +``` + +### 値 + +- _a1_ _b1_ _c1_ _d1_ _a2_ _b2_ _c2_ _d2_ + _a3_ _b3_ _c3_ _d3_ + - : {{cssxref("<number>")}} で、線形変換を記述します。 +- _a4_ _b4_ _c4 d4_ + - : {{cssxref("<number>")}} で、適用する変換を記述します。 + + + + + + + + + + + + + + + + + +
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    + この変換は三次元空間に適用され、平面で表現することはできません。 + + 一般的な三次元[アファイン変換](https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%95%E3%82%A3%E3%83%B3%E5%86%99%E5%83%8F)は、変換が線形変換ではないので、デカルト座標行列を使用して表現することはできません。 + + a1 a2 a3 a4 b1 b2 b3 b4 c1 c2 c3 c4 d1 d2 d3 d4 +
    + +## 例 + +### つぶれる立方体の例 + +次の例は、DOM 要素と変換から作成された立方体を示しており、ポインターを置いたりフォーカスしたりすることで `matrix3d()` 変換を適用することができます。 + +#### HTML + +```html +
    + 
    1
    + 
    2
    + 
    3
    + 
    4
    + 
    5
    + 
    6
    +
    +``` + +#### CSS + +```css +#example-element { + width: 100px; + height: 100px; + transform-style: preserve-3d; + transition: transform 1.5s; + transform: rotate3d(1, 1, 1, 30deg); + margin: 50px auto; +} + +#example-element:hover, #example-element:focus { + transform: rotate3d(1, 1, 1, 30deg) matrix3d(1,0,0,0,0,1,6,0,0,0,1,0,50,100,0,1.1); +} + +.face { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + position: absolute; + backface-visibility: inherit; + font-size: 60px; + color: #fff; +} + +.front { + background: rgba(90,90,90,.7); + transform: translateZ(50px); +} + +.back { + background: rgba(0,210,0,.7); + transform: rotateY(180deg) translateZ(50px); +} + +.right { + background: rgba(210,0,0,.7); + transform: rotateY(90deg) translateZ(50px); +} + +.left { + background: rgba(0,0,210,.7); + transform: rotateY(-90deg) translateZ(50px); +} + +.top { + background: rgba(210,210,0,.7); + transform: rotateX(90deg) translateZ(50px); +} + +.bottom { + background: rgba(210,0,210,.7); + transform: rotateX(-90deg) translateZ(50px); +} +``` + +#### 結果 + +{{EmbedLiveSample('Cube_squashing_example', '100%', '300px')}} + +### 行列変換と拡大縮小の例 + +もう一つの `transform3d()` の例は、変換と拡大縮小をアニメーションと組み合わせて実装したものです。 + +#### HTML + +```html +
    +Lorem ipsum dolor sit amet, consectetur adipisicing elit. +Quos quaerat sit soluta, quisquam exercitationem delectus qui unde in facere +necessitatibus aut quia porro dolorem nesciunt enim, at consequuntur aliquam esse? +
    +``` + +#### CSS + +```css +html { +  width: 100%; +} +body { +  height: 100vh; +  /* Centering content */ +  display: flex; +  flex-flow: row wrap; +  justify-content: center; +  align-content: center; + +} +.foo { +  width: 50%; +  padding: 1em; +  color: white; +  background: #ff8c66; +  border: 2px dashed black; +  text-align: center; +  font-family: system-ui, sans-serif; +  font-size: 14px; +   /* Setting up animation for better demonstration */ +  animation: MotionScale 2s alternate linear infinite; +} + +@keyframes MotionScale { +  from { +    /* +      Identity matrix is used as basis here. +      The matrix below describes the +      following transformations: +        Translates every X point by -50px +        Translates every Y point by -100px +        Translates every Z point by 0 +        Scales down by 10% +    */ +    transform: matrix3d( +      1,0,0,0, +      0,1,0,0, +      0,0,1,0, +      -50,-100,0,1.1 +    ); + +  } +  50% { +    transform: matrix3d( +      1,0,0,0, +      0,1,0,0, +      0,0,1,0, +      0,0,0,0.9 +    ); +  } +  to { +     transform: matrix3d( +      1,0,0,0, +      0,1,0,0, +      0,0,1,0, +      50,100,0,1.1 +    ) +  } +} +``` + +#### 結果 + +{{EmbedLiveSample('Matrix_translation_and_scale_example', '100%', '400px')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} +- [Understanding the CSS Transforms Matrix](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/) diff --git a/files/ja/web/css/transform-function/perspective()/index.md b/files/ja/web/css/transform-function/perspective()/index.md deleted file mode 100644 index 3be9e8d15f..0000000000 --- a/files/ja/web/css/transform-function/perspective()/index.md +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: perspective() -slug: Web/CSS/transform-function/perspective() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.perspective -translation_of: Web/CSS/transform-function/perspective() ---- -{{CSSRef}} - -**`perspective()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、ユーザーと z=0 平面との間の距離を定義し、閲覧者からの視点は二次元のインターフェイスが三次元であったかのようになります。結果は {{cssxref("<transform-function>")}} データ型になります。 - -{{EmbedInteractiveExample("pages/css/function-perspective.html")}} - -`perspective()` 座標変換関数は {{cssxref('transform')}} 値の一部で、変形される要素に適用されます。これは {{cssxref('perspective')}} および {{cssxref('perspective-origin')}} の各プロパティが三次元空間に座標変換される子の親に付けられるのとは異なります。 - -## 構文 - -`perspective()` で使用する視点距離は、{{cssxref("<length>")}} 値でユーザーと z=0 平面との間の距離を指定するか、または `none` で指定します。 -z=0 平面とは、二次元表示ですべてが見える平面、つまり画面のことです。 -負の値は構文エラーになります。 -`1px` より小さい値 (ゼロを含む) は `1px` になります。 -値が `none` 以外の場合、 z が正の位置にある要素は大きく表示されます。また、z が負の位置にある要素は小さく表示されます。 -z 位置が `perspective` の値と同じか大きい要素は、ユーザーの背後にあるかのようになり、非表示になります。 -`perspective()` が大きいと、変形が小さいことを表します。`perspective()` の値が小さいと、変形が大きいことを表します。`perspective(none)` は無限の距離からの遠近感を表し、変形はありません。 - -```css -perspective(d) -``` - -### 値 - -- _d_ - - : {{cssxref("<length>")}} で、ユーザーと z=0 平面との間の距離を表します。 0 または負の数であった場合は、距離の変換は適用されません。 - - - - - - - - - - - - - - - - - -
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    - この変換は三次元空間に適用され、平面で表現することはできません。 - この変換は ℝ^3 では線形変換ではないので、デカルト座標行列を使用して表現することはできません。 - 1 0 0 0 0 1 0 0 0 0 1 0 0 0 − - 1 - / - d 1 -
    - -

    例

    - -### HTML - -```html -

    Without perspective:

    -
    - 
    A
    - 
    B
    - 
    C
    -
    - -

    With perspective (9cm):

    -
    - 
    A
    - 
    B
    - 
    C
    -
    - -

    With perspective (4cm):

    -
    - 
    A
    - 
    B
    - 
    C
    -
    -``` - -### CSS - -```css -.face { -  position: absolute; -  width: 100px; -  height: 100px; -  line-height: 100px; -  font-size: 100px; -  text-align: center; -} - -p + div { -  width: 100px; -  height: 100px; -  transform-style: preserve-3d; -  margin-left: 100px; -} -.no-perspective-box { -  transform: rotateX(-15deg) rotateY(30deg); -} - -.perspective-box-far { -  transform: perspective(9cm) rotateX(-15deg) rotateY(30deg); -} - -.perspective-box-closer { -  transform: perspective(4cm) rotateX(-15deg) rotateY(30deg); -} - -.top { -  background-color: skyblue; -  transform: rotateX(90deg) translate3d(0, 0, 50px); -} - -.left { -  background-color: pink; -  transform: rotateY(-90deg) translate3d(0, 0, 50px); -} - -.front { -  background-color: limegreen; -  transform: translate3d(0, 0, 50px); -} -``` - -### 結果 - -{{ EmbedLiveSample('Examples', '250', '350') }} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/perspective/index.md b/files/ja/web/css/transform-function/perspective/index.md new file mode 100644 index 0000000000..558dc25a15 --- /dev/null +++ b/files/ja/web/css/transform-function/perspective/index.md @@ -0,0 +1,174 @@ +--- +title: perspective() +slug: Web/CSS/transform-function/perspective +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/perspective() +original_slug: Web/CSS/transform-function/perspective() +browser-compat: css.types.transform-function.perspective +--- +{{CSSRef}} + +**`perspective()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、ユーザーと z=0 平面との間の距離を定義し、閲覧者からの視点は二次元のインターフェイスが三次元であったかのようになります。結果は {{cssxref("<transform-function>")}} データ型になります。 + +{{EmbedInteractiveExample("pages/css/function-perspective.html")}} + +`perspective()` 座標変換関数は {{cssxref('transform')}} 値の一部で、変形される要素に適用されます。これは {{cssxref('perspective')}} および {{cssxref('perspective-origin')}} の各プロパティが三次元空間に座標変換される子の親に付けられるのとは異なります。 + +## 構文 + +`perspective()` で使用する視点距離は、{{cssxref("<length>")}} 値でユーザーと z=0 平面との間の距離を指定するか、または `none` で指定します。 +z=0 平面とは、二次元表示ですべてが見える平面、つまり画面のことです。 +負の値は構文エラーになります。 +`1px` より小さい値 (ゼロを含む) は `1px` になります。 +値が `none` 以外の場合、 z が正の位置にある要素は大きく表示されます。また、z が負の位置にある要素は小さく表示されます。 +z 位置が `perspective` の値と同じか大きい要素は、ユーザーの背後にあるかのようになり、非表示になります。 +`perspective()` が大きいと、変形が小さいことを表します。`perspective()` の値が小さいと、変形が大きいことを表します。`perspective(none)` は無限の距離からの遠近感を表し、変形はありません。 + +```css +perspective(d) +``` + +### 値 + +- _d_ + - : {{cssxref("<length>")}} で、ユーザーと z=0 平面との間の距離を表します。 0 または負の数であった場合は、距離の変換は適用されません。 + + + + + + + + + + + + + + + + + +
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    + この変換は三次元空間に適用され、平面で表現することはできません。 + この変換は ℝ^3 では線形変換ではないので、デカルト座標行列を使用して表現することはできません。 + 1 0 0 0 0 1 0 0 0 0 1 0 0 0 − + 1 + / + d 1 +
    + +

    例

    + +### HTML + +```html +

    Without perspective:

    +
    + 
    A
    + 
    B
    + 
    C
    +
    + +

    With perspective (9cm):

    +
    + 
    A
    + 
    B
    + 
    C
    +
    + +

    With perspective (4cm):

    +
    + 
    A
    + 
    B
    + 
    C
    +
    +``` + +### CSS + +```css +.face { +  position: absolute; +  width: 100px; +  height: 100px; +  line-height: 100px; +  font-size: 100px; +  text-align: center; +} + +p + div { +  width: 100px; +  height: 100px; +  transform-style: preserve-3d; +  margin-left: 100px; +} +.no-perspective-box { +  transform: rotateX(-15deg) rotateY(30deg); +} + +.perspective-box-far { +  transform: perspective(9cm) rotateX(-15deg) rotateY(30deg); +} + +.perspective-box-closer { +  transform: perspective(4cm) rotateX(-15deg) rotateY(30deg); +} + +.top { +  background-color: skyblue; +  transform: rotateX(90deg) translate3d(0, 0, 50px); +} + +.left { +  background-color: pink; +  transform: rotateY(-90deg) translate3d(0, 0, 50px); +} + +.front { +  background-color: limegreen; +  transform: translate3d(0, 0, 50px); +} +``` + +### 結果 + +{{ EmbedLiveSample('Examples', '250', '350') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/rotate()/index.md b/files/ja/web/css/transform-function/rotate()/index.md deleted file mode 100644 index 680dadc756..0000000000 --- a/files/ja/web/css/transform-function/rotate()/index.md +++ /dev/null @@ -1,287 +0,0 @@ ---- -title: rotate() -slug: Web/CSS/transform-function/rotate() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.rotate -translation_of: Web/CSS/transform-function/rotate() ---- -{{CSSRef}} - -**`rotate()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上の特定の点を中心に、形を崩さずに回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -要素が回転する中心となる特定の点 — 前述 — は、**変形原点**とも呼ばれます。既定では要素の中央ですが、 {{ cssxref("transform-origin") }} プロパティを使用して独自の変形原点を設定することができます。 - -## 構文 - -`rotate()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。180 度で回転したものは*点対称*と呼ばれます。 - -```css -rotate(a) -``` - -### 値 - -- _a_ - - : {{ cssxref("<angle>") }} で、回転する角度を表します。回転方向は書字方向に依存します。 - 左書きの文脈では、正の角度は時計回りの回転を、負の角度は反時計回りの回転を表します。右書きの文脈では 正の角度は反時計回りの回転を、負の角度は時計回りの回転を表します。 - - - - - - - - - - - - - - - - - - - - - -
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    - cos - ( - a - ) - - sin - ( - a - ) - sin - ( - a - ) cos - ( - a - ) - - cos - ( - a - ) - - sin - ( - a - ) 0 sin - ( - a - ) cos - ( - a - ) 0 0 0 1 - - cos - ( - a - ) - - sin - ( - a - ) 0 sin - ( - a - ) cos - ( - a - ) 0 0 0 1 - - cos - ( - a - ) - - sin - ( - a - ) 0 0 sin - ( - a - ) cos - ( - a - ) 0 0 0 0 1 0 0 0 0 1 -
    [cos(a) sin(a) -sin(a) cos(a) 0 0]
    - -## 例 - -

    基本的な例

    - -#### HTML - -```html -
    Normal
    -
    Rotated
    -``` - -#### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.rotated { - transform: rotate(45deg); /* rotateZ(45deg) と等価 */ - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Basic_example", "auto", 180)}} - -

    回転とその他の変形の組み合わせ

    - -複数の変形を要素に適用したい場合は、変形を指定する順序に気を付けてください。例えば、平行移動前に回転すると、平行移動によって回転の軸が変わってしまいます。 - -#### HTML - -```html -
    Normal
    -
    Rotated
    -
    Rotated + Translated
    -
    Translated + Rotated
    -``` - -#### CSS - -```css -div { - position: absolute; - left: 40px; - top: 40px; - width: 100px; - height: 100px; - background-color: lightgray; -} - -.rotate { - background-color: transparent; - outline: 2px dashed; - transform: rotate(45deg); -} - -.rotate-translate { - background-color: pink; - transform: rotate(45deg) translateX(180px); -} - -.translate-rotate { - background-color: gold; - transform: translateX(180px) rotate(45deg); -} -``` - -#### 結果 - -{{EmbedLiveSample("Combining_rotation_with_another_transformation", "auto", 320)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} -- [`rotate3d()`](/ja/docs/Web/CSS/transform-function/rotate3d()) diff --git a/files/ja/web/css/transform-function/rotate/index.md b/files/ja/web/css/transform-function/rotate/index.md new file mode 100644 index 0000000000..0cd44fab47 --- /dev/null +++ b/files/ja/web/css/transform-function/rotate/index.md @@ -0,0 +1,288 @@ +--- +title: rotate() +slug: Web/CSS/transform-function/rotate +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/rotate() +original_slug: Web/CSS/transform-function/rotate() +browser-compat: css.types.transform-function.rotate +--- +{{CSSRef}} + +**`rotate()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上の特定の点を中心に、形を崩さずに回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +要素が回転する中心となる特定の点 — 前述 — は、**変形原点**とも呼ばれます。既定では要素の中央ですが、 {{ cssxref("transform-origin") }} プロパティを使用して独自の変形原点を設定することができます。 + +## 構文 + +`rotate()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。180 度で回転したものは*点対称*と呼ばれます。 + +```css +rotate(a) +``` + +### 値 + +- _a_ + - : {{ cssxref("<angle>") }} で、回転する角度を表します。回転方向は書字方向に依存します。 + 左書きの文脈では、正の角度は時計回りの回転を、負の角度は反時計回りの回転を表します。右書きの文脈では 正の角度は反時計回りの回転を、負の角度は時計回りの回転を表します。 + + + + + + + + + + + + + + + + + + + + + +
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    + cos + ( + a + ) - + sin + ( + a + ) + sin + ( + a + ) cos + ( + a + ) + + cos + ( + a + ) - + sin + ( + a + ) 0 sin + ( + a + ) cos + ( + a + ) 0 0 0 1 + + cos + ( + a + ) - + sin + ( + a + ) 0 sin + ( + a + ) cos + ( + a + ) 0 0 0 1 + + cos + ( + a + ) - + sin + ( + a + ) 0 0 sin + ( + a + ) cos + ( + a + ) 0 0 0 0 1 0 0 0 0 1 +
    [cos(a) sin(a) -sin(a) cos(a) 0 0]
    + +## 例 + +

    基本的な例

    + +#### HTML + +```html +
    Normal
    +
    Rotated
    +``` + +#### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotate(45deg); /* rotateZ(45deg) と等価 */ + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Basic_example", "auto", 180)}} + +

    回転とその他の変形の組み合わせ

    + +複数の変形を要素に適用したい場合は、変形を指定する順序に気を付けてください。例えば、平行移動前に回転すると、平行移動によって回転の軸が変わってしまいます。 + +#### HTML + +```html +
    Normal
    +
    Rotated
    +
    Rotated + Translated
    +
    Translated + Rotated
    +``` + +#### CSS + +```css +div { + position: absolute; + left: 40px; + top: 40px; + width: 100px; + height: 100px; + background-color: lightgray; +} + +.rotate { + background-color: transparent; + outline: 2px dashed; + transform: rotate(45deg); +} + +.rotate-translate { + background-color: pink; + transform: rotate(45deg) translateX(180px); +} + +.translate-rotate { + background-color: gold; + transform: translateX(180px) rotate(45deg); +} +``` + +#### 結果 + +{{EmbedLiveSample("Combining_rotation_with_another_transformation", "auto", 320)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} +- [`rotate3d()`](/ja/docs/Web/CSS/transform-function/rotate3d()) diff --git a/files/ja/web/css/transform-function/rotate3d()/index.md b/files/ja/web/css/transform-function/rotate3d()/index.md deleted file mode 100644 index fd781800d0..0000000000 --- a/files/ja/web/css/transform-function/rotate3d()/index.md +++ /dev/null @@ -1,326 +0,0 @@ ---- -title: rotate3d() -slug: Web/CSS/transform-function/rotate3d() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.rotate3d -translation_of: Web/CSS/transform-function/rotate3d() ---- -{{CSSRef}} - -**`rotate3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)は、要素を三次元空間内の固定した軸を中心に、形を崩さずに回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -{{EmbedInteractiveExample("pages/css/rotate3d.html")}} - -三次元空間では、回転には三次元の自由度があり、これらが一緒になって単一の回転軸を表します。回転軸は \[x, y, z] ベクトルによって定義され、 ({{ cssxref("transform-origin") }} プロパティで定義される) 原点を通過します。もし、指定値として、ベクトルが*正規化*されていない場合 (すなわち、3 つの座標の 2 乗の合計が 1 ではない場合)、{{glossary("user agent", "ユーザーエージェント")}}が内部的に正規化します。正規化できないベクトル、例えば null ベクトル \[0, 0, 0] では、回転が無視されますが、 CSS プロパティ全体を無効化はしません。 - -> **Note:** 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。 - -## 構文 - -`rotate3d()` で行う回転の量は、3 つの {{cssxref("<number>")}} および 1 つの {{cssxref("<angle>")}} で指定します。 `` は回転軸を表すベクトルの X, Y, Z 座標を表します。 `` は回転角を表します。正の数の場合、回転方向は時計回りで、負の数の場合、回転方向は反時計回りになります。 - -```css -rotate3d(x, y, z, a) -``` - -### 値 - -- `x` - - : {{cssxref("<number>")}} で、回転軸を表すベクトルの X 座標を表し、 0 から 1 までの値を取ります。 -- `y` - - : {{cssxref("<number>")}} で、回転軸を表すベクトルの Y 座標を表し、 0 から 1 までの値を取ります。 -- `z` - - : {{cssxref("<number>")}} で、回転軸を表すベクトルの Z 座標を表し、 0 から 1 までの値を取ります。 -- `a` - - : {{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。 - - - - - - - - - - - - - - - - - - - -
    ℝ^2 のデカルト座標 - この変形は三次元空間に適用され、平面で表すことはできません。 -
    ℝℙ^2 の同次座標
    ℝ^3 のデカルト座標 - - 1 - + - ( - 1 - - - cos - ( - a - ) - ) - ( - x - 2 - - 1 - ) z - · - sin - ( - a - ) - + - x - y - ( - 1 - - - cos - ( - a - ) - ) - - y - · - sin - ( - a - ) - + - x - z - · - ( - 1 - - - cos - ( - a - ) - ) - - - z - · - sin - ( - a - ) - + - x - y - · - ( - 1 - - - cos - ( - a - ) - ) 1 - + - ( - 1 - - - cos - ( - a - ) - ) - ( - y2 - - - 1 - ) x - · - sin - ( - a - ) - + - y - z - · - ( - 1 - - - cos - ( - a - ) - ) - y - sin - ( - a - ) - + - xz - ( - 1 - - - cos - ( - a - ) - ) - - x - sin - ( - a - ) - + - yz - ( - 1 - - - cos - ( - a - ) - ) 1 - + - ( - 1 - - - cos - ( - a - ) - ) - ( - z2 - - - 1 - ) t 0 0 0 1 -
    ℝℙ^3 の同次座標 - -
    - -## 例 - -

    Y 軸に沿って回転

    - -#### HTML - -```html -
    Normal
    -
    Rotated
    -``` - -#### CSS - -```css -body { - perspective: 800px; -} - -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.rotated { - transform: rotate3d(0, 1, 0, 60deg); - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Rotating_on_the_y-axis", "auto", 180)}} - -

    独自の軸に沿って回転

    - -#### HTML - -```html -
    Normal
    -
    Rotated
    -``` - -#### CSS - -```css -body { - perspective: 800px; -} - -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.rotated { - transform: rotate3d(1, 2, -1, 192deg); - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Rotating_on_a_custom_axis", "auto", 180)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/rotate3d/index.md b/files/ja/web/css/transform-function/rotate3d/index.md new file mode 100644 index 0000000000..c747c1c27c --- /dev/null +++ b/files/ja/web/css/transform-function/rotate3d/index.md @@ -0,0 +1,327 @@ +--- +title: rotate3d() +slug: Web/CSS/transform-function/rotate3d +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/rotate3d() +original_slug: Web/CSS/transform-function/rotate3d() +browser-compat: css.types.transform-function.rotate3d +--- +{{CSSRef}} + +**`rotate3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)は、要素を三次元空間内の固定した軸を中心に、形を崩さずに回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +{{EmbedInteractiveExample("pages/css/rotate3d.html")}} + +三次元空間では、回転には三次元の自由度があり、これらが一緒になって単一の回転軸を表します。回転軸は \[x, y, z] ベクトルによって定義され、 ({{ cssxref("transform-origin") }} プロパティで定義される) 原点を通過します。もし、指定値として、ベクトルが*正規化*されていない場合 (すなわち、3 つの座標の 2 乗の合計が 1 ではない場合)、{{glossary("user agent", "ユーザーエージェント")}}が内部的に正規化します。正規化できないベクトル、例えば null ベクトル \[0, 0, 0] では、回転が無視されますが、 CSS プロパティ全体を無効化はしません。 + +> **Note:** 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。 + +## 構文 + +`rotate3d()` で行う回転の量は、3 つの {{cssxref("<number>")}} および 1 つの {{cssxref("<angle>")}} で指定します。 `` は回転軸を表すベクトルの X, Y, Z 座標を表します。 `` は回転角を表します。正の数の場合、回転方向は時計回りで、負の数の場合、回転方向は反時計回りになります。 + +```css +rotate3d(x, y, z, a) +``` + +### 値 + +- `x` + - : {{cssxref("<number>")}} で、回転軸を表すベクトルの X 座標を表し、 0 から 1 までの値を取ります。 +- `y` + - : {{cssxref("<number>")}} で、回転軸を表すベクトルの Y 座標を表し、 0 から 1 までの値を取ります。 +- `z` + - : {{cssxref("<number>")}} で、回転軸を表すベクトルの Z 座標を表し、 0 から 1 までの値を取ります。 +- `a` + - : {{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。 + + + + + + + + + + + + + + + + + + + +
    ℝ^2 のデカルト座標 + この変形は三次元空間に適用され、平面で表すことはできません。 +
    ℝℙ^2 の同次座標
    ℝ^3 のデカルト座標 + + 1 + + + ( + 1 + - + cos + ( + a + ) + ) + ( + x + 2 - + 1 + ) z + · + sin + ( + a + ) + + + x + y + ( + 1 + - + cos + ( + a + ) + ) - + y + · + sin + ( + a + ) + + + x + z + · + ( + 1 + - + cos + ( + a + ) + ) + - + z + · + sin + ( + a + ) + + + x + y + · + ( + 1 + - + cos + ( + a + ) + ) 1 + + + ( + 1 + - + cos + ( + a + ) + ) + ( + y2 + - + 1 + ) x + · + sin + ( + a + ) + + + y + z + · + ( + 1 + - + cos + ( + a + ) + ) + y + sin + ( + a + ) + + + xz + ( + 1 + - + cos + ( + a + ) + ) - + x + sin + ( + a + ) + + + yz + ( + 1 + - + cos + ( + a + ) + ) 1 + + + ( + 1 + - + cos + ( + a + ) + ) + ( + z2 + - + 1 + ) t 0 0 0 1 +
    ℝℙ^3 の同次座標 + +
    + +## 例 + +

    Y 軸に沿って回転

    + +#### HTML + +```html +
    Normal
    +
    Rotated
    +``` + +#### CSS + +```css +body { + perspective: 800px; +} + +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotate3d(0, 1, 0, 60deg); + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Rotating_on_the_y-axis", "auto", 180)}} + +

    独自の軸に沿って回転

    + +#### HTML + +```html +
    Normal
    +
    Rotated
    +``` + +#### CSS + +```css +body { + perspective: 800px; +} + +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotate3d(1, 2, -1, 192deg); + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Rotating_on_a_custom_axis", "auto", 180)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/rotatex()/index.md b/files/ja/web/css/transform-function/rotatex()/index.md deleted file mode 100644 index 111f7c1b0f..0000000000 --- a/files/ja/web/css/transform-function/rotatex()/index.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: rotateX() -slug: Web/CSS/transform-function/rotateX() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.rotateX -translation_of: Web/CSS/transform-function/rotateX() ---- -{{CSSRef}} - -**`rotateX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素の形を変化させずに横座標 (水平軸) の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -{{EmbedInteractiveExample("pages/css/function-rotateX.html")}} - -回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。 - -> **Note:** `rotateX(a)` は `rotate3d(1, 0, 0, a)` と等価です。 - -> **Note:** 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。 - -## 構文 - -`rotateX()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。 - -```css -rotateX(a) -``` - -### 値 - -- `a` - - : {{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。 - - - - - - - - - - - - - - - - - -
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    - この変形は三次元空間に適用され、平面で表すことはできません。 - - 1 0 0 0 cos - ( - a - ) - - sin - ( - a - ) - 0 sin - ( - a - ) cos - ( - a - ) - - 1 0 0 0 0 cos - ( - a - ) - - sin - ( - a - ) 0 0 sin - ( - a - ) cos - ( - a - ) 0 0 0 0 1 -
    - -

    例

    - -### HTML - -```html -
    Normal
    -
    Rotated
    -``` - -### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.rotated { - transform: rotateX(45deg); - background-color: pink; -} -``` - -### 結果 - -{{EmbedLiveSample("Examples", "auto", 180)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/rotatex/index.md b/files/ja/web/css/transform-function/rotatex/index.md new file mode 100644 index 0000000000..ae003dd8d1 --- /dev/null +++ b/files/ja/web/css/transform-function/rotatex/index.md @@ -0,0 +1,177 @@ +--- +title: rotateX() +slug: Web/CSS/transform-function/rotateX +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/rotateX() +original_slug: Web/CSS/transform-function/rotateX() +browser-compat: css.types.transform-function.rotateX +--- +{{CSSRef}} + +**`rotateX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素の形を変化させずに横座標 (水平軸) の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +{{EmbedInteractiveExample("pages/css/function-rotateX.html")}} + +回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。 + +> **Note:** `rotateX(a)` は `rotate3d(1, 0, 0, a)` と等価です。 + +> **Note:** 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。 + +## 構文 + +`rotateX()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。 + +```css +rotateX(a) +``` + +### 値 + +- `a` + - : {{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。 + + + + + + + + + + + + + + + + + +
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    + この変形は三次元空間に適用され、平面で表すことはできません。 + + 1 0 0 0 cos + ( + a + ) - + sin + ( + a + ) + 0 sin + ( + a + ) cos + ( + a + ) + + 1 0 0 0 0 cos + ( + a + ) - + sin + ( + a + ) 0 0 sin + ( + a + ) cos + ( + a + ) 0 0 0 0 1 +
    + +

    例

    + +### HTML + +```html +
    Normal
    +
    Rotated
    +``` + +### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotateX(45deg); + background-color: pink; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", "auto", 180)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/rotatey()/index.md b/files/ja/web/css/transform-function/rotatey()/index.md deleted file mode 100644 index 4ca3842ff6..0000000000 --- a/files/ja/web/css/transform-function/rotatey()/index.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: rotateY() -slug: Web/CSS/transform-function/rotateY() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.rotateY -translation_of: Web/CSS/transform-function/rotateY() ---- -{{CSSRef}} - -**`rotateY()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素の形を変化させずに縦座標 (垂直軸) の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -{{EmbedInteractiveExample("pages/css/function-rotateY.html")}} - -回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。 - -> **Note:** `rotateY(a)` は `rotate3d(0, 1, 0, a)` と等価です。 - -> **Note:** 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。 - -## 構文 - -`rotateY()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。 - -```css -rotateY(a) -``` - -### 値 - -- `a` - - : {{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。 - - - - - - - - - - - - - - - - - -
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    - この変形は三次元空間に適用され、平面で表すことはできません。 - - cos - ( - a - ) 0 sin - ( - a - ) - 0 1 0 - - sin - ( - a - ) 0 cos - ( - a - ) - - cos - ( - a - ) 0 sin - ( - a - ) 0 0 1 0 0 - - sin - ( - a - ) 0 cos - ( - a - ) 0 0 0 0 1 -
    - -

    例

    - -### HTML - -```html -
    Normal
    -
    Rotated
    -``` - -### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.rotated { - transform: rotateY(60deg); - background-color: pink; -} -``` - -### 結果 - -{{EmbedLiveSample("Examples", "auto", 180)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/rotatey/index.md b/files/ja/web/css/transform-function/rotatey/index.md new file mode 100644 index 0000000000..a039fe60a4 --- /dev/null +++ b/files/ja/web/css/transform-function/rotatey/index.md @@ -0,0 +1,177 @@ +--- +title: rotateY() +slug: Web/CSS/transform-function/rotateY +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/rotateY() +original_slug: Web/CSS/transform-function/rotateY() +browser-compat: css.types.transform-function.rotateY +--- +{{CSSRef}} + +**`rotateY()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素の形を変化させずに縦座標 (垂直軸) の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +{{EmbedInteractiveExample("pages/css/function-rotateY.html")}} + +回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。 + +> **Note:** `rotateY(a)` は `rotate3d(0, 1, 0, a)` と等価です。 + +> **Note:** 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。 + +## 構文 + +`rotateY()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。 + +```css +rotateY(a) +``` + +### 値 + +- `a` + - : {{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。 + + + + + + + + + + + + + + + + + +
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    + この変形は三次元空間に適用され、平面で表すことはできません。 + + cos + ( + a + ) 0 sin + ( + a + ) + 0 1 0 - + sin + ( + a + ) 0 cos + ( + a + ) + + cos + ( + a + ) 0 sin + ( + a + ) 0 0 1 0 0 - + sin + ( + a + ) 0 cos + ( + a + ) 0 0 0 0 1 +
    + +

    例

    + +### HTML + +```html +
    Normal
    +
    Rotated
    +``` + +### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotateY(60deg); + background-color: pink; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", "auto", 180)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/rotatez()/index.md b/files/ja/web/css/transform-function/rotatez()/index.md deleted file mode 100644 index e6bc6dffae..0000000000 --- a/files/ja/web/css/transform-function/rotatez()/index.md +++ /dev/null @@ -1,172 +0,0 @@ ---- -title: rotateZ() -slug: Web/CSS/transform-function/rotateZ() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.rotateZ -translation_of: Web/CSS/transform-function/rotateZ() ---- -{{CSSRef}} - -**`rotateZ()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素の形を変化させずに Z 軸の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -{{EmbedInteractiveExample("pages/css/function-rotateZ.html")}} - -回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。 - -> **Note:** `rotate(a)` または `rotate3d(0, 0, 1, a)` と等価です。 - -> **Note:** 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。 - -## 構文 - -`rotateZ()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。 - -```css -rotateZ(a) -``` - -### 値 - -- `a` - - : {{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。 - - - - - - - - - - - - - - - - - -
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    - この変形は三次元空間に適用され、平面で表すことはできません。 - - cos - ( - a - ) - - sin - ( - a - ) 0 sin - ( - a - ) cos - ( - a - ) 0 0 0 1 - - cos - ( - a - ) - - sin - ( - a - ) 0 0 sin - ( - a - ) cos - ( - a - ) 0 0 0 0 1 0 0 0 0 1 -
    - -

    例

    - -### HTML - -```html -
    Normal
    -
    Rotated
    -``` - -### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.rotated { - transform: rotateZ(45deg); - background-color: pink; -} -``` - -### 結果 - -{{EmbedLiveSample("Examples", "auto", 180)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/rotatez/index.md b/files/ja/web/css/transform-function/rotatez/index.md new file mode 100644 index 0000000000..04b880f9d2 --- /dev/null +++ b/files/ja/web/css/transform-function/rotatez/index.md @@ -0,0 +1,173 @@ +--- +title: rotateZ() +slug: Web/CSS/transform-function/rotateZ +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/rotateZ() +original_slug: Web/CSS/transform-function/rotateZ() +browser-compat: css.types.transform-function.rotateZ +--- +{{CSSRef}} + +**`rotateZ()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素の形を変化させずに Z 軸の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +{{EmbedInteractiveExample("pages/css/function-rotateZ.html")}} + +回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。 + +> **Note:** `rotate(a)` または `rotate3d(0, 0, 1, a)` と等価です。 + +> **Note:** 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。 + +## 構文 + +`rotateZ()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。 + +```css +rotateZ(a) +``` + +### 値 + +- `a` + - : {{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。 + + + + + + + + + + + + + + + + + +
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    + この変形は三次元空間に適用され、平面で表すことはできません。 + + cos + ( + a + ) - + sin + ( + a + ) 0 sin + ( + a + ) cos + ( + a + ) 0 0 0 1 + + cos + ( + a + ) - + sin + ( + a + ) 0 0 sin + ( + a + ) cos + ( + a + ) 0 0 0 0 1 0 0 0 0 1 +
    + +

    例

    + +### HTML + +```html +
    Normal
    +
    Rotated
    +``` + +### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotateZ(45deg); + background-color: pink; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", "auto", 180)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/scale()/index.md b/files/ja/web/css/transform-function/scale()/index.md deleted file mode 100644 index f81c5606b2..0000000000 --- a/files/ja/web/css/transform-function/scale()/index.md +++ /dev/null @@ -1,212 +0,0 @@ ---- -title: scale() -slug: Web/CSS/transform-function/scale() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.scale -translation_of: Web/CSS/transform-function/scale() ---- -{{CSSRef}} - -**`scale()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、二次元平面上における拡縮する変形を定義します。変倍の量がベクトルで定義されるため、水平方向と垂直方向に対して異なる変倍で大きさを変えることができます。結果は {{cssxref("<transform-function>")}} データ型になります。 - -![](scale.png) - -この変倍変形は、二次元のベクトルであることが特徴です。この座標は、それぞれの方向にどれだけ変倍を行うかを定義します。両方の座標が等しい場合、変倍は一様 (_等方的_) で、要素の形が保たれます (これは[相似変換](https://ja.wikipedia.org/wiki/%E8%A1%8C%E5%88%97%E3%81%AE%E7%9B%B8%E4%BC%BC)です)。 - -座標の値が \[-1, 1] の範囲外の場合、変倍は、その座標の方向に要素を拡大します。この範囲内の場合、変倍は、要素をその座標の方向に縮小します。負の場合、変倍は [点対称化](https://ja.wikipedia.org/wiki/点対称) と大きさの変更を行います。1 と等しい場合、変倍は何もしません。 - -> **Note:** `scale()` 関数は、二次元の変換のみに適用されます。三次元空間内での変倍を行うには、 [`scale3d()`]() 関数を使用してください。 - -## 構文 - -`scale()` 関数は、1 つまたは 2 つの値で指定され、それにより各方向に適用される変倍が表現されます。 - -```css -scale(sx) - -scale(sx, sy) -``` - -### 値 - -- `sx` - - : 変倍ベクトルの横座標を表す {{cssxref("<number>")}}。 -- `sy` - - : 変倍ベクトルの縦座標を表す {{cssxref("<number>")}}。定義されない場合、これの既定値は `sx` であり、要素の形を保つ一様な変倍となります。 - - - - - - - - - - - - - - - - - - - - - -
    ℝ^2 上のデカルト座標ℝℙ^2 上の同次座標ℝ^3 上のデカルト座標ℝℙ^3 上の同次座標
    - sx 0 0 sy - - sx 0 0 0 sy 0 0 0 1 - - sx 0 0 0 sy 0 0 0 1 - - sx 0 0 0 0 sy 0 0 0 0 1 0 0 0 0 1 -
    [sx 0 0 sy 0 0]
    - -## アクセシビリティの考慮 - -拡大や縮小のアニメーションは、特定の種類の偏頭痛を引き起こす原因になりやすいので、アクセシビリティの問題になることがあります。ウェブサイトにこのようなアニメーションを含める必要がある場合は、できればサイト全体で、ユーザーがアニメーションを止める制御ができるようしてください。 - -また、 {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} メディア特性を使用することを検討してください。これを使用して[メディアクエリー](/ja/docs/Web/CSS/Media_queries)を書けば、ユーザーがシステムの設定でアニメーションを減らすよう指定した場合にアニメーションを止めることができます。 - -詳しくは以下の文書を参照してください。 - -- [MDN WCAG の理解、ガイドライン 2.3 の解説](/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.3_%e2%80%94_seizures_and_physical_reactions_do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions) -- [Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions) - -## 例 - -

    X と Y の大きさを一緒に変倍する

    - -#### HTML - -```html -
    Normal
    -
    Scaled
    -``` - -#### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.scaled { - transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */ - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Scaling_the_X_and_Y_dimensions_together", "200", "200")}} - -

    X と Y の大きさを別々に変倍し、原点を平行移動させる

    - -#### HTML - -```html -
    Normal
    -
    Scaled
    -``` - -#### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.scaled { - transform: scale(2, 0.5); /* Equal to scaleX(2) scaleY(0.5) */ - transform-origin: left; - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Scaling_X_and_Y_dimensions_separately_and_translating_the_origin", "200", "200")}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} -- {{cssxref("transform-function/scale3d()", "scale3d()")}} diff --git a/files/ja/web/css/transform-function/scale/index.md b/files/ja/web/css/transform-function/scale/index.md new file mode 100644 index 0000000000..ce639a20d1 --- /dev/null +++ b/files/ja/web/css/transform-function/scale/index.md @@ -0,0 +1,213 @@ +--- +title: scale() +slug: Web/CSS/transform-function/scale +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/scale() +original_slug: Web/CSS/transform-function/scale() +browser-compat: css.types.transform-function.scale +--- +{{CSSRef}} + +**`scale()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、二次元平面上における拡縮する変形を定義します。変倍の量がベクトルで定義されるため、水平方向と垂直方向に対して異なる変倍で大きさを変えることができます。結果は {{cssxref("<transform-function>")}} データ型になります。 + +![](scale.png) + +この変倍変形は、二次元のベクトルであることが特徴です。この座標は、それぞれの方向にどれだけ変倍を行うかを定義します。両方の座標が等しい場合、変倍は一様 (_等方的_) で、要素の形が保たれます (これは[相似変換](https://ja.wikipedia.org/wiki/%E8%A1%8C%E5%88%97%E3%81%AE%E7%9B%B8%E4%BC%BC)です)。 + +座標の値が \[-1, 1] の範囲外の場合、変倍は、その座標の方向に要素を拡大します。この範囲内の場合、変倍は、要素をその座標の方向に縮小します。負の場合、変倍は [点対称化](https://ja.wikipedia.org/wiki/点対称) と大きさの変更を行います。1 と等しい場合、変倍は何もしません。 + +> **Note:** `scale()` 関数は、二次元の変換のみに適用されます。三次元空間内での変倍を行うには、 [`scale3d()`]() 関数を使用してください。 + +## 構文 + +`scale()` 関数は、1 つまたは 2 つの値で指定され、それにより各方向に適用される変倍が表現されます。 + +```css +scale(sx) + +scale(sx, sy) +``` + +### 値 + +- `sx` + - : 変倍ベクトルの横座標を表す {{cssxref("<number>")}}。 +- `sy` + - : 変倍ベクトルの縦座標を表す {{cssxref("<number>")}}。定義されない場合、これの既定値は `sx` であり、要素の形を保つ一様な変倍となります。 + + + + + + + + + + + + + + + + + + + + + +
    ℝ^2 上のデカルト座標ℝℙ^2 上の同次座標ℝ^3 上のデカルト座標ℝℙ^3 上の同次座標
    + sx 0 0 sy + + sx 0 0 0 sy 0 0 0 1 + + sx 0 0 0 sy 0 0 0 1 + + sx 0 0 0 0 sy 0 0 0 0 1 0 0 0 0 1 +
    [sx 0 0 sy 0 0]
    + +## アクセシビリティの考慮 + +拡大や縮小のアニメーションは、特定の種類の偏頭痛を引き起こす原因になりやすいので、アクセシビリティの問題になることがあります。ウェブサイトにこのようなアニメーションを含める必要がある場合は、できればサイト全体で、ユーザーがアニメーションを止める制御ができるようしてください。 + +また、 {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} メディア特性を使用することを検討してください。これを使用して[メディアクエリー](/ja/docs/Web/CSS/Media_queries)を書けば、ユーザーがシステムの設定でアニメーションを減らすよう指定した場合にアニメーションを止めることができます。 + +詳しくは以下の文書を参照してください。 + +- [MDN WCAG の理解、ガイドライン 2.3 の解説](/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.3_%e2%80%94_seizures_and_physical_reactions_do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions) +- [Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions) + +## 例 + +

    X と Y の大きさを一緒に変倍する

    + +#### HTML + +```html +
    Normal
    +
    Scaled
    +``` + +#### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */ + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Scaling_the_X_and_Y_dimensions_together", "200", "200")}} + +

    X と Y の大きさを別々に変倍し、原点を平行移動させる

    + +#### HTML + +```html +
    Normal
    +
    Scaled
    +``` + +#### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: scale(2, 0.5); /* Equal to scaleX(2) scaleY(0.5) */ + transform-origin: left; + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Scaling_X_and_Y_dimensions_separately_and_translating_the_origin", "200", "200")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} +- {{cssxref("transform-function/scale3d()", "scale3d()")}} diff --git a/files/ja/web/css/transform-function/scale3d()/index.md b/files/ja/web/css/transform-function/scale3d()/index.md deleted file mode 100644 index 8a8bec6701..0000000000 --- a/files/ja/web/css/transform-function/scale3d()/index.md +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: scale3d() -slug: Web/CSS/transform-function/scale3d() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.scale3d -translation_of: Web/CSS/transform-function/scale3d() ---- -{{CSSRef}} - -**`scale3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、三次元空間において要素を変倍する変形を定義します。 -変倍量はベクトルで定義されるため、それぞれの次元ごとに異なる倍率で変倍することができます。結果は {{cssxref("<transform-function>")}} データ型になります。 - -{{EmbedInteractiveExample("pages/css/function-scale3d.html")}} - -この変倍変形は、三次元ののベクトルであることが特徴です。この座標は、それぞれの方向にどれだけ変倍を行うかを定義します。3 つすべての座標が等しい場合、変倍は一様 (_等方的_) で、要素の形が保たれます (これは[相似変換](https://ja.wikipedia.org/wiki/%E8%A1%8C%E5%88%97%E3%81%AE%E7%9B%B8%E4%BC%BC)です)。 - -座標の値が \[-1, 1] の範囲外の場合、変倍は、その座標の方向に要素を拡大します。この範囲内の場合、変倍は、要素をその座標の方向に縮小します。負の場合、変倍は [点対称化](https://ja.wikipedia.org/wiki/点対称) と大きさの変更を行います。1 と等しい場合、変倍は何もしません。 - -## 構文 - -`scale3d()` 関数は 3 つの値で指定され、それぞれの値はそれぞれの方向に適用される変倍率を表します。 - -```css -scale3d(sx, sy, sz) -``` - -### 値 - -- `sx` - - : {{cssxref("<number>")}} で、変倍ベクトルの横軸を表します。 -- `sy` - - : {{cssxref("<number>")}} で、変倍ベクトルの縦軸を表します。 -- `sz` - - : {{cssxref("<number>")}} で、変倍ベクトルの Z 成分を表します。 - - - - - - - - - - - - - - - - - -
    ℝ^2 上のデカルト座標ℝℙ^2 上の同次座標ℝ^3 上のデカルト座標ℝℙ^3 上の同次座標
    - この変形は三次元空間に適用され、平面で表すことはできません。 - - sx 0 0 0 sy 0 0 0 sz - - sx 0 0 0 0 sy 0 0 0 0 sz 0 0 0 0 1 -
    - -## 例 - -

    原点の変更なし

    - -#### HTML - -```html -
    Normal
    -
    Scaled
    -``` - -#### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.scaled { - transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px); - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Without_changing_the_origin","200","200")}} - -

    変形の原点を移動

    - -#### HTML - -```html -
    Normal
    -
    Scaled
    -``` - -#### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.scaled { - transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px); - transform-origin: left; - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Translating_the_origin_of_the_transformation","200","200")}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} -- [`scaleZ()`](/ja/docs/Web/CSS/transform-function/scaleZ()) -- [`translate3d()`](/ja/docs/Web/CSS/transform-function/translate3d()) -- [`rotate3d()`](/ja/docs/Web/CSS/transform-function/rotate3d()) diff --git a/files/ja/web/css/transform-function/scale3d/index.md b/files/ja/web/css/transform-function/scale3d/index.md new file mode 100644 index 0000000000..38937f183f --- /dev/null +++ b/files/ja/web/css/transform-function/scale3d/index.md @@ -0,0 +1,172 @@ +--- +title: scale3d() +slug: Web/CSS/transform-function/scale3d +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/scale3d() +original_slug: Web/CSS/transform-function/scale3d() +browser-compat: css.types.transform-function.scale3d +--- +{{CSSRef}} + +**`scale3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、三次元空間において要素を変倍する変形を定義します。 +変倍量はベクトルで定義されるため、それぞれの次元ごとに異なる倍率で変倍することができます。結果は {{cssxref("<transform-function>")}} データ型になります。 + +{{EmbedInteractiveExample("pages/css/function-scale3d.html")}} + +この変倍変形は、三次元ののベクトルであることが特徴です。この座標は、それぞれの方向にどれだけ変倍を行うかを定義します。3 つすべての座標が等しい場合、変倍は一様 (_等方的_) で、要素の形が保たれます (これは[相似変換](https://ja.wikipedia.org/wiki/%E8%A1%8C%E5%88%97%E3%81%AE%E7%9B%B8%E4%BC%BC)です)。 + +座標の値が \[-1, 1] の範囲外の場合、変倍は、その座標の方向に要素を拡大します。この範囲内の場合、変倍は、要素をその座標の方向に縮小します。負の場合、変倍は [点対称化](https://ja.wikipedia.org/wiki/点対称) と大きさの変更を行います。1 と等しい場合、変倍は何もしません。 + +## 構文 + +`scale3d()` 関数は 3 つの値で指定され、それぞれの値はそれぞれの方向に適用される変倍率を表します。 + +```css +scale3d(sx, sy, sz) +``` + +### 値 + +- `sx` + - : {{cssxref("<number>")}} で、変倍ベクトルの横軸を表します。 +- `sy` + - : {{cssxref("<number>")}} で、変倍ベクトルの縦軸を表します。 +- `sz` + - : {{cssxref("<number>")}} で、変倍ベクトルの Z 成分を表します。 + + + + + + + + + + + + + + + + + +
    ℝ^2 上のデカルト座標ℝℙ^2 上の同次座標ℝ^3 上のデカルト座標ℝℙ^3 上の同次座標
    + この変形は三次元空間に適用され、平面で表すことはできません。 + + sx 0 0 0 sy 0 0 0 sz + + sx 0 0 0 0 sy 0 0 0 0 sz 0 0 0 0 1 +
    + +## 例 + +

    原点の変更なし

    + +#### HTML + +```html +
    Normal
    +
    Scaled
    +``` + +#### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px); + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Without_changing_the_origin","200","200")}} + +

    変形の原点を移動

    + +#### HTML + +```html +
    Normal
    +
    Scaled
    +``` + +#### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px); + transform-origin: left; + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Translating_the_origin_of_the_transformation","200","200")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} +- [`scaleZ()`](/ja/docs/Web/CSS/transform-function/scaleZ()) +- [`translate3d()`](/ja/docs/Web/CSS/transform-function/translate3d()) +- [`rotate3d()`](/ja/docs/Web/CSS/transform-function/rotate3d()) diff --git a/files/ja/web/css/transform-function/scalex()/index.md b/files/ja/web/css/transform-function/scalex()/index.md deleted file mode 100644 index 231094820a..0000000000 --- a/files/ja/web/css/transform-function/scalex()/index.md +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: scaleX() -slug: Web/CSS/transform-function/scaleX() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.scaleX -translation_of: Web/CSS/transform-function/scaleX() ---- -{{CSSRef}} - -**`scaleX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を X 軸に沿って (水平に) 変倍する変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -![](scalex.png) - -これは要素のそれぞれの点の横座標を一定の係数で修正しますが、係数が 1 である場合はこの関数が恒等変換になるので例外です。変倍は等方性ではなく、要素の角度は保存されません。 `scaleX(-1)` は[軸の線対称](https://en.wikipedia.org/wiki/Axial_symmetry)を定義し、垂直軸は ({{cssxref("transform-origin")}} プロパティの指定通りに) 原点を通過します。 - -> **Note:** `scaleX(sx)` は `scale(sx, 1)` または `scale3d(sx, 1, 1)` と等価です。 - -## 構文 - -```css -scaleX(s) -``` - -### 値 - -- `s` - - : {{cssxref("<number>")}} で、要素のそれぞれの点の横座標に適用される変倍率を表します。 - - - - - - - - - - - - - - - - - - - - - -
    ℝ^2 上のデカルト座標ℝℙ^2 上の同次座標ℝ^3 上のデカルト座標ℝℙ^3 上の同次座標
    - s 0 0 1 - - s 0 0 0 1 0 0 0 1 - - s 0 0 0 1 0 0 0 1 - - s 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 -
    [s 0 0 1 0 0]
    - -

    例

    - -### HTML - -```html -
    Normal
    -
    Scaled
    -``` - -### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.scaled { - transform: scaleX(0.6); - background-color: pink; -} -``` - -### 結果 - -{{EmbedLiveSample("Examples","200","200")}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [`scaleY()`]() -- [`scaleZ()`]() -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} -- {{cssxref("transform-origin")}} diff --git a/files/ja/web/css/transform-function/scalex/index.md b/files/ja/web/css/transform-function/scalex/index.md new file mode 100644 index 0000000000..c1652028ce --- /dev/null +++ b/files/ja/web/css/transform-function/scalex/index.md @@ -0,0 +1,165 @@ +--- +title: scaleX() +slug: Web/CSS/transform-function/scaleX +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/scaleX() +original_slug: Web/CSS/transform-function/scaleX() +browser-compat: css.types.transform-function.scaleX +--- +{{CSSRef}} + +**`scaleX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を X 軸に沿って (水平に) 変倍する変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +![](scalex.png) + +これは要素のそれぞれの点の横座標を一定の係数で修正しますが、係数が 1 である場合はこの関数が恒等変換になるので例外です。変倍は等方性ではなく、要素の角度は保存されません。 `scaleX(-1)` は[軸の線対称](https://en.wikipedia.org/wiki/Axial_symmetry)を定義し、垂直軸は ({{cssxref("transform-origin")}} プロパティの指定通りに) 原点を通過します。 + +> **Note:** `scaleX(sx)` は `scale(sx, 1)` または `scale3d(sx, 1, 1)` と等価です。 + +## 構文 + +```css +scaleX(s) +``` + +### 値 + +- `s` + - : {{cssxref("<number>")}} で、要素のそれぞれの点の横座標に適用される変倍率を表します。 + + + + + + + + + + + + + + + + + + + + + +
    ℝ^2 上のデカルト座標ℝℙ^2 上の同次座標ℝ^3 上のデカルト座標ℝℙ^3 上の同次座標
    + s 0 0 1 + + s 0 0 0 1 0 0 0 1 + + s 0 0 0 1 0 0 0 1 + + s 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 +
    [s 0 0 1 0 0]
    + +

    例

    + +### HTML + +```html +
    Normal
    +
    Scaled
    +``` + +### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: scaleX(0.6); + background-color: pink; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples","200","200")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`scaleY()`]() +- [`scaleZ()`]() +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} +- {{cssxref("transform-origin")}} diff --git a/files/ja/web/css/transform-function/scaley()/index.md b/files/ja/web/css/transform-function/scaley()/index.md deleted file mode 100644 index 14ffbff444..0000000000 --- a/files/ja/web/css/transform-function/scaley()/index.md +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: scaleY() -slug: Web/CSS/transform-function/scaleY() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.scaleY -translation_of: Web/CSS/transform-function/scaleY() ---- -{{CSSRef}} - -**`scaleY()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を Y 軸に沿って (垂直に) 変倍する変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -![](scaley.png) - -これは要素のそれぞれの点の横座標を一定の係数で修正しますが、係数が 1 である場合はこの関数が恒等変換になるので例外です。変倍は等方性ではなく、要素の角度は保存されません。 `scaleY(-1)` は[軸の線対称](https://en.wikipedia.org/wiki/Axial_symmetry)を定義し、水平軸は ({{cssxref("transform-origin")}} プロパティの指定通りに) 原点を通過します。 - -> **Note:** `scaleY(sy)` は `scale(1, sy)` または `scale3d(1, sy, 1)` と等価です。 -> -> `transform: rotateX(180deg);`  === `transform: scaleY(-1);` - -## 構文 - -```css -scaleY(s) -``` - -### 値 - -- `s` - - : {{cssxref("<number>")}} で、要素のそれぞれの点の縦座標に適用する変倍係数を表します。 - - - - - - - - - - - - - - - - - - - - - -
    ℝ^2 上のデカルト座標ℝℙ^2 上の同次座標ℝ^3 上のデカルト座標ℝℙ^3 上の同次座標
    - 1 0 0 s - - 1 0 0 0 s 0 0 0 1 - - 1 0 0 0 s 0 0 0 1 - - 1 0 0 0 0 s 0 0 0 0 1 0 0 0 0 1 -
    [1 0 0 s 0 0]
    - -

    例

    - -### HTML - -```html -
    Normal
    -
    Scaled
    -``` - -### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.scaled { - transform: scaleY(0.6); - background-color: pink; -} -``` - -### 結果 - -{{EmbedLiveSample("Examples", 200, 200)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [`scaleX()`]() -- [`scaleZ()`]() -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} -- {{cssxref("transform-origin")}} diff --git a/files/ja/web/css/transform-function/scaley/index.md b/files/ja/web/css/transform-function/scaley/index.md new file mode 100644 index 0000000000..6228d6b18e --- /dev/null +++ b/files/ja/web/css/transform-function/scaley/index.md @@ -0,0 +1,167 @@ +--- +title: scaleY() +slug: Web/CSS/transform-function/scaleY +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/scaleY() +original_slug: Web/CSS/transform-function/scaleY() +browser-compat: css.types.transform-function.scaleY +--- +{{CSSRef}} + +**`scaleY()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を Y 軸に沿って (垂直に) 変倍する変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +![](scaley.png) + +これは要素のそれぞれの点の横座標を一定の係数で修正しますが、係数が 1 である場合はこの関数が恒等変換になるので例外です。変倍は等方性ではなく、要素の角度は保存されません。 `scaleY(-1)` は[軸の線対称](https://en.wikipedia.org/wiki/Axial_symmetry)を定義し、水平軸は ({{cssxref("transform-origin")}} プロパティの指定通りに) 原点を通過します。 + +> **Note:** `scaleY(sy)` は `scale(1, sy)` または `scale3d(1, sy, 1)` と等価です。 +> +> `transform: rotateX(180deg);`  === `transform: scaleY(-1);` + +## 構文 + +```css +scaleY(s) +``` + +### 値 + +- `s` + - : {{cssxref("<number>")}} で、要素のそれぞれの点の縦座標に適用する変倍係数を表します。 + + + + + + + + + + + + + + + + + + + + + +
    ℝ^2 上のデカルト座標ℝℙ^2 上の同次座標ℝ^3 上のデカルト座標ℝℙ^3 上の同次座標
    + 1 0 0 s + + 1 0 0 0 s 0 0 0 1 + + 1 0 0 0 s 0 0 0 1 + + 1 0 0 0 0 s 0 0 0 0 1 0 0 0 0 1 +
    [1 0 0 s 0 0]
    + +

    例

    + +### HTML + +```html +
    Normal
    +
    Scaled
    +``` + +### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: scaleY(0.6); + background-color: pink; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", 200, 200)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`scaleX()`]() +- [`scaleZ()`]() +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} +- {{cssxref("transform-origin")}} diff --git a/files/ja/web/css/transform-function/scalez()/index.md b/files/ja/web/css/transform-function/scalez()/index.md deleted file mode 100644 index ed78c98b18..0000000000 --- a/files/ja/web/css/transform-function/scalez()/index.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: scaleZ() -slug: Web/CSS/transform-function/scaleZ() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.scaleZ ---- -{{CSSRef}} - -**`scaleZ()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を Z 軸に沿って変倍する変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -{{EmbedInteractiveExample("pages/css/function-scaleZ.html")}} - -これは要素のそれぞれの点の Z 座標を一定の係数で修正しますが、係数が 1 である場合はこの関数が恒等変換になるので例外です。変倍は等方性ではなく、要素の角度は保存されません。 `scaleZ(-1)` は[軸の線対称](https://en.wikipedia.org/wiki/Axial_symmetry)を定義し、Z 軸は ({{cssxref("transform-origin")}} プロパティの指定通りに) 原点を通過します。 - -上記のデモでは、[`perspective: 550px;`](/ja/docs/Web/CSS/perspective) (三次元空間を作るため) と [`transform-style: preserve-3d;`](/ja/docs/Web/CSS/transform-style) (立方体の 6 つの面である子を三次元空間に配置) を立方体に設定しました。 - -> **Note:** `scaleZ(sz)` は `scale3d(1, 1, sz)` と等価です。 - -## 構文 - -```css -scaleZ(s) -``` - -### 値 - -- `s` - - : {{cssxref("<number>")}} で、要素のそれぞれの点の Z 座標に適用される変倍率を表します。 - - - - - - - - - - - - - - - - - -
    ℝ^2 上のデカルト座標ℝℙ^2 上の同次座標ℝ^3 上のデカルト座標ℝℙ^3 上の同次座標
    - この変形は三次元空間に適用され、平面で表すことはできません。 - - 1 0 0 0 1 0 0 0 s - - 1 0 0 0 0 1 0 0 0 0 s 0 0 0 0 1 -
    - -

    例

    - -### HTML - -```html -
    Normal
    -
    Translated
    -
    Scaled
    -``` - -### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.perspective { - /* 三次元空間を生成するために視点を含める */ - transform: perspective(400px) translateZ(-100px); - background-color: limegreen; -} - -.scaled-translated { - /* 三次元空間を生成するために視点を含める */ - transform: perspective(400px) scaleZ(2) translateZ(-100px); - background-color: pink; -} -``` - -### 結果 - -{{EmbedLiveSample("Examples", 200, 300)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [`scaleX()`](/ja/docs/Web/CSS/transform-function/scaleX()) -- [`scaleY()`](/ja/docs/Web/CSS/transform-function/scaleY()) -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} -- {{cssxref("transform-origin")}} diff --git a/files/ja/web/css/transform-function/scalez/index.md b/files/ja/web/css/transform-function/scalez/index.md new file mode 100644 index 0000000000..b81aa36b4f --- /dev/null +++ b/files/ja/web/css/transform-function/scalez/index.md @@ -0,0 +1,143 @@ +--- +title: scaleZ() +slug: Web/CSS/transform-function/scaleZ +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +original_slug: Web/CSS/transform-function/scaleZ() +browser-compat: css.types.transform-function.scaleZ +--- +{{CSSRef}} + +**`scaleZ()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を Z 軸に沿って変倍する変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +{{EmbedInteractiveExample("pages/css/function-scaleZ.html")}} + +これは要素のそれぞれの点の Z 座標を一定の係数で修正しますが、係数が 1 である場合はこの関数が恒等変換になるので例外です。変倍は等方性ではなく、要素の角度は保存されません。 `scaleZ(-1)` は[軸の線対称](https://en.wikipedia.org/wiki/Axial_symmetry)を定義し、Z 軸は ({{cssxref("transform-origin")}} プロパティの指定通りに) 原点を通過します。 + +上記のデモでは、[`perspective: 550px;`](/ja/docs/Web/CSS/perspective) (三次元空間を作るため) と [`transform-style: preserve-3d;`](/ja/docs/Web/CSS/transform-style) (立方体の 6 つの面である子を三次元空間に配置) を立方体に設定しました。 + +> **Note:** `scaleZ(sz)` は `scale3d(1, 1, sz)` と等価です。 + +## 構文 + +```css +scaleZ(s) +``` + +### 値 + +- `s` + - : {{cssxref("<number>")}} で、要素のそれぞれの点の Z 座標に適用される変倍率を表します。 + + + + + + + + + + + + + + + + + +
    ℝ^2 上のデカルト座標ℝℙ^2 上の同次座標ℝ^3 上のデカルト座標ℝℙ^3 上の同次座標
    + この変形は三次元空間に適用され、平面で表すことはできません。 + + 1 0 0 0 1 0 0 0 s + + 1 0 0 0 0 1 0 0 0 0 s 0 0 0 0 1 +
    + +

    例

    + +### HTML + +```html +
    Normal
    +
    Translated
    +
    Scaled
    +``` + +### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.perspective { + /* 三次元空間を生成するために視点を含める */ + transform: perspective(400px) translateZ(-100px); + background-color: limegreen; +} + +.scaled-translated { + /* 三次元空間を生成するために視点を含める */ + transform: perspective(400px) scaleZ(2) translateZ(-100px); + background-color: pink; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", 200, 300)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`scaleX()`](/ja/docs/Web/CSS/transform-function/scaleX()) +- [`scaleY()`](/ja/docs/Web/CSS/transform-function/scaleY()) +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} +- {{cssxref("transform-origin")}} diff --git a/files/ja/web/css/transform-function/skew()/index.md b/files/ja/web/css/transform-function/skew()/index.md deleted file mode 100644 index 826a6e12fc..0000000000 --- a/files/ja/web/css/transform-function/skew()/index.md +++ /dev/null @@ -1,244 +0,0 @@ ---- -title: skew() -slug: Web/CSS/transform-function/skew() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.skew -translation_of: Web/CSS/transform-function/skew() ---- -{{CSSRef}} - -**`skew()`** は [CSS](/ja/docs/Web/CSS) [関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上でゆがめる変換を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -{{EmbedInteractiveExample("pages/css/function-skew.html")}} - -この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を水平および垂直方向に指定された角度でゆがませます。要素のそれぞれの角を掴んで、一定の角度に沿って引っ張ったような効果があります。 - -それぞれの点の座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。 - -## 構文 - -`skew()` 関数は 1 つまたは 2 つの値を指定し、それぞれの軸に適用されるゆがみの量を表します。1 つだけ値を設定した場合は X 軸に使用され、 Y 軸方向の変形は行いません。 - -```css -skew(ax) - -skew(ax, ay) -``` - -### 値 - -- `ax` - - : {{cssxref("<angle>")}} で、 X 軸 (横座標) 方向にゆがめるのに使用する角度を表します。 -- `ay` - - : {{cssxref("<angle>")}} で、 Y 軸 (縦座標) 方向にゆがめるのに使用する角度を表します。定義されていない場合、既定値は `0` となり、水平方向にのみゆがめます。 - - - - - - - - - - - - - - - - - - - - - -
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    - 1 tan - ( - ax - ) - tan - ( - ay - ) 1 - - 1 tan - ( - ax - ) 0 tan - ( - ay - ) 1 0 0 0 1 - - 1 tan - ( - ax - ) 0 tan - ( - ay - ) 1 0 0 0 1 - - 1 tan - ( - ax - ) 0 0 tan - ( - ay - ) 1 0 0 0 0 1 0 0 0 0 1 -
    [1 tan(ay) tan(ax) 1 0 0]
    - -## 例 - -

    X 軸のみの変形

    - -#### HTML - -```html -
    Normal
    -
    Skewed
    -``` - -#### CSS - -```css -body { - margin: 20px; -} - -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.skewed { - transform: skew(10deg); /* Equal to skewX(10deg) */ - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Skewing_on_the_x-axis_only", 200, 200)}} - -

    両方の軸の変形

    - -#### HTML - -```html -
    Normal
    -
    Skewed
    -``` - -#### CSS - -```css -body { - margin: 20px; -} - -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.skewed { - transform: skew(10deg, 10deg); - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Skewing_on_both_axes", 200, 200)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} -- [skewX()](/ja/docs/Web/CSS/transform-function/skewX()) -- [skewY()](/ja/docs/Web/CSS/transform-function/skewY()) diff --git a/files/ja/web/css/transform-function/skew/index.md b/files/ja/web/css/transform-function/skew/index.md new file mode 100644 index 0000000000..9c6abb22a0 --- /dev/null +++ b/files/ja/web/css/transform-function/skew/index.md @@ -0,0 +1,245 @@ +--- +title: skew() +slug: Web/CSS/transform-function/skew +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/skew() +original_slug: Web/CSS/transform-function/skew() +browser-compat: css.types.transform-function.skew +--- +{{CSSRef}} + +**`skew()`** は [CSS](/ja/docs/Web/CSS) [関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上でゆがめる変換を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +{{EmbedInteractiveExample("pages/css/function-skew.html")}} + +この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を水平および垂直方向に指定された角度でゆがませます。要素のそれぞれの角を掴んで、一定の角度に沿って引っ張ったような効果があります。 + +それぞれの点の座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。 + +## 構文 + +`skew()` 関数は 1 つまたは 2 つの値を指定し、それぞれの軸に適用されるゆがみの量を表します。1 つだけ値を設定した場合は X 軸に使用され、 Y 軸方向の変形は行いません。 + +```css +skew(ax) + +skew(ax, ay) +``` + +### 値 + +- `ax` + - : {{cssxref("<angle>")}} で、 X 軸 (横座標) 方向にゆがめるのに使用する角度を表します。 +- `ay` + - : {{cssxref("<angle>")}} で、 Y 軸 (縦座標) 方向にゆがめるのに使用する角度を表します。定義されていない場合、既定値は `0` となり、水平方向にのみゆがめます。 + + + + + + + + + + + + + + + + + + + + + +
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    + 1 tan + ( + ax + ) + tan + ( + ay + ) 1 + + 1 tan + ( + ax + ) 0 tan + ( + ay + ) 1 0 0 0 1 + + 1 tan + ( + ax + ) 0 tan + ( + ay + ) 1 0 0 0 1 + + 1 tan + ( + ax + ) 0 0 tan + ( + ay + ) 1 0 0 0 0 1 0 0 0 0 1 +
    [1 tan(ay) tan(ax) 1 0 0]
    + +## 例 + +

    X 軸のみの変形

    + +#### HTML + +```html +
    Normal
    +
    Skewed
    +``` + +#### CSS + +```css +body { + margin: 20px; +} + +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.skewed { + transform: skew(10deg); /* Equal to skewX(10deg) */ + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Skewing_on_the_x-axis_only", 200, 200)}} + +

    両方の軸の変形

    + +#### HTML + +```html +
    Normal
    +
    Skewed
    +``` + +#### CSS + +```css +body { + margin: 20px; +} + +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.skewed { + transform: skew(10deg, 10deg); + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Skewing_on_both_axes", 200, 200)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} +- [skewX()](/ja/docs/Web/CSS/transform-function/skewX()) +- [skewY()](/ja/docs/Web/CSS/transform-function/skewY()) diff --git a/files/ja/web/css/transform-function/skewx()/index.md b/files/ja/web/css/transform-function/skewx()/index.md deleted file mode 100644 index 353c7dd058..0000000000 --- a/files/ja/web/css/transform-function/skewx()/index.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: skewX() -slug: Web/CSS/transform-function/skewX() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.skewX -translation_of: Web/CSS/transform-function/skewX() ---- -{{CSSRef}} - -**`skewX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上で水平方向にゆがめる変換を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -{{EmbedInteractiveExample("pages/css/function-skewX.html")}} - -この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を水平方向に指定された角度でゆがませます。それぞれの点の横座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。 - -> **Note:** `skewX(a)` は `skew(a)` と等価です。 - -## 構文 - -```css -skewX(a) -``` - -### 値 - -- `a` - - : {{cssxref("<angle>")}} で、横座標方向にゆがめるのに使用する角度を表します。 - - - - - - - - - - - - - - - - - - - - - -
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    - 1 tan - ( - a - ) - 0 1 - - 1 tan - ( - a - ) 0 0 1 0 0 0 1 - - 1 tan - ( - a - ) 0 0 1 0 0 0 1 - - 1 tan - ( - a - ) 0 0 0 1 0 0 0 0 1 0 0 0 0 1 -
    [1 0 tan(a) 1 0 0]
    - -

    例

    - -### HTML - -```html -
    Normal
    -
    Skewed
    -``` - -### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.skewed { - transform: skewX(10deg); /* skew(10deg) と同じ */ - background-color: pink; -} -``` - -### 結果 - -{{EmbedLiveSample("Examples", 200, 200)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/skewx/index.md b/files/ja/web/css/transform-function/skewx/index.md new file mode 100644 index 0000000000..aa774cbd9a --- /dev/null +++ b/files/ja/web/css/transform-function/skewx/index.md @@ -0,0 +1,183 @@ +--- +title: skewX() +slug: Web/CSS/transform-function/skewX +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/skewX() +original_slug: Web/CSS/transform-function/skewX() +browser-compat: css.types.transform-function.skewX +--- +{{CSSRef}} + +**`skewX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上で水平方向にゆがめる変換を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +{{EmbedInteractiveExample("pages/css/function-skewX.html")}} + +この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を水平方向に指定された角度でゆがませます。それぞれの点の横座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。 + +> **Note:** `skewX(a)` は `skew(a)` と等価です。 + +## 構文 + +```css +skewX(a) +``` + +### 値 + +- `a` + - : {{cssxref("<angle>")}} で、横座標方向にゆがめるのに使用する角度を表します。 + + + + + + + + + + + + + + + + + + + + + +
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    + 1 tan + ( + a + ) + 0 1 + + 1 tan + ( + a + ) 0 0 1 0 0 0 1 + + 1 tan + ( + a + ) 0 0 1 0 0 0 1 + + 1 tan + ( + a + ) 0 0 0 1 0 0 0 0 1 0 0 0 0 1 +
    [1 0 tan(a) 1 0 0]
    + +

    例

    + +### HTML + +```html +
    Normal
    +
    Skewed
    +``` + +### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.skewed { + transform: skewX(10deg); /* skew(10deg) と同じ */ + background-color: pink; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", 200, 200)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/skewy()/index.md b/files/ja/web/css/transform-function/skewy()/index.md deleted file mode 100644 index 07a978b3f5..0000000000 --- a/files/ja/web/css/transform-function/skewy()/index.md +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: skewY() -slug: Web/CSS/transform-function/skewY() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.skewY -translation_of: Web/CSS/transform-function/skewY() ---- -{{CSSRef}} - -**`skewY()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上で垂直方向にゆがめる変換を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -{{EmbedInteractiveExample("pages/css/function-skewY.html")}} - -この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を垂直方向に指定された角度でゆがませます。それぞれの点の縦座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。 - -## 構文 - -```css -skewY(a) -``` - -### 値 - -- `a` - - : {{cssxref("<angle>")}} で、縦座標方向にゆがめるのに使用する角度を表します。 - - - - - - - - - - - - - - - - - - - - - -
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    - 1 0 tan - ( - a - ) 1 - - 1 0 0 tan - ( - a - ) 1 0 0 0 1 - - 1 0 0 tan - ( - a - ) 1 0 0 0 1 - - 1 0 0 0 tan - ( - a - ) 1 0 0 0 0 1 0 0 0 0 1 -
    [1 tan(a) 0 1 0 0]
    - -

    例

    - -### HTML - -```html -
    Normal
    -
    Skewed
    -``` - -### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.skewed { - transform: skewY(40deg); - background-color: pink; -} -``` - -### 結果 - -{{EmbedLiveSample("Examples", 200, 200)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/translate()/index.md b/files/ja/web/css/transform-function/translate()/index.md deleted file mode 100644 index e3b28bdc1a..0000000000 --- a/files/ja/web/css/transform-function/translate()/index.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -title: translate() -slug: Web/CSS/transform-function/translate() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.translate -translation_of: Web/CSS/transform-function/translate() ---- -{{CSSRef}} - -**`translate()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を水平方向や垂直方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -![](translate.png) - -この変換は、二次元ベクトルであることが特徴です。それぞれの方向にどれだけ要素が移動するかの座標を定義します。 - -## 構文 - -```css -/* 単一の 値 */ -transform: translate(200px); -transform: translate(50%); - -/* 二つの 値 */ -transform: translate(100px, 200px); -transform: translate(100px, 50%); -transform: translate(30%, 200px); -transform: translate(30%, 50%); -``` - -### 値 - -- 単一の `` values - - : この値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} で、変換ベクトルの横軸 (水平方向、X 座標) を表します。変換ベクトルの縦軸 (垂直方向、Y 座標) は `0` に設定されます。例えば、 `translate(2)` は `translate(2, 0)` と等価です。パーセント値の場合は、 {{cssxref("transform-box")}} で定義される参照ボックスの幅からの相対値です。 -- 二つの `` 値 - - : この値は 2 つの {{cssxref("<length>")}} または {{cssxref("<percentage>")}} 値で、変換ベクトルの横軸 (水平方向、X 座標) と縦軸 (垂直方向、Y 座標) を表します。1 つ目にパーセント値が使用された場合は、 {{cssxref("transform-box")}} で定義された参照ボックスの幅からの相対値で、2 つ目にパーセント値が使用された場合は、高さからの相対値です。 - - - - - - - - - - - - - - - - - - - - - -
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    -

    - ℝ^2 では線形変換ではないので、デカルト座標の行列で表すことはできない。 -

    -     		- 1 0 tx 0 1 ty 0 0 1 - - 1 0 tx 0 1 ty 0 0 1 - - 1 0 0 tx 0 1 0 ty 0 0 1 0 0 0 0 1 -
    [1 0 0 1 tx ty]
    - -### 形式文法 - -```css -translate({{cssxref("<length-percentage>")}} , {{cssxref("<length-percentage>")}}?) -``` - -## 例 - -

    単一軸を使用した変形

    - -#### HTML - -```html -
    Static
    -
    Moved
    -
    Static
    -``` - -#### CSS - -```css -div { - width: 60px; - height: 60px; - background-color: skyblue; -} - -.moved { - transform: translate(10px); /* translateX(10px) または translate(10px, 0) と同じ */ - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}} - -

    Y 軸と X 軸の変換の組み合わせ

    - -#### HTML - -```html -
    Static
    -
    Moved
    -
    Static
    -``` - -#### CSS - -```css -div { - width: 60px; - height: 60px; - background-color: skyblue; -} - -.moved { - transform: translate(10px, 10px); - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/translate/index.md b/files/ja/web/css/transform-function/translate/index.md new file mode 100644 index 0000000000..0af964a8c0 --- /dev/null +++ b/files/ja/web/css/transform-function/translate/index.md @@ -0,0 +1,200 @@ +--- +title: translate() +slug: Web/CSS/transform-function/translate +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/translate() +original_slug: Web/CSS/transform-function/translate() +browser-compat: css.types.transform-function.translate +--- +{{CSSRef}} + +**`translate()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を水平方向や垂直方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +![](translate.png) + +この変換は、二次元ベクトルであることが特徴です。それぞれの方向にどれだけ要素が移動するかの座標を定義します。 + +## 構文 + +```css +/* 単一の 値 */ +transform: translate(200px); +transform: translate(50%); + +/* 二つの 値 */ +transform: translate(100px, 200px); +transform: translate(100px, 50%); +transform: translate(30%, 200px); +transform: translate(30%, 50%); +``` + +### 値 + +- 単一の `` values + - : この値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} で、変換ベクトルの横軸 (水平方向、X 座標) を表します。変換ベクトルの縦軸 (垂直方向、Y 座標) は `0` に設定されます。例えば、 `translate(2)` は `translate(2, 0)` と等価です。パーセント値の場合は、 {{cssxref("transform-box")}} で定義される参照ボックスの幅からの相対値です。 +- 二つの `` 値 + - : この値は 2 つの {{cssxref("<length>")}} または {{cssxref("<percentage>")}} 値で、変換ベクトルの横軸 (水平方向、X 座標) と縦軸 (垂直方向、Y 座標) を表します。1 つ目にパーセント値が使用された場合は、 {{cssxref("transform-box")}} で定義された参照ボックスの幅からの相対値で、2 つ目にパーセント値が使用された場合は、高さからの相対値です。 + + + + + + + + + + + + + + + + + + + + + +
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    +

    + ℝ^2 では線形変換ではないので、デカルト座標の行列で表すことはできない。 +

    +     		+ 1 0 tx 0 1 ty 0 0 1 + + 1 0 tx 0 1 ty 0 0 1 + + 1 0 0 tx 0 1 0 ty 0 0 1 0 0 0 0 1 +
    [1 0 0 1 tx ty]
    + +### 形式文法 + +```css +translate({{cssxref("<length-percentage>")}} , {{cssxref("<length-percentage>")}}?) +``` + +## 例 + +

    単一軸を使用した変形

    + +#### HTML + +```html +
    Static
    +
    Moved
    +
    Static
    +``` + +#### CSS + +```css +div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translate(10px); /* translateX(10px) または translate(10px, 0) と同じ */ + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}} + +

    Y 軸と X 軸の変換の組み合わせ

    + +#### HTML + +```html +
    Static
    +
    Moved
    +
    Static
    +``` + +#### CSS + +```css +div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translate(10px, 10px); + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/translate3d()/index.md b/files/ja/web/css/transform-function/translate3d()/index.md deleted file mode 100644 index 0d614fbd1a..0000000000 --- a/files/ja/web/css/transform-function/translate3d()/index.md +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: translate3d() -slug: Web/CSS/transform-function/translate3d() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.translate3d -translation_of: Web/CSS/transform-function/translate3d() ---- -{{CSSRef}} - -**`translate3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を三次元空間内で再配置します。返値は {{cssxref("<transform-function>")}} データ型です。 - -{{EmbedInteractiveExample("pages/css/function-translate3d.html")}} - -この変換は三次元ベクトルであることが特徴です。座標は要素がそれぞれの方向にどれだけ移動するかを定義します。 - -## 構文 - -```css -translate3d(tx, ty, tz) -``` - -### 値 - -- `tx` - - : 変換ベクトルの横座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。 -- `ty` - - : 変換ベクトルの縦座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。 -- `tz` - - : 変換ベクトルの z 成分を表す {{cssxref("<length>")}} です。 {{cssxref("<percentage>")}} 値は指定できません。この場合、これを含む座標変換は無効とされます。 - - - - - - - - - - - - - - - - - -
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    -

    - ℝ^2 では線形変換ではないので、デカルト座標の行列で表すことはできない。 -

    -     		- ℝ^3 では線形変換ではないので、デカルト座標の行列で表すことはできない。 - - 1 0 0 tx 0 1 0 ty 0 0 1 tz 0 0 0 1 -
    - -## 例 - -

    単一軸の座標変換の使用

    - -#### HTML - -```html -
    Static
    -
    Moved
    -
    Static
    -``` - -#### CSS - -```css -div { - width: 60px; - height: 60px; - background-color: skyblue; -} - -.moved { - /* Equivalent to perspective(500px) translateX(10px) */ - transform: perspective(500px) translate3d(10px, 0, 0px); - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Using_a_single_axis_translation", 250, 250)}} - -

    z 軸と x 軸を組み合わせた座標変換

    - -#### HTML - -```html -
    Static
    -
    Moved
    -
    Static
    -``` - -#### CSS - -```css -div { - width: 60px; - height: 60px; - background-color: skyblue; -} - -.moved { - transform: perspective(500px) translate3d(10px, 0, 100px); - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation", 250, 250)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/translate3d/index.md b/files/ja/web/css/transform-function/translate3d/index.md new file mode 100644 index 0000000000..26bd0785b4 --- /dev/null +++ b/files/ja/web/css/transform-function/translate3d/index.md @@ -0,0 +1,153 @@ +--- +title: translate3d() +slug: Web/CSS/transform-function/translate3d +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/translate3d() +original_slug: Web/CSS/transform-function/translate3d() +browser-compat: css.types.transform-function.translate3d +--- +{{CSSRef}} + +**`translate3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を三次元空間内で再配置します。返値は {{cssxref("<transform-function>")}} データ型です。 + +{{EmbedInteractiveExample("pages/css/function-translate3d.html")}} + +この変換は三次元ベクトルであることが特徴です。座標は要素がそれぞれの方向にどれだけ移動するかを定義します。 + +## 構文 + +```css +translate3d(tx, ty, tz) +``` + +### 値 + +- `tx` + - : 変換ベクトルの横座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。 +- `ty` + - : 変換ベクトルの縦座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。 +- `tz` + - : 変換ベクトルの z 成分を表す {{cssxref("<length>")}} です。 {{cssxref("<percentage>")}} 値は指定できません。この場合、これを含む座標変換は無効とされます。 + + + + + + + + + + + + + + + + + +
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    +

    + ℝ^2 では線形変換ではないので、デカルト座標の行列で表すことはできない。 +

    +     		+ ℝ^3 では線形変換ではないので、デカルト座標の行列で表すことはできない。 + + 1 0 0 tx 0 1 0 ty 0 0 1 tz 0 0 0 1 +
    + +## 例 + +

    単一軸の座標変換の使用

    + +#### HTML + +```html +
    Static
    +
    Moved
    +
    Static
    +``` + +#### CSS + +```css +div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + /* Equivalent to perspective(500px) translateX(10px) */ + transform: perspective(500px) translate3d(10px, 0, 0px); + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Using_a_single_axis_translation", 250, 250)}} + +

    z 軸と x 軸を組み合わせた座標変換

    + +#### HTML + +```html +
    Static
    +
    Moved
    +
    Static
    +``` + +#### CSS + +```css +div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: perspective(500px) translate3d(10px, 0, 100px); + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation", 250, 250)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/translatex()/index.md b/files/ja/web/css/transform-function/translatex()/index.md deleted file mode 100644 index 1d0797b735..0000000000 --- a/files/ja/web/css/transform-function/translatex()/index.md +++ /dev/null @@ -1,163 +0,0 @@ ---- -title: translateX() -slug: Web/CSS/transform-function/translateX() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.translateX -translation_of: Web/CSS/transform-function/translateX() -original_slug: Web/CSS/transform-function/translateX ---- -{{CSSRef}} - -**`translateX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上の水平方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -![](transform-functions-translatex_2.png) - -> **Note:** `translateX(tx)` は `translate(tx, 0)` または `translate3d(tx, 0, 0)` と等価です。 - -## 構文 - -```css -/* values */ -transform: translateX(200px); -transform: translateX(50%); -``` - -### 値 - -- `` - - : 変換ベクトルの横座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。パーセント値は {{cssxref("transform-box")}} プロパティで定義される参照ボックスの幅からの相対値です。 - - - - - - - - - - - - - - - - - - - - - -
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    -

    - ℝ^2 では線形変換ではないので、デカルト座標の行列で表すことはできない。 -

    -     		- 1 0 t 0 1 0 0 0 1 - - 1 0 t 0 1 0 0 0 1 - - 1 0 0 t 0 1 0 0 0 0 1 0 0 0 0 1 -
    [1 0 0 1 t 0]
    - -### 形式文法 - -```css -translateX({{cssxref("<length-percentage>")}}) -``` - -

    例

    - -### HTML - -```html -
    Static
    -
    Moved
    -
    Static
    -``` - -### CSS - -```css -div { - width: 60px; - height: 60px; - background-color: skyblue; -} - -.moved { - transform: translateX(10px); /* translate(10px) と等価 */ - background-color: pink; -} -``` - -### 結果 - -{{EmbedLiveSample("Examples", 250, 250)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [`translate()`](/ja/docs/Web/CSS/transform-function/translate()) -- [`translateY()`](/ja/docs/Web/CSS/transform-function/translateY()) -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/translatex/index.md b/files/ja/web/css/transform-function/translatex/index.md new file mode 100644 index 0000000000..011503864b --- /dev/null +++ b/files/ja/web/css/transform-function/translatex/index.md @@ -0,0 +1,163 @@ +--- +title: translateX() +slug: Web/CSS/transform-function/translateX +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/translateX() +original_slug: Web/CSS/transform-function/translateX() +browser-compat: css.types.transform-function.translateX +--- +{{CSSRef}} + +**`translateX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上の水平方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +![](transform-functions-translatex_2.png) + +> **Note:** `translateX(tx)` は `translate(tx, 0)` または `translate3d(tx, 0, 0)` と等価です。 + +## 構文 + +```css +/* values */ +transform: translateX(200px); +transform: translateX(50%); +``` + +### 値 + +- `` + - : 変換ベクトルの横座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。パーセント値は {{cssxref("transform-box")}} プロパティで定義される参照ボックスの幅からの相対値です。 + + + + + + + + + + + + + + + + + + + + + +
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    +

    + ℝ^2 では線形変換ではないので、デカルト座標の行列で表すことはできない。 +

    +     		+ 1 0 t 0 1 0 0 0 1 + + 1 0 t 0 1 0 0 0 1 + + 1 0 0 t 0 1 0 0 0 0 1 0 0 0 0 1 +
    [1 0 0 1 t 0]
    + +### 形式文法 + +```css +translateX({{cssxref("<length-percentage>")}}) +``` + +

    例

    + +### HTML + +```html +
    Static
    +
    Moved
    +
    Static
    +``` + +### CSS + +```css +div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translateX(10px); /* translate(10px) と等価 */ + background-color: pink; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", 250, 250)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`translate()`](/ja/docs/Web/CSS/transform-function/translate()) +- [`translateY()`](/ja/docs/Web/CSS/transform-function/translateY()) +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/translatey()/index.md b/files/ja/web/css/transform-function/translatey()/index.md deleted file mode 100644 index ef8f624a29..0000000000 --- a/files/ja/web/css/transform-function/translatey()/index.md +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: translateY() -slug: Web/CSS/transform-function/translateY() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.translateY -translation_of: Web/CSS/transform-function/translateY() ---- -{{CSSRef}} - -**`translateX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上の水平方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -![](translatey.png) - -> **Note:** `translateY(ty)` は `translate(0, ty)` または `translate3d(0, ty, 0)` と等価です。 - -## 構文 - -```css -/* 値 */ -transform: translateY(200px); -transform: translateY(50%); -``` - -### 値 - -- `` - - : 変換ベクトルの縦座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。パーセント値は {{cssxref("transform-box")}} プロパティで定義される参照ボックスの幅からの相対値です。 - - - - - - - - - - - - - - - - - - - - - -
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    -

    - ℝ^2 では線形変換ではないので、デカルト座標の行列で表すことはできない。 -

    -     		- 1 - 0 - 0 0 - 1 - t 0 - 0 - 1 - - 1 - 0 - 0 0 - 1 - t 0 - 0 - 1 - - 1 - 0 - 0 - 0 0 - 1 - 0 - t 0 - 0 - 1 - 0 0 - 0 - 0 - 1 -
    [1 0 0 1 0 t]
    - -### 形式文法 - -```css -translateY({{cssxref("<length-percentage>")}}) -``` - -

    例

    - -### HTML - -```html -
    Static
    -
    Moved
    -
    Static
    -``` - -### CSS - -```css -div { - width: 60px; - height: 60px; - background-color: skyblue; -} - -.moved { - transform: translateY(10px); - background-color: pink; -} -``` - -### 結果 - -{{EmbedLiveSample("Examples", 250, 250)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/translatey/index.md b/files/ja/web/css/transform-function/translatey/index.md new file mode 100644 index 0000000000..6f49e8dacf --- /dev/null +++ b/files/ja/web/css/transform-function/translatey/index.md @@ -0,0 +1,175 @@ +--- +title: translateY() +slug: Web/CSS/transform-function/translateY +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/translateY() +original_slug: Web/CSS/transform-function/translateY() +browser-compat: css.types.transform-function.translateY +--- +{{CSSRef}} + +**`translateX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上の水平方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +![](translatey.png) + +> **Note:** `translateY(ty)` は `translate(0, ty)` または `translate3d(0, ty, 0)` と等価です。 + +## 構文 + +```css +/* 値 */ +transform: translateY(200px); +transform: translateY(50%); +``` + +### 値 + +- `` + - : 変換ベクトルの縦座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。パーセント値は {{cssxref("transform-box")}} プロパティで定義される参照ボックスの幅からの相対値です。 + + + + + + + + + + + + + + + + + + + + + +
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    +

    + ℝ^2 では線形変換ではないので、デカルト座標の行列で表すことはできない。 +

    +     		+ 1 + 0 + 0 0 + 1 + t 0 + 0 + 1 + + 1 + 0 + 0 0 + 1 + t 0 + 0 + 1 + + 1 + 0 + 0 + 0 0 + 1 + 0 + t 0 + 0 + 1 + 0 0 + 0 + 0 + 1 +
    [1 0 0 1 0 t]
    + +### 形式文法 + +```css +translateY({{cssxref("<length-percentage>")}}) +``` + +

    例

    + +### HTML + +```html +
    Static
    +
    Moved
    +
    Static
    +``` + +### CSS + +```css +div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translateY(10px); + background-color: pink; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", 250, 250)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/translatez()/index.md b/files/ja/web/css/transform-function/translatez()/index.md deleted file mode 100644 index 400c67a02f..0000000000 --- a/files/ja/web/css/transform-function/translatez()/index.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: translateZ() -slug: Web/CSS/transform-function/translateZ() -tags: - - 3D - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.translateZ -translation_of: Web/CSS/transform-function/translateZ() ---- -{{CSSRef}} - -**`translateZ()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、三次元空間の z 軸に沿って、すなわち閲覧者に近づいたり遠ざかったりするように要素を移動させます。その結果は {{cssxref("<transform-function>")}} データ型となります。 - -{{EmbedInteractiveExample("pages/css/function-translateZ.html")}} - -この変換は、 {{cssxref("<length>")}} によって定義され、要素または要素がどれだけ内側または外側に移動するかを指定します。 - -上記のデモでは、[`perspective: 550px;`](/ja/docs/Web/CSS/perspective) (三次元空間を作るため) と [`transform-style: preserve-3d;`](/ja/docs/Web/CSS/transform-style) (立方体の 6 つの面である子を三次元空間に配置) を立方体に設定しました。 - -> **Note:** `translateZ(tz)` は、`translate3d(0, 0, tz)` と等価です。 - -## 構文 - -```css -translateZ(tz) -``` - -### 値 - -- `tz` - - : 変換ベクトルの z 成分を表す{{cssxref("<length>")}}。正の値では要素が閲覧者に向かって移動し、負の値で移動すると遠ざかります。 - - - - - - - - - - - - - - - - - -
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    - この変換は 3 次元空間に適用されます。平面上では表現できません。 - - この変換は ℝ^3 の線形変換ではなく、デカルト座標系の行列では表現できません。 - - 1 0 0 0 0 1 0 0 0 0 1 t 0 0 0 1 -
    - -

    例

    - -この例では、2 つのボックスが作成されます。1 つはページ上で通常の位置に配置され、座標変換されることはありません。もう一つは、遠近法を適用して三次元空間を作り、ユーザーの方に移動させます。 - -### HTML - -```html -
    Static
    -
    Moved
    -``` - -### CSS - -```css -div { - position: relative; - width: 60px; - height: 60px; - left: 100px; - background-color: skyblue; -} - -.moved { - transform: perspective(500px) translateZ(200px); - background-color: pink; -} -``` - -ここで重要なのは "moved" というクラスで、その機能を見てみましょう。まず、 -[`perspective()`](/ja/docs/Web/CSS/transform-function/perspective()) 関数は、 z=0 の位置にある平面 (要するに画面の表面) の相対位置に閲覧者を位置付けます。 `500px` という値は、ユーザーが z=0 にある画像の 500 ピクセル「前」にいることを意味します。 - -次に、`translateZ()` 関数は、要素を画面からユーザーの方に「外向きに」200 ピクセル移動します。 これは、二次元のディスプレイ上で見たときに要素を大きく見せる、または VR ヘッドセットや他の三次元ディスプレイ機器を使用して見たときに要素をより近く見せるという効果があります。 - -なお、 `perspective()` の値が `translateZ()` の値よりも小さい場合、例えば `transform: perspective(200px) translateZ(300px);` の場合、変換された要素はユーザーのビューポートよりも手前にあるため、表示されません。 perspective と translateZ の値の差が小さければ小さいほど、ユーザーは要素に近づき、変換された要素は大きく見えます。 - -### 結果 - -{{EmbedLiveSample("Examples", 250, 250)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/translatez/index.md b/files/ja/web/css/transform-function/translatez/index.md new file mode 100644 index 0000000000..e0a1df5c9d --- /dev/null +++ b/files/ja/web/css/transform-function/translatez/index.md @@ -0,0 +1,130 @@ +--- +title: translateZ() +slug: Web/CSS/transform-function/translateZ +tags: + - 3D + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/translateZ() +original_slug: Web/CSS/transform-function/translateZ() +browser-compat: css.types.transform-function.translateZ +--- +{{CSSRef}} + +**`translateZ()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、三次元空間の z 軸に沿って、すなわち閲覧者に近づいたり遠ざかったりするように要素を移動させます。その結果は {{cssxref("<transform-function>")}} データ型となります。 + +{{EmbedInteractiveExample("pages/css/function-translateZ.html")}} + +この変換は、 {{cssxref("<length>")}} によって定義され、要素または要素がどれだけ内側または外側に移動するかを指定します。 + +上記のデモでは、[`perspective: 550px;`](/ja/docs/Web/CSS/perspective) (三次元空間を作るため) と [`transform-style: preserve-3d;`](/ja/docs/Web/CSS/transform-style) (立方体の 6 つの面である子を三次元空間に配置) を立方体に設定しました。 + +> **Note:** `translateZ(tz)` は、`translate3d(0, 0, tz)` と等価です。 + +## 構文 + +```css +translateZ(tz) +``` + +### 値 + +- `tz` + - : 変換ベクトルの z 成分を表す{{cssxref("<length>")}}。正の値では要素が閲覧者に向かって移動し、負の値で移動すると遠ざかります。 + + + + + + + + + + + + + + + + + +
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    + この変換は 3 次元空間に適用されます。平面上では表現できません。 + + この変換は ℝ^3 の線形変換ではなく、デカルト座標系の行列では表現できません。 + + 1 0 0 0 0 1 0 0 0 0 1 t 0 0 0 1 +
    + +

    例

    + +この例では、2 つのボックスが作成されます。1 つはページ上で通常の位置に配置され、座標変換されることはありません。もう一つは、遠近法を適用して三次元空間を作り、ユーザーの方に移動させます。 + +### HTML + +```html +
    Static
    +
    Moved
    +``` + +### CSS + +```css +div { + position: relative; + width: 60px; + height: 60px; + left: 100px; + background-color: skyblue; +} + +.moved { + transform: perspective(500px) translateZ(200px); + background-color: pink; +} +``` + +ここで重要なのは "moved" というクラスで、その機能を見てみましょう。まず、 +[`perspective()`](/ja/docs/Web/CSS/transform-function/perspective()) 関数は、 z=0 の位置にある平面 (要するに画面の表面) の相対位置に閲覧者を位置付けます。 `500px` という値は、ユーザーが z=0 にある画像の 500 ピクセル「前」にいることを意味します。 + +次に、`translateZ()` 関数は、要素を画面からユーザーの方に「外向きに」200 ピクセル移動します。 これは、二次元のディスプレイ上で見たときに要素を大きく見せる、または VR ヘッドセットや他の三次元ディスプレイ機器を使用して見たときに要素をより近く見せるという効果があります。 + +なお、 `perspective()` の値が `translateZ()` の値よりも小さい場合、例えば `transform: perspective(200px) translateZ(300px);` の場合、変換された要素はユーザーのビューポートよりも手前にあるため、表示されません。 perspective と translateZ の値の差が小さければ小さいほど、ユーザーは要素に近づき、変換された要素は大きく見えます。 + +### 結果 + +{{EmbedLiveSample("Examples", 250, 250)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/url()/index.md b/files/ja/web/css/url()/index.md deleted file mode 100644 index 18c2e4c095..0000000000 --- a/files/ja/web/css/url()/index.md +++ /dev/null @@ -1,191 +0,0 @@ ---- -title: url() -slug: Web/CSS/url() -tags: - - CSS - - CSS 関数 - - 関数 - - レイアウト - - リファレンス - - ウェブ - - url() -browser-compat: css.types.url -translation_of: Web/CSS/url() ---- -{{CSSRef}} - -**`url()`** は [CSS](/ja/docs/Web/CSS) 関数で、ファイルを含めるために使用します。引数は絶対 URL、相対 URL、 データ URI の何れかです **`url()`** 関数は {{cssxref('attr()')}} 関数のように、他の CSS 関数に引数として渡すことができます。値を使用するプロパティに応じて、求められるリソースは画像、フォント、スタイルシートの何れかになります。`url()` 関数表記は `` データ型の値になります。 - -> **Note:** {{Glossary("URI")}} と {{Glossary("URL")}} との間には違いがあります。 URI は単純にリソースを識別します。 URL は URI の一種で、リソースの*場所*を記述します。 URI はリソースの URL または名前 ({{Glossary("URN")}}) であることがあります。 -> -> CSS Level 1 では、 `url()` 関数記法は真に URL のみを記述していました。 CSS Level 2 では、 `url()` の定義はあらゆる URI、 URL または URN のどちらかを記述するように拡張されました。ややこしいことに、これは `url()` を CSS の `` データ型の生成のために使用することができることを意味していました。この変更は紛らわしいばかりでなく、議論になりやすく、 URN が実際の CSS で使用されることはほぼあり得ないため不必要でした。混乱を軽減するために、 CSS Level 3 ではより狭い初めの定義まで戻りました。現在では、 `url()` は真に `` のみを記述します。 - -```css -/* 単純な使い方 */ -url(https://example.com/images/myImg.jpg); -url(data:image/png;base64,iRxVB0…); -url(myFont.woff); -url(#IDofSVGpath); - -/* 関連するプロパティ */ -background-image: url("star.gif"); -list-style-image: url('../images/bullet.jpg'); -content: url("pdficon.jpg"); -cursor: url(mycursor.cur); -border-image-source: url(/media/diamonds.png); -src: url('fantasticfont.woff'); -offset-path: url(#path); -mask-image: url("masks.svg#mask1"); - -/* 代替付きのプロパティ */ -cursor: url(pointer.cur), pointer; - -/* 関連する一括指定プロパティ */ -background: url('star.gif') bottom right repeat-x blue; -border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space; - -/* 他の CSS 関数の引数として */ -background-image: cross-fade(20% url(first.png), url(second.png)); -mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent)); - -/* 一括指定ではない複数の値の一部として */ -content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); - -/* アットルール */ -@document url("https://www.example.com/") { ... } {{Experimental_Inline}} -@import url("https://www.example.com/style.css"); -@namespace url(http://www.w3.org/1999/xhtml); -``` - -相対 URL が使用された場合は、スタイルシートの URL からの相対となります (ウェブページの URL からではありません)。 - -**`url()`** 関数は {{cssxref('background')}}, {{cssxref('background-image')}}, {{cssxref('border')}}, {{cssxref('border-image')}}, {{cssxref('border-image-source')}}, {{cssxref('content')}}, {{cssxref('cursor')}}, {{cssxref('filter')}}, {{cssxref('list-style')}}, {{cssxref('list-style-image')}}, {{cssxref('mask')}}, {{cssxref('mask-image')}}, {{cssxref('offset-path')}}, -[@font-face](/ja/docs/Web/CSS/@font-face) ブロック内での [src](/ja/docs/Web/CSS/@font-face/src), [@counter-style/symbol](/ja/docs/Web/CSS/@counter-style/symbols) の値として使用することができます。 - -## 構文 - -### 値 - -- `` - - - : URL まだは SVG 図形の ID を指定することができる文字列です。 - - - \ - - - : 含まれるウェブリソースへの相対アドレス、絶対アドレス、ポインターのURL、またはデータ URI であり、任意で単一引用符または二重引用符を使用することができます。URL に括弧、空白、引用符が含まれている場合で、これらの文字がエスケープされていないか、アドレスに 0x7e 以上の制御文字が含まれている場合、引用符は必須です。二重引用符は二重引用符の中に入れることはできず、単一引用符はエスケープされない限り単一引用符の中に入れることはできません。以下のものはすべて有効であり、同等です。 - - ```css - : url("https://example.com/image.png") - : url('https://example.com/image.png') - : url(https://example.com/image.png) - ``` - - URL を引用符なしで書く場合は、バックスラッシュを (`\`) を URL に含まれる括弧、ホワイトスペース文字、単一引用符 (`'`)、二重引用符 (`"`) の前に使用してください。 - - - パス - - : [SVG 図形](/ja/docs/Web/SVG/Tutorial/Basic_Shapes)の ID への参照 -- `circle`, `ellipse`, `line`, `path`, `polygon`, `polyline`, `rect` -- パスとして図形の形状を使用します。 - -- `` {{Experimental_Inline}} - - : 将来的に `url()` 関数は、 URL 文字列の意味を変更する修飾子、識別子、関数記法の指定に対応するかもしれません。これはまだ対応されておらず、仕様書では完全には定義されていません。 - -## 形式文法 - -```css -url( * ) -``` - -

    例

    - -

    background プロパティで使用される URL

    - - .topbanner { - background: url("topbanner.png") #00D no-repeat fixed; - } - -

    リストの先頭記号として使用される画像を読み込む URL

    - - ul { - list-style: square url(http://www.example.com/redball.png); - } - -

    content プロパティの使用

    - -#### HTML - -```html -
      -
    • Item 1
      • -
    • Item 2
      • -
    • Item 3
      • -
    -``` - -#### CSS - -```css -li::after { - content: ' - ' url(star.gif); -} -``` - -#### 結果 - -{{EmbedLiveSample("Usage_in_the_content_property", "100%", 110)}} - -

    data-uri の使用

    - -#### HTML - -```html -
    -``` - -#### CSS - -```css hidden -.background { - height: 100vh; -} -``` - -```css -.background { - background: yellow; - background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E"); -} -``` - -{{EmbedLiveSample("Using_a_data-uri", "100%", 50)}} - -

    フィルターでの使用

    - -URL がフィルターへのパスとして使用される場合、 URL は以下のどちらかでなければなりません。 - -1. SVG ファイルへのパスに、追加されるフィルターの ID が付いたもの。 -2. SVG がページ内にある場合は、フィルターの ID。 - - - - .blur { -   filter: url(my-file.svg#svg-blur); /* フィルターとして使用する SVG ファイルの URL */ - } - - .inline-blur { - filter: url(#svg-blur); /* HTML ページに埋め込まれた SVG の ID */ - } - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("<gradient>")}} -- {{cssxref("element()")}} -- {{cssxref("image/image()", "image()")}} -- {{cssxref("image/image-set()", "image-set()")}} -- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/url/index.md b/files/ja/web/css/url/index.md new file mode 100644 index 0000000000..e5dc1075b9 --- /dev/null +++ b/files/ja/web/css/url/index.md @@ -0,0 +1,192 @@ +--- +title: url() +slug: Web/CSS/url +tags: + - CSS + - CSS 関数 + - 関数 + - レイアウト + - リファレンス + - ウェブ + - url() +translation_of: Web/CSS/url() +original_slug: Web/CSS/url() +browser-compat: css.types.url +--- +{{CSSRef}} + +**`url()`** は [CSS](/ja/docs/Web/CSS) 関数で、ファイルを含めるために使用します。引数は絶対 URL、相対 URL、 データ URI の何れかです **`url()`** 関数は {{cssxref('attr()')}} 関数のように、他の CSS 関数に引数として渡すことができます。値を使用するプロパティに応じて、求められるリソースは画像、フォント、スタイルシートの何れかになります。`url()` 関数表記は `` データ型の値になります。 + +> **Note:** {{Glossary("URI")}} と {{Glossary("URL")}} との間には違いがあります。 URI は単純にリソースを識別します。 URL は URI の一種で、リソースの*場所*を記述します。 URI はリソースの URL または名前 ({{Glossary("URN")}}) であることがあります。 +> +> CSS Level 1 では、 `url()` 関数記法は真に URL のみを記述していました。 CSS Level 2 では、 `url()` の定義はあらゆる URI、 URL または URN のどちらかを記述するように拡張されました。ややこしいことに、これは `url()` を CSS の `` データ型の生成のために使用することができることを意味していました。この変更は紛らわしいばかりでなく、議論になりやすく、 URN が実際の CSS で使用されることはほぼあり得ないため不必要でした。混乱を軽減するために、 CSS Level 3 ではより狭い初めの定義まで戻りました。現在では、 `url()` は真に `` のみを記述します。 + +```css +/* 単純な使い方 */ +url(https://example.com/images/myImg.jpg); +url(data:image/png;base64,iRxVB0…); +url(myFont.woff); +url(#IDofSVGpath); + +/* 関連するプロパティ */ +background-image: url("star.gif"); +list-style-image: url('../images/bullet.jpg'); +content: url("pdficon.jpg"); +cursor: url(mycursor.cur); +border-image-source: url(/media/diamonds.png); +src: url('fantasticfont.woff'); +offset-path: url(#path); +mask-image: url("masks.svg#mask1"); + +/* 代替付きのプロパティ */ +cursor: url(pointer.cur), pointer; + +/* 関連する一括指定プロパティ */ +background: url('star.gif') bottom right repeat-x blue; +border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space; + +/* 他の CSS 関数の引数として */ +background-image: cross-fade(20% url(first.png), url(second.png)); +mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent)); + +/* 一括指定ではない複数の値の一部として */ +content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); + +/* アットルール */ +@document url("https://www.example.com/") { ... } {{Experimental_Inline}} +@import url("https://www.example.com/style.css"); +@namespace url(http://www.w3.org/1999/xhtml); +``` + +相対 URL が使用された場合は、スタイルシートの URL からの相対となります (ウェブページの URL からではありません)。 + +**`url()`** 関数は {{cssxref('background')}}, {{cssxref('background-image')}}, {{cssxref('border')}}, {{cssxref('border-image')}}, {{cssxref('border-image-source')}}, {{cssxref('content')}}, {{cssxref('cursor')}}, {{cssxref('filter')}}, {{cssxref('list-style')}}, {{cssxref('list-style-image')}}, {{cssxref('mask')}}, {{cssxref('mask-image')}}, {{cssxref('offset-path')}}, +[@font-face](/ja/docs/Web/CSS/@font-face) ブロック内での [src](/ja/docs/Web/CSS/@font-face/src), [@counter-style/symbol](/ja/docs/Web/CSS/@counter-style/symbols) の値として使用することができます。 + +## 構文 + +### 値 + +- `` + + - : URL まだは SVG 図形の ID を指定することができる文字列です。 + + - \ + + - : 含まれるウェブリソースへの相対アドレス、絶対アドレス、ポインターのURL、またはデータ URI であり、任意で単一引用符または二重引用符を使用することができます。URL に括弧、空白、引用符が含まれている場合で、これらの文字がエスケープされていないか、アドレスに 0x7e 以上の制御文字が含まれている場合、引用符は必須です。二重引用符は二重引用符の中に入れることはできず、単一引用符はエスケープされない限り単一引用符の中に入れることはできません。以下のものはすべて有効であり、同等です。 + + ```css + : url("https://example.com/image.png") + : url('https://example.com/image.png') + : url(https://example.com/image.png) + ``` + + URL を引用符なしで書く場合は、バックスラッシュを (`\`) を URL に含まれる括弧、ホワイトスペース文字、単一引用符 (`'`)、二重引用符 (`"`) の前に使用してください。 + + - パス + - : [SVG 図形](/ja/docs/Web/SVG/Tutorial/Basic_Shapes)の ID への参照 -- `circle`, `ellipse`, `line`, `path`, `polygon`, `polyline`, `rect` -- パスとして図形の形状を使用します。 + +- `` {{Experimental_Inline}} + - : 将来的に `url()` 関数は、 URL 文字列の意味を変更する修飾子、識別子、関数記法の指定に対応するかもしれません。これはまだ対応されておらず、仕様書では完全には定義されていません。 + +## 形式文法 + +```css +url( * ) +``` + +

    例

    + +

    background プロパティで使用される URL

    + + .topbanner { + background: url("topbanner.png") #00D no-repeat fixed; + } + +

    リストの先頭記号として使用される画像を読み込む URL

    + + ul { + list-style: square url(http://www.example.com/redball.png); + } + +

    content プロパティの使用

    + +#### HTML + +```html +
      +
    • Item 1
      • +
    • Item 2
      • +
    • Item 3
      • +
    +``` + +#### CSS + +```css +li::after { + content: ' - ' url(star.gif); +} +``` + +#### 結果 + +{{EmbedLiveSample("Usage_in_the_content_property", "100%", 110)}} + +

    data-uri の使用

    + +#### HTML + +```html +
    +``` + +#### CSS + +```css hidden +.background { + height: 100vh; +} +``` + +```css +.background { + background: yellow; + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E"); +} +``` + +{{EmbedLiveSample("Using_a_data-uri", "100%", 50)}} + +

    フィルターでの使用

    + +URL がフィルターへのパスとして使用される場合、 URL は以下のどちらかでなければなりません。 + +1. SVG ファイルへのパスに、追加されるフィルターの ID が付いたもの。 +2. SVG がページ内にある場合は、フィルターの ID。 + + + + .blur { +   filter: url(my-file.svg#svg-blur); /* フィルターとして使用する SVG ファイルの URL */ + } + + .inline-blur { + filter: url(#svg-blur); /* HTML ページに埋め込まれた SVG の ID */ + } + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("<gradient>")}} +- {{cssxref("element()")}} +- {{cssxref("image/image()", "image()")}} +- {{cssxref("image/image-set()", "image-set()")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/var()/index.md b/files/ja/web/css/var()/index.md deleted file mode 100644 index e108fb58d7..0000000000 --- a/files/ja/web/css/var()/index.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: var() -slug: Web/CSS/var() -tags: - - CSS - - CSS カスタムプロパティ - - CSS 変数 - - CSS 関数 - - 実験的 - - 関数 - - リファレンス - - 変数 - - var - - var() -browser-compat: css.properties.custom-property.var -translation_of: Web/CSS/var() ---- -{{CSSRef}} - -[CSS](/ja/docs/Web/CSS) の **`var()`** 関数は、他のプロパティの値の一部に代わって[カスタムプロパティ](/ja/docs/Web/CSS/--*) (「CSS 変数」と呼ばれることもあります) の値を挿入できます。 - -{{EmbedInteractiveExample("pages/css/var.html")}} - -`var()` 関数は、プロパティ名、セレクター、またはプロパティ値以外のところでは使用できません。 (使用してしまうと、無効な構文が生成されるか、もしくはその変数に接続していない値が生成されてしまいます。) - -## 構文 - -関数の最初の引数は、置換されるカスタムプロパティの名前です。関数のオプションの 2 番目の引数は、代替値として機能します。最初の引数で参照されるカスタムプロパティが無効な場合、関数は2番目の値を使用します。 - -{{csssyntax}} - -> **Note:** 代替の構文は、カスタムプロパティの構文と同様にカンマを使用できます。たとえば `var(--foo, red, blue)` では、 `red, blue` を代替として定義します。つまり、最初のカンマから関数の最後にかけてのすべてが、代替値と見なされます。 - -### 値 - -- `` - - : カスタムプロパティの名前で、 2 つのハイフンで始まる識別子で表されます。カスタムプロパティは、作成者とユーザーだけが使用できます。 CSS はここに提示されているものを超えて意味を与えません。 -- `` - - : カスタムプロパティの代替値。カスタムプロパティが使用されているコンテキストが無効な場合に使用されます。この値には、改行、不等式の閉じ括弧、つまり `)`, `]`, `}`, トップレベルのセミコロン、感嘆符などの特別な意味を持つ文字を除く任意の文字を含めることができます。 - -## 例 - -### :root に設定されたカスタムプロパティの使用 - -```css -:root { - --main-bg-color: pink; -} - -body { - background-color: var(--main-bg-color); -} -``` - -### プロパティが設定されていなかったときに使用するための代替値つきのカスタムプロパティ - -```css -/* 代替 */ -/* コンポーネント内のスタイル: */ -.component .header { - color: var(--header-color, blue); /* header-color という変数は設定されていないため、代替値である blue がセットされます */ -} - -.component .text { - color: var(--text-color, black); -} - -/* より規模の大きなアプリケーションのスタイルでは */ -.component { - --text-color: #080; -} -``` - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("env()","env(…)")}} – ユーザーエージェントによって制御される読み取り専用環境変数 -- [CSS 変数の利用](/ja/docs/Web/CSS/Using_CSS_custom_properties) diff --git a/files/ja/web/css/var/index.md b/files/ja/web/css/var/index.md new file mode 100644 index 0000000000..264ebce855 --- /dev/null +++ b/files/ja/web/css/var/index.md @@ -0,0 +1,86 @@ +--- +title: var() +slug: Web/CSS/var +tags: + - CSS + - CSS カスタムプロパティ + - CSS 変数 + - CSS 関数 + - 実験的 + - 関数 + - リファレンス + - 変数 + - var + - var() +translation_of: Web/CSS/var() +original_slug: Web/CSS/var() +browser-compat: css.properties.custom-property.var +--- +{{CSSRef}} + +[CSS](/ja/docs/Web/CSS) の **`var()`** 関数は、他のプロパティの値の一部に代わって[カスタムプロパティ](/ja/docs/Web/CSS/--*) (「CSS 変数」と呼ばれることもあります) の値を挿入できます。 + +{{EmbedInteractiveExample("pages/css/var.html")}} + +`var()` 関数は、プロパティ名、セレクター、またはプロパティ値以外のところでは使用できません。 (使用してしまうと、無効な構文が生成されるか、もしくはその変数に接続していない値が生成されてしまいます。) + +## 構文 + +関数の最初の引数は、置換されるカスタムプロパティの名前です。関数のオプションの 2 番目の引数は、代替値として機能します。最初の引数で参照されるカスタムプロパティが無効な場合、関数は2番目の値を使用します。 + +{{csssyntax}} + +> **Note:** 代替の構文は、カスタムプロパティの構文と同様にカンマを使用できます。たとえば `var(--foo, red, blue)` では、 `red, blue` を代替として定義します。つまり、最初のカンマから関数の最後にかけてのすべてが、代替値と見なされます。 + +### 値 + +- `` + - : カスタムプロパティの名前で、 2 つのハイフンで始まる識別子で表されます。カスタムプロパティは、作成者とユーザーだけが使用できます。 CSS はここに提示されているものを超えて意味を与えません。 +- `` + - : カスタムプロパティの代替値。カスタムプロパティが使用されているコンテキストが無効な場合に使用されます。この値には、改行、不等式の閉じ括弧、つまり `)`, `]`, `}`, トップレベルのセミコロン、感嘆符などの特別な意味を持つ文字を除く任意の文字を含めることができます。 + +## 例 + +### :root に設定されたカスタムプロパティの使用 + +```css +:root { + --main-bg-color: pink; +} + +body { + background-color: var(--main-bg-color); +} +``` + +### プロパティが設定されていなかったときに使用するための代替値つきのカスタムプロパティ + +```css +/* 代替 */ +/* コンポーネント内のスタイル: */ +.component .header { + color: var(--header-color, blue); /* header-color という変数は設定されていないため、代替値である blue がセットされます */ +} + +.component .text { + color: var(--text-color, black); +} + +/* より規模の大きなアプリケーションのスタイルでは */ +.component { + --text-color: #080; +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("env()","env(…)")}} – ユーザーエージェントによって制御される読み取り専用環境変数 +- [CSS 変数の利用](/ja/docs/Web/CSS/Using_CSS_custom_properties) -- cgit v1.2.3-54-g00ecf