From 7b56d7e6e7df82c5293bce392a9647952edd7376 Mon Sep 17 00:00:00 2001 From: hiroya-uga Date: Thu, 24 Oct 2024 17:46:52 +0900 Subject: [PATCH 01/15] [ja] sync translated content --- files/ja/web/accessibility/aria/roles/search_role/index.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/files/ja/web/accessibility/aria/roles/search_role/index.md b/files/ja/web/accessibility/aria/roles/search_role/index.md index a88d01ae78f9bc..5c00c72a9af738 100644 --- a/files/ja/web/accessibility/aria/roles/search_role/index.md +++ b/files/ja/web/accessibility/aria/roles/search_role/index.md @@ -3,7 +3,7 @@ title: "ARIA: search ロール" slug: Web/Accessibility/ARIA/Roles/search_role --- -検索 (`search`) [ランドマークロール](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles)は、ページ、サイト、またはサイトのコレクションの検索に使用されるページのセクションを識別するために使用します。 +検索 (`search`) ロールは、ページ、サイト、またはサイトのコレクションの検索に使用されるページのセクションを識別するために使用します。 ```html
@@ -13,10 +13,12 @@ slug: Web/Accessibility/ARIA/Roles/search_role ## 説明 -検索 (`search`) ロールは、[ランドマーク](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles)です。 ランドマークは、支援技術によって使用され、文書の大きなセクションを素早く識別してナビゲートすることができます。 検索 (`search`) ロールは、全体として組み合わせて検索機能を作成する項目およびオブジェクトを含むコンテナー要素に追加します。 `` が検索フォームの場合、フォーム ([`form`](/ja/docs/Web/Accessibility/ARIA/Roles/Form_Role)) ロールの代わりに検索 (`search`) ロールを使用します。 文書に複数の検索が含まれている場合、それぞれに固有のラベルを持つべきです。 [`search` 型の `` 要素](/ja/docs/Web/HTML/Element/input/search)はありますが、検索ランドマークを定義する HTML 要素はありません。 +検索 (`search`) ロールは、文書やアプリケーションの検索機能を構成するために組み合わされたすべての要素を囲むコンテナー要素に追加できる[ランドマーク](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#landmark_roles)で、これには子孫要素として [``](/ja/docs/Web/HTML/Element/input/search) が含まれます。文書に複数の検索が含まれている場合、それぞれに固有のラベルを持つべきです。ただし、同じ検索が繰り返される場合は同じラベルを使用します。 [`search` 型の `` 要素](/ja/docs/Web/HTML/Element/input/search) がありますが、これ自体は検索ランドマークを定義するものではありません。検索ランドマークを定義するには、[``](/ja/docss/Web/HTML/Element/search) 要素を使用してください。 ## 例 +[``](/ja/docss/Web/HTML/Element/form) 要素が検索フォームの場合、[`form`](/ja/docs/Web/Accessibility/ARIA/Roles/form_role) ロールの代わりに `search` ロールを使用してください。 + ```html From 615e76c690c2bad3317915abd32f562984e85677 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 20 Oct 2024 11:06:36 +0900 Subject: [PATCH 02/15] =?UTF-8?q?2024/10/02=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/http/mime_types/index.md | 26 ++++++++------------------ 1 file changed, 8 insertions(+), 18 deletions(-) diff --git a/files/ja/web/http/mime_types/index.md b/files/ja/web/http/mime_types/index.md index 7a0fe3ef561e29..07c9c15b580572 100644 --- a/files/ja/web/http/mime_types/index.md +++ b/files/ja/web/http/mime_types/index.md @@ -1,9 +1,8 @@ --- title: MIME タイプ（IANA メディア種別） slug: Web/HTTP/MIME_types -original_slug: Web/HTTP/Basics_of_HTTP/MIME_types l10n: - sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8 + sourceCommit: f75b2c86ae4168e59416aed4c7121f222afc201d --- {{HTTPSidebar}} @@ -79,7 +78,7 @@ MIME タイプは大文字と小文字を区別しませんが、伝統的に小 - : 三次元のオブジェクトやシーンなどのモデルデータです。例えば、 `model/3mf` や `model/vrml` などがあります。 [（IANA での model 型の登録を見る）](https://www.iana.org/assignments/media-types/media-types.xhtml#model) - `text` - - : テキストのみのデータで、人間が読むことができるあらゆるコンテンツ、ソースコード、コンマ区切り値 (CSV) 形式のデータのようなテキストデータを含みます。 + - : テキストのみのデータで、人間が読むことができるあらゆるコンテンツ、ソースコード、カンマ区切り値 (CSV) 形式のデータのようなテキストデータを含みます。 例えば、 `text/plain`, `text/csv`, `text/html` などがあります。 [（IANA での text 型の登録を見る）](https://www.iana.org/assignments/media-types/media-types.xhtml#text) - `video` @@ -190,18 +189,7 @@ MIME タイプが `image` であるファイルは、画像データを含んで 音声ファイルや動画ファイルの MIME タイプに関しては、通常、コンテナー形式（ファイルタイプ）を指定します。 オプションの[コーデック引数](/ja/docs/Web/Media/Formats/codecs_parameter)を MIME タイプに追加すると、使用するコーデックと、コーデックプロファイル、レベルなど、メディアのエンコードに使用したオプションをさらに指定することができます。 -ウェブコンテンツに使用されるMIMEタイプのうち、最も一般的なものを以下に一覧で示します。 -ただし、これは利用可能なすべてのタイプの完全なリストではありません。 -これについては[メディアコンテナー形式のガイド](/ja/docs/Web/Media/Formats/Containers)を参照してください。 - -| MIME タイプ | 音声または動画のタイプ | -| ------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `audio/wave` `audio/wav` `audio/x-wav` `audio/x-pn-wav` | WAVE コンテナー形式の音声ファイル。 PCM オーディオコーデック (WAVE コーデック "1") はたいていサポートされていますが、他のコーデックのサポートは (あるとしても) 限定的です。 | -| `audio/webm` | WebM コンテナー形式の音声ファイル。 Vorbis や Opus が WebM 仕様書で公式に対応しているコーデックです。 | -| `video/webm` | WebM コンテナー形式の、おそらく音声も含む動画ファイル。VP8 や VP9 がもっとも一般的に使用される動画コーデックです。 Vorbis や Opus がもっとも一般的な音声コーデックです。 | -| `audio/ogg` | Ogg コンテナー形式の音声ファイル。 Vorbis が、このコンテナーでもっとも一般的に使用される音声コーデックです。しかし、 Opus も同様に Ogg で対応しました。 | -| `video/ogg` | Ogg コンテナー形式の、おそらく音声も含む動画ファイル。通常の動画コーデックは Theora、音声コーデックは Vorbis ですが、 Opus がもっと有名になってきています。 | -| `application/ogg` | OGG コンテナー形式を使用する音声または動画のファイル。通常の動画コーデックは Theora、音声コーデックは Vorbis です。 | +よくあるメディア型についての詳しい情報は、[よくある MIME タイプ](/ja/docs/Web/HTTP/MIME_types/Common_types)ページを参照してください。 ### multipart/form-data @@ -305,6 +293,8 @@ Content-Range: bytes 300-400/1270 ## 正しい MIME タイプを設定することの重要性 +サーバーの設定項目によっては、ファイルの結合、圧縮、キャッシュなどの最適化を行うために、関連する MIME タイプを使用することがあります。特定の MIME タイプのファイルを圧縮する Apache の設定例については、[h5bp/server-configs-apache](https://github.com/h5bp/server-configs-apache/blob/main/h5bp/web_performance/compression.conf) を参照してください。 + 多くのウェブサーバーは未知の種類のリソースについて、既定の `application/octet-stream` MIME タイプを送ります。セキュリティ上の理由で、多くのブラウザーはこのようなリソースに既定のアクションを定義することを許可せず、リソースを使用するためにディスクへ保存することをユーザーに強制します。 以下のような誤ったサーバー設定がよく見られます。 @@ -314,9 +304,9 @@ Content-Range: bytes 300-400/1270 この場合、サーバーが `application/x-rar-compressed` を送信するように設定してください。 - 音声および動画。 正しい MIME タイプを持つリソースだけが、 {{HTMLElement("video")}} または {{HTMLElement("audio")}} 要素で再生されます。 - [音声および動画に対して正しい MIME タイプを使用する](/ja/docs/Web/Media/Formats)よう注意してください。 -- 独自のファイルタイプ。 - 特別な操作ができなくなるため、`application/octet-stream` の使用は避けてください。ほとんどのブラウザーは、この汎用的な MIME タイプに既定の動作 (「Word で開く」など) を定義することができません。 `application/vnd.mspowerpoint` のような特定の型ならば、ユーザーがそのようなファイルを自動的に選択したプレゼンテーションソフトウェアで開くことができます。 + [音声および動画の MIME タイプ](/ja/docs/Web/Media/Formats)を正しく使用するよう注意してください。 +- 独自のファイル型。 + `application/vnd.mspowerpoint` のような特定の型ならば、ユーザーがそのようなファイルを自動的に選択したプレゼンテーションソフトウェアで開くことができます。 ## MIME スニッフィング From 50812da6380fbe6e57a0da1702ecc9e8b43fa297 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 20 Oct 2024 11:21:56 +0900 Subject: [PATCH 03/15] =?UTF-8?q?2024/10/09=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/_redirects.txt | 2 +- files/ja/_wikihistory.json | 2 +- files/ja/web/css/url_function/index.md | 199 +++++++++++++++++++++++++ 3 files changed, 201 insertions(+), 2 deletions(-) create mode 100644 files/ja/web/css/url_function/index.md diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 734bf8050932e2..e6c138d23bcb9a 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -3834,7 +3834,7 @@ /ja/docs/Web/CSS/transform-function/translateZ() /ja/docs/Web/CSS/transform-function/translateZ /ja/docs/Web/CSS/uri /ja/docs/Web/CSS/url_value /ja/docs/Web/CSS/url /ja/docs/Web/CSS/url_value -/ja/docs/Web/CSS/url() /ja/docs/Web/CSS/url_value +/ja/docs/Web/CSS/url() /ja/docs/Web/CSS/url_function /ja/docs/Web/CSS/user-ident /ja/docs/Web/CSS/custom-ident /ja/docs/Web/CSS/var() /ja/docs/Web/CSS/var /ja/docs/Web/CSS/visible /ja/docs/Web/CSS/visibility diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 6b4d1590f430b3..2ef7c5304a4899 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -19992,7 +19992,7 @@ "modified": "2020-10-15T21:40:12.796Z", "contributors": ["mfuji09", "okayurisotto", "teoli", "YuichiNukiyama"] }, - "Web/CSS/url_value": { + "Web/CSS/url_function": { "modified": "2020-10-15T22:29:36.625Z", "contributors": ["mfuji09"] }, diff --git a/files/ja/web/css/url_function/index.md b/files/ja/web/css/url_function/index.md new file mode 100644 index 00000000000000..b9e8a82d01b850 --- /dev/null +++ b/files/ja/web/css/url_function/index.md @@ -0,0 +1,199 @@ +--- +title: url() +slug: Web/CSS/url_function +l10n: + sourceCommit: b2833ddfd45cae1bb5e050d24637865e9327408d +--- + +{{CSSRef}} + +**`url()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、ファイルを含めるために使用します。引数は絶対 URL、相対 URL、Blob URL、データ URL の何れかです。 **`url()`** 関数は {{cssxref("attr")}} 関数のように、他の CSS 関数に引数として渡すことができます。値を使用するプロパティに応じて、求められるリソースは画像、フォント、スタイルシートのいずれかになります。`url()` 関数記法は `` データ型の値になります。 + +> **メモ:** {{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('https://example.com/images/myImg.jpg'); +url(https://example.com/images/myImg.jpg); +url("data:image/jpg;base64,iRxVB0…"); +url(myImg.jpg); +url(#IDofSVGpath); + +/* 関連するプロパティ */ +background-image: url("star.gif"); +list-style-image: url('../images/bullet.jpg'); +content: url("my-icon.jpg"); +cursor: url(my-cursor.cur); +border-image-source: url(/media/diamonds.png); +src: url('fantastic-font.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(rgb(0 0 0 / 100%), transparent)); + +/* 一括指定ではない複数の値の一部として */ +content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); + +/* アットルール */ +@document url("https://www.example.com/") { /* … */ } +@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')}}, {{cssxref('clip-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 + + - : 含まれるウェブリソースへの相対アドレス、絶対アドレス、ポインターの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)または　[SVG フィルター](/ja/docs/Web/SVG/Element/filter)の ID への参照です。 + +- `` + - : 将来的には、`url()` 関数で修飾子、識別子、または関数記法を指定して、URL 文字列の意味を変更できるようになるかもしれません。これはサポートされておらず、仕様書でも完全に定義されていません。 + +## 形式文法 + +```plain +url( * ) +``` + +## 例 + +### background プロパティで使用される URL + +```css +body { + background: url("https://mdn.github.io/shared-assets/images/examples/leopard.jpg") + #00d no-repeat fixed; +} +``` + +{{EmbedLiveSample("As the background property value", "100%", "200")}} + +### リストの先頭記号として使用される画像を読み込む URL + +```html hidden +
    +
  • one
    • +
  • two
    • +
  • there
    • +
+``` + +```css hidden +ul { + font-size: 3rem; + margin: 0; +} +``` + +```css +ul { + list-style: outside + url("https://mdn.github.io/shared-assets/images/examples/firefox-logo.svg"); +} +``` + +{{EmbedLiveSample("For setting an image as a list bullet", "100%", "200")}} + +### content プロパティの使用 + +#### HTML + +```html +
    +
  • One
    • +
  • Two
    • +
  • Three
    • +
+``` + +#### CSS + +```css +li::after { + content: " - " + url("https://mdn.github.io/shared-assets/images/examples/star-white_16x16.png"); +} +``` + +#### 結果 + +{{EmbedLiveSample("Usage_in_the_content_property", "100%", "110")}} + +### データ URL の使用 + +#### CSS + +```css +body { + 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_URL", "100%", 100)}} + +### フィルターでの使用 + +URL がフィルターへのパスとして使用される場合、 URL は以下のどちらかでなければなりません。 + +1. SVG ファイルへのパスに、追加されるフィルターの ID が付いたもの。 +2. SVG がページ内にある場合は、フィルターの ID。 + +```css +.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", "element()")}} +- {{cssxref("image/image", "image()")}} +- {{cssxref("image/image-set", "image-set()")}} +- {{cssxref("cross-fade", "cross-fade()")}} From 11de1b61e197626387ef5e0f6c72bf6a02a0d455 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 20 Oct 2024 11:32:22 +0900 Subject: [PATCH 04/15] =?UTF-8?q?2024/09/05=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/url_value/index.md | 182 ++-------------------------- 1 file changed, 12 insertions(+), 170 deletions(-) diff --git a/files/ja/web/css/url_value/index.md b/files/ja/web/css/url_value/index.md index e9a4705e0d42b5..22c7382db46584 100644 --- a/files/ja/web/css/url_value/index.md +++ b/files/ja/web/css/url_value/index.md @@ -1,191 +1,33 @@ --- -title: url() +title: slug: Web/CSS/url_value -original_slug: Web/CSS/url l10n: - sourceCommit: b82ff59aab7883b7bb2222cf9f9f9b6eed818e08 + sourceCommit: 5178e1e7c9edf0c9c652275ae62f090042ce2422 --- {{CSSRef}} -**`url()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、ファイルを含めるために使用します。引数は絶対 URL、相対 URL、Blob URL、データ URL の何れかです。 **`url()`** 関数は {{cssxref("attr")}} 関数のように、他の CSS 関数に引数として渡すことができます。値を使用するプロパティに応じて、求められるリソースは画像、フォント、スタイルシートの何れかになります。`url()` 関数表記は `` データ型の値になります。 - -> **メモ:** {{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) の値として使用することができます。 +**``** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、リソースを指します。リソースには画像、動画、CSS ファイル、フォントファイル、SVG 機能などがあります。 ## 構文 -### 値 - -- `` - - - : 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( * ) +```plain + = | ``` -## 例 - -### background プロパティで使用される URL - -```css -.topbanner { - background: url("topbanner.png") #00d no-repeat fixed; -} -``` - -### リストの先頭記号として使用される画像を読み込む URL - -```css -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)}} - -### データ URL の使用 - -#### 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_URL", "100%", 50)}} - -### フィルターでの使用 - -URL がフィルターへのパスとして使用される場合、 URL は以下のどちらかでなければなりません。 - -1. SVG ファイルへのパスに、追加されるフィルターの ID が付いたもの。 -2. SVG がページ内にある場合は、フィルターの ID。 +### 値 -```css -.blur { - filter: url(my-file.svg#svg-blur); /* フィルターとして使用する SVG ファイルの URL */ -} +値は以下のどちらかです。 -.inline-blur { - filter: url(#svg-blur); /* HTML ページに埋め込まれた SVG の ID */ -} -``` +- [``](/ja/docs/Web/CSS/url_function) + - : `url()` 関数は、URL のリテラル文字列のみを受け付けます。 +- `` + - : この関数は、URL 文字列または [CSS 変数](/ja/docs/Web/CSS/var)を受け取ることができます。 ## 仕様書 {{Specifications}} -## ブラウザーの互換性 - -{{Compat}} - ## 関連情報 -- {{cssxref("<gradient>")}} -- {{cssxref("element", "element()")}} -- {{cssxref("image/image", "image()")}} -- {{cssxref("image/image-set", "image-set()")}} -- {{cssxref("cross-fade", "cross-fade()")}} +- {{cssxref("url_function", "url()")}} From 70d37ee8aaecc5df9af06de0b9e1407e68b6a2a1 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 20 Oct 2024 14:16:19 +0900 Subject: [PATCH 05/15] =?UTF-8?q?2024/09/29=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/api/window/createimagebitmap/index.md | 30 +++++++++++++++---- 1 file changed, 24 insertions(+), 6 deletions(-) diff --git a/files/ja/web/api/window/createimagebitmap/index.md b/files/ja/web/api/window/createimagebitmap/index.md index 9c4d597ff1db18..b9321488da32af 100644 --- a/files/ja/web/api/window/createimagebitmap/index.md +++ b/files/ja/web/api/window/createimagebitmap/index.md @@ -1,14 +1,14 @@ --- -title: createImageBitmap() +title: "Window: createImageBitmap() メソッド" +short-title: createImageBitmap() slug: Web/API/Window/createImageBitmap -original_slug: Web/API/createImageBitmap l10n: - sourceCommit: 32539676aca5ea2913cfaefeab3ba986ecd2206f + sourceCommit: 58d79e9c2206e0a604cd4d7f6fba5181262af420 --- {{APIRef("Canvas API")}} -**`createImageBitmap()`** メソッドは、指定されたソースからビットマップを作成し、オプションでそのソースの一部のみを切り抜きます。このメソッドは、ウィンドウとワーカーの両方のグローバルスコープに存在します。このメソッドは、さまざまな画像ソースを受け付け、 {{domxref("ImageBitmap")}} に解決する {{jsxref("Promise")}} を返します。 +**`createImageBitmap()`** は {{domxref("Window")}} インターフェイスのメソッドで、指定されたソースからビットマップを作成し、オプションでそのソースの一部のみを切り抜きます。このメソッドは、ウィンドウとワーカーの両方のグローバルスコープに存在します。このメソッドは、さまざまな画像ソースを受け付け、 {{domxref("ImageBitmap")}} に解決する {{jsxref("Promise")}} を返します。 ## 構文 @@ -66,6 +66,19 @@ createImageBitmap(image, sx, sy, sw, sh, options) この例では、スプライトシートをロードし、個々のスプライトを抽出し、各スプライトをキャンバスにレンダリングします。スプライトシートとは、複数の小さな画像を含む画像で、それぞれを個別にレンダリングできるようにしたいものです。 +```html hidden +元の画像: + +
+ +``` + +```css hidden +canvas { + border: 2px solid green; +} +``` + ```js const canvas = document.getElementById("myCanvas"), ctx = canvas.getContext("2d"), @@ -74,20 +87,24 @@ const canvas = document.getElementById("myCanvas"), // スプライトシートがロードされるのを待ちます image.onload = () => { Promise.all([ - // スプライトシートから2つのスプライトを切り取ります + // スプライトシートから 2 つのスプライトを切り取ります createImageBitmap(image, 0, 0, 32, 32), createImageBitmap(image, 32, 0, 32, 32), + createImageBitmap(image, 0, 0, 50, 50, { imageOrientation: "flipY" }), ]).then((sprites) => { // 各スプライトをキャンバスに描きます ctx.drawImage(sprites[0], 0, 0); ctx.drawImage(sprites[1], 32, 32); + ctx.drawImage(sprites[2], 64, 64); }); }; // 画像ファイルからスプライトシートを読み込みます -image.src = "sprites.png"; +image.src = "50x50.jpg"; ``` +{{EmbedLiveSample("Creating sprites from a sprite sheet", "100%", "250")}} + ## 仕様書 {{Specifications}} @@ -98,5 +115,6 @@ image.src = "sprites.png"; ## 関連情報 +- {{domxref("WorkerGlobalScope.createImageBitmap()")}} - {{domxref("CanvasRenderingContext2D.drawImage()")}} - {{domxref("ImageData")}} From 1d65243b16a20a59a13dee79747dc725dfd219cf Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 20 Oct 2024 14:18:25 +0900 Subject: [PATCH 06/15] =?UTF-8?q?2024/09/27=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/window/reporterror/index.md | 26 ++++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/files/ja/web/api/window/reporterror/index.md b/files/ja/web/api/window/reporterror/index.md index 102bb4b397f2bd..cadb89aaced1c8 100644 --- a/files/ja/web/api/window/reporterror/index.md +++ b/files/ja/web/api/window/reporterror/index.md @@ -1,21 +1,19 @@ --- -title: reportError() グローバル関数 +title: "Window: reportError() メソッド" +short-title: reportError() slug: Web/API/Window/reportError -original_slug: Web/API/reportError l10n: - sourceCommit: 76717f752447b6eef25bf29c12272e407ee5cb6b + sourceCommit: 63297dea804061944e7430acd2c057d773770a4f --- -{{APIRef}} {{AvailableInWorkers}} +{{APIRef("DOM")}} -**`reportError()`** グローバルメソッドは、 JavaScript の捕捉されない例外をエミュレートして、コンソールやグローバルイベントハンドラーにエラーを報告するために使用することができます。 +**`reportError()`** は {{DOMxRef("Window")}} インターフェイスのメソッドで、 JavaScript の捕捉されない例外をエミュレートして、コンソールやグローバルイベントハンドラーにエラーを報告するために使用することができます。 この機能は、主にカスタムイベント配信ライブラリーや コールバック操作ライブラリーを対象としています。 ライブラリーはこの機能を使用して、コールバックコードのエラーを捕捉し、最上位のハンドラーに投げ直すことができます。 これにより、 1 つのコールバックで例外が発生しても、他のコールバックが処理されなくなることがなくなると同時に、スタックトレース情報が最上位レベルのデバッグに利用できるようになります。 - - ## 構文 ```js-nolint @@ -41,7 +39,7 @@ reportError(throwable) このメソッドが使用できるかどうかの機能検出です。 ```js -if (typeof self.reportError === "function") { +if (typeof window.reportError === "function") { // この関数が定義されている } ``` @@ -51,14 +49,14 @@ if (typeof self.reportError === "function") { ```js const newError = new Error("エラーメッセージ", "someFile.js", 11); -self.reportError(newError); +window.reportError(newError); window.onerror = (message, source, lineno, colno, error) => { console.error(`メッセージ: ${error.message}、行番号: ${lineno}`); return true; }; -self.addEventListener("error", (error) => { +window.addEventListener("error", (error) => { console.error(error.filename); }); @@ -77,6 +75,8 @@ self.addEventListener("error", (error) => { ## 関連情報 -- [`Window`](/ja/docs/Web/API/Window#methods_implemented_from_elsewhere) -- [`WorkerGlobalScope`](/ja/docs/Web/API/WorkerGlobalScope#methods_implemented_from_elsewhere) -- [error](/ja/docs/Web/API/HTMLElement/error_event) イベント +- {{DOMxRef("Window")}} +- {{DOMxRef("WorkerGlobalScope.reportError()")}} +- {{DOMxRef("Window/error_event", "error")}} イベント +- {{DOMxRef("WorkerGlobalScope/error_event", "error")}} イベント +- {{DOMxRef("HTMLElement/error_event", "error")}} イベント From 0f5831076b4ee84e2ee4a4db2a1e7f84f0d41054 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 20 Oct 2024 14:20:14 +0900 Subject: [PATCH 07/15] =?UTF-8?q?2024/09/27=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/api/window/structuredclone/index.md | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/files/ja/web/api/window/structuredclone/index.md b/files/ja/web/api/window/structuredclone/index.md index f2dcc6cf0c76c4..935165a336b281 100644 --- a/files/ja/web/api/window/structuredclone/index.md +++ b/files/ja/web/api/window/structuredclone/index.md @@ -1,17 +1,17 @@ --- -title: structuredClone() グローバル関数 +title: "Window: structuredClone() メソッド" +short-title: structuredClone() slug: Web/API/Window/structuredClone -original_slug: Web/API/structuredClone l10n: - sourceCommit: cb279e20569055b200f93802d1704846c28aa04f + sourceCommit: 8b6cec0ceff01e7a9d6865cf5306788e15cce4b8 --- -{{APIRef("HTML DOM")}}{{AvailableInWorkers}} +{{APIRef("HTML DOM")}} -グローバルの **`structuredClone()`** メソッドは、指定された値の[ディープコピー](/ja/docs/Glossary/Deep_copy)を、[構造化複製アルゴリズム](/ja/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)を用いて生成します。 +**`structuredClone()`** は {{domxref("Window")}} のメソッドで、指定された値の[ディープコピー](/ja/docs/Glossary/Deep_copy)を、[構造化複製アルゴリズム](/ja/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)を用いて生成します。 このメソッドでは、元の値の[移譲可能オブジェクト](/ja/docs/Web/API/Web_Workers_API/Transferable_objects)を、新しいオブジェクトにクローンするのではなく、移譲することもできます。 -移譲されたオブジェクトは元のオブジェクトから切り離され、新しいオブジェクトに装着されます。元のオブジェクトからはもうアクセスできなくなります。 +移譲されたオブジェクトは元のオブジェクトから切り離され、新しいオブジェクトに関連付けられます。元のオブジェクトからはもうアクセスできなくなります。 ## 構文 @@ -59,8 +59,7 @@ console.assert(clone.itself === clone); // 循環参照も保持されている ### 移譲される値 -[移譲可能オブジェクト](/ja/docs/Web/API/Web_Workers_API/Transferable_objects)（のみ）が複製先のオブジェクトに複製する代わりに移譲することができます。この場合、 `options` 引数の `transfer` プロパティを使用します。 -移譲により、元のオブジェクトは使用不可能になります。 +[移譲可能オブジェクト](/ja/docs/Web/API/Web_Workers_API/Transferable_objects)（のみ）が複製先のオブジェクトに複製する代わりに移譲することができます。この場合、 `options` 引数の `transfer` プロパティを使用します。移譲により、元のオブジェクトは使用不可能になります。 > [!NOTE] > これが役立つ場面として、バッファー内のデータを保存する前に非同期で検証する場合です。 @@ -112,7 +111,7 @@ console.log(mushrooms1.amanita); // ["muscaria"] ### オブジェクトの移譲 -この例では、 {{jsxref("ArrayBuffer")}} を作成し、そのバッファーがメンバーであるオブジェクトを複製し、バッファーを移譲しています。複製したオブジェクトでバッファーを使用することができますが、元のバッファを使用しようとすると例外が発生します。 +この例では、 {{jsxref("ArrayBuffer")}} を作成し、そのバッファーがメンバーであるオブジェクトを複製し、バッファーを移譲しています。複製したオブジェクトでバッファーを使用することができますが、元のバッファーを使用しようとすると例外が発生します。 ```js // バイト単位のサイズを指定して ArrayBuffer を作成 From b31849dddd24fa9dcc14dfdb04f3d394d77f5909 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 25 Oct 2024 21:25:20 +0900 Subject: [PATCH 08/15] =?UTF-8?q?2024/09/23=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0=20(#24158)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 2024/09/23 時点の英語版に基づき更新 * Update index.md --- .../htmlinputelement/checkvalidity/index.md | 57 +++++++- .../htmlinputelement/reportvalidity/index.md | 133 +++++++++++++++++- 2 files changed, 184 insertions(+), 6 deletions(-) diff --git a/files/ja/web/api/htmlinputelement/checkvalidity/index.md b/files/ja/web/api/htmlinputelement/checkvalidity/index.md index 6a4ac91a29668a..5b2ab8d5b55903 100644 --- a/files/ja/web/api/htmlinputelement/checkvalidity/index.md +++ b/files/ja/web/api/htmlinputelement/checkvalidity/index.md @@ -3,12 +3,15 @@ title: "HTMLInputElement: checkValidity() メソッド" short-title: checkValidity() slug: Web/API/HTMLInputElement/checkValidity l10n: - sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18 + sourceCommit: 0a9c10fc67901972221dc7b3d006334fbfa73dce --- {{APIRef("HTML DOM")}} -**`HTMLInputElement.checkValidity()`** メソッドは、その要素の値の妥当性を示す論理値を返します。値が無効である場合、このメソッドは要素に {{domxref("HTMLInputElement/invalid_event", "invalid")}} イベントを発行します。 +**`checkValidity()`** は {{domxref("HTMLInputElement")}} インターフェイスのメソッドで、その要素が適用された[制約検証](/ja/docs/Web/HTML/Constraint_validation)ルールを満たしているかどうかを示す論理値を返します。false の場合は、メソッドは要素上で {{domxref("HTMLInputElement/invalid_event", "invalid")}} イベントも発行します。`checkValidity()` には既定でブラウザーの動作が設定されていないため、この `invalid` イベントをキャンセルしても効果はありません。 + +> [!NOTE] +> HTML の {{htmlelement("select")}} 要素で、{{domxref("HTMLInputElement.validationMessage", "validationMessage")}} が null 以外の値を持つものは不正なものと見なされ、CSS の {{cssxref(":invalid")}} 擬似クラスに一致し、`checkValidity()` が false を返すようになります。 {{domxref("HTMLInputElement.setCustomValidity()")}} メソッドを使用して、{{domxref("HTMLInputElement.validationMessage")}} を空文字列に設定すると、{{domxref("HTMLInputElement.validity", "validity")}} 状態が妥当となります。 ## 構文 @@ -22,7 +25,50 @@ checkValidity() ### 返値 -要素の値を検証して問題ない場合は `true` を、そうでなければ `false` を返します。 +要素の値に妥当性の問題がなければ `true` を返し、そうでなければ `false` を返します。 + +## 例 + +### HTML + +必須の数値フィールドと、フォームのチェックボタンと送信ボタンの 2 つのボタンを設置したフォームを設置します。 + +```html + +

+ + +

+

+ + +

+

+ +``` + +### JavaScript + +```js +const output = document.querySelector("#log"); +const checkButton = document.querySelector("#check"); +const ageInput = document.querySelector("#age"); + +ageInput.addEventListener("invalid", () => { + console.log("invalid イベントが発行されました。"); +}); + +checkButton.addEventListener("click", () => { + const checkVal = ageInput.checkValidity(); + output.innerHTML = `checkValidity が ${checkVal} を返しました。`; +}); +``` + +### 結果 + +{{EmbedLiveSample("Examples", "100%", 220)}} + +`false` の場合、値が未入力、21 未満、65 超、または無効な場合、invalid イベントがコンソールに記録されます。ユーザーにエラーを報告するには、代わりに {{domxref("HTMLInputElement.reportValidity()")}} を使用してください。 ## 仕様書 @@ -34,6 +80,9 @@ checkValidity() ## 関連情報 -- [reportValidity](/ja/docs/Web/API/HTMLInputElement/reportValidity) +- {{domxref("HTMLInputElement.reportValidity()")}} +- {{HTMLElement("input")}} +- {{HTMLElement("form")}} - [学習: クライアント側フォーム検証](/ja/docs/Learn/Forms/Form_validation) - [ガイド: 制約検証](/ja/docs/Web/HTML/Constraint_validation) +- CSS の {{cssxref(":valid")}} および {{cssxref(":invalid")}} 擬似クラス diff --git a/files/ja/web/api/htmlinputelement/reportvalidity/index.md b/files/ja/web/api/htmlinputelement/reportvalidity/index.md index 6d0704664e8ef1..ba531f238be7aa 100644 --- a/files/ja/web/api/htmlinputelement/reportvalidity/index.md +++ b/files/ja/web/api/htmlinputelement/reportvalidity/index.md @@ -3,7 +3,7 @@ title: "HTMLInputElement: reportValidity() メソッド" short-title: reportValidity() slug: Web/API/HTMLInputElement/reportValidity l10n: - sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18 + sourceCommit: 0a9c10fc67901972221dc7b3d006334fbfa73dce --- {{APIRef("HTML DOM")}} @@ -24,6 +24,132 @@ reportValidity() 要素を検証して問題がなければ `true` を返し、それ以外の場合は `false` を返します。 +## 例 + +### 基本的な使用 + +#### HTML + +必須の数値フィールドと、フォームのチェックボタンと送信ボタンの 2 つのボタンを設置したフォームを設置します。 + +```html +
+

+ + +

+

+ + +

+

+
+``` + +#### JavaScript + +"reportValidity()" ボタンが押された場合、`reportValidity()` メソッドを使用して、入力値が制約を満たしているかどうかを確認します。返値をログに記録します。`false` の場合、検証メッセージも表示し、`invalid` イベントを捕捉します。 + +```js +const output = document.querySelector("#log"); +const reportButton = document.querySelector("#report"); +const ageInput = document.querySelector("#age"); + +ageInput.addEventListener("invalid", () => { + console.log("invalid イベントが発行されました。"); +}); + +reportButton.addEventListener("click", () => { + const reportVal = ageInput.reportValidity(); + output.innerHTML = `"reportValidity()" の返値: ${reportVal}`; + if (!reportVal) { + output.innerHTML += `
検証メッセージ: "${ageInput.validationMessage}"`; + } +}); +``` + +#### 結果 + +{{EmbedLiveSample("基本的な使用", "100%", 120)}} + +`false` の場合、値が未入力、21 未満、65 超、または無効な場合、invalid イベントがコンソールに記録されます。 + +### 独自のエラーメッセージ + +この例は、独自のエラーメッセージが、値が有効であるにもかかわらず、`false` の返値を引き起こす可能性があることを示しています。 + +#### HTML + +前の例の HTML に［問題を修正］ボタンを追加します。 + +```html-nolint hidden +
+

+ + +

+

+ + +``` + +```html + +``` + +```html-nolint hidden +

+

+
+``` + +#### JavaScript + +上記の基本例の JavaScript を拡張し、{{domxref("HTMLInputElement.setCustomValidity()")}} メソッドを使用して独自のエラーメッセージを提供する関数を追加します。 `validateAge()` 関数は、入力が有効であり、`enableValidation` 変数が `true` の場合にのみエラーメッセージを空文字列に設定します。ただし、`enableValidation` は［問題を修正］ボタンが押されるまでは `false` になります。 + +```js +const output = document.querySelector("#log"); +const reportButton = document.querySelector("#report"); +const ageInput = document.querySelector("#age"); +const fixButton = document.querySelector("#fix"); +let enableValidation = false; + +fixButton.addEventListener("click", (e) => { + enableValidation = true; + fixButton.innerHTML = "エラーを修正しました"; + fixButton.disabled = true; +}); + +reportButton.addEventListener("click", () => { + validateAge(); + const reportVal = ageInput.reportValidity(); + output.innerHTML = `"reportValidity()" の返値: ${reportVal}`; + if (!reportVal) { + output.innerHTML += `
検証メッセージ: "${ageInput.validationMessage}"`; + } +}); + +const validateAge = () => { + const validityState_object = ageInput.validity; + if (validityState_object.valueMissing) { + ageInput.setCustomValidity("年齢を入力してください（必須）"); + } else if (ageInput.rangeUnderflow) { + ageInput.setCustomValidity("値が小さすぎます"); + } else if (ageInput.rangeOverflow) { + ageInput.setCustomValidity("値が大きすぎます"); + } else if (enableValidation) { + // 有効でかつ enableValidation が true に設定されている場合は true + ageInput.setCustomValidity(""); + } +}; +``` + +#### 結果 + +{{EmbedLiveSample("独自のエラーメッセージ", "100%", 120)}} + +年齢を入力する前に［reportValidity()］ボタンを起動すると、`required` の制約検証を満たさないため、`reportValidity()` メソッドは `false` を返します。このメソッドは入力に対して `invalid` イベントを発生させ、ユーザーに問題を報告し、独自のエラーメッセージ「年齢を入力してください（必須）」を表示します。独自のエラーメッセージが設定されている限り、［reportValidity()］ボタンを起動すると、有効な年齢を選択してもエラーが表示され続けます。検証を有効にするには、独自のエラーメッセージを空文字列に設定する必要があります。これは、［問題を修正］ボタンをクリックすることで行います。 + ## 仕様書 {{Specifications}} @@ -34,6 +160,9 @@ reportValidity() ## 関連情報 -- [checkValidity](/ja/docs/Web/API/HTMLInputElement/checkValidity) +- {{domxref("HTMLInputElement.checkValidity()")}} +- {{HTMLElement("input")}} +- {{HTMLElement("form")}} - [学習: クライアント側フォーム検証](/ja/docs/Learn/Forms/Form_validation) - [ガイド: 制約検証](/ja/docs/Web/HTML/Constraint_validation) +- CSS の {{cssxref(":valid")}} および {{cssxref(":invalid")}} 擬似クラス From 1cb10c16d061f199769e311dbfb333c4d1cbe426 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 20 Oct 2024 20:27:55 +0900 Subject: [PATCH 09/15] =?UTF-8?q?2024/10/11=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/html/element/label/index.md | 46 ++++++++++++------------ 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/files/ja/web/html/element/label/index.md b/files/ja/web/html/element/label/index.md index e8c6b24592a68c..1125fb2bf65868 100644 --- a/files/ja/web/html/element/label/index.md +++ b/files/ja/web/html/element/label/index.md @@ -2,7 +2,7 @@ title: "