From 00ae2189d45589bce8b238b5db2923281cf4f8a2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 18 Aug 2022 14:11:16 +0900 Subject: [PATCH 1/4] =?UTF-8?q?web/html=20=E4=BB=A5=E4=B8=8B=E3=81=AE?= =?UTF-8?q?=E6=8B=A1=E5=BC=B5=E5=AD=90=E3=82=92=20md=20=E3=81=AB=E5=A4=89?= =?UTF-8?q?=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/html/attributes/accept/{index.html => index.md} | 0 files/ja/web/html/attributes/multiple/{index.html => index.md} | 0 files/ja/web/html/attributes/pattern/{index.html => index.md} | 0 files/ja/web/html/attributes/required/{index.html => index.md} | 0 files/ja/web/html/attributes/size/{index.html => index.md} | 0 files/ja/web/html/block-level_elements/{index.html => index.md} | 0 files/ja/web/html/cors_enabled_image/{index.html => index.md} | 0 files/ja/web/html/date_and_time_formats/{index.html => index.md} | 0 files/ja/web/html/element/abbr/{index.html => index.md} | 0 files/ja/web/html/element/address/{index.html => index.md} | 0 files/ja/web/html/element/area/{index.html => index.md} | 0 files/ja/web/html/element/article/{index.html => index.md} | 0 files/ja/web/html/element/aside/{index.html => index.md} | 0 files/ja/web/html/element/audio/{index.html => index.md} | 0 files/ja/web/html/element/b/{index.html => index.md} | 0 files/ja/web/html/element/bdi/{index.html => index.md} | 0 files/ja/web/html/element/bdo/{index.html => index.md} | 0 files/ja/web/html/element/blockquote/{index.html => index.md} | 0 files/ja/web/html/element/br/{index.html => index.md} | 0 files/ja/web/html/element/button/{index.html => index.md} | 0 files/ja/web/html/element/canvas/{index.html => index.md} | 0 files/ja/web/html/element/caption/{index.html => index.md} | 0 files/ja/web/html/element/cite/{index.html => index.md} | 0 files/ja/web/html/element/code/{index.html => index.md} | 0 files/ja/web/html/element/col/{index.html => index.md} | 0 files/ja/web/html/element/colgroup/{index.html => index.md} | 0 files/ja/web/html/element/content/{index.html => index.md} | 0 files/ja/web/html/element/data/{index.html => index.md} | 0 files/ja/web/html/element/datalist/{index.html => index.md} | 0 files/ja/web/html/element/del/{index.html => index.md} | 0 files/ja/web/html/element/dfn/{index.html => index.md} | 0 files/ja/web/html/element/dialog/{index.html => index.md} | 0 files/ja/web/html/element/div/{index.html => index.md} | 0 files/ja/web/html/element/em/{index.html => index.md} | 0 files/ja/web/html/element/embed/{index.html => index.md} | 0 files/ja/web/html/element/fieldset/{index.html => index.md} | 0 files/ja/web/html/element/figcaption/{index.html => index.md} | 0 files/ja/web/html/element/figure/{index.html => index.md} | 0 files/ja/web/html/element/footer/{index.html => index.md} | 0 files/ja/web/html/element/frame/{index.html => index.md} | 0 files/ja/web/html/element/frameset/{index.html => index.md} | 0 files/ja/web/html/element/head/{index.html => index.md} | 0 files/ja/web/html/element/header/{index.html => index.md} | 0 files/ja/web/html/element/hgroup/{index.html => index.md} | 0 files/ja/web/html/element/hr/{index.html => index.md} | 0 files/ja/web/html/element/iframe/{index.html => index.md} | 0 files/ja/web/html/element/input/button/{index.html => index.md} | 0 files/ja/web/html/element/input/checkbox/{index.html => index.md} | 0 files/ja/web/html/element/input/color/{index.html => index.md} | 0 files/ja/web/html/element/input/file/{index.html => index.md} | 0 files/ja/web/html/element/input/hidden/{index.html => index.md} | 0 files/ja/web/html/element/input/radio/{index.html => index.md} | 0 files/ja/web/html/element/input/reset/{index.html => index.md} | 0 files/ja/web/html/element/input/submit/{index.html => index.md} | 0 files/ja/web/html/element/ins/{index.html => index.md} | 0 files/ja/web/html/element/kbd/{index.html => index.md} | 0 files/ja/web/html/element/label/{index.html => index.md} | 0 files/ja/web/html/element/legend/{index.html => index.md} | 0 files/ja/web/html/element/li/{index.html => index.md} | 0 files/ja/web/html/element/main/{index.html => index.md} | 0 files/ja/web/html/element/mark/{index.html => index.md} | 0 files/ja/web/html/element/menu/{index.html => index.md} | 0 files/ja/web/html/element/menuitem/{index.html => index.md} | 0 files/ja/web/html/element/meta/name/{index.html => index.md} | 0 .../html/element/meta/name/theme-color/{index.html => index.md} | 0 files/ja/web/html/element/meter/{index.html => index.md} | 0 files/ja/web/html/element/nav/{index.html => index.md} | 0 files/ja/web/html/element/noscript/{index.html => index.md} | 0 files/ja/web/html/element/option/{index.html => index.md} | 0 files/ja/web/html/element/output/{index.html => index.md} | 0 files/ja/web/html/element/p/{index.html => index.md} | 0 files/ja/web/html/element/param/{index.html => index.md} | 0 files/ja/web/html/element/picture/{index.html => index.md} | 0 files/ja/web/html/element/portal/{index.html => index.md} | 0 files/ja/web/html/element/pre/{index.html => index.md} | 0 files/ja/web/html/element/progress/{index.html => index.md} | 0 files/ja/web/html/element/q/{index.html => index.md} | 0 files/ja/web/html/element/rb/{index.html => index.md} | 0 files/ja/web/html/element/rp/{index.html => index.md} | 0 files/ja/web/html/element/rt/{index.html => index.md} | 0 files/ja/web/html/element/rtc/{index.html => index.md} | 0 files/ja/web/html/element/ruby/{index.html => index.md} | 0 files/ja/web/html/element/s/{index.html => index.md} | 0 files/ja/web/html/element/samp/{index.html => index.md} | 0 files/ja/web/html/element/section/{index.html => index.md} | 0 files/ja/web/html/element/select/{index.html => index.md} | 0 files/ja/web/html/element/shadow/{index.html => index.md} | 0 files/ja/web/html/element/small/{index.html => index.md} | 0 files/ja/web/html/element/source/{index.html => index.md} | 0 files/ja/web/html/element/span/{index.html => index.md} | 0 files/ja/web/html/element/strong/{index.html => index.md} | 0 files/ja/web/html/element/style/{index.html => index.md} | 0 files/ja/web/html/element/sub/{index.html => index.md} | 0 files/ja/web/html/element/sup/{index.html => index.md} | 0 files/ja/web/html/element/table/{index.html => index.md} | 0 files/ja/web/html/element/tbody/{index.html => index.md} | 0 files/ja/web/html/element/textarea/{index.html => index.md} | 0 files/ja/web/html/element/time/{index.html => index.md} | 0 files/ja/web/html/element/title/{index.html => index.md} | 0 files/ja/web/html/element/u/{index.html => index.md} | 0 files/ja/web/html/element/ul/{index.html => index.md} | 0 files/ja/web/html/element/var/{index.html => index.md} | 0 files/ja/web/html/element/wbr/{index.html => index.md} | 0 .../web/html/global_attributes/accesskey/{index.html => index.md} | 0 .../global_attributes/autocapitalize/{index.html => index.md} | 0 .../ja/web/html/global_attributes/class/{index.html => index.md} | 0 .../global_attributes/contenteditable/{index.html => index.md} | 0 .../html/global_attributes/contextmenu/{index.html => index.md} | 0 .../html/global_attributes/data-_star_/{index.html => index.md} | 0 files/ja/web/html/global_attributes/dir/{index.html => index.md} | 0 .../web/html/global_attributes/draggable/{index.html => index.md} | 0 .../ja/web/html/global_attributes/hidden/{index.html => index.md} | 0 files/ja/web/html/global_attributes/id/{index.html => index.md} | 0 .../web/html/global_attributes/inputmode/{index.html => index.md} | 0 files/ja/web/html/global_attributes/is/{index.html => index.md} | 0 files/ja/web/html/global_attributes/lang/{index.html => index.md} | 0 .../html/global_attributes/spellcheck/{index.html => index.md} | 0 .../ja/web/html/global_attributes/style/{index.html => index.md} | 0 .../web/html/global_attributes/tabindex/{index.html => index.md} | 0 .../ja/web/html/global_attributes/title/{index.html => index.md} | 0 .../web/html/global_attributes/translate/{index.html => index.md} | 0 .../x-ms-format-detection/{index.html => index.md} | 0 files/ja/web/html/{index.html => index.md} | 0 files/ja/web/html/inline_elements/{index.html => index.md} | 0 .../ja/web/html/link_types/dns-prefetch/{index.html => index.md} | 0 files/ja/web/html/link_types/manifest/{index.html => index.md} | 0 .../ja/web/html/link_types/modulepreload/{index.html => index.md} | 0 files/ja/web/html/link_types/noopener/{index.html => index.md} | 0 files/ja/web/html/link_types/noreferrer/{index.html => index.md} | 0 files/ja/web/html/link_types/preconnect/{index.html => index.md} | 0 files/ja/web/html/link_types/prefetch/{index.html => index.md} | 0 files/ja/web/html/link_types/preload/{index.html => index.md} | 0 files/ja/web/html/link_types/prerender/{index.html => index.md} | 0 files/ja/web/html/microformats/{index.html => index.md} | 0 files/ja/web/html/reference/{index.html => index.md} | 0 135 files changed, 0 insertions(+), 0 deletions(-) rename files/ja/web/html/attributes/accept/{index.html => index.md} (100%) rename files/ja/web/html/attributes/multiple/{index.html => index.md} (100%) rename files/ja/web/html/attributes/pattern/{index.html => index.md} (100%) rename files/ja/web/html/attributes/required/{index.html => index.md} (100%) rename files/ja/web/html/attributes/size/{index.html => index.md} (100%) rename files/ja/web/html/block-level_elements/{index.html => index.md} (100%) rename files/ja/web/html/cors_enabled_image/{index.html => index.md} (100%) rename files/ja/web/html/date_and_time_formats/{index.html => index.md} (100%) rename files/ja/web/html/element/abbr/{index.html => index.md} (100%) rename files/ja/web/html/element/address/{index.html => index.md} (100%) rename files/ja/web/html/element/area/{index.html => index.md} (100%) rename files/ja/web/html/element/article/{index.html => index.md} (100%) rename files/ja/web/html/element/aside/{index.html => index.md} (100%) rename files/ja/web/html/element/audio/{index.html => index.md} (100%) rename files/ja/web/html/element/b/{index.html => index.md} (100%) rename files/ja/web/html/element/bdi/{index.html => index.md} (100%) rename files/ja/web/html/element/bdo/{index.html => index.md} (100%) rename files/ja/web/html/element/blockquote/{index.html => index.md} (100%) rename files/ja/web/html/element/br/{index.html => index.md} (100%) rename files/ja/web/html/element/button/{index.html => index.md} (100%) rename files/ja/web/html/element/canvas/{index.html => index.md} (100%) rename files/ja/web/html/element/caption/{index.html => index.md} (100%) rename files/ja/web/html/element/cite/{index.html => index.md} (100%) rename files/ja/web/html/element/code/{index.html => index.md} (100%) rename files/ja/web/html/element/col/{index.html => index.md} (100%) rename files/ja/web/html/element/colgroup/{index.html => index.md} (100%) rename files/ja/web/html/element/content/{index.html => index.md} (100%) rename files/ja/web/html/element/data/{index.html => index.md} (100%) rename files/ja/web/html/element/datalist/{index.html => index.md} (100%) rename files/ja/web/html/element/del/{index.html => index.md} (100%) rename files/ja/web/html/element/dfn/{index.html => index.md} (100%) rename files/ja/web/html/element/dialog/{index.html => index.md} (100%) rename files/ja/web/html/element/div/{index.html => index.md} (100%) rename files/ja/web/html/element/em/{index.html => index.md} (100%) rename files/ja/web/html/element/embed/{index.html => index.md} (100%) rename files/ja/web/html/element/fieldset/{index.html => index.md} (100%) rename files/ja/web/html/element/figcaption/{index.html => index.md} (100%) rename files/ja/web/html/element/figure/{index.html => index.md} (100%) rename files/ja/web/html/element/footer/{index.html => index.md} (100%) rename files/ja/web/html/element/frame/{index.html => index.md} (100%) rename files/ja/web/html/element/frameset/{index.html => index.md} (100%) rename files/ja/web/html/element/head/{index.html => index.md} (100%) rename files/ja/web/html/element/header/{index.html => index.md} (100%) rename files/ja/web/html/element/hgroup/{index.html => index.md} (100%) rename files/ja/web/html/element/hr/{index.html => index.md} (100%) rename files/ja/web/html/element/iframe/{index.html => index.md} (100%) rename files/ja/web/html/element/input/button/{index.html => index.md} (100%) rename files/ja/web/html/element/input/checkbox/{index.html => index.md} (100%) rename files/ja/web/html/element/input/color/{index.html => index.md} (100%) rename files/ja/web/html/element/input/file/{index.html => index.md} (100%) rename files/ja/web/html/element/input/hidden/{index.html => index.md} (100%) rename files/ja/web/html/element/input/radio/{index.html => index.md} (100%) rename files/ja/web/html/element/input/reset/{index.html => index.md} (100%) rename files/ja/web/html/element/input/submit/{index.html => index.md} (100%) rename files/ja/web/html/element/ins/{index.html => index.md} (100%) rename files/ja/web/html/element/kbd/{index.html => index.md} (100%) rename files/ja/web/html/element/label/{index.html => index.md} (100%) rename files/ja/web/html/element/legend/{index.html => index.md} (100%) rename files/ja/web/html/element/li/{index.html => index.md} (100%) rename files/ja/web/html/element/main/{index.html => index.md} (100%) rename files/ja/web/html/element/mark/{index.html => index.md} (100%) rename files/ja/web/html/element/menu/{index.html => index.md} (100%) rename files/ja/web/html/element/menuitem/{index.html => index.md} (100%) rename files/ja/web/html/element/meta/name/{index.html => index.md} (100%) rename files/ja/web/html/element/meta/name/theme-color/{index.html => index.md} (100%) rename files/ja/web/html/element/meter/{index.html => index.md} (100%) rename files/ja/web/html/element/nav/{index.html => index.md} (100%) rename files/ja/web/html/element/noscript/{index.html => index.md} (100%) rename files/ja/web/html/element/option/{index.html => index.md} (100%) rename files/ja/web/html/element/output/{index.html => index.md} (100%) rename files/ja/web/html/element/p/{index.html => index.md} (100%) rename files/ja/web/html/element/param/{index.html => index.md} (100%) rename files/ja/web/html/element/picture/{index.html => index.md} (100%) rename files/ja/web/html/element/portal/{index.html => index.md} (100%) rename files/ja/web/html/element/pre/{index.html => index.md} (100%) rename files/ja/web/html/element/progress/{index.html => index.md} (100%) rename files/ja/web/html/element/q/{index.html => index.md} (100%) rename files/ja/web/html/element/rb/{index.html => index.md} (100%) rename files/ja/web/html/element/rp/{index.html => index.md} (100%) rename files/ja/web/html/element/rt/{index.html => index.md} (100%) rename files/ja/web/html/element/rtc/{index.html => index.md} (100%) rename files/ja/web/html/element/ruby/{index.html => index.md} (100%) rename files/ja/web/html/element/s/{index.html => index.md} (100%) rename files/ja/web/html/element/samp/{index.html => index.md} (100%) rename files/ja/web/html/element/section/{index.html => index.md} (100%) rename files/ja/web/html/element/select/{index.html => index.md} (100%) rename files/ja/web/html/element/shadow/{index.html => index.md} (100%) rename files/ja/web/html/element/small/{index.html => index.md} (100%) rename files/ja/web/html/element/source/{index.html => index.md} (100%) rename files/ja/web/html/element/span/{index.html => index.md} (100%) rename files/ja/web/html/element/strong/{index.html => index.md} (100%) rename files/ja/web/html/element/style/{index.html => index.md} (100%) rename files/ja/web/html/element/sub/{index.html => index.md} (100%) rename files/ja/web/html/element/sup/{index.html => index.md} (100%) rename files/ja/web/html/element/table/{index.html => index.md} (100%) rename files/ja/web/html/element/tbody/{index.html => index.md} (100%) rename files/ja/web/html/element/textarea/{index.html => index.md} (100%) rename files/ja/web/html/element/time/{index.html => index.md} (100%) rename files/ja/web/html/element/title/{index.html => index.md} (100%) rename files/ja/web/html/element/u/{index.html => index.md} (100%) rename files/ja/web/html/element/ul/{index.html => index.md} (100%) rename files/ja/web/html/element/var/{index.html => index.md} (100%) rename files/ja/web/html/element/wbr/{index.html => index.md} (100%) rename files/ja/web/html/global_attributes/accesskey/{index.html => index.md} (100%) rename files/ja/web/html/global_attributes/autocapitalize/{index.html => index.md} (100%) rename files/ja/web/html/global_attributes/class/{index.html => index.md} (100%) rename files/ja/web/html/global_attributes/contenteditable/{index.html => index.md} (100%) rename files/ja/web/html/global_attributes/contextmenu/{index.html => index.md} (100%) rename files/ja/web/html/global_attributes/data-_star_/{index.html => index.md} (100%) rename files/ja/web/html/global_attributes/dir/{index.html => index.md} (100%) rename files/ja/web/html/global_attributes/draggable/{index.html => index.md} (100%) rename files/ja/web/html/global_attributes/hidden/{index.html => index.md} (100%) rename files/ja/web/html/global_attributes/id/{index.html => index.md} (100%) rename files/ja/web/html/global_attributes/inputmode/{index.html => index.md} (100%) rename files/ja/web/html/global_attributes/is/{index.html => index.md} (100%) rename files/ja/web/html/global_attributes/lang/{index.html => index.md} (100%) rename files/ja/web/html/global_attributes/spellcheck/{index.html => index.md} (100%) rename files/ja/web/html/global_attributes/style/{index.html => index.md} (100%) rename files/ja/web/html/global_attributes/tabindex/{index.html => index.md} (100%) rename files/ja/web/html/global_attributes/title/{index.html => index.md} (100%) rename files/ja/web/html/global_attributes/translate/{index.html => index.md} (100%) rename files/ja/web/html/global_attributes/x-ms-format-detection/{index.html => index.md} (100%) rename files/ja/web/html/{index.html => index.md} (100%) rename files/ja/web/html/inline_elements/{index.html => index.md} (100%) rename files/ja/web/html/link_types/dns-prefetch/{index.html => index.md} (100%) rename files/ja/web/html/link_types/manifest/{index.html => index.md} (100%) rename files/ja/web/html/link_types/modulepreload/{index.html => index.md} (100%) rename files/ja/web/html/link_types/noopener/{index.html => index.md} (100%) rename files/ja/web/html/link_types/noreferrer/{index.html => index.md} (100%) rename files/ja/web/html/link_types/preconnect/{index.html => index.md} (100%) rename files/ja/web/html/link_types/prefetch/{index.html => index.md} (100%) rename files/ja/web/html/link_types/preload/{index.html => index.md} (100%) rename files/ja/web/html/link_types/prerender/{index.html => index.md} (100%) rename files/ja/web/html/microformats/{index.html => index.md} (100%) rename files/ja/web/html/reference/{index.html => index.md} (100%) diff --git a/files/ja/web/html/attributes/accept/index.html b/files/ja/web/html/attributes/accept/index.md similarity index 100% rename from files/ja/web/html/attributes/accept/index.html rename to files/ja/web/html/attributes/accept/index.md diff --git a/files/ja/web/html/attributes/multiple/index.html b/files/ja/web/html/attributes/multiple/index.md similarity index 100% rename from files/ja/web/html/attributes/multiple/index.html rename to files/ja/web/html/attributes/multiple/index.md diff --git a/files/ja/web/html/attributes/pattern/index.html b/files/ja/web/html/attributes/pattern/index.md similarity index 100% rename from files/ja/web/html/attributes/pattern/index.html rename to files/ja/web/html/attributes/pattern/index.md diff --git a/files/ja/web/html/attributes/required/index.html b/files/ja/web/html/attributes/required/index.md similarity index 100% rename from files/ja/web/html/attributes/required/index.html rename to files/ja/web/html/attributes/required/index.md diff --git a/files/ja/web/html/attributes/size/index.html b/files/ja/web/html/attributes/size/index.md similarity index 100% rename from files/ja/web/html/attributes/size/index.html rename to files/ja/web/html/attributes/size/index.md diff --git a/files/ja/web/html/block-level_elements/index.html b/files/ja/web/html/block-level_elements/index.md similarity index 100% rename from files/ja/web/html/block-level_elements/index.html rename to files/ja/web/html/block-level_elements/index.md diff --git a/files/ja/web/html/cors_enabled_image/index.html b/files/ja/web/html/cors_enabled_image/index.md similarity index 100% rename from files/ja/web/html/cors_enabled_image/index.html rename to files/ja/web/html/cors_enabled_image/index.md diff --git a/files/ja/web/html/date_and_time_formats/index.html b/files/ja/web/html/date_and_time_formats/index.md similarity index 100% rename from files/ja/web/html/date_and_time_formats/index.html rename to files/ja/web/html/date_and_time_formats/index.md diff --git a/files/ja/web/html/element/abbr/index.html b/files/ja/web/html/element/abbr/index.md similarity index 100% rename from files/ja/web/html/element/abbr/index.html rename to files/ja/web/html/element/abbr/index.md diff --git a/files/ja/web/html/element/address/index.html b/files/ja/web/html/element/address/index.md similarity index 100% rename from files/ja/web/html/element/address/index.html rename to files/ja/web/html/element/address/index.md diff --git a/files/ja/web/html/element/area/index.html b/files/ja/web/html/element/area/index.md similarity index 100% rename from files/ja/web/html/element/area/index.html rename to files/ja/web/html/element/area/index.md diff --git a/files/ja/web/html/element/article/index.html b/files/ja/web/html/element/article/index.md similarity index 100% rename from files/ja/web/html/element/article/index.html rename to files/ja/web/html/element/article/index.md diff --git a/files/ja/web/html/element/aside/index.html b/files/ja/web/html/element/aside/index.md similarity index 100% rename from files/ja/web/html/element/aside/index.html rename to files/ja/web/html/element/aside/index.md diff --git a/files/ja/web/html/element/audio/index.html b/files/ja/web/html/element/audio/index.md similarity index 100% rename from files/ja/web/html/element/audio/index.html rename to files/ja/web/html/element/audio/index.md diff --git a/files/ja/web/html/element/b/index.html b/files/ja/web/html/element/b/index.md similarity index 100% rename from files/ja/web/html/element/b/index.html rename to files/ja/web/html/element/b/index.md diff --git a/files/ja/web/html/element/bdi/index.html b/files/ja/web/html/element/bdi/index.md similarity index 100% rename from files/ja/web/html/element/bdi/index.html rename to files/ja/web/html/element/bdi/index.md diff --git a/files/ja/web/html/element/bdo/index.html b/files/ja/web/html/element/bdo/index.md similarity index 100% rename from files/ja/web/html/element/bdo/index.html rename to files/ja/web/html/element/bdo/index.md diff --git a/files/ja/web/html/element/blockquote/index.html b/files/ja/web/html/element/blockquote/index.md similarity index 100% rename from files/ja/web/html/element/blockquote/index.html rename to files/ja/web/html/element/blockquote/index.md diff --git a/files/ja/web/html/element/br/index.html b/files/ja/web/html/element/br/index.md similarity index 100% rename from files/ja/web/html/element/br/index.html rename to files/ja/web/html/element/br/index.md diff --git a/files/ja/web/html/element/button/index.html b/files/ja/web/html/element/button/index.md similarity index 100% rename from files/ja/web/html/element/button/index.html rename to files/ja/web/html/element/button/index.md diff --git a/files/ja/web/html/element/canvas/index.html b/files/ja/web/html/element/canvas/index.md similarity index 100% rename from files/ja/web/html/element/canvas/index.html rename to files/ja/web/html/element/canvas/index.md diff --git a/files/ja/web/html/element/caption/index.html b/files/ja/web/html/element/caption/index.md similarity index 100% rename from files/ja/web/html/element/caption/index.html rename to files/ja/web/html/element/caption/index.md diff --git a/files/ja/web/html/element/cite/index.html b/files/ja/web/html/element/cite/index.md similarity index 100% rename from files/ja/web/html/element/cite/index.html rename to files/ja/web/html/element/cite/index.md diff --git a/files/ja/web/html/element/code/index.html b/files/ja/web/html/element/code/index.md similarity index 100% rename from files/ja/web/html/element/code/index.html rename to files/ja/web/html/element/code/index.md diff --git a/files/ja/web/html/element/col/index.html b/files/ja/web/html/element/col/index.md similarity index 100% rename from files/ja/web/html/element/col/index.html rename to files/ja/web/html/element/col/index.md diff --git a/files/ja/web/html/element/colgroup/index.html b/files/ja/web/html/element/colgroup/index.md similarity index 100% rename from files/ja/web/html/element/colgroup/index.html rename to files/ja/web/html/element/colgroup/index.md diff --git a/files/ja/web/html/element/content/index.html b/files/ja/web/html/element/content/index.md similarity index 100% rename from files/ja/web/html/element/content/index.html rename to files/ja/web/html/element/content/index.md diff --git a/files/ja/web/html/element/data/index.html b/files/ja/web/html/element/data/index.md similarity index 100% rename from files/ja/web/html/element/data/index.html rename to files/ja/web/html/element/data/index.md diff --git a/files/ja/web/html/element/datalist/index.html b/files/ja/web/html/element/datalist/index.md similarity index 100% rename from files/ja/web/html/element/datalist/index.html rename to files/ja/web/html/element/datalist/index.md diff --git a/files/ja/web/html/element/del/index.html b/files/ja/web/html/element/del/index.md similarity index 100% rename from files/ja/web/html/element/del/index.html rename to files/ja/web/html/element/del/index.md diff --git a/files/ja/web/html/element/dfn/index.html b/files/ja/web/html/element/dfn/index.md similarity index 100% rename from files/ja/web/html/element/dfn/index.html rename to files/ja/web/html/element/dfn/index.md diff --git a/files/ja/web/html/element/dialog/index.html b/files/ja/web/html/element/dialog/index.md similarity index 100% rename from files/ja/web/html/element/dialog/index.html rename to files/ja/web/html/element/dialog/index.md diff --git a/files/ja/web/html/element/div/index.html b/files/ja/web/html/element/div/index.md similarity index 100% rename from files/ja/web/html/element/div/index.html rename to files/ja/web/html/element/div/index.md diff --git a/files/ja/web/html/element/em/index.html b/files/ja/web/html/element/em/index.md similarity index 100% rename from files/ja/web/html/element/em/index.html rename to files/ja/web/html/element/em/index.md diff --git a/files/ja/web/html/element/embed/index.html b/files/ja/web/html/element/embed/index.md similarity index 100% rename from files/ja/web/html/element/embed/index.html rename to files/ja/web/html/element/embed/index.md diff --git a/files/ja/web/html/element/fieldset/index.html b/files/ja/web/html/element/fieldset/index.md similarity index 100% rename from files/ja/web/html/element/fieldset/index.html rename to files/ja/web/html/element/fieldset/index.md diff --git a/files/ja/web/html/element/figcaption/index.html b/files/ja/web/html/element/figcaption/index.md similarity index 100% rename from files/ja/web/html/element/figcaption/index.html rename to files/ja/web/html/element/figcaption/index.md diff --git a/files/ja/web/html/element/figure/index.html b/files/ja/web/html/element/figure/index.md similarity index 100% rename from files/ja/web/html/element/figure/index.html rename to files/ja/web/html/element/figure/index.md diff --git a/files/ja/web/html/element/footer/index.html b/files/ja/web/html/element/footer/index.md similarity index 100% rename from files/ja/web/html/element/footer/index.html rename to files/ja/web/html/element/footer/index.md diff --git a/files/ja/web/html/element/frame/index.html b/files/ja/web/html/element/frame/index.md similarity index 100% rename from files/ja/web/html/element/frame/index.html rename to files/ja/web/html/element/frame/index.md diff --git a/files/ja/web/html/element/frameset/index.html b/files/ja/web/html/element/frameset/index.md similarity index 100% rename from files/ja/web/html/element/frameset/index.html rename to files/ja/web/html/element/frameset/index.md diff --git a/files/ja/web/html/element/head/index.html b/files/ja/web/html/element/head/index.md similarity index 100% rename from files/ja/web/html/element/head/index.html rename to files/ja/web/html/element/head/index.md diff --git a/files/ja/web/html/element/header/index.html b/files/ja/web/html/element/header/index.md similarity index 100% rename from files/ja/web/html/element/header/index.html rename to files/ja/web/html/element/header/index.md diff --git a/files/ja/web/html/element/hgroup/index.html b/files/ja/web/html/element/hgroup/index.md similarity index 100% rename from files/ja/web/html/element/hgroup/index.html rename to files/ja/web/html/element/hgroup/index.md diff --git a/files/ja/web/html/element/hr/index.html b/files/ja/web/html/element/hr/index.md similarity index 100% rename from files/ja/web/html/element/hr/index.html rename to files/ja/web/html/element/hr/index.md diff --git a/files/ja/web/html/element/iframe/index.html b/files/ja/web/html/element/iframe/index.md similarity index 100% rename from files/ja/web/html/element/iframe/index.html rename to files/ja/web/html/element/iframe/index.md diff --git a/files/ja/web/html/element/input/button/index.html b/files/ja/web/html/element/input/button/index.md similarity index 100% rename from files/ja/web/html/element/input/button/index.html rename to files/ja/web/html/element/input/button/index.md diff --git a/files/ja/web/html/element/input/checkbox/index.html b/files/ja/web/html/element/input/checkbox/index.md similarity index 100% rename from files/ja/web/html/element/input/checkbox/index.html rename to files/ja/web/html/element/input/checkbox/index.md diff --git a/files/ja/web/html/element/input/color/index.html b/files/ja/web/html/element/input/color/index.md similarity index 100% rename from files/ja/web/html/element/input/color/index.html rename to files/ja/web/html/element/input/color/index.md diff --git a/files/ja/web/html/element/input/file/index.html b/files/ja/web/html/element/input/file/index.md similarity index 100% rename from files/ja/web/html/element/input/file/index.html rename to files/ja/web/html/element/input/file/index.md diff --git a/files/ja/web/html/element/input/hidden/index.html b/files/ja/web/html/element/input/hidden/index.md similarity index 100% rename from files/ja/web/html/element/input/hidden/index.html rename to files/ja/web/html/element/input/hidden/index.md diff --git a/files/ja/web/html/element/input/radio/index.html b/files/ja/web/html/element/input/radio/index.md similarity index 100% rename from files/ja/web/html/element/input/radio/index.html rename to files/ja/web/html/element/input/radio/index.md diff --git a/files/ja/web/html/element/input/reset/index.html b/files/ja/web/html/element/input/reset/index.md similarity index 100% rename from files/ja/web/html/element/input/reset/index.html rename to files/ja/web/html/element/input/reset/index.md diff --git a/files/ja/web/html/element/input/submit/index.html b/files/ja/web/html/element/input/submit/index.md similarity index 100% rename from files/ja/web/html/element/input/submit/index.html rename to files/ja/web/html/element/input/submit/index.md diff --git a/files/ja/web/html/element/ins/index.html b/files/ja/web/html/element/ins/index.md similarity index 100% rename from files/ja/web/html/element/ins/index.html rename to files/ja/web/html/element/ins/index.md diff --git a/files/ja/web/html/element/kbd/index.html b/files/ja/web/html/element/kbd/index.md similarity index 100% rename from files/ja/web/html/element/kbd/index.html rename to files/ja/web/html/element/kbd/index.md diff --git a/files/ja/web/html/element/label/index.html b/files/ja/web/html/element/label/index.md similarity index 100% rename from files/ja/web/html/element/label/index.html rename to files/ja/web/html/element/label/index.md diff --git a/files/ja/web/html/element/legend/index.html b/files/ja/web/html/element/legend/index.md similarity index 100% rename from files/ja/web/html/element/legend/index.html rename to files/ja/web/html/element/legend/index.md diff --git a/files/ja/web/html/element/li/index.html b/files/ja/web/html/element/li/index.md similarity index 100% rename from files/ja/web/html/element/li/index.html rename to files/ja/web/html/element/li/index.md diff --git a/files/ja/web/html/element/main/index.html b/files/ja/web/html/element/main/index.md similarity index 100% rename from files/ja/web/html/element/main/index.html rename to files/ja/web/html/element/main/index.md diff --git a/files/ja/web/html/element/mark/index.html b/files/ja/web/html/element/mark/index.md similarity index 100% rename from files/ja/web/html/element/mark/index.html rename to files/ja/web/html/element/mark/index.md diff --git a/files/ja/web/html/element/menu/index.html b/files/ja/web/html/element/menu/index.md similarity index 100% rename from files/ja/web/html/element/menu/index.html rename to files/ja/web/html/element/menu/index.md diff --git a/files/ja/web/html/element/menuitem/index.html b/files/ja/web/html/element/menuitem/index.md similarity index 100% rename from files/ja/web/html/element/menuitem/index.html rename to files/ja/web/html/element/menuitem/index.md diff --git a/files/ja/web/html/element/meta/name/index.html b/files/ja/web/html/element/meta/name/index.md similarity index 100% rename from files/ja/web/html/element/meta/name/index.html rename to files/ja/web/html/element/meta/name/index.md diff --git a/files/ja/web/html/element/meta/name/theme-color/index.html b/files/ja/web/html/element/meta/name/theme-color/index.md similarity index 100% rename from files/ja/web/html/element/meta/name/theme-color/index.html rename to files/ja/web/html/element/meta/name/theme-color/index.md diff --git a/files/ja/web/html/element/meter/index.html b/files/ja/web/html/element/meter/index.md similarity index 100% rename from files/ja/web/html/element/meter/index.html rename to files/ja/web/html/element/meter/index.md diff --git a/files/ja/web/html/element/nav/index.html b/files/ja/web/html/element/nav/index.md similarity index 100% rename from files/ja/web/html/element/nav/index.html rename to files/ja/web/html/element/nav/index.md diff --git a/files/ja/web/html/element/noscript/index.html b/files/ja/web/html/element/noscript/index.md similarity index 100% rename from files/ja/web/html/element/noscript/index.html rename to files/ja/web/html/element/noscript/index.md diff --git a/files/ja/web/html/element/option/index.html b/files/ja/web/html/element/option/index.md similarity index 100% rename from files/ja/web/html/element/option/index.html rename to files/ja/web/html/element/option/index.md diff --git a/files/ja/web/html/element/output/index.html b/files/ja/web/html/element/output/index.md similarity index 100% rename from files/ja/web/html/element/output/index.html rename to files/ja/web/html/element/output/index.md diff --git a/files/ja/web/html/element/p/index.html b/files/ja/web/html/element/p/index.md similarity index 100% rename from files/ja/web/html/element/p/index.html rename to files/ja/web/html/element/p/index.md diff --git a/files/ja/web/html/element/param/index.html b/files/ja/web/html/element/param/index.md similarity index 100% rename from files/ja/web/html/element/param/index.html rename to files/ja/web/html/element/param/index.md diff --git a/files/ja/web/html/element/picture/index.html b/files/ja/web/html/element/picture/index.md similarity index 100% rename from files/ja/web/html/element/picture/index.html rename to files/ja/web/html/element/picture/index.md diff --git a/files/ja/web/html/element/portal/index.html b/files/ja/web/html/element/portal/index.md similarity index 100% rename from files/ja/web/html/element/portal/index.html rename to files/ja/web/html/element/portal/index.md diff --git a/files/ja/web/html/element/pre/index.html b/files/ja/web/html/element/pre/index.md similarity index 100% rename from files/ja/web/html/element/pre/index.html rename to files/ja/web/html/element/pre/index.md diff --git a/files/ja/web/html/element/progress/index.html b/files/ja/web/html/element/progress/index.md similarity index 100% rename from files/ja/web/html/element/progress/index.html rename to files/ja/web/html/element/progress/index.md diff --git a/files/ja/web/html/element/q/index.html b/files/ja/web/html/element/q/index.md similarity index 100% rename from files/ja/web/html/element/q/index.html rename to files/ja/web/html/element/q/index.md diff --git a/files/ja/web/html/element/rb/index.html b/files/ja/web/html/element/rb/index.md similarity index 100% rename from files/ja/web/html/element/rb/index.html rename to files/ja/web/html/element/rb/index.md diff --git a/files/ja/web/html/element/rp/index.html b/files/ja/web/html/element/rp/index.md similarity index 100% rename from files/ja/web/html/element/rp/index.html rename to files/ja/web/html/element/rp/index.md diff --git a/files/ja/web/html/element/rt/index.html b/files/ja/web/html/element/rt/index.md similarity index 100% rename from files/ja/web/html/element/rt/index.html rename to files/ja/web/html/element/rt/index.md diff --git a/files/ja/web/html/element/rtc/index.html b/files/ja/web/html/element/rtc/index.md similarity index 100% rename from files/ja/web/html/element/rtc/index.html rename to files/ja/web/html/element/rtc/index.md diff --git a/files/ja/web/html/element/ruby/index.html b/files/ja/web/html/element/ruby/index.md similarity index 100% rename from files/ja/web/html/element/ruby/index.html rename to files/ja/web/html/element/ruby/index.md diff --git a/files/ja/web/html/element/s/index.html b/files/ja/web/html/element/s/index.md similarity index 100% rename from files/ja/web/html/element/s/index.html rename to files/ja/web/html/element/s/index.md diff --git a/files/ja/web/html/element/samp/index.html b/files/ja/web/html/element/samp/index.md similarity index 100% rename from files/ja/web/html/element/samp/index.html rename to files/ja/web/html/element/samp/index.md diff --git a/files/ja/web/html/element/section/index.html b/files/ja/web/html/element/section/index.md similarity index 100% rename from files/ja/web/html/element/section/index.html rename to files/ja/web/html/element/section/index.md diff --git a/files/ja/web/html/element/select/index.html b/files/ja/web/html/element/select/index.md similarity index 100% rename from files/ja/web/html/element/select/index.html rename to files/ja/web/html/element/select/index.md diff --git a/files/ja/web/html/element/shadow/index.html b/files/ja/web/html/element/shadow/index.md similarity index 100% rename from files/ja/web/html/element/shadow/index.html rename to files/ja/web/html/element/shadow/index.md diff --git a/files/ja/web/html/element/small/index.html b/files/ja/web/html/element/small/index.md similarity index 100% rename from files/ja/web/html/element/small/index.html rename to files/ja/web/html/element/small/index.md diff --git a/files/ja/web/html/element/source/index.html b/files/ja/web/html/element/source/index.md similarity index 100% rename from files/ja/web/html/element/source/index.html rename to files/ja/web/html/element/source/index.md diff --git a/files/ja/web/html/element/span/index.html b/files/ja/web/html/element/span/index.md similarity index 100% rename from files/ja/web/html/element/span/index.html rename to files/ja/web/html/element/span/index.md diff --git a/files/ja/web/html/element/strong/index.html b/files/ja/web/html/element/strong/index.md similarity index 100% rename from files/ja/web/html/element/strong/index.html rename to files/ja/web/html/element/strong/index.md diff --git a/files/ja/web/html/element/style/index.html b/files/ja/web/html/element/style/index.md similarity index 100% rename from files/ja/web/html/element/style/index.html rename to files/ja/web/html/element/style/index.md diff --git a/files/ja/web/html/element/sub/index.html b/files/ja/web/html/element/sub/index.md similarity index 100% rename from files/ja/web/html/element/sub/index.html rename to files/ja/web/html/element/sub/index.md diff --git a/files/ja/web/html/element/sup/index.html b/files/ja/web/html/element/sup/index.md similarity index 100% rename from files/ja/web/html/element/sup/index.html rename to files/ja/web/html/element/sup/index.md diff --git a/files/ja/web/html/element/table/index.html b/files/ja/web/html/element/table/index.md similarity index 100% rename from files/ja/web/html/element/table/index.html rename to files/ja/web/html/element/table/index.md diff --git a/files/ja/web/html/element/tbody/index.html b/files/ja/web/html/element/tbody/index.md similarity index 100% rename from files/ja/web/html/element/tbody/index.html rename to files/ja/web/html/element/tbody/index.md diff --git a/files/ja/web/html/element/textarea/index.html b/files/ja/web/html/element/textarea/index.md similarity index 100% rename from files/ja/web/html/element/textarea/index.html rename to files/ja/web/html/element/textarea/index.md diff --git a/files/ja/web/html/element/time/index.html b/files/ja/web/html/element/time/index.md similarity index 100% rename from files/ja/web/html/element/time/index.html rename to files/ja/web/html/element/time/index.md diff --git a/files/ja/web/html/element/title/index.html b/files/ja/web/html/element/title/index.md similarity index 100% rename from files/ja/web/html/element/title/index.html rename to files/ja/web/html/element/title/index.md diff --git a/files/ja/web/html/element/u/index.html b/files/ja/web/html/element/u/index.md similarity index 100% rename from files/ja/web/html/element/u/index.html rename to files/ja/web/html/element/u/index.md diff --git a/files/ja/web/html/element/ul/index.html b/files/ja/web/html/element/ul/index.md similarity index 100% rename from files/ja/web/html/element/ul/index.html rename to files/ja/web/html/element/ul/index.md diff --git a/files/ja/web/html/element/var/index.html b/files/ja/web/html/element/var/index.md similarity index 100% rename from files/ja/web/html/element/var/index.html rename to files/ja/web/html/element/var/index.md diff --git a/files/ja/web/html/element/wbr/index.html b/files/ja/web/html/element/wbr/index.md similarity index 100% rename from files/ja/web/html/element/wbr/index.html rename to files/ja/web/html/element/wbr/index.md diff --git a/files/ja/web/html/global_attributes/accesskey/index.html b/files/ja/web/html/global_attributes/accesskey/index.md similarity index 100% rename from files/ja/web/html/global_attributes/accesskey/index.html rename to files/ja/web/html/global_attributes/accesskey/index.md diff --git a/files/ja/web/html/global_attributes/autocapitalize/index.html b/files/ja/web/html/global_attributes/autocapitalize/index.md similarity index 100% rename from files/ja/web/html/global_attributes/autocapitalize/index.html rename to files/ja/web/html/global_attributes/autocapitalize/index.md diff --git a/files/ja/web/html/global_attributes/class/index.html b/files/ja/web/html/global_attributes/class/index.md similarity index 100% rename from files/ja/web/html/global_attributes/class/index.html rename to files/ja/web/html/global_attributes/class/index.md diff --git a/files/ja/web/html/global_attributes/contenteditable/index.html b/files/ja/web/html/global_attributes/contenteditable/index.md similarity index 100% rename from files/ja/web/html/global_attributes/contenteditable/index.html rename to files/ja/web/html/global_attributes/contenteditable/index.md diff --git a/files/ja/web/html/global_attributes/contextmenu/index.html b/files/ja/web/html/global_attributes/contextmenu/index.md similarity index 100% rename from files/ja/web/html/global_attributes/contextmenu/index.html rename to files/ja/web/html/global_attributes/contextmenu/index.md diff --git a/files/ja/web/html/global_attributes/data-_star_/index.html b/files/ja/web/html/global_attributes/data-_star_/index.md similarity index 100% rename from files/ja/web/html/global_attributes/data-_star_/index.html rename to files/ja/web/html/global_attributes/data-_star_/index.md diff --git a/files/ja/web/html/global_attributes/dir/index.html b/files/ja/web/html/global_attributes/dir/index.md similarity index 100% rename from files/ja/web/html/global_attributes/dir/index.html rename to files/ja/web/html/global_attributes/dir/index.md diff --git a/files/ja/web/html/global_attributes/draggable/index.html b/files/ja/web/html/global_attributes/draggable/index.md similarity index 100% rename from files/ja/web/html/global_attributes/draggable/index.html rename to files/ja/web/html/global_attributes/draggable/index.md diff --git a/files/ja/web/html/global_attributes/hidden/index.html b/files/ja/web/html/global_attributes/hidden/index.md similarity index 100% rename from files/ja/web/html/global_attributes/hidden/index.html rename to files/ja/web/html/global_attributes/hidden/index.md diff --git a/files/ja/web/html/global_attributes/id/index.html b/files/ja/web/html/global_attributes/id/index.md similarity index 100% rename from files/ja/web/html/global_attributes/id/index.html rename to files/ja/web/html/global_attributes/id/index.md diff --git a/files/ja/web/html/global_attributes/inputmode/index.html b/files/ja/web/html/global_attributes/inputmode/index.md similarity index 100% rename from files/ja/web/html/global_attributes/inputmode/index.html rename to files/ja/web/html/global_attributes/inputmode/index.md diff --git a/files/ja/web/html/global_attributes/is/index.html b/files/ja/web/html/global_attributes/is/index.md similarity index 100% rename from files/ja/web/html/global_attributes/is/index.html rename to files/ja/web/html/global_attributes/is/index.md diff --git a/files/ja/web/html/global_attributes/lang/index.html b/files/ja/web/html/global_attributes/lang/index.md similarity index 100% rename from files/ja/web/html/global_attributes/lang/index.html rename to files/ja/web/html/global_attributes/lang/index.md diff --git a/files/ja/web/html/global_attributes/spellcheck/index.html b/files/ja/web/html/global_attributes/spellcheck/index.md similarity index 100% rename from files/ja/web/html/global_attributes/spellcheck/index.html rename to files/ja/web/html/global_attributes/spellcheck/index.md diff --git a/files/ja/web/html/global_attributes/style/index.html b/files/ja/web/html/global_attributes/style/index.md similarity index 100% rename from files/ja/web/html/global_attributes/style/index.html rename to files/ja/web/html/global_attributes/style/index.md diff --git a/files/ja/web/html/global_attributes/tabindex/index.html b/files/ja/web/html/global_attributes/tabindex/index.md similarity index 100% rename from files/ja/web/html/global_attributes/tabindex/index.html rename to files/ja/web/html/global_attributes/tabindex/index.md diff --git a/files/ja/web/html/global_attributes/title/index.html b/files/ja/web/html/global_attributes/title/index.md similarity index 100% rename from files/ja/web/html/global_attributes/title/index.html rename to files/ja/web/html/global_attributes/title/index.md diff --git a/files/ja/web/html/global_attributes/translate/index.html b/files/ja/web/html/global_attributes/translate/index.md similarity index 100% rename from files/ja/web/html/global_attributes/translate/index.html rename to files/ja/web/html/global_attributes/translate/index.md diff --git a/files/ja/web/html/global_attributes/x-ms-format-detection/index.html b/files/ja/web/html/global_attributes/x-ms-format-detection/index.md similarity index 100% rename from files/ja/web/html/global_attributes/x-ms-format-detection/index.html rename to files/ja/web/html/global_attributes/x-ms-format-detection/index.md diff --git a/files/ja/web/html/index.html b/files/ja/web/html/index.md similarity index 100% rename from files/ja/web/html/index.html rename to files/ja/web/html/index.md diff --git a/files/ja/web/html/inline_elements/index.html b/files/ja/web/html/inline_elements/index.md similarity index 100% rename from files/ja/web/html/inline_elements/index.html rename to files/ja/web/html/inline_elements/index.md diff --git a/files/ja/web/html/link_types/dns-prefetch/index.html b/files/ja/web/html/link_types/dns-prefetch/index.md similarity index 100% rename from files/ja/web/html/link_types/dns-prefetch/index.html rename to files/ja/web/html/link_types/dns-prefetch/index.md diff --git a/files/ja/web/html/link_types/manifest/index.html b/files/ja/web/html/link_types/manifest/index.md similarity index 100% rename from files/ja/web/html/link_types/manifest/index.html rename to files/ja/web/html/link_types/manifest/index.md diff --git a/files/ja/web/html/link_types/modulepreload/index.html b/files/ja/web/html/link_types/modulepreload/index.md similarity index 100% rename from files/ja/web/html/link_types/modulepreload/index.html rename to files/ja/web/html/link_types/modulepreload/index.md diff --git a/files/ja/web/html/link_types/noopener/index.html b/files/ja/web/html/link_types/noopener/index.md similarity index 100% rename from files/ja/web/html/link_types/noopener/index.html rename to files/ja/web/html/link_types/noopener/index.md diff --git a/files/ja/web/html/link_types/noreferrer/index.html b/files/ja/web/html/link_types/noreferrer/index.md similarity index 100% rename from files/ja/web/html/link_types/noreferrer/index.html rename to files/ja/web/html/link_types/noreferrer/index.md diff --git a/files/ja/web/html/link_types/preconnect/index.html b/files/ja/web/html/link_types/preconnect/index.md similarity index 100% rename from files/ja/web/html/link_types/preconnect/index.html rename to files/ja/web/html/link_types/preconnect/index.md diff --git a/files/ja/web/html/link_types/prefetch/index.html b/files/ja/web/html/link_types/prefetch/index.md similarity index 100% rename from files/ja/web/html/link_types/prefetch/index.html rename to files/ja/web/html/link_types/prefetch/index.md diff --git a/files/ja/web/html/link_types/preload/index.html b/files/ja/web/html/link_types/preload/index.md similarity index 100% rename from files/ja/web/html/link_types/preload/index.html rename to files/ja/web/html/link_types/preload/index.md diff --git a/files/ja/web/html/link_types/prerender/index.html b/files/ja/web/html/link_types/prerender/index.md similarity index 100% rename from files/ja/web/html/link_types/prerender/index.html rename to files/ja/web/html/link_types/prerender/index.md diff --git a/files/ja/web/html/microformats/index.html b/files/ja/web/html/microformats/index.md similarity index 100% rename from files/ja/web/html/microformats/index.html rename to files/ja/web/html/microformats/index.md diff --git a/files/ja/web/html/reference/index.html b/files/ja/web/html/reference/index.md similarity index 100% rename from files/ja/web/html/reference/index.html rename to files/ja/web/html/reference/index.md From ac605b93236714498a99f16b95d5d46ff5191a71 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 18 Aug 2022 14:11:34 +0900 Subject: [PATCH 2/4] =?UTF-8?q?web/html=20=E4=BB=A5=E4=B8=8B=E3=82=92=20md?= =?UTF-8?q?=20=E3=81=AB=E4=B8=80=E6=8B=AC=E5=A4=89=E6=8F=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/html/attributes/accept/index.md | 230 ++-- .../ja/web/html/attributes/multiple/index.md | 273 ++-- files/ja/web/html/attributes/pattern/index.md | 183 ++- .../ja/web/html/attributes/required/index.md | 116 +- files/ja/web/html/attributes/size/index.md | 84 +- .../ja/web/html/block-level_elements/index.md | 223 ++-- files/ja/web/html/cors_enabled_image/index.md | 102 +- .../web/html/date_and_time_formats/index.md | 589 ++++----- files/ja/web/html/element/abbr/index.md | 285 ++--- files/ja/web/html/element/address/index.md | 218 ++-- files/ja/web/html/element/area/index.md | 270 ++-- files/ja/web/html/element/article/index.md | 244 ++-- files/ja/web/html/element/aside/index.md | 196 +-- files/ja/web/html/element/audio/index.md | 605 ++++----- files/ja/web/html/element/b/index.md | 197 ++- files/ja/web/html/element/bdi/index.md | 261 ++-- files/ja/web/html/element/bdo/index.md | 160 ++- files/ja/web/html/element/blockquote/index.md | 180 ++- files/ja/web/html/element/br/index.md | 197 ++- files/ja/web/html/element/button/index.md | 467 ++++--- files/ja/web/html/element/canvas/index.md | 309 +++-- files/ja/web/html/element/caption/index.md | 223 ++-- files/ja/web/html/element/cite/index.md | 248 ++-- files/ja/web/html/element/code/index.md | 169 +-- files/ja/web/html/element/col/index.md | 272 ++-- files/ja/web/html/element/colgroup/index.md | 291 ++--- files/ja/web/html/element/content/index.md | 143 ++- files/ja/web/html/element/data/index.md | 155 ++- files/ja/web/html/element/datalist/index.md | 172 ++- files/ja/web/html/element/del/index.md | 190 ++- files/ja/web/html/element/dfn/index.md | 266 ++-- files/ja/web/html/element/dialog/index.md | 247 ++-- files/ja/web/html/element/div/index.md | 214 ++-- files/ja/web/html/element/em/index.md | 190 +-- files/ja/web/html/element/embed/index.md | 197 ++- files/ja/web/html/element/fieldset/index.md | 237 ++-- files/ja/web/html/element/figcaption/index.md | 132 +- files/ja/web/html/element/figure/index.md | 243 ++-- files/ja/web/html/element/footer/index.md | 195 +-- files/ja/web/html/element/frame/index.md | 65 +- files/ja/web/html/element/frameset/index.md | 44 +- files/ja/web/html/element/head/index.md | 214 ++-- files/ja/web/html/element/header/index.md | 241 ++-- files/ja/web/html/element/hgroup/index.md | 211 ++-- files/ja/web/html/element/hr/index.md | 181 ++- files/ja/web/html/element/iframe/index.md | 386 +++--- .../ja/web/html/element/input/button/index.md | 295 +++-- .../web/html/element/input/checkbox/index.md | 439 +++---- .../ja/web/html/element/input/color/index.md | 254 ++-- files/ja/web/html/element/input/file/index.md | 582 ++++----- .../ja/web/html/element/input/hidden/index.md | 259 ++-- .../ja/web/html/element/input/radio/index.md | 413 +++--- .../ja/web/html/element/input/reset/index.md | 218 ++-- .../ja/web/html/element/input/submit/index.md | 368 +++--- files/ja/web/html/element/ins/index.md | 182 ++- files/ja/web/html/element/kbd/index.md | 275 ++-- files/ja/web/html/element/label/index.md | 283 +++-- files/ja/web/html/element/legend/index.md | 137 +- files/ja/web/html/element/li/index.md | 274 ++-- files/ja/web/html/element/main/index.md | 247 ++-- files/ja/web/html/element/mark/index.md | 213 ++-- files/ja/web/html/element/menu/index.md | 337 ++--- files/ja/web/html/element/menuitem/index.md | 218 ++-- files/ja/web/html/element/meta/name/index.md | 399 ++---- .../element/meta/name/theme-color/index.md | 36 +- files/ja/web/html/element/meter/index.md | 209 +-- files/ja/web/html/element/nav/index.md | 174 ++- files/ja/web/html/element/noscript/index.md | 168 +-- files/ja/web/html/element/option/index.md | 149 +-- files/ja/web/html/element/output/index.md | 184 +-- files/ja/web/html/element/p/index.md | 235 ++-- files/ja/web/html/element/param/index.md | 182 ++- files/ja/web/html/element/picture/index.md | 216 ++-- files/ja/web/html/element/portal/index.md | 74 +- files/ja/web/html/element/pre/index.md | 170 +-- files/ja/web/html/element/progress/index.md | 174 ++- files/ja/web/html/element/q/index.md | 181 ++- files/ja/web/html/element/rb/index.md | 194 ++- files/ja/web/html/element/rp/index.md | 194 ++- files/ja/web/html/element/rt/index.md | 184 ++- files/ja/web/html/element/rtc/index.md | 159 ++- files/ja/web/html/element/ruby/index.md | 184 +-- files/ja/web/html/element/s/index.md | 173 +-- files/ja/web/html/element/samp/index.md | 220 ++-- files/ja/web/html/element/section/index.md | 285 +++-- files/ja/web/html/element/select/index.md | 550 ++++---- files/ja/web/html/element/shadow/index.md | 145 ++- files/ja/web/html/element/small/index.md | 199 ++- files/ja/web/html/element/source/index.md | 245 ++-- files/ja/web/html/element/span/index.md | 183 +-- files/ja/web/html/element/strong/index.md | 195 +-- files/ja/web/html/element/style/index.md | 270 ++-- files/ja/web/html/element/sub/index.md | 206 +-- files/ja/web/html/element/sup/index.md | 206 +-- files/ja/web/html/element/table/index.md | 1119 ++++++++--------- files/ja/web/html/element/tbody/index.md | 533 ++++---- files/ja/web/html/element/textarea/index.md | 457 +++---- files/ja/web/html/element/time/index.md | 269 ++-- files/ja/web/html/element/title/index.md | 161 ++- files/ja/web/html/element/u/index.md | 284 ++--- files/ja/web/html/element/ul/index.md | 308 +++-- files/ja/web/html/element/var/index.md | 217 ++-- files/ja/web/html/element/video/index.md | 2 +- files/ja/web/html/element/wbr/index.md | 141 +-- .../html/global_attributes/accesskey/index.md | 205 ++- .../global_attributes/autocapitalize/index.md | 59 +- .../web/html/global_attributes/class/index.md | 81 +- .../contenteditable/index.md | 81 +- .../global_attributes/contextmenu/index.md | 120 +- .../global_attributes/data-_star_/index.md | 82 +- .../web/html/global_attributes/dir/index.md | 95 +- .../html/global_attributes/draggable/index.md | 61 +- .../html/global_attributes/hidden/index.md | 65 +- .../ja/web/html/global_attributes/id/index.md | 67 +- .../html/global_attributes/inputmode/index.md | 120 +- .../ja/web/html/global_attributes/is/index.md | 51 +- .../web/html/global_attributes/lang/index.md | 91 +- .../global_attributes/spellcheck/index.md | 61 +- .../web/html/global_attributes/style/index.md | 65 +- .../html/global_attributes/tabindex/index.md | 127 +- .../web/html/global_attributes/title/index.md | 139 +- .../html/global_attributes/translate/index.md | 87 +- .../x-ms-format-detection/index.md | 43 +- files/ja/web/html/index.md | 123 +- files/ja/web/html/inline_elements/index.md | 194 +-- .../web/html/link_types/dns-prefetch/index.md | 14 +- .../ja/web/html/link_types/manifest/index.md | 12 +- .../html/link_types/modulepreload/index.md | 12 +- .../ja/web/html/link_types/noopener/index.md | 21 +- .../web/html/link_types/noreferrer/index.md | 12 +- .../web/html/link_types/preconnect/index.md | 17 +- .../ja/web/html/link_types/prefetch/index.md | 12 +- files/ja/web/html/link_types/preload/index.md | 274 ++-- .../ja/web/html/link_types/prerender/index.md | 12 +- files/ja/web/html/microformats/index.md | 534 +++----- files/ja/web/html/reference/index.md | 30 +- 136 files changed, 13408 insertions(+), 14902 deletions(-) diff --git a/files/ja/web/html/attributes/accept/index.md b/files/ja/web/html/attributes/accept/index.md index 9c958061bf0db6..0e363f921b7fd3 100644 --- a/files/ja/web/html/attributes/accept/index.md +++ b/files/ja/web/html/attributes/accept/index.md @@ -10,160 +10,148 @@ tags: - Reference translation_of: Web/HTML/Attributes/accept --- -

{{HTMLSidebar}}

+{{HTMLSidebar}} -

accept 属性は、値としてカンマ区切りでファイル種別または固有ファイル種別指定子を取り、どのファイル種別を受け入れるかを記述します。 accept プロパティは {{HTMLElement("input/file", "file")}} 型の {{htmlelement("input")}} 要素のプロパティです。もとは {{htmlelement("form")}} 要素で対応していましたが、 HTML5 で削除され、 {{HTMLElement("input/file", "file")}} に変更されました。

+**`accept`** 属性は、値としてカンマ区切りでファイル種別または[固有ファイル種別指定子](#unique_file_type_specifiers)を取り、どのファイル種別を受け入れるかを記述します。 accept プロパティは {{HTMLElement("input/file", "file")}} 型の {{htmlelement("input")}} 要素のプロパティです。もとは {{htmlelement("form")}} 要素で対応していましたが、 HTML5 で削除され、 {{HTMLElement("input/file", "file")}} に変更されました。 -

与えられたファイル種別は複数の方法で識別される可能性があるため、特定の種別のファイルが必要な場合には、型指定子の完全なセットを提供したり、ワイルドカードを使用して任意の形式の型が許容されることを示したりすると便利です。

+与えられたファイル種別は複数の方法で識別される可能性があるため、特定の種別のファイルが必要な場合には、型指定子の完全なセットを提供したり、ワイルドカードを使用して任意の形式の型が許容されることを示したりすると便利です。 -

例えば、 Microsoft Word ファイルを識別できる方法は何通りもありますので、 Word ファイルを受け付けるサイトは <input> を次のように使用するかもしれません。

+例えば、 Microsoft Word ファイルを識別できる方法は何通りもありますので、 Word ファイルを受け付けるサイトは `` を次のように使用するかもしれません。 -
<input type="file" id="docpicker"
-  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
+```html + +``` -

一方、メディアファイルを受け入れる場合は、そのメディア種別の任意の形式を含めるようにしたいかもしれません。

+一方、メディアファイルを受け入れる場合は、そのメディア種別の任意の形式を含めるようにしたいかもしれません。 -
<input type="file" id="soundFile" accept="audio/*">
-<input type="file" id="videoFile" accept="video/*">
-<input type="file" id="imageFile" accept="image/*">
+```html + + + +``` -

accept 属性は、選択されたファイルの種別を検証するものではありません。これはブラウザーがユーザーに対して正しいファイル種別を選択できるようにするためのガイドをするためのヒントを提供するだけです。ユーザーがファイルセレクターのオプションを切り替え、これを上書きして任意のファイルを選択し、不正なファイル種別を選択することは (ほとんどの場合) 可能です。

+`accept` 属性は、選択されたファイルの種別を検証するものではありません。これはブラウザーがユーザーに対して正しいファイル種別を選択できるようにするためのガイドをするためのヒントを提供するだけです。ユーザーがファイルセレクターのオプションを切り替え、これを上書きして任意のファイルを選択し、不正なファイル種別を選択することは (ほとんどの場合) 可能です。 -

このため、期待される要件をサーバー側で検証するようにしてください。

+このため、期待される要件をサーバー側で検証するようにしてください。 -

例

+## 例 -

ファイル入力型に設定された場合、ネイティブファイルピッカーが開いたときに、正しいファイル種別のファイルのみを選択できるようにする必要があります。ほとんどのオペレーティングシステムでは、条件に合わず選択できないファイルが薄く表示されます。

+ファイル入力型に設定された場合、ネイティブファイルピッカーが開いたときに、正しいファイル種別のファイルのみを選択できるようにする必要があります。ほとんどのオペレーティングシステムでは、条件に合わず選択できないファイルが薄く表示されます。 -
-
<p>
-	<label for="soundFile">Select an audio file:</label>
-	<input type="file" id="soundFile" accept="audio/*">
-	</p>
-	<p>
-	<label for="videoFile">Select a video file:</label>
-	<input type="file" id="videoFile" accept="video/*">
-	</p>
-	<p>
-	<label for="imageFile">Select some images:</label>
-	<input type="file" id="imageFile" accept="image/*" multiple>
-	</p>
+```html +

+ + +

+

+ + +

+

+ + +

+``` -

{{EmbedLiveSample('simple_example', '100%', 200)}}

+{{EmbedLiveSample('simple_example', '100%', 200)}} -

なお、最後の例では複数の画像を選択することができます。詳しくは multiple 属性を参照してください。

-
+なお、最後の例では複数の画像を選択することができます。詳しくは [`multiple`](multiple) 属性を参照してください。 -

固有ファイル種別指定子

+## 固有ファイル種別指定子 -

固有ファイル種別指定子は文字列で、ユーザーが {{HTMLElement("input")}} 要素の file 型で選択することができるファイルの種類を記述します。それぞれの固有ファイル種別記述子は、以下の形のうちの一つを取ります。

+**固有ファイル種別指定子**は文字列で、ユーザーが {{HTMLElement("input")}} 要素の `file` 型で選択することができるファイルの種類を記述します。それぞれの固有ファイル種別記述子は、以下の形のうちの一つを取ります。 - +- ピリオド (".") 文字から始まる有効なファイル拡張子で、大文字小文字の区別をしないもの。例えば、 `.jpg`, `.pdf`, `.doc` などです。 +- 有効な MIME タイプの文字列で、拡張子なしのもの。 +- 文字列 `audio/*` は「任意の音声ファイル」を意味します。 +- 文字列 `video/*` は「任意の映像ファイル」を意味します。 +- 文字列 `image/*` は「任意の画像ファイル」を意味します。 -

accept 属性は、カンマ区切りの1つ以上の固有ファイル種別指定子を含む文字列を値として取ります。例えば、標準的な画像形式と PDF ファイルの両方を含む、画像として表示できるコンテンツを必要とするファイルピッカーは、次のようになります。

+`accept` 属性は、カンマ区切りの 1 つ以上の固有ファイル種別指定子を含む文字列を値として取ります。例えば、標準的な画像形式と PDF ファイルの両方を含む、画像として表示できるコンテンツを必要とするファイルピッカーは、次のようになります。 -
<input type="file" accept="image/*,.pdf">
+```html + +``` -

file 入力の使用

+## file 入力の使用 -

基本的な例

+### 基本的な例 -
<form method="post" enctype="multipart/form-data">
- <div>
-   <label for="file">Choose file to upload</label>
-   <input type="file" id="file" name="file" multiple>
- </div>
- <div>
-   <button>Submit</button>
- </div>
-</form>
+```html +
+
+ + +
+
+ +
+
+``` - +} +``` -

これは次のような出力を生成します。

+これは次のような出力を生成します。 -

{{EmbedLiveSample('A_basic_example', 650, 60)}}

+{{EmbedLiveSample('A_basic_example', 650, 60)}} -
-

メモ: この例は GitHub でも見ることができます。 — ソースコードとライブ実行を確認してください。

-
+> **Note:** **メモ**: この例は GitHub でも見ることができます。 — [ソースコード](https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html)と[ライブ実行](https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html)を確認してください。 -

ユーザーの端末やオペレーティングシステムが何であろうと、ファイル入力には、ユーザーがファイルを選択するためのファイルピッカーダイアログを開くボタンが用意されす。

+ユーザーの端末やオペレーティングシステムが何であろうと、ファイル入力には、ユーザーがファイルを選択するためのファイルピッカーダイアログを開くボタンが用意されす。 -

上記のように multiple 属性を含めることで、複数のファイルを一度に選択できるようになります。ユーザーは、選択したプラットフォームが許す任意の方法でファイルピッカーから複数のファイルを選択することができます (例えば、Shift キーまたは Control キーを押しながらクリックするなど)。 <input> ごとに1つのファイルのみを選択させたい場合は、 multiple 属性を省略してください。

+上記のように [`multiple`](multiple) 属性を含めることで、複数のファイルを一度に選択できるようになります。ユーザーは、選択したプラットフォームが許す任意の方法でファイルピッカーから複数のファイルを選択することができます (例えば、Shift キーまたは Control キーを押しながらクリックするなど)。 `` ごとに 1 つのファイルのみを選択させたい場合は、 `multiple` 属性を省略してください。 -

受け付けるファイル種別の制限

+### 受け付けるファイル種別の制限 -

多くの場合は、ユーザーが任意の種別のファイルを選択できるようにするのではなく、特定の種別のファイルを選択できるようにしたいものです。例えば、ファイル入力でユーザーがプロフィール画像をアップロードできる場合、 {{Glossary("JPEG")}} や {{Glossary("PNG")}} などのウェブ互換の画像形式を選択させたいと思うでしょう。/p> +多くの場合は、ユーザーが任意の種別のファイルを選択できるようにするのではなく、特定の種別のファイルを選択できるようにしたいものです。例えば、ファイル入力でユーザーがプロフィール画像をアップロードできる場合、 {{Glossary("JPEG")}} や {{Glossary("PNG")}} などのウェブ互換の画像形式を選択させたいと思うでしょう。/p> -

許容されるファイル種別は、 {{htmlattrxref("accept","input/file")}} 属性で許容されるファイル拡張子や MIME タイプのカンマ区切りのリストを取ることで指定することができます。いくつかの例を示します。

+許容されるファイル種別は、 {{htmlattrxref("accept","input/file")}} 属性で許容されるファイル拡張子や MIME タイプのカンマ区切りのリストを取ることで指定することができます。いくつかの例を示します。 - +- `accept="image/png"` または `accept=".png"` — PNG ファイルを受け付ける。 +- `accept="image/png, image/jpeg"` または `accept=".png, .jpg, .jpeg"` — PNG または JPEG ファイルを受け付ける。 +- `accept="image/*"` — `image/*` MIME タイプで任意のファイルを受け付ける (また、多くのモバイル端末では、これを使用するとユーザーにカメラで写真を撮影させることができる。) +- `accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"` — MS Word 文書と思しきすべてのファイルを受け付ける。 -

もっと完全な例を見てみましょう。

+もっと完全な例を見てみましょう。 -
<form method="post" enctype="multipart/form-data">
-  <div>
-    <label for="profile_pic">Choose file to upload</label>
-    <input type="file" id="profile_pic" name="profile_pic"
-          accept=".jpg, .jpeg, .png">
-  </div>
-  <div>
-    <button>Submit</button>
-  </div>
-</form>
+```html +
+
+ + +
+
+ +
+
+``` - - -

{{EmbedLiveSample('Limiting_accepted_file_types', 650, 60)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - -
仕様書状態
{{SpecName('HTML WHATWG', 'input.html#attr-input-accept', 'accept attribute')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'sec-forms.html#attr-input-accept', 'accept attribute')}}{{Spec2('HTML5.1')}}
- -

ブラウザーの互換性

- -

{{Compat("html.elements.attribute.accept")}}

- -

関連情報

- - +} +``` + +{{EmbedLiveSample('Limiting_accepted_file_types', 650, 60)}} + +## 仕様書 + +| 仕様書 | 状態 | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | +| {{SpecName('HTML WHATWG', 'input.html#attr-input-accept', 'accept attribute')}} | {{Spec2('HTML WHATWG')}} | +| {{SpecName('HTML5.1', 'sec-forms.html#attr-input-accept', 'accept attribute')}} | {{Spec2('HTML5.1')}} | + +## ブラウザーの互換性 + +{{Compat("html.elements.attribute.accept")}} + +## 関連情報 + +- [ウェブアプリケーションからのファイルの使用](/ja/docs/Using_files_from_web_applications) +- [File API](/ja/docs/Web/API/File) diff --git a/files/ja/web/html/attributes/multiple/index.md b/files/ja/web/html/attributes/multiple/index.md index dc35914ae888e7..8c9864ee5c84ca 100644 --- a/files/ja/web/html/attributes/multiple/index.md +++ b/files/ja/web/html/attributes/multiple/index.md @@ -8,136 +8,149 @@ tags: - HTML translation_of: Web/HTML/Attributes/multiple --- -

{{HTMLSidebar}}

+{{HTMLSidebar}} -

論理属性の multiple 属性は、設定されている場合、フォームコントロールが1つ以上の値を受け入れることを意味します。 {{HTMLElement("input/email", "email")}} と {{HTMLElement("input/file", "file")}} の入力型と {{HTMLElement("select")}} に対して有効で、ユーザーが複数の値を選択する方法はフォームコントロールに依存します。

+論理属性の **`multiple`** 属性は、設定されている場合、フォームコントロールが 1 つ以上の値を受け入れることを意味します。 {{HTMLElement("input/email", "email")}} と {{HTMLElement("input/file", "file")}} の入力型と {{HTMLElement("select")}} に対して有効で、ユーザーが複数の値を選択する方法はフォームコントロールに依存します。 -

型によっては、multiple 属性が設定されている場合、フォームコントロールの外観が変わる場合があります。 file 入力型については、ブラウザーが提供するネイティブのメッセージが異なります。 Firefox では、ファイルが選択されていないとき、この属性が設定されていると「ファイルが選択されていません」、設定されていない場合は「ファイルが選択されていません」となります（訳注：英語では file と files の違いがありますが、日本語ではメッセージの違いはありません）。ほとんどのブラウザーでは、 {{HTMLElement("select")}} コントロールに multiple 属性が設定されていると、スクロールするリストボックスを表示するのに対し、設定されていない場合は単一行のドロップダウンを表示します。 {{HTMLElement("input/email", "email")}} 入力は同じ表示ですが、この属性が設定されていない場合は、カンマ区切りで複数のメールアドレスが設定されていると {{cssxref(':invalid')}} 擬似クラスに一致します。

+型によっては、`multiple` 属性が設定されている場合、フォームコントロールの外観が変わる場合があります。 file 入力型については、ブラウザーが提供するネイティブのメッセージが異なります。 Firefox では、ファイルが選択されていないとき、この属性が設定されていると「ファイルが選択されていません」、設定されていない場合は「ファイルが選択されていません」となります（訳注：英語では file と files の違いがありますが、日本語ではメッセージの違いはありません）。ほとんどのブラウザーでは、 {{HTMLElement("select")}} コントロールに `multiple` 属性が設定されていると、スクロールするリストボックスを表示するのに対し、設定されていない場合は単一行のドロップダウンを表示します。 {{HTMLElement("input/email", "email")}} 入力は同じ表示ですが、この属性が設定されていない場合は、カンマ区切りで複数のメールアドレスが設定されていると {{cssxref(':invalid')}} 擬似クラスに一致します。 -

multiple が {{HTMLElement("input/email", "email")}} 入力型に設定されている場合、ユーザーは0個 (required がない場合)、1個、またはそれ以上のカンマ区切りのメールアドレスを入れることができます。

+`multiple` が {{HTMLElement("input/email", "email")}} 入力型に設定されている場合、ユーザーは 0 個 ([`required`](/ja/docs/Web/HTML/Attributes/required) がない場合)、1 個、またはそれ以上のカンマ区切りのメールアドレスを入れることができます。 -
<input type="email" multiple name="emails" id="emails">
+```html + +``` -

multiple 属性が指定された場合のみ、値はカンマで区切られた適切な形式のメールアドレスのリストになります。リスト内の各アドレスから、末尾と先頭の空白はすべて削除されます。

+`multiple` 属性が指定された場合のみ、値はカンマで区切られた適切な形式のメールアドレスのリストになります。リスト内の各アドレスから、末尾と先頭の空白はすべて削除されます。 -

multiple が {{HTMLElement("input/file", "file")}} 入力型に設定された場合、ユーザーは 1 つ以上のファイルを選択することができます。ユーザーはファイルピッカーから複数のファイルを、選択したプラットフォームが許可する任意の方法 (Shift か Control を押したまま、それからクリックするなど) で選択することができます。

+`multiple` が {{HTMLElement("input/file", "file")}} 入力型に設定された場合、ユーザーは 1 つ以上のファイルを選択することができます。ユーザーはファイルピッカーから複数のファイルを、選択したプラットフォームが許可する任意の方法 (Shift か Control を押したまま、それからクリックするなど) で選択することができます。 -
<input type="file" multiple name="uploads" id="uploads">
+```html + +``` -

この属性を省略した場合は、 <input> あたりに1つのファイルしか選択することができません。

+この属性を省略した場合は、 `` あたりに 1 つのファイルしか選択することができません。 -

multiple 属性を {{HTMLElement("select")}} 要素に設定すると、選択肢のリストから 0 個以上の選択肢を選択するためのコントロールを表します。それ以外の場合、 {{HTMLElement("select")}} 要素は、選択肢のリストから単一の {{HTMLElement("option")}} を選択するためのコントロールを表します。

+`multiple` 属性を {{HTMLElement("select")}} 要素に設定すると、選択肢のリストから 0 個以上の選択肢を選択するためのコントロールを表します。それ以外の場合、 {{HTMLElement("select")}} 要素は、選択肢のリストから単一の {{HTMLElement("option")}} を選択するためのコントロールを表します。 -
<select multiple name="drawfs" id="drawfs">
-  <option>Grumpy</option>
-  <option>Happy</option>
-  <option>Sleepy</option>
-  <option>Bashful</option>
-  <option>Sneezy</option>
-  <option>Dopey</option>
-  <option>Doc</option>
-</select>
+```html + +``` -

multiple を指定すると、ほとんどのブラウザーでは 1 行のドロップダウンではなく、スクロールするリストボックスが表示されます。

+`multiple` を指定すると、ほとんどのブラウザーでは 1 行のドロップダウンではなく、スクロールするリストボックスが表示されます。 -

アクセシビリティの考慮

+## アクセシビリティの考慮 -

ユーザーがフォームに記入する方法を理解し、個々のフォームコントロールを使用するための指示を提供してください。入力が必須であるか任意であるか、データの書式、その他の関連する情報です。 multiple 属性を使用する場合は、ユーザーに複数の値が許可されていることを知らせ、「複数のメールアドレスをカンマ区切りで入力してください」などのように、複数の値を入力する方法を指示してください。

+ユーザーがフォームに記入する方法を理解し、個々のフォームコントロールを使用するための指示を提供してください。入力が必須であるか任意であるか、データの書式、その他の関連する情報です。 `multiple` 属性を使用する場合は、ユーザーに複数の値が許可されていることを知らせ、「複数のメールアドレスをカンマ区切りで入力してください」などのように、複数の値を入力する方法を指示してください。 -

複数選択で size="1" を設定すると、ブラウザーによっては単一選択として表示されることがありますが、その場合はフォーカスが拡大されず、使い勝手が悪くなってしまいます。そのようなことはしないでください。 select の外観を変更する場合、また変更しない場合でも、別の方法で複数のオプションを選択できることをユーザーに知らせるようにしてください。

+複数選択で `size="1"` を設定すると、ブラウザーによっては単一選択として表示されることがありますが、その場合はフォーカスが拡大されず、使い勝手が悪くなってしまいます。そのようなことはしないでください。 select の外観を変更する場合、また変更しない場合でも、別の方法で複数のオプションを選択できることをユーザーに知らせるようにしてください。 -

例

+## 例 -

email 入力型

+### email 入力型 -
<label for="emails">誰にメールしますか？</label>
-<input type="email" multiple name="emails" id="emails" list="drawfemails" required size="64">
+```html
+
+
 
-<datalist id="drawfemails">
-  <option value="grumpy@woodworkers.com">Grumpy</option>
-  <option value="happy@woodworkers.com">Happy</option>
-  <option value="sleepy@woodworkers.com">Sleepy</option>
-  <option value="bashful@woodworkers.com">Bashful</option>
-  <option value="sneezy@woodworkers.com">Sneezy</option>
-  <option value="dopey@woodworkers.com">Dopey</option>
-  <option value="doc@woodworkers.com">Doc</option>
-</datalist>
+ + + + + + + + + +``` - +```css hidden +input:invalid {border: red solid 3px;} +``` -

multiple 属性が指定された場合のみ、値はカンマで区切られた適切な形式のメールアドレスのリストになります。リスト内の各アドレスから、末尾の空白と先頭の空白はすべて削除されます。 required 属性が存在する場合、少なくとも1つのメールアドレスが必要です。

+`multiple` 属性が指定された場合のみ、値はカンマで区切られた適切な形式のメールアドレスのリストになります。リスト内の各アドレスから、末尾の空白と先頭の空白はすべて削除されます。 [`required`](/ja/docs/Web/HTML/Attributes/required) 属性が存在する場合、少なくとも 1 つのメールアドレスが必要です。 -

ブラウザーによっては、 multiple が存在する場合に関連付けられた {{htmlelement('datalist')}} から配下のメール会アドレスのためにオプションの list を表示することがあります。他のブラウザーは対応していません。

+ブラウザーによっては、 `multiple` が存在する場合に関連付けられた {{htmlelement('datalist')}} から配下のメール会アドレスのためにオプションの [`list`](/ja/docs/Web/HTML/Attributes/list) を表示することがあります。他のブラウザーは対応していません。 -

{{EmbedLiveSample("email_input", 600, 80) }}

+{{EmbedLiveSample("email_input", 600, 80) }} -

file 入力型

+### file 入力型 -

multiple が {{HTMLElement("input/file", "file")}} 入力型に設定されている場合、1つ以上のファイルを選択することができます。

+`multiple` が {{HTMLElement("input/file", "file")}} 入力型に設定されている場合、1 つ以上のファイルを選択することができます。 -
<form method="post" enctype="multipart/form-data">
-  <p>
-    <label for="uploads">
+```html
+

+  

+
- -

{{EmbedLiveSample("file_input", 600, 80) }}

- -

multiple が設定された file 入力欄と、設定されていない入力欄との外見の違いに注意してください。

- -

フォームが送信されたとき、 method="get" を使用していれば、選択された各ファイルの名前が URL パラメータに?uploads=img1.jpg&uploads=img2.svg のように追加されていたはずです。しかし、マルチパートのフォームデータを送信しているので、post を多用しています。詳しくは {{htmlelement('form')}} 要素とフォームデータの送信を参照してください。

- -

select

- -

{{HTMLElement("select")}} 要素の multiple 属性は、選択肢のリストから 0 個以上の選択肢を選択するための制御を表します。そうでなければ、{{HTMLElement("select")}} 要素は、選択肢のリストから単一の {{HTMLElement("option")}} を選択するための制御を表します。一般的に、このコントロールは複数の属性の存在に基づいて異なる外観を持ち、属性が存在する場合には、ほとんどのブラウザは、一行のドロップダウンではなくスクロールするリストボックスを表示します。

- -
<form method="get" action="#">
-<p>
- <label for="dwarfs">好きな木こりを選ぶ:</label>
-  <select multiple name="drawfs" id="drawfs">
-    <option>grumpy@woodworkers.com</option>
-    <option>happy@woodworkers.com</option>
-    <option>sleepy@woodworkers.com</option>
-    <option>bashful@woodworkers.com</option>
-    <option>sneezy@woodworkers.com</option>
-    <option>dopey@woodworkers.com</option>
-    <option>doc@woodworkers.com</option>
-  </select>
-</p>
-<p>
- <label for="favoriteOnly">好きなものを選ぶ:</label>
-  <select name="favoriteOnly" id="favoriteOnly">
-    <option>grumpy@woodworkers.com</option>
-    <option>happy@woodworkers.com</option>
-    <option>sleepy@woodworkers.com</option>
-    <option>bashful@woodworkers.com</option>
-    <option>sneezy@woodworkers.com</option>
-    <option>dopey@woodworkers.com</option>
-    <option>doc@woodworkers.com</option>
-  </select>
-</p>
-<p>
-  <input type="submit" value="Submit">
-</p>
-</form>
- -

{{EmbedLiveSample("select", 600, 120) }}

- -

2つのフォームコントロール間の外観の違いに注意してください。

- -
/* この CSS のコメントを解除して、マルチプルがシングルと同じ高さになるようにします。 */
+    
+    
+  

+  

+    
+    
+ 

+  

+    
+  

+
+```
+
+{{EmbedLiveSample("file_input", 600, 80) }}
+
+`multiple` が設定された `file` 入力欄と、設定されていない入力欄との外見の違いに注意してください。
+
+フォームが送信されたとき、 [`method="get"`](/ja/docs/Web/HTML/Element/form) を使用していれば、選択された各ファイルの名前が URL パラメータに`?uploads=img1.jpg&uploads=img2.svg` のように追加されていたはずです。しかし、[マルチパート](/ja/docs/Web/API/XMLHttpRequest/multipart)のフォームデータを送信しているので、post を多用しています。詳しくは {{htmlelement('form')}} 要素と[フォームデータの送信](/ja/docs/Learn/Forms/Sending_and_retrieving_form_data#The_method_attribute)を参照してください。
+
+### select
+
+{{HTMLElement("select")}} 要素の `multiple` 属性は、選択肢のリストから 0 個以上の選択肢を選択するための制御を表します。そうでなければ、{{HTMLElement("select")}} 要素は、選択肢のリストから単一の {{HTMLElement("option")}} を選択するための制御を表します。一般的に、このコントロールは複数の属性の存在に基づいて異なる外観を持ち、属性が存在する場合には、ほとんどのブラウザは、一行のドロップダウンではなくスクロールするリストボックスを表示します。
+
+```html
+

+

+ 
+  
+

+

+ 
+  
+

+

+  
+

+

+```
+
+{{EmbedLiveSample("select", 600, 120) }}
+
+2 つのフォームコントロール間の外観の違いに注意してください。
+
+```css
+/* この CSS のコメントを解除して、マルチプルがシングルと同じ高さになるようにします。 */
 
 /*
 select[multiple] {
@@ -148,38 +161,20 @@ select[multiple]:focus,
 select[multiple]:active {
   height: auto;
 }
-*/
- -

複数の属性を持つ <select> 要素の中で複数のオプションを選択する方法がいくつかあります。オペレーティングシステムに応じて、マウスを使用する人は Ctrl、Command、または Shift キーを押したまま、複数のオプションをクリックして、それらを選択／選択解除することができます。キーボードユーザは <select> 要素に焦点を当てて、カーソルキーの Up と Down を使って選択したい範囲の上部または下部にある項目を選択して、オプションを上下に移動することで、複数の連続した項目を選択することができます。連続していない項目の選択はあまりサポートされていません: Space キーを押すことで項目の選択と選択解除ができるはずですが、サポートはブラウザによって異なります。

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML WHATWG', 'input.html#attr-input-multiple', 'multiple attribute')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'input.html#attr-input-multiple', 'multiple attribute')}}{{Spec2('HTML5 W3C')}}
- -

関連情報

- - +*/ +``` + +複数の属性を持つ `` 要素に焦点を当てて、カーソルキーの Up と Down を使って選択したい範囲の上部または下部にある項目を選択して、オプションを上下に移動することで、複数の連続した項目を選択することができます。連続していない項目の選択はあまりサポートされていません: Space キーを押すことで項目の選択と選択解除ができるはずですが、サポートはブラウザによって異なります。 + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ---- | +| {{SpecName('HTML WHATWG', 'input.html#attr-input-multiple', 'multiple attribute')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'input.html#attr-input-multiple', 'multiple attribute')}} | {{Spec2('HTML5 W3C')}} | | + +## 関連情報 + +- {{htmlelement('input')}} +- {{htmlelement('select')}} +- [複数のメールアドレスの許可](/ja/docs/Web/HTML/Element/input/email#Allowing_multiple_e-mail_addresses) diff --git a/files/ja/web/html/attributes/pattern/index.md b/files/ja/web/html/attributes/pattern/index.md index 443de5eb0d2801..93de85c0411ad0 100644 --- a/files/ja/web/html/attributes/pattern/index.md +++ b/files/ja/web/html/attributes/pattern/index.md @@ -9,80 +9,80 @@ tags: - Reference translation_of: Web/HTML/Attributes/pattern --- -

{{HTMLSidebar}}

+{{HTMLSidebar}} -

pattern 属性は、フォームコントロールの値が一致すべき正規表現を指定します。 null 以外の値が pattern 値によって設定された制約に適合しない場合、 {{domxref('ValidityState')}} オブジェクトの読み取り専用の {{domxref('ValidityState.patternMismatch','patternMismatch')}} プロパティが真になります。

+**`pattern`** 属性は、フォームコントロールの値が一致すべき[正規表現](/ja/docs/Web/JavaScript/Guide/Regular_Expressions)を指定します。 `null` 以外の値が `pattern` 値によって設定された制約に適合しない場合、 {{domxref('ValidityState')}} オブジェクトの読み取り専用の {{domxref('ValidityState.patternMismatch','patternMismatch')}} プロパティが真になります。 -

pattern属性は {{HTMLElement("input/text", "text")}}, {{HTMLElement("input/tel", "tel")}}, {{HTMLElement("input/email", "email")}}, {{HTMLElement("input/url", "url")}}, {{HTMLElement("input/password", "password")}}, {{HTMLElement("input/search", "search")}} の入力型の属性です。

+`pattern`属性は {{HTMLElement("input/text", "text")}}, {{HTMLElement("input/tel", "tel")}}, {{HTMLElement("input/email", "email")}}, {{HTMLElement("input/url", "url")}}, {{HTMLElement("input/password", "password")}}, {{HTMLElement("input/search", "search")}} の入力型の属性です。 -
-

pattern属性は、制約検証を通過させるために、入力の {{htmlattrxref("value")}} が一致するべき正規表現です。これは有効な JavaScript の正規表現でなければならず、 {{jsxref("RegExp")}} 型で使用されたり、 正規表現ガイドで説明されているものと同じものです。通り正規表現をコンパイルする際に 'u' フラグを指定することで、パターンが ASCII ではなく Unicode コードポイントの並びとして扱われるようになります。パターンテキストの周りには、スラッシュを指定してはいけません。

+`pattern`属性は、[制約検証](/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation)を通過させるために、入力の {{htmlattrxref("value")}} が一致するべき正規表現です。これは有効な JavaScript の正規表現でなければならず、 {{jsxref("RegExp")}} 型で使用されたり、 [正規表現ガイド](/ja/docs/Web/JavaScript/Guide/Regular_Expressions)で説明されているものと同じものです。通り正規表現をコンパイルする際に `'u'` フラグを指定することで、パターンが ASCII ではなく Unicode コードポイントの並びとして扱われるようになります。パターンテキストの周りには、スラッシュを指定してはいけません。 -

パターンが指定されていないか無効な場合、正規表現は適用されず、この属性は無視されます。

+パターンが指定されていないか無効な場合、正規表現は適用されず、この属性は無視されます。 -
-

ヒント: {{htmlattrxref("title", "input")}} 属性を使用すると、ほとんどのブラウザーがパターンに一致するための要件を説明するためにツールチップとして表示するテキストを指定することができます。説明をツールチップだけに頼ってはいけません。ユーザービリティについての詳細は以下を参照してください。

-
-
+> **Note:** **ヒント:** {{htmlattrxref("title", "input")}} 属性を使用すると、ほとんどのブラウザーがパターンに一致するための要件を説明するためにツールチップとして表示するテキストを指定することができます。説明をツールチップだけに頼っては**いけません**。ユーザービリティについての詳細は以下を参照してください。 -

pattern 属性に対応している入力型の中には、特に {{HTMLElement("input/email", "email")}} および {{HTMLElement("input/url", "url")}} 入力型のように、一致しなければならない期待値の構文を持っているものがあります。 pattern 属性が存在せず、値がその値型の期待される構文と一致しない場合、 {{domxref('ValidityState')}} オブジェクトの読み取り専用の {{domxref('ValidityState.typeMismatch','typeMismatch')}} プロパティが真になります。

+pattern 属性に対応している入力型の中には、特に {{HTMLElement("input/email", "email")}} および {{HTMLElement("input/url", "url")}} 入力型のように、一致しなければならない期待値の構文を持っているものがあります。 pattern 属性が存在せず、値がその値型の期待される構文と一致しない場合、 {{domxref('ValidityState')}} オブジェクトの読み取り専用の {{domxref('ValidityState.typeMismatch','typeMismatch')}} プロパティが真になります。 -

ユーザービリティ

+### ユーザービリティ -

pattern を含める場合は、コントロールの近くの可視テキストでパターンについて説明してください。さらに、パターンを説明する title 属性を含めてください。ユーザーエージェントは、制約検証中に title の内容を使用して、パターンが一致しないことをユーザーに伝えることができます。ブラウザーによっては、タイトルの内容を持つツールチップを表示し、視覚障碍者のユーザーの使い勝手を向上させます。さらに、支援技術は、コントロールにフォーカスを合わせるとタイトルを声に出して読むことができる場合がありますが、アクセシビリティのためにはこれに頼るべきではありません。

+`pattern` を含める場合は、コントロールの近くの可視テキストでパターンについて説明してください。さらに、パターンを説明する [`title`](/ja/docs/Web/HTML/Global_attributes/title) 属性を含めてください。ユーザーエージェントは、制約検証中に title の内容を使用して、パターンが一致しないことをユーザーに伝えることができます。ブラウザーによっては、タイトルの内容を持つツールチップを表示し、視覚障碍者のユーザーの使い勝手を向上させます。さらに、支援技術は、コントロールにフォーカスを合わせるとタイトルを声に出して読むことができる場合がありますが、アクセシビリティのためにはこれに頼るべきではありません。 -

制約検証

+### 制約検証 -

入力欄の値が空文字列ではなく、正規表現全体と一致しない場合は、 {{domxref('ValidityState.patternMismatch','patternMismatch')}} が真になります。
- pattern の正規表現は、値に一致したときに、先頭が文字列の先頭に該当し、末尾が文字列の末尾に該当するため、これは JavaScript の正規表現とは少し異なります。 pattern 属性の場合、パターンの先頭に ^(?: が、末尾に )$ が指定されているかのように、値の部分ではなく全体に一致します。

+入力欄の値が空文字列ではなく、正規表現全体と一致しない場合は、 {{domxref('ValidityState.patternMismatch','patternMismatch')}} が真になります。 +pattern の正規表現は、値に一致したときに、先頭が文字列の先頭に該当し、末尾が文字列の末尾に該当するため、これは JavaScript の正規表現とは少し異なります。 pattern 属性の場合、パターンの先頭に `^(?:` が、末尾に `)$` が指定されているかのように、値の部分ではなく全体に一致します。 -

例

+## 例 -

以下ののものを考えてみてください。

+以下ののものを考えてみてください。 -
-
<p>
- <label>Enter your phone number in the format (123)456-7890
-  (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)-
-   <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> -
-   <input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/>
- </label>
-</p>
+```html +

+ +

+``` -

ここでは北米の電話番号を示す3つの部分があり、電話番号の3つの構成要素すべてを含む暗黙のラベルがありますが、それぞれ3桁、3桁、4桁で pattern 属性によってそれぞれ設定されています。

+ここでは北米の電話番号を示す 3 つの部分があり、電話番号の 3 つの構成要素すべてを含む暗黙のラベルがありますが、それぞれ 3 桁、3 桁、4 桁で [`pattern`](/ja/docs/Web/HTML/Attributes/pattern) 属性によってそれぞれ設定されています。 -

値が長すぎたり短すぎたり、数字ではない文字が含まれていたりすると、 patternMismatch が true になります。 true の場合、要素は CSS の {{cssxref(":invalid")}} 擬似クラスに一致します。

+値が長すぎたり短すぎたり、数字ではない文字が含まれていたりすると、 patternMismatch が true になります。 `true` の場合、要素は CSS の {{cssxref(":invalid")}} 擬似クラスに一致します。 -
input:invalid {
+```css
+input:invalid {
   border: red solid 3px;
-}
+} +``` -

{{EmbedLiveSample("example1", 300, 40)}}

-
+{{EmbedLiveSample("example1", 300, 40)}} -

代わりに minlength と maxlength 属性を用いた場合、 {{domxref('validityState.tooLong')}} または {{domxref('validityState.tooShort')}} が true になります。

+代わりに [`minlength`](/ja/docs/Web/HTML/Attributes/minlength) と [`maxlength`](/ja/docs/Web/HTML/Attributes/maxlength) 属性を用いた場合、 {{domxref('validityState.tooLong')}} または {{domxref('validityState.tooShort')}} が true になります。 -

パターンの指定

+### パターンの指定 -

{{htmlattrxref("pattern", "input")}} 属性を使用すると、入力された値が有効とみなされるために一致しなければならない正規表現を指定することができます (正規表現を使用して入力を検証する簡単な集中講座は、正規表現に対する検証を参照してください)。

+{{htmlattrxref("pattern", "input")}} 属性を使用すると、入力された値が有効とみなされるために一致しなければならない正規表現を指定することができます (正規表現を使用して入力を検証する簡単な集中講座は、[正規表現に対する検証](/ja/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression)を参照してください)。 -

以下の例では、値を 4-8 文字に制限し、小文字のみを含むことを要求しています。

+以下の例では、値を 4-8 文字に制限し、小文字のみを含むことを要求しています。 -
<form>
-  <div>
-    <label for="uname">Choose a username: </label>
-    <input type="text" id="uname" name="name" required size="45"
-           pattern="[a-z]{4,8}" title="4 to 8 lowercase letters">
-    <span class="validity"></span>
-    <p>Usernames must be lowercase and 4-8 characters in length.</p>
-  </div>
-  <div>
-    <button>Submit</button>
-  </div>
-</form>
+```html +
+
+ + + +

Usernames must be lowercase and 4-8 characters in length.

+
+
+ +
+
+``` - - -

This renders like so:

- -

{{ EmbedLiveSample('Specifying_a_pattern', 600, 110) }}

- -

アクセシビリティの考慮

- -

コントロールに pattern 属性がある場合、 title 属性が使われていれば、そのパターンを説明しなければなりません。テキストコンテンツを視覚的な表示するために title 属性に頼ることは、多くのユーザーエージェントがアクセス可能な方法で属性を公開しないので、一般的には推奨されません。ブラウザーによっては、タイトルを持つ要素の上にポインターを置いたときにツールチップを表示しますが、キーボードのみのユーザーやタッチのみのユーザーは除外されてしまいます。これが、どのようにコントロールに記入すれば要件に合うかをユーザーに知らせる情報を含める必要がある理由の一つです。

- -

一部のブラウザーでは title を使用してエラーメッセージを表示していますが、ブラウザーはポインターを置いたときにもタイトルをテキストとして表示することがあり、エラーが発生していない状況でも表示されることがあるので、エラーが発生したかのような言葉を使用しないように注意してください。

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('HTML WHATWG', 'forms.html#attr-input-pattern', 'pattern') }}{{Spec2('HTML WHATWG')}}
{{ SpecName('HTML5.1', 'forms.html#attr-input-pattern', 'pattern') }}{{Spec2('HTML5.1')}}
{{ SpecName('HTML5 W3C', 'forms.html#attr-input-pattern', 'pattern') }}{{Spec2('HTML5 W3C')}}
- -

ブラウザーの互換性

- -

{{Compat("html.elements.attributes.pattern")}}

- -

関連情報

- - +} +``` + +This renders like so: + +{{ EmbedLiveSample('Specifying_a_pattern', 600, 110) }} + +### アクセシビリティの考慮 + +コントロールに `pattern` 属性がある場合、 `title` 属性が使われていれば、そのパターンを説明しなければなりません。テキストコンテンツを視覚的な表示するために `title` 属性に頼ることは、多くのユーザーエージェントがアクセス可能な方法で属性を公開しないので、一般的には推奨されません。ブラウザーによっては、タイトルを持つ要素の上にポインターを置いたときにツールチップを表示しますが、キーボードのみのユーザーやタッチのみのユーザーは除外されてしまいます。これが、どのようにコントロールに記入すれば要件に合うかをユーザーに知らせる情報を含める必要がある理由の一つです。 + +一部のブラウザーでは `title` を使用してエラーメッセージを表示していますが、ブラウザーはポインターを置いたときにもタイトルをテキストとして表示することがあり、エラーが発生していない状況でも表示されることがあるので、エラーが発生したかのような言葉を使用しないように注意してください。 + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | ---- | +| {{ SpecName('HTML WHATWG', 'forms.html#attr-input-pattern', 'pattern') }} | {{Spec2('HTML WHATWG')}} | | +| {{ SpecName('HTML5.1', 'forms.html#attr-input-pattern', 'pattern') }} | {{Spec2('HTML5.1')}} | | +| {{ SpecName('HTML5 W3C', 'forms.html#attr-input-pattern', 'pattern') }} | {{Spec2('HTML5 W3C')}} | | + +## ブラウザーの互換性 + +{{Compat("html.elements.attributes.pattern")}} + +## 関連情報 + +- [Constraint validation](/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation) +- [Forms: Data form validation](/ja/docs/Web/Guide/HTML/Forms/Data_form_validation) +- [Regular Expressions](/ja/docs/Web/JavaScript/Guide/Regular_Expressions) diff --git a/files/ja/web/html/attributes/required/index.md b/files/ja/web/html/attributes/required/index.md index 119e5786a9fa7b..521b4ef722957d 100644 --- a/files/ja/web/html/attributes/required/index.md +++ b/files/ja/web/html/attributes/required/index.md @@ -9,99 +9,75 @@ tags: - required translation_of: Web/HTML/Attributes/required --- -

{{HTMLSidebar}}

+{{HTMLSidebar}} -

論理属性の required 属性は、存在する場合、所有するフォームを送信する前にユーザーが入力に値を指定しなければならないことを示します。 required 属性は {{HTMLElement("input/text","text")}}, {{HTMLElement("input/search","search")}}, {{HTMLElement("input/url","url")}}, {{HTMLElement("input/tel","tel")}}, {{HTMLElement("input/email","email")}}, {{HTMLElement("input/password","password")}}, {{HTMLElement("input/date","date")}}, {{HTMLElement("input/month","month")}}, {{HTMLElement("input/week","week")}}, {{HTMLElement("input/time","time")}}, {{HTMLElement("input/datetime-local","datetime-local")}}, {{HTMLElement("input/number","number")}}, {{HTMLElement("input/checkbox","checkbox")}}, {{HTMLElement("input/radio","radio")}}, {{HTMLElement("input/file","file")}} の {{HTMLElement("input")}} 型と {{HTMLElement("select")}} および {{HTMLElement("textarea")}} のフォームコントロール要素で対応しています。これらの入力型や要素の何れかに設定された場合、 {{cssxref(':required')}} 擬似クラスが一致します。属性が設定されていない場合は {{cssxref(':optional')}} 擬似クラスが一致します。

+論理属性の **`required`** 属性は、存在する場合、所有するフォームを送信する前にユーザーが入力に値を指定しなければならないことを示します。 `required` 属性は `{{HTMLElement("input/text","text")}}`, `{{HTMLElement("input/search","search")}}`, `{{HTMLElement("input/url","url")}}`, `{{HTMLElement("input/tel","tel")}}`, `{{HTMLElement("input/email","email")}}`, `{{HTMLElement("input/password","password")}}`, `{{HTMLElement("input/date","date")}}`, `{{HTMLElement("input/month","month")}}`, `{{HTMLElement("input/week","week")}}`, `{{HTMLElement("input/time","time")}}`, `{{HTMLElement("input/datetime-local","datetime-local")}}`, `{{HTMLElement("input/number","number")}}`, `{{HTMLElement("input/checkbox","checkbox")}}`, `{{HTMLElement("input/radio","radio")}}`, `{{HTMLElement("input/file","file")}}` の {{HTMLElement("input")}} 型と {{HTMLElement("select")}} および {{HTMLElement("textarea")}} のフォームコントロール要素で対応しています。これらの入力型や要素の何れかに設定された場合、 {{cssxref(':required')}} 擬似クラスが一致します。属性が設定されていない場合は {{cssxref(':optional')}} 擬似クラスが一致します。 -

この属性は {{HTMLElement("input/range","range")}} と {{HTMLElement("input/color","color")}} は対応していませんし、どちらも既定値を持っているので関係がありません。 {{HTMLElement("input/hidden","hidden")}} は、非表示のフォームにユーザーが記入することを期待できないため、対応していません。また、 image を含むボタンの種類もいずれも対応していません。

+この属性は {{HTMLElement("input/range","range")}} と {{HTMLElement("input/color","color")}} は対応していませんし、どちらも既定値を持っているので関係がありません。 {{HTMLElement("input/hidden","hidden")}} は、非表示のフォームにユーザーが記入することを期待できないため、対応していません。また、 `image` を含むボタンの種類もいずれも対応していません。 -

なお、 color と range は required に対応していませんが、 color 型は既定値が #000000 であり、 range は、 min と max の中間点が既定値です。 -- 宣言されていない場合、ほとんどのブラウザーでは min と max の既定値はそれぞれ 0 と 100 です。 -- 従って、常に値があります。

+なお、 `color` と `range` は `required` に対応していませんが、 `color` 型は既定値が `#000000` であり、 `range` は、 `min` と `max` の中間点が既定値です。 -- 宣言されていない場合、ほとんどのブラウザーでは `min` と `max` の既定値はそれぞれ 0 と 100 です。 -- 従って、常に値があります。 -

入力欄に required 属性がある場合、 {{cssxref(":required")}} 擬似クラスも適用されます。逆に、 required 属性に対応していて、この属性が設定されていない入力欄は、 {{cssxref(":optional")}} 擬似クラスに一致します。

+入力欄に `required` 属性がある場合、 {{cssxref(":required")}} 擬似クラスも適用されます。逆に、 `required` 属性に対応していて、この属性が設定されていない入力欄は、 {{cssxref(":optional")}} 擬似クラスに一致します。 -

同じ名前が付けられた {{HTMLElement("input/radio","radio")}} ボタンのグループのでは、グループ内の一つのラジオボタンに required 属性が設定されていた場合、この属性が設定されているものでなくても構わないのですが、グループ内のラジオボタンの一つをチェックする必要があります。そのため、コードの保守性を向上させるために、グループ内の同じ名前のラジオボタンすべてに required 属性を設定するか、またはどれにも設定しないようにすることをお勧めします。

+同じ名前が付けられた {{HTMLElement("input/radio","radio")}} ボタンのグループのでは、グループ内の一つのラジオボタンに `required` 属性が設定されていた場合、この属性が設定されているものでなくても構わないのですが、グループ内のラジオボタンの一つをチェックする必要があります。そのため、コードの保守性を向上させるために、グループ内の同じ名前のラジオボタンすべてに `required` 属性を設定するか、またはどれにも設定しないようにすることをお勧めします。 -

同じ名前が付けられた {{HTMLElement("input/checkbox","checkbox")}} 入力型のグループでは、 required 属性がついたチェックボックスのみが必須になります。

+同じ名前が付けられた {{HTMLElement("input/checkbox","checkbox")}} 入力型のグループでは、 `required` 属性がついたチェックボックスのみが必須になります。 -
-

注: aria-required="true" を設定すると、ある要素 (任意の要素) が必須であることを読み上げソフトに伝えますが、その要素が任意であるかどうかには関係ありません。

-
+> **Note:** 注: `aria-required="true"` を設定すると、ある要素 (任意の要素) が必須であることを読み上げソフトに伝えますが、その要素が任意であるかどうかには関係ありません。 -

属性の相互作用

+### 属性の相互作用 -

読み取り専用フィールドは値を持つことができないので、 required は readonly 属性が指定されている入力欄には影響を与えません。

+読み取り専用フィールドは値を持つことができないので、 `required` は [`readonly`](/ja/docs/Web/HTML/Attributes/readonly) 属性が指定されている入力欄には影響を与えません。 -

ユーザビリティ

+### ユーザビリティ -

required属性を設定する、その {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} が必須であることをユーザーに知らせるために、コントロールの近くに目に見える表示を提供してください。さらに、必須フォームコントロールを {{cssxref(':required')}} 擬似クラスでターゲットにし、必須であることを示すようにスタイル付けしてください。これにより、視覚障碍者のユーザーのユーザービリティが向上します。しかし、 aria-required="true" を追加しても、ブラウザーと読み上げソフトの組み合わせがまだ required に対応していない場合には問題ありません。

+`required`属性を設定する、その {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} が必須であることをユーザーに知らせるために、コントロールの近くに目に見える表示を提供してください。さらに、必須フォームコントロールを {{cssxref(':required')}} 擬似クラスでターゲットにし、必須であることを示すようにスタイル付けしてください。これにより、視覚障碍者のユーザーのユーザービリティが向上します。しかし、 `aria-required="true"` を追加しても、ブラウザーと読み上げソフトの組み合わせがまだ `required` に対応していない場合には問題ありません。 -

制約検証

+### 制約検証 -

要素が必須で、かつ要素の値が空文字列の場合、その要素は {{domxref('ValidityState.valueMissing','valueMissing')}} に悩まされ、その要素が {{cssxref(':invalid')}} 擬似クラスに一致してします。

+要素が必須で、かつ要素の値が空文字列の場合、その要素は {{domxref('ValidityState.valueMissing','valueMissing')}} に悩まされ、その要素が {{cssxref(':invalid')}} 擬似クラスに一致してします。 -

アクセシビリティの考慮

+## アクセシビリティの考慮 -

ユーザーにフォームコントロールが必須であることを知らせる表示を提供してください。色盲、認知機能の違い、スクリーンリーダーを使用しているかどうかにかかわらず、すべてのユーザーが要件を理解できるように、メッセージを伝えるものがテキスト、色、マーキング、属性などの多面的なものであることを確認してください。

+ユーザーにフォームコントロールが必須であることを知らせる表示を提供してください。色盲、認知機能の違い、スクリーンリーダーを使用しているかどうかにかかわらず、すべてのユーザーが要件を理解できるように、メッセージを伝えるものがテキスト、色、マーキング、属性などの多面的なものであることを確認してください。 -

例

+## 例 -

HTML

+### HTML -
<form>
-  <div class="group">
-    <input type="text">
-    <label>Normal</label>
-  </div>
-  <div class="group">
-    <input type="text" required="required">
-    <label>Required</label>
-  </div>
-  <input type="submit">
-</form>
-
+```html +
+
+ + +
+
+ + +
+ +
+``` -

結果

+### 結果 -

{{EmbedLiveSample('Examples')}}

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

仕様書

+## 仕様書 - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML WHATWG', 'forms.html#attr-input-required', 'required attribute')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#attr-input-required', 'required attribute')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML5.1', 'sec-forms.html#the-required-attribute', 'required attribute')}}{{Spec2('HTML5.1')}}
+| 仕様書 | 状態 | 備考 | +| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ---- | +| {{SpecName('HTML WHATWG', 'forms.html#attr-input-required', 'required attribute')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'forms.html#attr-input-required', 'required attribute')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML5.1', 'sec-forms.html#the-required-attribute', 'required attribute')}} | {{Spec2('HTML5.1')}} | | -

ブラウザーの互換性

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

{{Compat("html.elements.attributes.required")}}

+{{Compat("html.elements.attributes.required")}} -

関連情報

+## 関連情報 - +- {{cssxref('validityState.valueMissing')}} +- {{cssxref(':required')}} および {{cssxref(':optional')}} +- {{htmlelement('input')}} +- {{htmlelement('select')}} diff --git a/files/ja/web/html/attributes/size/index.md b/files/ja/web/html/attributes/size/index.md index cbe5fd3aa978ef..81809c1a68c6a1 100644 --- a/files/ja/web/html/attributes/size/index.md +++ b/files/ja/web/html/attributes/size/index.md @@ -9,66 +9,52 @@ tags: - Select translation_of: Web/HTML/Attributes/size --- -

{{HTMLSidebar}}

+{{HTMLSidebar}} -

size 属性は、 {{htmlelement('input')}} 要素の幅と {{htmlelement('select')}} 要素の高さを定義します。 input については、 type 属性が {{HTMLElement("input/text", "text")}} または {{HTMLElement("input/password", "password")}} の場合は文字数です。これは 0 以上の整数でなければなりません。 size が指定されていないか、無効な値が指定された場合、入力欄にサイズが宣言されず、そのフォームコントロールはユーザーエージェントに基づいた既定の幅になります。 CSS が幅に影響を与えるプロパティで要素を対象としている場合は、 CSS が優先されます。

+**`size`** 属性は、 {{htmlelement('input')}} 要素の幅と {{htmlelement('select')}} 要素の高さを定義します。 `input` については、 `type` 属性が {{HTMLElement("input/text", "text")}} または {{HTMLElement("input/password", "password")}} の場合は文字数です。これは 0 以上の整数でなければなりません。 `size` が指定されていないか、無効な値が指定された場合、入力欄にサイズが宣言されず、そのフォームコントロールはユーザーエージェントに基づいた既定の幅になります。 CSS が幅に影響を与えるプロパティで要素を対象としている場合は、 CSS が優先されます。 -

size 属性は制約検証には影響しません。

+`size` 属性は制約検証には影響しません。 -

例

+## 例 -

一部の入力型で size を指定すると、入力欄の幅を制御することができます。 select に size を追加すると、閉じた状態のときにいくつの選択肢が見えるかを定義します。

+一部の入力型で `size` を指定すると、入力欄の幅を制御することができます。 select に size を追加すると、閉じた状態のときにいくつの選択肢が見えるかを定義します。 -
<label for="fruit">Enter a fruit</label> <input type="text" size="15" id="fruit">
-<label for="vegetable">Enter a vegetable</label> <input type="text" id="vegetable">
+```html
+ 
+ 
 
-<select name="fruits" size="5">
-  <option>banana</option>
-  <option>cherry</option>
-  <option>strawberry</option>
-  <option>durian</option>
-  <option>blueberry</option>
-</select>
+
 
-<select name="vegetables" size="5">
-<option>carrot</option>
-<option>cucumber</option>
-<option>cauliflower</option>
-<option>celery</option>
-<option>collard greens</option>
-</select>
+ +``` -

{{EmbedLiveSample('Examples', '100%', 200)}}

+{{EmbedLiveSample('Examples', '100%', 200)}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - - - -
仕様書状態
{{SpecName('HTML WHATWG', 'input.html#attr-input-size', 'size attribute')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'input.html#attr-size-accept', 'size attribute')}}{{Spec2('HTML5.1')}}
+| 仕様書 | 状態 | +| ---------------------------------------------------------------------------------------------------- | -------------------------------- | +| {{SpecName('HTML WHATWG', 'input.html#attr-input-size', 'size attribute')}} | {{Spec2('HTML WHATWG')}} | +| {{SpecName('HTML5.1', 'input.html#attr-size-accept', 'size attribute')}} | {{Spec2('HTML5.1')}} | -

ブラウザーの互換性

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

{{Compat("html.elements.attribute.size")}}

+{{Compat("html.elements.attribute.size")}} -

関連情報

+## 関連情報 - +- [`maxlength`](/ja/docs/Web/HTML/Attributes/maxlength) +- [`minlength`](/ja/docs/Web/HTML/Attributes/minlength) +- [`pattern`](/ja/docs/Web/HTML/Attributes/pattern) diff --git a/files/ja/web/html/block-level_elements/index.md b/files/ja/web/html/block-level_elements/index.md index d0f5eb4b2c318b..079dabdeb6f811 100644 --- a/files/ja/web/html/block-level_elements/index.md +++ b/files/ja/web/html/block-level_elements/index.md @@ -10,119 +10,110 @@ tags: - Web translation_of: Web/HTML/Block-level_elements --- -

HTML (Hypertext Markup Language) の要素は従来、 「ブロックレベル」要素または「インライン要素」の何れかに分類されてきました。これは表示特性であることから、現在は CSS においてフローレイアウトの中で定義されています。ブロックレベル要素は親要素 (コンテナー) の水平空間全体と、内容物の高さに等しい垂直空間を占有し、「ブロック」を生成します。この記事では、 HTML のブロックレベル要素とは何か、インラインレベル要素とどのように異なるかを説明します。

- -

ブラウザーは一般的に、前後に新しい行を伴ってブロックレベル要素を表示します。これはボックスを積み上げたように見えます。

- -
-

ブロックレベル要素は常に新しい行から始まり、利用可能な全幅を取ります (できる限り左右に伸びます)。

-
- -

以下の例では、ブロックレベル要素が与える影響を示しています。

- -

ブロックレベル要素

- -

HTML

- -
<p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p>
- -

CSS

- -
p { background-color: #8ABB55; }
-
- -

{{ EmbedLiveSample('Block-level_Example') }}

- -

使用法

- - - -

ブロックレベル要素とインライン要素

- -

ブロックレベル要素とインライン要素の間には、二つの大きな違いがあります。

- -
-
包含モデル
-
一般的に、ブロックレベル要素はインライン要素と他のブロックレベル要素を含むことができます。この固有の構造による区別は、ブロック要素がインライン要素よりも「大きな」構造を構築するという考え方です。
-
既定の整形
-
既定では、ブロックレベル要素は新しい行から始まりますが、インライン要素は行内のどこからでも始めることができます。
-
- -

ブロックレベル要素とインライン要素という区分は、 HTML 4.01 までの仕様書で使用されていました。 HTML5 ではこの二つの区分が、より複雑なコンテンツカテゴリの組み合わせに置き換えられました。「インライン」はおよそ記述コンテンツのカテゴリに対応しているのに対し、「ブロックレベル」カテゴリは HTML5 のコンテンツカテゴリには直接対応しませんが、「ブロックレベル」要素と「インライン」要素の組み合わせは HTML5 のフローコンテンツに対応します。他にも、対話型コンテンツなどの他のカテゴリも存在します。

- -

要素

- -

「ブロックレベル」要素の一覧は以下のとおりです (ただし HTML5 の新規要素は、厳密には「ブロックレベル」であると定義されていません)。

- -
-
-
{{ HTMLElement("address") }}
-
連絡先情報です。
-
{{ HTMLElement("article") }}
-
記事コンテンツです。
-
{{ HTMLElement("aside") }}
-
本論から外れたコンテンツです。
-
{{ HTMLElement("blockquote") }}
-
長い (「ブロック」の) 引用です。
-
{{ HTMLElement("details") }}
-
折りたたみウィジェットです。
-
{{ HTMLElement("dialog") }}
-
ダイアログボックスです。
-
{{ HTMLElement("dd") }}
-
定義リストで用語を説明します。
-
{{ HTMLElement("div") }}
-
文書の一部です。
-
{{ HTMLElement("dl") }}
-
定義リストです。
-
{{ HTMLElement("dt") }}
-
定義語リストの用語です。
-
{{ HTMLElement("fieldset") }}
-
フィールドセットのラベルです。
-
{{ HTMLElement("figcaption") }}
-
図表のキャプションです。
-
{{ HTMLElement("figure") }}
-
キャプション ({{HTMLElement("figcaption")}} を参照) を伴うメディアコンテンツをグループ化します。
-
{{ HTMLElement("footer") }}
-
セクションまたはページのフッターです。
-
{{ HTMLElement("form") }}
-
入力フォームです。
-
{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}
-
見出しレベル 1-6 です。
-
{{ HTMLElement("header") }}
-
セクションまたはページのヘッダーです。
-
{{ HTMLElement("hgroup") }}
-
見出し情報をグループ化します。
-
{{ HTMLElement("hr") }}
-
水平線 (区切り線) です。
-
{{ HTMLElement("li") }}
-
リストの項目です。
-
{{ HTMLElement("main") }}
-
この文書で固有の中心的なコンテンツを含みます。
-
{{ HTMLElement("nav") }}
-
ナビゲーションのリンクを含みます。
-
{{ HTMLElement("ol") }}
-
番号付きリストです。
-
{{ HTMLElement("p") }}
-
段落です。
-
{{ HTMLElement("pre") }}
-
整形済みテキストです。
-
{{ HTMLElement("section") }}
-
ウェブページのセクションです。
-
{{ HTMLElement("table") }}
-
表です。
-
{{ HTMLElement("ul") }}
-
番号なしリストです。
-
-
- -

関連情報

- - - -
{{QuickLinksWithSubpages("/ja/docs/Web/HTML/")}}
+HTML (**Hypertext Markup Language**) の要素は従来、 「ブロックレベル」要素または「インライン要素」の何れかに分類されてきました。これは表示特性であることから、現在は CSS において[フローレイアウト](/ja/docs/Web/CSS/CSS_Flow_Layout)の中で定義されています。ブロックレベル要素は親要素 (コンテナー) の水平空間全体と、内容物の高さに等しい垂直空間を占有し、「ブロック」を生成します。この記事では、 HTML のブロックレベル要素とは何か、[インラインレベル要素](/ja/docs/Web/HTML/Inline-level_elements)とどのように異なるかを説明します。 + +ブラウザーは一般的に、前後に新しい行を伴ってブロックレベル要素を表示します。これはボックスを積み上げたように見えます。 + +> **Note:** ブロックレベル要素は常に新しい行から始まり、利用可能な全幅を取ります (できる限り左右に伸びます)。 + +以下の例では、ブロックレベル要素が与える影響を示しています。 + +## ブロックレベル要素 + +### HTML + +```html +

This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.

+``` + +### CSS + +```css +p { background-color: #8ABB55; } +``` + +{{ EmbedLiveSample('Block-level_Example') }} + +## 使用法 + +- ブロックレベル要素は {{HTMLElement("body")}} 要素内にのみ現れます。 + +## ブロックレベル要素とインライン要素 + +ブロックレベル要素とインライン要素の間には、二つの大きな違いがあります。 + +- 包含モデル + - : 一般的に、ブロックレベル要素はインライン要素と他のブロックレベル要素を含むことができます。この固有の構造による区別は、ブロック要素がインライン要素よりも「大きな」構造を構築するという考え方です。 +- 既定の整形 + - : 既定では、ブロックレベル要素は新しい行から始まりますが、インライン要素は行内のどこからでも始めることができます。 + +ブロックレベル要素とインライン要素という区分は、 HTML 4.01 までの仕様書で使用されていました。 HTML5 ではこの二つの区分が、より複雑な[コンテンツカテゴリ](/ja/docs/Web/HTML/Content_categories)の組み合わせに置き換えられました。「インライン」はおよそ[記述コンテンツ](/ja/docs/Web/HTML/Content_categories#記述コンテンツ)のカテゴリに対応しているのに対し、「ブロックレベル」カテゴリは HTML5 のコンテンツカテゴリには直接対応しませんが、*「ブロックレベル」要素と「インライン」要素の組み合わせ*は HTML5 の[フローコンテンツ](/ja/docs/Web/HTML/Content_categories#フローコンテンツ)に対応します。他にも、[対話型コンテンツ](/ja/docs/Web/Guide/HTML/Content_categories#対話型コンテンツ)などの他のカテゴリも存在します。 + +## 要素 + +「ブロックレベル」要素の一覧は以下のとおりです (ただし HTML5 の新規要素は、厳密には「ブロックレベル」であると定義されていません)。 + +- {{ HTMLElement("address") }} + - : 連絡先情報です。 +- {{ HTMLElement("article") }} + - : 記事コンテンツです。 +- {{ HTMLElement("aside") }} + - : 本論から外れたコンテンツです。 +- {{ HTMLElement("blockquote") }} + - : 長い (「ブロック」の) 引用です。 +- {{ HTMLElement("details") }} + - : 折りたたみウィジェットです。 +- {{ HTMLElement("dialog") }} + - : ダイアログボックスです。 +- {{ HTMLElement("dd") }} + - : 定義リストで用語を説明します。 +- {{ HTMLElement("div") }} + - : 文書の一部です。 +- {{ HTMLElement("dl") }} + - : 定義リストです。 +- {{ HTMLElement("dt") }} + - : 定義語リストの用語です。 +- {{ HTMLElement("fieldset") }} + - : フィールドセットのラベルです。 +- {{ HTMLElement("figcaption") }} + - : 図表のキャプションです。 +- {{ HTMLElement("figure") }} + - : キャプション ({{HTMLElement("figcaption")}} を参照) を伴うメディアコンテンツをグループ化します。 +- {{ HTMLElement("footer") }} + - : セクションまたはページのフッターです。 +- {{ HTMLElement("form") }} + - : 入力フォームです。 +- {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }} + - : 見出しレベル 1-6 です。 +- {{ HTMLElement("header") }} + - : セクションまたはページのヘッダーです。 +- {{ HTMLElement("hgroup") }} + - : 見出し情報をグループ化します。 +- {{ HTMLElement("hr") }} + - : 水平線 (区切り線) です。 +- {{ HTMLElement("li") }} + - : リストの項目です。 +- {{ HTMLElement("main") }} + - : この文書で固有の中心的なコンテンツを含みます。 +- {{ HTMLElement("nav") }} + - : ナビゲーションのリンクを含みます。 +- {{ HTMLElement("ol") }} + - : 番号付きリストです。 +- {{ HTMLElement("p") }} + - : 段落です。 +- {{ HTMLElement("pre") }} + - : 整形済みテキストです。 +- {{ HTMLElement("section") }} + - : ウェブページのセクションです。 +- {{ HTMLElement("table") }} + - : 表です。 +- {{ HTMLElement("ul") }} + - : 番号なしリストです。 + +## 関連情報 + +- [インライン要素](/ja/docs/Web/HTML/Inline_elements) +- {{cssxref("display")}} +- [通常フローでのブロックおよびインラインレイアウト](/ja/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow) + +{{QuickLinksWithSubpages("/ja/docs/Web/HTML/")}} diff --git a/files/ja/web/html/cors_enabled_image/index.md b/files/ja/web/html/cors_enabled_image/index.md index 206ac5c6852991..4be56412f367c0 100644 --- a/files/ja/web/html/cors_enabled_image/index.md +++ b/files/ja/web/html/cors_enabled_image/index.md @@ -11,79 +11,82 @@ tags: - 上級者 translation_of: Web/HTML/CORS_enabled_image --- -

HTML では画像に {{ htmlattrxref("crossorigin", "img") }} 属性を提供し、適切な {{Glossary("CORS")}} ヘッダーと組み合わせることで、 {{ HTMLElement("img") }} 要素で定義されている他のオリジンから読み込まれた画像を、 {{HTMLElement("canvas")}} の中で現在のオリジンから読み込まれた画像であるかのように扱うことができます。

+HTML では画像に {{ htmlattrxref("crossorigin", "img") }} 属性を提供し、適切な {{Glossary("CORS")}} ヘッダーと組み合わせることで、 {{ HTMLElement("img") }} 要素で定義されている他のオリジンから読み込まれた画像を、 {{HTMLElement("canvas")}} の中で現在のオリジンから読み込まれた画像であるかのように扱うことができます。 -

crossorigin 属性の使い方については CORS 設定属性をご覧ください。

+`crossorigin` 属性の使い方については [CORS 設定属性](/ja/docs/Web/HTML/CORS_settings_attributes)をご覧ください。 -

セキュリティと汚染されたキャンバス

+## セキュリティと汚染されたキャンバス -

キャンバスのビットマップ内のピクセルは様々なソース、例えば他のホストから受け取った画像や動画などから来ることもありますが、セキュリティの問題が発生することが避けられません。

+キャンバスのビットマップ内のピクセルは様々なソース、例えば他のホストから受け取った画像や動画などから来ることもありますが、セキュリティの問題が発生することが避けられません。 -

CORS による許可なしに他のオリジンから読み込んだ何らかのデータをキャンバスに描画すると、キャンバスは汚染 (taint) されてしまいます。汚染されたキャンバスは安全とみなされなくなり、そのキャンバスから画像データを取得しようとすると、例外が発生するでしょう。

+CORS による許可なしに他のオリジンから読み込んだ何らかのデータをキャンバスに描画すると、キャンバスは**汚染** (taint) されてしまいます。汚染されたキャンバスは安全とみなされなくなり、そのキャンバスから画像データを取得しようとすると、例外が発生するでしょう。 -

外部コンテンツの元が HTML の {{HTMLElement("img")}} または SVG の {{SVGElement("svg")}} 要素であった場合、キャンバスの内容を取得しようとすることは許可されていません。

+外部コンテンツの元が HTML の {{HTMLElement("img")}} または SVG の {{SVGElement("svg")}} 要素であった場合、キャンバスの内容を取得しようとすることは許可されていません。 -

{{domxref("HTMLCanvasElement")}} または {{domxref("ImageBitMap")}} のどちらかとして取得した、元が同一オリジン規則に合わない画像から取得した外部のコンテンツは、キャンバスの内容を読み取ろうとするとブロックされます。

+{{domxref("HTMLCanvasElement")}} または {{domxref("ImageBitMap")}} のどちらかとして取得した、元が同一オリジン規則に合わない画像から取得した外部のコンテンツは、キャンバスの内容を読み取ろうとするとブロックされます。 -

汚染されたキャンバスで以下の呼び出しを行うと、エラーが発生します。

+汚染されたキャンバスで以下の呼び出しを行うと、エラーが発生します。 - +- キャンバスのコンテキストに対する {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} の呼び出し +- {{HTMLElement("canvas")}} 要素自身に対する {{domxref("HTMLCanvasElement.toBlob", "toBlob()")}} の呼び出し +- キャンバスに対する {{domxref("HTMLCanvasElement.toDataURL", "toDataURL()")}} の呼び出し -

キャンバスが汚染されていた場合にこれらの何れかを行うと、 SecurityError が発生します。これによって、外部のウェブサイトが許可なしに情報を引き出すために、画像を使用して個人的なデータを暴露することからユーザーを守ります。

+キャンバスが汚染されていた場合にこれらの何れかを行うと、 `SecurityError` が発生します。これによって、外部のウェブサイトが許可なしに情報を引き出すために、画像を使用して個人的なデータを暴露することからユーザーを守ります。 -

異なるオリジンからの画像の保存

+## 異なるオリジンからの画像の保存 -

この例では、外部のオリジンから画像を受け取り、ローカルストレージに保存することを許可します。これを実装するには、コードを書くだけでなくそのウェブサイトのサーバーを構成する必要があります。

+この例では、外部のオリジンから画像を受け取り、ローカルストレージに保存することを許可します。これを実装するには、コードを書くだけでなくそのウェブサイトのサーバーを構成する必要があります。 -

ウェブサーバーの構成

+### ウェブサーバーの構成 -

最初に必要なものは、画像をホスティングし、画像ファイルに対するオリジン間のアクセスを許可するために、 {{HTTPHeader("Access-Control-Allow-Origin")}} ヘッダーが構成されたサーバーが必要です。

+最初に必要なものは、画像をホスティングし、画像ファイルに対するオリジン間のアクセスを許可するために、 {{HTTPHeader("Access-Control-Allow-Origin")}} ヘッダーが構成されたサーバーが必要です。 -

Apache を使用してサイトを提供してみましょう。 HTML5 Boilerplate の CORS 画像のための Apache サーバー構成ファイルを考えてみましょう。

+[Apache](https://httpd.apache.org/) を使用してサイトを提供してみましょう。 HTML5 Boilerplate の [CORS 画像のための Apache サーバー構成ファイル](https://github.com/h5bp/server-configs-apache/blob/master/h5bp/cross-origin/images.conf)を考えてみましょう。 -
<IfModule mod_setenvif.c>
-  <IfModule mod_headers.c>
-    <FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp)$">
+```xml
+
+  
+    
       SetEnvIf Origin ":" IS_CORS
       Header set Access-Control-Allow-Origin "*" env=IS_CORS
-    </FilesMatch>
-  </IfModule>
-</IfModule>
+ + + +``` -

つまり、この構成はサーバーにグラフィックのファイル (拡張子が ".bmp", ".cur", ".gif", ".ico", ".jpg", ".jpeg", ".png", ".svg", ".svgz", ".webp" であるもの) を、インターネットのどこからでもオリジン間のアクセスができるようにします。

+つまり、この構成はサーバーにグラフィックのファイル (拡張子が ".bmp", ".cur", ".gif", ".ico", ".jpg", ".jpeg", ".png", ".svg", ".svgz", ".webp" であるもの) を、インターネットのどこからでもオリジン間のアクセスができるようにします。 -

保存機能の実装

+### 保存機能の実装 -

サーバーをオリジン間の画像の取得ができるように構成したので、画像がコードを実行しているところと同じドメインから提供されたものであるかのように、ユーザーが画像をローカルストレージに保存することができるようにするコードを書くことができます。

+サーバーをオリジン間の画像の取得ができるように構成したので、画像がコードを実行しているところと同じドメインから提供されたものであるかのように、ユーザーが画像を[ローカルストレージ](/ja/docs/Web/API/Web_Storage_API)に保存することができるようにするコードを書くことができます。 -

鍵となるのは、 {{domxref("HTMLImageElement.crossOrigin", "crossOrigin")}} を画像が読み込まれる {{domxref("HTMLImageElement")}} に設定することで、 {{htmlattrxref("crossorigin")}} 属性を使用することです。これでブラウザーに画像データをダウンロードしようとするときにオリジン間のリクエストを命じます。

+鍵となるのは、 {{domxref("HTMLImageElement.crossOrigin", "crossOrigin")}} を画像が読み込まれる {{domxref("HTMLImageElement")}} に設定することで、 {{htmlattrxref("crossorigin")}} 属性を使用することです。これでブラウザーに画像データをダウンロードしようとするときにオリジン間のリクエストを命じます。 -

ダウンロードの開始

+#### ダウンロードの開始 -

ダウンロードを始める (つまり、ユーザーが「ダウンロード」ボタンをクリックした時の) コードは次にようになります。

+ダウンロードを始める (つまり、ユーザーが「ダウンロード」ボタンをクリックした時の) コードは次にようになります。 -
function startDownload() {
+```js
+function startDownload() {
   let imageURL = "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn_logo-only_color.svg?1535749917189";
 
   downloadedImg = new Image;
   downloadedImg.crossOrigin = "Anonymous";
   downloadedImg.addEventListener("load", imageReceived, false);
   downloadedImg.src = imageURL;
-}
+} +``` -

ここではハードコーディングされた URL (imageURL) を使用していますが、どこからでも持ってくるのは簡単でしょう。画像のダウンロードを始めるために、 {{domxref("HTMLImageElement.Image", "Image()")}} コンストラクターを使用することで新しい {{domxref("HTMLImageElement")}} を生成します。それから画像は crossOrigin 属性を "Anonymous" (つまり、認証のないオリジン間の画像のダウンロード) に設定することで、オリジン間のダウンロードができるように構成します。 image 要素で {{event("load")}} イベントが発火した場合、つまり画像データが受信された場合のイベントリスナーを追加します。

+ここではハードコーディングされた URL (`imageURL`) を使用していますが、どこからでも持ってくるのは簡単でしょう。画像のダウンロードを始めるために、 {{domxref("HTMLImageElement.Image", "Image()")}} コンストラクターを使用することで新しい {{domxref("HTMLImageElement")}} を生成します。それから画像は `crossOrigin` 属性を `"Anonymous"` (つまり、認証のないオリジン間の画像のダウンロード) に設定することで、オリジン間のダウンロードができるように構成します。 image 要素で {{event("load")}} イベントが発火した場合、つまり画像データが受信された場合のイベントリスナーを追加します。 -

最後に、画像の {{domxref("HTMLImageElement.src", "src")}} 属性をダウンロードする画像に設定します。これがダウンロードを始める引き金になります。

+最後に、画像の {{domxref("HTMLImageElement.src", "src")}} 属性をダウンロードする画像に設定します。これがダウンロードを始める引き金になります。 -

画像の受信と保存

+#### 画像の受信と保存 -

新規の画像のダウンロードを扱うコードは、 imageReceived() メソッドに見られます。

+新規の画像のダウンロードを扱うコードは、 `imageReceived()` メソッドに見られます。 -
function imageReceived() {
+```js
+function imageReceived() {
   let canvas = document.createElement("canvas");
   let context = canvas.getContext("2d");
 
@@ -99,22 +102,21 @@ translation_of: Web/HTML/CORS_enabled_image
   catch(err) {
     console.log("Error: " + err);
   }
-}
+} +``` -

imageReceived() は HTMLImageElement 上でダウンロードした画像を受け取ったことを表す "load" イベントを扱うために呼び出されます。このイベントは、ダウンロードしたデータがすべて利用可能になったら一度呼び出されます。新しい {{HTMLElement("canvas")}} 要素を作成することから始まり、画像をデータ URL に変換して、キャンバスの二次元描画コンテキスト ({{domxref("CanvasRenderingContext2D")}}) がある変数 context へのアクセスを取得します。

+`imageReceived()` は `HTMLImageElement` 上でダウンロードした画像を受け取ったことを表す `"load"` イベントを扱うために呼び出されます。このイベントは、ダウンロードしたデータがすべて利用可能になったら一度呼び出されます。新しい {{HTMLElement("canvas")}} 要素を作成することから始まり、画像をデータ URL に変換して、キャンバスの二次元描画コンテキスト ({{domxref("CanvasRenderingContext2D")}}) がある変数 `context` へのアクセスを取得します。 -

キャンバスの寸法は受信した画像に合うよう調整され、それから {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} を使って画像をキャンバスに描画します。それからキャンバスが文書に挿入され、画像が見えるようになります。

+キャンバスの寸法は受信した画像に合うよう調整され、それから {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} を使って画像をキャンバスに描画します。それからキャンバスが文書に挿入され、画像が見えるようになります。 -

実際に画像をローカルに保存する時になりました。このためにはウェブストレージ API のローカルストレージの仕組みを使用し、 {{domxref("Window.localStorage", "localStorage")}} グローバル変数を通してアクセスします。キャンバスのメソッド {{domxref("HTMLCanvasElement.toDataURL", "toDataURL()")}} を使用して画像を data:// URL が表す PNG 画像に変換し、それから {{domxref("Storage.setItem", "setItem()")}} を用いてローカルストレージに保存します。

+実際に画像をローカルに保存する時になりました。このためにはウェブストレージ API のローカルストレージの仕組みを使用し、 {{domxref("Window.localStorage", "localStorage")}} グローバル変数を通してアクセスします。キャンバスのメソッド {{domxref("HTMLCanvasElement.toDataURL", "toDataURL()")}} を使用して画像を data:// URL が表す PNG 画像に変換し、それから {{domxref("Storage.setItem", "setItem()")}} を用いてローカルストレージに保存します。 -

この例は Glitch で試用またはリミックスすることができます。

+この例は Glitch で[試用](https://cors-image-example.glitch.me/)または[リミックス](https://glitch.com/edit/#!/remix/cors-image-example)することができます。 -

関連情報

+## 関連情報 - +- [Using Cross-domain images in WebGL and Chrome 13](http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html) +- [HTML Specification - the `crossorigin` attribute](http://whatwg.org/html#attr-img-crossorigin) +- [Web Storage API](/ja/docs/Web/API/Web_Storage_API) -
{{QuickLinksWithSubpages("/ja/docs/Web/HTML/")}}
+{{QuickLinksWithSubpages("/ja/docs/Web/HTML/")}} diff --git a/files/ja/web/html/date_and_time_formats/index.md b/files/ja/web/html/date_and_time_formats/index.md index 398f4f2bca469b..722791598e2e86 100644 --- a/files/ja/web/html/date_and_time_formats/index.md +++ b/files/ja/web/html/date_and_time_formats/index.md @@ -24,443 +24,278 @@ tags: - 週 translation_of: Web/HTML/Date_and_time_formats --- -
{{HTMLRef}}
+{{HTMLRef}} -

一部の HTML 要素は日付や時刻の値を使用します。この記事ではこれらの値を指定する文字列の形式について説明しています。このような形式を使用する要素には、ユーザーに日付、時刻、またはその両方を選択または指定させる {{HTMLElement("input")}} 要素の一部の形、同様に {{HTMLElement("ins")}} および {{HTMLElement("del")}} 要素で、 {{htmlattrxref("datetime", "ins")}} 属性によって内容の挿入または削除が行われた日付や日時を指定しているものなどがあります。

+一部の HTML 要素は日付や時刻の値を使用します。この記事ではこれらの値を指定する文字列の形式について説明しています。このような形式を使用する要素には、ユーザーに日付、時刻、またはその両方を選択または指定させる {{HTMLElement("input")}} 要素の一部の形、同様に {{HTMLElement("ins")}} および {{HTMLElement("del")}} 要素で、 {{htmlattrxref("datetime", "ins")}} 属性によって内容の挿入または削除が行われた日付や日時を指定しているものなどがあります。 -

<input> については、 {{htmlattrxref("type", "input")}} の値で日付や時刻を表す文字列を含む {{htmlattrxref("value")}} を返すものは次の通りです。

+`` については、 {{htmlattrxref("type", "input")}} の値で日付や時刻を表す文字列を含む {{htmlattrxref("value")}} を返すものは次の通りです。 -
- -
+- [`date`](/ja/docs/Web/HTML/Element/input/date) +- [`datetime`](/ja/docs/Web/HTML/Element/input/datetime) {{deprecated_inline}} +- [`datetime-local`](/ja/docs/Web/HTML/Element/input/datetime-local) +- [`month`](/ja/docs/Web/HTML/Element/input/month) +- [`time`](/ja/docs/Web/HTML/Element/input/time) +- [`week`](/ja/docs/Web/HTML/Element/input/week) -

例

+## 例 -

日付と時刻の文字列が HTML でどのように記述され解析されるかの複雑さを理解する前に、より一般的に使用される日付と時刻の文字列形式がどのように見えるかを理解するための例をいくつか示します。

+日付と時刻の文字列が HTML でどのように記述され解析されるかの複雑さを理解する前に、より一般的に使用される日付と時刻の文字列形式がどのように見えるかを理解するための例をいくつか示します。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
HTML の日付と時刻の文字列の例
文字列日付または時刻
2005-06-072005年6月7日[詳細]
08:45午前8時45分[詳細]
08:45:25午前8時45分25秒[詳細]
0033-08-04T03:4033年8月4日午前3時40分[詳細]
1977-04-01T14:00:301977年4月1日午後2時30秒[詳細]
1901-01-01T00:00ZUTC での1901年1月1日の夜半[詳細]
1901-01-01T00:00:01-04:00米東部標準時の1901年1月1日の夜半から1秒後[詳細]
 + HTML の日付と時刻の文字列の例 +
文字列日付または時刻
2005-06-072005年6月7日 + [詳細] +
08:45午前8時45分 + [詳細] +
08:45:25午前8時45分25秒 + [詳細] +
0033-08-04T03:4033年8月4日午前3時40分 + [詳細] +
1977-04-01T14:00:301977年4月1日午後2時30秒 + [詳細] +
1901-01-01T00:00ZUTC での1901年1月1日の夜半 + [詳細] +
1901-01-01T00:00:01-04:00米東部標準時の1901年1月1日の夜半から1秒後 + [詳細] +
-

基本

+## 基本 -

HTML 要素で使用される文字列に関する日付や時刻のさまざまな形式を見てみる前に、これらの定義方法についての基本的な事実をいくつか理解してしておくと役に立ちます。 HTML では、日付や時刻の文字列に {{interwiki("wikipedia", "ISO 8601")}} 標準の一種を使用します。 HTML 仕様書には、実際に ISO 8601 よりも詳細に文字列を解析するアルゴリズムが含まれており、日付と時刻の外見について微妙な違いがある可能性があるので、文字列が実際に HTML と互換性があることを確認するためには、使用している形式の説明を確認する価値があります。

+HTML 要素で使用される文字列に関する日付や時刻のさまざまな形式を見てみる前に、これらの定義方法についての基本的な事実をいくつか理解してしておくと役に立ちます。 HTML では、日付や時刻の文字列に {{interwiki("wikipedia", "ISO 8601")}} 標準の一種を使用します。 HTML 仕様書には、実際に ISO 8601 よりも詳細に文字列を解析するアルゴリズムが含まれており、日付と時刻の外見について微妙な違いがある可能性があるので、文字列が実際に HTML と互換性があることを確認するためには、使用している形式の説明を確認する価値があります。 -

文字セット

+### 文字セット -

HTML において、日付と時刻は常に {{interwiki("wikipedia", "ASCII")}} 文字セットを使用した文字列です。

+HTML において、日付と時刻は常に {{interwiki("wikipedia", "ASCII")}} 文字セットを使用した文字列です。 -

年

+### 年 -

HTML で日付の文字列に使われる基本的な形式を単純化するために、仕様書ではすべての年をグレゴリオ暦 (または先発グレゴリオ暦) を使用して指定することを要求しています。ユーザーインターフェイスは他のカレンダーを使用した日付を入力することもできますが、元となる値は常にグレゴリオ暦を使用します。

+HTML で日付の文字列に使われる基本的な形式を単純化するために、仕様書ではすべての年をグレゴリオ暦 (または**先発グレゴリオ暦**) を使用して指定することを要求しています。ユーザーインターフェイスは他のカレンダーを使用した日付を入力することもできますが、元となる値は常にグレゴリオ暦を使用します。 -

グレゴリオ暦は (同様のユリウス暦を置き換えた) 1582年まで作成されていませんでしたが、 HTML の目的上、グレゴリオ暦は紀元1年まで延長されています。古い日付については、それを考慮してください。

+グレゴリオ暦は (同様のユリウス暦を置き換えた) 1582 年まで作成されていませんでしたが、 HTML の目的上、グレゴリオ暦は紀元 1 年まで延長されています。古い日付については、それを考慮してください。 -

HTML の日付の目的上、年は常に4桁以上の長さになります。1000年より前の年は、先頭にゼロ ("0") を入れますので、72年は 0072 と書かれます。紀元1年以前の年には対応していないので、 HTML は紀元前1年以前の年に対応していません。

+HTML の日付の目的上、年は常に 4 桁以上の長さになります。1000 年より前の年は、先頭にゼロ ("`0`") を入れますので、72 年は `0072` と書かれます。紀元 1 年以前の年には対応していないので、 HTML は紀元前 1 年以前の年に対応していません。 -

1年はふつうは365日ですが、閏年は例外です。

+1 年はふつうは 365 日ですが、**[閏年](#leap_years)**は例外です。 -

閏年

+#### 閏年 -

閏年は400で割れる年、または4で割れる年で100で割れない年です。暦年の長さは通常365日ですが、実際には地球が太陽の周りを一周するのにおよそ365.2422日かかります。閏年は、惑星の軌道上の実際の位置に合わせてカレンダーを調整するのに役立ちます。4年ごとに1日を加えると、平均的な1年の長さは365.25日になり、これはほぼ正確に近くなります。

+**閏年**は 400 で割れる年、\_または\_4 で割れる年で 100 で割れない年です。暦年の長さは通常 365 日ですが、実際には地球が太陽の周りを一周するのにおよそ 365.2422 日かかります。閏年は、惑星の軌道上の実際の位置に合わせてカレンダーを調整するのに役立ちます。4 年ごとに 1 日を加えると、平均的な 1 年の長さは 365.25 日になり、これはほぼ正確に近くなります。 -

アルゴリズムの調整 (年を400で割ることができる場合は閏年とし、年を100で割ることができる場合はうるう年としない) は、平均をさらに正しい日数 (365.2425日) に近づけるのに役立ちます。科学者たちは、残りの1万分の3日を処理し、地球の自転が自然に徐々に遅くなるのを補うために、閏秒をカレンダーに追加することがあります (真面目な話)。

+アルゴリズムの調整 (年を 400 で割ることができる場合は閏年とし、年を 100 で割ることができる場合はうるう年としない) は、平均をさらに正しい日数 (365.2425 日) に近づけるのに役立ちます。科学者たちは、残りの 1 万分の 3 日を処理し、地球の自転が自然に徐々に遅くなるのを補うために、閏秒をカレンダーに追加することがあります (真面目な話)。 -

02 の月、すなわち2月は通常28日ですが、閏年には29日になります。

+`02` の月、すなわち 2 月は通常 28 日ですが、閏年には 29 日になります。 -

月

+### 月 -

1年には12ヶ月があり、1から12まで番号が振られています。これらは常に2桁の ASCII 文字列、 01 から 12 の範囲で表現されます。日の節にある表で、対応する名前を (と日数) を確認してください。

+1 年には 12 ヶ月があり、1 から 12 まで番号が振られています。これらは常に 2 桁の ASCII 文字列、 `01` から `12` の範囲で表現されます。[日](#days_of_the_month)の節にある表で、対応する名前を (と日数) を確認してください。 -

日

+### 日 -

1, 3, 5, 7, 8, 10, 12月は31日あります。 4, 6, 9, 11月は30日あります。 2月は多くの年では28日ですが、閏年には29日になります。これは下記の表で詳しく説明しています。

+1, 3, 5, 7, 8, 10, 12 月は 31 日あります。 4, 6, 9, 11 月は 30 日あります。 2 月は多くの年では 28 日ですが、閏年には 29 日になります。これは下記の表で詳しく説明しています。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
月とその日数
月の番号名前 (英語)日数
01January31
02February28 (閏年では29)
03March31
04April30
05May31
06June30
07July31
o8August31
09September30
10October31
11November30
12December31
+| 月の番号 | 名前 (英語) | 日数 | +| -------- | ----------- | ---------------- | +| 01 | January | 31 | +| 02 | February | 28 (閏年では 29) | +| 03 | March | 31 | +| 04 | April | 30 | +| 05 | May | 31 | +| 06 | June | 30 | +| 07 | July | 31 | +| o8 | August | 31 | +| 09 | September | 30 | +| 10 | October | 31 | +| 11 | November | 30 | +| 12 | December | 31 | -

週の文字列

+## 週の文字列 -

A week string specifies a week within a particular year. A valid week string consists of a valid year number, followed by a hyphen character ("-", or U+002D), then the capital letter "W" (U+0057), followed by a two-digit week of the year value.

+A week string specifies a week within a particular year. A **valid week string** consists of a valid [year number](#year_numbers), followed by a hyphen character ("`-`", or U+002D), then the capital letter "`W`" (U+0057), followed by a two-digit week of the year value. -

The week of the year is a two-digit string between 01 and 53. Each week begins on Monday and ends on Sunday. That means it's possible for the first few days of January to be considered part of the previous week-year, and for the last few days of December to be considered part of the following week-year. The first week of the year is the week that conains the first Thursday of the year. For example, the first Thursday of 1953 was on January 1, so that week—beginning on Monday, December 29—is considered the first week of the year. Therefore, December 30, 1952 occurs during the week 1953-W01.

+The week of the year is a two-digit string between `01` and `53`. Each week begins on Monday and ends on Sunday. That means it's possible for the first few days of January to be considered part of the previous week-year, and for the last few days of December to be considered part of the following week-year. The first week of the year is the week that conains the _first Thursday of the year_. For example, the first Thursday of 1953 was on January 1, so that week—beginning on Monday, December 29—is considered the first week of the year. Therefore, December 30, 1952 occurs during the week `1953-W01`. -

A year has 53 weeks if:

+A year has 53 weeks if: - +- The first day of the calendar year (January 1) is a Thursday **or** +- The first day of the year (January 1) is a Wednesday and the year is a [leap year](#leap_years) -

All other years have 52 weeks.

+All other years have 52 weeks. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Examples of valid week strings
Week stringWeek and year (Date range)
2001-W37Week 37, 2001 (September 10-16, 2001)
1953-W01Week 1, 1953 (December 29, 1952-January 4, 1953)
1948-W53Week 53, 1948 (December 27, 1948-January 2, 1949)
1949-W01Week 1, 1949 (January 3-9, 1949)
0531-W16Week 16, 531 (April 13-19, 531)
0042-W04Week 4, 42 (January 21-27, 42)
+| Week string | Week and year (Date range) | +| ----------- | ------------------------------------------------- | +| `2001-W37` | Week 37, 2001 (September 10-16, 2001) | +| `1953-W01` | Week 1, 1953 (December 29, 1952-January 4, 1953) | +| `1948-W53` | Week 53, 1948 (December 27, 1948-January 2, 1949) | +| `1949-W01` | Week 1, 1949 (January 3-9, 1949) | +| `0531-W16` | Week 16, 531 (April 13-19, 531) | +| `0042-W04` | Week 4, 42 (January 21-27, 42) | -

Note that both the year and week numbers are padded with leading zeroes, with the year padded to four digits and the week to two.

+Note that both the year and week numbers are padded with leading zeroes, with the year padded to four digits and the week to two. -

月の文字列

+## 月の文字列 -

A month string represents a specific month in time, rather than a genetic month of the year. That is, rather than representing simply "January," an HTML month string represents a month and year paired, like "January 1972."

+A month string represents a specific month in time, rather than a genetic month of the year. That is, rather than representing simply "January," an HTML month string represents a month and year paired, like "January 1972." -

A valid month string consists of a valid year number (a string of at least four digits), followed by a hyphen character ("-", or U+002D), followed by a two-digit numeric month number, where 01 represents January and 12 represents December.

+A **valid month string** consists of a valid [year number](#year_numbers) (a string of at least four digits), followed by a hyphen character ("`-`", or U+002D), followed by a two-digit numeric [month number](#months_of_the_year), where `01` represents January and `12` represents December. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
有効な月の文字列の例
月の文字列年月
17310-09September, 17310
2019-01January, 2019
1993-11November, 1993
0571-04April, 571
0001-07July, 1 C.E.
+| 月の文字列 | 年月 | +| ---------- | ---------------- | +| `17310-09` | September, 17310 | +| `2019-01` | January, 2019 | +| `1993-11` | November, 1993 | +| `0571-04` | April, 571 | +| `0001-07` | July, 1 C.E. | -

Notice that all years are at least four characters long; years that are fewer than four digits long are padded with leading zeroes.

+Notice that all years are at least four characters long; years that are fewer than four digits long are padded with leading zeroes. -

日の文字列

+## 日の文字列 -

A valid date string consists of a month string, followed by a hyphen character ("-", or U+002D), followed by a two-digit day of the month.

+A valid date string consists of a [month string](#month_strings), followed by a hyphen character ("`-`", or U+002D), followed by a two-digit [day of the month](#days_of_the_month). - - - - - - - - - - - - - - - - - - - - - - - - - - -
妥当な日の文字列の例
月の文字列日付全体
1993-11-01November 1, 1993
1066-10-14October 14, 1066
0571-04-22April 22, 571
0062-02-05February 5, 62
+| 月の文字列 | 日付全体 | +| ------------ | ---------------- | +| `1993-11-01` | November 1, 1993 | +| `1066-10-14` | October 14, 1066 | +| `0571-04-22` | April 22, 571 | +| `0062-02-05` | February 5, 62 | -

時刻の文字列

+## 時刻の文字列 -

A time string can specify a time with precision to the minute, second, or to the millisecond. Specifying only the hour or minute isn't permitted. A valid time string minimally consists of a two-digit hour followed by a colon (":", U+003A), then a two-digit minute. The minute may optionally be followed by another colon and a two-digit number of seconds. Milliseconds may be specified, optionally, by adding a decimal point character (".", U+002E) followed by one, two, or three digits.

+A time string can specify a time with precision to the minute, second, or to the millisecond. Specifying only the hour or minute isn't permitted. A **valid time string** minimally consists of a two-digit hour followed by a colon ("`:`", U+003A), then a two-digit minute. The minute may optionally be followed by another colon and a two-digit number of seconds. Milliseconds may be specified, optionally, by adding a decimal point character ("`.`", U+002E) followed by one, two, or three digits. -

There are some additional basic rules:

+There are some additional basic rules: - +- The hour is always specified using the 24-hour clock, with `00` being midnight and 11 PM being `23`. No values outside the range `00`–`23` are permitted. +- The minute must be a two-digit number between `00` and `59`. No values outside that range are allowed. +- If the number of seconds is omitted (to specify a time accurate only to the minute), no colon should follow the number of minutes. +- If specified, the integer portion of the number of seconds must be between `00` and `59`. You _cannot_ specify leap seconds by using values like `60` or `61`. +- If the number of seconds is specified and is an integer, it must not be followed by a decimal point. +- If a fraction of a second is included, it may be from one to three digits long, indicating the number of milliseconds. It follows the decimal point placed after the seconds component of the time string. - - - - - - - - - - - - - - - - - - - - - - -
妥当な時刻の文字列の例
時刻の文字列時刻
00:00:30.7512:00:30.75 AM (30.75 seconds after midnight)
12:1512:15 PM
13:44:251:44:25 PM (25 seconds after 1:44 PM)
+| 時刻の文字列 | 時刻 | +| ------------- | --------------------------------------------- | +| `00:00:30.75` | 12:00:30.75 AM (30.75 seconds after midnight) | +| `12:15` | 12:15 PM | +| `13:44:25` | 1:44:25 PM (25 seconds after 1:44 PM) | -

ローカル日時の文字列

+## ローカル日時の文字列 -

A valid datetime-local string consists of a date string and a time string concatenated together with either the letter "T" or a space character separating them. No information about the time zone is included in the string; the date and time is presumed to be in the user's local time zone.

+A valid [`datetime-local`](/ja/docs/Web/HTML/Element/input/datetime-local) string consists of a `date` string and a `time` string concatenated together with either the letter "`T`" or a space character separating them. No information about the time zone is included in the string; the date and time is presumed to be in the user's local time zone. -

When you set the {{htmlattrxref("value", "input")}} of a datetime-local input, the string is normalized into a standard form. Normalized datetime strings always use the letter "T" to separate the date and the time, and the time portion of the string is as short as possible. This is done by leaving out the seconds component if its value is :00.

+When you set the {{htmlattrxref("value", "input")}} of a `datetime-local` input, the string is **normalized** into a standard form. Normalized `datetime` strings always use the letter "`T`" to separate the date and the time, and the time portion of the string is as short as possible. This is done by leaving out the seconds component if its value is `:00`. - - - - - - - - - - - - - - - - - - - - - - - - - - -
Examples of valid datetime-local strings
Date/time stringNormalized date/time stringActual date and time
1986-01-28T11:38:00.011986-01-28T11:38:00.01January 28, 1986 at 11:38:00.01 AM
1986-01-28 11:38:00.0101986-01-28T11:38:00.011January 28, 1986 at 11:38:00.01 AM
0170-07-31T22:00:000170-07-31T22:002July 31, 170 at 10:00 PM
+| Date/time string | Normalized date/time string | Actual date and time | +| ------------------------- | ------------------------------------------------------ | ---------------------------------- | +| `1986-01-28T11:38:00.01` | `1986-01-28T11:38:00.01` | January 28, 1986 at 11:38:00.01 AM | +| `1986-01-28 11:38:00.010` | `1986-01-28T11:38:00.01`[1](#datetime-local-footnote1) | January 28, 1986 at 11:38:00.01 AM | +| `0170-07-31T22:00:00` | `0170-07-31T22:00`[2](#datetime-local-footnote2) | July 31, 170 at 10:00 PM | -
    -
  1. Notice that after normalization, this is the same string as the previous datetime-local string. The space has been replaced with the "T" character and the trailing zero in the fraction of a second has been removed to make the string as short as possible.
    2. -
  2. Note that the normalized form of this date drops the ":00" indicating the number of seconds to be zero, because the seconds are optional when zero, and the normalized string minimizes the length of the string.
    3. -
+1. Notice that -

グローバル日時の文字列

+ after normalization -

A global date and time string specifies a date and time as well as the time zone in which it occurs. A valid global date and time string is the same format as a local date and time string, except it has a time zone string appended to the end, following the time.

+ , this is the same string as the previous `datetime-local` string. The space has been replaced with the "`T`" character and the trailing zero in the fraction of a second has been removed to make the string as short as possible. -

タイムゾーンオフセット文字列

+2. Note that the -

A time zone offset string specifies the offset in either a positive or a negative number of hours and minutes from the standard time base. There are two standard time bases, which are very close to the same, but not exactly the same:

+ normalized form - + of this date drops the "`:00`" indicating the number of seconds to be zero, because the seconds are optional when zero, and the normalized string minimizes the length of the string. -

The time zone string is appended immediately following the time in the date and time string. You can specify simply "Z" as the time zone offset string to indicate that the time is specified in UTC. Otherwise, the time zone string is constructed as follows:

+## グローバル日時の文字列 -
    -
  1. A character indicating the sign of the offset: the plus character ("+", or U+002B) for time zones to the east of the prime meridian or the minus character ("-", or U+002D) for time zones to the west of the prime meridian.
    2. -
  2. A two-digit number of hours that the time zone is offset from the prime meridian. This value must be between 00 and 23.
    3. -
  3. An optional colon (":") character.
    4. -
  4. A two-digit number of minutes past the hour; this value must be between 00 and 59.
    5. -
+A global date and time string specifies a date and time as well as the time zone in which it occurs. A **valid global date and time string** is the same format as a [local date and time string](#local_date_and_time_strings), except it has a time zone string appended to the end, following the time. -

While this format allows for time zones between -23:59 and +23:59, the current range of time zone offsets is -12:00 to +14:00, and no time zones are currently offset from the hour by anything other than 00, 30, or 45 minutes. This may change at more or less anytime, since countries are free to tamper with their time zones at any time and in any way they wish to do so.

+### タイムゾーンオフセット文字列 - - - - - - - - - - - - - - - - - - - - - - - - - - -
Examples of valid global date and time strings
Global date and time stringActual global date and timeDate and time at prime meridian
2005-06-07T00:00ZJune 7, 2005 at midnight UTCJune 7, 2005 at midnight
1789-08-22T12:30:00.1-04:00August 22, 1789 at a tenth of a second past 12:30 PM Eastern Daylight Time (EDT)August 22, 1789 at a tenth of a second past 4:30 PM
3755-01-01 00:00+10:00January 1, 3755 at midnight Australian Eastern Standard Time (AEST)December 31, 3754 at 2:00 PM
+A time zone offset string specifies the offset in either a positive or a negative number of hours and minutes from the standard time base. There are two standard time bases, which are very close to the same, but not exactly the same: + +- For dates after the establishment of {{interwiki("wikipedia", "Coordinated Universal Time")}} (UTC) in the early 1960s, the time base is `Z` and the offset indicates a particular time zone's offset from the time at the prime meridian at 0º longitude (which passes through the Royal Observatory at Greenwich, England). +- For dates prior to UTC, the time base is instead expressed in terms of {{interwiki("wikipedia", "UT1")}}, which is the contemporary Earth solar time at the prime meridian. + +The time zone string is appended immediately following the time in the date and time string. You can specify simply "`Z`" as the time zone offset string to indicate that the time is specified in UTC. Otherwise, the time zone string is constructed as follows: + +1. A character indicating the sign of the offset: the plus character ("`+`", or U+002B) for time zones to the east of the prime meridian or the minus character ("`-`", or U+002D) for time zones to the west of the prime meridian. +2. A two-digit number of hours that the time zone is offset from the prime meridian. This value must be between `00` and `23`. +3. An optional colon ("`:`") character. +4. A two-digit number of minutes past the hour; this value must be between `00` and `59`. + +While this format allows for time zones between -23:59 and +23:59, the current range of time zone offsets is -12:00 to +14:00, and no time zones are currently offset from the hour by anything other than `00`, `30`, or `45` minutes. This may change at more or less anytime, since countries are free to tamper with their time zones at any time and in any way they wish to do so. + +| Global date and time string | Actual global date and time | Date and time at prime meridian | +| ----------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------- | +| `2005-06-07T00:00Z` | June 7, 2005 at midnight UTC | June 7, 2005 at midnight | +| `1789-08-22T12:30:00.1-04:00` | August 22, 1789 at a tenth of a second past 12:30 PM Eastern Daylight Time (EDT) | August 22, 1789 at a tenth of a second past 4:30 PM | +| `3755-01-01 00:00+10:00` | January 1, 3755 at midnight Australian Eastern Standard Time (AEST) | December 31, 3754 at 2:00 PM | -

関連情報

+## 関連情報 - +- {{HTMLElement("input")}} +- {{HTMLElement("ins")}} and {{HTMLElement("del")}}: see the `datetime` attribute, which specifies either a date or a local date and time at which the content was inserted or deleted +- [The ISO 8601 specification](https://www.iso.org/iso-8601-date-and-time-format.html) +- [Numbers and Dates](/ja/docs/Web/JavaScript/Guide/Numbers_and_dates) in the [JavaScript Guide](/ja/docs/Web/JavaScript/Guide) +- The JavaScript {{jsxref("Date")}} object +- The [`Intl.DateTimeFormat`](/ja/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat) object for formatting dates and times for a given locale diff --git a/files/ja/web/html/element/abbr/index.md b/files/ja/web/html/element/abbr/index.md index bba2dae145a695..3f4e3bc26d9219 100644 --- a/files/ja/web/html/element/abbr/index.md +++ b/files/ja/web/html/element/abbr/index.md @@ -7,9 +7,9 @@ tags: - Element - HTML - HTML text-level semantics - - 'HTML:Flow content' - - 'HTML:Palpable Content' - - 'HTML:Phrasing content' + - HTML:Flow content + - HTML:Palpable Content + - HTML:Phrasing content - Reference - Web - abbr @@ -17,190 +17,193 @@ tags: - semantics translation_of: Web/HTML/Element/abbr --- -
{{HTMLRef}}
+{{HTMLRef}} -

HTML の略語要素 (<abbr>) は略語や頭字語を表します。任意で {{htmlattrxref("title")}} 属性で、略語の完全形または説明を提供することができます。 title 属性はこの完全な説明のみを含み、それ以外を含んではいけません。

+**HTML の略語要素** (**``**) は略語や頭字語を表します。任意で {{htmlattrxref("title")}} 属性で、略語の完全形または説明を提供することができます。 `title` 属性はこの完全な説明のみを含み、それ以外を含んではいけません。 -
{{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}}
- - +{{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
コンテンツカテゴリフローコンテンツ, 記述コンテンツ, 知覚可能コンテンツ
許可されている内容記述コンテンツ
タグの省略{{no_tag_omission}}
許可されている親要素記述コンテンツを受け入れるすべての要素
暗黙の ARIA ロール対応するロールなし
許可されている ARIA ロールすべて
DOM インターフェイス{{domxref("HTMLElement")}}
+ コンテンツカテゴリ + + フローコンテンツ, + 記述コンテンツ, 知覚可能コンテンツ +
許可されている内容 + 記述コンテンツ +
タグの省略{{no_tag_omission}}
許可されている親要素 + 記述コンテンツを受け入れるすべての要素 +
暗黙の ARIA ロール + 対応するロールなし +
許可されている ARIA ロールすべて
DOM インターフェイス{{domxref("HTMLElement")}}
-

属性

+## 属性 -

この要素にはグローバル属性のみに対応しています。 {{htmlattrxref("title")}} 属性は <abbr> 要素と共に使用すると、特定の意味論的な意味を持ちます。これは完全な人間が読める形の説明または略語の完全形を含む必要があります。この文字列は、マウスポインターが要素の上で静止したとき、ブラウザーがツールチップとして表示することが良くあります。

+この要素には[グローバル属性](/ja/docs/Web/HTML/Global_attributes)のみに対応しています。 {{htmlattrxref("title")}} 属性は `` 要素と共に使用すると、特定の意味論的な意味を持ちます。これは完全な人間が読める形の説明または略語の完全形を含む*必要があります*。この文字列は、マウスポインターが要素の上で静止したとき、ブラウザーがツールチップとして表示することが良くあります。 -

それぞれの <abbr>要素は他の独立しています。同じ文書内で他の省略形ではない表現の文字列に自動的に結びつかない場合は、 title を使用してください。

+それぞれの ``要素は他の独立しています。同じ文書内で他の省略形ではない表現の文字列に自動的に結びつかない場合は、 `title` を使用してください。 -

使用上の注意

+## 使用上の注意 -

よくある使用例

+### よくある使用例 -

必ずしもすべての略語を <abbr> でマークアップする必要はありません。しかし、有用な場合がいくつかあります。

+必ずしもすべての略語を `` でマークアップする必要はありません。しかし、有用な場合がいくつかあります。 -
    -
  • 略語が使用され、文書コンテンツの流れの外で完全形や定義を提供したい場合は、 <abbr> を適切な {{htmlattrxref("title")}} と共に使用してください。
    • -
  • 読み手にとってなじみのない略語を定義する場合、用語を <abbr> を使用して表現し、 title 属性や行内文字列で定義を提供してください。
    • -
  • テキスト内に略語が存在し、意味の注釈が必要な場合、 <abbr> 要素は有用です。一方、これは整形やスクリプトの目的で使用することができます。
    • -
  • <abbr> は {{HTMLElement("dfn")}} との組み合わせで、略語や頭字語の用語の定義を行なうことができます。以下の略語の定義の例をご覧ください。
    • -
+- 略語が使用され、文書コンテンツの流れの外で完全形や定義を提供したい場合は、 `` を適切な {{htmlattrxref("title")}} と共に使用してください。 +- 読み手にとってなじみのない略語を定義する場合、用語を `` を使用して表現し、 `title` 属性や行内文字列で定義を提供してください。 +- テキスト内に略語が存在し、意味の注釈が必要な場合、 `` 要素は有用です。一方、これは整形やスクリプトの目的で使用することができます。 +- `` は {{HTMLElement("dfn")}} との組み合わせで、略語や頭字語の用語の定義を行なうことができます。以下の[略語の定義](#defining_an_abbreviation)の例をご覧ください。 -

文法的な考慮事項

+### 文法的な考慮事項 -

{{interwiki("wikipedia", "数 (文法)", "文法的に数を表現する")}}言語（つまり、項目の数が文の文法に影響する言語）では、 <abbr> 要素内の title 属性で同じ文法的な数値を使用してください。これは、アラビア語のように2よりも大きい数の文法を持つ言語で特に重要ですが、英語にも当てはまります。

+{{interwiki("wikipedia", "数 (文法)", "文法的に数を表現する")}}言語（つまり、項目の数が文の文法に影響する言語）では、 `` 要素内の `title` 属性で同じ文法的な数値を使用してください。これは、アラビア語のように 2 よりも大きい数の文法を持つ言語で特に重要ですが、英語にも当てはまります。 -

既定のスタイル

+## 既定のスタイル -

この要素の目的は単に作者の利便性のためであり、すべてのブラウザーが既定でこの要素を行内 ({{cssxref('display')}}: inline) で表示します。ただし、既定のスタイルはブラウザーによりさまざまです。

+この要素の目的は単に作者の利便性のためであり、すべてのブラウザーが既定でこの要素を行内 ({{cssxref('display')}}`: inline`) で表示します。ただし、既定のスタイルはブラウザーによりさまざまです。 -
    -
  • Internet Explorer など一部のブラウザーは、この要素を {{HTMLElement("span")}} 要素と同じスタイルを適用します。
    • -
  • Opera、Firefox などのブラウザーは、この要素の内容に点線の下線を引きます。
    • -
  • ごく一部のブラウザーは、ドットの下線を引くだけでなく、小さな大文字で表示するものがあります。本件を扱う CSS に {{cssxref('font-variant')}}: none のようなスタイルを追加することで、このようなスタイルを避けることができます。
    • -
+- Internet Explorer など一部のブラウザーは、この要素を {{HTMLElement("span")}} 要素と同じスタイルを適用します。 +- Opera、Firefox などのブラウザーは、この要素の内容に点線の下線を引きます。 +- ごく一部のブラウザーは、ドットの下線を引くだけでなく、小さな大文字で表示するものがあります。本件を扱う CSS に {{cssxref('font-variant')}}`: none` のようなスタイルを追加することで、このようなスタイルを避けることができます。 -

例

+## 例 -

意味論的な略語のマークアップ

+### 意味論的な略語のマークアップ -

完全形や説明を提供せずに略語をマークアップするには、この例にあるように、単に属性なしで <abbr> を使用してください。

+完全形や説明を提供せずに略語をマークアップするには、この例にあるように、単に属性なしで `` を使用してください。 -

HTML

+#### HTML -
<p><abbr>HTML</abbr> を使うのは楽しくて簡単です！</p>
+```html +

HTML を使うのは楽しくて簡単です！

+``` -

結果

+#### 結果 -

{{EmbedLiveSample("Marking_up_an_abbreviation_semantically")}}

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

略語の整形

+### 略語の整形 -

この単純な例に見られるように、 CSS を使用して略語のために専用のスタイルを設定することができます。

+この単純な例に見られるように、 CSS を使用して略語のために専用のスタイルを設定することができます。 -

HTML

+#### HTML -
<p><abbr>CSS</abbr> を使うと、略語の整形ができます！</p>
+```html +

CSS を使うと、略語の整形ができます！

+``` -

CSS

+#### CSS -
abbr {
+```css
+abbr {
   font-variant: all-small-caps;
-}
+} +``` -

結果

+#### 結果 -

{{EmbedLiveSample("Styling_abbreviations")}}

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

完全形の提供

+### 完全形の提供 -

{{htmlattrxref("title")}} 属性を追加することで、略語や頭字語の完全形や定義を提供することができます。

+{{htmlattrxref("title")}} 属性を追加することで、略語や頭字語の完全形や定義を提供することができます。 -

HTML

+#### HTML -
<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big
-time.</p>
+```html +

Ashok's joke made me LOL big +time.

+``` -

結果

+#### 結果 -

{{EmbedLiveSample("Providing_an_expansion")}}

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

略語の定義

+### 略語の定義 -

こちらに示すように、 <abbr> と {{HTMLElement("dfn")}} を組み合わせることで、より正式に略語を定義することができます。

+こちらに示すように、 `` と {{HTMLElement("dfn")}} を組み合わせることで、より正式に略語を定義することができます。 -

HTML

+#### HTML -
<p><dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr>
-</dfn> is a markup language used to create the semantics and structure
-of a web page.</p>
+```html
+
HTML
+ is a markup language used to create the semantics and structure
+of a web page.

 
-<p>A <dfn id="spec">Specification</dfn>
-(<abbr title="Specification">spec</abbr>) is a document that outlines
+
A Specification
+(spec) is a document that outlines
 in detail how a technology or API is intended to function and how it is
-accessed.</p>
- -

結果

- -

{{EmbedLiveSample("Defining_an_abbreviation", 600, 120)}}

- -

アクセシビリティの考慮

- -

頭字語や略語を、ページ内で最初に使われたときに完全な形で綴ることは、特に中身が技術用語や産業用語であった場合に、人々が理解するのに有益です。

- -

例

- -
<p>JavaScript Object Notation (<abbr>JSON</abbr>) は軽量のデータ交換形式です。</p>
-
- -

これは特に、コンテンツで説明している用語や概念になじみがない人、その言語の初心者、認知症の人などに有益です。

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML WHATWG', 'semantics.html#the-abbr-element', '<abbr>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-abbr-element', '<abbr>')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}{{Spec2('HTML4.01')}}
+accessed.

+``` + +#### 結果 + +{{EmbedLiveSample("Defining_an_abbreviation", 600, 120)}} + +## アクセシビリティの考慮 + +頭字語や略語を、ページ内で最初に使われたときに完全な形で綴ることは、特に中身が技術用語や産業用語であった場合に、人々が理解するのに有益です。 + +#### 例 + +```html +

JavaScript Object Notation (JSON) は軽量のデータ交換形式です。

+``` + +これは特に、コンテンツで説明している用語や概念になじみがない人、その言語の初心者、認知症の人などに有益です。 + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ---- | +| {{SpecName('HTML WHATWG', 'semantics.html#the-abbr-element', '<abbr>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-abbr-element', '<abbr>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}} | {{Spec2('HTML4.01')}} | | -

ブラウザーの互換性

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

{{Compat("html.elements.abbr")}}

+{{Compat("html.elements.abbr")}} -

関連情報

+## 関連情報 - +- [`` 要素の使用方法](/ja/Learn/HTML/Element/abbr) diff --git a/files/ja/web/html/element/address/index.md b/files/ja/web/html/element/address/index.md index c07d9253c1d5bc..fd32c4b347e064 100644 --- a/files/ja/web/html/element/address/index.md +++ b/files/ja/web/html/element/address/index.md @@ -11,128 +11,142 @@ tags: - Email Address - HTML - HTML sections - - 'HTML:Flow content' - - 'HTML:Palpable Content' + - HTML:Flow content + - HTML:Palpable Content - Reference - Web translation_of: Web/HTML/Element/address --- -
{{HTMLRef}}
+{{HTMLRef}} -

HTML の <address> 要素は、これを含んでいる HTML が個人、団体、組織の連絡先を提供していることを示します。

+**HTML の `
` 要素**は、これを含んでいる HTML が個人、団体、組織の連絡先を提供していることを示します。 -
{{EmbedInteractiveExample("pages/tabbed/address.html", "tabbed-standard")}}
+{{EmbedInteractiveExample("pages/tabbed/address.html", "tabbed-standard")}} - +`
` 要素の内容で提供される連絡先情報は、その文脈で適切であればどのような形でもよく、必要とされるあらゆる形の連絡先情報 (住所、 URL、メールアドレス、電話番号、ソーシャルメディアのアカウント、地理上の座標など) を含めることができます。 `
` には連絡先情報が参照する個人、団体、組織の名前を含めてください。 -

<address> 要素の内容で提供される連絡先情報は、その文脈で適切であればどのような形でもよく、必要とされるあらゆる形の連絡先情報 (住所、 URL、メールアドレス、電話番号、ソーシャルメディアのアカウント、地理上の座標など) を含めることができます。 <address> には連絡先情報が参照する個人、団体、組織の名前を含めてください。

- -

<address> は様々な文脈で使用することができ、ページヘッダーでビジネスの連絡先を提供したり、 {{HTMLElement("article")}} 要素の中で <address> を含めることで、記事の著者を識別したりすることができます。

+`
` は様々な文脈で使用することができ、ページヘッダーでビジネスの連絡先を提供したり、 {{HTMLElement("article")}} 要素の中で `
` を含めることで、記事の著者を識別したりすることができます。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
コンテンツカテゴリフローコンテンツ、知覚可能コンテンツ
許可されている内容フローコンテンツ。ただし <address> 要素をネストしたり、見出しコンテンツ ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}), 区分コンテンツ ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}), {{HTMLElement("header")}} 要素および {{HTMLElement("footer")}} 要素を入れたりしてはなりません。
タグの省略{{no_tag_omission}}
許可されている親要素フローコンテンツ を受け入れるすべての要素。ただし <address> 要素は除く (論理的な対称性の原理によれば、親要素である <address> タグは <address> 要素を入れ子にすることができません。したがって、同じ <address> のコンテンツの親に <address> タグを置くこともできません)。
暗黙の ARIA ロール対応するロールなし
許可されている ARIA ロールすべて
DOM インターフェイス{{domxref("HTMLElement")}}。 Gecko 2.0 (Firefox 4) より前では {{domxref("HTMLSpanElement")}} インターフェイスが提供されます。
+ コンテンツカテゴリ + + フローコンテンツ、知覚可能コンテンツ +
許可されている内容 + フローコンテンツ。ただし + <address> 要素をネストしたり、見出しコンテンツ + ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, + {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, + {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, + {{HTMLElement("h6")}}), 区分コンテンツ + ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, + {{HTMLElement("section")}}, {{HTMLElement("nav")}}), + {{HTMLElement("header")}} 要素および + {{HTMLElement("footer")}} 要素を入れたりしてはなりません。 +
タグの省略{{no_tag_omission}}
許可されている親要素 + フローコンテンツ + を受け入れるすべての要素。ただし <address> 要素は除く + (論理的な対称性の原理によれば、親要素である + <address> タグは + <address> + 要素を入れ子にすることができません。したがって、同じ + <address> のコンテンツの親に + <address> タグを置くこともできません)。 +
暗黙の ARIA ロール + 対応するロールなし +
許可されている ARIA ロールすべて
DOM インターフェイス + {{domxref("HTMLElement")}}。 Gecko 2.0 (Firefox 4) より前では + {{domxref("HTMLSpanElement")}} + インターフェイスが提供されます。 +
-

属性

+## 属性 -

この要素にはグローバル属性のみがあります。

+この要素には[グローバル属性](/ja/docs/Web/HTML/Global_attributes "HTML/Global attributes")のみがあります。 -

使用上の注意

+## 使用上の注意 -
    -
  • <address> 要素は文書の著者の連絡先情報を表すだけのために使われる傾向があります。しかし最新の仕様書では、定義が更新され、様々な宛先をマークアップするために使用できるようになりました。
    • -
  • この要素には、公開日 ({{HTMLElement("time")}} によるもの) のような連絡先情報以外の情報を含めるべきではありません。
    • -
  • 一般的に、 <address> 要素は現在のセクションに {{HTMLElement("footer")}} 要素があれば、その中に配置することができます。
    • -
+- `
` 要素は文書の著者の連絡先情報を表すだけのために使われる傾向があります。しかし最新の仕様書では、定義が更新され、様々な宛先をマークアップするために使用できるようになりました。 +- この要素には、公開日 ({{HTMLElement("time")}} によるもの) のような連絡先情報以外の情報を含めるべきではありません。 +- 一般的に、 `
` 要素は現在のセクションに {{HTMLElement("footer")}} 要素があれば、その中に配置することができます。 -

例

+## 例 -

この例は <address> 要素で記事の編集者の連絡先情報を示す使い方を示します。

+この例は `
` 要素で記事の編集者の連絡先情報を示す使い方を示します。 -
  <address>
-    You can contact author at <a href="http://www.somedomain.com/contact">
-    www.somedomain.com</a>.<br>
-    If you see any bugs, please <a href="mailto:webmaster@somedomain.com">
-    contact webmaster</a>.<br>
-    You may also want to visit us:<br>
-    Mozilla Foundation<br>
-    331 E Evelyn Ave<br>
-    Mountain View, CA 94041<br>
+```html
+  

+    You can contact author at 
+    www.somedomain.com.

+    If you see any bugs, please 
+    contact webmaster.

+    You may also want to visit us:

+    Mozilla Foundation

+    331 E Evelyn Ave

+    Mountain View, CA 94041

     USA
-  </address>
-
- -

結果

- -

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

- -

この要素は文字列を {{HTMLElement("i")}} 要素や {{HTMLElement("em")}} 要素と同じ既定のスタイルで描画しますが、付加的な意味情報として連絡先情報を扱うときに <address> を使用するのがより適切でしょう。

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML WHATWG', 'sections.html#the-address-element', '<address>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'grouping-content.html#the-address-element', '<address>')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'struct/global.html#h-7.5.6', '<address>')}}{{Spec2('HTML4.01')}}
+
+``` + +### 結果 + +{{EmbedLiveSample("Examples", "300", "200")}} + +この要素は文字列を {{HTMLElement("i")}} 要素や {{HTMLElement("em")}} 要素と同じ既定のスタイルで描画しますが、付加的な意味情報として連絡先情報を扱うときに `
` を使用するのがより適切でしょう。 + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ---- | +| {{SpecName('HTML WHATWG', 'sections.html#the-address-element', '<address>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'grouping-content.html#the-address-element', '<address>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML4.01', 'struct/global.html#h-7.5.6', '<address>')}} | {{Spec2('HTML4.01')}} | | -

ブラウザーの互換性

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

{{Compat("html.elements.address")}}

+{{Compat("html.elements.address")}} -

関連情報

+## 関連情報 -
    -
  • 他のセクション関連要素: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("header")}}
    • -
  • HTML5 文書のセクションとアウトライン
    • -
+- 他のセクション関連要素: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("header")}} +- [HTML5 文書のセクションとアウトライン](/ja/docs/Sections_and_outlines_of_an_HTML5_document "Sections and Outlines of an HTML5 document") diff --git a/files/ja/web/html/element/area/index.md b/files/ja/web/html/element/area/index.md index 4b0bd8b64d26be..ad3e4f3daf05bd 100644 --- a/files/ja/web/html/element/area/index.md +++ b/files/ja/web/html/element/area/index.md @@ -5,181 +5,123 @@ tags: - Content - Element - HTML - - 'HTML:Flow content' - - 'HTML:Phrasing content' + - HTML:Flow content + - HTML:Phrasing content - Multimedia - Reference - Web translation_of: Web/HTML/Element/area --- -
{{HTMLRef}}
+{{HTMLRef}} -

HTML の <area> 要素は、イメージマップの中でクリック可能な領域をあらかじめ定義します。イメージマップでは、画像上の幾何学的な領域を{{Glossary("Hyperlink", "ハイパーテキストリンク")}}と関連付けすることができます。

+**HTML の `` 要素**は、イメージマップの中でクリック可能な領域をあらかじめ定義します。*イメージマップ*では、画像上の幾何学的な領域を{{Glossary("Hyperlink", "ハイパーテキストリンク")}}と関連付けすることができます。 -

この要素は {{HTMLElement("map")}} 要素内だけで使用します。

+この要素は {{HTMLElement("map")}} 要素内だけで使用します。 -
{{EmbedInteractiveExample("pages/tabbed/area.html", "tabbed-taller")}}
- - +{{EmbedInteractiveExample("pages/tabbed/area.html", "tabbed-taller")}} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
コンテンツカテゴリフローコンテンツ、記述コンテンツ
許可されている内容なし。これは{{Glossary("empty element", "空要素")}}です。
タグの省略開始タグは必須。終了タグを記述してはなりません。
許可されている親要素記述コンテンツを受け入れるすべての要素。 <area> 要素は祖先が {{HTMLElement("map")}} でなければなりませんが、直接の親要素である必要はありません。
暗黙の ARIA ロール{{htmlattrxref("href", "area")}} 属性がある場合は {{ARIARole("link")}}、そうでなければ対応するロールなし
許可されている ARIA ロールなし
DOM インターフェイス{{domxref("HTMLAreaElement")}}
+ コンテンツカテゴリ + + フローコンテンツ、記述コンテンツ +
許可されている内容 + なし。これは{{Glossary("empty element", "空要素")}}です。 +
タグの省略開始タグは必須。終了タグを記述してはなりません。
許可されている親要素 + 記述コンテンツを受け入れるすべての要素。 <area> 要素は祖先が + {{HTMLElement("map")}} + でなければなりませんが、直接の親要素である必要はありません。 +
暗黙の ARIA ロール + {{htmlattrxref("href", "area")}} 属性がある場合は + {{ARIARole("link")}}、そうでなければ対応するロールなし +
許可されている ARIA ロールなし
DOM インターフェイス{{domxref("HTMLAreaElement")}}
-

属性

- -

この要素にはグローバル属性があります。

- -
-
{{htmlattrdef("alt")}}
-
画像を表示しないブラウザーが代わりに表示するテキスト文字列です。テキストの内容は、代替テキストを表示しない場合に画像が提供する選択肢と同じものをユーザーに与えるような表現にすべきです。この属性は {{htmlattrxref("href", "area")}} 属性が使用されている場合のみ必要です。
-
- -
-
{{htmlattrdef("coords")}}
-
coords 属性は <area> の寸法、形状、配置における shape 属性の座標を詳述します。
-
-
    -
  • rect: 値は x1,y1,x2,y2 です。値は長方形の左上と右下の座標を指定します。
    - 例: <area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="Mozilla"> この例では長方形の左上の隅が 0,0、右下の隅が 253,27 になります。
    • -
  • circle: 値は x,y,radius です。値は円の中央の座標と半径を指定します。
    - 例: <area shape="circle" coords="130,136,60" href="#" target="_blank" alt="MDN">
    • -
  • poly: 値は x1,y1,x2,y2,..,xn,yn です。値は多角形の角の座標を指定します。先頭と末尾の座標が同じではない場合、ブラウザーは最後に座標を追加して多角形を閉じます。
    • -
  • default: 領域全体を定義します。
    • -
- 値は CSS ピクセルの数です。
-
{{htmlattrdef("download")}}
-
この属性がある場合は、作者はハイパーリンクをリソースのダウンロードに使用すると考えていることを示します。{{htmlattrxref("download", "a")}} 属性の詳しい説明は {{HTMLElement("a")}} をご覧ください。
-
{{htmlattrdef("href")}}
-
この領域のハイパーリンクの宛先です。この値は有効な URL です。この属性は省略可能です。その場合、その <area> 要素はハイパーリンクを提供しません。
-
{{htmlattrdef("hreflang")}}
-
リンク先のリソースの言語を示します。許容される値は BCP47 で定めています。この属性は、 {{htmlattrxref("href", "area")}} 属性を与える場合にのみ使用してください。
-
{{htmlattrdef("ping")}}
-
ハイパーリンクがフォローされたときに、ブラウザーから {{HTTPMethod("POST")}} リクエストが本文を PING として (バックグラウンドで) 送信する URL を空白で区切ったリストで記述します。ふつうはトラッキング用に使用します。
-
{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}
-
リソースを読み込む際にどのリファラーを使用するかを示す文字列です: -
    -
  • "no-referrer" は、Referer: ヘッダーを送信しないことを表します。
    • -
  • "no-referrer-when-downgrade" は、TLS (HTTPS) を使用せずに生成元へナビゲートする場合は Referer: ヘッダーを送信しないことを表します。これは他にポリシーが定められていない場合の、ユーザーエージェントの既定の動作です。
    • -
  • "origin" は、ページの生成元 (大まかにいえばスキーム、ホスト、ポート) をリファラーとすることを表します。
    • -
  • "origin-when-cross-origin" は、異なる生成元へのナビゲートではリファラーをスキーム、ホスト、ポートに制限します。同一生成元へのナビゲートでは、リファラーのパスも含めます。
    • -
  • "unsafe-url" は、リファラーに生成元とパスを含めることを表します (ただし、フラグメント、パスワード、ユーザー名は含めません)。これは生成元やパスの情報が TLS で保護されたリソースからセキュアでない生成元へ漏えいしますので、安全ではありません。
    • -
-
-
{{htmlattrdef("rel")}}
-
{{htmlattrxref("href", "area")}} 属性を含むアンカーで、この属性は、対象オブジェクトとリンクオブジェクトの関係を指定します。属性値は、空白で区切られたリンク種別の値のリストです。値とその意味は、文書作成者にとって意味を持つかもしれない何らかの権威によって登録されています。他に何も与えられていない場合の既定の関係は void です。この属性は {{htmlattrxref("href", "area")}} 属性が存在する場合にのみ使用してください。
-
{{htmlattrdef("shape")}}
-
関連づけたホットスポットの形状です。 HTML の仕様書では、長方形の領域を定義する値 rect、円形の領域を定義する値 circle、多角形を定義する値 poly、定義済みの領域以外のすべての領域を示す値 default を定めています。
-
多くのブラウザー、特に Internet Explorer 4 以降では circ, polygon, rectangle を {{htmlattrxref("shape", "area")}} の有効な値として対応していますが、これらの値は標準外です。
-
{{htmlattrdef("target")}}
-
キーワードまたは作成者が定義した名前で、リンクされたリソースを表示する{{Glossary("browsing context", "閲覧コンテキスト")}}です。
-
以下のキーワードは特別な意味を持っています。 -
    -
  • _self (既定値): 現在の閲覧コンテキストのリソースを表します。
    • -
  • _blank: 新しい名前の付けられていない閲覧コンテキストのリソースを表します。
    • -
  • _parent: 現在のページがフレーム内にある場合は、現在の親の閲覧コンテキストのリソースを表します。親要素がない場合、 _self と同じ動作をします。
    • -
  • _top: 最上位の閲覧コンテキストのリソースを表します (現在の閲覧コンテキストの祖先にあたり、それ以上親のない要素です)。親要素がない場合、 _self と同じ動作をします。
    • -
-
-
この属性は {{htmlattrxref("href", "area")}} 属性が存在する場合にのみ使用してください。 -
-

注: 新しいブラウザー (例えば Firefox 79 以降) では、 target="_blank" を <area> 要素に設定すると、暗黙に同じ動作をする rel を rel="noopener" と設定します。

-
-
-
- -

非推奨の属性

- -
-
{{htmlattrdef("name")}} {{deprecated_inline}}
-
古いブラウザーでスクリプトから使用できるようにするため、クリッカブル領域に名前を定義します。
-
{{htmlattrdef("nohref")}} {{deprecated_inline}}
-
関連づけた領域にハイパーリンクがないことを示します。 -
-

注: HTML5 では href 属性を省略すれば十分です。

-
-
-
{{htmlattrdef("tabindex")}} {{deprecated_inline}}
-
ブラウザーのタブオーダーにおける、定義した領域の位置を示す数値です。この属性は HTML5 のグローバル属性です。
-
{{htmlattrdef("type")}} {{deprecated_inline}}
-
この属性は使用しないでください。ブラウザーは無視します (HTML 仕様書の W3C 5.3 では有効なものとして定義していますが、正規の HTML 仕様書では定義していておらず、どのユーザーエージェントでも効果がありません。)
-
- -

例

- -
<map name="primary">
-  <area shape="circle" coords="75,75,75" href="left.html" alt="Click to go Left">
-  <area shape="circle" coords="275,75,75" href="right.html" alt="Click to go Right">
-</map>
-<img usemap="#primary" src="http://placehold.it/350x150" alt="350 x 150 pic">
- -

結果

- -

{{ EmbedLiveSample('Examples', 360, 160) }}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrerpolicy attribute')}}{{Spec2('Referrer Policy')}}referrerpolicy 属性を追加。
{{SpecName('HTML WHATWG', 'embedded-content.html#the-area-element', '<area>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'semantics-embedded-content.html#the-area-element', '<area>')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '<area>')}}{{Spec2('HTML4.01')}}
+## 属性 + +この要素には[グローバル属性](/ja/docs/Web/HTML/Global_attributes)があります。 + +- {{htmlattrdef("alt")}} + - : 画像を表示しないブラウザーが代わりに表示するテキスト文字列です。テキストの内容は、代替テキストを表示しない場合に画像が提供する選択肢と同じものをユーザーに与えるような表現にすべきです。この属性は {{htmlattrxref("href", "area")}} 属性が使用されている場合のみ必要です。 + +
{{htmlattrdef("coords")}}
coords 属性は <area> の寸法、形状、配置における shape 属性の座標を詳述します。
  • rect: 値は x1,y1,x2,y2 です。値は長方形の左上と右下の座標を指定します。
    例: <area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="Mozilla"> この例では長方形の左上の隅が 0,0、右下の隅が 253,27 になります。
  • circle: 値は x,y,radius です。値は円の中央の座標と半径を指定します。
    例: <area shape="circle" coords="130,136,60" href="#" target="_blank" alt="MDN">
  • poly: 値は x1,y1,x2,y2,..,xn,yn です。値は多角形の角の座標を指定します。先頭と末尾の座標が同じではない場合、ブラウザーは最後に座標を追加して多角形を閉じます。
  • default: 領域全体を定義します。
値は CSS ピクセルの数です。
{{htmlattrdef("download")}}
この属性がある場合は、作者はハイパーリンクをリソースのダウンロードに使用すると考えていることを示します。{{htmlattrxref("download", "a")}} 属性の詳しい説明は {{HTMLElement("a")}} をご覧ください。
{{htmlattrdef("href")}}
この領域のハイパーリンクの宛先です。この値は有効な URL です。この属性は省略可能です。その場合、その <area> 要素はハイパーリンクを提供しません。
{{htmlattrdef("hreflang")}}
リンク先のリソースの言語を示します。許容される値は BCP47 で定めています。この属性は、 {{htmlattrxref("href", "area")}} 属性を与える場合にのみ使用してください。
{{htmlattrdef("ping")}}
ハイパーリンクがフォローされたときに、ブラウザーから {{HTTPMethod("POST")}} リクエストが本文を PING として (バックグラウンドで) 送信する URL を空白で区切ったリストで記述します。ふつうはトラッキング用に使用します。
{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}
リソースを読み込む際にどのリファラーを使用するかを示す文字列です:
  • "no-referrer" は、Referer: ヘッダーを送信しないことを表します。
  • "no-referrer-when-downgrade" は、TLS (HTTPS) を使用せずに生成元へナビゲートする場合は Referer: ヘッダーを送信しないことを表します。これは他にポリシーが定められていない場合の、ユーザーエージェントの既定の動作です。
  • "origin" は、ページの生成元 (大まかにいえばスキーム、ホスト、ポート) をリファラーとすることを表します。
  • "origin-when-cross-origin" は、異なる生成元へのナビゲートではリファラーをスキーム、ホスト、ポートに制限します。同一生成元へのナビゲートでは、リファラーのパスも含めます。
  • "unsafe-url" は、リファラーに生成元とパスを含めることを表します (ただし、フラグメント、パスワード、ユーザー名は含めません)。これは生成元やパスの情報が TLS で保護されたリソースからセキュアでない生成元へ漏えいしますので、安全ではありません。
{{htmlattrdef("rel")}}
{{htmlattrxref("href", "area")}} 属性を含むアンカーで、この属性は、対象オブジェクトとリンクオブジェクトの関係を指定します。属性値は、空白で区切られたリンク種別の値のリストです。値とその意味は、文書作成者にとって意味を持つかもしれない何らかの権威によって登録されています。他に何も与えられていない場合の既定の関係は void です。この属性は {{htmlattrxref("href", "area")}} 属性が存在する場合にのみ使用してください。
{{htmlattrdef("shape")}}
関連づけたホットスポットの形状です。 HTML の仕様書では、長方形の領域を定義する値 rect、円形の領域を定義する値 circle、多角形を定義する値 poly、定義済みの領域以外のすべての領域を示す値 default を定めています。
多くのブラウザー、特に Internet Explorer 4 以降では circ, polygon, rectangle を {{htmlattrxref("shape", "area")}} の有効な値として対応していますが、これらの値は標準外です。
{{htmlattrdef("target")}}
キーワードまたは作成者が定義した名前で、リンクされたリソースを表示する{{Glossary("browsing context", "閲覧コンテキスト")}}です。
以下のキーワードは特別な意味を持っています。
  • _self (既定値): 現在の閲覧コンテキストのリソースを表します。
  • _blank: 新しい名前の付けられていない閲覧コンテキストのリソースを表します。
  • _parent: 現在のページがフレーム内にある場合は、現在の親の閲覧コンテキストのリソースを表します。親要素がない場合、 _self と同じ動作をします。
  • _top: 最上位の閲覧コンテキストのリソースを表します (現在の閲覧コンテキストの祖先にあたり、それ以上親のない要素です)。親要素がない場合、 _self と同じ動作をします。
この属性は {{htmlattrxref("href", "area")}} 属性が存在する場合にのみ使用してください。

注: 新しいブラウザー (例えば Firefox 79 以降) では、 target="_blank" を <area> 要素に設定すると、暗黙に同じ動作をする rel を rel="noopener" と設定します。

+ +### 非推奨の属性 + +- {{htmlattrdef("name")}} {{deprecated_inline}} + - : 古いブラウザーでスクリプトから使用できるようにするため、クリッカブル領域に名前を定義します。 +- {{htmlattrdef("nohref")}} {{deprecated_inline}} + + - : 関連づけた領域にハイパーリンクがないことを示します。 + + > **Note:** **注:** HTML5 では `href` 属性を省略すれば十分です。 + +- {{htmlattrdef("tabindex")}} {{deprecated_inline}} + - : ブラウザーのタブオーダーにおける、定義した領域の位置を示す数値です。この属性は HTML5 のグローバル属性です。 +- {{htmlattrdef("type")}} {{deprecated_inline}} + - : この属性は使用しないでください。ブラウザーは無視します (HTML 仕様書の W3C 5.3 では有効なものとして定義していますが、[正規の HTML 仕様書](https://html.spec.whatwg.org/multipage/#the-area-element)では定義していておらず、どのユーザーエージェントでも効果がありません。) + +## 例 + +```html + + Click to go Left + Click to go Right + +350 x 150 pic +``` + +### 結果 + +{{ EmbedLiveSample('Examples', 360, 160) }} + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------------------------- | +| {{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrerpolicy attribute')}} | {{Spec2('Referrer Policy')}} | `referrerpolicy` 属性を追加。 | +| {{SpecName('HTML WHATWG', 'embedded-content.html#the-area-element', '<area>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'semantics-embedded-content.html#the-area-element', '<area>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '<area>')}} | {{Spec2('HTML4.01')}} | | -

ブラウザーの互換性

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

{{Compat("html.elements.area")}}

+{{Compat("html.elements.area")}} diff --git a/files/ja/web/html/element/article/index.md b/files/ja/web/html/element/article/index.md index 0fc2084ba40bde..49d3cb6ace04e8 100644 --- a/files/ja/web/html/element/article/index.md +++ b/files/ja/web/html/element/article/index.md @@ -9,139 +9,145 @@ tags: - Web translation_of: Web/HTML/Element/article --- -
{{HTMLRef}}
+{{HTMLRef}} -

HTML の <article> 要素は文書、ページ、アプリケーション、サイトなどの中で自己完結しており、 (集合したものの中で) 個別に配信や再利用を行うことを意図した構成物を表します。例えば、フォーラムの投稿、雑誌や新聞の記事、ブログの記事、商品カード、ユーザーが投稿したコメント、対話型のウィジェットやガジェット、その他の独立したコンテンツの項目が含まれます。

+**HTML の `
` 要素**は文書、ページ、アプリケーション、サイトなどの中で自己完結しており、 (集合したものの中で) 個別に配信や再利用を行うことを意図した構成物を表します。例えば、フォーラムの投稿、雑誌や新聞の記事、ブログの記事、商品カード、ユーザーが投稿したコメント、対話型のウィジェットやガジェット、その他の独立したコンテンツの項目が含まれます。 -
{{EmbedInteractiveExample("pages/tabbed/article.html", "tabbed-standard")}}
+{{EmbedInteractiveExample("pages/tabbed/article.html", "tabbed-standard")}} - - -

ある文書に複数の記事を含めることができます。たとえば、読者がスクロールするたびに各記事のテキストを次々と表示するブログでは、各記事は <article> 要素に含まれ、おそらくその中に1つ以上の <section> があります。

+ある文書に複数の記事を含めることができます。たとえば、読者がスクロールするたびに各記事のテキストを次々と表示するブログでは、各記事は `
` 要素に含まれ、おそらくその中に 1 つ以上の `
` があります。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
コンテンツカテゴリフローコンテンツ, 区分コンテンツ, 知覚可能コンテンツ
許可されている内容フローコンテンツ
タグの省略{{no_tag_omission}}
許可されている親要素フローコンテンツを受け入れるすべての要素。なお、 <article> 要素を {{HTMLElement("address")}} 要素の子孫にしてはいけません。
暗黙の ARIA ロールarticle
許可されている ARIA ロール{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("main")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}
DOM インターフェイス{{domxref("HTMLElement")}}
+ コンテンツカテゴリ + + フローコンテンツ, + 区分コンテンツ, + 知覚可能コンテンツ +
許可されている内容 + フローコンテンツ +
タグの省略{{no_tag_omission}}
許可されている親要素 + フローコンテンツを受け入れるすべての要素。なお、 <article> 要素を + {{HTMLElement("address")}} 要素の子孫にしてはいけません。 +
暗黙の ARIA ロール + article +
許可されている ARIA ロール + {{ARIARole("application")}}, {{ARIARole("document")}}, + {{ARIARole("feed")}}, {{ARIARole("main")}}, + {{ARIARole("none")}}, {{ARIARole("presentation")}}, + {{ARIARole("region")}} +
DOM インターフェイス{{domxref("HTMLElement")}}
-

属性

- -

この要素にはグローバル属性のみがあります。

- -

使用上の注意

- -
    -
  • それぞれの <article> は、子要素として見出し (<h1>-<h6> 要素) を含むなどの方法で識別できるようにするべきです。
    • -
  • <article> 要素を入れ子にした場合、内側の要素は外側の要素に関する記事を表します。例えばブログ投稿へのコメントは、ブログ投稿を表す <article> 内へ入れ子にした <article> 要素にできます。
    • -
  • <article> 要素の著者情報は {{HTMLElement("address")}} 要素で提供できますが、入れ子にされた <article> 要素には適用されません。
    • -
  • <article> 要素の発行日時は、 {{HTMLElement("time")}} 要素の {{htmlattrxref("datetime", "time")}} 属性で示すことができます。なお、 {{HTMLElement("time")}} 要素の {{htmlattrxref("pubdate", "time")}} 属性は {{glossary("W3C")}} {{glossary("HTML5")}} 標準から外されました。
    • -
- -

例

- -
<article class="film_review">
-  <header>
-    <h2>Jurassic Park</h2>
-  </header>
-  <section class="main_review">
-    <p>Dinos were great!</p>
-  </section>
-  <section class="user_reviews">
-    <article class="user_review">
-      <p>Way too scary for me.</p>
-      <footer>
-        <p>
+## 属性
+
+この要素には[グローバル属性](/ja/docs/Web/HTML/Global_attributes "HTML/Global attributes")のみがあります。
+
+## 使用上の注意
+
+- それぞれの `
` は、子要素として見出し ([`
`-`
`](/ja/docs/Web/HTML/Element/Heading_Elements) 要素) を含むなどの方法で識別できるようにするべきです。
+- `
` 要素を入れ子にした場合、内側の要素は外側の要素に関する記事を表します。例えばブログ投稿へのコメントは、ブログ投稿を表す `
` 内へ入れ子にした `
` 要素にできます。
+- `
` 要素の著者情報は {{HTMLElement("address")}} 要素で提供できますが、入れ子にされた `
` 要素には適用されません。
+- `
` 要素の発行日時は、 {{HTMLElement("time")}} 要素の {{htmlattrxref("datetime", "time")}} 属性で示すことができます。なお、 _{{HTMLElement("time")}} 要素の {{htmlattrxref("pubdate", "time")}} 属性は {{glossary("W3C")}} {{glossary("HTML5")}} 標準から外されました。_
+
+## 例
+
+```html
+

+  

+    
Jurassic Park

+  

+  

+    
Dinos were great!

+  

+  

+    

+      
Way too scary for me.

+      

+        

           Posted on
-          <time datetime="2015-05-16 19:00">May 16</time>
+          
           by Lisa.
-        </p>
-      </footer>
-    </article>
-    <article class="user_review">
-      <p>I agree, dinos are my favorite.</p>
-      <footer>
-        <p>
+        

+      

+    

+    

+      
I agree, dinos are my favorite.

+      

+        

           Posted on
-          <time datetime="2015-05-17 19:00">May 17</time>
+          
           by Tom.
-        </p>
-      </footer>
-    </article>
-  </section>
-  <footer>
-    <p>
+        

+      

+    

+  

+  

+    

       Posted on
-      <time datetime="2015-05-15 19:00">May 15</time>
+      
       by Staff.
-    </p>
-  </footer>
-</article>
-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML WHATWG', 'semantics.html#the-article-element', '<article>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'sections.html#the-article-element', '<article>')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '<article>')}}{{Spec2('HTML5 W3C')}}
+

+ +
+``` + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ---- | +| {{SpecName('HTML WHATWG', 'semantics.html#the-article-element', '<article>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5.1', 'sections.html#the-article-element', '<article>')}} | {{Spec2('HTML5.1')}} | | +| {{SpecName('HTML5 W3C', 'sections.html#the-article-element', '<article>')}} | {{Spec2('HTML5 W3C')}} | | -

ブラウザーの互換性

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

{{Compat("html.elements.article")}}

+{{Compat("html.elements.article")}} -

関連情報

+## 関連情報 -
    -
  • 他のセクション関連要素: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}
    • -
  • HTML のセクションとアウトラインの使用
    • -
+- 他のセクション関連要素: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}} +- [HTML のセクションとアウトラインの使用](/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines) diff --git a/files/ja/web/html/element/aside/index.md b/files/ja/web/html/element/aside/index.md index 4527281d64ab52..6ef379ea656e9b 100644 --- a/files/ja/web/html/element/aside/index.md +++ b/files/ja/web/html/element/aside/index.md @@ -6,9 +6,9 @@ tags: - HTML - HTML セクション - HTML5 - - 'HTML:フローコンテンツ' - - 'HTML:区分コンテンツ' - - 'HTML:知覚可能コンテンツ' + - HTML:フローコンテンツ + - HTML:区分コンテンツ + - HTML:知覚可能コンテンツ - Reference - Web - ウェブ @@ -16,112 +16,124 @@ tags: - 要素 translation_of: Web/HTML/Element/aside --- -
{{HTMLRef}}
+{{HTMLRef}} -

HTML の <aside> 要素は、文書のメインコンテンツと間接的な関係しか持っていない文書の部分を表現します。サイドバーやコールアウトボックスなどを表現するためによく使われます。

+**HTML の `
+``` + +{{EmbedLiveSample("Examples")}} + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ---- | +| {{SpecName('HTML WHATWG', 'semantics.html#the-aside-element', '<aside>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'sections.html#the-aside-element', '<aside>')}} | {{Spec2('HTML5 W3C')}} | | -

ブラウザーの互換性

+## ブラウザーの互換性 -
{{Compat("html.elements.aside")}}
+{{Compat("html.elements.aside")}} -

関連情報

+## 関連情報 -
    -
  • 他の区分化関連要素: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}
    • -
  • HTML のセクションとアウトラインの使用
    • -
  • ARIA: Complementary role
    • -
+- 他の区分化関連要素: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}} +- [HTML のセクションとアウトラインの使用](/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines) +- [ARIA: Complementary role](/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Complementary_role) diff --git a/files/ja/web/html/element/audio/index.md b/files/ja/web/html/element/audio/index.md index f8dbb5883878fc..97afa583d1bcfb 100644 --- a/files/ja/web/html/element/audio/index.md +++ b/files/ja/web/html/element/audio/index.md @@ -5,11 +5,11 @@ tags: - HTML - HTML 埋め込みコンテンツ - HTML5 - - 'HTML:フローコンテンツ' - - 'HTML:埋め込みコンテンツ' - - 'HTML:対話型コンテンツ' - - 'HTML:知覚可能コンテンツ' - - 'HTML:記述コンテンツ' + - HTML:フローコンテンツ + - HTML:埋め込みコンテンツ + - HTML:対話型コンテンツ + - HTML:知覚可能コンテンツ + - HTML:記述コンテンツ - Media - Reference - Web @@ -19,226 +19,153 @@ tags: - 要素 translation_of: Web/HTML/Element/audio --- -
{{HTMLRef}}
- -

HTML の <audio> 要素は、文書内に音声コンテンツを埋め込むために使用します。この要素は、1つまたは複数の音源を含むことができます。音源は src 属性または {{HTMLElement("source")}} 要素を使用して表し、ブラウザーがもっとも適切な音源を選択します。また、 {{domxref("MediaStream")}} を使用してストリーミングメディアを指し示すこともできます。

- -
{{EmbedInteractiveExample("pages/tabbed/audio.html","tabbed-standard")}}
- - - -

上記の例は、 <audio> 要素の単純な使用方法を示しています。 {{htmlelement("img")}} 要素と同様の方法で、埋め込みたいメディアへのパスを src 属性に設定します。他にも自動再生や繰り返しを行うかどうか、ブラウザーの既定のオーディオコントロールを表示したいかどうか、などの情報を指定する属性を含めることができます。

- -

開始および終了タグ <audio></audio> の中のコンテンツは、この要素に対応してないブラウザーで代替として表示されます。

- -

属性

- -

この要素にはグローバル属性があります。

- -
-
{{htmlattrdef("autoplay")}}
-
論理属性。指定された場合、音声ファイル全体のダウンロードの完了を待たずに、再生可能な状態になった時点で即座にコンテンツの再生が始まります。 -
メモ: 自動的に音声 (あるいは音声トラックを含む動画) を再生するサイトはユーザーにとって不快な体験になる可能性がありますので、可能な限り避けるべきです。自動再生機能が必須である場合は、オプトイン (ユーザーが明示的に有効化することを求める) にするべきです。ただし、ユーザーの制御下で後からソースを設定するメディア要素を作成するときは、この方法が役に立つでしょう。自動再生ガイドには autoplay の正しい使い方についての追加情報があります。
-
-
{{htmlattrdef("controls")}}
-
この属性が指定された場合、ブラウザーは再生・一時停止、音量、シークの各機能を制御するコントロールを表示します。
-
{{htmlattrdef("crossorigin")}}
-
この列挙型の属性は、関連する音声ファイルを取得する際に CORS を使用するかを示します。CORS が有効なリソース は、汚染されることなく {{HTMLElement("canvas")}} 要素で再利用できます。次の値が使用できます: -
-
anonymous
-
資格情報を伴わずにオリジン間リクエストを実行します。すなわち、 Cookie や X.509 証明書がない Origin: HTTP ヘッダーを送信する、あるいは HTTP ベーシック認証を行いません。サーバーが元のサイトに信用情報を付与しない場合 (Access-Control-Allow-Origin: HTTP ヘッダーの設定なし)、画像が汚染され、その使用も制限されます。
-
use-credentials
-
資格情報を伴ってオリジン間リクエストを実行します。すなわち、Cookie や X.509 証明書を伴う Origin: HTTP ヘッダーを送信する、あるいは HTTP ベーシック認証を行います。サーバーが元のサイトに信用情報を付与しない場合 (Access-Control-Allow-Credentials: HTTP ヘッダーに関わらず)、画像が汚染され、その使用も制限されます。
-
- この属性が存在しない場合、リソースは CORS リクエストなしで (すなわち、 Origin: HTTP ヘッダーなしで) 取得され、 {{HTMLElement('canvas')}} 要素での汚染されない使用が妨げられます。これが無効な場合、列挙型のキーワードに anonymous が指定されたものとして扱われます。追加の情報は CORS 設定属性 を参照してください。
-
{{htmlattrdef("currentTime")}}
-
-

currentTime を読み取ると、倍精度浮動小数点値で、現在の音声の再生位置を秒単位で示す値を返します。音声のメタデータが利用できない場合—この場合はメディアの開始時刻や長さを知ることができなくなるので— currentTime は再生が始まる時刻を示したり、変更したりすることができます。そうでない場合は、 currentTime を設定すると現在の再生位置を指定された時刻に設定し、メディアが現在読み込まれていれば、その位置にシークします。

- -

音声がストリーミングである場合は、 {{Glossary("user agent", "ユーザーエージェント")}} はデータがメディアバッファーからあふれた場合に一部を受け取ることができません。他にも音声が0秒から始まらないメディアタイムラインを持っている場合もあり、 currentTime をそれより前の時刻に設定すると失敗します。例えば、音声のメディアタイムラインが12時間目に始まる場合、 currentTime を 3600 に設定すると、現在の再生位置をメディアの開始位置の前に設定しようとするので、失敗します。 {{domxref("HTMLMediaElement.getStartDate", "getStartDate()")}} メソッドは、メディアのタイムラインの参照フレームの開始点を特定するのに使用することができます。

-
-
{{htmlattrdef("disableRemotePlayback")}} {{experimental_inline}}
-
論理属性で、有線 (HDMI, DVI, など) や無線技術 (Mirachast, Chromecast, DLNA, AirPlay, など) で接続された機器のリモート再生機能を無効にするために使用します。詳しくはこの提案中の仕様書をご覧ください。 -

Safari では、代替として x-webkit-airplay="deny" を使用することができます。

-
-
{{htmlattrdef("duration")}} {{ReadOnlyInline}}
-
倍精度浮動小数点値で、メディアのタイムライン上の音声の長さ (合計の長さ) を秒単位で示します。要素上にメディアがない場合や、メディアが有効でない場合は、返値は NaN になります。メディアの終わりが分からない場合 (長さの分からないライブストリーミング、ウェブラジオ、 WebRTC から来たメディアなど)、この値は +Infinity になります。
-
{{htmlattrdef("loop")}}
-
論理型の属性です。指定された場合、音声プレイヤーは音声の末尾に達すると、自動的に先頭に戻ります。
-
{{htmlattrdef("muted")}}
-
論理型の属性で、音声の既定の設定を示します。この属性を設定すると、初期状態が消音になります。既定値は false です。
-
{{htmlattrdef("preload")}}
-
列挙型の属性で、ユーザーに取って最良の結果をもたらすと作者が考えていることのヒントをブラウザーに伝えるためのものです。以下の値のうちひとつを持つことができます。 -
    -
  • none: 音声を事前に読み込むべきではないことを示します。
    • -
  • metadata: 音声のメタデータ (例えば、長さ) を読み込みます。
    • -
  • auto: ユーザーが音声ファイルを使用しないと思われる場合でも、ファイル全体をダウンロードしてよいことを示します。
    • -
  • 空文字列: これは auto 値と同義です。
    • -
- -

既定値はブラウザーによって異なります。仕様書では metadata にするよう助言しています。

- -
使用上のメモ: - -
    -
  • autoplay 属性は preload より優先します。autoplay を指定すると、言うまでもなくブラウザーは音声を再生するためにダウンロードを始めなければなりません。
    • -
  • 仕様書は、ブラウザーがこの属性の値に従うことを強制していません。これは単なるヒントです。
    • -
-
-
-
{{htmlattrdef("src")}}
-
埋め込む音声コンテンツの URL を指定します。なお、この属性は HTTP access controls に従います。この属性を省略し、audio 要素の子要素として配置した {{htmlelement("source")}} 要素とその src 属性を用いて指定することも可能であり、その場合、これを複数設置することで、異なるタイプの複数の代替コンテンツを配置することが可能となります。
-
- -

イベント

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
イベント名発生する時
{{Event("audioprocess")}}{{DOMxRef("ScriptProcessorNode")}} の入力バッファが処理可能になった。
{{domxref("HTMLMediaElement.canplay_event", 'canplay')}}ブラウザーがメディアを再生できるようになったものの、追加のバッファリングのために停止することなくメディアの最後まで再生するには、充分なデータが読み込まれていないとみられる。
{{domxref("HTMLMediaElement.canplaythrough_event", 'canplaythrough')}}ブラウザーがコンテンツのバッファリングのために停止することなく最後までメディアを再生することができるとみられる。
{{Event("complete")}}{{DOMxRef("OfflineAudioContext")}} のレンダリングが終了した。
{{domxref("HTMLMediaElement.durationchange_event", 'durationchange')}}duration 属性が更新された。
{{domxref("HTMLMediaElement.emptied_event", 'emptied')}}メディアが空になった。例えば、このイベントはメディアがすでに読み込まれた (または部分的に読み込まれた) 状態で、再読み込みのために load() メソッドが呼び出された場合など。
{{domxref("HTMLMediaElement.ended_event", 'ended')}}メディアの末尾に達したために再生が停止した。
{{domxref("HTMLMediaElement.loadeddata_event", 'loadeddata')}}メディアの最初のフレームが読み込み終わった。
{{domxref("HTMLMediaElement.loadedmetadata_event", 'loadedmetadata')}}メタデータを読み込んだ。
{{domxref("HTMLMediaElement.pause_event", 'pause')}}再生が一時停止した。
{{domxref("HTMLMediaElement.play_event", 'play')}}再生が始まった。
{{domxref("HTMLMediaElement.playing_event", 'playing ')}}データがなくなったために一時停止または遅延した後で、再生の再開の準備ができた。
{{domxref("HTMLMediaElement.ratechange_event", 'ratechange')}}再生レートが変更された。
{{domxref("HTMLMediaElement.seeked_event", 'seeked')}}シーク操作が完了した。
{{domxref("HTMLMediaElement.seeking_event", 'seeking')}}シーク操作が始まった。
{{domxref("HTMLMediaElement.stalled_event", 'stalled')}}ユーザーエージェントがメディアを読み込もうとしているが、データが予期せずに入ってこない。
{{domxref("HTMLMediaElement.suspend_event", 'suspend')}}メディアデータの読み込みが停止した。
{{domxref("HTMLMediaElement.timeupdate_event", 'timeupdate')}}currentTime 属性で示されている時刻が更新された。
{{domxref("HTMLMediaElement.volumechange_event", 'volumechange')}}音量が変更された。
{{domxref("HTMLMediaElement.waiting_event", 'waiting')}}一時的なデータの不足により、再生が停止した。
+{{HTMLRef}} + +**HTML の `