From 585cf204c175af495fa25c32d509c7ab9b8c8808 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 11 Nov 2021 10:06:29 +0900 Subject: Mozilla 独自の CSS プロパティを更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/09 時点の英語版に同期 --- files/ja/web/css/-moz-context-properties/index.md | 102 ++++++------- files/ja/web/css/-moz-float-edge/index.md | 90 ++++++------ .../web/css/-moz-force-broken-image-icon/index.md | 72 ++++----- files/ja/web/css/-moz-image-rect/firefox.png | Bin 0 -> 20369 bytes files/ja/web/css/-moz-image-rect/index.md | 163 +++++++++++++++++++++ files/ja/web/css/-moz-image-region/index.md | 77 ++++++++++ files/ja/web/css/-moz-orient/index.md | 85 +++++------ .../css/-moz-outline-radius-bottomleft/index.md | 73 ++++----- .../css/-moz-outline-radius-bottomright/index.md | 73 +++++---- .../web/css/-moz-outline-radius-topleft/index.md | 71 ++++----- .../web/css/-moz-outline-radius-topright/index.md | 74 +++++----- files/ja/web/css/-moz-outline-radius/index.md | 118 ++++++++------- files/ja/web/css/-moz-user-focus/index.md | 93 ++++++++++++ files/ja/web/css/-moz-user-input/index.md | 76 +++++----- 14 files changed, 764 insertions(+), 403 deletions(-) create mode 100644 files/ja/web/css/-moz-image-rect/firefox.png create mode 100644 files/ja/web/css/-moz-image-rect/index.md create mode 100644 files/ja/web/css/-moz-image-region/index.md create mode 100644 files/ja/web/css/-moz-user-focus/index.md diff --git a/files/ja/web/css/-moz-context-properties/index.md b/files/ja/web/css/-moz-context-properties/index.md index 3576e0ea94..d82a0fe837 100644 --- a/files/ja/web/css/-moz-context-properties/index.md +++ b/files/ja/web/css/-moz-context-properties/index.md @@ -4,24 +4,26 @@ slug: Web/CSS/-moz-context-properties tags: - '-moz-context-properties' - CSS - - CSS Property - - 'CSS:Mozilla Extensions' + - CSS プロパティ + - CSS:Mozilla 拡張 - Experimental - Needs Privileges - - Non-standard - - Reference - - 'recipe:css-property' + - 標準外 + - リファレンス + - recipe:css-property +browser-compat: css.properties.-moz-context-properties translation_of: Web/CSS/-moz-context-properties --- -
{{CSSRef}}{{Non-standard_header}}
+{{CSSRef}}{{Non-standard_header}} -

-moz-context-properties プロパティは Firefox の特権モードで使用することができ、子に SVG 画像を持つ要素の指定されたプロパティの値を共有します。

+**`-moz-context-properties`** プロパティは Firefox の特権モードで使用することができ、子に SVG 画像を持つ要素の指定されたプロパティの値を共有します。 -

ウェブページで (例えば {{htmlelement("img")}} 要素または背景画像として) SVG 画像を参照する場合、 SVG 画像は埋め込み要素 (そのコンテキスト) と協調して、画像が埋め込み要素に設定されたプロパティ値を採用することがあります。これを行うにためは、埋め込み要素は -moz-context-properties プロパティの値として画像に使用可能にするプロパティの一覧を示す必要があります。 context-fill 値などを使用して、これらのプロパティを使用するように画像に意思表示する必要があります。

+ウェブページで (例えば {{htmlelement("img")}} 要素または背景画像として) SVG 画像を参照する場合、 SVG 画像は埋め込み要素 (そのコンテキスト) と協調して、画像が埋め込み要素に設定されたプロパティ値を採用することがあります。これを行うにためは、埋め込み要素は `-moz-context-properties` プロパティの値として画像に使用可能にするプロパティの一覧を示す必要があります。 `context-fill` 値などを使用して、これらのプロパティを使用するように画像に意思表示する必要があります。 -

構文

+## 構文 -
/* キーワード値 */
+```css
+/* キーワード値 */
 -moz-context-properties: fill;
 -moz-context-properties: fill, stroke;
 
@@ -29,71 +31,69 @@ translation_of: Web/CSS/-moz-context-properties
 -moz-context-properties: inherit;
 -moz-context-properties: initial;
 -moz-context-properties: unset;
-
+``` -

値

+### 値 -
-
fill
-
画像に設定された fill の値を埋め込まれた SVG に伝えます。
-
stroke
-
画像に設定された stroke の値を埋め込まれた SVG に伝えます。
-
fill-opacity
-
画像に設定された fill-opacity の値を埋め込まれた SVG に伝えます。
-
stroke-opacity
-
画像に設定された stoke-opacity の値を埋め込まれた SVG に伝えます。
-
+- `fill` + - : 画像に設定された `fill` の値を埋め込まれた SVG に伝えます。 +- `stroke` + - : 画像に設定された `stroke` の値を埋め込まれた SVG に伝えます。 +- `fill-opacity` + - : 画像に設定された `fill-opacity` の値を埋め込まれた SVG に伝えます。 +- `stroke-opacity` + - : 画像に設定された `stoke-opacity` の値を埋め込まれた SVG に伝えます。 -

公式定義

+## 公式定義 -

{{CSSInfo}}

+{{CSSInfo}} -

形式文法

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

例

+## 例 -

SVG 画像への塗りつぶしとストロークの公開

+### SVG 画像への塗りつぶしとストロークの公開 -

この例では、 <img> 要素を使用して埋め込まれた簡単な SVG を使用します。

+この例では、 `` 要素を使用して埋め込まれた簡単な SVG を使用します。 -

以下のように、最初に埋め込み SVG に伝えたい値のプロパティを -moz-context-properties プロパティで埋め込む要素に指定する必要があります。

+以下のように、最初に埋め込み SVG に伝えたい値のプロパティを `-moz-context-properties` プロパティで埋め込む要素に指定する必要があります。 -
.img1 {
+```css
+.img1 {
   width: 100px;
   height: 100px;
   -moz-context-properties: fill, stroke;
   fill: lime;
   stroke: purple;
-}
+} +``` -

これを行うと、次のように SVG 画像は {{cssxref("fill")}} および {{cssxref("stroke")}} の値を使用することができるようになります。

+これを行うと、次のように SVG 画像は {{SVGAttr("fill")}} および {{SVGAttr("stroke")}} の値を使用することができるようになります。 -
<img class="img1" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'>
-                       <rect width='100%' height='100%' stroke-width='30px'
-                       fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/></svg>">
+```html + +``` -

ここで、画像の src に単純な SVG 画像を含む data URI を設定しました。内部の <rect> は、 <img> 要素の {{cssxref("fill")}} および {{cssxref("stroke")}} から fill および stroke の値を取り、これらの値の context-fill/context-stroke キーワードに設定して、 fill には SVG が最上位ウィンドウに単独で読み込まれた場合 (コンテンツの値を提供するコンテキストの要素がない場合) に使われる代替色 (red) を設定します。なお、色が SVG に直接設定され、コンテキストの色も設定された場合、コンテキストの色は直接設定された色を上書きします。

+ここで、画像の `src` に単純な SVG 画像を含む data URI を設定しました。内部の `` は、 `` 要素の {{SVGAttr("fill")}} および {{SVGAttr("stroke")}} から `fill` および `stroke` の値を取り、これらの値の `context-fill`/`context-stroke` キーワードに設定して、 fill には SVG が最上位ウィンドウに単独で読み込まれた場合 (コンテンツの値を提供するコンテキストの要素がない場合) に使われる代替色 (red) を設定します。なお、色が SVG に直接設定され、コンテキストの色も設定された場合、コンテキストの色は直接設定された色を上書きします。 -
-

注: Github に動作するサンプルがあります。

-
+> **Note:** [Github に動作するサンプル](https://mdn.github.io/css-examples/moz-context-properties/)があります。 -

仕様書

+## 仕様書 -

どの標準にも含まれていません。

+どの標準にも含まれていません。 -

ブラウザーの互換性

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

{{Compat("css.properties.-moz-context-properties")}}

+{{Compat}} -

関連情報

+## 関連情報 - +- [CSS の Mozilla 拡張](/ja/docs/Web/CSS/Mozilla_Extensions) +- [HTML での画像の使用](/ja/docs/Web/Media/images) +- [ウェブへのベクターグラフィックの追加](/ja/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web) +- [画像としての SVG](/ja/docs/Web/SVG/SVG_as_an_Image) +- [レスポンシブ画像](/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) diff --git a/files/ja/web/css/-moz-float-edge/index.md b/files/ja/web/css/-moz-float-edge/index.md index 4c4692f70b..fc649a603a 100644 --- a/files/ja/web/css/-moz-float-edge/index.md +++ b/files/ja/web/css/-moz-float-edge/index.md @@ -3,88 +3,88 @@ title: '-moz-float-edge' slug: Web/CSS/-moz-float-edge tags: - CSS - - CSS Property - - 'CSS:Mozilla Extensions' + - CSS プロパティ + - CSS:Mozilla 拡張 - Layout - NeedsCompatTable - - Non-standard - - 'recipe:css-property' + - 標準外 + - recipe:css-property +browser-compat: css.properties.-moz-float-edge translation_of: Web/CSS/-moz-float-edge --- -
{{CSSRef}}{{Non-standard_header}}
+{{CSSRef}}{{Non-standard_header}} -

非標準の -moz-float-edge CSS プロパティは要素の高さと幅のプロパティが margin 、border 、padding の厚さを含んでいるのかを指定します。

+標準外の **`-moz-float-edge`** [CSS](/ja/docs/Web/CSS) プロパティは要素の高さと幅のプロパティが margin 、border 、padding の厚さを含んでいるのかを指定します。 -
/* Keyword values */
+```css
+/* キーワード値 */
 -moz-float-edge: border-box;
 -moz-float-edge: content-box;
 -moz-float-edge: margin-box;
 -moz-float-edge: padding-box;
 
-/* Global values */
+/* グローバル値 */
 -moz-float-edge: inherit;
 -moz-float-edge: initial;
 -moz-float-edge: unset;
-
+``` -

構文

+## 構文 -

値

+### 値 -
-
border-box
-
高さと幅のプロパティがコンテンツ、padding および border を含むが、margin は含まない。
-
content-box
-
高さと幅のプロパティがコンテンツを含むが、padding 、border および margin は含まない。
-
margin-box
-
高さと幅のプロパティがコンテンツ、padding 、 border および margin を含む。
-
padding-box
-
高さと幅のプロパティがコンテンツと padding を含むが、border および margin は含まない。
-
+- `border-box` + - : 高さと幅のプロパティがコンテンツ、padding および border を含むが、margin は含まない。 +- `content-box` + - : 高さと幅のプロパティがコンテンツを含むが、padding 、border および margin は含まない。 +- `margin-box` + - : 高さと幅のプロパティがコンテンツ、padding 、 border および margin を含む。 +- `padding-box` + - : 高さと幅のプロパティがコンテンツと padding を含むが、border および margin は含まない。 -

形式定義

+## 公式定義 -

{{CSSInfo}}

+{{CSSInfo}} -

形式文法

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

例

+

例

-

HTML

+### HTML -
<div class="box"> 
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-</div>
+```html +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+``` -

CSS

+### CSS -
.box {
-  display: block;
+```css
+.box {
+  display: block;
   height: 5px;
   margin: 0.5em auto 0.5em auto;
   color: gray;
   -moz-float-edge: margin-box;
   box-sizing: border-box;
-}
+} +``` -

結果

+## 結果 -

{{ EmbedLiveSample('Examples') }}

+{{ EmbedLiveSample('Examples') }} -

仕様書

+## 仕様書 -

このプロパティはどの CSS 標準でも定義されていません。

+どの標準にも含まれていません。 -

ブラウザの対応

+## ブラウザーの互換性 +{{Compat}} +## 関連情報 -

{{Compat("css.properties.-moz-float-edge")}}

- -

関連情報

- - +- {{bug(432891)}} diff --git a/files/ja/web/css/-moz-force-broken-image-icon/index.md b/files/ja/web/css/-moz-force-broken-image-icon/index.md index d105691dd5..4408626318 100644 --- a/files/ja/web/css/-moz-force-broken-image-icon/index.md +++ b/files/ja/web/css/-moz-force-broken-image-icon/index.md @@ -4,64 +4,70 @@ slug: Web/CSS/-moz-force-broken-image-icon tags: - CSS - NeedsCompatTable - - Non-standard - - Reference + - 標準外 + - リファレンス + - recipe:css-property +browser-compat: css.properties.-moz-force-broken-image-icon translation_of: Web/CSS/-moz-force-broken-image-icon --- -
{{Non-standard_header}}{{CSSRef}}
+{{Non-standard_header}}{{CSSRef}} -

Mozillaの拡張CSSプロパティである -moz-force-broken-image-icon は、画像が壊れているときに表示されるイメージアイコンを、たとえ alt 属性を持っていたとしても、強制的に表示させるために使用されます。

+**`-moz-force-broken-image-icon`** は拡張 CSS プロパティで、壊れた画像に `alt` 属性が付いていても、壊れた画像のアイコンを強制的に表示することができます。 -

{{cssinfo}}

+## 構文 -

構文

+### 値 -

Values

+- {{cssxref("<integer>")}} + - : プロパティの値に `1` を指定した場合、その画像が {{HTMLElement("img", "`alt`", "#attr-alt")}} 属性を持っていたとしても、壊れた画像アイコンが表示されます。`0` を指定した場合、通常通り `alt` 属性のみが表示されます。 -
-
{{cssxref("<integer>")}}
-
プロパティの値に 1 を指定した場合、その画像が {{HTMLElement("img", "alt", "#attr-alt")}} 属性を持っていたとしても、壊れたイメージアイコンが表示されます。0 を指定した場合、通常通り alt 属性のみが表示されます。
-
+> **Note:** プロパティの値に `1` を指定した場合もなお、 `alt` 属性は壊れた画像アイコンの隣に同時に表示されます。 -
注: プロパティの値に 1 を指定した場合もなお、 alt 属性は壊れたイメージアイコンの隣に同時に表示されます。
+## 公式定義 -

Formal syntax

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

例

+

例

-

HTML

+### HTML -
<img src='/broken/image/link.png' alt='Broken image link'>
+```html +Broken image link +``` -

CSS

+### CSS -
img {
+```css
+img {
   -moz-force-broken-image-icon: 1;
   height: 100px;
   width: 100px;
-}
+} +``` + +### 結果 + +{{ EmbedLiveSample('Examples','125','125','/files/4619/broken%20image%20link.png') }} -

Result

+> **Note:** `-moz-force-broken-image-icon` の値に `1` を指定した場合、その画像に width と height を明示的に指定しない限り、壊れた画像アイコンは表示されず、 `alt` 属性も非表示になります。 -

{{ EmbedLiveSample('Example','125','125','/files/4619/broken%20image%20link.png') }}

+## メモ -
注: -moz-force-broken-image-icon の値に 1 を指定した場合、その画像にwidthとheightを明示的に指定しない限り、壊れたイメージアイコンは表示されず、 alt 属性も非表示になります。
+- このプロパティは Geckoベースのブラウザでのみ使用できます。 +- このプロパティの使用は非推奨です。代わりに適切な `alt` 属性を使用してください。 -

注記

+## 仕様書 - +どの標準にも含まれていません。 -

仕様

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

どの仕様にも記載されていません。

+{{Compat}} -

関連情報

+## 関連情報 - +- {{ Bug(58646) }} diff --git a/files/ja/web/css/-moz-image-rect/firefox.png b/files/ja/web/css/-moz-image-rect/firefox.png new file mode 100644 index 0000000000..d9c3310f1d Binary files /dev/null and b/files/ja/web/css/-moz-image-rect/firefox.png differ diff --git a/files/ja/web/css/-moz-image-rect/index.md b/files/ja/web/css/-moz-image-rect/index.md new file mode 100644 index 0000000000..3b44933745 --- /dev/null +++ b/files/ja/web/css/-moz-image-rect/index.md @@ -0,0 +1,163 @@ +--- +title: '-moz-image-rect' +slug: Web/CSS/-moz-image-rect +tags: + - CSS + - CSS 関数 + - CSS 画像 + - CSS:Mozilla 拡張 + - 関数 + - 標準外 + - リファレンス +browser-compat: css.types.-moz-image-rect +--- +{{CSSRef}}{{Non-standard_Header}} + +**`-moz-image-rect`** は [CSS](/ja/docs/Web/CSS) の {{CSSxRef("background-image")}} に対する値で、大きな画像の一部を背景として使用することができます。 + +## 構文 + +```css +-moz-image-rect({{CSSxRef("url()")}}, top, right, bottom, left); +``` + +### 値 + +- {{CSSxRef("url()")}} + - : 部分画像を取得する画像の URI です。 +- `top` + - : 指定された画像内の部分画像の上端の辺を、 {{CSSxRef("<integer>")}} または {{CSSxRef("<percentage>")}} で指定します。 +- `right` + - : 指定された画像内の部分画像の右端の辺を、 {{CSSxRef("<integer>")}} または {{CSSxRef("<percentage>")}} で指定します。 +- `bottom` + - : 指定された画像内の部分画像の下端の辺を、 {{CSSxRef("<integer>")}} または {{CSSxRef("<percentage>")}} で指定します。 +- `left` + - : 指定された画像内の部分画像の左端の辺を、 {{CSSxRef("<integer>")}} または {{CSSxRef("<percentage>")}} で指定します。 + +## 解説 + +このプロパティを使用すると、例えば、1 つの大きな画像の異なる部分を、コンテンツの異なる部分の背景として使用することができます。 + +これは、{{CSSxRef("-moz-image-region")}} プロパティとよく似た働きをします。このプロパティは、{{CSSxRef("list-style-image")}} プロパティと一緒に使用され、画像の一部をリストの箇条書きとして使用します。ただし、これはどのような CSS 背景にも使用できます。 + +長方形の構文は、{{CSSxRef("<shape>")}} を生成する [`rect()`](/ja/docs/Web/CSS/shape#syntax) 関数に似ています。CSS タイプを生成する関数です。4 つの値はすべて、画像の左上隅に対する相対値です。 + +

例

+ +この例では、画像をロードし、それを 4 分割して 4 つの {{HTMLElement("div")}} ブロックに Firefox ロゴを描画しています。コンテナーをクリックすると、4 つの {{CSSxRef("background-image")}} プロパティの値が 4 つの {{HTMLElement("div")}} ブロック間で入れ替わることで、4 つの区域が回転します。 + +### CSS + +CSS では、1 つのコンテナーのスタイルを定義した後、画像全体を構成する 4 つのボックスのスタイルを定義しています。 + +コンテナーは次のようになります。 + +```css +#container { + width:267px; + height:272px; + top:100px; + left:100px; + position:absolute; + font-size:16px; + text-shadow:white 0px 0px 6px; + text-align:center; +} +``` + +次に、画像の区域を定義する 4 つのボックスを定義します。1 つずつ見ていきましょう。 + +```css +#box1 { + background-image: -moz-image-rect(url(firefox.png), 0%, 50%, 50%, 0%); + width:133px; + height:136px; + position:absolute; +} +``` + +これは画像の左上隅です。ファイル `firefox.jpg` に含まれる画像の左上 1/4 を含む長方形を定義します。 + +```css +#box2 { + background-image: -moz-image-rect(url(firefox.png), 0%, 100%, 50%, 50%); + width:133px; + height:136px; + position:absolute; +} +``` + +これは、画像の右上隅を定義します。 + +他の隅も同様のパターンです。 + +```css +#box3 { + background-image: -moz-image-rect(url(firefox.png), 50%, 50%, 100%, 0%); + width:133px; + height:136px; + position:absolute; +} +#box4 { + background-image: -moz-image-rect(url(firefox.png), 50%, 100%, 100%, 50%); + width:133px; + height:136px; + position:absolute; +} +``` + +### HTML + +HTML はとてもシンプルです。 + +```html +
+
Top left
+
Top right
+
Bottom left
+
Bottom right
+
+``` + +これにより、画像の 4 つの区域が 2 × 2 のボックスグリッドに配置されます。これらの 4 つの区域は、大きな {{HTMLElement("div")}} ブロックの中に含まれており、クリックイベントを受信して JavaScript コードに配信することを主な目的としています。 + +### JavaScript コード + +このコードは、コンテナーがマウスでクリックされたときのクリックイベントを処理します。 + +```js +function rotate() { + var prevStyle = window.getComputedStyle(document.getElementById("box4"), null).getPropertyValue("background-image"); + + // 最後の 1 枚を保存したところで、回転を開始します。 + + for (var i=1; i<=4; i++) { + var curId = "box" + i; + + // 背景画像のをずらす + + var curStyle = window.getComputedStyle(document.getElementById(curId), null).getPropertyValue("background-image"); + document.getElementById(curId).style.backgroundImage = prevStyle; + prevStyle = curStyle; + } +} +``` + +これは {{DOMxRef("window.getComputedStyle()")}} を使って各要素のスタイルを取得し、それを次の要素にシフトしています。この処理を開始する前に、最後のボックスのスタイルのコピーを保存していることに注目してください。3 つ目の要素のスタイルによって上書きされるからです。{{CSSxRef("background-image")}} プロパティの値を、マウスをクリックするたびに 1 つの要素から次の要素にコピーすることで、目的の効果を得ることができます。 + +### どのように見えるか + +{{EmbedLiveSample("Examples","400","400")}} + +## 仕様書 + +どの標準にも含まれていません。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [Mozilla CSS 拡張](/ja/docs/Web/CSS/Mozilla_Extensions) +- [CSS 背景と境界モジュール](/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders) diff --git a/files/ja/web/css/-moz-image-region/index.md b/files/ja/web/css/-moz-image-region/index.md new file mode 100644 index 0000000000..46eb0ba6a7 --- /dev/null +++ b/files/ja/web/css/-moz-image-region/index.md @@ -0,0 +1,77 @@ +--- +title: '-moz-image-region' +slug: Web/CSS/-moz-image-region +tags: + - CSS + - CSS プロパティ + - CSS:Mozilla 拡張 + - 標準外 + - リファレンス + - recipe:css-property +browser-compat: css.properties.-moz-image-region +--- +{{CSSRef}}{{Non-standard_Header}} + +{{CSSxRef("list-style-image")}} プロパティの画像を使用している特定の XUL 要素や擬似要素では、このプロパティは画像全体の代わりに使用される画像の領域を指定します。これにより、要素は同じ画像の異なる部分を使用してパフォーマンスを向上させることができます。 + +```css +/* キーワード値 */ +-moz-image-region: auto; + +/* 値 */ +-moz-image-region: rect(0, 8px, 4px, 4px); + +/* グローバル値 */ +-moz-image-region: inherit; +-moz-image-region: initial; +-moz-image-region: unset; +``` + +構文は {{CSSxRef("clip")}} プロパティと似ています。4 つの値はすべて、画像の左上隅を基準にしています。 + +> **Note:** 背景画像で動作する仕組みについては、 {{CSSxRef("-moz-image-rect")}} を参照してください。 + +## 構文 + +### 値 + +- `auto` + - : 使用する画像の領域を自動的に定義します。 +- [``](/ja/docs/Web/CSS/shape) + - : 使用する部分画像を定義する図形です。関数 `rect()` は、形状として使用する長方形を定義します。その引数は、画像の上、右、下、左の辺のオフセットを、この順番で定義します。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{CSSSyntax}} + +## 例 + +### 画像の切り抜き + +```css +#example-button { + /* この画像の左上から 4x4 の領域のみを表示する */ + list-style-image: url("chrome://example/skin/example.png"); + -moz-image-region: rect(0px, 4px, 4px, 0px); +} +#example-button:hover { + /* 最初のボタンの右にある 4x4 の領域を、ホバーされたボタンに使用します。 */ + -moz-image-region: rect(0px, 8px, 4px, 4px); +} +``` + +## 仕様書 + +どの標準にも含まれていません。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{CSSxRef("-moz-image-rect")}} diff --git a/files/ja/web/css/-moz-orient/index.md b/files/ja/web/css/-moz-orient/index.md index 361c8e08f9..b0c67a53cf 100644 --- a/files/ja/web/css/-moz-orient/index.md +++ b/files/ja/web/css/-moz-orient/index.md @@ -5,76 +5,79 @@ tags: - CSS - CSS プロパティ - Mozilla 拡張 - - Non-standard - - Reference + - 標準外 + - リファレンス + - recipe:css-property +browser-compat: css.properties.-moz-orient translation_of: Web/CSS/-moz-orient --- -
{{CSSRef}}{{Non-standard_header}}
+{{CSSRef}}{{Non-standard_header}} -

CSS の -moz-orient プロパティは、適用される要素の向きを指定します。

+**`-moz-orient`** は [CSS](/ja/docs/Web/CSS) のプロパティで、適用される要素の向きを指定します。 -

{{cssinfo}}

+## 構文 -

構文

+`-moz-orient` プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。 -

-moz-orient プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。

+### 値 -

値

+- `inline` + - : 要素をテキストの軸と同じ方向に描画します。横書きモードでは水平方向に、縦書きモードでは垂直方向に描画します。 +- `block` + - : 要素をテキストの軸と直交するように描画します。横書きモードでは垂直方向に、縦書きモードでは水平方向に描画します。 +- `horizontal` + - : 要素が水平方向に描画される +- `vertical` + - : 要素が垂直方向に描画される -
-
inline
-
要素をテキストの軸と同じ方向に描画します。横書きモードでは水平方向に、縦書きモードでは垂直方向に描画します。
-
block
-
要素をテキストの軸と直交するように描画します。横書きモードでは垂直方向に、縦書きモードでは水平方向に描画します。
-
horizontal
-
要素が水平方向に描画される
-
vertical
-
要素が垂直方向に描画される
-
+## 公式定義 -

形式文法

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

例

+

例

-

HTML

+### HTML -
<p>
+```html
+

   The following progress meter
   is horizontal (the default):
-</p>
-<progress max="100" value="75"></progress>
+

+
 
-<p>
+

  The following progress meter
  is vertical:
-</p>
-<progress class="vert" max="100" value="75"></progress>
+

+ +``` -

CSS

+### CSS -
.vert {
+```css
+.vert {
   -moz-orient: vertical;
   width: 16px;
   height: 150px;
-}
- -

結果

+} +``` -

{{EmbedLiveSample("Examples","200","360")}}

+### 結果 -

仕様書

+{{EmbedLiveSample("Examples","200","360")}} -

W3C に提出され、最初の反応は肯定的でしたが、このプロパティはまだ仕様書には含まれていません。今のところ、 Mozilla 独自の拡張 (つまり、 -moz-orient) です。

+## 仕様書 -

ブラウザーの対応

+W3C に[提出](https://lists.w3.org/Archives/Public/www-style/2014Jun/0396.html)され、最初の反応は肯定的でしたが、このプロパティはまだ仕様書には含まれていません。今のところ、 Mozilla 独自の拡張 (つまり、 `-moz-orient`) です。 +## ブラウザーの互換性 -

{{Compat("css.properties.-moz-orient")}}

+{{Compat}} -

関連情報

+## 関連情報 -
    -
  • {{cssxref("box-orient")}}
    • -
+- {{cssxref("box-orient")}} diff --git a/files/ja/web/css/-moz-outline-radius-bottomleft/index.md b/files/ja/web/css/-moz-outline-radius-bottomleft/index.md index dfe9f8e8b6..00b40acd7c 100644 --- a/files/ja/web/css/-moz-outline-radius-bottomleft/index.md +++ b/files/ja/web/css/-moz-outline-radius-bottomleft/index.md @@ -3,72 +3,73 @@ title: '-moz-outline-radius-bottomleft' slug: Web/CSS/-moz-outline-radius-bottomleft tags: - CSS - - CSS Property + - CSS プロパティ - NeedsCompatTable - NeedsContent - - Non-standard - - Reference - - 'recipe:css-property' + - 標準外 + - リファレンス + - recipe:css-property +browser-compat: css.properties.-moz-outline-radius-bottomleft translation_of: Web/CSS/-moz-outline-radius-bottomleft --- -
{{Non-standard_header}}{{CSSRef}}
+{{CSSRef}}{{deprecated_header}} -

Mozilla アプリケーションにおいて、 -moz-outline-radius-bottomleft は CSS のプロパティで、要素の輪郭線 ({{cssxref("outline")}}) の左下の角を丸くするために使用することができます。

+Mozilla アプリケーションにおいて、 **`-moz-outline-radius-bottomleft`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の輪郭線 ({{cssxref("outline")}}) の左下の角を丸くするために使用することができます。 -

構文

+## 構文 -

-moz-outline-radius-bottomleft の値は、 {{cssxref("length", "<length>")}} または境界ボックスの対応する大きさに対するパーセント値のどちらかです。 {{cssxref("calc", "calc()")}} 関数も同様に使用することができます。

+`-moz-outline-radius-bottomleft` の値は、 {{cssxref("length", "<length>")}} または境界ボックスの対応する大きさに対する[パーセント値](/ja/docs/Web/CSS/percentage)のどちらかです。 {{cssxref("calc", "calc()")}} 関数も同様に使用することができます。 -

値

+### 値 -
-
<length>
-
要素の下端と左端の曲率を定義する円の半径を CSS の {{cssxref("length", "<length>")}} で指定します。
-
<percentage>
-
要素の左下隅の丸めを定義する円の半径で、ボーダーボックスの下辺と左辺のパーセント値で指定します。
-
+- `` + - : 要素の下端と左端の曲率を定義する円の半径を CSS の {{cssxref("length", "<length>")}} で指定します。 +- `` + - : 要素の左下隅の丸めを定義する円の半径で、境界ボックスの下辺と左辺の[パーセント値](/ja/docs/Web/CSS/percentage)で指定します。 -

公式定義

+## 公式定義 -

{{cssinfo}}

+{{cssinfo}} -

形式文法

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

例

+## 例 -

アウトラインを丸める

+

輪郭線を丸める

-

これは Firefox 専用のプロパティなので、この例では Firefox 以外のブラウザーで表示している場合は、期待した効果が表示されません。

+これは Firefox 専用のプロパティなので、この例では Firefox 以外のブラウザーで表示している場合は、期待した効果が表示されません。 -

HTML

+#### HTML -
<p>Look at this paragraph's bottom-left corner.</p>
+```html +

Look at this paragraph's bottom-left corner.

+``` -

CSS

+#### CSS -
p {
+```css
+p {
   margin: 10px;
   border: solid cyan;
   outline: dotted green;
   -moz-outline-radius-bottomleft: 2em;
-}
+} +``` -

結果

+#### 結果 -

{{EmbedLiveSample("Rounding_a_outline")}}

+{{EmbedLiveSample("Rounding_a_outline")}} -

仕様書

+## 仕様書 -

標準の一部ではありません。

+どの標準にも含まれていません。 -

ブラウザーの互換性

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

{{Compat("css.properties.-moz-outline-radius-bottomleft")}}

+{{Compat}} -

関連情報

+## 関連情報 -
    -
  • 詳しくは {{cssxref("-moz-outline-radius")}} プロパティを参照してください。
    • -
+- 詳しくは {{cssxref("-moz-outline-radius")}} プロパティを参照してください。 diff --git a/files/ja/web/css/-moz-outline-radius-bottomright/index.md b/files/ja/web/css/-moz-outline-radius-bottomright/index.md index 629fb0ee20..215d79243a 100644 --- a/files/ja/web/css/-moz-outline-radius-bottomright/index.md +++ b/files/ja/web/css/-moz-outline-radius-bottomright/index.md @@ -3,72 +3,71 @@ title: '-moz-outline-radius-bottomright' slug: Web/CSS/-moz-outline-radius-bottomright tags: - CSS - - CSS Property + - CSS プロパティ - NeedsCompatTable - NeedsContent - - Non-standard - - Reference - - 'recipe:css-property' + - 標準外 + - リファレンス + - recipe:css-property +browser-compat: css.properties.-moz-outline-radius-bottomright translation_of: Web/CSS/-moz-outline-radius-bottomright --- -
{{Non-standard_header}}{{CSSRef}}
+{{CSSRef}}{{deprecated_header}} -

Mozilla アプリケーションにおいて、 -moz-outline-radius-bottomright は CSS のプロパティで、要素の輪郭線 ({{cssxref("outline")}}) の右下の角を丸くするために使用することができます。

+Mozilla アプリケーションにおいて、 **`-moz-outline-radius-bottomright`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の輪郭線 ({{cssxref("outline")}}) の右下の角を丸くするために使用することができます。 -

構文

+## 構文 -

-moz-outline-radius-bottomright の値は、 {{cssxref("length", "<length>")}} または境界ボックスの対応する大きさに対するパーセント値のどちらかです。 {{cssxref("calc", "calc()")}} 関数も同様に使用することができます。

+`-moz-outline-radius-bottomright` の値は、 {{cssxref("length", "<length>")}} または境界ボックスの対応する大きさに対する[パーセント値](/ja/docs/Web/CSS/percentage)のどちらかです。 {{cssxref("calc", "calc()")}} 関数も同様に使用することができます。 -

値

+### 値 -
-
<length>
-
要素の下端と右端の曲率を定義する円の半径を CSS の {{cssxref("length", "<length>")}} で指定します。
-
<percentage>
-
要素の右下隅の丸めを定義する円の半径で、ボーダーボックスの下辺と右辺のパーセント値で指定します。
-
+- `` + - : 要素の下端と右端の曲率を定義する円の半径を CSS の {{cssxref("length", "<length>")}} で指定します。 +- `` + - : 要素の右下隅の丸めを定義する円の半径で、境界ボックスの下辺と右辺の[パーセント値](/ja/docs/Web/CSS/percentage)で指定します。 -

公式定義

+## 公式定義 -

{{CSSInfo}}

+{{CSSInfo}} -

形式文法

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

例

+## 例 -

HTML

+### HTML -
<p>Look at this paragraph's bottom-right corner.</p>
+```html +

Look at this paragraph's bottom-right corner.

+``` -

CSS

+### CSS -
p {
+```css
+p {
   margin: 5px;
   border: solid cyan;
   outline: dotted red;
   -moz-outline-radius-bottomright: 2em;
-}
+} +``` -

結果

+### 結果 -

{{EmbedLiveSample("Examples")}}

+{{EmbedLiveSample("Examples")}} -
-

注: 上記の例は、 Firefox 以外のブラウザーで表示させると、期待通りの効果が表示されません。

-
+注: この例は Firefox 以外のブラウザーで閲覧したときに、期待される効果が表示されません。 -

仕様書

+## 仕様書 -

標準の一部ではありません。

+どの標準にも含まれていません。 -

ブラウザーの互換性

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

{{Compat("css.properties.-moz-outline-radius-bottomright")}}

+{{Compat}} -

関連情報

+## 関連情報 -
    -
  • 詳しくは {{cssxref("-moz-outline-radius")}} プロパティを参照してください。
    • -
+- 詳しくは {{cssxref("-moz-outline-radius")}} プロパティを参照してください。 diff --git a/files/ja/web/css/-moz-outline-radius-topleft/index.md b/files/ja/web/css/-moz-outline-radius-topleft/index.md index 0d0d4e9f4e..44bbb49a9a 100644 --- a/files/ja/web/css/-moz-outline-radius-topleft/index.md +++ b/files/ja/web/css/-moz-outline-radius-topleft/index.md @@ -3,70 +3,71 @@ title: '-moz-outline-radius-topleft' slug: Web/CSS/-moz-outline-radius-topleft tags: - CSS - - CSS Property + - CSS プロパティ - NeedsCompatTable - NeedsContent - - Non-standard - - Reference - - 'recipe:css-property' + - 標準外 + - リファレンス + - recipe:css-property +browser-compat: css.properties.-moz-outline-radius-topleft translation_of: Web/CSS/-moz-outline-radius-topleft --- -
{{Non-standard_header}}{{CSSRef}}
+{{CSSRef}}{{deprecated_header}} -

Mozilla アプリケーションにおいて、 -moz-outline-radius-topleft は CSS のプロパティで、要素の輪郭線 ({{cssxref("outline")}}) の左上の角を丸くするために使用することができます。

+Mozilla アプリケーションにおいて、 **`-moz-outline-radius-topleft`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の輪郭線 ({{cssxref("outline")}}) の左上の角を丸くするために使用することができます。 -

構文

+## 構文 -

-moz-outline-radius-topleft の値は、 {{cssxref("length", "<length>")}} または境界ボックスの対応する大きさに対するパーセント値のどちらかです。 {{cssxref("calc", "calc()")}} 関数も同様に使用することができます。

+`-moz-outline-radius-topleft` の値は、 {{cssxref("length", "<length>")}} または境界ボックスの対応する大きさに対する[パーセント値](/ja/docs/Web/CSS/percentage)のどちらかです。 {{cssxref("calc()", "calc()")}} 関数も同様に使用することができます。 -

値

+### 値 -
-
<length>
-
要素の上端と左端の曲率を定義する円の半径を CSS の {{cssxref("length", "<length>")}} で指定します。
-
<percentage>
-
要素の左上隅の丸めを定義する円の半径で、ボーダーボックスの上辺と左辺のパーセント値で指定します。
-
+- `` + - : 要素の上端と左端の曲率を定義する円の半径を CSS の {{cssxref("length", "<length>")}} で指定します。 +- `` + - : 要素の左上隅の丸めを定義する円の半径で、境界ボックスの上辺と左辺の[パーセント値](/ja/docs/Web/CSS/percentage)で指定します。 -

公式定義

+## 公式定義 -

{{CSSInfo}}

+{{CSSInfo}} -

形式文法

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

例

+

例

-

下記の例は Firefox 以外のブラウザーで見ている場合は、求められる効果が表示されません。

+下記の例は Firefox 以外のブラウザーで見ている場合は、求められる効果が表示されません。 -

HTML

+### HTML -
<p>段落の左上の角を見てください。</p>
+```html +

Look at this paragraph's top-left corner.

+``` -

CSS

+### CSS -
p {
+```css
+p {
   margin: 5px;
   border: solid cyan;
   outline: dotted red;
   -moz-outline-radius-topleft: 2em;
-}
+} +``` -

結果

+### 結果 -

{{EmbedLiveSample("Examples")}}

+{{EmbedLiveSample("Examples")}} -

仕様書

+## 仕様書 -

標準の一部ではありません。

+どの標準にも含まれていません。 -

ブラウザーの互換性

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

{{Compat("css.properties.-moz-outline-radius-topleft")}}

+{{Compat}} -

関連情報

+## 関連情報 -
    -
  • 詳しくは {{cssxref("-moz-outline-radius")}} プロパティを参照してください。
    • -
+- 詳しくは {{cssxref("-moz-outline-radius")}} プロパティを参照してください。 diff --git a/files/ja/web/css/-moz-outline-radius-topright/index.md b/files/ja/web/css/-moz-outline-radius-topright/index.md index d1643bd009..39ce8347cd 100644 --- a/files/ja/web/css/-moz-outline-radius-topright/index.md +++ b/files/ja/web/css/-moz-outline-radius-topright/index.md @@ -3,73 +3,71 @@ title: '-moz-outline-radius-topright' slug: Web/CSS/-moz-outline-radius-topright tags: - CSS - - CSS Property + - CSS プロパティ - NeedsCompatTable - NeedsContent - - Non-standard - - Reference - - 'recipe:css-property' + - 標準外 + - リファレンス + - recipe:css-property +browser-compat: css.properties.-moz-outline-radius-topright translation_of: Web/CSS/-moz-outline-radius-topright --- -
{{Non-standard_header}}{{CSSRef}}
+{{CSSRef}}{{deprecated_header}} -

Mozilla アプリケーションにおいて、 -moz-outline-radius-topright は CSS のプロパティで、要素の輪郭線 ({{cssxref("outline")}}) の⇀上の角を丸くするために使用することができます。

+Mozilla アプリケーションにおいて、 **`-moz-outline-radius-topright`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の輪郭線 ({{cssxref("outline")}}) の 上の角を丸くするために使用することができます。 -

構文

+## 構文 -

-moz-outline-radius-topright の値は、 {{cssxref("length", "<length>")}} または境界ボックスの対応する大きさに対するパーセント値のどちらかです。 {{cssxref("calc", "calc()")}} 関数も同様に使用することができます。

+`-moz-outline-radius-topright` の値は、[``](/ja/docs/Web/CSS/length) または境界ボックスの対応する大きさに対する[パーセント値](/ja/docs/Web/CSS/percentage)のどちらかです。 [`calc()`]() 関数も同様に使用することができます。 -

値

+### 値 -
-
<length>
-
要素の上端と右端の曲率を定義する円の半径を CSS の {{cssxref("length", "<length>")}} で指定します。
-
<percentage>
-
要素の右上隅の丸めを定義する円の半径で、ボーダーボックスの上辺と右辺のパーセント値で指定します。
-
+- `` + - : 要素の上端と右端の曲率を定義する円の半径を CSS の {{cssxref("length", "<length>")}} で指定します。 +- `` + - : 要素の右上隅の丸めを定義する円の半径で、境界ボックスの上辺と右辺の[パーセント値](/ja/docs/Web/CSS/percentage)で指定します。 -

公式定義

+## 公式定義 -

{{CSSInfo}}

+{{CSSInfo}} -

形式文法

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

例

+

例

-

HTML

+### HTML -
<p>段落の右上の角を見てください。</p>
+```html +

Look at this paragraph's top-right corner.

+``` -

CSS

+### CSS -
p {
+```css
+p {
   margin: 5px;
   border: solid cyan;
   outline: dotted red;
   -moz-outline-radius-topright: 2em;
-}
+} +``` -

結果

+### 結果 -

{{EmbedLiveSample("Examples")}}

+{{EmbedLiveSample("Examples")}} -
-

上記の例は Firefox 以外のブラウザーで見ている場合は、求められる効果が表示されません。

-
+> **Note:** 上記の例は Firefox 以外のブラウザーで見ている場合は、求められる効果が表示されません。 -

仕様書

+## 仕様書 -

標準の一部ではありません。

+標準の一部ではありません。 -

ブラウザーの互換性

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

{{Compat("css.properties.-moz-outline-radius-topright")}}

+## 関連情報 -

関連情報

- -
    -
  • 詳しくは {{cssxref("-moz-outline-radius")}} プロパティを参照してください。
    • -
+- 詳しくは {{cssxref("-moz-outline-radius")}} プロパティを参照してください。 diff --git a/files/ja/web/css/-moz-outline-radius/index.md b/files/ja/web/css/-moz-outline-radius/index.md index f8e21bd877..41d16c7a40 100644 --- a/files/ja/web/css/-moz-outline-radius/index.md +++ b/files/ja/web/css/-moz-outline-radius/index.md @@ -2,102 +2,118 @@ title: '-moz-outline-radius' slug: Web/CSS/-moz-outline-radius tags: - - '-moz-outline-radius' - - '-moz-outline-radius-bottomleft' - - '-moz-outline-radius-bottomright' - - '-moz-outline-radius-topleft' - - '-moz-outline-radius-topright' - CSS - CSS プロパティ - Mozilla 拡張 - - Non-standard - - Reference + - 標準外 + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.-moz-outline-radius translation_of: Web/CSS/-moz-outline-radius --- -
{{CSSRef}}{{Non-standard_header}}
+{{CSSRef}}{{deprecated_header}} -

Firefox などの Mozilla アプリケーションにおいて、 CSS の -moz-outline-radius プロパティは、要素の輪郭線 ({{cssxref("outline")}}) の角を丸くするために使用することができます。

+Firefox などの Mozilla アプリケーションにおいて、**`-moz-outline-radius`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の輪郭線 ({{cssxref("outline")}}) の角を丸くするために使用することができます。 -
/* 1つの値 */
+```css
+/* 1 つの値 */
 -moz-outline-radius: 25px;
 
-/* 2つの値 */
+/* 2 つの値 */
 -moz-outline-radius: 25px 1em;
 
-/* 3つの値 */
+/* 3 つの値 */
 -moz-outline-radius: 25px 1em 12%;
 
-/* 4つの値 */
+/* 4 つの値 */
 -moz-outline-radius: 25px 1em 12% 4mm;
 
 /* グローバル値 */
 -moz-outline-radius: inherit;
 -moz-outline-radius: initial;
 -moz-outline-radius: unset;
-
+``` -

このプロパティは、一括指定であり、4つのプロパティ {{cssxref("-moz-outline-radius-topleft")}}, {{cssxref("-moz-outline-radius-topright")}}, {{cssxref("-moz-outline-radius-bottomright")}}, {{cssxref("-moz-outline-radius-bottomleft")}} を設定します。

+## 構成要素のプロパティ -

{{cssinfo}}

+このプロパティは以下の CSS プロパティの一括指定です。 -

構文

+- [`-moz-outline-radius-bottomleft`](/ja/docs/Web/CSS/-moz-outline-radius-bottomleft) +- [`-moz-outline-radius-bottomright`](/ja/docs/Web/CSS/-moz-outline-radius-bottomright) +- [`-moz-outline-radius-topleft`](/ja/docs/Web/CSS/-moz-outline-radius-topleft) +- [`-moz-outline-radius-topright`](/ja/docs/Web/CSS/-moz-outline-radius-topright) -

値

+## 構文 -
楕円形の輪郭線や <percentage> の値は、 {{cssxref("border-radius")}} で説明されている構文に従います。
+### 値 -

1～4つの <outline-radius> 値で、次のうちの一つを表します。

+> **Note:** 楕円形の輪郭線や `` の値は、 {{cssxref("border-radius")}} で説明されている構文に従います。 -
-
{{cssxref("<length>")}}
-
取りうる値については {{cssxref("<length>")}} をご覧ください。
-
{{cssxref("<percentage>")}}
-
{{cssxref("<percentage>")}}。詳しくは {{cssxref("border-radius")}} を参照してください。
-
+1 ～ 4 つの `` 値で、次のうちの一つを表します。 -
    -
  • 1つの値が設定された場合、全4隅に適用します。
    • -
  • 2つの値が設定された場合、最初の値は左上と右下の角に、二番目の値は右上と左下の角に適用します。
    • -
  • 3つの値が設定された場合、最初の値は左上の角に、二番目の値は右上と左下の角に、三番目の値は右下の角に適用します。
    • -
  • 4つの値が設定された場合、最初の値は左上の角に、二番目の値は右上の角に、三番目の値は右下の角に、四番目の値は左下の角に適用します。
    • -
+- {{cssxref("<length>")}} + - : 取りうる値については {{cssxref("<length>")}} をご覧ください。 +- {{cssxref("<percentage>")}} + - : {{cssxref("<percentage>")}}。詳しくは {{cssxref("border-radius")}} を参照してください。 -

形式文法

+ + +- 1 つの値が設定された場合、全 4 隅に適用します。 +- 2 つの値が設定された場合、最初の値は左上と右下の角に、2 番目の値は右上と左下の角に適用します。 +- 3 つの値が設定された場合、最初の値は左上の角に、2 番目の値は右上と左下の角に、3 番目の値は右下の角に適用します。 +- 4 つの値が設定された場合、最初の値は左上の角に、2 番目の値は右上の角に、3 番目の値は右下の角に、4 番目の値は左下の角に適用します。 + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 -

HTML

+

輪郭線を丸める

-
<p>This element has a rounded outline!</p>
+注: この例は Firefox 以外のブラウザーで閲覧したときに、期待される効果が表示されません。 -

CSS

+#### HTML -
p {
+```html
+
This element has a rounded outline!

+```
+
+#### CSS
+
+```css
+p {
   margin: 5px;
   border: 1px solid black;
   outline: dotted red;
   -moz-outline-radius: 12% 1em 25px;
-}
+} +``` + +### 結果 + +{{EmbedLiveSample('Rounding_an_outline')}} -

結果

+## メモ -

{{EmbedLiveSample('Example')}}

+- `dotted` または `dashed` で角を丸めた輪郭線は、 Firefox 50 までは実線で描かれていました。 {{bug("382721")}} +- 将来のバージョンの Gecko/Firefox では、このプロパティが完全になくなるかもしれません。 {{bug("593717")}} を参照してください。 -

注: 上記の例は、 Firefox 以外のブラウザーで表示させると、期待通りの効果が表示されません。

+## 仕様書 -

メモ

+どの標準にも含まれていません。 -
    -
  • dotted または dashed で角を丸めた輪郭線は、 Firefox 50 までは実戦で描かれていました。 {{bug("382721")}}
    • -
  • 将来のバージョンの Gecko/Firefox では、このプロパティが完全になくなるかもしれません。 {{bug("593717")}} を参照してください。
    • -
+## ブラウザーの互換性 -

仕様書

+{{Compat}} -

このプロパティはどの CSS 標準で定義されていません。

+## 関連情報 -

ブラウザーの互換性

+- [Mozilla CSS 拡張](/ja/docs/Web/CSS/Mozilla_Extensions) +- 関連する CSS プロパティ: -

{{Compat("css.properties.-moz-outline-radius")}}

+ - [`outline`](/ja/docs/Web/CSS/outline) diff --git a/files/ja/web/css/-moz-user-focus/index.md b/files/ja/web/css/-moz-user-focus/index.md new file mode 100644 index 0000000000..dc53657b13 --- /dev/null +++ b/files/ja/web/css/-moz-user-focus/index.md @@ -0,0 +1,93 @@ +--- +title: '-moz-user-focus' +slug: Web/CSS/-moz-user-focus +tags: + - '-moz-user-focus' + - CSS + - CSS:Mozilla 拡張 + - NeedsContent + - 標準外 + - リファレンス + - recipe:css-property +browser-compat: css.properties.-moz-user-focus +translation_of: Web/CSS/-moz-user-focus +--- +{{CSSRef}} {{Non-standard_header}} + +**`-moz-user-focus`** は [CSS](/ja/docs/Web/CSS) のプロパティで、ある要素がフォーカスを持つことができるかどうかを示すために使用されます。 + +```css +/* キーワード値 */ +-moz-user-focus: normal; +-moz-user-focus: ignore; + +/* グローバル値 */ +-moz-user-focus: inherit; +-moz-user-focus: initial; +-moz-user-focus: unset; +``` + +この値を `ignore` に設定することで、その要素のフォーカスを無効にすることができます。その要素はタブ順で飛ばされます。 + +{{cssinfo}} + +> **Note:** このプロパティは XUL の {{XULElem("textbox")}} 要素では動作しません。`textbox` 自体はフォーカスを受けないからです。代わりに、XBL は無名の HTML {{HTMLElement("input")}} 要素を `textbox` の中に作成し、その要素がフォーカスを受けます。`textbox` がキーボードのフォーカスを受けないようにするには、そのタブインデックスを `-1` に設定することで、またマウスのフォーカスを受けないようにするには、`mousedown` イベントの既定のアクションを防ぐことで可能です。 + +## 構文 + +### 値 + +- `ignore` + - : その要素は、キーボードフォーカスを受け付けず、タブ順でスキップされます。 +- `normal` + - : 要素がキーボードフォーカスを受けられるようになります。 +- `select-after` + - : ? +- `select-before` + - : ? +- `select-menu` + - : ? +- `select-same` + - : ? +- `select-all` + - : ? +- `none` + - : ? + +## 公式定義 + +{{CSSInfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### HTML + +```html + +``` + +### CSS + +```css +.ignored { + -moz-user-focus: ignore; +} +``` + +## 仕様書 + +どの標準にも含まれていません。同様のプロパティである `user-focus` は、[CSS3 UI 仕様の前身の初期草稿](https://www.w3.org/TR/2000/WD-css3-userint-20000216)で提案されましたが、ワーキンググループで却下されました。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("-moz-user-input")}} +- {{cssxref("user-modify", "-moz-user-modify")}} +- {{cssxref("user-select", "-moz-user-select")}} diff --git a/files/ja/web/css/-moz-user-input/index.md b/files/ja/web/css/-moz-user-input/index.md index aba350c66b..0f6954cee2 100644 --- a/files/ja/web/css/-moz-user-input/index.md +++ b/files/ja/web/css/-moz-user-input/index.md @@ -3,18 +3,19 @@ title: '-moz-user-input' slug: Web/CSS/-moz-user-input tags: - CSS - - CSS Property - - Deprecated - - Mozilla 拡張 - - Non-standard - - Reference + - CSS プロパティ + - CSS:Mozilla 拡張 + - 非推奨 + - 標準外 + - リファレンス translation_of: Web/CSS/-moz-user-input --- -
{{CSSRef}}{{Non-standard_Header}}{{Deprecated_Header(60)}}
+{{CSSRef}}{{Non-standard_Header}}{{Deprecated_Header}} -

Mozilla アプリケーションでは、 -moz-user-input はある要素がユーザの入力を受け付けるかどうかを決定します。

+Mozilla アプリケーションでは、 **`-moz-user-input`** はある要素がユーザの入力を受け付けるかどうかを決定します。 -
/* キーワード値 */
+```css
+/* キーワード値 */
 -moz-user-input: none;
 -moz-user-input: enabled;
 -moz-user-input: disabled;
@@ -23,49 +24,52 @@ translation_of: Web/CSS/-moz-user-input
 -moz-user-input: inherit;
 -moz-user-input: initial;
 -moz-user-input: unset;
-
+``` -

{{HTMLElement("textarea")}} のようなユーザーからの入力を通常受け付ける要素では -moz-user-input の初期値は enabled です。

+{{HTMLElement("textarea")}} のようなユーザーからの入力を通常受け付ける要素では `-moz-user-input` の初期値は `enabled` です。 -
-

メモ: -moz-user-input は、 CSS 3 {{cssxref("user-input")}} プロパティの先行実装案の一つでしたが、これはまだ (実装を要求する) 勧告候補に達していません。類似のプロパティ user-focus が CSS3 UI 仕様の前身であった初期の草稿 で提案されましたが、ワーキンググループによって却下されました。

-
+> **Note:** `-moz-user-input` は、 CSS 3 {{cssxref("user-input")}} プロパティの先行実装案の一つでしたが、これはまだ (実装を要求する) 勧告候補に達していません。類似のプロパティ `user-focus` が [CSS3 UI 仕様の前身であった初期の草稿](https://www.w3.org/TR/2000/WD-css3-userint-20000216) で提案されましたが、作業グループによって却下されました。 -

{{CSSInfo}}

+## 構文 -

構文

+### 値 -

値

+- none + - : 要素はユーザーからの入力に反応せず {{CSSxRef(":active")}} にならない。 +- enabled + - : 要素はユーザーからの入力を受け付ける。テキストボックスではこれが標準の動作。**この値は Firefox 60 以降は対応していませんので注意してください ({{bug(1405087)}})。** +- disabled + - : 要素はユーザーからの入力を受け付けない。しかし、これは {{XULAttr("disabled")}} を true にするのとは等しくなく、要素は普通に (無効にならずに) 描画される。**この値は Firefox 60 以降は対応していませんので注意してください ({{bug(1405087)}})。** -
-
none
-
要素はユーザーからの入力に反応せず {{CSSxRef(":active")}} にならない。
-
enabled
-
要素はユーザーからの入力を受け付ける。テキストボックスではこれが標準の動作。この値は Firefox 60 以降は対応していませんので注意してください ({{bug(1405087)}})。
-
disabled
-
要素はユーザーからの入力を受け付けない。しかし、これは {{XULAttr("disabled")}} を true にするのとは等しくなく、要素は普通に (無効にならずに) 描画される。この値は Firefox 60 以降でサポートしませんので注意してください ({{bug(1405087)}})。
-
+## 公式定義 -

形式文法

+{{CSSInfo}} + +## 形式文法 {{CSSSyntax}} -

例

+## 例 + +### 要素のユーザー入力の無効化 -
input.example {
+```css
+input.example {
   /* ユーザーはテキストの選択はできますが変更はできません。 */
   -moz-user-input: disabled;
 }
-
+``` + +## 仕様書 + +どの標準にも含まれていません。 -

ブラウザーの対応

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

{{Compat("css.properties.-moz-user-input")}}

+{{Compat}} -

関連情報

+## 関連情報 -
    -
  • {{CSSxRef("-moz-user-focus")}}
    • -
  • {{CSSxRef("-moz-user-modify")}}
    • -
  • {{CSSxRef("-moz-user-select")}}
    • -
+- {{CSSxRef("-moz-user-focus")}} +- {{CSSxRef("user-modify", "-moz-user-modify")}} +- {{CSSxRef("user-select", "-moz-user-select")}} -- cgit v1.2.3-54-g00ecf