From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/html/applying_color/index.html | 511 ++++++++ files/ja/web/html/attributes/accept/index.html | 171 +++ .../ja/web/html/attributes/autocomplete/index.html | 272 ++++ .../ja/web/html/attributes/crossorigin/index.html | 104 ++ files/ja/web/html/attributes/index.html | 769 +++++++++++ files/ja/web/html/attributes/max/index.html | 166 +++ files/ja/web/html/attributes/maxlength/index.html | 59 + files/ja/web/html/attributes/min/index.html | 158 +++ files/ja/web/html/attributes/minlength/index.html | 72 + files/ja/web/html/attributes/multiple/index.html | 185 +++ files/ja/web/html/attributes/pattern/index.html | 163 +++ files/ja/web/html/attributes/required/index.html | 109 ++ files/ja/web/html/attributes/size/index.html | 76 ++ files/ja/web/html/attributes/step/index.html | 132 ++ files/ja/web/html/block-level_elements/index.html | 128 ++ files/ja/web/html/cors_enabled_image/index.html | 120 ++ files/ja/web/html/date_and_time_formats/index.html | 466 +++++++ files/ja/web/html/element/a/index.html | 503 +++++++ files/ja/web/html/element/abbr/index.html | 208 +++ files/ja/web/html/element/acronym/index.html | 81 ++ files/ja/web/html/element/address/index.html | 140 ++ files/ja/web/html/element/applet/index.html | 140 ++ files/ja/web/html/element/area/index.html | 187 +++ files/ja/web/html/element/article/index.html | 149 +++ files/ja/web/html/element/aside/index.html | 129 ++ files/ja/web/html/element/audio/index.html | 419 ++++++ files/ja/web/html/element/b/index.html | 124 ++ files/ja/web/html/element/base/index.html | 137 ++ files/ja/web/html/element/basefont/index.html | 65 + files/ja/web/html/element/bdi/index.html | 210 +++ files/ja/web/html/element/bdo/index.html | 128 ++ files/ja/web/html/element/bgsound/index.html | 57 + files/ja/web/html/element/big/index.html | 86 ++ files/ja/web/html/element/blink/index.html | 83 ++ files/ja/web/html/element/blockquote/index.html | 137 ++ files/ja/web/html/element/body/index.html | 166 +++ files/ja/web/html/element/br/index.html | 142 ++ files/ja/web/html/element/button/index.html | 304 +++++ files/ja/web/html/element/canvas/index.html | 201 +++ files/ja/web/html/element/caption/index.html | 172 +++ files/ja/web/html/element/center/index.html | 61 + files/ja/web/html/element/cite/index.html | 154 +++ files/ja/web/html/element/code/index.html | 120 ++ files/ja/web/html/element/col/index.html | 177 +++ files/ja/web/html/element/colgroup/index.html | 183 +++ files/ja/web/html/element/command/index.html | 109 ++ files/ja/web/html/element/content/index.html | 109 ++ files/ja/web/html/element/data/index.html | 108 ++ files/ja/web/html/element/datalist/index.html | 119 ++ files/ja/web/html/element/dd/index.html | 107 ++ files/ja/web/html/element/del/index.html | 148 +++ files/ja/web/html/element/details/index.html | 280 ++++ files/ja/web/html/element/dfn/index.html | 219 ++++ files/ja/web/html/element/dialog/index.html | 186 +++ files/ja/web/html/element/dir/index.html | 55 + files/ja/web/html/element/div/index.html | 148 +++ files/ja/web/html/element/dl/index.html | 225 ++++ files/ja/web/html/element/dt/index.html | 102 ++ files/ja/web/html/element/element/index.html | 64 + files/ja/web/html/element/em/index.html | 132 ++ files/ja/web/html/element/embed/index.html | 131 ++ files/ja/web/html/element/fieldset/index.html | 163 +++ files/ja/web/html/element/figcaption/index.html | 91 ++ files/ja/web/html/element/figure/index.html | 171 +++ files/ja/web/html/element/font/index.html | 52 + files/ja/web/html/element/footer/index.html | 115 ++ files/ja/web/html/element/form/index.html | 202 +++ files/ja/web/html/element/frame/index.html | 58 + files/ja/web/html/element/frameset/index.html | 47 + files/ja/web/html/element/head/index.html | 131 ++ files/ja/web/html/element/header/index.html | 121 ++ .../web/html/element/heading_elements/index.html | 258 ++++ files/ja/web/html/element/hgroup/index.html | 145 +++ files/ja/web/html/element/hr/index.html | 132 ++ files/ja/web/html/element/html/index.html | 121 ++ files/ja/web/html/element/i/index.html | 130 ++ files/ja/web/html/element/iframe/index.html | 272 ++++ files/ja/web/html/element/image/index.html | 48 + files/ja/web/html/element/img/index.html | 443 +++++++ files/ja/web/html/element/index.html | 107 ++ files/ja/web/html/element/input/button/index.html | 351 +++++ .../ja/web/html/element/input/checkbox/index.html | 344 +++++ files/ja/web/html/element/input/color/index.html | 228 ++++ files/ja/web/html/element/input/date/index.html | 527 ++++++++ .../html/element/input/datetime-local/index.html | 637 +++++++++ .../ja/web/html/element/input/datetime/index.html | 29 + files/ja/web/html/element/input/email/index.html | 416 ++++++ files/ja/web/html/element/input/file/index.html | 523 ++++++++ files/ja/web/html/element/input/hidden/index.html | 228 ++++ files/ja/web/html/element/input/image/index.html | 414 ++++++ files/ja/web/html/element/input/index.html | 1376 ++++++++++++++++++++ files/ja/web/html/element/input/month/index.html | 490 +++++++ files/ja/web/html/element/input/number/index.html | 451 +++++++ .../ja/web/html/element/input/password/index.html | 315 +++++ files/ja/web/html/element/input/radio/index.html | 376 ++++++ files/ja/web/html/element/input/range/index.html | 525 ++++++++ files/ja/web/html/element/input/reset/index.html | 177 +++ files/ja/web/html/element/input/search/index.html | 475 +++++++ files/ja/web/html/element/input/submit/index.html | 286 ++++ files/ja/web/html/element/input/tel/index.html | 544 ++++++++ files/ja/web/html/element/input/text/index.html | 471 +++++++ files/ja/web/html/element/input/time/index.html | 554 ++++++++ files/ja/web/html/element/input/url/index.html | 427 ++++++ files/ja/web/html/element/input/week/index.html | 398 ++++++ files/ja/web/html/element/ins/index.html | 145 +++ files/ja/web/html/element/isindex/index.html | 78 ++ files/ja/web/html/element/kbd/index.html | 213 +++ files/ja/web/html/element/keygen/index.html | 124 ++ files/ja/web/html/element/label/index.html | 198 +++ files/ja/web/html/element/legend/index.html | 101 ++ files/ja/web/html/element/li/index.html | 158 +++ files/ja/web/html/element/link/index.html | 375 ++++++ files/ja/web/html/element/listing/index.html | 52 + files/ja/web/html/element/main/index.html | 173 +++ files/ja/web/html/element/map/index.html | 126 ++ files/ja/web/html/element/mark/index.html | 175 +++ files/ja/web/html/element/marquee/index.html | 121 ++ files/ja/web/html/element/menu/index.html | 216 +++ files/ja/web/html/element/menuitem/index.html | 155 +++ files/ja/web/html/element/meta/index.html | 475 +++++++ files/ja/web/html/element/meta/name/index.html | 312 +++++ files/ja/web/html/element/meter/index.html | 147 +++ files/ja/web/html/element/multicol/index.html | 36 + files/ja/web/html/element/nav/index.html | 121 ++ files/ja/web/html/element/nobr/index.html | 35 + files/ja/web/html/element/noembed/index.html | 39 + files/ja/web/html/element/noframes/index.html | 79 ++ files/ja/web/html/element/noscript/index.html | 107 ++ files/ja/web/html/element/object/index.html | 149 +++ files/ja/web/html/element/ol/index.html | 224 ++++ files/ja/web/html/element/optgroup/index.html | 128 ++ files/ja/web/html/element/option/index.html | 112 ++ files/ja/web/html/element/output/index.html | 113 ++ files/ja/web/html/element/p/index.html | 188 +++ files/ja/web/html/element/param/index.html | 114 ++ files/ja/web/html/element/picture/index.html | 166 +++ files/ja/web/html/element/plaintext/index.html | 54 + files/ja/web/html/element/pre/index.html | 152 +++ files/ja/web/html/element/progress/index.html | 127 ++ files/ja/web/html/element/q/index.html | 122 ++ files/ja/web/html/element/rb/index.html | 149 +++ files/ja/web/html/element/rp/index.html | 144 ++ files/ja/web/html/element/rt/index.html | 137 ++ files/ja/web/html/element/rtc/index.html | 124 ++ files/ja/web/html/element/ruby/index.html | 114 ++ files/ja/web/html/element/s/index.html | 135 ++ files/ja/web/html/element/samp/index.html | 166 +++ files/ja/web/html/element/script/index.html | 233 ++++ files/ja/web/html/element/section/index.html | 128 ++ files/ja/web/html/element/select/index.html | 636 +++++++++ files/ja/web/html/element/shadow/index.html | 111 ++ files/ja/web/html/element/slot/index.html | 122 ++ files/ja/web/html/element/small/index.html | 126 ++ files/ja/web/html/element/source/index.html | 165 +++ files/ja/web/html/element/spacer/index.html | 53 + files/ja/web/html/element/span/index.html | 129 ++ files/ja/web/html/element/strike/index.html | 79 ++ files/ja/web/html/element/strong/index.html | 146 +++ files/ja/web/html/element/style/index.html | 209 +++ files/ja/web/html/element/sub/index.html | 153 +++ files/ja/web/html/element/summary/index.html | 164 +++ files/ja/web/html/element/sup/index.html | 148 +++ files/ja/web/html/element/table/index.html | 715 ++++++++++ files/ja/web/html/element/tbody/index.html | 328 +++++ files/ja/web/html/element/td/index.html | 233 ++++ files/ja/web/html/element/template/index.html | 207 +++ files/ja/web/html/element/textarea/index.html | 277 ++++ files/ja/web/html/element/tfoot/index.html | 151 +++ files/ja/web/html/element/th/index.html | 239 ++++ files/ja/web/html/element/thead/index.html | 215 +++ files/ja/web/html/element/time/index.html | 177 +++ files/ja/web/html/element/title/index.html | 143 ++ files/ja/web/html/element/tr/index.html | 594 +++++++++ files/ja/web/html/element/track/index.html | 182 +++ files/ja/web/html/element/tt/index.html | 143 ++ files/ja/web/html/element/u/index.html | 216 +++ files/ja/web/html/element/ul/index.html | 195 +++ files/ja/web/html/element/var/index.html | 154 +++ files/ja/web/html/element/video/index.html | 465 +++++++ files/ja/web/html/element/wbr/index.html | 106 ++ files/ja/web/html/element/xmp/index.html | 52 + files/ja/web/html/forms_in_html/index.html | 46 + .../html/global_attributes/accesskey/index.html | 142 ++ .../global_attributes/autocapitalize/index.html | 50 + .../ja/web/html/global_attributes/class/index.html | 65 + .../global_attributes/contenteditable/index.html | 83 ++ .../html/global_attributes/contextmenu/index.html | 122 ++ .../html/global_attributes/data-_star_/index.html | 82 ++ files/ja/web/html/global_attributes/dir/index.html | 93 ++ .../html/global_attributes/draggable/index.html | 66 + .../web/html/global_attributes/dropzone/index.html | 48 + .../web/html/global_attributes/hidden/index.html | 71 + files/ja/web/html/global_attributes/id/index.html | 74 ++ files/ja/web/html/global_attributes/index.html | 199 +++ .../html/global_attributes/inputmode/index.html | 72 + files/ja/web/html/global_attributes/is/index.html | 67 + .../web/html/global_attributes/itemid/index.html | 107 ++ .../web/html/global_attributes/itemprop/index.html | 475 +++++++ .../web/html/global_attributes/itemref/index.html | 98 ++ .../html/global_attributes/itemscope/index.html | 290 +++++ .../web/html/global_attributes/itemtype/index.html | 255 ++++ .../ja/web/html/global_attributes/lang/index.html | 90 ++ .../ja/web/html/global_attributes/part/index.html | 46 + .../ja/web/html/global_attributes/slot/index.html | 50 + .../html/global_attributes/spellcheck/index.html | 67 + .../ja/web/html/global_attributes/style/index.html | 70 + .../web/html/global_attributes/tabindex/index.html | 94 ++ .../ja/web/html/global_attributes/title/index.html | 126 ++ .../html/global_attributes/translate/index.html | 64 + .../x-ms-format-detection/index.html | 39 + files/ja/web/html/html_extensions/index.html | 12 + files/ja/web/html/index.html | 109 ++ files/ja/web/html/index/index.html | 10 + files/ja/web/html/inline_elements/index.html | 171 +++ files/ja/web/html/link_types/index.html | 364 ++++++ files/ja/web/html/microdata/index.html | 175 +++ files/ja/web/html/microformats/index.html | 462 +++++++ files/ja/web/html/preloading_content/index.html | 243 ++++ .../html/quirks_mode_and_standards_mode/index.html | 56 + files/ja/web/html/reference/index.html | 31 + .../html/using_the_application_cache/index.html | 350 +++++ 221 files changed, 42842 insertions(+) create mode 100644 files/ja/web/html/applying_color/index.html create mode 100644 files/ja/web/html/attributes/accept/index.html create mode 100644 files/ja/web/html/attributes/autocomplete/index.html create mode 100644 files/ja/web/html/attributes/crossorigin/index.html create mode 100644 files/ja/web/html/attributes/index.html create mode 100644 files/ja/web/html/attributes/max/index.html create mode 100644 files/ja/web/html/attributes/maxlength/index.html create mode 100644 files/ja/web/html/attributes/min/index.html create mode 100644 files/ja/web/html/attributes/minlength/index.html create mode 100644 files/ja/web/html/attributes/multiple/index.html create mode 100644 files/ja/web/html/attributes/pattern/index.html create mode 100644 files/ja/web/html/attributes/required/index.html create mode 100644 files/ja/web/html/attributes/size/index.html create mode 100644 files/ja/web/html/attributes/step/index.html create mode 100644 files/ja/web/html/block-level_elements/index.html create mode 100644 files/ja/web/html/cors_enabled_image/index.html create mode 100644 files/ja/web/html/date_and_time_formats/index.html create mode 100644 files/ja/web/html/element/a/index.html create mode 100644 files/ja/web/html/element/abbr/index.html create mode 100644 files/ja/web/html/element/acronym/index.html create mode 100644 files/ja/web/html/element/address/index.html create mode 100644 files/ja/web/html/element/applet/index.html create mode 100644 files/ja/web/html/element/area/index.html create mode 100644 files/ja/web/html/element/article/index.html create mode 100644 files/ja/web/html/element/aside/index.html create mode 100644 files/ja/web/html/element/audio/index.html create mode 100644 files/ja/web/html/element/b/index.html create mode 100644 files/ja/web/html/element/base/index.html create mode 100644 files/ja/web/html/element/basefont/index.html create mode 100644 files/ja/web/html/element/bdi/index.html create mode 100644 files/ja/web/html/element/bdo/index.html create mode 100644 files/ja/web/html/element/bgsound/index.html create mode 100644 files/ja/web/html/element/big/index.html create mode 100644 files/ja/web/html/element/blink/index.html create mode 100644 files/ja/web/html/element/blockquote/index.html create mode 100644 files/ja/web/html/element/body/index.html create mode 100644 files/ja/web/html/element/br/index.html create mode 100644 files/ja/web/html/element/button/index.html create mode 100644 files/ja/web/html/element/canvas/index.html create mode 100644 files/ja/web/html/element/caption/index.html create mode 100644 files/ja/web/html/element/center/index.html create mode 100644 files/ja/web/html/element/cite/index.html create mode 100644 files/ja/web/html/element/code/index.html create mode 100644 files/ja/web/html/element/col/index.html create mode 100644 files/ja/web/html/element/colgroup/index.html create mode 100644 files/ja/web/html/element/command/index.html create mode 100644 files/ja/web/html/element/content/index.html create mode 100644 files/ja/web/html/element/data/index.html create mode 100644 files/ja/web/html/element/datalist/index.html create mode 100644 files/ja/web/html/element/dd/index.html create mode 100644 files/ja/web/html/element/del/index.html create mode 100644 files/ja/web/html/element/details/index.html create mode 100644 files/ja/web/html/element/dfn/index.html create mode 100644 files/ja/web/html/element/dialog/index.html create mode 100644 files/ja/web/html/element/dir/index.html create mode 100644 files/ja/web/html/element/div/index.html create mode 100644 files/ja/web/html/element/dl/index.html create mode 100644 files/ja/web/html/element/dt/index.html create mode 100644 files/ja/web/html/element/element/index.html create mode 100644 files/ja/web/html/element/em/index.html create mode 100644 files/ja/web/html/element/embed/index.html create mode 100644 files/ja/web/html/element/fieldset/index.html create mode 100644 files/ja/web/html/element/figcaption/index.html create mode 100644 files/ja/web/html/element/figure/index.html create mode 100644 files/ja/web/html/element/font/index.html create mode 100644 files/ja/web/html/element/footer/index.html create mode 100644 files/ja/web/html/element/form/index.html create mode 100644 files/ja/web/html/element/frame/index.html create mode 100644 files/ja/web/html/element/frameset/index.html create mode 100644 files/ja/web/html/element/head/index.html create mode 100644 files/ja/web/html/element/header/index.html create mode 100644 files/ja/web/html/element/heading_elements/index.html create mode 100644 files/ja/web/html/element/hgroup/index.html create mode 100644 files/ja/web/html/element/hr/index.html create mode 100644 files/ja/web/html/element/html/index.html create mode 100644 files/ja/web/html/element/i/index.html create mode 100644 files/ja/web/html/element/iframe/index.html create mode 100644 files/ja/web/html/element/image/index.html create mode 100644 files/ja/web/html/element/img/index.html create mode 100644 files/ja/web/html/element/index.html create mode 100644 files/ja/web/html/element/input/button/index.html create mode 100644 files/ja/web/html/element/input/checkbox/index.html create mode 100644 files/ja/web/html/element/input/color/index.html create mode 100644 files/ja/web/html/element/input/date/index.html create mode 100644 files/ja/web/html/element/input/datetime-local/index.html create mode 100644 files/ja/web/html/element/input/datetime/index.html create mode 100644 files/ja/web/html/element/input/email/index.html create mode 100644 files/ja/web/html/element/input/file/index.html create mode 100644 files/ja/web/html/element/input/hidden/index.html create mode 100644 files/ja/web/html/element/input/image/index.html create mode 100644 files/ja/web/html/element/input/index.html create mode 100644 files/ja/web/html/element/input/month/index.html create mode 100644 files/ja/web/html/element/input/number/index.html create mode 100644 files/ja/web/html/element/input/password/index.html create mode 100644 files/ja/web/html/element/input/radio/index.html create mode 100644 files/ja/web/html/element/input/range/index.html create mode 100644 files/ja/web/html/element/input/reset/index.html create mode 100644 files/ja/web/html/element/input/search/index.html create mode 100644 files/ja/web/html/element/input/submit/index.html create mode 100644 files/ja/web/html/element/input/tel/index.html create mode 100644 files/ja/web/html/element/input/text/index.html create mode 100644 files/ja/web/html/element/input/time/index.html create mode 100644 files/ja/web/html/element/input/url/index.html create mode 100644 files/ja/web/html/element/input/week/index.html create mode 100644 files/ja/web/html/element/ins/index.html create mode 100644 files/ja/web/html/element/isindex/index.html create mode 100644 files/ja/web/html/element/kbd/index.html create mode 100644 files/ja/web/html/element/keygen/index.html create mode 100644 files/ja/web/html/element/label/index.html create mode 100644 files/ja/web/html/element/legend/index.html create mode 100644 files/ja/web/html/element/li/index.html create mode 100644 files/ja/web/html/element/link/index.html create mode 100644 files/ja/web/html/element/listing/index.html create mode 100644 files/ja/web/html/element/main/index.html create mode 100644 files/ja/web/html/element/map/index.html create mode 100644 files/ja/web/html/element/mark/index.html create mode 100644 files/ja/web/html/element/marquee/index.html create mode 100644 files/ja/web/html/element/menu/index.html create mode 100644 files/ja/web/html/element/menuitem/index.html create mode 100644 files/ja/web/html/element/meta/index.html create mode 100644 files/ja/web/html/element/meta/name/index.html create mode 100644 files/ja/web/html/element/meter/index.html create mode 100644 files/ja/web/html/element/multicol/index.html create mode 100644 files/ja/web/html/element/nav/index.html create mode 100644 files/ja/web/html/element/nobr/index.html create mode 100644 files/ja/web/html/element/noembed/index.html create mode 100644 files/ja/web/html/element/noframes/index.html create mode 100644 files/ja/web/html/element/noscript/index.html create mode 100644 files/ja/web/html/element/object/index.html create mode 100644 files/ja/web/html/element/ol/index.html create mode 100644 files/ja/web/html/element/optgroup/index.html create mode 100644 files/ja/web/html/element/option/index.html create mode 100644 files/ja/web/html/element/output/index.html create mode 100644 files/ja/web/html/element/p/index.html create mode 100644 files/ja/web/html/element/param/index.html create mode 100644 files/ja/web/html/element/picture/index.html create mode 100644 files/ja/web/html/element/plaintext/index.html create mode 100644 files/ja/web/html/element/pre/index.html create mode 100644 files/ja/web/html/element/progress/index.html create mode 100644 files/ja/web/html/element/q/index.html create mode 100644 files/ja/web/html/element/rb/index.html create mode 100644 files/ja/web/html/element/rp/index.html create mode 100644 files/ja/web/html/element/rt/index.html create mode 100644 files/ja/web/html/element/rtc/index.html create mode 100644 files/ja/web/html/element/ruby/index.html create mode 100644 files/ja/web/html/element/s/index.html create mode 100644 files/ja/web/html/element/samp/index.html create mode 100644 files/ja/web/html/element/script/index.html create mode 100644 files/ja/web/html/element/section/index.html create mode 100644 files/ja/web/html/element/select/index.html create mode 100644 files/ja/web/html/element/shadow/index.html create mode 100644 files/ja/web/html/element/slot/index.html create mode 100644 files/ja/web/html/element/small/index.html create mode 100644 files/ja/web/html/element/source/index.html create mode 100644 files/ja/web/html/element/spacer/index.html create mode 100644 files/ja/web/html/element/span/index.html create mode 100644 files/ja/web/html/element/strike/index.html create mode 100644 files/ja/web/html/element/strong/index.html create mode 100644 files/ja/web/html/element/style/index.html create mode 100644 files/ja/web/html/element/sub/index.html create mode 100644 files/ja/web/html/element/summary/index.html create mode 100644 files/ja/web/html/element/sup/index.html create mode 100644 files/ja/web/html/element/table/index.html create mode 100644 files/ja/web/html/element/tbody/index.html create mode 100644 files/ja/web/html/element/td/index.html create mode 100644 files/ja/web/html/element/template/index.html create mode 100644 files/ja/web/html/element/textarea/index.html create mode 100644 files/ja/web/html/element/tfoot/index.html create mode 100644 files/ja/web/html/element/th/index.html create mode 100644 files/ja/web/html/element/thead/index.html create mode 100644 files/ja/web/html/element/time/index.html create mode 100644 files/ja/web/html/element/title/index.html create mode 100644 files/ja/web/html/element/tr/index.html create mode 100644 files/ja/web/html/element/track/index.html create mode 100644 files/ja/web/html/element/tt/index.html create mode 100644 files/ja/web/html/element/u/index.html create mode 100644 files/ja/web/html/element/ul/index.html create mode 100644 files/ja/web/html/element/var/index.html create mode 100644 files/ja/web/html/element/video/index.html create mode 100644 files/ja/web/html/element/wbr/index.html create mode 100644 files/ja/web/html/element/xmp/index.html create mode 100644 files/ja/web/html/forms_in_html/index.html create mode 100644 files/ja/web/html/global_attributes/accesskey/index.html create mode 100644 files/ja/web/html/global_attributes/autocapitalize/index.html create mode 100644 files/ja/web/html/global_attributes/class/index.html create mode 100644 files/ja/web/html/global_attributes/contenteditable/index.html create mode 100644 files/ja/web/html/global_attributes/contextmenu/index.html create mode 100644 files/ja/web/html/global_attributes/data-_star_/index.html create mode 100644 files/ja/web/html/global_attributes/dir/index.html create mode 100644 files/ja/web/html/global_attributes/draggable/index.html create mode 100644 files/ja/web/html/global_attributes/dropzone/index.html create mode 100644 files/ja/web/html/global_attributes/hidden/index.html create mode 100644 files/ja/web/html/global_attributes/id/index.html create mode 100644 files/ja/web/html/global_attributes/index.html create mode 100644 files/ja/web/html/global_attributes/inputmode/index.html create mode 100644 files/ja/web/html/global_attributes/is/index.html create mode 100644 files/ja/web/html/global_attributes/itemid/index.html create mode 100644 files/ja/web/html/global_attributes/itemprop/index.html create mode 100644 files/ja/web/html/global_attributes/itemref/index.html create mode 100644 files/ja/web/html/global_attributes/itemscope/index.html create mode 100644 files/ja/web/html/global_attributes/itemtype/index.html create mode 100644 files/ja/web/html/global_attributes/lang/index.html create mode 100644 files/ja/web/html/global_attributes/part/index.html create mode 100644 files/ja/web/html/global_attributes/slot/index.html create mode 100644 files/ja/web/html/global_attributes/spellcheck/index.html create mode 100644 files/ja/web/html/global_attributes/style/index.html create mode 100644 files/ja/web/html/global_attributes/tabindex/index.html create mode 100644 files/ja/web/html/global_attributes/title/index.html create mode 100644 files/ja/web/html/global_attributes/translate/index.html create mode 100644 files/ja/web/html/global_attributes/x-ms-format-detection/index.html create mode 100644 files/ja/web/html/html_extensions/index.html create mode 100644 files/ja/web/html/index.html create mode 100644 files/ja/web/html/index/index.html create mode 100644 files/ja/web/html/inline_elements/index.html create mode 100644 files/ja/web/html/link_types/index.html create mode 100644 files/ja/web/html/microdata/index.html create mode 100644 files/ja/web/html/microformats/index.html create mode 100644 files/ja/web/html/preloading_content/index.html create mode 100644 files/ja/web/html/quirks_mode_and_standards_mode/index.html create mode 100644 files/ja/web/html/reference/index.html create mode 100644 files/ja/web/html/using_the_application_cache/index.html (limited to 'files/ja/web/html') diff --git a/files/ja/web/html/applying_color/index.html b/files/ja/web/html/applying_color/index.html new file mode 100644 index 0000000000..02e1596709 --- /dev/null +++ b/files/ja/web/html/applying_color/index.html @@ -0,0 +1,511 @@ +--- +title: CSS を使った HTML の要素への色の適用 +slug: Web/HTML/Applying_color +tags: + - Beginner + - CSS + - CSS 色 + - Guide + - HTML + - HTML スタイル + - HTML 色 + - color +translation_of: Web/HTML/Applying_color +--- +
{{HTMLRef}}
+ +

色を使うことは、人間の表現の基礎的な姿です。子どもは絵がうまくなるより前に色を試してみるものです。恐らくこれが、人々がウェブサイトの開発を学ぶときに色を最初に学ぶ理由でしょう。CSS では、 HTML 要素に色を追加して望みの外見にする方法がたくさんあります。この記事では CSS の色を HTML の中で利用できるそれぞれの方法の基本をご案内します。

+ +

運の良いことに、 HTML に色をつけることは本当にかんたんで、またほとんどすべての要素に色をつけることができます。

+ +

{{anch("Things that can have color", "色を付けることができる物の一覧とそのための CSS プロパティ")}}、{{anch("How to describe a color", "色の記述方法")}}、{{anch("Using color", "スタイルシートとスクリプトでの色の利用")}}など、色を使うときに知る必要があることの多くに触れていきます。{{anch("Letting the user picka color", "ユーザーに色を選択させる")}}方法にも触れます。

+ +

それから、{{anch("Using color wisely", "賢い色の使い方")}}について短い議論を行います。様々な視力の人がいることを意識した、適切な色の選択方法です。

+ +

色をつけられるもの

+ +

要素レベルでは、 HTML のすべてのものに色をつけることができます。Instead, let's look at things in terms of the kinds of things that are drawn in the elements, such as text and borders and so forth. それぞれについて、それらに色をつけられるCSSのプロパティのリストを見てみましょう。

+ +

基礎的・入門的なレベルにおいては、 {{cssxref("color")}} プロパティは HTML 要素のコンテンツの色を定義し、また {{cssxref("background-color")}} は HTML 要素の背景色を定義します。 これらのプロパティはほとんどすべての要素について使用できます。

+ +

テキスト

+ +

要素がレンダリングされるときにはいつも、以下のプロパティにもとづきテキストの色、背景の色、そしてテキストの装飾が決定されます。

+ +
+
{{cssxref("color")}}
+
The color to use when drawing the text and any text decorations (such as the addition of under- or overlines, strike-through lines, and so forth.
+
{{cssxref("background-color")}}
+
テキストの背景の色
+
{{cssxref("text-shadow")}}
+
Configures a shadow effect to apply to text. Among the options for the shadow is the shadow's base color (which is then blurred and blended with the background based on the other parameters). See {{SectionOnPage("/ja/docs/Learn/CSS/Styling_text/Fundamentals", "Text drop shadows")}} to learn more.
+
{{cssxref("text-decoration-color")}}
+
By default, text decorations (such as underlines, strikethroughs, etc) use the color property as their colors. However, you can override that behavior and use a different color for them with the text-decoration-color property.
+
{{cssxref("text-emphasis-color")}}
+
The color to use when drawing emphasis symbols adjacent to each character in the text. This is used primarily when drawing text for East Asian languages.
+
{{cssxref("caret-color")}}
+
The color to use when drawing the {{Glossary("caret")}} (sometimes referred to as the text input cursor) within the element. This is only useful in elements that are editable, such as {{HTMLElement("input")}} and {{HTMLElement("textarea")}} or elements whose HTML {{htmlattrxref("contenteditable")}} attribute is set.
+
+ +

ボックス

+ +

Every element is a box with some sort of content, and has a background and a border in addition to whatever contents the box may have.

+ +
+
{{anch("Borders")}}
+
See the section {{anch("Borders")}} for a list of the CSS properties you can use to set the colors of a box's borders.
+
{{cssxref("background-color")}}
+
要素の前面になにもない時、その要素の範囲に使われる背景の色です。
+
{{cssxref("column-rule-color")}}
+
テキストの列（カラム）を区切る線に使われる色です。
+
{{cssxref("outline-color")}}
+
The color to use when drawing an outline around the outside of the element. This outline is different from the border in that it doesn't get space set aside for it in the document (so it may overlap other content). It's generally used as a focus indicator, to show which element will receive input events.
+
+ +

境界線

+ +

あらゆる要素には、まわりに境界線が存在します。 基本的な要素の境界は、要素の内容の端に描かれている線です。 See {{SectionOnPage("/ja/docs/Learn/CSS/Introduction_to_CSS/Box_model", "Box properties")}} to learn about the relationship between elements and their borders, and the article Styling borders using CSS to learn more about applying styles to borders.

+ +

You can use the {{cssxref("border")}} shorthand property, which lets you configure everything about the border in one shot (including non-color features of borders, such as its width, style (solid, dashed, etc.), and so forth.

+ +
+
{{cssxref("border-color")}}
+
Specifies a single color to use for every side of the element's border.
+
{{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, and {{cssxref("border-bottom-color")}}
+
Lets you set the color of the corresponding side of the element's border.
+
{{cssxref("border-block-start-color")}} and {{cssxref("border-block-end-color")}}
+
With these, you can set the color used to draw the borders which are closest to the start and end of the block the border surrounds. In a left-to-right writing mode (such as the way English is written), the block start border is the top edge and the block end is the bottom. This differs from the inline start and end, which are the left and right edges (corresponding to where each line of text in the box begins and ends).
+
{{cssxref("border-inline-start-color")}} and {{cssxref("border-inline-end-color")}}
+
These let you color the edges of the border closest to to the beginning and the end of the start of lines of text within the box. Which side this is will vary depending on the {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}} properties, which are typically (but not always) used to adjust text directionality based on the language being displayed. For example, if the box's text is being rendered right-to-left, then the border-inline-start-color is applied to the right side of the border.
+
+ +

色をつける他の方法

+ +

CSS が唯一の色を付けるためのウェブ技術ではありません。ウェブで使用することができ、色もサポートしているグラフィック技術があります。

+ +
+
HTMLの Canvas API
+
Canvas APIで、2Dのビットマップ画像を {{HTMLElement("canvas")}} 要素の中に描画しましょう。 より学ぶには次のリンクを参照してください: Canvas tutorial .
+
SVG (Scalable Vector Graphics)
+
SVGを用いれば、特定の形・パターン・線を描くコマンドを用いて画像を描くことができます。 SVGのコマンドはXMLの形式で、それにより直接ウェブページに埋め込む事ができ、またHTMLのimg要素を用いて、他の画像と同じように画像を配置することもできます。
+
WebGL
+
Web Graphics Library とはOpen GL ESを基礎にしたAPIで、これを用いるとウェブ上に2Dや3Dのハイパフォーマンスなグラフィックを描画することができます。より詳しく知るには WebGL チュートリアルを参照してください。
+
+ +

色をどうやって指定するか

+ +

CSSを用いて色を表現するには、アナログの概念である「色」の概念をコンピュータが解釈できるようなデジタルの形式に翻訳する方法を見つける必要があります。 This is typically done by breaking down the color into components, such as how much of each of a set of primary colors to mix together, or how bright to make the color. As such, there are several ways you can describe color in CSS.

+ +

For more detailed discussion of each of the color value types, see the reference for the CSS {{cssxref("<color>")}} unit.

+ +

キーワード

+ +

A set of standard color names have been defined, letting you use these keywords instead of numeric representations of colors if you choose to do so and there's a keyword representing the exact color you want to use. Color keywords include the standard primary and secondary colors (such as red, blue, or orange), shades of gray (from black to white, including colors like darkgray and lightgrey), and a variety of other blended colors including lightseagreen, cornflowerblue, and rebeccapurple.

+ +

See {{SectionOnPage("/ja/docs/Web/CSS/color_value", "Color keywords", "code")}} for a list of all available color keywords.

+ +

RGB値

+ +

There are three ways to represent an RGB color in CSS.

+ +

16進数の文字列表記

+ +

Hexadecimal string notation represents a color using hexadecimal digits to represent each of the color components (red, green, and blue). It may also include a fourth compoment: the alpha channel (or opacity). Each color component can be represented as a number between 0 and 255 (0x00 and 0xFF) or, optionally, as a number between 0 and 15 (0x0 and 0xF). All components must be specified using the same number of digits. If you use the single-digit notation, the final color is computed by using each component's digit twice; that is, "#D" becomes "#DD" when drawing.

+ +

A color in hexadecimal string notation always begins with the character "#". After that come the hexadecimal digits of the color code. The string is case-insensitive.

+ +
+
"#rrggbb"
+
Specifies a fully-opaque color whose red component is the hexadecimal number 0xrr, green component is 0xgg, and blue component is 0xbb.
+
"#rrggbbaa"
+
Specifies a color whose red component is the hexadecimal number 0xrr, green component is 0xgg, and blue component is 0xbb. The alpha channel is specified by 0xaa; the lower this value is, the more translucent the color becomes.
+
"#rgb"
+
Specifies a color whose red component is the hexadecimal number 0xrr, green component is 0xgg, and blue component is 0xbb.
+
"#rgba"
+
Specifies a color whose red component is the hexadecimal number 0xrr, green component is 0xgg, and blue component is 0xbb. The alpha channel is specified by 0xaa; the lower this value is, the more translucent the color becomes.
+
+ +

As an example, you can represent the opaque color bright blue as "#0000ff" or "#00f". To make it 25% opaque, you can use "#0000ff44" or "#00f4".

+ +

RGB 関数表記

+ +

RGB (Red/Green/Blue) functional notation, like hexadecimal string notation, represents colors using their red, green, and blue components (as well as, optionally, an alpha channel component for opacity). However, instead of using a string, the color is defined using the CSS function {{cssxref("color_value", "rgb()", "#rgb()")}}. This function accepts as its input parameters the values of the red, green, and blue components and an optional fourth parameter, the value for the alpha channel.

+ +

Legal values for each of these parameters are:

+ +
+
red, green, and blue
+
Each must be an {{cssxref("<integer>")}} value between 0 and 255 (inclusive), or a {{cssxref("<percentage>")}} from 0% to 100%.
+
alpha
+
The alpha channel is a number between 0.0 (fully transparent) and 1.0 (fully opaque). You can also specify a percentage where 0% is the same as 0.0 and 100% is the same as 1.0.
+
+ +

For example, a bright red that's 50% opaque can be represented as rgb(255, 0, 0, 0.5) or rgb(100%, 0, 0, 50%).

+ +

HSL 関数表記

+ +

デザイナーやアーティストたちは {{interwiki("wikipedia", "HSL and HSV", "HSL")}} (Hue/Saturation/Luminosity) をもちいて仕事をしたがる場合があります。 Webにおいては、HSL色はHSL関数表記をもちいて表現されています。CSSの hsl() 関数は、 rgb() 関数と表現方法においてとても似ています。

+ +
+
HSL 色円柱 +
図1 HSL 色円柱 Hue defines the actual color based on the position along a circular color wheel representing the colors of the visible spectrum. Saturation is a percentage of how much of the way between being a shade of gray and having the maximum possible amount of the given hue. As the value of luminance (or lightness) increases, the color transitions from the darkest possible to the brightest possible (from black to white). Image courtesy of user SharkD on Wikipedia, distributed under the CC BY-SA 3.0 license.
+
+
+ +

The value of the hue (H) component of an HSL color is an angle from red around through yellow, green, cyan, blue, and magenta (ending up back at red again at 360°) that identifies what the base color is. The value can be specified in any {{cssxref("<angle>")}} unit supported by CSS, including degrees (deg), radians (rad), gradians (grad), or turns (turn). But this doesn't control how vivid or dull, or how bright or dark the color is.

+ +

The saturation (S) component of the color specifies what percentage of the final color is comprised of the specified hue. The rest is defined by the grey level provided by the luminance (L) component.

+ +

Think of it like creating the perfect paint color:

+ +
    +
  1. You start with base paint that's the maximum intensity possible for a given color, such as the most intense blue that can be represented by the user's screen. This is the hue (H) component: a value representing the angle around the color wheel for the vivid hue we want to use as our base.
    2. +
  2. Then select a greyscale paint that corresponds how bright you want the color to be; this is the luminance. Do you want it to be very bright and nearly white, or very dark and closer to black, or somewhere in between? This is specified using a percentage, where 0% is perfectly black and 100% is perfectly white. (regardless of the saturation or hue). In between values are a literal grey area.
    3. +
  3. Now that you have a grey paint and a perfectly vivid color, you need to mix them together. The saturation (S) component of the color indicates what percentage of the final color should be comprised of that perfectly vivid color. The rest of the final color is made up of the grey paint that represents the saturation.
    4. +
+ +

You can also optionally include an alpha channel, to make the color less than 100% opaque.

+ +

Here are some sample colors in HSL notation:

+ +
+ + +

{{EmbedLiveSample("hsl-swatches", 300, 260)}}

+
+ +
+

hueの単位を省略した場合には、度 (deg)であるとされることに注意してください。

+
+ +

色の使用

+ +

Now that you know what CSS properties exist that let you apply color to elements and the formats you can use to describe colors, you can put this together to begin to make use of color. As you may have seen from the list under {{anch("Things that can have color")}}, there are plenty of things you can color with CSS. Let's look at this from two sides: using color within a {{Glossary("stylesheet")}}, and adding and changing color using {{Glossary("JavaScript")}} code to alter the styles of elements.

+ +

スタイルシート(CSS)を使った色の指定

+ +

The easiest way to apply color to elements—and the way you'll usually do it—is to simply specify colors in the CSS that's used when rendering elements. While we won't use every single property mentioned previously, we'll look at a couple of examples. The concept is the same anywhere you use color.

+ +

Let's take a look at an example, starting by looking at the results we're trying to achieve:

+ +
{{EmbedLiveSample("Specifying_colors_in_stylesheets", 650, 150)}}
+ +

HTML

+ +

The HTML responsible for creating the above example is shown here:

+ +
<div class="wrapper">
+  <div class="box boxLeft">
+    <p>
+      This is the first box.
+    </p>
+  </div>
+  <div class="box boxRight">
+    <p>
+      This is the second box.
+    </p>
+  </div>
+</div>
+ +

This is pretty simple, using a {{HTMLElement("div")}} as a wrapper around the contents, which consists of two more <div>s, each styled differently with a single paragraph ({{HTMLElement("p")}}) in each box.

+ +

The magic happens, as usual, in the CSS, where we'll apply colors define the layout for the HTML above.

+ +

CSS

+ +

We'll look at the CSS to create the above results a piece at a time, so we can review the interesting parts one by one.

+ +
.wrapper {
+  width: 620px;
+  height: 110px;
+  margin: 0;
+  padding: 10px;
+  border: 6px solid mediumturquoise;
+}
+ +

The .wrapper class is used to assign styles to the {{HTMLElement("div")}} that encloses all of our other content. This establishes thesize of the container using {{cssxref("width")}} and {{cssxref("height")}} as well as its {{cssxref("margin")}} and {{cssxref("padding")}}.

+ +

Of more interest to our discussion here is the use of the {{cssxref("border")}} property to establish a border around the outside edge of the element. This border is a solid line, 6 pixels wide, in the color mediumturquoise.

+ +

Our two colored boxes share a number of properties in common, so next we establish a class, .box, that defines those shared properties:

+ +
.box {
+  width: 290px;
+  height: 100px;
+  margin: 0;
+  padding: 4px 6px;
+  font: 28px "Marker Felt", "Zapfino", cursive;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+ +

In brief, .box establishes the size of each box, as well as the configuration of the font used within. We also take advantage of CSS Flexbox to easily center the contents of each box. We enable flex mode using {{cssxref("display", "display: flex")}}, and set both {{cssxref("justify-content")}} and {{cssxref("align-items")}} to center. Then we can create a class for each of the two boxes that defines the properties that differ between the two.

+ +
.boxLeft {
+  float: left;
+  background-color: rgb(245, 130, 130);
+  outline: 2px solid darkred;
+}
+ +

The .boxLeft class—which, cleverly, is used to style the box on the left—floats the box to the left, then sets up the colors:

+ + + +
.boxRight {
+  float: right;
+  background-color: hsl(270deg, 50%, 75%);
+  outline: 4px dashed rgb(110, 20, 120);
+  color: hsl(0deg, 100%, 100%);
+  text-decoration: underline wavy #88ff88;
+  text-shadow: 2px 2px 3px black;
+}
+ +

Finally, the .boxRight class describes the unique properties of the box that's drawn on the right. It's configured to float the box to the right so that it appears next to the previous box. Then the following colors are established:

+ + + +

ユーザーに色を選択させる

+ +

There are many situations in which your web site may need to let the user select a color. Perhaps you have a customizable user interface, or you're implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. Although historically it's been necessary to implement your own {{interwiki("wikipedia", "color picker")}}, HTML now provides support for browsers to provide one for your use through the {{HTMLElement("input")}} element, by using "color" as the value of its {{htmlattrxref("type", "input")}} attribute.

+ +

The <input> element represents a color only in the {{anch("Hexadecimal string notation", "hexadecimal string notation")}} covered above.

+ +

例: 色の選択

+ +

Let's look at a simple example, in which the user can choose a color. As the user adjusts the color, the border around the example changes to reflect the new color. After finishing up and picking the final color, the color picker's value is displayed.

+ +

{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}

+ +
+

On macOS, you indicate that you've finalized selection of the color by closing the color picker window.

+
+ +

HTML

+ +

The HTML here creates a box that contains a color picker control (with a label created using the {{HTMLElement("label")}} element) and an empty paragraph element ({{HTMLElement("p")}}) into which we'll output some text from our JavaScript code.

+ +
<div id="box">
+  <label for="colorPicker">Border color:</label>
+  <input type="color" value="#8888ff" id="colorPicker">
+  <p id="output"></p>
+</div>
+ +

CSS

+ +

The CSS simply establishes a size for the box and some basic styling for appearances. The border is also established with a 2-pixel width and a border color that won't last, courtesy of the JavaScript below...

+ +
#box {
+  width: 500px;
+  height: 200px;
+  border: 2px solid rgb(245, 220, 225);
+  padding: 4px 6px;
+  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"
+}
+ +

JavaScript

+ +

The script here handles the task of updating the starting color of the border to match the color picker's value. Then two event handlers are added to deal with input from the <input type="color"> element.

+ +
let colorPicker = document.getElementById("colorPicker");
+let box = document.getElementById("box");
+let output = document.getElementById("output");
+
+box.style.borderColor = colorPicker.value;
+
+colorPicker.addEventListener("input", function(event) {
+  box.style.borderColor = event.target.value;
+}, false);
+
+colorPicker.addEventListener("change", function(event) {
+  output.innerText = "Color set to " + colorPicker.value + ".";
+}, false);
+ +

The {{event("input")}} event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box's border color to match the color picker's current value.

+ +

The {{event("change")}} event is received when the color picker's value is finalized. We respond by setting the contents of the <p> element with the ID "output" to a string describing the finally selected color.

+ +

賢く色を使う

+ +

Making the right choices when selecting colors when designing a web site can be a tricky process, especially if you aren't well-grounded in art, design, or at least basic color theory. The wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. Worse still, if using the wrong colors can result in your content being outright unusable by people withcertain vision problems, particularly color blindness.

+ +

適切な色を見つける

+ +

Coming up with just the right colors can be tricky, especially without training in art or design. Fortunately, there are tools available that can help you. While they can't replace having a good designer helping you make these decisions, they can definitely get you started.

+ +

ベース色

+ +

The first step is to choose your base color. This is the color that in some way defines your web site or the subject matter of the site. Just as we associate green with the beverage {{interwiki("wikipedia", "Mountain Dew")}} and one might think of the color blue in relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. There are plenty of ways to select a base color; a few ideas include:

+ + + +

When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the web site ColorZilla offers an extension (Chrome / Firefox) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.

+ +
+

The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.

+
+ +

Fleshing out the palette

+ +

Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See {{anch("Color and accessibility")}} for a brief explanation of why this matters.

+ +

A few examples (all free to use as of the time this list was last revised):

+ + + +

When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you'll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.

+ +
+

Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.

+
+ +

色の理論に関する参考文献

+ +

A full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities. A couple of useful resources about color theory:

+ +
+
Color Science (Khan Academy in association with Pixar)
+
An online course which introduces concepts such as what color is, how it's percieved, and how to use colors to express ideas. Presented by Pixar artists and designers.
+
{{interwiki("wikipedia", "Color theory")}} on Wikipedia
+
Wikipedia's entry on color theory, which has a lot of great information from a technical perspective. It's not really a resource for helping you with the color sleection process, but is still full of useful information.
+
+ +

色とアクセシビリティ

+ +

There are several ways color can be an {{Glossary("accessibility")}} problem. Improper or careless use of color can result in a web site or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it's important to consider your use of color carefully.

+ +

You should do at least basic research into {{interwiki("wikipedia", "color blindness")}}. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.

+ +
+

The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won't be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what's happening.

+
+ +

For more information about color blindness, see the following articles:

+ + + +

パレットデザインの例

+ +

Let's consider a quick example of selecting an appropriate color palette for a site. Imagine that you're building a web site for a new game that takes place on the planet Mars. So let's do a Google search for photos of Mars. Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet's surface. We use a color picker tool to select a sample of the color we choose.

+ +

Using an eyedropper tool, we identify a color we like and determine that the color in question is #D79C7A, which is an appropriate rusty orange-red color that's so stereotypical of the Martian surface.

+ +

Having selected our base color, we need to build out our palette. We decide to use Paletton to come up with the other colors we need. Upon opening Paletton, we see:

+ +

Right after loading Paletton.

+ +

Next, we enter our color's hex code (D79C7A) into the "Base RGB" box at the bottom-left corner of the tool:

+ +

After entering base color

+ +

We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the "add complementary" toggle underneath the menu that lets you select the palette type (currently "Monochromatic"). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is #508D7C.

+ +

Now with complementary colors included.

+ +

If you're unhappy with the color that's proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don't like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following:

+ +

Triad color scheme selected

+ +

That greyish blue in the top-right looks pretty good. Clicking on it, we find that it's #556E8D. That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site:

+ +

Triad color scheme selected

+ +

Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them.

+ +

Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there's just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It's easy to go too far in one way or another so be sure to get feedback on your colors once you've selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at.

+ +

Color, backgrounds, contrast, and printing

+ +

What looks good on screen may look very different on paper. In addition, ink can be expensive, and if a user is printing your page, they don't necessarily need all the backgrounds and such using up their precious ink when all that matters is the text itself. Most browsers, by default, remove background images when printing documents.

+ +

If your background colors and images have been selected carefully and/or are crucial to the usefulness of the content, you can use the CSS {{cssxref("color-adjust")}} property to tell the browser that it should not make adjustments to the appearance of content.

+ +

The default value of color-adjust, economy, indicates that the browser is allowed to make appearance changes as it deems necessary in order to try to optimize the legibility and/or print economy of the content, given the type of output device the document is being drawn onto.

+ +

You can set color-adjust to exact to tell the browser that the element or elements on which you use it have been designed specifically to best work with the colors and images left as they are. With this set, the browser won't tamper with the appearance of the element, and will draw it as indicated by your CSS.

+ +
+

Note: There is no guarantee, though, that color-adjust: exact will result in your CSS being used exactly as given. If the browser provides user preferences to change the output (such as a "don't print backgrounds" checkbox in a print dialog box), that overrides the value of color-adjust.

+
+ +

関連情報

+ + diff --git a/files/ja/web/html/attributes/accept/index.html b/files/ja/web/html/attributes/accept/index.html new file mode 100644 index 0000000000..13a18b8313 --- /dev/null +++ b/files/ja/web/html/attributes/accept/index.html @@ -0,0 +1,171 @@ +--- +title: 'HTML 属性: accept' +slug: Web/HTML/Attributes/accept +tags: + - Accept + - Attribute + - File + - HTML + - Input + - Reference +translation_of: Web/HTML/Attributes/accept +--- +

{{HTMLSidebar}}

+ +

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

+ +

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

+ +

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

+ +
<input type="file" id="docpicker"
+  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
+ +

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

+ +
<input type="file" id="soundFile" accept="audio/*">
+<input type="file" id="videoFile" accept="video/*">
+<input type="file" id="imageFile" accept="image/*">
+ +

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>
+ +

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

+ +

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

+
+ +

固有ファイル種別指定子

+ +

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

+ + + +

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

+ +
<input type="file" accept="image/*,.pdf">
+ +

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>
+ + + +

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

+ +

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

+ +
+

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

+
+ +

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

+ +

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

+ +

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

+ +

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

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

+ + + +

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

+ +
<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>
+ + + +

{{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")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/attributes/autocomplete/index.html b/files/ja/web/html/attributes/autocomplete/index.html new file mode 100644 index 0000000000..bddf9ffcdf --- /dev/null +++ b/files/ja/web/html/attributes/autocomplete/index.html @@ -0,0 +1,272 @@ +--- +title: HTML の autocomplete 属性 +slug: Web/HTML/Attributes/autocomplete +tags: + - Addresses + - Attribute + - Email addresses + - Forms + - HTML + - Input + - Phone Numbers + - Reference + - Select + - Text + - Usernames + - autocomplete + - form + - passwords + - textarea + - パスワード + - メールアドレス + - ユーザー名 + - 住所 + - 電話番号 +translation_of: Web/HTML/Attributes/autocomplete +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

HTML の autocomplete 属性は、入力値としてテキストまたは数値を取る {{HTMLElement("input")}} 要素、 {{HTMLElement("textarea")}} 要素、 {{HTMLElement("select")}} 要素、 {{HTMLElement("form")}} 要素で利用できます。 autocomplete を使用すると、ウェブ開発者は入力欄にどの種類の情報が期待されているかをブラウザーに示唆するのと同様に、{{Glossary("user agent", "ユーザーエージェント")}}がフォーム入力欄の値を埋めるための自動支援を提供する必要があることを指定します。

+ +

提案値の情報源は、一般にブラウザーに依存します。ふつうは、ユーザーが入力した過去の値からとりますが、あらかじめ構成された値から取得することもあります。例えば、ブラウザーはユーザーに名前、住所、電話番号、メールアドレスを自動補完するために保存させることができます。おそらく、ブラウザーは以降の認証手続で自動補完を行うために、クレジットカード情報を暗号化して保存する機能を提供しているでしょう。

+ +

{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} 要素に autocomplete 属性がない場合、ブラウザーはその要素のフォームオーナー、つまりその要素を子孫に持つ {{HTMLElement("form")}} 要素、または <form> 要素で id がその要素の {{htmlattrxref("form", "input")}} 属性で指定されているものの autocomplete 属性の値を使用します。

+ +

詳しくは、 {{HTMLElement("form")}} 要素の {{htmlattrxref("autocomplete", "form")}} 属性をご覧ください。

+ +
+

自動補完を提供するために、ユーザーエージェントは <input>/<select>/<textarea> 要素に次のことを要求することがあります。

+ +
    +
  1. name や id 属性を持つこと
    2. +
  2. <form> 要素の子孫であること
    3. +
  3. フォームが {{HTMLElement("input/submit", "submit")}} ボタンを持つこと
    4. +
+
+ +

値

+ +
+
"off"
+
ブラウザーはこのフィールドの値を自動的に入力または選択することが許可されていません。文書やアプリケーションが独自の自動補完機能を提供していたり、セキュリティ上の理由でフィールドの値を自動的に入力しないよう要求していたりする可能性はあります。 +
メモ: ほとんどの現行ブラウザーでは autocomplete 属性を "off" に設定しても、ブラウザーのパスワードマネージャーがユーザー名やパスワードを保存したいかをユーザーに問い合わせたり、ログインフォームにそれらを自動入力したりすることを抑制できません。 autocomplete 属性とログインフィールドをご覧ください。
+
+
"on"
+
ブラウザーが自動的に入力を補完することが許可されています。フィールドに求められているデータ型としてのガイダンスが提供されていないので、ブラウザーは独自の判断を行うかもしれません。
+
"name"
+
このフィールドは人の氏名の値が期待されています。一般的には、氏名を各部分に分割すると、多様な人の氏名を扱ったり構成したりしにくくなるため、 "name" を使用したほうが推奨されます。しかし、氏名をそれぞれの部分に分割する必要があるのであれば、以下の autocomplete の値を使用することができます。 +
+
"honorific-prefix"
+
接頭辞や敬称 (例: "Mr.", "Ms.", "Dr.", "Mlle")
+
"given-name"
+
名 (ファーストネーム)
+
"additional-name"
+
ミドルネーム
+
"family-name"
+
苗字 (ファミリーネーム、「ラスト」ネーム)
+
"honorific-suffix"
+
接尾辞や敬称 (例: "Jr.", "B.Sc.", "MBASW", "II")
+
"nickname"
+
ペンネームやハンドルネーム
+
+
+
"email"
+
メールアドレス。
+
"username"
+
ユーザー名またはアカウント名。
+
"new-password"
+
新しいパスワード。新しいアカウントを作成したりパスワードを変更したりした場合は、一般的な「現在のパスワードを入力してください」ではなく、「新しいパスワードを入力してください」または「パスワードの確認」欄で使用してください。これは意図せずに既存のパスワードが意図せずに入力されるのを防いだり、安全なパスワードを生成するための助けになったりします (autocomplete="new-password" による自動補完の防止も参照してください)。
+
"current-password"
+
ユーザーの現在のパスワードです。
+
"one-time-code"
+
ユーザー自身を確認するために使われるワンタイムコードです
+
"organization-title"
+
職名や組織内の肩書です (例: "上級技術ライター", "社長", "副部隊長")
+
"organization"
+
企業または団体の名前です。 "Acme Widget Company" や "Girl Scouts of America" など。
+
"street-address"
+
住所。複数行のテキストが使用でき、第2行政レベル (普通は市町村) の中で完全に住所を識別できるものですが、市町村名、郵便番号、国名は含めるべきではありません。
+
"address-line1", "address-line2", "address-line3"
+
住所のそれぞれの行です。これらは "street-address" が存在しない場合のみ置くことができます。
+
"address-level4"
+
住所が4段階まである場合のもっとも細かい{{anch("Administrative levels in addresses", "行政レベル")}}です。
+
"address-level3"
+
少なくとも3段階の行政レベルがある住所において、3番目の{{anch("Administrative levels in addresses", "行政レベル")}}です。
+
"address-level2"
+
少なくとも2段階の行政レベルがある住所において、2番目の{{anch("Administrative levels in addresses", "行政レベル")}}です。2つの行政レベルがある国では、これはふつう市町村や、住所のあるその他の地域を表します。
+
"address-level1"
+
住所の一番上{{anch("Administrative levels in addresses", "行政レベル")}}です。これはふつう、住所がある都道府県です。合衆国では州になります。スイスでは、カートンになります。イギリスでは、ポストタウンになります。
+
"country"
+
国コードです。
+
"country-name"
+
国名です。
+
"postal-code"
+
郵便番号です (アメリカでは ZIP コードです)。
+
"cc-name"
+
クレジットカードなどの支払手段に表示、または関連付けられた氏名です。一般に、氏名の各部分に分割するよりも氏名のフィールドを使う方が推奨されます。
+
"cc-given-name"
+
クレジットカードなどの支払手段に指定された下の名前 (ファーストネーム) です。
+
"cc-additional-name"
+
クレジットカードなどの支払手段に指定された中間名 (ミドルネーム) です。
+
"cc-family-name"
+
クレジットカードなどの支払手段に指定された姓です。
+
"cc-number"
+
クレジットカードや番号や、口座番号などの支払手段を識別するその他の番号です。
+
"cc-exp"
+
支払手段の有効期限で、ふつうは "MM/YY" または "MM/YYYY" の形です。
+
"cc-exp-month"
+
支払手段の有効期限の月です。
+
"cc-exp-year"
+
支払手段の有効期限の年です。
+
"cc-csc"
+
支払手段のセキュリティコードです。クレジットカードでは、カードの裏に書かれた3桁の認証番号です。
+
"cc-type"
+
支払手段の種類です。 (例: "Visa" や "Master Card").
+
"transaction-currency"
+
この取引で決済が行われる通貨です。
+
"transaction-amount"
+
支払を行う金額の "transaction-currency" の単位による量です。
+
"language"
+
優先言語で、有効な BCP 47 言語タグ で指定されたものです。
+
"bday"
+
生年月日の全体です。
+
"bday-day"
+
生年月日の日の部分です。
+
"bday-month"
+
生年月日の月の部分です。
+
"bday-year"
+
生年月日の年の部分です。
+
"sex"
+
性別で ("Female", "Fa'afafine", "Male" など)、改行のない自由な形式のテキストです。
+
"tel"
+
国番号を含む、完全な電話番号です。電話番号を書く部分に分割する必要がある場合は、各フィールドに以下の値を使用することができます。 +
+
"tel-country-code"
+
国コードで、例えば "1" はアメリカ、カナダ、その他の北アメリカとカリブ海の一部です。
+
"tel-national"
+
国番号以外の部分の電話番号全体で、市外局番の接頭辞 (日本では 0) を含みます。 "1-855-555-6502" という電話番号については、このフィールドの値は "855-555-6502" となります。
+
"tel-area-code"
+
市外局番で、必要に応じて市外局番の接頭辞 (日本では 0) を含みます。
+
"tel-local"
+
国番号や市外局番を含まない電話番号です。これはさらに、市内局番と加入者番号の2つに分割することができます。 "555-6502" という電話番号では、 "tel-local-prefix" は "555"、 "tel-local-suffix" は "6502" となります。
+
+
+
"tel-extension"
+
電話番号の下の内線番号です。ホテルの部屋番号や企業オフィスの内線番号などです。
+
"impp"
+
インスタントメッセージングプロトコルの端点、たとえば "xmpp:username@example.net" などです。
+
"url"
+
URL です。このフォームの他のフィールドの文脈から見て適切な、ホームページのや企業ウェブサイトのアドレスです。
+
"photo"
+
このフォームの他のフィールドの文脈における人物、企業、連絡先情報を表す画像の URL です。
+
+ +

詳しくは WHATWG 仕様書 をご覧ください。

+ +
+

注: Firefox は他のブラウザーとは異なり、 autocomplete 属性で、ページを再読み込みしても <input> を 動的に無効化した状態や (該当する場合は) 動的に変更したチェック状態を維持するか を制御します。この維持機能は、既定で有効です。 autocomplete 属性の値に off を設定すると、この機能を無効化できます。またこの設定は、type 属性が通常 autocomplete を適用しない値である <input> 要素でも有効です。 {{bug(654072)}} をご覧ください。

+
+ +

例

+ +
<div>
+  <label for="cc-number">Enter your credit card number</label>
+  <input name="cc-number" id="cc-number" autocomplete="off">
+</div>
+ +

住所における行政レベル

+ +

行政レベルの4つの欄 (address-level1 ～ address-level4) は、住所が存在する国の中で、詳細さのレベルを高めるためのものです。行政レベルの体系は国によって異なり、住所を表記する際に様々な順序でレベルを並べ替えられることがあります。

+ +

address-level1 は常に最も広い行政単位を表します。これは住所のもっとも広い部分であり、国名に近い部分です。

+ +

フォームのレイアウトの自由度

+ +

国が異なれば住所の書き方も異なり、住所内でそれぞれの欄の位置も異なっており、フィールドの組み合わせや数も完全に異なることを考慮すると、可能であれば、サイトが住所入力フォームを表示する際に、住所がある国の指定に応じて、ユーザーが期待するレイアウトに切り替えることができると便利です。

+ +

変化形

+ +

それぞれの行政レベルの使用方法は国によって異なります。以下にいくつかの例を示しますが、これは網羅的なリストではありません。

+ +

アメリカ

+ +

アメリカ国内の一般的な住所は次のようになります。

+ +

432 Anywhere St
+ Exampleville CA 95555

+ +

アメリカでは、住所の中で最も大きな括りの部分は州であり、この場合は "CA" (米国郵政公社の公式な略号で "California" の意味) となります。したがって address-level1 は州、この場合は "CA" となります。

+ +

住所で2番目に大きな括りの部分は市区町村名なので、 address-level2 はこの例の住所では "Exampleville" となります。

+ +

アメリカの住所では、3以上の行政単位は使用されません。

+ +

イギリス

+ +

イギリスの住所入力フォームでは、住所のレベルは1つで、住所に応じて1～3行の住所が含まれることがあります。完全な住所は次のようになります。

+ +

103 Frogmarch Street
+ Upper-Wapping
+ Winchelsea
+ TN99 8ZZ

+ +

住所レベルは次のようになります。

+ + + +

郵便番号は別な行です。イギリスで郵便物をうまく配達するためには、実際には郵便番号と address-line1 だけでよいので、必須項目はこれらのみですが、通常はもっと詳細な情報を提供することが多いので注意してください。

+ +

中国

+ +

中国では、省、市、区の3つの行政レベルを使用することができます。

+ +

日本

+ +

日本の住所は一般的に1行で、広域的な部分から詳細な部分の順に (アメリカとは逆順に) 書かれます。住所には2～3の行政レベルが含まれます。建物名や部屋番号を表すために、もう1行が追加されることもあります。例を示します。

+ +

〒381-0000
+ 長野県長野市某町123

+ +

「〒」と続く7桁の番号は郵便番号です。

+ +

address-level1 は都道府県に使用されます。この場合は「長野県」です。 address-level2 は普通、市区町村や郡に使われます。この場合は「長野市」です。「某町123」は address-line1 で、町名と地番からなります。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', "#autofill")}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.global_attributes.autocomplete")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/attributes/crossorigin/index.html b/files/ja/web/html/attributes/crossorigin/index.html new file mode 100644 index 0000000000..9a6d938414 --- /dev/null +++ b/files/ja/web/html/attributes/crossorigin/index.html @@ -0,0 +1,104 @@ +--- +title: HTML crossorigin 属性 +slug: Web/HTML/Attributes/crossorigin +tags: + - Advanced + - CORS + - HTML + - Reference + - Security + - セキュリティ + - 上級者 +translation_of: Web/HTML/Attributes/crossorigin +--- +
{{draft}}
+ +

crossorigin 属性は、 {{ HTMLElement("audio") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}, {{ HTMLElement("video") }} の各要素で有効であり、 CORS への対応を提供し、したがって要素が読み取るデータのために CORS リクエストの構成を有効にします。要素によっては、属性は CORS 設定属性になります。

+ +

メディア要素の crossorigin コンテンツ属性は CORS 設定属性です。

+ +

これらの属性は列挙型で、以下の値を取ることができます。

+ + + + + + + + + + + + + + + + + + + + +
キーワード説明
anonymousこの要素のための CORS リクエストで資格情報フラグを 'same-origin' に設定する。
use-credentialsこの要素のための CORS リクエストで資格情報フラグを 'include' に設定する。
""crossorigin または crossorigin="" のように属性に空の値を設定すると、 anonymous と同じになります。
+ +

既定では (つまり、属性が指定されていない場合)、 CORS は使用されません。 "anonymous" キーワードが指定された場合は、同じオリジンでない限り、リクエストにはクッキーやクライアント側の SSL 証明書、 HTTP 認証などの CORS 仕様書の用語の節で記述されているユーザー資格情報 (user credentials) は使用されません。

+ +

不正なキーワードや空文字列は、 anonymous が指定されたものと同じように扱われます。

+ +

例: script 要素の crossorigin

+ +

以下の {{HTMLElement("script")}} 要素を使用すると、ユーザー資格情報を送信せずに https://example.com/example-framework.js スクリプトを実行します。

+ +
<script src="https://example.com/example-framework.js" crossorigin="anonymous"></script>
+ +

例: 資格情報付きの Webmanifest

+ +

資格情報を必要とするマニフェストを読み取るときは、同じオリジンからのファイル読み取りであっても use-credentials の値を使用する必要があります。

+ +
<link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials">
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザーの互換性

+ +

<script crossorigin>

+ + + +

{{Compat("html.elements.script.crossorigin")}}

+ +

<video crossorigin>

+ + + +

{{Compat("html.elements.video.crossorigin")}}

+ +

関連情報

+ + + +
{{QuickLinksWithSubpages("/ja/docs/Web/HTML/")}}
diff --git a/files/ja/web/html/attributes/index.html b/files/ja/web/html/attributes/index.html new file mode 100644 index 0000000000..b0c79d849d --- /dev/null +++ b/files/ja/web/html/attributes/index.html @@ -0,0 +1,769 @@ +--- +title: HTML 属性リファレンス +slug: Web/HTML/Attributes +tags: + - Attribute + - Attributes + - Beginner + - Configuring + - Element Attributes + - Elements + - HTML + - Reference + - Settings + - Web + - 初心者 + - 属性 + - 要素 + - 要素の属性 + - 設定 +translation_of: Web/HTML/Attributes +--- +
{{HTMLSidebar}}
+ +

HTML の要素は属性を持ちます。ユーザーが望む基準を満たすために、さまざまな方法で要素を構成したり、動作を調整したりする追加の値です。

+ +

属性一覧

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
属性名要素説明
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}サーバーの受容する型のリストです。ファイル形式など。
accept-charset{{ HTMLElement("form") }}対応している文字集合の一覧です。
accesskeyグローバル属性要素をアクティブ化したり、フォーカスを与えたりするためのショートカットキーです。
action{{ HTMLElement("form") }}フォーム経由で送信される情報を処理するプログラムの URI です。
align{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("td") }}, {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}要素の水平方向の配置を指定します。
allow{{ HTMLElement("iframe") }}iframe の機能ポリシーを指定します。
alt{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}画像が表示できない場合の代替テキストです。
async{{ HTMLElement("script") }}スクリプトを非同期で実行します。
autocapitalizeグローバル属性ユーザーによる入力が入力欄で自動的に大文字化されるかどうかを設定します。
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}このフォーム内のコントロールが、ブラウザーによる値の自動補完を既定で許容するかを示します。
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}ページ読込後に、対象要素に自動的にフォーカスを当てるようにします。
autoplay{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}オーディオやビデオが再生可能になった時点で自動再生を開始します。
background{{ HTMLElement("body") }}, {{ HTMLElement("table") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}画像ファイルの URL を指定します。 +
注: ブラウザーや電子メールクライアントはまだこの属性に対応していますが、廃止済みです。代わりに CSS の {{ Cssxref("background-image") }} を使用してください。
+
bgcolor{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }} +

要素の背景色です。

+ +
+

注: これは古い属性です。代わりに CSS の {{ Cssxref("background-color") }} プロパティを使用してください。

+
+
border{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }} +

境界線の幅です。

+ +
+

注: これは古い属性です。代わりに CSS の {{ Cssxref("border") }} プロパティを使用してください。

+
+
buffered{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}すでにバッファリングされたメディアの時間の範囲を示します。
capture{{ HTMLElement("input") }}{{SpecName('HTML Media Capture', '#the-capture-attribute','media capture')}} 仕様書から、キャプチャできる新しいファイルを指定します。
challenge{{ HTMLElement("keygen") }}公開鍵とともに送信するチャレンジ文字列
charset{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}ページまたはスクリプトの文字エンコーディングを宣言します。
checked{{ HTMLElement("command") }}, {{ HTMLElement("input") }}ページ読み込み時に要素にチェックを入れておくかどうかを指定します。
cite{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}引用元または変更点の情報源を指す URI を格納します。
classグローバル属性よく使われるプロパティで要素にスタイルを適用するために CSS と共によく用いられます。
code{{ HTMLElement("applet") }}読み込んで実行するアプレットのクラスファイルの URL を指定します。
codebase{{ HTMLElement("applet") }}code 属性で参照するアプレットの .class ファイルを配置しているディレクトリの絶対 URL または相対 URL を指定します。
color{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }} +

この属性は色名または16進数の #RRGGBB 形式を用いて文字色を設定します。

+ +
+

注: これは古い属性です。代わりに CSS の {{Cssxref("color")}} プロパティを使用して下さい。

+
+
cols{{ HTMLElement("textarea") }}テキストエリアの桁数 (水平方向の文字数) を定義します。
colspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}colspan 属性はテーブルのセルを結合する列数を定義します。
content{{ HTMLElement("meta") }}状況に応じて、 http-equiv または name に関連した値です。
contenteditableグローバル属性要素の内容が編集可能であるかどうかを示します。
contextmenuグローバル属性要素のコンテキストメニューとして機能する {{HTMLElement("menu")}} 要素の ID を定義します。
controls{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}再生コントロールをユーザーに表示すべきかどうかを示します。
coords{{ HTMLElement("area") }}ホットスポット領域の座標を指定する為の値のセット
crossorigin{{ HTMLElement("audio") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}, {{ HTMLElement("video") }}要素がオリジン間リクエストをどう扱うか
csp {{experimental_inline}}{{ HTMLElement("iframe") }}埋め込まれた文書が管理されるためのコンテンツセキュリティポリシーを指定します。
data{{ HTMLElement("object") }}リソースの URL を指定します。
data-*グローバル属性HTML 要素にカスタム属性が添付できるようにします。
datetime{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}要素に関連付けられた日時を示します。
decoding{{ HTMLElement("img") }}画像をデコードする推奨の方法をIndicates the preferred method to decode the image.
default{{ HTMLElement("track") }}ユーザ設定で別の項目を指定していない場合に、有効にするトラックを指定する
defer{{ HTMLElement("script") }}ページのパースが完了した後に実行するスクリプトであることを示す
dirグローバル属性テキストの書字方向を定義する。使用できる値は ltr (Left-To-Right) または rtl (Right-To-Left)
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}
disabled{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}閲覧者によるによるコントロールの操作を無効にするかどうかを示します。
download{{ HTMLElement("a") }}, {{ HTMLElement("area") }}リソースをダウンロードするためのハイパーリンクであるかどうかを示します。
draggableグローバル属性要素がドラッグ可能であるかどうかを示します。
dropzoneグローバル属性要素がその上でコンテンツのドロップ操作を受け付けるかどうかを示します。
enctype{{ HTMLElement("form") }}method 属性が POST である場合に、フォームデータのコンテンツタイプを定義します。
enterkeyhint {{experimental_inline}}{{ HTMLElement("textarea") }}, contenteditableenterkeyhint は、仮想キーボードの Enter キーにあるアクションラベル (またはアイコン) が何であるかを指定します。この属性はフォームコントロール (textarea 要素の値など) と共に、または編集対象となっている要素 (例えば contenteditable 属性の使用など) の中で使用することができます。
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}この要素が属する要素を指定します。
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}その要素が所属するフォームを示します。
formaction{{ HTMLElement("input") }}, {{ HTMLElement("button") }}その要素のアクションを示します。 {{ HTMLElement("form") }} で定義されたアクションを上書きします。
formenctype{{ HTMLElement("button") }}, {{ HTMLElement("input") }}button や input が送信ボタンである場合 (type="submit")、この属性はフォーム送信で使用するエンコーディング型を設定します。この属性が指定された場合、ボタンを所有するフォームの enctype 属性より優先されます。
formmethod{{ HTMLElement("button") }}, {{ HTMLElement("input") }}button や input が送信ボタンである場合 (type="submit")、この属性はフォーム送信で使用する送信メソッド (GET, POST, など) を設定します。この属性が指定された場合、ボタンを所有するフォームの method 属性より優先されます。
formnovalidate{{ HTMLElement("button") }}, {{ HTMLElement("input") }}button や input が送信ボタンである場合 (type="submit")、この論理属性はフォームが送信時に検証されないことを指定します。この属性が指定された場合、ボタンを所有するフォームの novalidate 属性より優先されます。
formtarget{{ HTMLElement("button") }}, {{ HTMLElement("input") }}button や input が送信ボタンである場合 (type="submit")、この属性はフォームを送信した後で受け取るレスポンスを表示する閲覧コンテキスト (例えば、タブ、ウィンドウ、インラインフレーム) を指定します。この属性が指定された場合、ボタンを所有するフォームの target 属性より優先されます。
headers{{ HTMLElement("td") }}, {{ HTMLElement("th") }}この要素に適用する <th> 要素の ID。
height{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }} +

ここに挙げた要素の高さを指定します。他の要素では、 {{cssxref("height")}} プロパティを使用してください。

+ +
+

注: {{HTMLElement("div")}} など一部の要素では、これは古い属性であり、代わりに CSS の {{Cssxref("height")}} プロパティを使用してください。

+
+
hiddenグローバル属性この要素のレンダリングを抑制しますが、 script 要素などの子要素は有効なままにします。
high{{ HTMLElement("meter") }}最大値の下限を示します。
href{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}リンクされたリソースの URL です。
hreflang{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}リンクされたリソースの言語を指定します。
http-equiv{{ HTMLElement("meta") }}プラグマディレクティブを定義します。
icon{{ HTMLElement("command") }}コマンドを表す画像を指定します。
idグローバル属性特定の要素へスタイルを設定するために CSS と共によく使われます。この属性の値は一位でなければなりません。
importance {{experimental_inline}}{{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}リソースの相対的なフェッチ優先順位を示します。
integrity{{ HTMLElement("link") }}, {{ HTMLElement("script") }} +

ブラウザーが読み込むものを検証できるようにするためのサブリソース完全性の値を指定します。

+
intrinsicsize {{deprecated_inline}}{{ HTMLElement("img") }}この属性は、ブラウザーに画像に交友の実際の寸法を無視して、属性で指定された寸法を割り当てるように指示します。
inputmode{{ HTMLElement("textarea") }}, contenteditable要素やその内容を編集する際に、ユーザーが入力する可能性のあるデータの種類のヒントを提供します。この属性はフォームコントロール (textarea 要素の値など) と共に、または編集対象となっている要素 (例えば contenteditable 属性の使用など) の中で使用することができます。
ismap{{ HTMLElement("img") }}画像がサーバーサイドイメージマップの一部であることを示します。
itempropグローバル属性
keytype{{ HTMLElement("keygen") }}生成する鍵の種類を指定します。
kind{{ HTMLElement("track") }}テキストトラックの種類を指定します。
label{{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("track") }}ユーザーが読める形の要素のタイトルを指定します。
langグローバル属性要素内で用いられている言語を定義する。
language{{ HTMLElement("script") }}要素で使用しているスクリプト言語を定義する。
loading {{experimental_inline}}{{ HTMLElement("img") }}, {{ HTMLElement("iframe") }}要素を遅延読み込みさせたいこと (loading="lazy") または直ちに読み込ませたいこと (loading="eager") を示します。 +
WIP: WHATWG PR #3752
+
list{{ HTMLElement("input") }}ユーザに提案するため、事前に定義した選択肢のリストを示す。
loop{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}メディアの再生が完了した後、始めから再生を開始するかを示します。
low{{ HTMLElement("meter") }}最小値の上限を示します。
manifest{{ HTMLElement("html") }}ドキュメントのキャッシュマニフェストの URL を指定します。 +
注: この属性は廃止されており、代わりに <link rel="manifest"> を使用してください。
+
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}許容される最大の値を示す。
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}要素が許容する最大文字数を定義します。
minlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}要素が許容する最小文字数を定義する。
media{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}リンクされたリソースがどのメディアに対して設計されたかを指定する。ンｎ
method{{ HTMLElement("form") }}フォームを送信する際に使用する HTTP メソッドを定義する。 GET (既定値) または POST を指定可能。
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}許容される最小の値を示す。
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}type が email または file の input では、複数の値を入力可能かを示す。
muted{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}ページ読み込み時に音声を無音にするかどうかを示します。
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}要素の名前。例えば、送信されたフォームでサーバーがフィールドを識別するために使用する。
novalidate{{ HTMLElement("form") }}送信時にフォームが検証されないようにする。
open{{ HTMLElement("details") }}ページ読み込み時に詳細情報を表示するかを示す。
optimum{{ HTMLElement("meter") }}最適な値を示す。
pattern{{ HTMLElement("input") }}要素の値を検証する正規表現を定義する。
ping{{ HTMLElement("a") }}, {{ HTMLElement("area") }}ping 属性は、ユーザーがハイパーリンクをたどる場合に通知される URL のリストを空白区切りで指定します。
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}フィールドが何を入力するものであるかのヒントを閲覧者に対し提供する。
poster{{ HTMLElement("video") }}ユーザが再生やシークを行うまでの間に表示するポスターフレームの URL。
preload{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}リソースの全体または一部のプリロードを行う、あるいはプリロードを行わないことを示す。
radiogroup{{ HTMLElement("command") }}
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}要素が編集できるかどうかを示す。
referrerpolicy{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}リソースにアクセスする際にどのリファラーが送信されるかを指定する。
rel{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}リンク先オブジェクトとリンク元オブジェクトとの関係を指定する。
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}入力が必須の要素であるかを示す。
reversed{{ HTMLElement("ol") }}リストを昇順ではなく降順に表示することを示す。
rows{{ HTMLElement("textarea") }}textarea の行数を定義する。
rowspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}テーブルセルがまたがる行数を定義する。
sandbox{{ HTMLElement("iframe") }}iframe に読み込まれた文書で特定の機能を使用することを止める (フォームの投稿や新しいウィンドウを開くなど)。
scope{{ HTMLElement("th") }}(th 要素で定義される) ヘッダーテストが関連するセルを定義します。
scoped{{ HTMLElement("style") }}
selected{{ HTMLElement("option") }}ページ読込時に、対象要素を選択状態にする。
shape{{ HTMLElement("a") }}, {{ HTMLElement("area") }}
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}要素の幅を定義する (ピクセル値)。要素の type 属性が text または password である場合は文字数になる。
sizes{{ HTMLElement("link") }}, {{ HTMLElement("img") }}, {{ HTMLElement("source") }}
slotグローバル属性要素にシャドウ DOM のシャドウツリーのスロットを割り当てます。
span{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}
spellcheckグローバル属性要素のスペルチェックを有効にするかどうかを示します。
src{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}埋め込みコンテンツの URL。
srcdoc{{ HTMLElement("iframe") }}
srclang{{ HTMLElement("track") }}
srcset{{ HTMLElement("img") }}, {{ HTMLElement("source") }}一つ以上のレスポンシブ画像の候補です。
start{{ HTMLElement("ol") }}1以外から始まる場合の最初の値を定義します。
step{{ HTMLElement("input") }}
styleグローバル属性外部スタイルシートや style 要素内に記述されたものより優先度の高いスタイル情報を記述する。
summary{{ HTMLElement("table") }}
tabindexグローバル属性ブラウザーによる既定のタブオーダーを無効化して、指定した順序に従うようにします。
target{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }}
titleグローバル属性要素の示す範囲のタイトル。PC ブラウザーでは、マウスオーバー時にツールチップとしてその属性値が表示される。
translateグローバル属性ページが翻訳版である場合、要素の属性値と子の Text ノードが翻訳されているか、変更せずにそのままであるかを指定します。
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}要素の型を定義する。
usemap{{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}
value{{ HTMLElement("button") }}, {{ HTMLElement("data") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("option") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}ページ読み込み時に要素で表示するデフォルト値を定義する。
width{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }} +

ここに挙げられた要素に対して、要素の幅を指定します。

+ +
+

注: {{ HTMLElement("div") }} など他の要素については、これは古い属性であり、代わりに CSS の {{ Cssxref("width") }} プロパティを使用してください。

+
+
wrap{{ HTMLElement("textarea") }}テキストを折り返すかどうかを示します。
+ +

content 属性と IDL 属性

+ +

HTML では、ほとんどの属性に content 属性 と IDL (Interface Definition Language) 属性 の 2 つの側面があります。

+ +

content 属性は content (HTML コード) から設定する属性であり、 {{domxref("element.setAttribute()")}} や {{domxref("element.getAttribute()")}} を使用して設定あるいは取得できます。 content 属性は値として数値を想定するものであっても、常に文字列です。例えば content 属性を使用して {{HTMLElement("input")}} 要素の maxlength 属性に 42 を設定するには、その要素で setAttribute("maxlength", "42") を呼び出さなければなりません。

+ +

IDL 属性は JavaScript プロパティとしても知られています。これらは element.foo といった JavaScript プロパティを使用して読み書きします。IDL 属性は読み取り時に値を返すため基になる content 属性を使用 (ただし、変換するでしょう) したり、書き込み時に content 属性へ何らかの値を保存したりします。言い換えると、IDL 属性は content 属性を映し出します。

+ +

ほとんどの場合、IDL 属性は実際に使用する値として自身の値を返します。例えば {{HTMLElement("input")}} 要素の type 属性のデフォルト値は "text" であるので、input.type="foobar" を設定すると <input> 要素は (外見と動作が) text タイプになりますが、"type" content 属性の値は "foobar" になります。しかし、type IDL 属性は文字列 "text" を返します。

+ +

IDL 属性は常に文字列とは限りません。例えば input.maxlength は数値 (符号付き long) です。IDL 属性を使用するときは望ましい型の値を読み書きするので、input.maxlength は常に数値を返し、また input.maxlength を設定するときは数値を要求します。他の型で渡すと、標準的な JavaScript の型変換規則に従って自動的に数値へ変換されます。

+ +

IDL 属性は符号なし long、URL、論理値など他の型を反映することが可能です。残念ながら、属性に応じて IDL 属性が対応する content 属性と一体化して動作するための明確な規則や方法はありません。ほとんどの場合は仕様にある規則に従いますが、そうでない場合もあります。 HTML 仕様では可能な限り開発者にやさしいものにしようとしていますが、さまざまな理由 (たいていは歴史的な理由) により奇妙な動作になる属性 (例えば select.size) があり、実際どのように動作するかを理解するために仕様書を読むようにしましょう。

+ +

論理属性

+ +

一部のコンテンツ属性 (例えば required, readonly, disabled) は論理属性 (boolean attributes) と呼ばれています。論理属性は存在すれば、その値は true となり、存在しなければ、その値は false となります。

+ +

HTML5 では、論理属性に許されている値の制約を定義しています。属性が存在する場合は、値は空文字列 (属性の値が割り当てられないことがあります) または属性の正式名に ASCII で大文字・小文字まで一致する値のどちらかで、前後にホワイトスペースを含んではいけません。以下の例は論理属性をマークアップする正しい方法です。

+ +
<div itemscope> This is valid HTML but invalid XML. </div>
+<div itemscope=itemscope> This is also valid HTML but invalid XML. </div>
+<div itemscope=""> This is valid HTML and also valid XML. </div>
+<div itemscope="itemscope"> This is also valid HTML and XML, but perhaps a bit verbose. </div>
+ +

明確にするために、 "true" および "false" という値は論理属性では許可されていません。偽の値を表すには、属性ごと省略する必要があります。この制約により、いくつかのよくある誤解が明確になります。例えば checked="false" は、属性が存在するため、その要素の checked 属性が true であると解釈されます。

+ +

関連情報

+ + diff --git a/files/ja/web/html/attributes/max/index.html b/files/ja/web/html/attributes/max/index.html new file mode 100644 index 0000000000..7fcc1d64d4 --- /dev/null +++ b/files/ja/web/html/attributes/max/index.html @@ -0,0 +1,166 @@ +--- +title: 'HTML 属性: max' +slug: Web/HTML/Attributes/max +tags: + - Attribute + - Attributes + - Constraint validation + - HTML + - Reference +translation_of: Web/HTML/Attributes/max +--- +

{{HTMLSidebar}}

+ +

max 属性は、その属性を含む入力に対して許容可能で有効な最大値を定義します。要素の値がこれより大きい場合、その要素は制約検証に失敗します。この値は、 min 属性の値以上でなければなりません。 max 属性が指定されていないか無効であった場合、 max 値は適用されません。 max 属性が有効で、値が空でなく、 max 属性によって許容される最大値よりも大きい場合、制約検証によってフォームの送信が阻止されます。

+ +

これは数値入力型、例えば {{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/range", "range")}} 型や {{htmlelement('progress')}} および {{htmlelement('meter')}} 要素で有効であり、 max 属性はフォームコントロールで妥当と見なされる最も大きな値をして逸する数値です。

+ +

値が許容される最大値を超えた場合、 {{domxref('validityState.rangeOverflow')}} が true となり、そのコントロールは {{cssxref(':out-of-range')}} および {{cssxref(':invalid')}} 擬似クラスと一致するようになります。

+ +

構文

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
max の構文 (入力 type 別)
入力型構文例
{{HTMLElement("input/date", "date")}}yyyy-mm-dd<input type="date" max="2019-12-25" step="1">
{{HTMLElement("input/month", "month")}}yyyy-mm<input type="month" max="2019-12" step="12">
{{HTMLElement("input/week", "week")}}yyyy-W##<input type="week" max="2019-W23" step="">
{{HTMLElement("input/time", "time")}}hh:mm<input type="time" max="17:00" step="900">
{{HTMLElement("input/datetime-local", "datetime-local")}}yyyy-mm-ddThh:mm<input type="datetime-local" min="2019-12-25T23:59">
{{HTMLElement("input/number", "number")}}<number><input type="number" min="0" step="5" max="100">
{{HTMLElement("input/range", "range")}}<number><input type="range" min="60" step="5" max="100">
+ +
+

注: ユーザーが入力したデータが設定された最大値を満たしていない場合、製薬検証では無効とみなされ、 {{cssxref(':invalid')}} と {{cssxref(':out-of-range')}} の擬似クラスに一致するようになります。

+
+ +

詳しくは クライアント側検証と {{domxref("ValidityState.rangeOverflow", "rangeOverflow")}} を参照してください。

+ +

{{htmlelement('progress')}} 要素における max 属性は、 progress 要素で示されたタスクがどれだけの作業を必要とするかを記述します。存在する場合、ゼロより大きい値を持ち、有効な浮動小数点数でなければなりません。 {{htmlelement('meter')}} 要素における max 属性は、測定範囲の上限の数値を定義します。これは、指定されている場合、最小値 (min 属性) よりも大きくなければなりません。どちらの場合も、省略された場合、値は既定で 1 となります。

+ + + + + + + + + + + + + + + + + + + + + + +
その他の要素における max 値の構文
入力型構文例
{{HTMLElement("progress")}}<number><progress id="file" max="100" value="70"> 70% </progress>
{{HTMLElement("meter")}}<number><meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"> at 40/100</meter>
+ +

アクセシビリティの考慮

+ +

ユーザーがフォームに記入したり、個々のフォームコントロールを使用するのに役立つ説明を提供してください。必須の入力、任意の入力、データの書式、その他の関連する情報を示してください。 max 属性を使用する場合は、この最大値の要件がユーザーに理解されていることを確認してください。 {{htmlelement('label')}} 内で指示を提供すれば十分かもしれません。ラベルの外に指示を提供すれば、より柔軟な配置やデザインが可能になるので、 aria-labelledby または aria-describedby を使用することを検討してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'input.html#the-min-and-max-attributes', 'max attribute')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'input.html#the-min-and-max-attributes', 'max attribute')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML WHATWG', 'forms.html#the-progress-element', 'progress element')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#the-progress-element', 'progress element')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML WHATWG', 'forms.html#the-meter-element', 'meter element')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#the-meter-element', 'meter element')}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/html/attributes/maxlength/index.html b/files/ja/web/html/attributes/maxlength/index.html new file mode 100644 index 0000000000..002bfcb7ee --- /dev/null +++ b/files/ja/web/html/attributes/maxlength/index.html @@ -0,0 +1,59 @@ +--- +title: 'HTML 属性: maxlength' +slug: Web/HTML/Attributes/maxlength +tags: + - Attribute + - Attributes + - Constraint validation +translation_of: Web/HTML/Attributes/maxlength +--- +

{{HTMLSidebar}}{{draft}}

+ +

maxlength 属性は、ユーザーが {{htmlelement('input')}} または {{htmlelement('textarea')}} に入力できる最大文字数を (UTF-16 コード単位で) 定義します。 0 以上の整数値である必要があります。 maxlength が指定されなかった場合、または無効な値が指定された場合は、 input や textarea には最大長が設定されません。

+ +

maxlength の値はすべて、 minlength が存在して有効である場合は、その値以上である必要があります。フィールドのテキスト値の長さが maxlength の UTF-16 コード単位の長さを超える場合、入力欄は制約検証に失敗します。制約検証は、ユーザーが値を変更した場合にのみ適用されます。

+ +

制約検証

+ +

ブラウザーは一般的に、 maxlength 属性が許可する以上のテキストをユーザーが入力することを防止しますが、長さが maxlength が許可しているよりも長くなった場合、 {{domxref("ValidityState")}} オブジェクトの読み取り専用の {{domxref("ValidityState.tooLong", "tooLong")}} プロパティが true になります。

+ +

例

+ +
<input type="password" maxlength="4"/>
+
+ +

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

+ +

仕様書

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

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/html/attributes/min/index.html b/files/ja/web/html/attributes/min/index.html new file mode 100644 index 0000000000..5c549a352a --- /dev/null +++ b/files/ja/web/html/attributes/min/index.html @@ -0,0 +1,158 @@ +--- +title: 'HTML 属性: min' +slug: Web/HTML/Attributes/min +tags: + - Attribute + - Attributes + - Constraint validation + - min +translation_of: Web/HTML/Attributes/min +--- +

{{HTMLSidebar}}

+ +

min 属性は、その属性を含む入力欄に対して許容できる有効な最小値を定義します。要素の値がこれより大きい場合、その要素は制約検証に失敗します。この値は、 max 属性の値以下でなければなりません。 min 属性が指定されていないか無効であった場合、最小値は適用されません。

+ +

これは数値入力型、例えば {{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/range", "range")}} 型や {{htmlelement('meter')}} 要素で有効であり、 min 属性はフォームコントロールで妥当と見なされる最も小さな値を指定する数値です。

+ +

構文

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
min の構文 (入力 type 別)
入力型構文例
{{HTMLElement("input/date", "date")}}yyyy-mm-dd<input type="date" min="2019-12-25" step="1">
{{HTMLElement("input/month", "month")}}yyyy-mm<input type="month" min="2019-12" step="12">
{{HTMLElement("input/week", "week")}}yyyy-W##<input type="week" min="2019-W23" step="">
{{HTMLElement("input/time", "time")}}hh:mm<input type="time" min="09:00" step="900">
{{HTMLElement("input/datetime-local", "datetime-local")}}yyyy-mm-ddThh:mm<input type="datetime-local" min="2019-12-25T19:30">
{{HTMLElement("input/number", "number")}}<number><input type="number" min="0" step="5" max="100">
{{HTMLElement("input/range", "range")}}<number><input type="range" min="60" step="5" max="100">
+ +
+

注: ユーザーが入力したデータが設定された最大値を満たしていない場合、制約検証では無効とみなされ、 {{cssxref(':invalid')}} の擬似クラスに一致するようになります。

+
+ +

詳しくは クライアント側検証と {{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}} を参照してください。

+ +

{{htmlelement('meter')}} 要素における min 属性は、測定範囲の上限の数値を定義します。これは、指定されている場合、最大値 (max 属性) よりもチイサクなければなりません。どちらの場合も、省略された場合、値は既定で 1 となります。

+ + + + + + + + + + + + + + + + + +
その他の要素における min 値の構文
入力型構文例
{{HTMLElement("meter")}}<number><meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"> at 40/100</meter>
+ +

step への影響

+ +

min と step の値は、 step 属性がない場合も含め、どの値が有効であるかを定義します。 step の既定値は 0 です。

+ +

無効な入力の周囲に太く赤い境界を追加します。

+ +
input:invalid {
+  border: solid red 3px;
+}
+ +

それから入力欄の最小値を 7.2 と定義し、 step 属性は省略しているので、既定値が 1 になります。

+ +
<input id="myNumber" name="myNumber" type="number" min="7.2" value="8">
+ +

step の既定値は 1 なので、有効な値は 7.2, 8.2, 9.2, などになります。 8 の値は有効ではありません。無効な値が入っているので、対応しているブラウザーは値が無効であることを表示します。

+ +

{{EmbedLiveSample("Impact_on_step",200,55)}}

+ +

明示的に含まれていない限り、 number、 range では step は既定値の 1 となり、 date/time 入力型では 1 単位 (秒, 週, 月, 日) となります。

+ +

アクセシビリティの考慮

+ +

ユーザーがフォームに記入したり、個々のフォームコントロールを使用するのに役立つ説明を提供してください。必須の入力、任意の入力、データの書式、その他の関連する情報を示してください。 max 属性を使用する場合は、この最大値の要件がユーザーに理解されていることを確認してください。 {{htmlelement('label')}} 内で指示を提供すれば十分かもしれません。ラベルの外に指示を提供すれば、より柔軟な配置やデザインが可能になるので、 aria-labelledby または aria-describedby を使用することを検討してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'input.html#the-min-and-max-attributes', 'min attribute')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'input.html#the-min-and-max-attributes', 'min attribute')}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/html/attributes/minlength/index.html b/files/ja/web/html/attributes/minlength/index.html new file mode 100644 index 0000000000..6b62f1918c --- /dev/null +++ b/files/ja/web/html/attributes/minlength/index.html @@ -0,0 +1,72 @@ +--- +title: 'HTML 属性: minlength' +slug: Web/HTML/Attributes/minlength +tags: + - Attribute + - Input + - Reference + - minlength + - textarea +translation_of: Web/HTML/Attributes/minlength +--- +

{{HTMLSidebar}}

+ +

minlength 属性は、ユーザーが {{htmlelement('input')}} または {{htmlelement('textarea')}} に入力できる最小文字数を (UTF-16 コード単位で) 定義します。 0 以上の整数値である必要があります。 minlength が指定されなかった場合、または無効な値が指定された場合は、 input や textarea には最小文字数が設定されません。この値は maxlength の値以下である必要があります。そうでなければどちらの条件にも合わせることができないので、この値が有効になることはありません。

+ +

フィールドのテキスト値の長さが minlength を UTF-16 コード単位の長さで下回った場合、入力欄は制約検証に失敗し、 {{domxref('validityState.tooShort')}} が true を返します。制約検証は、ユーザーが値を変更した場合にのみ適用されます。送信に失敗すると、ブラウザーによっては必要な最小文字列と現在の長さを示してエラーメッセージを表示します。

+ +

例

+ +

minlength="5" を追加すると、値は空か5文字以上でないと有効にはならなくなります。

+ +
<label for="fruit">Enter a fruit name that is at least 5 letters long</label> <input type="text" minlength="5" id="fruit">
+ +

擬似クラスを使用すると、要素を値が有効かどうかによってスタイル付けすることができます。この値は null (空欄) または5文字以上であれば有効になります。ライム色は無効であり、レモン色は有効です。

+ +
input {
+  border: 2px solid currentcolor;
+}
+input:invalid {
+  border: 2px dashed red;
+}
+input:invalid:focus {
+  background-image: linear-gradient(pink, lightgreen);
+}
+ +

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

+ +

仕様書

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

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/html/attributes/multiple/index.html b/files/ja/web/html/attributes/multiple/index.html new file mode 100644 index 0000000000..da54459d50 --- /dev/null +++ b/files/ja/web/html/attributes/multiple/index.html @@ -0,0 +1,185 @@ +--- +title: 'HTML 属性: multiple' +slug: Web/HTML/Attributes/multiple +tags: + - Attribute + - Attributes + - Constraint validation + - HTML +translation_of: Web/HTML/Attributes/multiple +--- +

{{HTMLSidebar}}

+ +

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

+ +
<input type="email" multiple name="emails" id="emails">
+ +

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

+ +

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

+ +
<input type="file" multiple name="uploads" id="uploads">
+ +

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

+ +

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>
+ +

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

+ +

アクセシビリティの考慮

+ +

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

+ +

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

+ +

例

+ +

email 入力型

+ +
<label for="emails">誰にメールしますか？</label>
+<input type="email" multiple name="emails" id="emails" list="drawfemails" required size="64">
+
+<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>
+ + + +

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

+ +

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

+ +

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

+ +

file 入力型

+ +

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

+ +
<form method="post" enctype="multipart/form-data">
+  <p>
+    <label for="uploads">
+       アップロードする画像を選択してください:
+    </label>
+    <input type="file" id="uploads" name="uploads" accept=".jpg, .jpeg, .png, .svg, .gif" multiple>
+  </p>
+  <p>
+    <label for="text">アップロードするテキストファイルを選択してください: </label>
+    <input type="file" id="text" name="text" accept=".txt">
+ </p>
+  <p>
+    <input type="submit" value="Submit">
+  </p>
+</form>
+ +

{{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 のコメントを解除して、マルチプルがシングルと同じ高さになるようにします。 */
+
+/*
+select[multiple] {
+  height: 1.5em;
+  vertical-align: top;
+}
+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')}}
+ +

関連情報

+ + diff --git a/files/ja/web/html/attributes/pattern/index.html b/files/ja/web/html/attributes/pattern/index.html new file mode 100644 index 0000000000..da31c8a2b4 --- /dev/null +++ b/files/ja/web/html/attributes/pattern/index.html @@ -0,0 +1,163 @@ +--- +title: 'HTML attribute: pattern' +slug: Web/HTML/Attributes/pattern +tags: + - Attribute + - Attributes + - Constraint Validation API + - HTML + - Reference +translation_of: Web/HTML/Attributes/pattern +--- +

{{HTMLSidebar}}

+ +

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

+ +

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

+ +
+

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

+
+
+ +

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

+ +

ユーザービリティ

+ +

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

+ +

制約検証

+ +

入力欄の値が空文字列ではなく、正規表現全体と一致しない場合は、 {{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>
+ +

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

+ +

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

+ +
input:invalid {
+  border: red solid 3px;
+}
+ +

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

+
+ +

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

+ +

パターンの指定

+ +

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

+ +

以下の例では、値を 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>
+ + + +

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")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/attributes/required/index.html b/files/ja/web/html/attributes/required/index.html new file mode 100644 index 0000000000..aaac1d96bb --- /dev/null +++ b/files/ja/web/html/attributes/required/index.html @@ -0,0 +1,109 @@ +--- +title: 'HTML 属性: required' +slug: Web/HTML/Attributes/required +tags: + - Attribute + - Attributes + - Constraint validation + - Forms + - required +translation_of: Web/HTML/Attributes/required +--- +

{{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')}} 擬似クラスが一致します。

+ +

この属性は {{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 です。 -- 従って、常に値があります。

+ +

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

+ +

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

+ +

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

+ +
+

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

+
+ +

属性の相互作用

+ +

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

+ +

ユーザビリティ

+ +

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

+ +

制約検証

+ +

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

+ +

アクセシビリティの考慮

+ +

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

+ +

例

+ +

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>
+
+ +

結果

+ +

{{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')}}
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/html/attributes/size/index.html b/files/ja/web/html/attributes/size/index.html new file mode 100644 index 0000000000..3722ecb051 --- /dev/null +++ b/files/ja/web/html/attributes/size/index.html @@ -0,0 +1,76 @@ +--- +title: 'HTML 属性: size' +slug: Web/HTML/Attributes/size +tags: + - Attribute + - HTML + - Input + - Reference + - Select +translation_of: Web/HTML/Attributes/size +--- +

{{HTMLSidebar}}

+ +

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

+ +

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">
+
+<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)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + +
仕様書状態
{{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")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/attributes/step/index.html b/files/ja/web/html/attributes/step/index.html new file mode 100644 index 0000000000..aa0e2c89a8 --- /dev/null +++ b/files/ja/web/html/attributes/step/index.html @@ -0,0 +1,132 @@ +--- +title: 'HTML attribute: step' +slug: Web/HTML/Attributes/step +tags: + - Attribute + - Attributes + - constrain validation + - step +translation_of: Web/HTML/Attributes/step +--- +

{{HTMLSidebar}}{{draft}}

+ +

step 属性は、が従わなければならない刻み値を指定する数値、またはキーワード any です。数値の入力型、たとえば {{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/range", "range")}} 型に有効です。

+ +

step は、スピナーボタンを上下にクリックしたり、範囲上でスライダーを左右に動かしたり、異なる日付タイプを検証したりする際の刻み間隔を設定します。明示的に指定されていない場合、 step の既定値は、 number と range の場合は 1、日付/時刻入力型の場合は1単位 (分、週、月、日) になります。値は正の整数または浮動小数点数、または刻みが指定されておらず、 (min や max のような他の制約を除いて) すべての値が可能であることを意味する特別な値 any のいずれかでなければなりません。

+ +

number 入力型の既定の刻み値は 1 で、刻みの基底値が整数でない場合を除き、整数のみを入力することができます。 time の既定の刻み値は 1 秒で、 900 は15分と等しくなります。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
step の既定値
入力型構文例
{{HTMLElement("input/date", "date")}}1 (日)<input type="date" min="2019-12-25" step="1">
{{HTMLElement("input/month", "month")}}1 (月)<input type="month" min="2019-12" step="12">
{{HTMLElement("input/week", "week")}}1 (週)<input type="week" min="2019-W23" step="2">
{{HTMLElement("input/time", "time")}}60 (分)<input type="time" min="09:00" step="900">
{{HTMLElement("input/datetime-local", "datetime-local")}}1 (日) +

<input type="datetime-local" min="019-12-25T19:30" step="7">

+
{{HTMLElement("input/number", "number")}}1<input type="number" min="0" step="0.1" max="10">
{{HTMLElement("input/range", "range")}}1<input type="range" min="0" step="2" max="10">
+ +

any が明示的に設定されていない場合、 number, 日付/時刻入力型, range の入力型で有効な値は、刻みの基底値と等しくなります。 - min の値と、それに step の値を max の値 (指定されている場合) まで加えていった値です。例えば、 <input type="number" min="10" step="2"> は10以上の偶数が有効です。省略された場合、 <input type="number"> は任意の整数が有効ですが、 4.2 のような小数は無効になります。これは step の既定値が 1 だからです。 4.2 を有効にするには、 step を any、 0.1, 0.2 などに設定するか、 min の値の小数点以下を .2 に、たとえば <input type="number" min="-5.2"> のようにする必要があります。

+ +

min の step への影響

+ +

min と step の値は、 step 属性がない場合も含め、どの値が有効であるかを定義します。 step の既定値は 0 です。

+ +

無効な入力の周囲に太く赤い境界を追加します。

+ +
input:invalid {
+  border: solid red 3px;
+}
+ +

それから入力欄の最小値を 7.2 と定義し、 step 属性は省略しているので、既定値が 1 になります。

+ +
<input id="myNumber" name="myNumber" type="number" step="2" min="1.2">
+ +

有効な値は、 1.2, 3.2, 5.2, 7.2, 9.2, 11.2 などになります。整数や .2 が付く偶数は無効です。無効な値である場合、対応しているブラウザーは値が無効であることを表示します。数値スピナーがある場合は、 1.2 以上の有効な浮動小数点以下の値のみ表示されます。

+ +

{{EmbedLiveSample("min_impact_on_step",200,55)}}

+ +
+

注: ユーザーが入力したデータが刻みの設定に従っていない場合、制約検証では無効とみなされ、 {{cssxref(":invalid")}} と {{cssxref(":out-of-range")}} の擬似クラスにマッチします。

+
+ +

詳しくはクライアント側制約検証と {{domxref("ValidityState.stepMismatch", "stepMismatch")}} を参照してください。

+ +

アクセシビリティの考慮

+ +

ユーザーがフォームに記入したり、個々のフォームコントロールを使用するのに役立つ説明を提供してください。必須の入力、任意の入力、データの書式、その他の関連する情報を示してください。 max 属性を使用する場合は、この最大値の要件がユーザーに理解されていることを確認してください。 {{htmlelement('label')}} 内で指示を提供すれば十分かもしれません。ラベルの外に指示を提供すれば、より柔軟な配置やデザインが可能になるので、 aria-labelledby または aria-describedby を使用することを検討してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'input.html#the-min-and-max-attributes', 'min attribute')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'input.html#the-min-and-max-attributes', 'min attribute')}}{{Spec2('HTML5 W3C')}}
+ +

関連情報

+ + diff --git a/files/ja/web/html/block-level_elements/index.html b/files/ja/web/html/block-level_elements/index.html new file mode 100644 index 0000000000..0ee8e69d1e --- /dev/null +++ b/files/ja/web/html/block-level_elements/index.html @@ -0,0 +1,128 @@ +--- +title: ブロックレベル要素 +slug: Web/HTML/Block-level_elements +tags: + - Beginner + - Development + - Guide + - HTML + - HTML5 + - 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/")}}
diff --git a/files/ja/web/html/cors_enabled_image/index.html b/files/ja/web/html/cors_enabled_image/index.html new file mode 100644 index 0000000000..206ac5c685 --- /dev/null +++ b/files/ja/web/html/cors_enabled_image/index.html @@ -0,0 +1,120 @@ +--- +title: 画像とキャンバスをオリジン間で利用できるようにする +slug: Web/HTML/CORS_enabled_image +tags: + - Advanced + - CORS + - Canvas + - HTML + - セキュリティ + - リファレンス + - 上級者 +translation_of: Web/HTML/CORS_enabled_image +--- +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ + + +

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

+ +

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

+ +

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

+ +

ウェブサーバーの構成

+ +

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

+ +

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

+ +
<IfModule mod_setenvif.c>
+  <IfModule mod_headers.c>
+    <FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp)$">
+      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" であるもの) を、インターネットのどこからでもオリジン間のアクセスができるようにします。

+ +

保存機能の実装

+ +

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

+ +

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

+ +

ダウンロードの開始

+ +

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

+ +
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")}} イベントが発火した場合、つまり画像データが受信された場合のイベントリスナーを追加します。

+ +

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

+ +

画像の受信と保存

+ +

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

+ +
function imageReceived() {
+  let canvas = document.createElement("canvas");
+  let context = canvas.getContext("2d");
+
+  canvas.width = downloadedImg.width;
+  canvas.height = downloadedImg.height;
+
+  context.drawImage(downloadedImg, 0, 0);
+  imageBox.appendChild(canvas);
+
+  try {
+    localStorage.setItem("saved-image-example", canvas.toDataURL("image/png"));
+  }
+  catch(err) {
+    console.log("Error: " + err);
+  }
+}
+ +

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

+ +

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

+ +

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

+ +

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

+ +

関連情報

+ + + +
{{QuickLinksWithSubpages("/ja/docs/Web/HTML/")}}
diff --git a/files/ja/web/html/date_and_time_formats/index.html b/files/ja/web/html/date_and_time_formats/index.html new file mode 100644 index 0000000000..176c4991cc --- /dev/null +++ b/files/ja/web/html/date_and_time_formats/index.html @@ -0,0 +1,466 @@ +--- +title: HTML で使われる日付や時刻の形式 +slug: Web/HTML/Date_and_time_formats +tags: + - Date + - Element + - Format + - HTML + - ISO 8601 + - Input + - Reference + - String + - Time + - Week + - datetime + - datetime-local + - del + - ins + - month + - month-year + - week-year + - 日付 + - 時刻 + - 週 +translation_of: Web/HTML/Date_and_time_formats +--- +
{{HTMLRef}}
+ +

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

+ +

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

+ +
+ +
+ +

例

+ +

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

+ +

文字セット

+ +

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

+ +

年

+ +

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

+ +

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

+ +

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

+ +

1年はふつうは365日ですが、{{anch("Leap years", "閏年")}}は例外です。

+ +

閏年

+ +

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

+ +

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

+ +

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

+ +

月

+ +

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

+ +

日

+ +

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
+ +

週の文字列

+ +

A week string specifies a week within a particular year. A valid week string consists of a valid {{anch("Year numbers", "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.

+ +

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:

+ + + +

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)
+ +

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 valid month string consists of a valid {{anch("Year numbers", "year number")}} (a string of at least four digits), followed by a hyphen character ("-", or U+002D), followed by a two-digit numeric {{anch("Months of the year", "month number")}}, 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.
+ +

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 {{anch("Month strings", "month string")}}, followed by a hyphen character ("-", or U+002D), followed by a two-digit {{anch("Days of the month", "day of the month")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
妥当な日の文字列の例
月の文字列日付全体
1993-11-01November 1, 1993
1066-10-14October 14, 1066
0571-04-22April 22, 571
0062-02-05February 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.

+ +

There are some additional basic rules:

+ + + + + + + + + + + + + + + + + + + + + + + + + +
妥当な時刻の文字列の例
時刻の文字列時刻
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)
+ +

ローカル日時の文字列

+ +

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.

+ +

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
+ +
    +
  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. +
+ +

グローバル日時の文字列

+ +

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 {{anch("Local date and time strings", "local date and time string")}}, except it has a time zone string appended to the end, following the time.

+ +

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

+ +

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:

+ + + +

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. +
+ +

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
+ +

関連情報

+ + diff --git a/files/ja/web/html/element/a/index.html b/files/ja/web/html/element/a/index.html new file mode 100644 index 0000000000..3809f7f927 --- /dev/null +++ b/files/ja/web/html/element/a/index.html @@ -0,0 +1,503 @@ +--- +title: ': アンカー要素' +slug: Web/HTML/Element/a +tags: + - Content + - Element + - HTML + - HTML text-level semantics + - 'HTML:Flow content' + - 'HTML:Interactive content' + - 'HTML:Palpable Content' + - 'HTML:Phrasing content' + - Inline element + - Reference + - Web +translation_of: Web/HTML/Element/a +--- +
{{HTMLRef}}
+ +

HTML の <a> 要素 (アンカー要素) は、 href 属性を用いて、別のウェブページ、ファイル、メールアドレス、同一ページ内の場所、または他の URL へのハイパーリンクを作成します。 <a> の内容は、リンク先を示すものであるべきです。

+ +
{{EmbedInteractiveExample("pages/tabbed/a.html")}}
+ + + +

属性

+ +

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

+ +
+
{{HTMLAttrDef("download")}}{{HTMLVersionInline(5)}}
+
リンクされた URL に移動するのではなく、保存するようユーザーに促します。値があってもなくても利用できます。
+
+
+
値を定義すると、ファイル名として提案します。 / および \ はアンダースコアに変換されます。ファイルシステムがファイル名に禁止している文字は他にもあるかもしれませんので、ブラウザーは必要に応じてファイル名を調整します。
+
+ +
    +
  • 値がない場合は、ブラウザーは様々なソースから生成されたファイル名/拡張子を提案します。 +
      +
    • HTTP の {{HTTPHeader("Content-Disposition")}} ヘッダー
      • +
    • URL のパスの最後の部分
      • +
    • {{Glossary("MIME_type", "メディア種別")}} ({{HTTPHeader("Content-Type")}} ヘッダー、 data: URL の先頭、 blob: URL の {{domxref("Blob.type")}} から)
      • +
    +
    • +
+ +
注: + +
    +
  • download は同一オリジンの URL と、 blob:、 data: の各スキームでのみ動作します。
    • +
  • +

    Content-Disposition ヘッダーが download とは異なる情報を持っていた場合、動作結果は様々です。

    + +
      +
    • +

      ヘッダーが filename を指定した場合、そちらが download 属性で指定されたファイル名より優先されます。

      +
      • +
    • +

      ヘッダーが inline の処分を指定している場合、 Chrome や Firefox 82 以降のバージョンでは、属性を優先してダウンロードとして扱います。 82 以前のバージョンの Firefox では、ヘッダーが優先され、コンテンツがインラインで表示されます。

      +
      • +
    +
    • +
+
+
+
{{HTMLAttrDef("href")}}
+
+

ハイパーリンクが指す先の URL です。リンクは HTTP ベースの URL に限定されません。ブラウザーが対応するあらゆるプロトコルを使用することができます。

+ +
    +
  • ページの節を示すフラグメント URL
    • +
  • メディアファイルの一部を示すメディアフラグメント
    • +
  • 電話番号を示す tel: URL
    • +
  • メールアドレスを示す mailto: URL
    • +
  • ウェブブラウザーがその他の URL スキームに対応していない可能性がある場合、ウェブサイトは {{domxref("Navigator/registerProtocolHandler", "registerProtocolHandler()")}} を使用することができます。
    • +
+
+
{{HTMLAttrDef("hreflang")}}
+
リンク先の URL における自然言語のヒントです。組み込まれている機能はありません。許容される値は、 lang グローバル属性と同じです。
+
{{HTMLAttrDef("ping")}}
+
空白で区切られた URL のリストです。リンクをたどるときに、ブラウザーは {{HTTPMethod("POST")}} リクエストを指定された URL に、 PING を本文として送信します。通常、トラッキングに使用されます。
+
{{HTMLAttrDef("referrerpolicy")}}{{Experimental_Inline}}
+
リンクをたどるときにどれだけのリファラーを送信するかです。有効な値とその効果については {{HTTPHeader("Referrer-Policy")}} を参照してください。
+
{{HTMLAttrDef("rel")}}
+
リンク先の URL との関係を示す、空白で区切られたリンク種別のリストです。
+
{{HTMLAttrDef("target")}}
+
リンク先の URL を表示する場所、 閲覧コンテキスト (タブ、ウィンドウ、<iframe>) の名前で指定します。以下のキーワードは URL の読み込み先について特別な意味を持ちます。 +
    +
  • _self: 現在の閲覧コンテキストです。 (既定値)
    • +
  • _blank: ふつうは新しいタブですが、新しいウィンドウを使用するようにブラウザーを設定できます。
    • +
  • _parent: 現在の親の閲覧コンテキストです。親がない場合は、 _self と同じ振る舞いをします。
    • +
  • _top: 最上位の閲覧コンテキスト (現在のコンテキストの祖先である "最上位" のコンテキスト) です。親の閲覧コンテキストがない場合は、 _self と同じ動作をします。
    • +
+ +
+

注: target を使用する際は、window.opener API の悪用を避けるために rel="noreferrer" を追加してください。

+
+ +
+

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

+
+
+
{{HTMLAttrDef("type")}}
+
リンク先 URL の {{Glossary("MIME type", "MIME タイプ")}}の形式を表すヒントです。組み込まれている機能はありません。
+
+ +

廃止された属性

+ +
+
{{HTMLAttrDef("charset")}}{{Obsolete_Inline("HTML5")}}
+
リンク先 URL の{{Glossary("character encoding", "文字エンコーディング")}}のヒントでした。 +
+

注: この属性は廃止されており、ページ作者が使用すべきではありません。リンク先の URL で HTTP の {{HTTPHeader("Content-Type")}} ヘッダーを使用してください。

+
+
+
{{HTMLAttrDef("coords")}}{{Obsolete_Inline("HTML5")}}
+
shape 属性とともに使用されます。カンマ区切りの座標のリストです。
+
{{HTMLAttrDef("name")}}{{Obsolete_Inline("HTML5")}}
+
ページ内のリンク先の場所を定義するアンカーで必要でした。 HTML 4.01 では、値がまったく同じであれば id 属性と name 属性を <a> 要素内で同時に使用できました。 +
+

注: 代わりにグローバル属性の {{HTMLAttrxRef("id")}} を使用してください。

+
+
+
{{HTMLAttrDef("rev")}}{{Obsolete_Inline("HTML5")}}
+
この属性は、逆方向のリンクを指定します。 rel 属性と逆の関係を定義していました。これはとても紛らわしいため、非推奨になりました。
+
{{HTMLAttrDef("shape")}}{{Obsolete_Inline("HTML5")}}
+
イメージマップ内のハイパーリンクの領域の形状です。 +
注: イメージマップについては {{HTMLElement("area")}} 要素を使用してください。
+
+
+ +

プロパティ

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
コンテンツカテゴリフローコンテンツ, 記述コンテンツ, 対話型コンテンツ, 知覚可能コンテンツ
許可されている内容透過的コンテンツで、フローコンテンツ (対話型コンテンツを除く) または記述コンテンツを含むもの
タグの省略{{no_tag_omission}}
許可されている親要素記述コンテンツを受け入れるすべての要素、フローコンテンツ を受け入れるすべての要素。ただし <a> 要素を除く。
暗黙の ARIA ロール{{ARIARole("link")}} (href 属性がある場合）。それ以外は 対応するロールなし
許可されている ARIA ロール +

href 属性がある場合:

+ +
    +
  • {{ARIARole("button")}}
    • +
  • {{ARIARole("checkbox")}}
    • +
  • {{ARIARole("menuitem")}}
    • +
  • {{ARIARole("menuitemcheckbox")}}
    • +
  • {{ARIARole("menuitemradio")}}
    • +
  • {{ARIARole("option")}}
    • +
  • {{ARIARole("radio")}}
    • +
  • {{ARIARole("switch")}}
    • +
  • {{ARIARole("tab")}}
    • +
  • {{ARIARole("treeitem")}}
    • +
+ +

href 属性がない場合:

+ +
    +
  • any
    • +
+
DOM インターフェイス{{DOMxRef("HTMLAnchorElement")}}
+ +

例

+ +

絶対 URL へのリンク

+ +

HTML

+ +
<a href="https://www.mozilla.com">
+  Mozilla
+</a>
+ +

結果

+ +

{{EmbedLiveSample('Linking_to_an_absolute_URL')}}

+ +

相対 URL へのリンク

+ +

HTML

+ +
<a href="//example.com">Scheme-relative URL</a>
+<a href="/en-US/docs/Web/HTML">Origin-relative URL</a>
+<a href="./p">Directory-relative URL</a>
+
+ + + +

結果

+ +

{{EmbedLiveSample('Linking_to_relative_URLs')}}

+ +

同じページの要素へのリンク

+ +
<!-- <a> element links to the section below -->
+<p><a href="#Section_further_down">
+  Jump to the heading below
+</a></p>
+
+<!-- Heading to link to -->
+<h2 id="Section_further_down">Section further down</h2>
+
+ +
+

注: href="#top" または空のフラグメント (href="#") を使用すると、現在のページの先頭にリンクすることができると、 HTML 仕様書で定義されています。

+
+ +

メールアドレスへのリンク

+ +

メールプログラムを開いて新しいメッセージを送るようにするリンクを作成するには、 mailto: スキームを使用してください。

+ +
<a href="mailto:nowhere@mozilla.org">nowhere にメールを送る</a>
+ +

件名、本文、他の定義済みコンテンツを含めるなど、mailto URL スキームの詳細については、電子メールのリンクまたは {{RFC(6068)}} をご覧ください。

+ +

電話番号へのリンク

+ +
<a href="tel:+49.157.0156">+49 157 0156</a>
+<a href="tel:+1(555)5309">(555) 5309</a>
+ +

tel: リンクは端末の能力によって様々な動作をします。

+ + + +

tel URL スキームについての構文、追加機能、その他の詳細について、詳しくは {{RFC(3966)}} をご覧ください。

+ +

download 属性を使用して <canvas> を PNG として保存する

+ +

{{HTMLElement("canvas")}} 要素の内容を画像として保存する場合は、 download 属性をもつリンクを作成し、キャンバスのデータを data: URLで示します。

+ + + +
HTML
+ +
<p>マウスボタンを押しっぱなしにして動かすと描画されます。
+  <a href="" download="my_painting.png">絵をダウンロード</a>
+</p>
+
+<canvas width="300" height="300"></canvas>
+
+ +
CSS
+ +
html {
+  font-family: sans-serif;
+}
+canvas {
+  background: #fff;
+  border: 1px dashed;
+}
+a {
+  display: inline-block;
+  background: #69c;
+  color: #fff;
+  padding: 5px 10px;
+}
+ +
JavaScript
+ +
var canvas = document.querySelector('canvas'),
+    c = canvas.getContext('2d');
+c.fillStyle = 'hotpink';
+
+function draw(x, y) {
+  if (isDrawing) {
+    c.beginPath();
+    c.arc(x, y, 10, 0, Math.PI*2);
+    c.closePath();
+    c.fill();
+  }
+}
+
+canvas.addEventListener('mousemove', event =>
+  draw(event.offsetX, event.offsetY)
+);
+canvas.addEventListener('mousedown', () => isDrawing = true);
+canvas.addEventListener('mouseup', () => isDrawing = false);
+
+document.querySelector('a').addEventListener('click', event =>
+  event.target.href = canvas.toDataURL()
+);
+
+ +
結果
+ +

{{EmbedLiveSample('Example_painting_app_with_save_link', '100%', '400')}}

+ +

セキュリティとプライバシー

+ +

<a> 要素は、ユーザーのセキュリティやプライバシーに影響を及ぼす可能性があります。詳細情報については Referer ヘッダー: プライバシーとセキュリティの考慮事項を参照してください。

+ +

target="_blank" を rel="noreferrer" や rel="noopener" なしで使用すると、ウェブサイトが {{domxref("window.opener")}} API 搾取攻撃を受けやすくなります (vulnerability description) が、新しい版のブラウザー (Firefox 79 以降など) では target="_blank" を設定すると、 rel="noopener" と同じ保護が提供されます。

+ +

アクセシビリティ

+ +

強力なリンクテキスト

+ +

リンクの内容は、文脈から外れたとしても、リンクの行き先を示すべきです。

+ +

アクセシビリティに対応していない貧弱なリンクテキスト

+ +

よくある残念な間違いは、「ここをクリック」や「こちら」のみにリンクを設定していることです。

+ +
<p>
+  私たちの製品については<a href="/products">こちら</a>をご覧ください。
+</p>
+
+ +

強力なリンクテキスト

+ +

幸いにも、これは簡単に直すことができ、しかもアクセシビリティに対応していないものより短くなります。

+ +
<p>
+  <a href="/products">私たちの製品について</a>詳しくご覧ください。
+</p>
+ +

支援ソフトウェアには、ページ上のすべてのリンクを一覧表示するショートカットがあります。しかし、強力なリンクテキストはすべてのユーザーに利点があります。「すべてのリンクの一覧」のショートカットは、視力のあるユーザーがページを素早く見渡す方法を模倣しています。

+ +

onclick イベント

+ +

よく見られる誤った使い方として、擬似的なボタンを作成するためにアンカー要素を使用し、 href を # または javascript:void(0) に設定してページの再読み込みを防ぎ、 click を待ち受けするようにするというものがあります。

+ +

これらの偽の href 値は、リンクをコピーまたはドラッグしたり、新しいやウィンドウでリンクを開いたり、ブックマークしたり、 JavaScript の読み込み中、エラー状態、無効状態の場合などに予期しない動作を引き起こします。また、読み上げソフトなどの支援技術に対して誤った意味を伝えることもあります。

+ +

代わりに {{HTMLElement("button")}} を使用してください。通常、アンカーは適切な URL を使用して移動するためだけに使用するべきです。

+ + + +

リンクを新しいタブやウィンドウで開くために target="_blank" を使用したり、ダウンロード元を指したりする場合は、リンクを起動したときに何が起こるかを示すようにしてください。

+ +

弱視で読み上げ技術の支援の下に操作を行っている人や、認知に問題がある人は、予期せず新しいタブ、ウィンドウ、アプリケーションが開いたときに混乱するかもしれません。古いバージョンの読み上げソフトウェアは、この動作をアナウンスしません。

+ + + +
<a target="_blank" href="https://www.wikipedia.org">
+  Wikipedia (新しいウィンドウで開きます)
+</a>
+
+ + + +
<a href="2017-annual-report.ppt">
+  2017 年次レポート (PowerPoint)
+</a>
+
+ +

この種のリンクの動作を表すためにテキストの代わりにアイコンが使われている場合は、 {{HTMLAttrxRef("alt", "img", "alt のテキスト", "true") }}を確実に入れてください。

+ +
<a  target="_blank" href="https://www.wikipedia.org">
+  Wikipedia
+  <img alt="(新しいタブで開く)" src="newtab.svg">
+</a>
+
+<a href="2017-annual-report.ppt">
+  2017 Annual Report
+  <img alt="(PowerPoint ファイル)" src="ppt-icon.svg">
+</a>
+ + + + + +

スキップリンクは {{HTMLElement("body")}} コンテンツのできるだけ先頭に近い場所に配置されるリンクであり、ページのメインコンテンツの先頭にリンクします。通常、 CSS はスキップリンクがフォーカスを受けるまでは画面外へ隠します。

+ +
<body>
+  <a href="#content">メインコンテンツへスキップ</a>
+
+  <header>
+    …
+  </header>
+
+  <main id="content"> <!-- スキップリンクが辿り着く位置 -->
+
+ +
.skip-link {
+  position: absolute;
+  top: -3em;
+  background: #fff;
+}
+.skip-link:focus {
+  top: 0;
+}
+ +

スキップリンクは、キーボードの利用者がヘッダーナビゲーションのような複数のページを通して繰り返されるコンテンツを回避できるようにするものです。

+ +

スキップリンクは、スイッチ制御、音声コマンド、またはマウススティック/ヘッドワンドなどの補助技術を使用して操作する人にとって、反復的にリンクを移動する操作が煩わしい場合に特に便利です。

+ + + +

大きさと近接性

+ +

大きさ

+ +

リンクのような対話的要素は、それらを簡単に起動できるように十分な大きさの領域を提供する必要があります。これは、運動制御に問題がある人や、タッチパネルなどの精度が低い入力手段を使用している人など、さまざまな人に役立ちます。最小の大きさは 44×44 CSS ピクセルが推奨されます。

+ +

散文コンテンツのテキストのみのリンクは免除されますが、それでもハイパーリンクに十分なテキストがあることを確認して、操作しやすくなるようにしておくと良いでしょう。

+ + + +

近接性

+ +

リンクのような対話的要素が互いに視覚的に近接して配置される場合は、それらを隔てる間隔を置いてください。間隔を空けることで、運動制御に問題のある人が誤って間違った対話的コンテンツを操作してしまうことを防ぐことができます。

+ +

間隔は {{CSSxRef("margin")}} などの CSS プロパティを使用して作成することができます。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("Referrer Policy", "#referrer-policy-delivery-referrer-attribute", "referrer attribute")}}{{Spec2("Referrer Policy")}}referrerpolicy 属性を追加。
{{SpecName("HTML WHATWG", "textlevel-semantics.html#the-a-element", "<a>")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5 W3C", "textlevel-semantics.html#the-a-element", "<a>")}}{{Spec2("HTML5 W3C")}}
{{SpecName("HTML4.01", "struct/links.html#h-12.2", "<a>")}}{{Spec2("HTML4.01")}}
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/html/element/abbr/index.html b/files/ja/web/html/element/abbr/index.html new file mode 100644 index 0000000000..626d09b0c8 --- /dev/null +++ b/files/ja/web/html/element/abbr/index.html @@ -0,0 +1,208 @@ +--- +title: ': 略語要素' +slug: Web/HTML/Element/abbr +tags: + - Acronym + - Definitions + - Element + - HTML + - HTML text-level semantics + - 'HTML:Flow content' + - 'HTML:Palpable Content' + - 'HTML:Phrasing content' + - Reference + - Web + - abbr + - abbreviation + - semantics +translation_of: Web/HTML/Element/abbr +--- +
{{HTMLRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
コンテンツカテゴリフローコンテンツ, 記述コンテンツ, 知覚可能コンテンツ
許可されている内容記述コンテンツ
タグの省略{{no_tag_omission}}
許可されている親要素記述コンテンツを受け入れるすべての要素
暗黙の ARIA ロール対応するロールなし
許可されている ARIA ロールすべて
DOM インターフェイス{{domxref("HTMLElement")}}
+ +

属性

+ +

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

+ +

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

+ +

使用上の注意

+ +

よくある使用例

+ +

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

+ + + +

文法的な考慮事項

+ +

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

+ +

既定のスタイル

+ +

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

+ + + +

例

+ +

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

+ +

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

+ +

HTML

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

結果

+ +

{{EmbedLiveSample("Marking_up_an_abbreviation_semantically")}}

+ +

略語の整形

+ +

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

+ +

HTML

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

CSS

+ +
abbr {
+  font-variant: all-small-caps;
+}
+ +

結果

+ +

{{EmbedLiveSample("Styling_abbreviations")}}

+ +

完全形の提供

+ +

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

+ +

HTML

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

結果

+ +

{{EmbedLiveSample("Providing_an_expansion")}}

+ +

略語の定義

+ +

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

+ +

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>
+
+<p>A <dfn id="spec">Specification</dfn>
+(<abbr title="Specification">spec</abbr>) 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')}}
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/html/element/acronym/index.html b/files/ja/web/html/element/acronym/index.html new file mode 100644 index 0000000000..d6be16f104 --- /dev/null +++ b/files/ja/web/html/element/acronym/index.html @@ -0,0 +1,81 @@ +--- +title: +slug: Web/HTML/Element/acronym +tags: + - Element + - HTML + - 'HTML:Flow content' + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/acronym +--- +
{{obsolete_header}}
+ +

概要

+ +

HTML の頭字語要素 (<acronym>) は、頭字語または略語の単語を構成する文字の並びを明示することができます。

+ +
+

使用上の注意: この要素は HTML5 にて廃止されており、使用するべきではありません。代わりに {{HTMLElement("abbr")}} 要素を使用してください。

+
+ +

属性

+ +

この要素は、全ての要素に共通のグローバル属性のみを持ちます。

+ +

DOM インターフェイス

+ +

この要素は {{domxref('HTMLElement')}} インターフェイスを提供します。

+ +
実装上の注意: Gecko 1.9.2 まで、 Firefox はこの要素に {{domxref('HTMLSpanElement')}} インターフェイスを実装していました。
+ +

例

+ +
<p>The <acronym title="World Wide Web">WWW</acronym> is only a component of the Internet.</p>
+
+ +

既定のスタイル

+ +

このタグの目的は単に作者の利便性のためのものであり、ブラウザーによって既定のスタイルは様々です。

+ +
    +
  • Internet Explorer などの一部のブラウザーでは、この要素に {{HTMLElement("span")}} 要素と異なるスタイル付けは行いません。
    • +
  • Opera、Firefox、Chrome などでは、この要素の内容に点線の下線が付きます。
    • +
  • ブラウザーによっては点線の下線を引くだけでなく、スモールキャップスにします。このスタイルを抑制するには、 CSS で {{cssxref('font-variant')}}: none などをつけます。
    • +
+ +

よって、ウェブの作者は大体既定のスタイルに依存しないことが強く推奨されます。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML4.01', 'struct/text.html#edef-ACRONYM', '<acronym>')}}{{Spec2('HTML4.01')}}
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ +
    +
  • HTML の {{htmlelement("abbr")}} 要素
    • +
+ +
{{HTMLRef}}
diff --git a/files/ja/web/html/element/address/index.html b/files/ja/web/html/element/address/index.html new file mode 100644 index 0000000000..b968983178 --- /dev/null +++ b/files/ja/web/html/element/address/index.html @@ -0,0 +1,140 @@ +--- +title: '
: 連絡先要素' +slug: Web/HTML/Element/address +tags: + - Address + - Author + - Contact + - Contact Information + - Element + - Email + - Email Address + - HTML + - HTML sections + - 'HTML:Flow content' + - 'HTML:Palpable Content' + - Reference + - Web +translation_of: Web/HTML/Element/address +--- +
{{HTMLRef}}
+ +

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

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

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

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
コンテンツカテゴリフローコンテンツ、知覚可能コンテンツ
許可されている内容フローコンテンツ。ただし <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("time")}} によるもの) のような連絡先情報以外の情報を含めるべきではありません。
    • +
  • 一般的に、 <address> 要素は現在のセクションに {{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>
+    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')}}
+ +

ブラウザーの互換性

+ + + +

{{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 文書のセクションとアウトライン
    • +
diff --git a/files/ja/web/html/element/applet/index.html b/files/ja/web/html/element/applet/index.html new file mode 100644 index 0000000000..05eab53ccd --- /dev/null +++ b/files/ja/web/html/element/applet/index.html @@ -0,0 +1,140 @@ +--- +title: ': 埋め込み Java アプレット要素' +slug: Web/HTML/Element/applet +tags: + - Element + - HTML + - Java + - Obsolete + - Reference + - Web + - applet +translation_of: Web/HTML/Element/applet +--- +

{{HTMLRef}}{{Obsolete_Header}}

+ +
+

<applet> 要素は Gecko 56 および Chrome 47 で廃止されました。

+ +

また、WebKit および Edge では廃止が検討されています。

+
+ +

廃止された HTML の アプレット要素 (<applet>) は文書に Java アプレットを埋め込みます。この要素は {{HTMLElement("object")}} にとって代わり、廃止されました。

+ +

ウェブでの Java アプレットの使用は非推奨です。多くのブラウザーが、すでに Java プラグインを含むプラグイン使用の対応をやめています。

+ + + + + + + + + + + + + + + + + + + + + + + + +
コンテンツカテゴリフローコンテンツ, 記述コンテンツ, 埋め込みコンテンツ, 対話型コンテンツ, 知覚可能コンテンツ
許可されている内容0個以上の {{HTMLElement("param")}} 要素、その後で 透過的コンテンツ
タグの省略なし。開始タグと終了タグの両方が必須です。
許可されている親要素埋め込みコンテンツを受け付けるすべての要素
DOM インターフェイス{{DOMxRef("HTMLAppletElement")}}
+ +

属性

+ +
+
{{HTMLAttrDef("align")}}
+
この属性は、周囲にあるコンテンツとの関係として、ページ上でアプレットを配置するために使用します。 HTML 4.01 仕様では bottom, left, middle, right, and top という値を定義していましたが、 Microsoft および Netscape は absbottom, absmiddle, baseline, center, texttop にも対応していました。
+
{{HTMLAttrDef("alt")}}
+
この属性は、Java をサポートしないブラウザーが代わりに表示する説明文を与えます。ページ作者は、<applet> 要素に囲まれた内容物も代替テキストとして表示される可能性があることにも留意すべきです。
+
{{HTMLAttrDef("archive")}}
+
この属性は、アーカイブ化あるいは圧縮されたバージョンのアプレットとアプレットに関連づけられた class ファイルを参照するもので、これらはダウンロード時間の削減に役立ちます。
+
{{HTMLAttrDef("code")}}
+
この属性は、読み込んで実行するアプレットの class ファイルの URL を指定します。アプレットのファイル名は .class 拡張子で識別します。code で指定した URL は、codebase 属性に相対的となるでしょう。
+
{{HTMLAttrDef("codebase")}}
+
この属性は、code 属性で参照するアプレットの .class ファイルを保存しているディレクトリの絶対または相対 URL を与えます。
+
{{HTMLAttrDef("datafld")}}
+
Internet Explorer 4 以上がサポートするこの属性は、バインドされたデータを提供するデータソースオブジェクトの列名を指定します。この属性は、Java アプレットに渡すさまざまな {{HTMLElement("param")}} 要素を指定するために使用できました。
+
{{HTMLAttrDef("datasrc")}}
+
datafld と同様に、この属性は Internet Explorer 4 のデータバインディングで使用します。これは、アプレットに関連づけられた {{HTMLElement("param")}} 要素にバインドしたデータを提供するデータソースオブジェクトの ID を示します。
+
{{HTMLAttrDef("height")}}
+
この属性は、アプレットが必要とする高さをピクセル数で指定します。
+
{{HTMLAttrDef("hspace")}}
+
この属性は、アプレットの両側に確保する水平方向の追加スペースを指定します。
+
{{HTMLAttrDef("mayscript")}}
+
Netscape の実装ではこの属性で、ドキュメント内に埋め込んだスクリプト言語のプログラムでアプレットにアクセスできます。
+
{{HTMLAttrDef("name")}}
+
この属性はアプレットを他のリソース、特にスクリプトから識別できるようにするため、アプレットに名前をつけます。
+
{{HTMLAttrDef("object")}}
+
この属性は、アプレットのシリアライズ表現の URL を指定します。
+
{{HTMLAttrDef("src")}}
+
この属性は Internet Explorer 4 以上向けに定義されたもので、アプレットに関係するファイルの URL を指定します。意味や使用法は不明瞭であり、また HTML 標準に含まれていません。
+
{{HTMLAttrDef("vspace")}}
+
この属性は、アプレットの上下に確保する垂直方向の追加スペースを指定します。
+
{{HTMLAttrDef("width")}}
+
この属性は、アプレットが必要とする幅をピクセル数で指定します。
+
+ +

例

+ +

HTML

+ +
<applet code="game.class" align="left" archive="game.zip" height="250" width="350">
+  <param name="difficulty" value="easy">
+  <b>Sorry, you need Java to play this game.</b>
+</applet>
+
+ +

{{EmbedLiveSample("Example", "100%", 300)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("HTML5.2", "obsolete.html#the-applet-element", "<applet>")}}{{Spec2("HTML5.2")}}
{{SpecName("HTML5.1", "obsolete.html#the-applet-element", "<applet>")}}{{Spec2("HTML5.1")}}
{{SpecName("HTML5 W3C", "obsolete.html#the-applet-element", "<applet>")}}{{Spec2("HTML5 W3C")}}廃止
{{SpecName("HTML4.01", "struct/objects.html#h-13.4", "<applet>")}}{{Spec2("HTML4.01")}}{{HTMLElement("object")}} に置き換えて非推奨化
+ +

ブラウザーの互換性

+ + + +

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

+ +

注

+ +

W3C 仕様書では <applet> の使用を勧めておらず、 {{HTMLElement("object")}} 要素を勧めています。 HTML 4.01 strict の定義ではこの要素を非推奨としており、 HTML5 では完全に廃止されました。

diff --git a/files/ja/web/html/element/area/index.html b/files/ja/web/html/element/area/index.html new file mode 100644 index 0000000000..47f9017fa7 --- /dev/null +++ b/files/ja/web/html/element/area/index.html @@ -0,0 +1,187 @@ +--- +title: +slug: Web/HTML/Element/area +tags: + - Content + - Element + - HTML + - 'HTML:Flow content' + - 'HTML:Phrasing content' + - Multimedia + - Reference + - Web +translation_of: Web/HTML/Element/area +--- +
{{HTMLRef}}
+ +

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

+ +

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

+ +
{{EmbedInteractiveExample("pages/tabbed/area.html", "tabbed-taller")}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
コンテンツカテゴリフローコンテンツ、記述コンテンツ
許可されている内容なし。これは{{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')}}
+ +

ブラウザーの互換性

+ + + +

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

diff --git a/files/ja/web/html/element/article/index.html b/files/ja/web/html/element/article/index.html new file mode 100644 index 0000000000..fda16cdb3d --- /dev/null +++ b/files/ja/web/html/element/article/index.html @@ -0,0 +1,149 @@ +--- +title: '
: 記事コンテンツ要素' +slug: Web/HTML/Element/article +tags: + - Element + - HTML + - HTML sections + - Reference + - Web +translation_of: Web/HTML/Element/article +--- +
{{HTMLRef}}
+ +

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

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

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
コンテンツカテゴリフローコンテンツ, 区分コンテンツ, 知覚可能コンテンツ
許可されている内容フローコンテンツ
タグの省略{{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>
+          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>
+          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')}}
+ +

ブラウザーの互換性

+ + + +

{{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 のセクションとアウトラインの使用
    • +
diff --git a/files/ja/web/html/element/aside/index.html b/files/ja/web/html/element/aside/index.html new file mode 100644 index 0000000000..5d93628c92 --- /dev/null +++ b/files/ja/web/html/element/aside/index.html @@ -0,0 +1,129 @@ +--- +title: '