diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/web/html | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/ja/web/html')
221 files changed, 42842 insertions, 0 deletions
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 +--- +<div>{{HTMLRef}}</div> + +<p>色を使うことは、人間の表現の基礎的な姿です。子どもは絵がうまくなるより前に色を試してみるものです。恐らくこれが、人々がウェブサイトの開発を学ぶときに色を最初に学ぶ理由でしょう。<span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> では、 <a href="/ja/docs/Web/HTML">HTML</a> <a href="/ja/docs/Web/HTML/Element">要素</a>に色を追加して望みの外見にする方法がたくさんあります。この記事では CSS の色を HTML の中で利用できるそれぞれの方法の基本をご案内します。</span></p> + +<p>運の良いことに、 HTML に色をつけることは本当にかんたんで、またほとんどすべての要素に色をつけることができます。</p> + +<p>{{anch("Things that can have color", "色を付けることができる物の一覧とそのための CSS プロパティ")}}、{{anch("How to describe a color", "色の記述方法")}}、{{anch("Using color", "スタイルシートとスクリプトでの色の利用")}}など、色を使うときに知る必要があることの多くに触れていきます。{{anch("Letting the user picka color", "ユーザーに色を選択させる")}}方法にも触れます。</p> + +<p>それから、{{anch("Using color wisely", "賢い色の使い方")}}について短い議論を行います。様々な視力の人がいることを意識した、適切な色の選択方法です。</p> + +<h2 id="Things_that_can_have_color" name="Things_that_can_have_color">色をつけられるもの</h2> + +<p>要素レベルでは、 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のプロパティのリストを見てみましょう。</p> + +<p>基礎的・入門的なレベルにおいては、 {{cssxref("color")}} プロパティは HTML 要素のコンテンツの色を定義し、また {{cssxref("background-color")}} は HTML 要素の背景色を定義します。 これらのプロパティはほとんどすべての要素について使用できます。</p> + +<h3 id="Text" name="Text">テキスト</h3> + +<p>要素がレンダリングされるときにはいつも、以下のプロパティにもとづきテキストの色、背景の色、そしてテキストの装飾が決定されます。</p> + +<dl> + <dt>{{cssxref("color")}}</dt> + <dd>The color to use when drawing the text and any <a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals#Font_style_font_weight_text_transform_and_text_decoration">text decorations</a> (such as the addition of under- or overlines, strike-through lines, and so forth.</dd> + <dt>{{cssxref("background-color")}}</dt> + <dd>テキストの背景の色</dd> + <dt>{{cssxref("text-shadow")}}</dt> + <dd>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.</dd> + <dt>{{cssxref("text-decoration-color")}}</dt> + <dd>By default, text decorations (such as underlines, strikethroughs, etc) use the <code>color</code> property as their colors. However, you can override that behavior and use a different color for them with the <code>text-decoration-color</code> property.</dd> + <dt>{{cssxref("text-emphasis-color")}}</dt> + <dd>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.</dd> + <dt>{{cssxref("caret-color")}}</dt> + <dd>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.</dd> +</dl> + +<h3 id="Boxes" name="Boxes">ボックス</h3> + +<p>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.</p> + +<dl> + <dt>{{anch("Borders")}}</dt> + <dd>See the section {{anch("Borders")}} for a list of the CSS properties you can use to set the colors of a box's borders.</dd> + <dt>{{cssxref("background-color")}}</dt> + <dd>要素の前面になにもない時、その要素の範囲に使われる背景の色です。</dd> + <dt>{{cssxref("column-rule-color")}}</dt> + <dd>テキストの列（カラム）を区切る線に使われる色です。</dd> + <dt>{{cssxref("outline-color")}}</dt> + <dd>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.</dd> +</dl> + +<h3 id="Borders" name="Borders">境界線</h3> + +<p>あらゆる要素には、まわりに境界線が存在します。 基本的な要素の境界は、要素の内容の端に描かれている線です。 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 <a href="/ja/docs/Learn/CSS/Styling_boxes/Borders">Styling borders using CSS</a> to learn more about applying styles to borders.</p> + +<p>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 <a href="/ja/docs/Web/CSS/border-width">width</a>, <a href="/ja/docs/Web/CSS/border-style">style</a> (solid, dashed, etc.), and so forth.</p> + +<dl> + <dt>{{cssxref("border-color")}}</dt> + <dd>Specifies a single color to use for every side of the element's border.</dd> + <dt>{{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, and {{cssxref("border-bottom-color")}}</dt> + <dd>Lets you set the color of the corresponding side of the element's border.</dd> + <dt>{{cssxref("border-block-start-color")}} and {{cssxref("border-block-end-color")}}</dt> + <dd>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).</dd> + <dt>{{cssxref("border-inline-start-color")}} and {{cssxref("border-inline-end-color")}}</dt> + <dd>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 <code>border-inline-start-color</code> is applied to the right side of the border.</dd> +</dl> + +<h3 id="Other_ways_to_use_color" name="Other_ways_to_use_color">色をつける他の方法</h3> + +<p>CSS が唯一の色を付けるためのウェブ技術ではありません。ウェブで使用することができ、色もサポートしているグラフィック技術があります。</p> + +<dl> + <dt>HTMLの <a href="/ja/docs/Web/API/Canvas_API">Canvas API</a></dt> + <dd>Canvas APIで、2Dのビットマップ画像を {{HTMLElement("canvas")}} 要素の中に描画しましょう。 より学ぶには次のリンクを参照してください: <a href="/ja/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a> .</dd> + <dt><a href="/ja/docs/Web/SVG">SVG</a> (Scalable Vector Graphics)</dt> + <dd>SVGを用いれば、特定の形・パターン・線を描くコマンドを用いて画像を描くことができます。 SVGのコマンドはXMLの形式で、それにより直接ウェブページに埋め込む事ができ、またHTMLのimg要素を用いて、他の画像と同じように画像を配置することもできます。</dd> + <dt><a href="/ja/docs/Web/API/WebGL_API">WebGL</a></dt> + <dd>Web Graphics Library とはOpen GL ESを基礎にしたAPIで、これを用いるとウェブ上に2Dや3Dのハイパフォーマンスなグラフィックを描画することができます。より詳しく知るには <a href="/ja/docs/Web/API/WebGL_API/Tutorial">WebGL チュートリアル</a>を参照してください。</dd> +</dl> + +<h2 id="How_to_describe_a_color" name="How_to_describe_a_color">色をどうやって指定するか</h2> + +<p>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.</p> + +<p>For more detailed discussion of each of the color value types, see the reference for the CSS {{cssxref("<color>")}} unit.</p> + +<h3 id="Keywords" name="Keywords">キーワード</h3> + +<p>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 <code>red</code>, <code>blue</code>, or <code>orange</code>), shades of gray (from <code>black</code> to <code>white</code>, including colors like <code>darkgray</code> and <code>lightgrey</code>), and a variety of other blended colors including <code>lightseagreen</code>, <code>cornflowerblue</code>, and <code>rebeccapurple</code>.</p> + +<p>See {{SectionOnPage("/ja/docs/Web/CSS/color_value", "Color keywords", "code")}} for a list of all available color keywords.</p> + +<h3 id="RGB_values" name="RGB_values">RGB値</h3> + +<p>There are three ways to represent an RGB color in CSS.</p> + +<h4 id="Hexadecimal_string_notation" name="Hexadecimal_string_notation">16進数の文字列表記</h4> + +<p>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 <em>must</em> 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, <code>"#D"</code> becomes <code>"#DD"</code> when drawing.</p> + +<p>A color in hexadecimal string notation always begins with the character <code>"#"</code>. After that come the hexadecimal digits of the color code. The string is case-insensitive.</p> + +<dl> + <dt><code>"#rrggbb"</code></dt> + <dd>Specifies a fully-opaque color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>.</dd> + <dt><code>"#rrggbbaa"</code></dt> + <dd>Specifies a color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>. The alpha channel is specified by <code>0xaa</code>; the lower this value is, the more translucent the color becomes.</dd> + <dt><code>"#rgb"</code></dt> + <dd>Specifies a color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>.</dd> + <dt><code>"#rgba"</code></dt> + <dd>Specifies a color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>. The alpha channel is specified by <code>0xaa</code>; the lower this value is, the more translucent the color becomes.</dd> +</dl> + +<p>As an example, you can represent the opaque color bright blue as <code>"#0000ff"</code> or <code>"#00f"</code>. To make it 25% opaque, you can use <code>"#0000ff44"</code> or <code>"#00f4"</code>.</p> + +<h4 id="RGB_functional_notation" name="RGB_functional_notation">RGB 関数表記</h4> + +<p>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.</p> + +<p>Legal values for each of these parameters are:</p> + +<dl> + <dt><code>red</code>, <code>green</code>, and <code>blue</code></dt> + <dd>Each must be an {{cssxref("<integer>")}} value between 0 and 255 (inclusive), or a {{cssxref("<percentage>")}} from 0% to 100%.</dd> + <dt><code>alpha</code></dt> + <dd>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.</dd> +</dl> + +<p>For example, a bright red that's 50% opaque can be represented as <code>rgb(255, 0, 0, 0.5)</code> or <code>rgb(100%, 0, 0, 50%)</code>.</p> + +<h3 id="HSL_functional_notation" name="HSL_functional_notation">HSL 関数表記</h3> + +<p>デザイナーやアーティストたちは {{interwiki("wikipedia", "HSL and HSV", "HSL")}} (Hue/Saturation/Luminosity) をもちいて仕事をしたがる場合があります。 Webにおいては、HSL色はHSL関数表記をもちいて表現されています。CSSの <code>hsl()</code> 関数は、 <code>rgb()</code> 関数と表現方法においてとても似ています。</p> + +<div style="padding-bottom: 20px;"> +<figure style="width: 500px;"><img alt="HSL 色円柱" src="https://mdn.mozillademos.org/files/15445/1200px-HSL_color_solid_cylinder_alpha_lowgamma.png" style="height: 375px; width: 500px;"> +<figcaption><em><strong>図1 HSL 色円柱</strong> 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 <a href="http://commons.wikimedia.org/wiki/User:SharkD">SharkD</a> on <a href="https://www.wikipedia.org/">Wikipedia</a>, distributed under the <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a> license.</em></figcaption> +</figure> +</div> + +<p>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 (<code>deg</code>), radians (<code>rad</code>), gradians (<code>grad</code>), or turns (<code>turn</code>). But this doesn't control how vivid or dull, or how bright or dark the color is.</p> + +<p>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.</p> + +<p>Think of it like creating the perfect paint color:</p> + +<ol> + <li>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 <strong>hue</strong> (H) component: a value representing the angle around the color wheel for the vivid hue we want to use as our base.</li> + <li>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.</li> + <li>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.</li> +</ol> + +<p>You can also optionally include an alpha channel, to make the color less than 100% opaque.</p> + +<p>Here are some sample colors in HSL notation:</p> + +<div id="hsl-swatches"> +<div class="hidden"> +<pre class="brush: css">table { + border: 1px solid black; + font: 16px "Open Sans", Helvetica, Arial, sans-serif; + border-spacing: 0; + border-collapse: collapse; +} + +th, td { + border: 1px solid black; + padding:4px 6px; + text-align: left; +} + +th { + background-color: hsl(0, 0%, 75%); +}</pre> + +<pre class="brush: html"><table> + <thead> + <tr> + <th scope="col">Color in HSL notation</th> + <th scope="col">Example</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>hsl(90deg, 100%, 50%)</code></td> + <td style="background-color: hsl(90deg, 100%, 50%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(90, 100%, 50%)</code></td> + <td style="background-color: hsl(90, 100%, 50%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(0.15turn, 50%, 75%)</code></td> + <td style="background-color: hsl(0.15turn, 50%, 75%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(0.15turn, 90%, 75%)</code></td> + <td style="background-color: hsl(0.15turn, 90%, 75%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(0.15turn, 90%, 50%)</code></td> + <td style="background-color: hsl(0.15turn, 90%, 50%);">&nbsp;</td> + </tr> + <tr> + <td><code>hsl(270deg, 90%, 50%)</code></td> + <td style="background-color: hsl(270deg, 90%, 50%);">&nbsp;</td> + </tr> + </tbody> +</table></pre> +</div> + +<p>{{EmbedLiveSample("hsl-swatches", 300, 260)}}</p> +</div> + +<div class="note"> +<p>hueの単位を省略した場合には、度 (<code>deg</code>)であるとされることに注意してください。</p> +</div> + +<h2 id="Using_color" name="Using_color">色の使用</h2> + +<p>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.</p> + +<h3 id="Specifying_colors_in_stylesheets" name="Specifying_colors_in_stylesheets">スタイルシート(CSS)を使った色の指定</h3> + +<p>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.</p> + +<p>Let's take a look at an example, starting by looking at the results we're trying to achieve:</p> + +<div>{{EmbedLiveSample("Specifying_colors_in_stylesheets", 650, 150)}}</div> + +<h4 id="HTML">HTML</h4> + +<p>The HTML responsible for creating the above example is shown here:</p> + +<pre class="brush: html"><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></pre> + +<p>This is pretty simple, using a {{HTMLElement("div")}} as a wrapper around the contents, which consists of two more <code><div></code>s, each styled differently with a single paragraph ({{HTMLElement("p")}}) in each box.</p> + +<p>The magic happens, as usual, in the CSS, where we'll apply colors define the layout for the HTML above.</p> + +<h4 id="CSS">CSS</h4> + +<p>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.</p> + +<pre class="brush: css">.wrapper { + width: 620px; + height: 110px; + margin: 0; + padding: 10px; + border: 6px solid mediumturquoise; +}</pre> + +<p>The <code>.wrapper</code> 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")}}.</p> + +<p>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 <code>mediumturquoise</code>.</p> + +<p>Our two colored boxes share a number of properties in common, so next we establish a class, <code>.box</code>, that defines those shared properties:</p> + +<pre class="brush: css">.box { + width: 290px; + height: 100px; + margin: 0; + padding: 4px 6px; + font: 28px "Marker Felt", "Zapfino", cursive; + display: flex; + justify-content: center; + align-items: center; +}</pre> + +<p>In brief, <code>.box</code> establishes the size of each box, as well as the configuration of the font used within. We also take advantage of <a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexbox</a> to easily center the contents of each box. We enable <code>flex</code> mode using {{cssxref("display", "display: flex")}}, and set both {{cssxref("justify-content")}} and {{cssxref("align-items")}} to <code>center</code>. Then we can create a class for each of the two boxes that defines the properties that differ between the two.</p> + +<pre class="brush: css">.boxLeft { + float: left; + background-color: rgb(245, 130, 130); + outline: 2px solid darkred; +}</pre> + +<p>The <code>.boxLeft</code> class—which, cleverly, is used to style the box on the left—floats the box to the left, then sets up the colors:</p> + +<ul> + <li>The box's background color is set by changing the value of the CSS {{cssxref("background-color")}} property to <code>rgb(245, 130, 130)</code>.</li> + <li>An outline is defined for the box. Unlike the more commonly used <code>border</code>, {{cssxref("outline")}} doesn't affect layout at all; it draws over the top of whatever may happen to be outside the element's box instead of making room as <code>border</code> does. This outline is a solid, dark red line that's two pixels thick. Note the use of the <code>darkred</code> keyword when specifying the color.</li> + <li>Notice that we're not explicitly setting the text color. That means the value of {{cssxref("color")}} will be inherited from the nearest containing element that defines it. By default, that's black.</li> +</ul> + +<pre class="brush: css">.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; +}</pre> + +<p>Finally, the <code>.boxRight</code> 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:</p> + +<ul> + <li>The <code>background-color</code> is set using the HSL value specified using <code>hsl(270deg, 50%, 75%)</code>. This is a medium purple color.</li> + <li>The box's <code>outline</code> is used to specify that the box should be enclosed in a four pixel thick dashed line whose color is a somewhat deeper purple (<code>rgb(110, 20, 120)</code>).</li> + <li>The foreground (text) color is specified by setting the {{cssxref("color")}} property to <code>hsl(0deg, 100%, 100%)</code>. This is one of many ways to specify the color white.</li> + <li>We add a green wavy line under the text with {{cssxref("text-decoration")}}.</li> + <li>Finally, a bit of a shadow is added to the text using {{cssxref("text-shadow")}}. Its <code>color</code> parameter is set to <code>black</code>.</li> +</ul> + +<h2 id="Letting_the_user_pick_a_color" name="Letting_the_user_pick_a_color">ユーザーに色を選択させる</h2> + +<p>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 <code>"color"</code> as the value of its {{htmlattrxref("type", "input")}} attribute.</p> + +<p>The <code><input></code> element represents a color only in the {{anch("Hexadecimal string notation", "hexadecimal string notation")}} covered above.</p> + +<h3 id="Example_Picking_a_color" name="Example_Picking_a_color">例: 色の選択</h3> + +<p>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.</p> + +<p>{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}</p> + +<div class="note"> +<p>On macOS, you indicate that you've finalized selection of the color by closing the color picker window.</p> +</div> + +<h4 id="HTML_2">HTML</h4> + +<p>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.</p> + +<pre class="brush: html"><div id="box"> + <label for="colorPicker">Border color:</label> + <input type="color" value="#8888ff" id="colorPicker"> + <p id="output"></p> +</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<p>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...</p> + +<pre class="brush: css">#box { + width: 500px; + height: 200px; + border: 2px solid rgb(245, 220, 225); + padding: 4px 6px; + font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif" +}</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<p>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 <code><a href="/ja/docs/Web/HTML/Element/input/color"><input type="color"></a></code> element.</p> + +<pre class="brush: js">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);</pre> + +<p>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.</p> + +<p>The {{event("change")}} event is received when the color picker's value is finalized. We respond by setting the contents of the <code><p></code> element with the ID <code>"output"</code> to a string describing the finally selected color.</p> + +<h2 id="Using_color_wisely" name="Using_color_wisely">賢く色を使う</h2> + +<p>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.</p> + +<h3 id="Finding_the_right_colors" name="Finding_the_right_colors">適切な色を見つける</h3> + +<p>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.</p> + +<h4 id="Base_color" name="Base_color">ベース色</h4> + +<p>The first step is to choose your <strong>base color</strong>. 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:</p> + +<ul> + <li>A color that is naturally associated with the topic of your content, such as the existing color identified with a product or idea or a color representative of the emotion you wish to convey.</li> + <li>A color that comes from imagery associated with what your content is about. If you're creating a web site about a given item or product, choose a color that's physically present on that item.</li> + <li>Browse web sites that let you look at lots of existing color palettes and images to find inspiration.</li> +</ul> + +<p>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 <a href="http://www.colorzilla.com/">ColorZilla</a> offers an extension (<a href="http://www.colorzilla.com/chrome">Chrome</a> / <a href="http://www.colorzilla.com/firefox">Firefox</a>) 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.</p> + +<div class="note"> +<p>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.</p> +</div> + +<h4 id="Fleshing_out_the_palette" name="Fleshing_out_the_palette">Fleshing out the palette</h4> + +<p>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.</p> + +<p>A few examples (all free to use as of the time this list was last revised):</p> + +<ul> + <li><a href="/ja/docs/Web/CSS/CSS_Colors/Color_picker_tool">MDN's color picker tool</a></li> + <li><a href="http://paletton.com">Paletton</a></li> + <li><a href="https://color.adobe.com/create/color-wheel">Adobe Color CC online color wheel</a></li> +</ul> + +<p>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.</p> + +<div class="note"> +<p>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.</p> +</div> + +<h3 id="Color_theory_resources" name="Color_theory_resources">色の理論に関する参考文献</h3> + +<p>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:</p> + +<dl> + <dt><a href="https://www.khanacademy.org/partner-content/pixar/color">Color Science</a> (<a href="https://www.khanacademy.org/">Khan Academy</a> in association with <a href="https://www.pixar.com/">Pixar</a>)</dt> + <dd>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.</dd> + <dt>{{interwiki("wikipedia", "Color theory")}} on Wikipedia</dt> + <dd>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.</dd> +</dl> + +<h3 id="Color_and_accessibility" name="Color_and_accessibility">色とアクセシビリティ</h3> + +<p>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.</p> + +<p>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.</p> + +<div class="note"> +<p>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.</p> +</div> + +<p>For more information about color blindness, see the following articles:</p> + +<ul> + <li><a href="https://medlineplus.gov/colorblindness.html">Medline Plus: Color Blindness</a> (United States National Institute of Health)</li> + <li><a href="https://www.aao.org/eye-health/diseases/what-is-color-blindness">American Academy of Ophthamology: What Is Color Blindness?</a></li> + <li><a href="https://www.usability.gov/get-involved/blog/2010/02/color-blindness.html">Color Blindness & Web Design</a> (Usability.gov: United States Department of Health and Human Services)</li> +</ul> + +<h3 id="Palette_design_example" name="Palette_design_example">パレットデザインの例</h3> + +<p>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 <a href="https://www.google.com/search?q=Mars&tbm=isch">Google search for photos of Mars</a>. 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.</p> + +<p>Using an eyedropper tool, we identify a color we like and determine that the color in question is <code>#D79C7A</code>, which is an appropriate rusty orange-red color that's so stereotypical of the Martian surface.</p> + +<p>Having selected our base color, we need to build out our palette. We decide to use <a href="http://www.paletton.com/">Paletton</a> to come up with the other colors we need. Upon opening Paletton, we see:</p> + +<p><img alt="Right after loading Paletton." src="https://mdn.mozillademos.org/files/15451/paletton1.png" style="height: 361px; width: 600px;"></p> + +<p>Next, we enter our color's hex code (<code>D79C7A</code>) into the "Base RGB" box at the bottom-left corner of the tool:</p> + +<p><img alt="After entering base color" src="https://mdn.mozillademos.org/files/15453/paletton2.png" style="height: 361px; width: 600px;"></p> + +<p>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 <code>#508D7C</code>.</p> + +<p><img alt="Now with complementary colors included." src="https://mdn.mozillademos.org/files/15455/paletton3.png" style="height: 361px; width: 600px;"></p> + +<p>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:</p> + +<p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15457/paletton4.png" style="height: 361px; width: 600px;"></p> + +<p>That greyish blue in the top-right looks pretty good. Clicking on it, we find that it's <code>#556E8D</code>. 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:</p> + +<p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15459/paletton-color-detail.png" style="height: 370px; width: 526px;"></p> + +<p>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.</p> + +<p>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.</p> + +<h3 id="Color_backgrounds_contrast_and_printing">Color, backgrounds, contrast, and printing</h3> + +<p>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.</p> + +<p>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.</p> + +<p>The default value of <code>color-adjust</code>, <code>economy</code>, 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.</p> + +<p>You can set <code>color-adjust</code> to <code>exact</code> 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.</p> + +<div class="note"> +<p><strong>Note:</strong> There is no guarantee, though, that <code>color-adjust: exact</code> 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 <code>color-adjust</code>.</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li> + <li><a href="/ja/docs/Web/Guide/Graphics">Graphics on the web</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Colors/Color_picker_tool">MDN's color picker tool</a></li> +</ul> 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 +--- +<p>{{HTMLSidebar}}</p> + +<p class="summary"><span class="seoSummary"><strong><code>accept</code></strong> 属性は、値としてカンマ区切りでファイル種別または{{anch("Unique file type specifiers", "固有ファイル種別指定子")}}を取り、どのファイル種別を受け入れるかを記述します。</span> accept プロパティは {{HTMLElement("input/file", "file")}} 型の {{htmlelement("input")}} 要素のプロパティです。もとは {{htmlelement("form")}} 要素で対応していましたが、 HTML5 で削除され、 {{HTMLElement("input/file", "file")}} に変更されました。</p> + +<p>与えられたファイル種別は複数の方法で識別される可能性があるため、特定の種別のファイルが必要な場合には、型指定子の完全なセットを提供したり、ワイルドカードを使用して任意の形式の型が許容されることを示したりすると便利です。</p> + +<p>例えば、 Microsoft Word ファイルを識別できる方法は何通りもありますので、 Word ファイルを受け付けるサイトは <code><input></code> を次のように使用するかもしれません。</p> + +<pre class="brush: html notranslate"><input type="file" id="docpicker" + accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"></pre> + +<p>一方、メディアファイルを受け入れる場合は、そのメディア種別の任意の形式を含めるようにしたいかもしれません。</p> + +<pre class="brush: html notranslate"><input type="file" id="soundFile" accept="audio/*"> +<input type="file" id="videoFile" accept="video/*"> +<input type="file" id="imageFile" accept="image/*"></pre> + +<p><code>accept</code> 属性は、選択されたファイルの種別を検証するものではありません。これはブラウザーがユーザーに対して正しいファイル種別を選択できるようにするためのガイドをするためのヒントを提供するだけです。ユーザーがファイルセレクターのオプションを切り替え、これを上書きして任意のファイルを選択し、不正なファイル種別を選択することは (ほとんどの場合) 可能です。</p> + +<p>このため、期待される要件をサーバー側で検証するようにしてください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>ファイル入力型に設定された場合、ネイティブファイルピッカーが開いたときに、正しいファイル種別のファイルのみを選択できるようにする必要があります。ほとんどのオペレーティングシステムでは、条件に合わず選択できないファイルが薄く表示されます。</p> + +<div id="simple_example"> +<pre class="brush: html notranslate"><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></pre> + +<p>{{EmbedLiveSample('simple_example', '100%', 200)}}</p> + +<p>なお、最後の例では複数の画像を選択することができます。詳しくは <code><a href="multiple">multiple</a></code> 属性を参照してください。</p> +</div> + +<h2 id="Unique_file_type_specifiers" name="Unique_file_type_specifiers">固有ファイル種別指定子</h2> + +<p><strong>固有ファイル種別指定子</strong>は文字列で、ユーザーが {{HTMLElement("input")}} 要素の <code>file</code> 型で選択することができるファイルの種類を記述します。それぞれの固有ファイル種別記述子は、以下の形のうちの一つを取ります。</p> + +<ul> + <li>ピリオド (".") 文字から始まる有効なファイル拡張子で、大文字小文字の区別をしないもの。例えば、 <code>.jpg</code>, <code>.pdf</code>, <code>.doc</code> などです。</li> + <li>有効な MIME タイプの文字列で、拡張子なしのもの。</li> + <li>文字列 <code>audio/*</code> は「任意の音声ファイル」を意味します。</li> + <li>文字列 <code>video/*</code> は「任意の映像ファイル」を意味します。</li> + <li>文字列 <code>image/*</code> は「任意の画像ファイル」を意味します。</li> +</ul> + +<p><code>accept</code> 属性は、カンマ区切りの1つ以上の固有ファイル種別指定子を含む文字列を値として取ります。例えば、標準的な画像形式と PDF ファイルの両方を含む、画像として表示できるコンテンツを必要とするファイルピッカーは、次のようになります。</p> + +<pre class="brush: html notranslate"><input type="file" accept="image/*,.pdf"></pre> + +<h2 id="Using_file_inputs" name="Using_file_inputs">file 入力の使用</h2> + +<h3 id="A_basic_example" name="A_basic_example">基本的な例</h3> + +<pre class="brush: html notranslate"><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></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; +}</pre> +</div> + +<p>これは次のような出力を生成します。</p> + +<p>{{EmbedLiveSample('A_basic_example', 650, 60)}}</p> + +<div class="note"> +<p><strong>メモ</strong>: この例は GitHub でも見ることができます。 — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html">ソースコード</a>と<a href="https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html">ライブ実行</a>を確認してください。</p> +</div> + +<p>ユーザーの端末やオペレーティングシステムが何であろうと、ファイル入力には、ユーザーがファイルを選択するためのファイルピッカーダイアログを開くボタンが用意されす。</p> + +<p>上記のように <code><a href="multiple">multiple</a></code> 属性を含めることで、複数のファイルを一度に選択できるようになります。ユーザーは、選択したプラットフォームが許す任意の方法でファイルピッカーから複数のファイルを選択することができます (例えば、<kbd>Shift</kbd> キーまたは <kbd>Control</kbd> キーを押しながらクリックするなど)。 <code><input></code> ごとに1つのファイルのみを選択させたい場合は、 <code>multiple</code> 属性を省略してください。</p> + +<h3 id="Limiting_accepted_file_types" name="Limiting_accepted_file_types">受け付けるファイル種別の制限</h3> + +<p>多くの場合は、ユーザーが任意の種別のファイルを選択できるようにするのではなく、特定の種別のファイルを選択できるようにしたいものです。例えば、ファイル入力でユーザーがプロフィール画像をアップロードできる場合、 {{Glossary("JPEG")}} や {{Glossary("PNG")}} などのウェブ互換の画像形式を選択させたいと思うでしょう。/p> + +</p><p>許容されるファイル種別は、 {{htmlattrxref("accept","input/file")}} 属性で許容されるファイル拡張子や MIME タイプのカンマ区切りのリストを取ることで指定することができます。いくつかの例を示します。</p> + +<ul> + <li><code>accept="image/png"</code> または <code>accept=".png"</code> — PNG ファイルを受け付ける。</li> + <li><code>accept="image/png, image/jpeg"</code> または <code>accept=".png, .jpg, .jpeg"</code> — PNG または JPEG ファイルを受け付ける。</li> + <li><code>accept="image/*"</code> — <code>image/*</code> MIME タイプで任意のファイルを受け付ける (また、多くのモバイル端末では、これを使用するとユーザーにカメラで写真を撮影させることができる。)</li> + <li><code>accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"</code> — MS Word 文書と思しきすべてのファイルを受け付ける。</li> +</ul> + +<p>もっと完全な例を見てみましょう。</p> + +<pre class="brush: html notranslate"><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></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; +}</pre> +</div> + +<p>{{EmbedLiveSample('Limiting_accepted_file_types', 650, 60)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#attr-input-accept', 'accept attribute')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#attr-input-accept', 'accept attribute')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.attribute.accept")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Using_files_from_web_applications">ウェブアプリケーションからのファイルの使用</a></li> + <li><a href="/ja/docs/Web/API/File">File API</a></li> +</ul> 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 +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>HTML の <code>autocomplete</code> 属性は、入力値としてテキストまたは数値を取る {{HTMLElement("input")}} 要素、 {{HTMLElement("textarea")}} 要素、 {{HTMLElement("select")}} 要素、 {{HTMLElement("form")}} 要素で利用できます。 <span class="seoSummary"><code>autocomplete</code> を使用すると、ウェブ開発者は入力欄にどの種類の情報が期待されているかをブラウザーに示唆するのと同様に、{{Glossary("user agent", "ユーザーエージェント")}}がフォーム入力欄の値を埋めるための自動支援を提供する必要があることを指定します。</span></p> + +<p>提案値の情報源は、一般にブラウザーに依存します。ふつうは、ユーザーが入力した過去の値からとりますが、あらかじめ構成された値から取得することもあります。例えば、ブラウザーはユーザーに名前、住所、電話番号、メールアドレスを自動補完するために保存させることができます。おそらく、ブラウザーは以降の認証手続で自動補完を行うために、クレジットカード情報を暗号化して保存する機能を提供しているでしょう。</p> + +<p>{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} 要素に <code>autocomplete</code> 属性がない場合、ブラウザーはその要素のフォームオーナー、つまりその要素を子孫に持つ {{HTMLElement("form")}} 要素、または <code><form></code> 要素で <code>id</code> がその要素の {{htmlattrxref("form", "input")}} 属性で指定されているものの <code>autocomplete</code> 属性の値を使用します。</p> + +<p>詳しくは、 {{HTMLElement("form")}} 要素の {{htmlattrxref("autocomplete", "form")}} 属性をご覧ください。</p> + +<div class="blockIndicator note"> +<p>自動補完を提供するために、ユーザーエージェントは <code><input></code>/<code><select></code>/<code><textarea></code> 要素に次のことを要求することがあります。</p> + +<ol> + <li><code>name</code> や <code>id</code> 属性を持つこと</li> + <li><code><form></code> 要素の子孫であること</li> + <li>フォームが {{HTMLElement("input/submit", "submit")}} ボタンを持つこと</li> +</ol> +</div> + +<h2 id="Values" name="Values">値</h2> + +<dl> + <dt>"<code>off</code>"</dt> + <dd>ブラウザーはこのフィールドの値を自動的に入力または選択することが許可されていません。文書やアプリケーションが独自の自動補完機能を提供していたり、セキュリティ上の理由でフィールドの値を自動的に入力しないよう要求していたりする可能性はあります。 + <div class="note"><strong>メモ:</strong> ほとんどの現行ブラウザーでは <code>autocomplete</code> 属性を "<code>off</code>" に設定しても、ブラウザーのパスワードマネージャーがユーザー名やパスワードを保存したいかをユーザーに問い合わせたり、ログインフォームにそれらを自動入力したりすることを抑制できません。 <a href="/ja/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#The_autocomplete_attribute_and_login_fields">autocomplete 属性とログインフィールド</a>をご覧ください。</div> + </dd> + <dt>"<code>on</code>"</dt> + <dd>ブラウザーが自動的に入力を補完することが許可されています。フィールドに求められているデータ型としてのガイダンスが提供されていないので、ブラウザーは独自の判断を行うかもしれません。</dd> + <dt>"<code>name</code>"</dt> + <dd>このフィールドは人の氏名の値が期待されています。一般的には、氏名を各部分に分割すると、多様な人の氏名を扱ったり構成したりしにくくなるため、 "<code>name</code>" を使用したほうが推奨されます。しかし、氏名をそれぞれの部分に分割する必要があるのであれば、以下の <code>autocomplete</code> の値を使用することができます。 + <dl> + <dt>"<code>honorific-prefix</code>"</dt> + <dd>接頭辞や敬称 (例: "Mr.", "Ms.", "Dr.", "Mlle")</dd> + <dt>"<code>given-name</code>"</dt> + <dd>名 (ファーストネーム)</dd> + <dt>"<code>additional-name</code>"</dt> + <dd>ミドルネーム</dd> + <dt>"<code>family-name</code>"</dt> + <dd>苗字 (ファミリーネーム、「ラスト」ネーム)</dd> + <dt>"<code>honorific-suffix</code>"</dt> + <dd>接尾辞や敬称 (例: "Jr.", "B.Sc.", "MBASW", "II")</dd> + <dt>"<code>nickname</code>"</dt> + <dd>ペンネームやハンドルネーム</dd> + </dl> + </dd> + <dt>"<code>email</code>"</dt> + <dd>メールアドレス。</dd> + <dt>"<code>username</code>"</dt> + <dd>ユーザー名またはアカウント名。</dd> + <dt>"<code>new-password</code>"</dt> + <dd>新しいパスワード。新しいアカウントを作成したりパスワードを変更したりした場合は、一般的な「現在のパスワードを入力してください」ではなく、「新しいパスワードを入力してください」または「パスワードの確認」欄で使用してください。これは意図せずに既存のパスワードが意図せずに入力されるのを防いだり、安全なパスワードを生成するための助けになったりします (<a href="/ja/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#Preventing_autofilling_with_autocompletenew-password">autocomplete="new-password" による自動補完の防止</a>も参照してください)。</dd> + <dt>"<code>current-password</code>"</dt> + <dd>ユーザーの現在のパスワードです。</dd> + <dt>"<code>one-time-code</code>"</dt> + <dd>ユーザー自身を確認するために使われるワンタイムコードです</dd> + <dt>"<code>organization-title</code>"</dt> + <dd>職名や組織内の肩書です (例: "上級技術ライター", "社長", "副部隊長")</dd> + <dt>"<code>organization</code>"</dt> + <dd>企業または団体の名前です。 "Acme Widget Company" や "Girl Scouts of America" など。</dd> + <dt>"<code>street-address</code>"</dt> + <dd>住所。複数行のテキストが使用でき、第2行政レベル (普通は市町村) の中で完全に住所を識別できるものですが、市町村名、郵便番号、国名は含めるべきではありません。</dd> + <dt>"<code>address-line1</code>", "<code>address-line2</code>", "<code>address-line3</code>"</dt> + <dd>住所のそれぞれの行です。これらは "<code>street-address</code>" が存在しない場合のみ置くことができます。</dd> + <dt>"<code>address-level4</code>"</dt> + <dd>住所が4段階まである場合のもっとも細かい{{anch("Administrative levels in addresses", "行政レベル")}}です。</dd> + <dt>"<code>address-level3</code>"</dt> + <dd>少なくとも3段階の行政レベルがある住所において、3番目の{{anch("Administrative levels in addresses", "行政レベル")}}です。</dd> + <dt>"<code>address-level2</code>"</dt> + <dd>少なくとも2段階の行政レベルがある住所において、2番目の{{anch("Administrative levels in addresses", "行政レベル")}}です。2つの行政レベルがある国では、これはふつう市町村や、住所のあるその他の地域を表します。</dd> + <dt>"<code>address-level1</code>"</dt> + <dd>住所の一番上{{anch("Administrative levels in addresses", "行政レベル")}}です。これはふつう、住所がある都道府県です。合衆国では州になります。スイスでは、カートンになります。イギリスでは、ポストタウンになります。</dd> + <dt>"<code>country</code>"</dt> + <dd>国コードです。</dd> + <dt>"<code>country-name</code>"</dt> + <dd>国名です。</dd> + <dt>"<code>postal-code</code>"</dt> + <dd>郵便番号です (アメリカでは ZIP コードです)。</dd> + <dt>"<code>cc-name</code>"</dt> + <dd>クレジットカードなどの支払手段に表示、または関連付けられた氏名です。一般に、氏名の各部分に分割するよりも氏名のフィールドを使う方が推奨されます。</dd> + <dt>"<code>cc-given-name</code>"</dt> + <dd>クレジットカードなどの支払手段に指定された下の名前 (ファーストネーム) です。</dd> + <dt>"<code>cc-additional-name</code>"</dt> + <dd>クレジットカードなどの支払手段に指定された中間名 (ミドルネーム) です。</dd> + <dt>"<code>cc-family-name</code>"</dt> + <dd>クレジットカードなどの支払手段に指定された姓です。</dd> + <dt>"<code>cc-number</code>"</dt> + <dd>クレジットカードや番号や、口座番号などの支払手段を識別するその他の番号です。</dd> + <dt>"<code>cc-exp</code>"</dt> + <dd>支払手段の有効期限で、ふつうは "MM/YY" または "MM/YYYY" の形です。</dd> + <dt>"<code>cc-exp-month</code>"</dt> + <dd>支払手段の有効期限の月です。</dd> + <dt>"<code>cc-exp-year</code>"</dt> + <dd>支払手段の有効期限の年です。</dd> + <dt>"<code>cc-csc</code>"</dt> + <dd>支払手段のセキュリティコードです。クレジットカードでは、カードの裏に書かれた3桁の認証番号です。</dd> + <dt>"<code>cc-type</code>"</dt> + <dd>支払手段の種類です。 (例: "Visa" や "Master Card").</dd> + <dt>"<code>transaction-currency</code>"</dt> + <dd>この取引で決済が行われる通貨です。</dd> + <dt>"<code>transaction-amount</code>"</dt> + <dd>支払を行う金額の "<code>transaction-currency</code>" の単位による量です。</dd> + <dt>"<code>language</code>"</dt> + <dd>優先言語で、有効な <a href="https://ja.wikipedia.org/wiki/IETF%E8%A8%80%E8%AA%9E%E3%82%BF%E3%82%B0">BCP 47 言語タグ</a> で指定されたものです。</dd> + <dt>"<code>bday</code>"</dt> + <dd>生年月日の全体です。</dd> + <dt>"<code>bday-day</code>"</dt> + <dd>生年月日の日の部分です。</dd> + <dt>"<code>bday-month</code>"</dt> + <dd>生年月日の月の部分です。</dd> + <dt>"<code>bday-year</code>"</dt> + <dd>生年月日の年の部分です。</dd> + <dt>"<code>sex</code>"</dt> + <dd>性別で ("Female", "Fa'afafine", "Male" など)、改行のない自由な形式のテキストです。</dd> + <dt>"<code>tel</code>"</dt> + <dd>国番号を含む、完全な電話番号です。電話番号を書く部分に分割する必要がある場合は、各フィールドに以下の値を使用することができます。 + <dl> + <dt>"<code>tel-country-code</code>"</dt> + <dd>国コードで、例えば "1" はアメリカ、カナダ、その他の北アメリカとカリブ海の一部です。</dd> + <dt>"<code>tel-national</code>"</dt> + <dd>国番号以外の部分の電話番号全体で、市外局番の接頭辞 (日本では 0) を含みます。 "1-855-555-6502" という電話番号については、このフィールドの値は "855-555-6502" となります。</dd> + <dt>"<code>tel-area-code</code>"</dt> + <dd>市外局番で、必要に応じて市外局番の接頭辞 (日本では 0) を含みます。</dd> + <dt>"<code>tel-local</code>"</dt> + <dd>国番号や市外局番を含まない電話番号です。これはさらに、市内局番と加入者番号の2つに分割することができます。 "555-6502" という電話番号では、 "<code>tel-local-prefix</code>" は "555"、 "<code>tel-local-suffix</code>" は "6502" となります。</dd> + </dl> + </dd> + <dt>"<code>tel-extension</code>"</dt> + <dd>電話番号の下の内線番号です。ホテルの部屋番号や企業オフィスの内線番号などです。</dd> + <dt>"<code>impp</code>"</dt> + <dd>インスタントメッセージングプロトコルの端点、たとえば "xmpp:username@example.net" などです。</dd> + <dt>"<code>url</code>"</dt> + <dd>URL です。このフォームの他のフィールドの文脈から見て適切な、ホームページのや企業ウェブサイトのアドレスです。</dd> + <dt>"<code>photo</code>"</dt> + <dd>このフォームの他のフィールドの文脈における人物、企業、連絡先情報を表す画像の URL です。</dd> +</dl> + +<p>詳しくは <a href="https://html.spec.whatwg.org/multipage/forms.html#autofill">WHATWG 仕様書</a> をご覧ください。</p> + +<div class="note"> +<p><strong>注:</strong> Firefox は他のブラウザーとは異なり、 <code>autocomplete</code> 属性で、ページを再読み込みしても <code><input></code> を <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">動的に無効化した状態や (該当する場合は) 動的に変更したチェック状態を維持するか</a> を制御します。この維持機能は、既定で有効です。 <code>autocomplete</code> 属性の値に <code>off</code> を設定すると、この機能を無効化できます。またこの設定は、<code>type</code> 属性が通常 <code>autocomplete</code> を適用しない値である <code><input></code> 要素でも有効です。 {{bug(654072)}} をご覧ください。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html notranslate"><div> + <label for="cc-number">Enter your credit card number</label> + <input name="cc-number" id="cc-number" autocomplete="off"> +</div></pre> + +<h2 id="Administrative_levels_in_addresses" name="Administrative_levels_in_addresses">住所における行政レベル</h2> + +<p>行政レベルの4つの欄 (<code>address-level1</code> ～ <code>address-level4</code>) は、住所が存在する国の中で、詳細さのレベルを高めるためのものです。行政レベルの体系は国によって異なり、住所を表記する際に様々な順序でレベルを並べ替えられることがあります。</p> + +<p><code>address-level1</code> は常に最も広い行政単位を表します。これは住所のもっとも広い部分であり、国名に近い部分です。</p> + +<h3 id="Form_layout_flexibility" name="Form_layout_flexibility">フォームのレイアウトの自由度</h3> + +<p>国が異なれば住所の書き方も異なり、住所内でそれぞれの欄の位置も異なっており、フィールドの組み合わせや数も完全に異なることを考慮すると、可能であれば、サイトが住所入力フォームを表示する際に、住所がある国の指定に応じて、ユーザーが期待するレイアウトに切り替えることができると便利です。</p> + +<h3 id="Variations" name="Variations">変化形</h3> + +<p>それぞれの行政レベルの使用方法は国によって異なります。以下にいくつかの例を示しますが、これは網羅的なリストではありません。</p> + +<h4 id="United_States" name="United_States">アメリカ</h4> + +<p>アメリカ国内の一般的な住所は次のようになります。</p> + +<p>432 Anywhere St<br> + Exampleville CA 95555</p> + +<p>アメリカでは、住所の中で最も大きな括りの部分は州であり、この場合は "CA" (米国郵政公社の公式な略号で "California" の意味) となります。したがって <code>address-level1</code> は州、この場合は "CA" となります。</p> + +<p>住所で2番目に大きな括りの部分は市区町村名なので、 <code>address-level2</code> はこの例の住所では "Exampleville" となります。</p> + +<p>アメリカの住所では、3以上の行政単位は使用されません。</p> + +<h4 id="United_Kingdom" name="United_Kingdom">イギリス</h4> + +<p>イギリスの住所入力フォームでは、住所のレベルは1つで、住所に応じて1～3行の住所が含まれることがあります。完全な住所は次のようになります。</p> + +<p>103 Frogmarch Street<br> + Upper-Wapping<br> + Winchelsea<br> + TN99 8ZZ</p> + +<p>住所レベルは次のようになります。</p> + +<ul> + <li><code>address-level1</code>: ポストタウン — この場合は "Winchelsea" です。</li> + <li><code>address-line2</code>: 地区 — この場合は"Upper-Wapping" です。</li> + <li><code>address-line1</code>: 家屋番号や通りの詳細 — "103 Frogmarch Street"</li> +</ul> + +<p>郵便番号は別な行です。イギリスで郵便物をうまく配達するためには、実際には郵便番号と <code>address-line1</code> だけでよいので、必須項目はこれらのみですが、通常はもっと詳細な情報を提供することが多いので注意してください。</p> + +<h4 id="China" name="China">中国</h4> + +<p>中国では、省、市、区の3つの行政レベルを使用することができます。</p> + +<h4 id="Japan" name="Japan">日本</h4> + +<p>日本の住所は一般的に<strong>1行で</strong>、広域的な部分から詳細な部分の順に (<strong>アメリカとは逆順</strong>に) 書かれます。住所には2～3の行政レベルが含まれます。建物名や部屋番号を表すために、もう1行が追加されることもあります。例を示します。</p> + +<p>〒381-0000<br> + 長野県長野市某町123</p> + +<p>「〒」と続く7桁の番号は郵便番号です。</p> + +<p><code>address-level1</code> は都道府県に使用されます。この場合は「長野県」です。 <code>address-level2</code> は普通、市区町村や郡に使われます。この場合は「長野市」です。「某町123」は <code>address-line1</code> で、町名と地番からなります。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "#autofill")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.autocomplete")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{htmlelement("input")}} 要素</li> + <li>{{htmlelement("select")}} 要素</li> + <li>{{htmlelement("textarea")}} 要素</li> + <li>{{htmlelement("form")}} 要素</li> + <li><a href="/ja/docs/Learn/HTML/Forms">HTML フォーム</a></li> + <li>すべての<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></li> +</ul> 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 +--- +<div>{{draft}}</div> + +<p class="seoSummary"><strong><code>crossorigin</code></strong> 属性は、 {{ HTMLElement("audio") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}, {{ HTMLElement("video") }} の各要素で有効であり、 <a href="/ja/docs/Web/HTTP/CORS">CORS</a> への対応を提供し、したがって要素が読み取るデータのために CORS リクエストの構成を有効にします。要素によっては、属性は CORS 設定属性になります。</p> + +<p>メディア要素の <code>crossorigin</code> コンテンツ属性は CORS 設定属性です。</p> + +<p>これらの属性は列挙型で、以下の値を取ることができます。</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">キーワード</td> + <td class="header">説明</td> + </tr> + <tr> + <td><code>anonymous</code></td> + <td>この要素のための CORS リクエストで資格情報フラグを 'same-origin' に設定する。</td> + </tr> + <tr> + <td><code>use-credentials</code></td> + <td>この要素のための CORS リクエストで資格情報フラグを 'include' に設定する。</td> + </tr> + <tr> + <td><code>""</code></td> + <td><code>crossorigin</code> または <code>crossorigin=""</code> のように属性に空の値を設定すると、 <code>anonymous</code> と同じになります。</td> + </tr> + </tbody> +</table> + +<p>既定では (つまり、属性が指定されていない場合)、 CORS は使用されません。 "anonymous" キーワードが指定された場合は、同じオリジンでない限り、リクエストにはクッキーやクライアント側の SSL 証明書、 HTTP 認証などの <a class="external" href="http://www.w3.org/TR/cors/#user-credentials">CORS 仕様書の用語の節</a>で記述されている<ruby><strong>ユーザー資格情報</strong><rp> (</rp><rt>user credentials</rt><rp>) </rp></ruby>は使用されません。</p> + +<p>不正なキーワードや空文字列は、 <code>anonymous</code> が指定されたものと同じように扱われます。</p> + +<h3 id="Example_crossorigin_with_the_script_element" name="Example_crossorigin_with_the_script_element">例: script 要素の crossorigin</h3> + +<p>以下の {{HTMLElement("script")}} 要素を使用すると、ユーザー資格情報を送信せずに <code>https://example.com/example-framework.js</code> スクリプトを実行します。</p> + +<pre class="brush: html"><script src="https://example.com/example-framework.js" crossorigin="anonymous"></script></pre> + +<h3 id="Example_Webmanifest_with_credentials" name="Example_Webmanifest_with_credentials">例: 資格情報付きの Webmanifest</h3> + +<p>資格情報を必要とするマニフェストを読み取るときは、同じオリジンからのファイル読み取りであっても <code>use-credentials</code> の値を使用する必要があります。</p> + +<pre class="brush: html"><link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials"></pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<h3 id="<script_crossorigin>"><script crossorigin></h3> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.elements.script.crossorigin")}}</p> + +<h3 id="<video_crossorigin>"><video crossorigin></h3> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.elements.video.crossorigin")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></li> + <li><a href="/ja/docs/Web/HTML/Attributes/rel">HTML の <code>rel</code> 属性</a></li> +</ul> + +<div>{{QuickLinksWithSubpages("/ja/docs/Web/HTML/")}}</div> 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 +--- +<div>{{HTMLSidebar}}</div> + +<p>HTML の要素は<strong>属性</strong>を持ちます。ユーザーが望む基準を満たすために、さまざまな方法で要素を構成したり、動作を調整したりする追加の値です。</p> + +<h2 id="Attribute_list" name="Attribute_list">属性一覧</h2> + +<table class="standard-table"> + <thead> + <tr> + <th>属性名</th> + <th>要素</th> + <th>説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/accept">accept</a></code></td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> + <td>サーバーの受容する型のリストです。ファイル形式など。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/accept-charset">accept-charset</a></code></td> + <td>{{ HTMLElement("form") }}</td> + <td>対応している文字集合の一覧です。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Global_attributes/accesskey">accesskey</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>要素をアクティブ化したり、フォーカスを与えたりするためのショートカットキーです。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/action">action</a></code></td> + <td>{{ HTMLElement("form") }}</td> + <td>フォーム経由で送信される情報を処理するプログラムの URI です。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/align">align</a></code></td> + <td>{{ 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") }}</td> + <td>要素の水平方向の配置を指定します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/allow">allow</a></code></td> + <td>{{ HTMLElement("iframe") }}</td> + <td>iframe の機能ポリシーを指定します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/alt">alt</a></code></td> + <td>{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}</td> + <td>画像が表示できない場合の代替テキストです。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/async">async</a></code></td> + <td>{{ HTMLElement("script") }}</td> + <td>スクリプトを非同期で実行します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Global_attributes/autocapitalize">autocapitalize</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>ユーザーによる入力が入力欄で自動的に大文字化されるかどうかを設定します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/autocomplete">autocomplete</a></code></td> + <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>このフォーム内のコントロールが、ブラウザーによる値の自動補完を既定で許容するかを示します。</td> + </tr> + <tr> + <td id="attr-autofocus"><code><a href="/ja/docs/Web/HTML/Attributes/autofocus">autofocus</a></code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>ページ読込後に、対象要素に自動的にフォーカスを当てるようにします。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/autoplay">autoplay</a></code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>オーディオやビデオが再生可能になった時点で自動再生を開始します。</td> + </tr> + <tr> + <td><code>background</code></td> + <td>{{ HTMLElement("body") }}, {{ HTMLElement("table") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>画像ファイルの URL を指定します。 + <div class="note"><strong>注:</strong> ブラウザーや電子メールクライアントはまだこの属性に対応していますが、廃止済みです。代わりに CSS の {{ Cssxref("background-image") }} を使用してください。</div> + </td> + </tr> + <tr> + <td><code>bgcolor</code></td> + <td>{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }}</td> + <td> + <p>要素の背景色です。</p> + + <div class="note"> + <p><strong>注:</strong> これは古い属性です。代わりに CSS の {{ Cssxref("background-color") }} プロパティを使用してください。</p> + </div> + </td> + </tr> + <tr> + <td><code>border</code></td> + <td>{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }}</td> + <td> + <p>境界線の幅です。</p> + + <div class="note"> + <p><strong>注:</strong> これは古い属性です。代わりに CSS の {{ Cssxref("border") }} プロパティを使用してください。</p> + </div> + </td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/buffered">buffered</a></code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>すでにバッファリングされたメディアの時間の範囲を示します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/capture">capture</a></code></td> + <td>{{ HTMLElement("input") }}</td> + <td>{{SpecName('HTML Media Capture', '#the-capture-attribute','media capture')}} 仕様書から、キャプチャできる新しいファイルを指定します。</td> + </tr> + <tr> + <td><code>challenge</code></td> + <td>{{ HTMLElement("keygen") }}</td> + <td>公開鍵とともに送信するチャレンジ文字列</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/charset">charset</a></code></td> + <td>{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}</td> + <td>ページまたはスクリプトの文字エンコーディングを宣言します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/checked">checked</a></code></td> + <td>{{ HTMLElement("command") }}, {{ HTMLElement("input") }}</td> + <td>ページ読み込み時に要素にチェックを入れておくかどうかを指定します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/cite">cite</a></code></td> + <td>{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}</td> + <td>引用元または変更点の情報源を指す URI を格納します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Global_attributes/class">class</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>よく使われるプロパティで要素にスタイルを適用するために CSS と共によく用いられます。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/code">code</a></code></td> + <td>{{ HTMLElement("applet") }}</td> + <td>読み込んで実行するアプレットのクラスファイルの URL を指定します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/codebase">codebase</a></code></td> + <td>{{ HTMLElement("applet") }}</td> + <td>code 属性で参照するアプレットの .class ファイルを配置しているディレクトリの絶対 URL または相対 URL を指定します。</td> + </tr> + <tr> + <td><code>color</code></td> + <td>{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }}</td> + <td> + <p>この属性は色名または16進数の #RRGGBB 形式を用いて文字色を設定します。</p> + + <div class="note"> + <p><strong>注:</strong> これは古い属性です。代わりに CSS の {{Cssxref("color")}} プロパティを使用して下さい。</p> + </div> + </td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/cols">cols</a></code></td> + <td>{{ HTMLElement("textarea") }}</td> + <td>テキストエリアの桁数 (水平方向の文字数) を定義します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/colspan">colspan</a></code></td> + <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>colspan 属性はテーブルのセルを結合する列数を定義します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/content">content</a></code></td> + <td>{{ HTMLElement("meta") }}</td> + <td>状況に応じて、 <code>http-equiv</code> または <code>name</code> に関連した値です。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>要素の内容が編集可能であるかどうかを示します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/contextmenu">contextmenu</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>要素のコンテキストメニューとして機能する {{HTMLElement("menu")}} 要素の ID を定義します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/controls">controls</a></code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>再生コントロールをユーザーに表示すべきかどうかを示します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/coords">coords</a></code></td> + <td>{{ HTMLElement("area") }}</td> + <td>ホットスポット領域の座標を指定する為の値のセット</td> + </tr> + <tr> + <td><code><a href="/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}, {{ HTMLElement("video") }}</td> + <td>要素がオリジン間リクエストをどう扱うか</td> + </tr> + <tr> + <td><code><a href="/docs/Web/API/HTMLiframeElement/csp">csp</a></code> {{experimental_inline}}</td> + <td>{{ HTMLElement("iframe") }}</td> + <td>埋め込まれた文書が管理されるためのコンテンツセキュリティポリシーを指定します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/data">data</a></code></td> + <td>{{ HTMLElement("object") }}</td> + <td>リソースの URL を指定します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Global_attributes/data-*">data-*</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>HTML 要素にカスタム属性が添付できるようにします。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/datetime">datetime</a></code></td> + <td>{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}</td> + <td>要素に関連付けられた日時を示します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/decoding">decoding</a></code></td> + <td>{{ HTMLElement("img") }}</td> + <td>画像をデコードする推奨の方法をIndicates the preferred method to decode the image.</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/default">default</a></code></td> + <td>{{ HTMLElement("track") }}</td> + <td>ユーザ設定で別の項目を指定していない場合に、有効にするトラックを指定する</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/defer">defer</a></code></td> + <td>{{ HTMLElement("script") }}</td> + <td>ページのパースが完了した後に実行するスクリプトであることを示す</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Global_attributes/dir">dir</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>テキストの書字方向を定義する。使用できる値は ltr (Left-To-Right) または rtl (Right-To-Left)</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/dirname">dirname</a></code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td></td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/disabled">disabled</a></code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>閲覧者によるによるコントロールの操作を無効にするかどうかを示します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/download">download</a></code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> + <td>リソースをダウンロードするためのハイパーリンクであるかどうかを示します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Global_attributes/draggable">draggable</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>要素がドラッグ可能であるかどうかを示します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Global_attributes/dropzone">dropzone</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>要素がその上でコンテンツのドロップ操作を受け付けるかどうかを示します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/enctype">enctype</a></code></td> + <td>{{ HTMLElement("form") }}</td> + <td><code>method</code> 属性が POST である場合に、フォームデータのコンテンツタイプを定義します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/enterkeyhint">enterkeyhint</a></code> {{experimental_inline}}</td> + <td>{{ HTMLElement("textarea") }}, <a href="/ja/docs/Web/HTML/Global_attributes/contenteditable"><code>contenteditable</code></a></td> + <td><a href="https://html.spec.whatwg.org/dev/interaction.html#input-modalities:-the-enterkeyhint-attribute"><code>enterkeyhint</code></a> は、仮想キーボードの Enter キーにあるアクションラベル (またはアイコン) が何であるかを指定します。この属性はフォームコントロール (<code>textarea</code> 要素の値など) と共に、または編集対象となっている要素 (例えば <code>contenteditable</code> 属性の使用など) の中で使用することができます。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/for">for</a></code></td> + <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td> + <td>この要素が属する要素を指定します。</td> + </tr> + <tr> + <td id="attr-form"><code><a href="/ja/docs/Web/HTML/Attributes/form">form</a></code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>その要素が所属するフォームを示します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/formaction">formaction</a></code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("button") }}</td> + <td>その要素のアクションを示します。 {{ HTMLElement("form") }} で定義されたアクションを上書きします。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/formenctype">formenctype</a></code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td> + <td>button や input が送信ボタンである場合 (<code>type="submit"</code>)、この属性はフォーム送信で使用するエンコーディング型を設定します。この属性が指定された場合、ボタンを所有する<a href="/ja/docs/Web/HTML/Element/form">フォーム</a>の <code>enctype</code> 属性より優先されます。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/formmethod">formmethod</a></code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td> + <td>button や input が送信ボタンである場合 (<code>type="submit"</code>)、この属性はフォーム送信で使用する送信メソッド (<code>GET</code>, <code>POST</code>, など) を設定します。この属性が指定された場合、ボタンを所有する<a href="/ja/docs/Web/HTML/Element/form">フォーム</a>の <code>method</code> 属性より優先されます。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/formnovalidate">formnovalidate</a></code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td> + <td>button や input が送信ボタンである場合 (<code>type="submit"</code>)、この論理属性はフォームが送信時に検証されないことを指定します。この属性が指定された場合、ボタンを所有する<a href="/ja/docs/Web/HTML/Element/form">フォーム</a>の <code>novalidate</code> 属性より優先されます。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/formtarget">formtarget</a></code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td> + <td>button や input が送信ボタンである場合 (<code>type="submit"</code>)、この属性はフォームを送信した後で受け取るレスポンスを表示する閲覧コンテキスト (例えば、タブ、ウィンドウ、インラインフレーム) を指定します。この属性が指定された場合、ボタンを所有する<a href="/ja/docs/Web/HTML/Element/form">フォーム</a>の <code>target</code> 属性より優先されます。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/headers">headers</a></code></td> + <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>この要素に適用する <code><th></code> 要素の ID。</td> + </tr> + <tr> + <td><code>height</code></td> + <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td> + <td> + <p>ここに挙げた要素の高さを指定します。他の要素では、 {{cssxref("height")}} プロパティを使用してください。</p> + + <div class="note"> + <p><strong>注:</strong> {{HTMLElement("div")}} など一部の要素では、これは古い属性であり、代わりに CSS の {{Cssxref("height")}} プロパティを使用してください。</p> + </div> + </td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Global_attributes/hidden">hidden</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>この要素のレンダリングを抑制しますが、 script 要素などの子要素は有効なままにします。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/high">high</a></code></td> + <td>{{ HTMLElement("meter") }}</td> + <td>最大値の下限を示します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/href">href</a></code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}</td> + <td>リンクされたリソースの URL です。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/hreflang">hreflang</a></code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> + <td>リンクされたリソースの言語を指定します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/http-equiv">http-equiv</a></code></td> + <td>{{ HTMLElement("meta") }}</td> + <td>プラグマディレクティブを定義します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/icon">icon</a></code></td> + <td>{{ HTMLElement("command") }}</td> + <td>コマンドを表す画像を指定します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Global_attributes/id">id</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>特定の要素へスタイルを設定するために CSS と共によく使われます。この属性の値は一位でなければなりません。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/importance">importance</a></code> {{experimental_inline}}</td> + <td>{{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}</td> + <td>リソースの相対的なフェッチ優先順位を示します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/Security/Subresource_Integrity">integrity</a></code></td> + <td>{{ HTMLElement("link") }}, {{ HTMLElement("script") }}</td> + <td> + <p>ブラウザーが読み込むものを検証できるようにするための<a href="/ja/docs/Web/Security/Subresource_Integrity">サブリソース完全性</a>の値を指定します。</p> + </td> + </tr> + <tr> + <td><a href="/ja/docs/Web/HTML/Element/img#attr-intrinsicsize"><code>intrinsicsize</code></a> {{deprecated_inline}}</td> + <td>{{ HTMLElement("img") }}</td> + <td>この属性は、ブラウザーに画像に交友の実際の寸法を無視して、属性で指定された寸法を割り当てるように指示します。</td> + </tr> + <tr> + <td><a href="/ja/docs/Web/HTML/Global_attributes/inputmode"><code>inputmode</code></a></td> + <td>{{ HTMLElement("textarea") }}, <a href="/ja/docs/Web/HTML/Global_attributes/contenteditable"><code>contenteditable</code></a></td> + <td>要素やその内容を編集する際に、ユーザーが入力する可能性のあるデータの種類のヒントを提供します。この属性はフォームコントロール (<code>textarea</code> 要素の値など) と共に、または編集対象となっている要素 (例えば <code>contenteditable</code> 属性の使用など) の中で使用することができます。</td> + </tr> + <tr> + <td><code>ismap</code></td> + <td>{{ HTMLElement("img") }}</td> + <td>画像がサーバーサイドイメージマップの一部であることを示します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Global_attributes/itemprop">itemprop</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td></td> + </tr> + <tr> + <td><code>keytype</code></td> + <td>{{ HTMLElement("keygen") }}</td> + <td>生成する鍵の種類を指定します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/kind">kind</a></code></td> + <td>{{ HTMLElement("track") }}</td> + <td>テキストトラックの種類を指定します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/label">label</a></code></td> + <td>{{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("track") }}</td> + <td>ユーザーが読める形の要素のタイトルを指定します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Global_attributes/lang">lang</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>要素内で用いられている言語を定義する。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/language">language</a></code></td> + <td>{{ HTMLElement("script") }}</td> + <td>要素で使用しているスクリプト言語を定義する。</td> + </tr> + <tr> + <td><code>loading</code> {{experimental_inline}}</td> + <td>{{ HTMLElement("img") }}, {{ HTMLElement("iframe") }}</td> + <td>要素を遅延読み込みさせたいこと (<code>loading="lazy"</code>) または直ちに読み込ませたいこと (<code>loading="eager"</code>) を示します。 + <div class="note"><strong>WIP:</strong> <a href="https://github.com/whatwg/html/pull/3752">WHATWG PR #3752</a></div> + </td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/list">list</a></code></td> + <td>{{ HTMLElement("input") }}</td> + <td>ユーザに提案するため、事前に定義した選択肢のリストを示す。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/loop">loop</a></code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}</td> + <td>メディアの再生が完了した後、始めから再生を開始するかを示します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/low">low</a></code></td> + <td>{{ HTMLElement("meter") }}</td> + <td>最小値の上限を示します。</td> + </tr> + <tr> + <td><code>manifest</code></td> + <td>{{ HTMLElement("html") }}</td> + <td>ドキュメントのキャッシュマニフェストの URL を指定します。 + <div class="note"><strong>注:</strong> この属性は廃止されており、代わりに <a href="/ja/docs/Web/Manifest"><code><link rel="manifest"></code></a> を使用してください。</div> + </td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> + <td>許容される最大の値を示す。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/maxlength">maxlength</a></code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>要素が許容する最大文字数を定義します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/minlength">minlength</a></code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>要素が許容する最小文字数を定義する。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/media">media</a></code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}</td> + <td>リンクされたリソースがどのメディアに対して設計されたかを指定する。ンｎ</td> + </tr> + <tr> + <td><a href="/ja/docs/Web/HTML/Attributes/method">method</a></td> + <td>{{ HTMLElement("form") }}</td> + <td>フォームを送信する際に使用する <a href="/ja/docs/Web/HTTP">HTTP</a> メソッドを定義する。 GET (既定値) または POST を指定可能。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/min">min</a></code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td> + <td>許容される最小の値を示す。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/multiple">multiple</a></code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>type が <code>email</code> または <code>file</code> の input では、複数の値を入力可能かを示す。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/muted">muted</a></code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>ページ読み込み時に音声を無音にするかどうかを示します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/name">name</a></code></td> + <td>{{ 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") }}</td> + <td>要素の名前。例えば、送信されたフォームでサーバーがフィールドを識別するために使用する。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/novalidate">novalidate</a></code></td> + <td>{{ HTMLElement("form") }}</td> + <td>送信時にフォームが検証されないようにする。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/open">open</a></code></td> + <td>{{ HTMLElement("details") }}</td> + <td>ページ読み込み時に詳細情報を表示するかを示す。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/optimum">optimum</a></code></td> + <td>{{ HTMLElement("meter") }}</td> + <td>最適な値を示す。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/pattern">pattern</a></code></td> + <td>{{ HTMLElement("input") }}</td> + <td>要素の値を検証する正規表現を定義する。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Element/a#attr-ping">ping</a></code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> + <td><code>ping</code> 属性は、ユーザーがハイパーリンクをたどる場合に通知される URL のリストを空白区切りで指定します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/placeholder">placeholder</a></code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>フィールドが何を入力するものであるかのヒントを閲覧者に対し提供する。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/poster">poster</a></code></td> + <td>{{ HTMLElement("video") }}</td> + <td>ユーザが再生やシークを行うまでの間に表示するポスターフレームの URL。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/preload">preload</a></code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}</td> + <td>リソースの全体または一部のプリロードを行う、あるいはプリロードを行わないことを示す。</td> + </tr> + <tr> + <td><code>radiogroup</code></td> + <td>{{ HTMLElement("command") }}</td> + <td></td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/readonly">readonly</a></code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> + <td>要素が編集できるかどうかを示す。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/referralpolicy">referrerpolicy</a></code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}</td> + <td>リソースにアクセスする際にどのリファラーが送信されるかを指定する。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/rel">rel</a></code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}</td> + <td>リンク先オブジェクトとリンク元オブジェクトとの関係を指定する。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/required">required</a></code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> + <td>入力が必須の要素であるかを示す。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/reversed">reversed</a></code></td> + <td>{{ HTMLElement("ol") }}</td> + <td>リストを昇順ではなく降順に表示することを示す。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/rows">rows</a></code></td> + <td>{{ HTMLElement("textarea") }}</td> + <td>textarea の行数を定義する。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/rowspan">rowspan</a></code></td> + <td>{{ HTMLElement("td") }}, {{ HTMLElement("th") }}</td> + <td>テーブルセルがまたがる行数を定義する。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Element/iframe#attr-sandbox">sandbox</a></code></td> + <td>{{ HTMLElement("iframe") }}</td> + <td>iframe に読み込まれた文書で特定の機能を使用することを止める (フォームの投稿や新しいウィンドウを開くなど)。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/scope">scope</a></code></td> + <td>{{ HTMLElement("th") }}</td> + <td>(<code>th</code> 要素で定義される) ヘッダーテストが関連するセルを定義します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/scoped">scoped</a></code></td> + <td>{{ HTMLElement("style") }}</td> + <td></td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/selected">selected</a></code></td> + <td>{{ HTMLElement("option") }}</td> + <td>ページ読込時に、対象要素を選択状態にする。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/shape">shape</a></code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}</td> + <td></td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/size">size</a></code></td> + <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> + <td>要素の幅を定義する (ピクセル値)。要素の <code>type</code> 属性が <code>text</code> または <code>password</code> である場合は文字数になる。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/sizes">sizes</a></code></td> + <td>{{ HTMLElement("link") }}, {{ HTMLElement("img") }}, {{ HTMLElement("source") }}</td> + <td></td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/slot">slot</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>要素にシャドウ DOM のシャドウツリーのスロットを割り当てます。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/span">span</a></code></td> + <td>{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}</td> + <td></td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Global_attributes/spellcheck">spellcheck</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>要素のスペルチェックを有効にするかどうかを示します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/src">src</a></code></td> + <td>{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}</td> + <td>埋め込みコンテンツの URL。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/srcdoc">srcdoc</a></code></td> + <td>{{ HTMLElement("iframe") }}</td> + <td></td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/srclang">srclang</a></code></td> + <td>{{ HTMLElement("track") }}</td> + <td></td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/srcset">srcset</a></code></td> + <td>{{ HTMLElement("img") }}, {{ HTMLElement("source") }}</td> + <td>一つ以上のレスポンシブ画像の候補です。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/start">start</a></code></td> + <td>{{ HTMLElement("ol") }}</td> + <td>1以外から始まる場合の最初の値を定義します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/step">step</a></code></td> + <td>{{ HTMLElement("input") }}</td> + <td></td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Global_attributes/style">style</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>外部スタイルシートや style 要素内に記述されたものより優先度の高いスタイル情報を記述する。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/summary">summary</a></code></td> + <td>{{ HTMLElement("table") }}</td> + <td></td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Global_attributes/tabindex">tabindex</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>ブラウザーによる既定のタブオーダーを無効化して、指定した順序に従うようにします。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/target">target</a></code></td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }}</td> + <td></td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Global_attributes/title">title</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>要素の示す範囲のタイトル。PC ブラウザーでは、マウスオーバー時にツールチップとしてその属性値が表示される。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/translate">translate</a></code></td> + <td><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></td> + <td>ページが翻訳版である場合、要素の属性値と子の <code><a href="https://dom.spec.whatwg.org/#text" id="ref-for-text①⑦">Text</a></code> ノードが翻訳されているか、変更せずにそのままであるかを指定します。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/type">type</a></code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}</td> + <td>要素の型を定義する。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/usemap">usemap</a></code></td> + <td>{{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}</td> + <td></td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/value">value</a></code></td> + <td>{{ HTMLElement("button") }}, {{ HTMLElement("data") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("option") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}</td> + <td>ページ読み込み時に要素で表示するデフォルト値を定義する。</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/width">width</a></code></td> + <td>{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}</td> + <td> + <p>ここに挙げられた要素に対して、要素の幅を指定します。</p> + + <div class="note"> + <p><strong>注:</strong> {{ HTMLElement("div") }} など他の要素については、これは古い属性であり、代わりに CSS の {{ Cssxref("width") }} プロパティを使用してください。</p> + </div> + </td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Attributes/wrap">wrap</a></code></td> + <td>{{ HTMLElement("textarea") }}</td> + <td>テキストを折り返すかどうかを示します。</td> + </tr> + </tbody> +</table> + +<h2 id="Content_versus_IDL_attributes" name="Content_versus_IDL_attributes">content 属性と IDL 属性</h2> + +<p>HTML では、ほとんどの属性に <strong>content 属性</strong> と <strong>IDL (Interface Definition Language) 属性</strong> の 2 つの側面があります。</p> + +<p>content 属性は content (HTML コード) から設定する属性であり、 {{domxref("element.setAttribute()")}} や {{domxref("element.getAttribute()")}} を使用して設定あるいは取得できます。 content 属性は値として数値を想定するものであっても、常に文字列です。例えば content 属性を使用して {{HTMLElement("input")}} 要素の <code>maxlength</code> 属性に 42 を設定するには、その要素で <code>setAttribute("maxlength", "42")</code> を呼び出さなければなりません。</p> + +<p>IDL 属性は JavaScript プロパティとしても知られています。これらは <code class="moz-txt-verticalline">element.foo</code> といった JavaScript プロパティを使用して読み書きします。IDL 属性は読み取り時に値を返すため基になる content 属性を使用 (ただし、変換するでしょう) したり、書き込み時に content 属性へ何らかの値を保存したりします。言い換えると、IDL 属性は content 属性を映し出します。</p> + +<p>ほとんどの場合、IDL 属性は実際に使用する値として自身の値を返します。例えば {{HTMLElement("input")}} 要素の <code>type</code> 属性のデフォルト値は "text" であるので、<code>input.type="foobar"</code> を設定すると <code><input></code> 要素は (外見と動作が) text タイプになりますが、"type" content 属性の値は "foobar" になります。しかし、<code>type</code> IDL 属性は文字列 "text" を返します。</p> + +<p>IDL 属性は常に文字列とは限りません。例えば <code>input.maxlength</code> は数値 (符号付き long) です。IDL 属性を使用するときは望ましい型の値を読み書きするので、<code>input.maxlength</code> は常に数値を返し、また <code>input.maxlength</code> を設定するときは数値を要求します。他の型で渡すと、標準的な JavaScript の型変換規則に従って自動的に数値へ変換されます。</p> + +<p>IDL 属性は符号なし long、URL、論理値など<a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">他の型を反映する</a>ことが可能です。残念ながら、属性に応じて IDL 属性が対応する content 属性と一体化して動作するための明確な規則や方法はありません。ほとんどの場合は<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">仕様にある規則</a>に従いますが、そうでない場合もあります。 HTML 仕様では可能な限り開発者にやさしいものにしようとしていますが、さまざまな理由 (たいていは歴史的な理由) により奇妙な動作になる属性 (例えば <code>select.size</code>) があり、実際どのように動作するかを理解するために仕様書を読むようにしましょう。</p> + +<h2 id="Boolean_Attributes" name="Boolean_Attributes">論理属性</h2> + +<p>一部のコンテンツ属性 (例えば <code>required</code>, <code>readonly</code>, <code>disabled</code>) は<a href="https://www.w3.org/TR/html52/infrastructure.html#sec-boolean-attributes"><ruby>論理属性<rp> (</rp><rt>boolean attributes</rt><rp>) </rp></ruby></a>と呼ばれています。論理属性は存在すれば、その値は <strong>true</strong> となり、存在しなければ、その値は <strong>false</strong> となります。</p> + +<p>HTML5 では、論理属性に許されている値の制約を定義しています。属性が存在する場合は、値は空文字列 (属性の値が割り当てられないことがあります) または属性の正式名に ASCII で大文字・小文字まで一致する値のどちらかで、前後にホワイトスペースを含んではいけません。以下の例は論理属性をマークアップする正しい方法です。</p> + +<pre class="notranslate"><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></pre> + +<p>明確にするために、 "<code>true</code>" および "<code>false</code>" という値は論理属性では許可されていません。偽の値を表すには、属性ごと省略する必要があります。この制約により、いくつかのよくある誤解が明確になります。例えば <code>checked="false"</code> は、属性が存在するため、その要素の <code>checked</code> 属性が <strong>true</strong> であると解釈されます。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/Element">HTML 要素</a></li> +</ul> 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 +--- +<p>{{HTMLSidebar}}</p> + +<p><strong><code>max</code></strong> 属性は、その属性を含む入力に対して許容可能で有効な最大値を定義します。要素の<code><a href="/ja/docs/Web/HTML/Element/input#attr-value">値</a></code>がこれより大きい場合、その要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。この値は、 <a href="min"><code>min</code></a> 属性の値以上でなければなりません。 <code>max</code> 属性が指定されていないか無効であった場合、 <code>max</code> 値は適用されません。 <code>max</code> 属性が有効で、値が空でなく、 <code>max</code> 属性によって許容される最大値よりも大きい場合、制約検証によってフォームの送信が阻止されます。</p> + +<p>これは数値入力型、例えば {{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')}} 要素で有効であり、 <code>max</code> 属性はフォームコントロールで妥当と見なされる最も大きな値をして逸する数値です。</p> + +<p>値が許容される最大値を超えた場合、 {{domxref('validityState.rangeOverflow')}} が true となり、そのコントロールは {{cssxref(':out-of-range')}} および {{cssxref(':invalid')}} 擬似クラスと一致するようになります。</p> + +<h3 id="Syntax" name="Syntax">構文</h3> + +<table class="standard-table"> + <caption><code>max</code> の構文 (入力 <code>type</code> 別)</caption> + <thead> + <tr> + <th>入力型</th> + <th>構文</th> + <th>例</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("input/date", "date")}}</td> + <td><code class="brush: html">yyyy-mm-dd</code></td> + <td><code class="brush: html"><input type="date" max="2019-12-25" step="1"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/month", "month")}}</td> + <td><code class="brush: html">yyyy-mm</code></td> + <td><code class="brush: html"><input type="month" max="2019-12" step="12"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/week", "week")}}</td> + <td><code class="brush: html">yyyy-W##</code></td> + <td><code class="brush: html"><input type="week" max="2019-W23" step=""></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/time", "time")}}</td> + <td><code class="brush: html">hh:mm</code></td> + <td><code class="brush: html"><input type="time" max="17:00" step="900"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/datetime-local", "datetime-local")}}</td> + <td><code>yyyy-mm-ddThh:mm</code></td> + <td><code class="brush: html"><input type="datetime-local" min="2019-12-25T23:59"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/number", "number")}}</td> + <td><a href="/ja/docs/Web/CSS/number"><number></a></td> + <td><code class="brush: html"><input type="number" min="0" step="5" max="100"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/range", "range")}}</td> + <td><a href="/ja/docs/Web/CSS/number"><number></a></td> + <td><code class="brush: html"><input type="range" min="60" step="5" max="100"></code></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>注:</strong> ユーザーが入力したデータが設定された最大値を満たしていない場合、製薬検証では無効とみなされ、 {{cssxref(':invalid')}} と {{cssxref(':out-of-range')}} の擬似クラスに一致するようになります。</p> +</div> + +<p>詳しくは <a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">クライアント側検証</a>と {{domxref("ValidityState.rangeOverflow", "rangeOverflow")}} を参照してください。</p> + +<p>{{htmlelement('progress')}} 要素における <code>max</code> 属性は、 <code>progress</code> 要素で示されたタスクがどれだけの作業を必要とするかを記述します。存在する場合、ゼロより大きい値を持ち、有効な浮動小数点数でなければなりません。 {{htmlelement('meter')}} 要素における <code>max</code> 属性は、測定範囲の上限の数値を定義します。これは、指定されている場合、最小値 (<code><a href="/en-US/docs/Web/HTML/Attributes/min">min</a></code> 属性) よりも大きくなければなりません。どちらの場合も、省略された場合、値は既定で 1 となります。</p> + +<table class="standard-table"> + <caption>その他の要素における <code>max</code> 値の構文</caption> + <thead> + <tr> + <th>入力型</th> + <th>構文</th> + <th>例</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("progress")}}</td> + <td><a href="/ja/docs/Web/CSS/number"><number></a></td> + <td><code><progress id="file" max="100" value="70"> 70% </progress></code></td> + </tr> + <tr> + <td>{{HTMLElement("meter")}}</td> + <td><a href="/ja/docs/Web/CSS/number"><number></a></td> + <td><code><meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"> at 40/100</meter></code></td> + </tr> + </tbody> +</table> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> + +<p>ユーザーがフォームに記入したり、個々のフォームコントロールを使用するのに役立つ説明を提供してください。必須の入力、任意の入力、データの書式、その他の関連する情報を示してください。 <code>max</code> 属性を使用する場合は、この最大値の要件がユーザーに理解されていることを確認してください。 {{htmlelement('label')}} 内で指示を提供すれば十分かもしれません。ラベルの外に指示を提供すれば、より柔軟な配置やデザインが可能になるので、 <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> または <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> を使用することを検討してください。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#the-min-and-max-attributes', 'max attribute')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'input.html#the-min-and-max-attributes', 'max attribute')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-progress-element', 'progress element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-progress-element', 'progress element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-meter-element', 'meter element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-meter-element', 'meter element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.attributes.max")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/Attributes/step"><code>step</code></a></li> + <li><a href="/ja/docs/Web/HTML/Attributes/min"><code>min</code></a></li> + <li>other meter attributes: <a href="/ja/docs/Web/HTML/Attributes/low"><code>low</code></a>, <a href="/ja/docs/Web/HTML/Attributes/high"><code>high</code></a>, <a href="/ja/docs/Web/HTML/Attributes/optimum"><code>optimum</code></a></li> + <li><a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">Constraint validation</a></li> + <li><a href="/ja/docs/Web/API/Constraint_validation">Constraint validation API</a></li> + <li>{{domxref('validityState.rangeOverflow')}}</li> + <li>{{cssxref(':out-of-range')}}</li> + <li>{{htmlelement('input')}}</li> +</ul> 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 +--- +<p>{{HTMLSidebar}}{{draft}}</p> + +<p><span class="seoSummary"><strong><code>maxlength</code></strong> 属性は、ユーザーが {{htmlelement('input')}} または {{htmlelement('textarea')}} に入力できる最大文字数を (UTF-16 コード単位で) 定義します。 0 以上の整数値である必要があります。</span> maxlength が指定されなかった場合、または無効な値が指定された場合は、 input や textarea には最大長が設定されません。</p> + +<p><code>maxlength</code> の値はすべて、 <code>minlength</code> が存在して有効である場合は、その値以上である必要があります。フィールドのテキスト値の長さが maxlength の UTF-16 コード単位の長さを超える場合、入力欄は制約検証に失敗します。制約検証は、ユーザーが値を変更した場合にのみ適用されます。</p> + +<h3 id="Constraint_validation" name="Constraint_validation">制約検証</h3> + +<p>ブラウザーは一般的に、 maxlength 属性が許可する以上のテキストをユーザーが入力することを防止しますが、長さが maxlength が許可しているよりも長くなった場合、 {{domxref("ValidityState")}} オブジェクトの読み取り専用の {{domxref("ValidityState.tooLong", "tooLong")}} プロパティが true になります。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html notranslate"><input type="password" maxlength="4"/> +</pre> + +<p>{{EmbedLiveSample('Examples', '100%', 200)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#attr-input-maxlength', 'maxlength attribute')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'input.html#attr-maxlength-accept', 'maxlength attribute')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.attribute.maxlength")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><code><a href="/ja/docs/Web/HTML/Attributes/minlength">minlength</a></code></li> + <li><code><a href="/ja/docs/Web/HTML/Attributes/size">size</a></code></li> +</ul> 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 +--- +<p>{{HTMLSidebar}}</p> + +<p><span class="seoSummary"><strong><code>min</code></strong> 属性は、その属性を含む入力欄に対して許容できる有効な最小値を定義します。要素の<code><a href="/ja/docs/Web/HTML/Element/input#attr-value">値</a></code>がこれより大きい場合、その要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。この値は、 <code>max</code> 属性の値以下でなければなりません。 <code>min</code> 属性が指定されていないか無効であった場合、最小値は適用されません。</span></p> + +<p>これは数値入力型、例えば {{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')}} 要素で有効であり、 <code>min</code> 属性はフォームコントロールで妥当と見なされる最も小さな値を指定する数値です。</p> + +<h3 id="Syntax" name="Syntax">構文</h3> + +<table class="standard-table"> + <caption><code>min</code> の構文 (入力 <code>type</code> 別)</caption> + <thead> + <tr> + <th>入力型</th> + <th>構文</th> + <th>例</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("input/date", "date")}}</td> + <td><code class="brush: html">yyyy-mm-dd</code></td> + <td><code class="brush: html"><input type="date" min="2019-12-25" step="1"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/month", "month")}}</td> + <td><code class="brush: html">yyyy-mm</code></td> + <td><code class="brush: html"><input type="month" min="2019-12" step="12"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/week", "week")}}</td> + <td><code class="brush: html">yyyy-W##</code></td> + <td><code class="brush: html"><input type="week" min="2019-W23" step=""></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/time", "time")}}</td> + <td><code class="brush: html">hh:mm</code></td> + <td><code class="brush: html"><input type="time" min="09:00" step="900"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/datetime-local", "datetime-local")}}</td> + <td><code>yyyy-mm-ddThh:mm</code></td> + <td><code class="brush: html"><input type="datetime-local" min="2019-12-25T19:30"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/number", "number")}}</td> + <td><a href="/en-US/docs/Web/CSS/number"><number></a></td> + <td><code class="brush: html"><input type="number" min="0" step="5" max="100"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/range", "range")}}</td> + <td><a href="/en-US/docs/Web/CSS/number"><number></a></td> + <td><code class="brush: html"><input type="range" min="60" step="5" max="100"></code></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>注:</strong> ユーザーが入力したデータが設定された最大値を満たしていない場合、制約検証では無効とみなされ、 {{cssxref(':invalid')}} の擬似クラスに一致するようになります。</p> +</div> + +<p>詳しくは <a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">クライアント側検証</a>と {{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}} を参照してください。</p> + +<p>{{htmlelement('meter')}} 要素における <code>min</code> 属性は、測定範囲の上限の数値を定義します。これは、指定されている場合、最大値 (<code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code> 属性) よりもチイサクなければなりません。どちらの場合も、省略された場合、値は既定で 1 となります。</p> + +<table class="standard-table"> + <caption>その他の要素における <code>min</code> 値の構文</caption> + <thead> + <tr> + <th>入力型</th> + <th>構文</th> + <th>例</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("meter")}}</td> + <td><a href="/ja/docs/Web/CSS/number"><number></a></td> + <td><code><meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"> at 40/100</meter></code></td> + </tr> + </tbody> +</table> + +<h3 id="Impact_on_step" name="Impact_on_step">step への影響</h3> + +<p><code>min</code> と <code>step</code> の値は、 <code>step</code> 属性がない場合も含め、どの値が有効であるかを定義します。 <code>step</code> の既定値は <code>0</code> です。</p> + +<p>無効な入力の周囲に太く赤い境界を追加します。</p> + +<pre class="brush: css notranslate">input:invalid { + border: solid red 3px; +}</pre> + +<p>それから入力欄の最小値を 7.2 と定義し、 step 属性は省略しているので、既定値が 1 になります。</p> + +<pre class="brush: html notranslate"><input id="myNumber" name="myNumber" type="number" min="7.2" value="8"></pre> + +<p><code>step</code> の既定値は 1 なので、有効な値は <code>7.2</code>, <code>8.2</code>, <code>9.2</code>, などになります。 8 の値は有効ではありません。無効な値が入っているので、対応しているブラウザーは値が無効であることを表示します。</p> + +<p>{{EmbedLiveSample("Impact_on_step",200,55)}}</p> + +<p>明示的に含まれていない限り、 <code>number</code>、 <code>range</code> では <code>step</code> は既定値の 1 となり、 date/time 入力型では 1 単位 (秒, 週, 月, 日) となります。</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> + +<p>ユーザーがフォームに記入したり、個々のフォームコントロールを使用するのに役立つ説明を提供してください。必須の入力、任意の入力、データの書式、その他の関連する情報を示してください。 <code>max</code> 属性を使用する場合は、この最大値の要件がユーザーに理解されていることを確認してください。 {{htmlelement('label')}} 内で指示を提供すれば十分かもしれません。ラベルの外に指示を提供すれば、より柔軟な配置やデザインが可能になるので、 <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> または <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> を使用することを検討してください。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#the-min-and-max-attributes', 'min attribute')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'input.html#the-min-and-max-attributes', 'min attribute')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.attributes.min")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/Attributes/step">step</a></li> + <li><a href="/ja/docs/Web/HTML/Attributes/max">max</a></li> + <li><a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a></li> + <li>{{domxref('Constraint_validation')}}</li> + <li>{{domxref('validityState.rangeUnderflow')}}</li> + <li>{{cssxref(':out-of-range')}}</li> + <li>{{htmlelement('input')}}</li> + <li>{{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')}}</li> +</ul> 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 +--- +<p>{{HTMLSidebar}}</p> + +<p class="summary"><strong><code>minlength</code></strong> 属性は、ユーザーが {{htmlelement('input')}} または {{htmlelement('textarea')}} に入力できる最小文字数を (UTF-16 コード単位で) 定義します。 0 以上の整数値である必要があります。 minlength が指定されなかった場合、または無効な値が指定された場合は、 input や textarea には最小文字数が設定されません。この値は <a href="/ja/docs/Web/HTML/Attributes/maxlength">maxlength</a> の値以下である必要があります。そうでなければどちらの条件にも合わせることができないので、この値が有効になることはありません。</p> + +<p>フィールドのテキスト値の長さが minlength を UTF-16 コード単位の長さで下回った場合、入力欄は制約検証に失敗し、 {{domxref('validityState.tooShort')}} が <code>true</code> を返します。制約検証は、ユーザーが値を変更した場合にのみ適用されます。送信に失敗すると、ブラウザーによっては必要な最小文字列と現在の長さを示してエラーメッセージを表示します。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code>minlength="5"</code> を追加すると、値は空か5文字以上でないと有効にはならなくなります。</p> + +<pre class="brush: html notranslate"><label for="fruit">Enter a fruit name that is at least 5 letters long</label> <input type="text" minlength="5" id="fruit"></pre> + +<p>擬似クラスを使用すると、要素を値が有効かどうかによってスタイル付けすることができます。この値は null (空欄) または5文字以上であれば有効になります。<em>ライム色</em>は無効であり、<em>レモン色は有効です</em>。</p> + +<pre class="brush: css notranslate">input { + border: 2px solid currentcolor; +} +input:invalid { + border: 2px dashed red; +} +input:invalid:focus { + background-image: linear-gradient(pink, lightgreen); +}</pre> + +<p>{{EmbedLiveSample('Examples', '100%', 200)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#attr-input-minlength', 'minlength attribute')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'input.html#attr-minlength-accept', 'minlength attribute')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.attribute.minlength")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/Attributes/maxlength">maxlength</a></li> + <li><a href="/ja/docs/Web/HTML/Attributes/size">size</a></li> + <li><a href="/ja/docs/Web/HTML/Attributes/pattern">pattern</a></li> + <li><a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a></li> +</ul> 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 +--- +<p>{{HTMLSidebar}}</p> + +<p>論理属性の <strong><code>multiple</code></strong> 属性は、設定されている場合、フォームコントロールが1つ以上の値を受け入れることを意味します。 {{HTMLElement("input/email", "email")}} と {{HTMLElement("input/file", "file")}} の入力型と {{HTMLElement("select")}} に対して有効で、ユーザーが複数の値を選択する方法はフォームコントロールに依存します。</p> + +<p>型によっては、<code>multiple</code> 属性が設定されている場合、フォームコントロールの外観が変わる場合があります。 file 入力型については、ブラウザーが提供するネイティブのメッセージが異なります。 Firefox では、ファイルが選択されていないとき、この属性が設定されていると「ファイルが選択されていません」、設定されていない場合は「ファイルが選択されていません」となります（訳注：英語では file と files の違いがありますが、日本語ではメッセージの違いはありません）。ほとんどのブラウザーでは、 {{HTMLElement("select")}} コントロールに <code>multiple</code> 属性が設定されていると、スクロールするリストボックスを表示するのに対し、設定されていない場合は単一行のドロップダウンを表示します。 {{HTMLElement("input/email", "email")}} 入力は同じ表示ですが、この属性が設定されていない場合は、カンマ区切りで複数のメールアドレスが設定されていると {{cssxref(':invalid')}} 擬似クラスに一致します。</p> + +<p><code>multiple</code> が {{HTMLElement("input/email", "email")}} 入力型に設定されている場合、ユーザーは0個 (<code><a href="/ja/docs/Web/HTML/Attributes/required">required</a></code> がない場合)、1個、またはそれ以上のカンマ区切りのメールアドレスを入れることができます。</p> + +<pre class="brush: html notranslate"><input type="email" <strong>multiple</strong> name="emails" id="emails"></pre> + +<p><code>multiple</code> 属性が指定された場合のみ、値はカンマで区切られた適切な形式のメールアドレスのリストになります。リスト内の各アドレスから、末尾と先頭の空白はすべて削除されます。</p> + +<p><code>multiple</code> が {{HTMLElement("input/file", "file")}} 入力型に設定された場合、ユーザーは 1 つ以上のファイルを選択することができます。ユーザーはファイルピッカーから複数のファイルを、選択したプラットフォームが許可する任意の方法 (<kbd>Shift</kbd> か <kbd>Control</kbd> を押したまま、それからクリックするなど) で選択することができます。</p> + +<pre class="brush: html notranslate"><input type="file" <strong>multiple</strong> name="uploads" id="uploads"></pre> + +<p>この属性を省略した場合は、 <code><input></code> あたりに1つのファイルしか選択することができません。</p> + +<p><code>multiple</code> 属性を {{HTMLElement("select")}} 要素に設定すると、選択肢のリストから 0 個以上の選択肢を選択するためのコントロールを表します。それ以外の場合、 {{HTMLElement("select")}} 要素は、選択肢のリストから単一の {{HTMLElement("option")}} を選択するためのコントロールを表します。</p> + +<pre class="brush: html notranslate"><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></pre> + +<p><code>multiple</code> を指定すると、ほとんどのブラウザーでは 1 行のドロップダウンではなく、スクロールするリストボックスが表示されます。</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> + +<p>ユーザーがフォームに記入する方法を理解し、個々のフォームコントロールを使用するための指示を提供してください。入力が必須であるか任意であるか、データの書式、その他の関連する情報です。 <code>multiple</code> 属性を使用する場合は、ユーザーに複数の値が許可されていることを知らせ、「複数のメールアドレスをカンマ区切りで入力してください」などのように、複数の値を入力する方法を指示してください。</p> + +<p>複数選択で <code><a href="/ja/docs/Web/HTML/Attributes/size">size</a>="1"</code> を設定すると、ブラウザーによっては単一選択として表示されることがありますが、その場合はフォーカスが拡大されず、使い勝手が悪くなってしまいます。そのようなことはしないでください。 select の外観を変更する場合、また変更しない場合でも、別の方法で複数のオプションを選択できることをユーザーに知らせるようにしてください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="email_input" name="email_input">email 入力型</h3> + +<pre class="brush: html notranslate"><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></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">input:invalid {border: red solid 3px;}</pre> +</div> + +<p><code>multiple</code> 属性が指定された場合のみ、値はカンマで区切られた適切な形式のメールアドレスのリストになります。リスト内の各アドレスから、末尾の空白と先頭の空白はすべて削除されます。 <code><a href="/ja/docs/Web/HTML/Attributes/required">required</a></code> 属性が存在する場合、少なくとも1つのメールアドレスが必要です。</p> + +<p>ブラウザーによっては、 <code>multiple</code> が存在する場合に関連付けられた {{htmlelement('datalist')}} から配下のメール会アドレスのためにオプションの <code><a href="/en-US/docs/Web/HTML/Attributes/list">list</a></code> を表示することがあります。他のブラウザーは対応していません。</p> + +<p>{{EmbedLiveSample("email_input", 600, 80) }}</p> + +<h3 id="file_input" name="file_input">file 入力型</h3> + +<p><code>multiple</code> が {{HTMLElement("input/file", "file")}} 入力型に設定されている場合、1つ以上のファイルを選択することができます。</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>{{EmbedLiveSample("file_input", 600, 80) }}</p> + +<p><code>multiple</code> が設定された <code>file</code> 入力欄と、設定されていない入力欄との外見の違いに注意してください。</p> + +<p>フォームが送信されたとき、 <code><a href="/ja/docs/Web/HTML/Element/form">method="get"</a></code> を使用していれば、選択された各ファイルの名前が URL パラメータに<code>?uploads=img1.jpg&uploads=img2.svg</code> のように追加されていたはずです。しかし、<a href="/ja/docs/Web/API/XMLHttpRequest/multipart">マルチパート</a>のフォームデータを送信しているので、post を多用しています。詳しくは {{htmlelement('form')}} 要素と<a href="/ja/docs/Learn/Forms/Sending_and_retrieving_form_data#The_method_attribute">フォームデータの送信</a>を参照してください。</p> + +<h3 id="select">select</h3> + +<p>{{HTMLElement("select")}} 要素の <code>multiple</code> 属性は、選択肢のリストから 0 個以上の選択肢を選択するための制御を表します。そうでなければ、{{HTMLElement("select")}} 要素は、選択肢のリストから単一の {{HTMLElement("option")}} を選択するための制御を表します。一般的に、このコントロールは複数の属性の存在に基づいて異なる外観を持ち、属性が存在する場合には、ほとんどのブラウザは、一行のドロップダウンではなくスクロールするリストボックスを表示します。</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>{{EmbedLiveSample("select", 600, 120) }}</p> + +<p>2つのフォームコントロール間の外観の違いに注意してください。</p> + +<pre class="brush: css notranslate">/* この CSS のコメントを解除して、マルチプルがシングルと同じ高さになるようにします。 */ + +/* +select[multiple] { + height: 1.5em; + vertical-align: top; +} +select[multiple]:focus, +select[multiple]:active { + height: auto; +} +*/</pre> + +<p>複数の属性を持つ <code><select></code> 要素の中で複数のオプションを選択する方法がいくつかあります。オペレーティングシステムに応じて、マウスを使用する人は <kbd>Ctrl</kbd>、<kbd>Command</kbd>、または <kbd>Shift</kbd> キーを押したまま、複数のオプションをクリックして、それらを選択／選択解除することができます。キーボードユーザは <code><select></code> 要素に焦点を当てて、カーソルキーの <kbd>Up</kbd> と <kbd>Down</kbd> を使って選択したい範囲の上部または下部にある項目を選択して、オプションを上下に移動することで、複数の連続した項目を選択することができます。連続していない項目の選択はあまりサポートされていません: <kbd>Space</kbd> キーを押すことで項目の選択と選択解除ができるはずですが、サポートはブラウザによって異なります。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#attr-input-multiple', 'multiple attribute')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'input.html#attr-input-multiple', 'multiple attribute')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{htmlelement('input')}}</li> + <li>{{htmlelement('select')}}</li> + <li><a href="/ja/docs/Web/HTML/Element/input/email#Allowing_multiple_e-mail_addresses">複数のメールアドレスの許可</a></li> +</ul> 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 +--- +<p>{{HTMLSidebar}}</p> + +<p><strong><code>pattern</code></strong> 属性は、フォームコントロールの値が一致すべき<a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions">正規表現</a>を指定します。 <code>null</code> 以外の値が <code>pattern</code> 値によって設定された制約に適合しない場合、 {{domxref('ValidityState')}} オブジェクトの読み取り専用の {{domxref('ValidityState.patternMismatch','patternMismatch')}} プロパティが真になります。</p> + +<p><code>pattern</code>属性は {{HTMLElement("input/text", "text")}}, {{HTMLElement("input/tel", "tel")}}, {{HTMLElement("input/email", "email")}}, {{HTMLElement("input/url", "url")}}, {{HTMLElement("input/password", "password")}}, {{HTMLElement("input/search", "search")}} の入力型の属性です。</p> + +<div id="pattern-include"> +<p><code>pattern</code>属性は、<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>を通過させるために、入力の {{htmlattrxref("value")}} が一致するべき正規表現です。これは有効な JavaScript の正規表現でなければならず、 {{jsxref("RegExp")}} 型で使用されたり、 <a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions">正規表現ガイド</a>で説明されているものと同じものです。通り正規表現をコンパイルする際に <code>'u'</code> フラグを指定することで、パターンが ASCII ではなく Unicode コードポイントの並びとして扱われるようになります。パターンテキストの周りには、スラッシュを指定してはいけません。</p> + +<p>パターンが指定されていないか無効な場合、正規表現は適用されず、この属性は無視されます。</p> + +<div class="note"> +<p><strong>ヒント:</strong> {{htmlattrxref("title", "input")}} 属性を使用すると、ほとんどのブラウザーがパターンに一致するための要件を説明するためにツールチップとして表示するテキストを指定することができます。説明をツールチップだけに頼っては<strong>いけません</strong>。ユーザービリティについての詳細は以下を参照してください。</p> +</div> +</div> + +<p>pattern 属性に対応している入力型の中には、特に {{HTMLElement("input/email", "email")}} および {{HTMLElement("input/url", "url")}} 入力型のように、一致しなければならない期待値の構文を持っているものがあります。 pattern 属性が存在せず、値がその値型の期待される構文と一致しない場合、 {{domxref('ValidityState')}} オブジェクトの読み取り専用の {{domxref('ValidityState.typeMismatch','typeMismatch')}} プロパティが真になります。</p> + +<h3 id="Usability" name="Usability">ユーザービリティ</h3> + +<p><code>pattern</code> を含める場合は、コントロールの近くの可視テキストでパターンについて説明してください。さらに、パターンを説明する <code><a href="/ja/docs/Web/HTML/Global_attributes/title">title</a></code> 属性を含めてください。ユーザーエージェントは、制約検証中に title の内容を使用して、パターンが一致しないことをユーザーに伝えることができます。ブラウザーによっては、タイトルの内容を持つツールチップを表示し、視覚障碍者のユーザーの使い勝手を向上させます。さらに、支援技術は、コントロールにフォーカスを合わせるとタイトルを声に出して読むことができる場合がありますが、アクセシビリティのためにはこれに頼るべきではありません。</p> + +<h3 id="Constraint_validation" name="Constraint_validation">制約検証</h3> + +<p>入力欄の値が空文字列ではなく、正規表現全体と一致しない場合は、 {{domxref('ValidityState.patternMismatch','patternMismatch')}} が真になります。<br> + pattern の正規表現は、値に一致したときに、先頭が文字列の先頭に該当し、末尾が文字列の末尾に該当するため、これは JavaScript の正規表現とは少し異なります。 pattern 属性の場合、パターンの先頭に <code>^(?:</code> が、末尾に <code>)$</code> が指定されているかのように、値の部分ではなく全体に一致します。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>以下ののものを考えてみてください。</p> + +<div id="example1"> +<pre class="brush: html notranslate"><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></pre> + +<p>ここでは北米の電話番号を示す3つの部分があり、電話番号の3つの構成要素すべてを含む暗黙のラベルがありますが、それぞれ3桁、3桁、4桁で <code><a href="/ja/docs/Web/HTML/Attributes/pattern">pattern</a></code> 属性によってそれぞれ設定されています。</p> + +<p>値が長すぎたり短すぎたり、数字ではない文字が含まれていたりすると、 patternMismatch が true になります。 <code>true</code> の場合、要素は CSS の {{cssxref(":invalid")}} 擬似クラスに一致します。</p> + +<pre class="brush: css notranslate">input:invalid { + border: red solid 3px; +}</pre> + +<p>{{EmbedLiveSample("example1", 300, 40)}}</p> +</div> + +<p>代わりに <code><a href="/ja/docs/Web/HTML/Attributes/minlength">minlength</a></code> と <code><a href="/ja/docs/Web/HTML/Attributes/maxlength">maxlength</a></code> 属性を用いた場合、 {{domxref('validityState.tooLong')}} または {{domxref('validityState.tooShort')}} が true になります。</p> + +<h3 id="Specifying_a_pattern" name="Specifying_a_pattern">パターンの指定</h3> + +<p>{{htmlattrxref("pattern", "input")}} 属性を使用すると、入力された値が有効とみなされるために一致しなければならない正規表現を指定することができます (正規表現を使用して入力を検証する簡単な集中講座は、<a href="/ja/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression">正規表現に対する検証</a>を参照してください)。</p> + +<p>以下の例では、値を 4-8 文字に制限し、小文字のみを含むことを要求しています。</p> + +<pre class="brush: html notranslate"><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></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +p { + font-size: 80%; + color: #999; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<p>This renders like so:</p> + +<p>{{ EmbedLiveSample('Specifying_a_pattern', 600, 110) }}</p> + +<h3 id="Accessibility_Concerns" name="Accessibility_Concerns">アクセシビリティの考慮</h3> + +<p>コントロールに <code>pattern</code> 属性がある場合、 <code>title</code> 属性が使われていれば、そのパターンを説明しなければなりません。テキストコンテンツを視覚的な表示するために <code>title</code> 属性に頼ることは、多くのユーザーエージェントがアクセス可能な方法で属性を公開しないので、一般的には推奨されません。ブラウザーによっては、タイトルを持つ要素の上にポインターを置いたときにツールチップを表示しますが、キーボードのみのユーザーやタッチのみのユーザーは除外されてしまいます。これが、どのようにコントロールに記入すれば要件に合うかをユーザーに知らせる情報を含める必要がある理由の一つです。</p> + +<p>一部のブラウザーでは <code>title</code> を使用してエラーメッセージを表示していますが、ブラウザーはポインターを置いたときにもタイトルをテキストとして表示することがあり、エラーが発生していない状況でも表示されることがあるので、エラーが発生したかのような言葉を使用しないように注意してください。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('HTML WHATWG', 'forms.html#attr-input-pattern', 'pattern') }}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{ SpecName('HTML5.1', 'forms.html#attr-input-pattern', 'pattern') }}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{ SpecName('HTML5 W3C', 'forms.html#attr-input-pattern', 'pattern') }}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.attributes.pattern")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">Constraint validation</a></li> + <li><a href="/ja/docs/Web/Guide/HTML/Forms/Data_form_validation">Forms: Data form validation</a></li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a></li> +</ul> 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 +--- +<p>{{HTMLSidebar}}</p> + +<p><span class="seoSummary">論理属性の <code><strong>required</strong></code> 属性</span>は、存在する場合、所有するフォームを送信する前にユーザーが入力に値を指定しなければならないことを示します。 <code>required</code> 属性は <code>{{HTMLElement("input/text","text")}}</code>, <code>{{HTMLElement("input/search","search")}}</code>, <code>{{HTMLElement("input/url","url")}}</code>, <code>{{HTMLElement("input/tel","tel")}}</code>, <code>{{HTMLElement("input/email","email")}}</code>, <code>{{HTMLElement("input/password","password")}}</code>, <code>{{HTMLElement("input/date","date")}}</code>, <code>{{HTMLElement("input/month","month")}}</code>, <code>{{HTMLElement("input/week","week")}}</code>, <code>{{HTMLElement("input/time","time")}}</code>, <code>{{HTMLElement("input/datetime-local","datetime-local")}}</code>, <code>{{HTMLElement("input/number","number")}}</code>, <code>{{HTMLElement("input/checkbox","checkbox")}}</code>, <code>{{HTMLElement("input/radio","radio")}}</code>, <code>{{HTMLElement("input/file","file")}}</code> の {{HTMLElement("input")}} 型と {{HTMLElement("select")}} および {{HTMLElement("textarea")}} のフォームコントロール要素で対応しています。これらの入力型や要素の何れかに設定された場合、 {{cssxref(':required')}} 擬似クラスが一致します。属性が設定されていない場合は {{cssxref(':optional')}} 擬似クラスが一致します。</p> + +<p>この属性は {{HTMLElement("input/range","range")}} と {{HTMLElement("input/color","color")}} は対応していませんし、どちらも既定値を持っているので関係がありません。 {{HTMLElement("input/hidden","hidden")}} は、非表示のフォームにユーザーが記入することを期待できないため、対応していません。また、 <code>image</code> を含むボタンの種類もいずれも対応していません。</p> + +<p>なお、 <code>color</code> と <code>range</code> は <code>required</code> に対応していませんが、 <code>color</code> 型は既定値が <code>#000000</code> であり、 <code>range</code> は、 <code>min</code> と <code>max</code> の中間点が既定値です。 -- 宣言されていない場合、ほとんどのブラウザーでは <code>min</code> と <code>max</code> の既定値はそれぞれ 0 と 100 です。 -- 従って、常に値があります。</p> + +<p>入力欄に <code>required</code> 属性がある場合、 {{cssxref(":required")}} 擬似クラスも適用されます。逆に、 <code>required</code> 属性に対応していて、この属性が設定されていない入力欄は、 {{cssxref(":optional")}} 擬似クラスに一致します。</p> + +<p>同じ名前が付けられた {{HTMLElement("input/radio","radio")}} ボタンのグループのでは、グループ内の一つのラジオボタンに <code>required</code> 属性が設定されていた場合、この属性が設定されているものでなくても構わないのですが、グループ内のラジオボタンの一つをチェックする必要があります。そのため、コードの保守性を向上させるために、グループ内の同じ名前のラジオボタンすべてに <code>required</code> 属性を設定するか、またはどれにも設定しないようにすることをお勧めします。</p> + +<p>同じ名前が付けられた {{HTMLElement("input/checkbox","checkbox")}} 入力型のグループでは、 <code>required</code> 属性がついたチェックボックスのみが必須になります。</p> + +<div class="blockIndicator note"> +<p>注: <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute">aria-required</a>="true"</code> を設定すると、ある要素 (任意の要素) が必須であることを読み上げソフトに伝えますが、その要素が任意であるかどうかには関係ありません。</p> +</div> + +<h3 id="Attribute_interactions" name="Attribute_interactions">属性の相互作用</h3> + +<p>読み取り専用フィールドは値を持つことができないので、 <code>required</code> は <code><a href="/ja/docs/Web/HTML/Attributes/readonly">readonly</a></code> 属性が指定されている入力欄には影響を与えません。</p> + +<h3 id="ユーザビリティ">ユーザビリティ</h3> + +<p><code>required</code>属性を設定する、その {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} が必須であることをユーザーに知らせるために、コントロールの近くに目に見える表示を提供してください。さらに、必須フォームコントロールを {{cssxref(':required')}} 擬似クラスでターゲットにし、必須であることを示すようにスタイル付けしてください。これにより、視覚障碍者のユーザーのユーザービリティが向上します。しかし、 <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute">aria-required</a>="true"</code> を追加しても、ブラウザーと読み上げソフトの組み合わせがまだ <code>required</code> に対応していない場合には問題ありません。</p> + +<h3 id="制約検証">制約検証</h3> + +<p>要素が必須で、かつ要素の値が空文字列の場合、その要素は {{domxref('ValidityState.valueMissing','valueMissing')}} に悩まされ、その要素が {{cssxref(':invalid')}} 擬似クラスに一致してします。</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> + +<p>ユーザーにフォームコントロールが必須であることを知らせる表示を提供してください。色盲、認知機能の違い、スクリーンリーダーを使用しているかどうかにかかわらず、すべてのユーザーが要件を理解できるように、メッセージを伝えるものがテキスト、色、マーキング、属性などの多面的なものであることを確認してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><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> +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample('Examples')}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#attr-input-required', 'required attribute')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#attr-input-required', 'required attribute')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#the-required-attribute', 'required attribute')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.attributes.required")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref('validityState.valueMissing')}}</li> + <li>{{cssxref(':required')}} および {{cssxref(':optional')}}</li> + <li>{{htmlelement('input')}}</li> + <li>{{htmlelement('select')}}</li> +</ul> 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 +--- +<p>{{HTMLSidebar}}</p> + +<p class="summary"><strong><code>size</code></strong> 属性は、 {{htmlelement('input')}} 要素の幅と {{htmlelement('select')}} 要素の高さを定義します。 <code>input</code> については、 <code>type</code> 属性が {{HTMLElement("input/text", "text")}} または {{HTMLElement("input/password", "password")}} の場合は文字数です。これは 0 以上の整数でなければなりません。 <code>size</code> が指定されていないか、無効な値が指定された場合、入力欄にサイズが宣言されず、そのフォームコントロールはユーザーエージェントに基づいた既定の幅になります。 CSS が幅に影響を与えるプロパティで要素を対象としている場合は、 CSS が優先されます。</p> + +<p><code>size</code> 属性は制約検証には影響しません。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>一部の入力型で <code>size</code> を指定すると、入力欄の幅を制御することができます。 select に size を追加すると、閉じた状態のときにいくつの選択肢が見えるかを定義します。</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>{{EmbedLiveSample('Examples', '100%', 200)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#attr-input-size', 'size attribute')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'input.html#attr-size-accept', 'size attribute')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.attribute.size")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code></li> + <li><code><a href="/en-US/docs/Web/HTML/Attributes/minlength">minlength</a></code></li> + <li><code><a href="/en-US/docs/Web/HTML/Attributes/pattern">pattern</a></code></li> +</ul> 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 +--- +<p>{{HTMLSidebar}}{{draft}}</p> + +<p><span class="seoSummary"><strong><code>step</code></strong> 属性は、が従わなければならない刻み値を指定する数値、またはキーワード <code>any</code> です。数値の入力型、たとえば {{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")}} 型に有効です。</span></p> + +<p><code>step</code> は、スピナーボタンを上下にクリックしたり、範囲上でスライダーを左右に動かしたり、異なる日付タイプを検証したりする際の<em>刻み間隔</em>を設定します。明示的に指定されていない場合、 <code>step</code> の既定値は、 <code>number</code> と <code>range</code> の場合は 1、日付/時刻入力型の場合は1単位 (分、週、月、日) になります。値は正の整数または浮動小数点数、または刻みが指定されておらず、 (<code><a href="/en-US/docs/Web/HTML/Attributes/min">min</a></code> や <code><a href="/en-US/docs/Web/HTML/Attributes/max">max</a></code> のような他の制約を除いて) すべての値が可能であることを意味する特別な値 <code>any</code> のいずれかでなければなりません。</p> + +<p><code>number</code> 入力型の既定の刻み値は 1 で、刻みの基底値が整数でない場合を<em>除き</em>、整数のみを入力することができます。 <code>time</code> の既定の刻み値は 1 秒で、 900 は15分と等しくなります。</p> + +<table class="standard-table"> + <caption>step の既定値</caption> + <thead> + <tr> + <th>入力型</th> + <th>構文</th> + <th>例</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("input/date", "date")}}</td> + <td>1 (日)</td> + <td><code class="brush: html"><input type="date" min="2019-12-25" step="1"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/month", "month")}}</td> + <td>1 (月)</td> + <td><code class="brush: html"><input type="month" min="2019-12" step="12"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/week", "week")}}</td> + <td>1 (週)</td> + <td><code class="brush: html"><input type="week" min="2019-W23" step="2"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/time", "time")}}</td> + <td>60 (分)</td> + <td><code class="brush: html"><input type="time" min="09:00" step="900"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/datetime-local", "datetime-local")}}</td> + <td>1 (日)</td> + <td> + <p><code class="brush: html"><input type="datetime-local" min="019-12-25T19:30" step="7"></code></p> + </td> + </tr> + <tr> + <td>{{HTMLElement("input/number", "number")}}</td> + <td>1</td> + <td><code class="brush: html"><input type="number" min="0" step="0.1" max="10"></code></td> + </tr> + <tr> + <td>{{HTMLElement("input/range", "range")}}</td> + <td>1</td> + <td><code class="brush: html"><input type="range" min="0" step="2" max="10"></code></td> + </tr> + </tbody> +</table> + +<p><code>any</code> が明示的に設定されていない場合、 <code>number</code>, 日付/時刻入力型, <code>range</code> の入力型で有効な値は、刻みの基底値と等しくなります。 - <code><a href="/ja/docs/Web/HTML/Attributes/min">min</a></code> の値と、それに step の値を <code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code> の値 (指定されている場合) まで加えていった値です。例えば、 <code><input type="number" min="10" step="2"></code> は10以上の偶数が有効です。省略された場合、 <code><input type="number"></code> は任意の整数が有効ですが、 4.2 のような小数は無効になります。これは <code>step</code> の既定値が 1 だからです。 4.2 を有効にするには、 <code>step</code> を <code>any</code>、 0.1, 0.2 などに設定するか、 min の値の小数点以下を .2 に、たとえば <code><input type="number" min="-5.2"></code> のようにする必要があります。</p> + +<h3 id="min_impact_on_step" name="min_impact_on_step">min の step への影響</h3> + +<p><code>min</code> と <code>step</code> の値は、 <code>step</code> 属性がない場合も含め、どの値が有効であるかを定義します。 <code>step</code> の既定値は <code>0</code> です。</p> + +<p>無効な入力の周囲に太く赤い境界を追加します。</p> + +<pre class="brush: css notranslate">input:invalid { + border: solid red 3px; +}</pre> + +<p>それから入力欄の最小値を 7.2 と定義し、 step 属性は省略しているので、既定値が 1 になります。</p> + +<pre class="brush: html notranslate"><input id="myNumber" name="myNumber" type="number" step="2" min="1.2"></pre> + +<p>有効な値は、 <code>1.2</code>, <code>3.2</code>, <code>5.2</code>, <code>7.2</code>, <code>9.2</code>, <code>11.2</code> などになります。整数や .2 が付く偶数は無効です。無効な値である場合、対応しているブラウザーは値が無効であることを表示します。数値スピナーがある場合は、 <code>1.2</code> 以上の有効な浮動小数点以下の値のみ表示されます。</p> + +<p>{{EmbedLiveSample("min_impact_on_step",200,55)}}</p> + +<div class="note"> +<p><strong>注:</strong> ユーザーが入力したデータが刻みの設定に従っていない場合、制約検証では無効とみなされ、 {{cssxref(":invalid")}} と {{cssxref(":out-of-range")}} の擬似クラスにマッチします。</p> +</div> + +<p>詳しくは<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">クライアント側制約検証</a>と {{domxref("ValidityState.stepMismatch", "stepMismatch")}} を参照してください。</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> + +<p>ユーザーがフォームに記入したり、個々のフォームコントロールを使用するのに役立つ説明を提供してください。必須の入力、任意の入力、データの書式、その他の関連する情報を示してください。 <code>max</code> 属性を使用する場合は、この最大値の要件がユーザーに理解されていることを確認してください。 {{htmlelement('label')}} 内で指示を提供すれば十分かもしれません。ラベルの外に指示を提供すれば、より柔軟な配置やデザインが可能になるので、 <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> または <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> を使用することを検討してください。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#the-min-and-max-attributes', 'min attribute')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'input.html#the-min-and-max-attributes', 'min attribute')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/HTML/Attributes/min">min</a></code></li> + <li><a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a></li> + <li>{{domxref('Constraint validation', "", 1)}} API</li> + <li>{{domxref('validityState.stepMismatch')}}</li> + <li>{{cssxref(':out-of-range')}}</li> + <li>{{htmlelement('input')}}</li> +</ul> 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 +--- +<p>HTML (<strong>Hypertext Markup Language</strong>) の要素は従来、 「ブロックレベル」要素または「インライン要素」の何れかに分類されてきました。これは表示特性であることから、現在は CSS において<a href="/ja/docs/Web/CSS/CSS_Flow_Layout">フローレイアウト</a>の中で定義されています。<span class="seoSummary">ブロックレベル要素は親要素 (コンテナー) の水平空間全体と、内容物の高さに等しい垂直空間を占有し、「ブロック」を生成します。</span>この記事では、 HTML のブロックレベル要素とは何か、<a href="/ja/docs/Web/HTML/Inline-level_elements">インラインレベル要素</a>とどのように異なるかを説明します。</p> + +<p>ブラウザーは一般的に、前後に新しい行を伴ってブロックレベル要素を表示します。これはボックスを積み上げたように見えます。</p> + +<div class="note"> +<p>ブロックレベル要素は常に新しい行から始まり、利用可能な全幅を取ります (できる限り左右に伸びます)。</p> +</div> + +<p>以下の例では、ブロックレベル要素が与える影響を示しています。</p> + +<h2 id="Block-level_Example" name="Block-level_Example">ブロックレベル要素</h2> + +<h3 id="HTML" name="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p></pre> + +<h3 id="CSS" name="CSS">CSS</h3> + +<pre class="brush: css notranslate">p { background-color: #8ABB55; } +</pre> + +<p>{{ EmbedLiveSample('Block-level_Example') }}</p> + +<h2 id="Usage" name="Usage">使用法</h2> + +<ul> + <li>ブロックレベル要素は {{HTMLElement("body")}} 要素内にのみ現れます。</li> +</ul> + +<h2 id="Block-level_vs._inline" name="Block-level_vs._inline">ブロックレベル要素とインライン要素</h2> + +<p>ブロックレベル要素とインライン要素の間には、二つの大きな違いがあります。</p> + +<dl> + <dt>包含モデル</dt> + <dd>一般的に、ブロックレベル要素はインライン要素と他のブロックレベル要素を含むことができます。この固有の構造による区別は、ブロック要素がインライン要素よりも「大きな」構造を構築するという考え方です。</dd> + <dt>既定の整形</dt> + <dd>既定では、ブロックレベル要素は新しい行から始まりますが、インライン要素は行内のどこからでも始めることができます。</dd> +</dl> + +<p>ブロックレベル要素とインライン要素という区分は、 HTML 4.01 までの仕様書で使用されていました。 HTML5 ではこの二つの区分が、より複雑な<a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a>の組み合わせに置き換えられました。「インライン」はおよそ<a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>のカテゴリに対応しているのに対し、「ブロックレベル」カテゴリは HTML5 のコンテンツカテゴリには直接対応しませんが、<em>「ブロックレベル」要素と「インライン」要素の組み合わせ</em>は HTML5 の<a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>に対応します。他にも、<a href="/ja/docs/Web/Guide/HTML/Content_categories#Interactive_content">対話型コンテンツ</a>などの他のカテゴリも存在します。</p> + +<h2 id="Elements" name="Elements">要素</h2> + +<p>「ブロックレベル」要素の一覧は以下のとおりです (ただし HTML5 の新規要素は、厳密には「ブロックレベル」であると定義されていません)。</p> + +<div class="threecolumns"> +<dl> + <dt>{{ HTMLElement("address") }}</dt> + <dd>連絡先情報です。</dd> + <dt>{{ HTMLElement("article") }}</dt> + <dd>記事コンテンツです。</dd> + <dt>{{ HTMLElement("aside") }}</dt> + <dd>本論から外れたコンテンツです。</dd> + <dt>{{ HTMLElement("blockquote") }}</dt> + <dd>長い (「ブロック」の) 引用です。</dd> + <dt>{{ HTMLElement("details") }}</dt> + <dd>折りたたみウィジェットです。</dd> + <dt>{{ HTMLElement("dialog") }}</dt> + <dd>ダイアログボックスです。</dd> + <dt>{{ HTMLElement("dd") }}</dt> + <dd>定義リストで用語を説明します。</dd> + <dt>{{ HTMLElement("div") }}</dt> + <dd>文書の一部です。</dd> + <dt>{{ HTMLElement("dl") }}</dt> + <dd>定義リストです。</dd> + <dt>{{ HTMLElement("dt") }}</dt> + <dd>定義語リストの用語です。</dd> + <dt>{{ HTMLElement("fieldset") }}</dt> + <dd>フィールドセットのラベルです。</dd> + <dt>{{ HTMLElement("figcaption") }}</dt> + <dd>図表のキャプションです。</dd> + <dt>{{ HTMLElement("figure") }}</dt> + <dd>キャプション ({{HTMLElement("figcaption")}} を参照) を伴うメディアコンテンツをグループ化します。</dd> + <dt>{{ HTMLElement("footer") }}</dt> + <dd>セクションまたはページのフッターです。</dd> + <dt>{{ HTMLElement("form") }}</dt> + <dd>入力フォームです。</dd> + <dt>{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}</dt> + <dd>見出しレベル 1-6 です。</dd> + <dt>{{ HTMLElement("header") }}</dt> + <dd>セクションまたはページのヘッダーです。</dd> + <dt>{{ HTMLElement("hgroup") }}</dt> + <dd>見出し情報をグループ化します。</dd> + <dt>{{ HTMLElement("hr") }}</dt> + <dd>水平線 (区切り線) です。</dd> + <dt>{{ HTMLElement("li") }}</dt> + <dd>リストの項目です。</dd> + <dt>{{ HTMLElement("main") }}</dt> + <dd>この文書で固有の中心的なコンテンツを含みます。</dd> + <dt>{{ HTMLElement("nav") }}</dt> + <dd>ナビゲーションのリンクを含みます。</dd> + <dt>{{ HTMLElement("ol") }}</dt> + <dd>番号付きリストです。</dd> + <dt>{{ HTMLElement("p") }}</dt> + <dd>段落です。</dd> + <dt>{{ HTMLElement("pre") }}</dt> + <dd>整形済みテキストです。</dd> + <dt>{{ HTMLElement("section") }}</dt> + <dd>ウェブページのセクションです。</dd> + <dt>{{ HTMLElement("table") }}</dt> + <dd>表です。</dd> + <dt>{{ HTMLElement("ul") }}</dt> + <dd>番号なしリストです。</dd> +</dl> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/Inline_elements">インライン要素</a></li> + <li>{{cssxref("display")}}</li> + <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">通常フローでのブロックおよびインラインレイアウト</a></li> +</ul> + +<div>{{QuickLinksWithSubpages("/ja/docs/Web/HTML/")}}</div> 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 +--- +<p><span class="seoSummary">HTML では画像に {{ htmlattrxref("crossorigin", "img") }} 属性を提供し、適切な {{Glossary("CORS")}} ヘッダーと組み合わせることで、 {{ HTMLElement("img") }} 要素で定義されている他のオリジンから読み込まれた画像を、 {{HTMLElement("canvas")}} の中で現在のオリジンから読み込まれた画像であるかのように扱うことができます。</span></p> + +<p><code>crossorigin</code> 属性の使い方については <a href="/ja/docs/Web/HTML/CORS_settings_attributes">CORS 設定属性</a>をご覧ください。</p> + +<h2 id="Security_and_tainted_canvases" name="Security_and_tainted_canvases">セキュリティと汚染されたキャンバス</h2> + +<p>キャンバスのビットマップ内のピクセルは様々なソース、例えば他のホストから受け取った画像や動画などから来ることもありますが、セキュリティの問題が発生することが避けられません。</p> + +<p>CORS による許可なしに他のオリジンから読み込んだ何らかのデータをキャンバスに描画すると、キャンバスは<ruby><strong>汚染</strong><rp> (</rp><rt>taint</rt><rp>) </rp></ruby>されてしまいます。汚染されたキャンバスは安全とみなされなくなり、そのキャンバスから画像データを取得しようとすると、例外が発生するでしょう。</p> + +<p>外部コンテンツの元が HTML の {{HTMLElement("img")}} または SVG の {{SVGElement("svg")}} 要素であった場合、キャンバスの内容を取得しようとすることは許可されていません。</p> + +<p>{{domxref("HTMLCanvasElement")}} または {{domxref("ImageBitMap")}} のどちらかとして取得した、元が同一オリジン規則に合わない画像から取得した外部のコンテンツは、キャンバスの内容を読み取ろうとするとブロックされます。</p> + +<p>汚染されたキャンバスで以下の呼び出しを行うと、エラーが発生します。</p> + +<ul> + <li>キャンバスのコンテキストに対する {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} の呼び出し</li> + <li>{{HTMLElement("canvas")}} 要素自身に対する {{domxref("HTMLCanvasElement.toBlob", "toBlob()")}} の呼び出し</li> + <li>キャンバスに対する {{domxref("HTMLCanvasElement.toDataURL", "toDataURL()")}} の呼び出し</li> +</ul> + +<p>キャンバスが汚染されていた場合にこれらの何れかを行うと、 <code>SecurityError</code> が発生します。これによって、外部のウェブサイトが許可なしに情報を引き出すために、画像を使用して個人的なデータを暴露することからユーザーを守ります。</p> + +<h2 id="Storing_an_image_from_a_foreign_origin" name="Storing_an_image_from_a_foreign_origin">異なるオリジンからの画像の保存</h2> + +<p>この例では、外部のオリジンから画像を受け取り、ローカルストレージに保存することを許可します。これを実装するには、コードを書くだけでなくそのウェブサイトのサーバーを構成する必要があります。</p> + +<h3 id="Web_server_configuration" name="Web_server_configuration">ウェブサーバーの構成</h3> + +<p>最初に必要なものは、画像をホスティングし、画像ファイルに対するオリジン間のアクセスを許可するために、 {{HTTPHeader("Access-Control-Allow-Origin")}} ヘッダーが構成されたサーバーが必要です。</p> + +<p><a href="https://httpd.apache.org/">Apache</a> を使用してサイトを提供してみましょう。 HTML5 Boilerplate の <a href="https://github.com/h5bp/server-configs-apache/blob/master/h5bp/cross-origin/images.conf">CORS 画像のための Apache サーバー構成ファイル</a>を考えてみましょう。</p> + +<pre class="brush: xml notranslate"><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></pre> + +<p>つまり、この構成はサーバーにグラフィックのファイル (拡張子が ".bmp", ".cur", ".gif", ".ico", ".jpg", ".jpeg", ".png", ".svg", ".svgz", ".webp" であるもの) を、インターネットのどこからでもオリジン間のアクセスができるようにします。</p> + +<h3 id="Implementing_the_save_feature" name="Implementing_the_save_feature">保存機能の実装</h3> + +<p>サーバーをオリジン間の画像の取得ができるように構成したので、画像がコードを実行しているところと同じドメインから提供されたものであるかのように、ユーザーが画像を<a href="/ja/docs/Web/API/Web_Storage_API">ローカルストレージ</a>に保存することができるようにするコードを書くことができます。</p> + +<p>鍵となるのは、 {{domxref("HTMLImageElement.crossOrigin", "crossOrigin")}} を画像が読み込まれる {{domxref("HTMLImageElement")}} に設定することで、 {{htmlattrxref("crossorigin")}} 属性を使用することです。これでブラウザーに画像データをダウンロードしようとするときにオリジン間のリクエストを命じます。</p> + +<h4 id="Starting_the_download" name="Starting_the_download">ダウンロードの開始</h4> + +<p>ダウンロードを始める (つまり、ユーザーが「ダウンロード」ボタンをクリックした時の) コードは次にようになります。</p> + +<pre class="brush: js notranslate">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; +}</pre> + +<p>ここではハードコーディングされた URL (<code>imageURL</code>) を使用していますが、どこからでも持ってくるのは簡単でしょう。画像のダウンロードを始めるために、 {{domxref("HTMLImageElement.Image", "Image()")}} コンストラクターを使用することで新しい {{domxref("HTMLImageElement")}} を生成します。それから画像は <code>crossOrigin</code> 属性を <code>"Anonymous"</code> (つまり、認証のないオリジン間の画像のダウンロード) に設定することで、オリジン間のダウンロードができるように構成します。 image 要素で {{event("load")}} イベントが発火した場合、つまり画像データが受信された場合のイベントリスナーを追加します。</p> + +<p>最後に、画像の {{domxref("HTMLImageElement.src", "src")}} 属性をダウンロードする画像に設定します。これがダウンロードを始める引き金になります。</p> + +<h4 id="Receiving_and_saving_the_image" name="Receiving_and_saving_the_image">画像の受信と保存</h4> + +<p>新規の画像のダウンロードを扱うコードは、 <code>imageReceived()</code> メソッドに見られます。</p> + +<pre class="brush: js notranslate">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); + } +}</pre> + +<p><code>imageReceived()</code> は <code>HTMLImageElement</code> 上でダウンロードした画像を受け取ったことを表す <code>"load"</code> イベントを扱うために呼び出されます。このイベントは、ダウンロードしたデータがすべて利用可能になったら一度呼び出されます。新しい {{HTMLElement("canvas")}} 要素を作成することから始まり、画像をデータ URL に変換して、キャンバスの二次元描画コンテキスト ({{domxref("CanvasRenderingContext2D")}}) がある変数 <code>context</code> へのアクセスを取得します。</p> + +<p>キャンバスの寸法は受信した画像に合うよう調整され、それから {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} を使って画像をキャンバスに描画します。それからキャンバスが文書に挿入され、画像が見えるようになります。</p> + +<p>実際に画像をローカルに保存する時になりました。このためにはウェブストレージ API のローカルストレージの仕組みを使用し、 {{domxref("Window.localStorage", "localStorage")}} グローバル変数を通してアクセスします。キャンバスのメソッド {{domxref("HTMLCanvasElement.toDataURL", "toDataURL()")}} を使用して画像を data:// URL が表す PNG 画像に変換し、それから {{domxref("Storage.setItem", "setItem()")}} を用いてローカルストレージに保存します。</p> + +<p>この例は Glitch で<a href="https://cors-image-example.glitch.me/">試用</a>または<a href="https://glitch.com/edit/#!/remix/cors-image-example">リミックス</a>することができます。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a class="external" href="http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html">Using Cross-domain images in WebGL and Chrome 13</a></li> + <li><a class="external" href="http://whatwg.org/html#attr-img-crossorigin">HTML Specification - the <code>crossorigin</code> attribute</a></li> + <li><a href="/ja/docs/Web/API/Web_Storage_API">Web Storage API</a></li> +</ul> + +<div>{{QuickLinksWithSubpages("/ja/docs/Web/HTML/")}}</div> 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 +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">一部の HTML 要素は日付や時刻の値を使用します。この記事ではこれらの値を指定する文字列の形式について説明しています。</span>このような形式を使用する要素には、ユーザーに日付、時刻、またはその両方を選択または指定させる {{HTMLElement("input")}} 要素の一部の形、同様に {{HTMLElement("ins")}} および {{HTMLElement("del")}} 要素で、 {{htmlattrxref("datetime", "ins")}} 属性によって内容の挿入または削除が行われた日付や日時を指定しているものなどがあります。</p> + +<p><code><input></code> については、 {{htmlattrxref("type", "input")}} の値で日付や時刻を表す文字列を含む {{htmlattrxref("value")}} を返すものは次の通りです。</p> + +<div class="twocolumns"> +<ul style="list-style-type: none; padding-left: 0;"> + <li><code><a href="/ja/docs/Web/HTML/Element/input/date">date</a></code></li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/datetime">datetime</a></code> {{deprecated_inline}}</li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/datetime-local">datetime-local</a></code></li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/month">month</a></code></li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/time">time</a></code></li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/week">week</a></code></li> +</ul> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<p>日付と時刻の文字列が HTML でどのように記述され解析されるかの複雑さを理解する前に、より一般的に使用される日付と時刻の文字列形式がどのように見えるかを理解するための例をいくつか示します。</p> + +<table class="standard-table"> + <caption>HTML の日付と時刻の文字列の例</caption> + <thead> + <tr> + <th scope="col">文字列</th> + <th colspan="2" scope="col">日付または時刻</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>2005-06-07</code></td> + <td>2005年6月7日</td> + <td><a href="/ja/docs/Web/HTML/Date_and_time_formats#Date_strings">[詳細]</a></td> + </tr> + <tr> + <td><code>08:45</code></td> + <td>午前8時45分</td> + <td><a href="/ja/docs/Web/HTML/Date_and_time_formats#Time_strings">[詳細]</a></td> + </tr> + <tr> + <td><code>08:45:25</code></td> + <td>午前8時45分25秒</td> + <td><a href="/ja/docs/Web/HTML/Date_and_time_formats#Time_strings">[詳細]</a></td> + </tr> + <tr> + <td><code>0033-08-04T03:40</code></td> + <td>33年8月4日午前3時40分</td> + <td><a href="/ja/docs/Web/HTML/Date_and_time_formats#Local_date_and_time_strings">[詳細]</a></td> + </tr> + <tr> + <td><code>1977-04-01T14:00:30</code></td> + <td>1977年4月1日午後2時30秒</td> + <td><a href="/ja/docs/Web/HTML/Date_and_time_formats#Local_date_and_time_strings">[詳細]</a></td> + </tr> + <tr> + <td><code>1901-01-01T00:00Z</code></td> + <td>UTC での1901年1月1日の夜半</td> + <td><a href="/ja/docs/Web/HTML/Date_and_time_formats#Global_date_and_time_strings">[詳細]</a></td> + </tr> + <tr> + <td><code>1901-01-01T00:00:01-04:00</code></td> + <td>米東部標準時の1901年1月1日の夜半から1秒後</td> + <td><a href="/ja/docs/Web/HTML/Date_and_time_formats#Global_date_and_time_strings">[詳細]</a></td> + </tr> + </tbody> +</table> + +<h2 id="Basics" name="Basics">基本</h2> + +<p>HTML 要素で使用される文字列に関する日付や時刻のさまざまな形式を見てみる前に、これらの定義方法についての基本的な事実をいくつか理解してしておくと役に立ちます。 HTML では、日付や時刻の文字列に {{interwiki("wikipedia", "ISO 8601")}} 標準の一種を使用します。 HTML 仕様書には、実際に ISO 8601 よりも詳細に文字列を解析するアルゴリズムが含まれており、日付と時刻の外見について微妙な違いがある可能性があるので、文字列が実際に HTML と互換性があることを確認するためには、使用している形式の説明を確認する価値があります。</p> + +<h3 id="Character_set" name="Character_set">文字セット</h3> + +<p>HTML において、日付と時刻は常に {{interwiki("wikipedia", "ASCII")}} 文字セットを使用した文字列です。</p> + +<h3 id="Year_numbers" name="Year_numbers">年</h3> + +<p>HTML で日付の文字列に使われる基本的な形式を単純化するために、仕様書ではすべての年をグレゴリオ暦 (または<strong>先発グレゴリオ暦</strong>) を使用して指定することを要求しています。ユーザーインターフェイスは他のカレンダーを使用した日付を入力することもできますが、元となる値は常にグレゴリオ暦を使用します。</p> + +<p>グレゴリオ暦は (同様のユリウス暦を置き換えた) 1582年まで作成されていませんでしたが、 HTML の目的上、グレゴリオ暦は紀元1年まで延長されています。古い日付については、それを考慮してください。</p> + +<p>HTML の日付の目的上、年は常に4桁以上の長さになります。1000年より前の年は、先頭にゼロ ("<code>0</code>") を入れますので、72年は <code>0072</code> と書かれます。紀元1年以前の年には対応していないので、 HTML は紀元前1年以前の年に対応していません。</p> + +<p>1年はふつうは365日ですが、<strong>{{anch("Leap years", "閏年")}}</strong>は例外です。</p> + +<h4 id="Leap_years" name="Leap_years">閏年</h4> + +<p><strong>閏年</strong>は400で割れる年、<em>または</em>4で割れる年で100で割れない年です。暦年の長さは通常365日ですが、実際には地球が太陽の周りを一周するのにおよそ365.2422日かかります。閏年は、惑星の軌道上の実際の位置に合わせてカレンダーを調整するのに役立ちます。4年ごとに1日を加えると、平均的な1年の長さは365.25日になり、これはほぼ正確に近くなります。</p> + +<p>アルゴリズムの調整 (年を400で割ることができる場合は閏年とし、年を100で割ることができる場合はうるう年としない) は、平均をさらに正しい日数 (365.2425日) に近づけるのに役立ちます。科学者たちは、残りの1万分の3日を処理し、地球の自転が自然に徐々に遅くなるのを補うために、閏秒をカレンダーに追加することがあります (真面目な話)。</p> + +<p><code>02</code> の月、すなわち2月は通常28日ですが、閏年には29日になります。</p> + +<h3 id="Months_of_the_year" name="Months_of_the_year">月</h3> + +<p>1年には12ヶ月があり、1から12まで番号が振られています。これらは常に2桁の ASCII 文字列、 <code>01</code> から <code>12</code> の範囲で表現されます。{{anch("Days of the month", "日")}}の節にある表で、対応する名前を (と日数) を確認してください。</p> + +<h3 id="Days_of_the_month" name="Days_of_the_month">日</h3> + +<p>1, 3, 5, 7, 8, 10, 12月は31日あります。 4, 6, 9, 11月は30日あります。 2月は多くの年では28日ですが、閏年には29日になります。これは下記の表で詳しく説明しています。</p> + +<table class="standard-table"> + <caption>月とその日数</caption> + <thead> + <tr> + <th scope="row">月の番号</th> + <th scope="col">名前 (英語)</th> + <th scope="col">日数</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">01</th> + <td>January</td> + <td>31</td> + </tr> + <tr> + <th scope="row">02</th> + <td>February</td> + <td>28 (閏年では29)</td> + </tr> + <tr> + <th scope="row">03</th> + <td>March</td> + <td>31</td> + </tr> + <tr> + <th scope="row">04</th> + <td>April</td> + <td>30</td> + </tr> + <tr> + <th scope="row">05</th> + <td>May</td> + <td>31</td> + </tr> + <tr> + <th scope="row">06</th> + <td>June</td> + <td>30</td> + </tr> + <tr> + <th scope="row">07</th> + <td>July</td> + <td>31</td> + </tr> + <tr> + <th scope="row">o8</th> + <td>August</td> + <td>31</td> + </tr> + <tr> + <th scope="row">09</th> + <td>September</td> + <td>30</td> + </tr> + <tr> + <th scope="row">10</th> + <td>October</td> + <td>31</td> + </tr> + <tr> + <th scope="row">11</th> + <td>November</td> + <td>30</td> + </tr> + <tr> + <th scope="row">12</th> + <td>December</td> + <td>31</td> + </tr> + </tbody> +</table> + +<h2 id="Week_strings" name="Week_strings">週の文字列</h2> + +<p>A week string specifies a week within a particular year. A <strong>valid week string</strong> consists of a valid {{anch("Year numbers", "year number")}}, followed by a hyphen character ("<code>-</code>", or U+002D), then the capital letter "<code>W</code>" (U+0057), followed by a two-digit week of the year value.</p> + +<p>The week of the year is a two-digit string between <code>01</code> and <code>53</code>. 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 <em>first Thursday of the year</em>. 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 <code>1953-W01</code>.</p> + +<p>A year has 53 weeks if:</p> + +<ul> + <li>The first day of the calendar year (January 1) is a Thursday <strong>or</strong></li> + <li>The first day of the year (January 1) is a Wednesday and the year is a {{anch("Leap years", "leap year")}}</li> +</ul> + +<p>All other years have 52 weeks.</p> + +<table class="standard-table"> + <caption>Examples of valid week strings</caption> + <thead> + <tr> + <th scope="col">Week string</th> + <th scope="col">Week and year (Date range)</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>2001-W37</code></td> + <td>Week 37, 2001 (September 10-16, 2001)</td> + </tr> + <tr> + <td><code>1953-W01</code></td> + <td>Week 1, 1953 (December 29, 1952-January 4, 1953)</td> + </tr> + <tr> + <td><code>1948-W53</code></td> + <td>Week 53, 1948 (December 27, 1948-January 2, 1949)</td> + </tr> + <tr> + <td><code>1949-W01</code></td> + <td>Week 1, 1949 (January 3-9, 1949)</td> + </tr> + <tr> + <td><code>0531-W16</code></td> + <td>Week 16, 531 (April 13-19, 531)</td> + </tr> + <tr> + <td><code>0042-W04</code></td> + <td>Week 4, 42 (January 21-27, 42)</td> + </tr> + </tbody> +</table> + +<p>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.</p> + +<h2 id="Month_strings" name="Month_strings">月の文字列</h2> + +<p>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."</p> + +<p>A <strong>valid month string</strong> consists of a valid {{anch("Year numbers", "year number")}} (a string of at least four digits), followed by a hyphen character ("<code>-</code>", or U+002D), followed by a two-digit numeric {{anch("Months of the year", "month number")}}, where <code>01</code> represents January and <code>12</code> represents December.</p> + +<table class="standard-table"> + <caption>有効な月の文字列の例</caption> + <thead> + <tr> + <th scope="col">月の文字列</th> + <th scope="col">年月</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>17310-09</code></td> + <td>September, 17310</td> + </tr> + <tr> + <td><code>2019-01</code></td> + <td>January, 2019</td> + </tr> + <tr> + <td><code>1993-11</code></td> + <td>November, 1993</td> + </tr> + <tr> + <td><code>0571-04</code></td> + <td>April, 571</td> + </tr> + <tr> + <td><code>0001-07</code></td> + <td>July, 1 C.E.</td> + </tr> + </tbody> +</table> + +<p>Notice that all years are at least four characters long; years that are fewer than four digits long are padded with leading zeroes.</p> + +<h2 id="Date_strings" name="Date_strings">日の文字列</h2> + +<p>A valid date string consists of a {{anch("Month strings", "month string")}}, followed by a hyphen character ("<code>-</code>", or U+002D), followed by a two-digit {{anch("Days of the month", "day of the month")}}.</p> + +<table class="standard-table"> + <caption>妥当な日の文字列の例</caption> + <thead> + <tr> + <th scope="col">月の文字列</th> + <th scope="col">日付全体</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>1993-11-01</code></td> + <td>November 1, 1993</td> + </tr> + <tr> + <td><code>1066-10-14</code></td> + <td>October 14, 1066</td> + </tr> + <tr> + <td><code>0571-04-22</code></td> + <td>April 22, 571</td> + </tr> + <tr> + <td><code>0062-02-05</code></td> + <td>February 5, 62</td> + </tr> + </tbody> +</table> + +<h2 id="Time_strings" name="Time_strings">時刻の文字列</h2> + +<p>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 <strong>valid time string</strong> minimally consists of a two-digit hour followed by a colon ("<code>:</code>", 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 ("<code>.</code>", U+002E) followed by one, two, or three digits.</p> + +<p>There are some additional basic rules:</p> + +<ul> + <li>The hour is always specified using the 24-hour clock, with <code>00</code> being midnight and 11 PM being <code>23</code>. No values outside the range <code>00</code>–<code>23</code> are permitted.</li> + <li>The minute must be a two-digit number between <code>00</code> and <code>59</code>. No values outside that range are allowed.</li> + <li>If the number of seconds is omitted (to specify a time accurate only to the minute), no colon should follow the number of minutes.</li> + <li>If specified, the integer portion of the number of seconds must be between <code>00</code> and <code>59</code>. You <em>cannot</em> specify leap seconds by using values like <code>60</code> or <code>61</code>.</li> + <li>If the number of seconds is specified and is an integer, it must not be followed by a decimal point.</li> + <li>If a fraction of a second is included, it may be from one to three digits long, indicating the number of milliseconds. It follows the decimal point placed after the seconds component of the time string.</li> +</ul> + +<table class="standard-table"> + <caption>妥当な時刻の文字列の例</caption> + <thead> + <tr> + <th scope="col">時刻の文字列</th> + <th scope="col">時刻</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>00:00:30.75</code></td> + <td>12:00:30.75 AM (30.75 seconds after midnight)</td> + </tr> + <tr> + <td><code>12:15</code></td> + <td>12:15 PM</td> + </tr> + <tr> + <td><code>13:44:25</code></td> + <td>1:44:25 PM (25 seconds after 1:44 PM)</td> + </tr> + </tbody> +</table> + +<h2 id="Local_date_and_time_strings" name="Local_date_and_time_strings">ローカル日時の文字列</h2> + +<p>A valid <code><a href="/ja/docs/Web/HTML/Element/input/datetime-local">datetime-local</a></code> string consists of a <code>date</code> string and a <code>time</code> string concatenated together with either the letter "<code>T</code>" 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.</p> + +<p>When you set the {{htmlattrxref("value", "input")}} of a <code>datetime-local</code> input, the string is <strong>normalized</strong> into a standard form. Normalized <code>datetime</code> strings always use the letter "<code>T</code>" 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 <code>:00</code>.</p> + +<table class="standard-table"> + <caption>Examples of valid <code>datetime-local</code> strings</caption> + <thead> + <tr> + <th scope="col">Date/time string</th> + <th scope="col">Normalized date/time string</th> + <th scope="col">Actual date and time</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>1986-01-28T11:38:00.01</code></td> + <td><code>1986-01-28T11:38:00.01</code></td> + <td>January 28, 1986 at 11:38:00.01 AM</td> + </tr> + <tr> + <td><code>1986-01-28 11:38:00.010</code></td> + <td><code>1986-01-28T11:38:00.01</code><sup><a href="#datetime-local-footnote1">1</a></sup></td> + <td>January 28, 1986 at 11:38:00.01 AM</td> + </tr> + <tr> + <td><code>0170-07-31T22:00:00</code></td> + <td><code>0170-07-31T22:00</code><sup><a href="#datetime-local-footnote2">2</a></sup></td> + <td>July 31, 170 at 10:00 PM</td> + </tr> + </tbody> +</table> + +<ol> + <li>Notice that <a id="datetime-local-footnote1" name="datetime-local-footnote1">after normalization</a>, this is the same string as the previous <code>datetime-local</code> string. The space has been replaced with the "<code>T</code>" character and the trailing zero in the fraction of a second has been removed to make the string as short as possible.</li> + <li>Note that the <a id="datetime-local-footnote2" name="datetime-local-footnote2">normalized form</a> of this date drops the "<code>:00</code>" 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.</li> +</ol> + +<h2 id="Global_date_and_time_strings" name="Global_date_and_time_strings">グローバル日時の文字列</h2> + +<p>A global date and time string specifies a date and time as well as the time zone in which it occurs. A <strong>valid global date and time string</strong> 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.</p> + +<h3 id="Time_zone_offset_string" name="Time_zone_offset_string">タイムゾーンオフセット文字列</h3> + +<p>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:</p> + +<ul> + <li>For dates after the establishment of {{interwiki("wikipedia", "Coordinated Universal Time")}} (UTC) in the early 1960s, the time base is <code>Z</code> and the offset indicates a particular time zone's offset from the time at the prime meridian at 0º longitude (which passes through the Royal Observatory at Greenwich, England).</li> + <li>For dates prior to UTC, the time base is instead expressed in terms of {{interwiki("wikipedia", "UT1")}}, which is the contemporary Earth solar time at the prime meridian.</li> +</ul> + +<p>The time zone string is appended immediately following the time in the date and time string. You can specify simply "<code>Z</code>" as the time zone offset string to indicate that the time is specified in UTC. Otherwise, the time zone string is constructed as follows:</p> + +<ol> + <li>A character indicating the sign of the offset: the plus character ("<code>+</code>", or U+002B) for time zones to the east of the prime meridian or the minus character ("<code>-</code>", or U+002D) for time zones to the west of the prime meridian.</li> + <li>A two-digit number of hours that the time zone is offset from the prime meridian. This value must be between <code>00</code> and <code>23</code>.</li> + <li>An optional colon ("<code>:</code>") character.</li> + <li>A two-digit number of minutes past the hour; this value must be between <code>00</code> and <code>59</code>.</li> +</ol> + +<p>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 <code>00</code>, <code>30</code>, or <code>45</code> 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.</p> + +<table class="standard-table"> + <caption>Examples of valid global date and time strings</caption> + <thead> + <tr> + <th scope="col">Global date and time string</th> + <th scope="col">Actual global date and time</th> + <th scope="col">Date and time at prime meridian</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>2005-06-07T00:00Z</code></td> + <td>June 7, 2005 at midnight UTC</td> + <td>June 7, 2005 at midnight</td> + </tr> + <tr> + <td><code>1789-08-22T12:30:00.1-04:00</code></td> + <td>August 22, 1789 at a tenth of a second past 12:30 PM Eastern Daylight Time (EDT)</td> + <td>August 22, 1789 at a tenth of a second past 4:30 PM</td> + </tr> + <tr> + <td><code>3755-01-01 00:00+10:00</code></td> + <td>January 1, 3755 at midnight Australian Eastern Standard Time (AEST)</td> + <td>December 31, 3754 at 2:00 PM</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("input")}}</li> + <li>{{HTMLElement("ins")}} and {{HTMLElement("del")}}: see the <code>datetime</code> attribute, which specifies either a date or a local date and time at which the content was inserted or deleted</li> + <li><a href="https://www.iso.org/iso-8601-date-and-time-format.html">The ISO 8601 specification</a></li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Numbers_and_dates">Numbers and Dates</a> in the <a href="/ja/docs/Web/JavaScript/Guide">JavaScript Guide</a></li> + <li>The JavaScript {{jsxref("Date")}} object</li> + <li>The <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat">Intl.DateTimeFormat</a></code> object for formatting dates and times for a given locale</li> +</ul> 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: '<a>: アンカー要素' +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 +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><a></code> 要素</strong> (<em>アンカー</em>要素) は、 <a href="#href"><code>href</code> 属性</a>を用いて、別のウェブページ、ファイル、メールアドレス、同一ページ内の場所、または他の URL へのハイパーリンクを作成します。</span> <code><a></code> の内容は、リンク先を示すもの<strong>であるべきです</strong>。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/a.html")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<dl> + <dt id="download">{{HTMLAttrDef("download")}}{{HTMLVersionInline(5)}}</dt> + <dd>リンクされた URL に移動するのではなく、保存するようユーザーに促します。値があってもなくても利用できます。</dd> + <dd> + <dl> + <dd>値を定義すると、ファイル名として提案します。 <code>/</code> および <code>\</code> はアンダースコアに変換されます。ファイルシステムがファイル名に禁止している文字は他にもあるかもしれませんので、ブラウザーは必要に応じてファイル名を調整します。</dd> + </dl> + + <ul> + <li>値がない場合は、ブラウザーは様々なソースから生成されたファイル名/拡張子を提案します。 + <ul> + <li>HTTP の {{HTTPHeader("Content-Disposition")}} ヘッダー</li> + <li>URL の<a href="/ja/docs/Web/API/URL/pathname">パス</a>の最後の部分</li> + <li>{{Glossary("MIME_type", "メディア種別")}} ({{HTTPHeader("Content-Type")}} ヘッダー、 <a href="/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data:</code> URL</a> の先頭、 <a href="/ja/docs/Web/API/URL/createObjectURL"><code>blob:</code> URL</a> の {{domxref("Blob.type")}} から)</li> + </ul> + </li> + </ul> + + <div class="note"><strong>注:</strong> + + <ul> + <li><code>download</code> は<a href="/ja/docs/Web/Security/Same-origin_policy">同一オリジンの URL</a> と、 <code>blob:</code>、 <code>data:</code> の各スキームでのみ動作します。</li> + <li> + <p><code>Content-Disposition</code> ヘッダーが <code>download</code> とは異なる情報を持っていた場合、動作結果は様々です。</p> + + <ul> + <li> + <p>ヘッダーが <code>filename</code> を指定した場合、そちらが <code>download</code> 属性で指定されたファイル名より優先されます。</p> + </li> + <li> + <p>ヘッダーが <code>inline</code> の処分を指定している場合、 Chrome や Firefox 82 以降のバージョンでは、属性を優先してダウンロードとして扱います。 82 以前のバージョンの Firefox では、ヘッダーが優先され、コンテンツがインラインで表示されます。</p> + </li> + </ul> + </li> + </ul> + </div> + </dd> + <dt id="href">{{HTMLAttrDef("href")}}</dt> + <dd> + <p>ハイパーリンクが指す先の URL です。リンクは HTTP ベースの URL に限定されません。ブラウザーが対応するあらゆるプロトコルを使用することができます。</p> + + <ul> + <li>ページの節を示すフラグメント URL</li> + <li>メディアファイルの一部を示すメディアフラグメント</li> + <li>電話番号を示す <code>tel:</code> URL</li> + <li>メールアドレスを示す <code>mailto:</code> URL</li> + <li>ウェブブラウザーがその他の URL スキームに対応していない可能性がある場合、ウェブサイトは {{domxref("Navigator/registerProtocolHandler", "registerProtocolHandler()")}} を使用することができます。</li> + </ul> + </dd> + <dt id="hreflang">{{HTMLAttrDef("hreflang")}}</dt> + <dd>リンク先の URL における自然言語のヒントです。組み込まれている機能はありません。許容される値は、 <a href="/ja/docs/Web/HTML/Global_attributes/lang"><code>lang</code> グローバル属性</a>と同じです。</dd> + <dt id="ping">{{HTMLAttrDef("ping")}}</dt> + <dd>空白で区切られた URL のリストです。リンクをたどるときに、ブラウザーは {{HTTPMethod("POST")}} リクエストを指定された URL に、 <code>PING</code> を本文として送信します。通常、トラッキングに使用されます。</dd> + <dt id="referrerpolicy">{{HTMLAttrDef("referrerpolicy")}}{{Experimental_Inline}}</dt> + <dd>リンクをたどるときにどれだけの<a href="/ja/docs/Web/HTTP/Headers/Referer">リファラー</a>を送信するかです。有効な値とその効果については {{HTTPHeader("Referrer-Policy")}} を参照してください。</dd> + <dt id="rel">{{HTMLAttrDef("rel")}}</dt> + <dd>リンク先の URL との関係を示す、空白で区切られた<a href="/ja/docs/Web/HTML/Link_types">リンク種別</a>のリストです。</dd> + <dt id="target">{{HTMLAttrDef("target")}}</dt> + <dd>リンク先の URL を表示する場所、 <em>閲覧コンテキスト</em> (タブ、ウィンドウ、<code><iframe></code>) の名前で指定します。以下のキーワードは URL の読み込み先について特別な意味を持ちます。 + <ul> + <li><code>_self</code>: 現在の閲覧コンテキストです。 (既定値)</li> + <li><code>_blank</code>: ふつうは新しいタブですが、新しいウィンドウを使用するようにブラウザーを設定できます。</li> + <li><code>_parent</code>: 現在の親の閲覧コンテキストです。親がない場合は、 <code>_self</code> と同じ振る舞いをします。</li> + <li><code>_top</code>: 最上位の閲覧コンテキスト (現在のコンテキストの祖先である "最上位" のコンテキスト) です。親の閲覧コンテキストがない場合は、 <code>_self</code> と同じ動作をします。</li> + </ul> + + <div class="note"> + <p><strong>注:</strong> <code>target</code> を使用する際は、<code>window.opener</code> API の悪用を避けるために <code>rel="noreferrer"</code> を追加してください。</p> + </div> + + <div class="note"> + <p><strong>注:</strong> 新しいブラウザー (例えば Firefox 79 以降) では、 <code>target="_blank"</code> を <code><a></code> 要素に設定すると、暗黙に <code>rel</code> の動作を <code>rel="noopener"</code> と設定したのと同様になります。</p> + </div> + </dd> + <dt id="type">{{HTMLAttrDef("type")}}</dt> + <dd>リンク先 URL の {{Glossary("MIME type", "MIME タイプ")}}の形式を表すヒントです。組み込まれている機能はありません。</dd> +</dl> + +<h3 id="Obsolete_attributes" name="Obsolete_attributes">廃止された属性</h3> + +<dl> + <dt>{{HTMLAttrDef("charset")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>リンク先 URL の{{Glossary("character encoding", "文字エンコーディング")}}のヒントでした。 + <div class="note"> + <p><strong>注:</strong> この属性は廃止されており、<strong>ページ作者が使用すべきではありません</strong>。リンク先の URL で HTTP の {{HTTPHeader("Content-Type")}} ヘッダーを使用してください。</p> + </div> + </dd> + <dt id="coords">{{HTMLAttrDef("coords")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd><a href="#shape"><code>shape</code> 属性</a>とともに使用されます。カンマ区切りの座標のリストです。</dd> + <dt id="name">{{HTMLAttrDef("name")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>ページ内のリンク先の場所を定義するアンカーで必要でした。 HTML 4.01 では、値がまったく同じであれば <code>id</code> 属性と <code>name</code> 属性を <code><a></code> 要素内で同時に使用できました。 + <div class="note"> + <p><strong>注:</strong> 代わりにグローバル属性の {{HTMLAttrxRef("id")}} を使用してください。</p> + </div> + </dd> + <dt id="rev">{{HTMLAttrDef("rev")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>この属性は、逆方向のリンクを指定します。 <a href="#rel"><code>rel</code> 属性</a>と逆の関係を定義していました。これはとても紛らわしいため、非推奨になりました。</dd> + <dt id="shape">{{HTMLAttrDef("shape")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>イメージマップ内のハイパーリンクの領域の形状です。 + <div class="note"><strong>注:</strong> イメージマップについては {{HTMLElement("area")}} 要素を使用してください。</div> + </dd> +</dl> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Interactive_content">対話型コンテンツ</a>, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Transparent_content_model">透過的コンテンツ</a>で、<a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a> (<a href="/ja/docs/Web/HTML/Content_categories#Interactive_content">対話型コンテンツ</a>を除く) または<a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を含むもの</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素、<a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a> を受け入れるすべての要素。ただし <a> 要素を除く。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td>{{ARIARole("link")}} (<code>href</code> 属性がある場合）。それ以外は <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td> + <p><code>href</code> 属性がある場合:</p> + + <ul> + <li>{{ARIARole("button")}}</li> + <li>{{ARIARole("checkbox")}}</li> + <li>{{ARIARole("menuitem")}}</li> + <li>{{ARIARole("menuitemcheckbox")}}</li> + <li>{{ARIARole("menuitemradio")}}</li> + <li>{{ARIARole("option")}}</li> + <li>{{ARIARole("radio")}}</li> + <li>{{ARIARole("switch")}}</li> + <li>{{ARIARole("tab")}}</li> + <li>{{ARIARole("treeitem")}}</li> + </ul> + + <p><code>href</code> 属性がない場合:</p> + + <ul> + <li>any</li> + </ul> + </td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{DOMxRef("HTMLAnchorElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Linking_to_an_absolute_URL" name="Linking_to_an_absolute_URL">絶対 URL へのリンク</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><a href="https://www.mozilla.com"> + Mozilla +</a></pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample('Linking_to_an_absolute_URL')}}</p> + +<h3 id="Linking_to_relative_URLs" name="Linking_to_relative_URLs">相対 URL へのリンク</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><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> +</pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">a { display: block; margin-bottom: 0.5em }</pre> +</div> + +<h4 id="Result_2" name="Result_2">結果</h4> + +<p>{{EmbedLiveSample('Linking_to_relative_URLs')}}</p> + +<h3 id="Linking_to_an_element_on_the_same_page" name="Linking_to_an_element_on_the_same_page">同じページの要素へのリンク</h3> + +<pre class="brush: html notranslate"><!-- <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> +</pre> + +<div class="blockIndicator note"> +<p><strong>注:</strong> <code>href="#top"</code> または空のフラグメント (<code>href="#"</code>) を使用すると、現在のページの先頭にリンクすることができると、 <a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-to-the-fragment-identifier">HTML 仕様書で定義されています</a>。</p> +</div> + +<h3 id="Linking_to_an_email_address" name="Linking_to_an_email_address">メールアドレスへのリンク</h3> + +<p>メールプログラムを開いて新しいメッセージを送るようにするリンクを作成するには、 <code>mailto:</code> スキームを使用してください。</p> + +<pre class="brush: html notranslate"><a href="mailto:nowhere@mozilla.org">nowhere にメールを送る</a></pre> + +<p>件名、本文、他の定義済みコンテンツを含めるなど、<code>mailto</code> URL スキームの詳細については、<a href="/ja/docs/Web/Guide/HTML/Email_links">電子メールのリンク</a>または {{RFC(6068)}} をご覧ください。</p> + +<h3 id="Linking_to_telephone_numbers" name="Linking_to_telephone_numbers">電話番号へのリンク</h3> + +<pre class="brush: html notranslate"><a href="tel:+49.157.0156">+49 157 0156</a> +<a href="tel:+1(555)5309">(555) 5309</a></pre> + +<p><code>tel:</code> リンクは端末の能力によって様々な動作をします。</p> + +<ul> + <li>携帯電話ではその番号にオートダイヤルします。</li> + <li>多くのオペレーティングシステムには、 Skype や FaceTime のように電話をかけるプログラムがあります。</li> + <li>ウェブサイトは {{domxref("Navigator/registerProtocolHandler", "registerProtocolHandler")}} によって <code>web.skype.com</code> などを用いて電話を掛けることができます。</li> + <li>他にも、連絡先の電話番号をしたり、他の端末へ電話番号を送信したりする動作があります。</li> +</ul> + +<p><code>tel</code> URL スキームについての構文、追加機能、その他の詳細について、詳しくは {{RFC(3966)}} をご覧ください。</p> + +<h3 id="Using_the_download_attribute_to_save_a_<canvas>_as_a_PNG" name="Using_the_download_attribute_to_save_a_<canvas>_as_a_PNG">download 属性を使用して <canvas> を PNG として保存する</h3> + +<p>{{HTMLElement("canvas")}} 要素の内容を画像として保存する場合は、 <code>download</code> 属性をもつリンクを作成し、キャンバスのデータを <code>data:</code> URLで示します。</p> + +<h4 id="Example_painting_app_with_save_link" name="Example_painting_app_with_save_link">例: 保存リンクのついた描画アプリ</h4> + +<h5 id="HTML_3">HTML</h5> + +<pre class="brush: html notranslate"><p>マウスボタンを押しっぱなしにして動かすと描画されます。 + <a href="" download="my_painting.png">絵をダウンロード</a> +</p> + +<canvas width="300" height="300"></canvas> +</pre> + +<h5 id="CSS_2">CSS</h5> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} +canvas { + background: #fff; + border: 1px dashed; +} +a { + display: inline-block; + background: #69c; + color: #fff; + padding: 5px 10px; +}</pre> + +<h5 id="JavaScript">JavaScript</h5> + +<pre class="brush: js notranslate">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() +); +</pre> + +<h5 id="Result_3" name="Result_3">結果</h5> + +<p>{{EmbedLiveSample('Example_painting_app_with_save_link', '100%', '400')}}</p> + +<h2 id="Security_and_privacy" name="Security_and_privacy">セキュリティとプライバシー</h2> + +<p><code><a></code> 要素は、ユーザーのセキュリティやプライバシーに影響を及ぼす可能性があります。詳細情報については <a href="/ja/docs/Web/Security/Referer_header:_privacy_and_security_concerns">Referer ヘッダー: プライバシーとセキュリティの考慮事項</a>を参照してください。</p> + +<p><code>target="_blank"</code> を <code>rel="noreferrer"</code> や <code>rel="noopener"</code> なしで使用すると、ウェブサイトが {{domxref("window.opener")}} API 搾取攻撃を受けやすくなります (<a href="https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/">vulnerability description</a>) が、新しい版のブラウザー (Firefox 79 以降など) では <code>target="_blank"</code> を設定すると、 <code>rel="noopener"</code> と同じ保護が提供されます。</p> + +<h2 id="Accessibility" name="Accessibility">アクセシビリティ</h2> + +<h3 id="Strong_link_text" name="Strong_link_text">強力なリンクテキスト</h3> + +<p>リンクの内容は、文脈から外れたとしても、<strong>リンクの行き先を示すべきです</strong>。</p> + +<h4 id="Inaccessible_weak_link_text" name="Inaccessible_weak_link_text">アクセシビリティに対応していない貧弱なリンクテキスト</h4> + +<p>よくある残念な間違いは、「ここをクリック」や「こちら」のみにリンクを設定していることです。</p> + +<pre class="brush: html example-bad notranslate"><p> + 私たちの製品については<a href="/products">こちら</a>をご覧ください。 +</p> +</pre> + +<h4 id="Strong_link_text_2" name="Strong_link_text_2">強力なリンクテキスト</h4> + +<p>幸いにも、これは簡単に直すことができ、しかもアクセシビリティに対応していないものより短くなります。</p> + +<pre class="brush: html example-good notranslate"><p> + <a href="/products">私たちの製品について</a>詳しくご覧ください。 +</p></pre> + +<p>支援ソフトウェアには、ページ上のすべてのリンクを一覧表示するショートカットがあります。しかし、強力なリンクテキストはすべてのユーザーに利点があります。「すべてのリンクの一覧」のショートカットは、視力のあるユーザーがページを素早く見渡す方法を模倣しています。</p> + +<h3 id="onclick_events" name="onclick_events">onclick イベント</h3> + +<p>よく見られる誤った使い方として、擬似的なボタンを作成するためにアンカー要素を使用し、 <strong>href</strong> を <code>#</code> または <code>javascript:void(0)</code> に設定してページの再読み込みを防ぎ、 <code>click</code> を待ち受けするようにするというものがあります。</p> + +<p>これらの偽の <code>href</code> 値は、リンクをコピーまたはドラッグしたり、新しいやウィンドウでリンクを開いたり、ブックマークしたり、 JavaScript の読み込み中、エラー状態、無効状態の場合などに予期しない動作を引き起こします。また、読み上げソフトなどの支援技術に対して誤った意味を伝えることもあります。</p> + +<p>代わりに {{HTMLElement("button")}} を使用してください。通常、<strong>アンカーは適切な URL を使用して移動するためだけに使用するべきです</strong>。</p> + +<h3 id="External_links_and_linking_to_non-HTML_resources" name="External_links_and_linking_to_non-HTML_resources">外部リンクおよび HTML 以外のリソースへのリンク</h3> + +<p>リンクを新しいタブやウィンドウで開くために <code>target="_blank"</code> を使用したり、ダウンロード元を指したりする場合は、リンクを起動したときに何が起こるかを示すようにしてください。</p> + +<p>弱視で読み上げ技術の支援の下に操作を行っている人や、認知に問題がある人は、予期せず新しいタブ、ウィンドウ、アプリケーションが開いたときに混乱するかもしれません。古いバージョンの読み上げソフトウェアは、この動作をアナウンスしません。</p> + +<h4 id="Link_that_opens_a_new_tabwindow" name="Link_that_opens_a_new_tabwindow">新しいタブやウィンドウを開くリンク</h4> + +<pre class="brush: html notranslate"><a target="_blank" href="https://www.wikipedia.org"> + Wikipedia (新しいウィンドウで開きます) +</a> +</pre> + +<h4 id="Link_to_a_non-HTML_resource" name="Link_to_a_non-HTML_resource">HTML 以外のリソースへのリンク</h4> + +<pre class="brush: html notranslate"><a href="2017-annual-report.ppt"> + 2017 年次レポート (PowerPoint) +</a> +</pre> + +<p>この種のリンクの動作を表すためにテキストの代わりにアイコンが使われている場合は、 {{HTMLAttrxRef("alt", "img", "alt のテキスト", "true") }}を確実に入れてください。</p> + +<pre class="brush: html notranslate"><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></pre> + +<ul> + <li><a href="https://webaim.org/techniques/hypertext/hypertext_links">WebAIM: Links and Hypertext - Hypertext Links</a></li> + <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">MDN / WCAG を理解する、ガイドライン 3.2"</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G200.html">G200: Opening new windows and tabs from a link only when necessary</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G201.html">G201: Giving users advanced warning when opening a new window</a></li> +</ul> + +<h3 id="Skip_links" name="Skip_links">スキップリンク</h3> + +<p><strong>スキップリンク</strong>は {{HTMLElement("body")}} コンテンツのできるだけ先頭に近い場所に配置されるリンクであり、ページのメインコンテンツの先頭にリンクします。通常、 CSS はスキップリンクがフォーカスを受けるまでは画面外へ隠します。</p> + +<pre class="notranslate"><body> + <a href="#content">メインコンテンツへスキップ</a> + + <header> + … + </header> + + <main id="content"> <!-- スキップリンクが辿り着く位置 --> +</pre> + +<pre class="brush: css notranslate">.skip-link { + position: absolute; + top: -3em; + background: #fff; +} +.skip-link:focus { + top: 0; +}</pre> + +<p>スキップリンクは、キーボードの利用者がヘッダーナビゲーションのような複数のページを通して繰り返されるコンテンツを回避できるようにするものです。</p> + +<p>スキップリンクは、スイッチ制御、音声コマンド、またはマウススティック/ヘッドワンドなどの補助技術を使用して操作する人にとって、反復的にリンクを移動する操作が煩わしい場合に特に便利です。</p> + +<ul> + <li><a href="https://webaim.org/techniques/skipnav/">WebAIM: "Skip Navigation" Links</a></li> + <li><a href="https://a11yproject.com/posts/2013-05-11-skip-nav-links/">How-to: Use Skip Navigation links</a></li> + <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN / WCAG を理解する ― ガイドライン 2.4 の解説</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">Understanding Success Criterion 2.4.1</a></li> +</ul> + +<h3 id="大きさと近接性">大きさと近接性</h3> + +<h4 id="Size" name="Size">大きさ</h4> + +<p>リンクのような対話的要素は、それらを簡単に起動できるように十分な大きさの領域を提供する必要があります。これは、運動制御に問題がある人や、タッチパネルなどの精度が低い入力手段を使用している人など、さまざまな人に役立ちます。最小の大きさは 44×44 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels">CSS ピクセル</a>が推奨されます。</p> + +<p>散文コンテンツのテキストのみのリンクは免除されますが、それでもハイパーリンクに十分なテキストがあることを確認して、操作しやすくなるようにしておくと良いでしょう。</p> + +<ul> + <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Understanding Success Criterion 2.5.5: Target Size</a></li> + <li><a href="http://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Target Size and 2.5.5</a></li> + <li><a href="https://a11yproject.com/posts/large-touch-targets/">Quick test: Large touch targets</a></li> +</ul> + +<h4 id="Proximity" name="Proximity">近接性</h4> + +<p>リンクのような対話的要素が互いに視覚的に近接して配置される場合は、それらを隔てる間隔を置いてください。間隔を空けることで、運動制御に問題のある人が誤って間違った対話的コンテンツを操作してしまうことを防ぐことができます。</p> + +<p>間隔は {{CSSxRef("margin")}} などの CSS プロパティを使用して作成することができます。</p> + +<ul> + <li><a href="https://axesslab.com/hand-tremors/">Hand tremors and the giant-button-problem</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Referrer Policy", "#referrer-policy-delivery-referrer-attribute", "referrer attribute")}}</td> + <td>{{Spec2("Referrer Policy")}}</td> + <td><code>referrerpolicy</code> 属性を追加。</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "textlevel-semantics.html#the-a-element", "<a>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "textlevel-semantics.html#the-a-element", "<a>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "struct/links.html#h-12.2", "<a>")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.a")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("link")}} は <code><a></code> と似ていますが、ユーザーには見えないメタデータへのハイパーリンクのためのものです。</li> + <li>{{CSSxRef(":link")}} は CSS の擬似クラスで、 <code><a></code> 要素に有効な valid <code>href</code> 属性がついている場合に一致します。</li> +</ul> 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: '<abbr>: 略語要素' +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 +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の略語要素 </strong>(<strong><code><abbr></code></strong>) は略語や頭字語を表します。任意で {{htmlattrxref("title")}} 属性で、略語の完全形または説明を提供することができます。</span> <code>title</code> 属性はこの完全な説明のみを含み、それ以外を含んではいけません。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Web/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみに対応しています。 {{htmlattrxref("title")}} 属性は <code><abbr></code> 要素と共に使用すると、特定の意味論的な意味を持ちます。これは完全な人間が読める形の説明または略語の完全形を含む<em>必要があります</em>。この文字列は、マウスポインターが要素の上で静止したとき、ブラウザーがツールチップとして表示することが良くあります。</p> + +<p>それぞれの <code><abbr></code>要素は他の独立しています。同じ文書内で他の省略形ではない表現の文字列に自動的に結びつかない場合は、 <code>title</code> を使用してください。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<h3 id="Typical_use_cases" name="Typical_use_cases">よくある使用例</h3> + +<p>必ずしもすべての略語を <code><abbr></code> でマークアップする必要はありません。しかし、有用な場合がいくつかあります。</p> + +<ul> + <li>略語が使用され、文書コンテンツの流れの外で完全形や定義を提供したい場合は、 <code><abbr></code> を適切な {{htmlattrxref("title")}} と共に使用してください。</li> + <li>読み手にとってなじみのない略語を定義する場合、用語を <code><abbr></code> を使用して表現し、 <code>title</code> 属性や行内文字列で定義を提供してください。</li> + <li>テキスト内に略語が存在し、意味の注釈が必要な場合、 <code><abbr></code> 要素は有用です。一方、これは整形やスクリプトの目的で使用することができます。</li> + <li><code><abbr></code> は {{HTMLElement("dfn")}} との組み合わせで、略語や頭字語の用語の定義を行なうことができます。以下の{{anch("Defining an abbreviation", "略語の定義")}}の例をご覧ください。</li> +</ul> + +<h3 id="Grammar_considerations" name="Grammar_considerations">文法的な考慮事項</h3> + +<p>{{interwiki("wikipedia", "数 (文法)", "文法的に数を表現する")}}言語（つまり、項目の数が文の文法に影響する言語）では、 <code><abbr></code> 要素内の <code>title</code> 属性で同じ文法的な数値を使用してください。これは、アラビア語のように2よりも大きい数の文法を持つ言語で特に重要ですが、英語にも当てはまります。</p> + +<h2 id="Default_styling" name="Default_styling">既定のスタイル</h2> + +<p>この要素の目的は単に作者の利便性のためであり、すべてのブラウザーが既定でこの要素を行内 ({{cssxref('display')}}<code>: inline</code>) で表示します。ただし、既定のスタイルはブラウザーによりさまざまです。</p> + +<ul> + <li>Internet Explorer など一部のブラウザーは、この要素を {{HTMLElement("span")}} 要素と同じスタイルを適用します。</li> + <li>Opera、Firefox などのブラウザーは、この要素の内容に点線の下線を引きます。</li> + <li>ごく一部のブラウザーは、ドットの下線を引くだけでなく、小さな大文字で表示するものがあります。本件を扱う CSS に {{cssxref('font-variant')}}<code>: none</code> のようなスタイルを追加することで、このようなスタイルを避けることができます。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Marking_up_an_abbreviation_semantically" name="Marking_up_an_abbreviation_semantically">意味論的な略語のマークアップ</h3> + +<p>完全形や説明を提供せずに略語をマークアップするには、この例にあるように、単に属性なしで <code><abbr></code> を使用してください。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><p><abbr>HTML</abbr> を使うのは楽しくて簡単です！</p></pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample("Marking_up_an_abbreviation_semantically")}}</p> + +<h3 id="Styling_abbreviations" name="Styling_abbreviations">略語の整形</h3> + +<p>この単純な例に見られるように、 CSS を使用して略語のために専用のスタイルを設定することができます。</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><p><abbr>CSS</abbr> を使うと、略語の整形ができます！</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">abbr { + font-variant: all-small-caps; +}</pre> + +<h4 id="Result_2" name="Result_2">結果</h4> + +<p>{{EmbedLiveSample("Styling_abbreviations")}}</p> + +<h3 id="Providing_an_expansion" name="Providing_an_expansion">完全形の提供</h3> + +<p>{{htmlattrxref("title")}} 属性を追加することで、略語や頭字語の完全形や定義を提供することができます。</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html notranslate"><p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big +time.</p></pre> + +<h4 id="Result_3" name="Result_3">結果</h4> + +<p>{{EmbedLiveSample("Providing_an_expansion")}}</p> + +<h3 id="Defining_an_abbreviation" name="Defining_an_abbreviation">略語の定義</h3> + +<p>こちらに示すように、 <code><abbr></code> と {{HTMLElement("dfn")}} を組み合わせることで、より正式に略語を定義することができます。</p> + +<h4 id="HTML_4">HTML</h4> + +<pre class="brush: html notranslate"><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></pre> + +<h4 id="Result_4" name="Result_4">結果</h4> + +<p>{{EmbedLiveSample("Defining_an_abbreviation", 600, 120)}}</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> + +<p>頭字語や略語を、ページ内で最初に使われたときに完全な形で綴ることは、特に中身が技術用語や産業用語であった場合に、人々が理解するのに有益です。</p> + +<h4 id="Example" name="Example">例</h4> + +<pre class="brush: html notranslate"><p>JavaScript Object Notation (<abbr>JSON</abbr>) は軽量のデータ交換形式です。</p> +</pre> + +<p>これは特に、コンテンツで説明している用語や概念になじみがない人、その言語の初心者、認知症の人などに有益です。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-abbr-element', '<abbr>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-abbr-element', '<abbr>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.abbr")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/Learn/HTML/Element/abbr"><code><abbr></code> 要素の使用方法</a></li> +</ul> 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: <acronym> +slug: Web/HTML/Element/acronym +tags: + - Element + - HTML + - 'HTML:Flow content' + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/acronym +--- +<div>{{obsolete_header}}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>HTML の頭字語要素 (<code><acronym></code>) は、頭字語または略語の単語を構成する文字の並びを明示することができます。</p> + +<div class="note"> +<p><strong>使用上の注意:</strong> この要素は HTML5 にて廃止されており、使用するべきではありません。代わりに {{HTMLElement("abbr")}} 要素を使用してください。</p> +</div> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は、全ての要素に共通の<a class="new " href="/ja/docs/HTML/global_attributes" rel="internal" title="HTML/global attributes">グローバル属性</a>のみを持ちます。</p> + +<h2 id="DOM_Interface" name="DOM_Interface">DOM インターフェイス</h2> + +<p>この要素は {{domxref('HTMLElement')}} インターフェイスを提供します。</p> + +<div class="note"><strong>実装上の注意: </strong> Gecko 1.9.2 まで、 Firefox はこの要素に {{domxref('HTMLSpanElement')}} インターフェイスを実装していました。</div> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:html notranslate"><p>The <acronym title="World Wide Web">WWW</acronym> is only a component of the Internet.</p> +</pre> + +<h2 id="Default_styling" name="Default_styling">既定のスタイル</h2> + +<p>このタグの目的は単に作者の利便性のためのものであり、ブラウザーによって既定のスタイルは様々です。</p> + +<ul> + <li>Internet Explorer などの一部のブラウザーでは、この要素に {{HTMLElement("span")}} 要素と異なるスタイル付けは行いません。</li> + <li>Opera、Firefox、Chrome などでは、この要素の内容に点線の下線が付きます。</li> + <li>ブラウザーによっては点線の下線を引くだけでなく、スモールキャップスにします。このスタイルを抑制するには、 CSS で {{cssxref('font-variant')}}<code>: none</code> などをつけます。</li> +</ul> + +<p>よって、ウェブの作者は大体既定のスタイルに依存しないことが強く推奨されます。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ACRONYM', '<acronym>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.acronym")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>HTML の {{htmlelement("abbr")}} 要素</li> +</ul> + +<div>{{HTMLRef}}</div> 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: '<address>: 連絡先要素' +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 +--- +<div>{{HTMLRef}}</div> + +<p id="Summary"><span class="seoSummary"><strong>HTML の <code><address></code> 要素</strong>は、これを含んでいる HTML が個人、団体、組織の連絡先を提供していることを示します。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/address.html", "tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p><code><address></code> 要素の内容で提供される連絡先情報は、その文脈で適切であればどのような形でもよく、必要とされるあらゆる形の連絡先情報 (住所、 URL、メールアドレス、電話番号、ソーシャルメディアのアカウント、地理上の座標など) を含めることができます。 <code><address></code> には連絡先情報が参照する個人、団体、組織の名前を含めてください。</p> + +<p><code><address></code> は様々な文脈で使用することができ、ページヘッダーでビジネスの連絡先を提供したり、 {{HTMLElement("article")}} 要素の中で <code><address></code> を含めることで、記事の著者を識別したりすることができます。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>、<a href="/ja/docs/Web/HTML/Content_categories#Palpable_content">知覚可能コンテンツ</a></td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>。ただし <code><address></code> 要素をネストしたり、見出しコンテンツ ({{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")}} 要素を入れたりしてはなりません。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a> を受け入れるすべての要素。ただし <code><address></code> 要素は除く (論理的な対称性の原理によれば、親要素である <code><address></code> タグは <code><address></code> 要素を入れ子にすることができません。したがって、同じ <code><address></code> のコンテンツの親に <code><address></code> タグを置くこともできません)。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}。 Gecko 2.0 (Firefox 4) より前では {{domxref("HTMLSpanElement")}} インターフェイスが提供されます。</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">グローバル属性</a>のみがあります。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<ul> + <li><code><address></code> 要素は文書の著者の連絡先情報を表すだけのために使われる傾向があります。しかし最新の仕様書では、定義が更新され、様々な宛先をマークアップするために使用できるようになりました。</li> + <li>この要素には、公開日 ({{HTMLElement("time")}} によるもの) のような連絡先情報以外の情報を含めるべきではありません。</li> + <li>一般的に、 <code><address></code> 要素は現在のセクションに {{HTMLElement("footer")}} 要素があれば、その中に配置することができます。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例は <code><address></code> 要素で記事の編集者の連絡先情報を示す使い方を示します。</p> + +<pre class="brush: html notranslate"> <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> +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Examples", "300", "200")}}</p> + +<p>この要素は文字列を {{HTMLElement("i")}} 要素や {{HTMLElement("em")}} 要素と同じ既定のスタイルで描画しますが、付加的な意味情報として連絡先情報を扱うときに <code><address></code> を使用するのがより適切でしょう。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-address-element', '<address>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-address-element', '<address>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.6', '<address>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.address")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>他のセクション関連要素: {{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")}}</li> + <li class="last"><a class="deki-ns current" href="/ja/docs/Sections_and_outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">HTML5 文書のセクションとアウトライン</a></li> +</ul> 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: '<applet>: 埋め込み Java アプレット要素' +slug: Web/HTML/Element/applet +tags: + - Element + - HTML + - Java + - Obsolete + - Reference + - Web + - applet +translation_of: Web/HTML/Element/applet +--- +<p>{{HTMLRef}}{{Obsolete_Header}}</p> + +<div class="blockIndicator warning"> +<p><code><applet></code> 要素は <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1279218">Gecko 56</a> および <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=470301">Chrome 47</a> で廃止されました。</p> + +<p>また、<a href="https://bugs.webkit.org/show_bug.cgi?id=157926">WebKit</a> および <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11946645/">Edge</a> では廃止が検討されています。</p> +</div> + +<p><span class="seoSummary">廃止された <strong>HTML の アプレット要素</strong> (<strong><code><applet></code></strong>) は文書に Java アプレットを埋め込みます。この要素は {{HTMLElement("object")}} にとって代わり、廃止されました。</span></p> + +<p>ウェブでの Java アプレットの使用は非推奨です。多くのブラウザーが、すでに Java プラグインを含むプラグイン使用の対応をやめています。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, <a href="/ja/docs/HTML/Content_categories#Embedded_content">埋め込みコンテンツ</a>, 対話型コンテンツ, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>0個以上の {{HTMLElement("param")}} 要素、その後で <a href="/ja/docs/Web/HTML/Content_categories#Transparent_content_model">透過的コンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>なし。開始タグと終了タグの両方が必須です。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/HTML/Content_categories#Embedded_content">埋め込みコンテンツ</a>を受け付けるすべての要素</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{DOMxRef("HTMLAppletElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<dl> + <dt>{{HTMLAttrDef("align")}}</dt> + <dd>この属性は、周囲にあるコンテンツとの関係として、ページ上でアプレットを配置するために使用します。 HTML 4.01 仕様では <code>bottom</code>, <code>left</code>, <code>middle</code>, <code>right</code>, and <code>top</code> という値を定義していましたが、 Microsoft および Netscape は <code>absbottom</code>, <code>absmiddle</code>, <code>baseline</code>, <code>center</code>, <code>texttop</code> にも対応していました。</dd> + <dt>{{HTMLAttrDef("alt")}}</dt> + <dd>この属性は、Java をサポートしないブラウザーが代わりに表示する説明文を与えます。ページ作者は、<code><applet></code> 要素に囲まれた内容物も代替テキストとして表示される可能性があることにも留意すべきです。</dd> + <dt>{{HTMLAttrDef("archive")}}</dt> + <dd>この属性は、アーカイブ化あるいは圧縮されたバージョンのアプレットとアプレットに関連づけられた class ファイルを参照するもので、これらはダウンロード時間の削減に役立ちます。</dd> + <dt>{{HTMLAttrDef("code")}}</dt> + <dd>この属性は、読み込んで実行するアプレットの class ファイルの URL を指定します。アプレットのファイル名は .class 拡張子で識別します。code で指定した URL は、<code>codebase</code> 属性に相対的となるでしょう。</dd> + <dt>{{HTMLAttrDef("codebase")}}</dt> + <dd>この属性は、code 属性で参照するアプレットの .class ファイルを保存しているディレクトリの絶対または相対 URL を与えます。</dd> + <dt>{{HTMLAttrDef("datafld")}}</dt> + <dd>Internet Explorer 4 以上がサポートするこの属性は、バインドされたデータを提供するデータソースオブジェクトの列名を指定します。この属性は、Java アプレットに渡すさまざまな {{HTMLElement("param")}} 要素を指定するために使用できました。</dd> + <dt>{{HTMLAttrDef("datasrc")}}</dt> + <dd><code>datafld</code> と同様に、この属性は Internet Explorer 4 のデータバインディングで使用します。これは、アプレットに関連づけられた {{HTMLElement("param")}} 要素にバインドしたデータを提供するデータソースオブジェクトの ID を示します。</dd> + <dt>{{HTMLAttrDef("height")}}</dt> + <dd>この属性は、アプレットが必要とする高さをピクセル数で指定します。</dd> + <dt>{{HTMLAttrDef("hspace")}}</dt> + <dd>この属性は、アプレットの両側に確保する水平方向の追加スペースを指定します。</dd> + <dt>{{HTMLAttrDef("mayscript")}}</dt> + <dd>Netscape の実装ではこの属性で、ドキュメント内に埋め込んだスクリプト言語のプログラムでアプレットにアクセスできます。</dd> + <dt>{{HTMLAttrDef("name")}}</dt> + <dd>この属性はアプレットを他のリソース、特にスクリプトから識別できるようにするため、アプレットに名前をつけます。</dd> + <dt>{{HTMLAttrDef("object")}}</dt> + <dd>この属性は、アプレットのシリアライズ表現の URL を指定します。</dd> + <dt>{{HTMLAttrDef("src")}}</dt> + <dd>この属性は Internet Explorer 4 以上向けに定義されたもので、アプレットに関係するファイルの URL を指定します。意味や使用法は不明瞭であり、また HTML 標準に含まれていません。</dd> + <dt>{{HTMLAttrDef("vspace")}}</dt> + <dd>この属性は、アプレットの上下に確保する垂直方向の追加スペースを指定します。</dd> + <dt>{{HTMLAttrDef("width")}}</dt> + <dd>この属性は、アプレットが必要とする幅をピクセル数で指定します。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><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> +</pre> + +<p>{{EmbedLiveSample("Example", "100%", 300)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML5.2", "obsolete.html#the-applet-element", "<applet>")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "obsolete.html#the-applet-element", "<applet>")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "obsolete.html#the-applet-element", "<applet>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>廃止</td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "struct/objects.html#h-13.4", "<applet>")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td>{{HTMLElement("object")}} に置き換えて非推奨化</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.applet")}}</p> + +<h2 id="Notes" name="Notes">注</h2> + +<p>W3C 仕様書では <code><applet></code> の使用を勧めておらず、 {{HTMLElement("object")}} 要素を勧めています。 HTML 4.01 strict の定義ではこの要素を非推奨としており、 HTML5 では完全に廃止されました。</p> 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: <area> +slug: Web/HTML/Element/area +tags: + - Content + - Element + - HTML + - 'HTML:Flow content' + - 'HTML:Phrasing content' + - Multimedia + - Reference + - Web +translation_of: Web/HTML/Element/area +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><area></code> 要素</strong>は、イメージマップの中でクリック可能な領域をあらかじめ定義します。<dfn>イメージマップ</dfn>では、画像上の幾何学的な領域を{{Glossary("Hyperlink", "ハイパーテキストリンク")}}と関連付けすることができます。</p> + +<p>この要素は {{HTMLElement("map")}} 要素内だけで使用します。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/area.html", "tabbed-taller")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>、<a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>なし。これは{{Glossary("empty element", "空要素")}}です。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>開始タグは必須。終了タグを記述してはなりません。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素。 <code><area></code> 要素は祖先が {{HTMLElement("map")}} でなければなりませんが、直接の親要素である必要はありません。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td>{{htmlattrxref("href", "area")}} 属性がある場合は {{ARIARole("link")}}、そうでなければ<a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLAreaElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{htmlattrdef("alt")}}</dt> + <dd>画像を表示しないブラウザーが代わりに表示するテキスト文字列です。テキストの内容は、代替テキストを表示しない場合に画像が提供する選択肢と同じものをユーザーに与えるような表現にすべきです。この属性は {{htmlattrxref("href", "area")}} 属性が使用されている場合のみ必要です。</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("coords")}}</dt> + <dd><code>coords</code> 属性は <code><area></code> の寸法、形状、配置における <code><a href="#attr-shape">shape</a></code> 属性の座標を詳述します。</dd> + <dd> + <ul> + <li><code>rect</code>: 値は <code><var>x1,y1,x2,y2</var></code> です。値は長方形の左上と右下の座標を指定します。<br> + 例: <code><area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="Mozilla"></code> この例では長方形の左上の隅が 0,0、右下の隅が 253,27 になります。</li> + <li><code>circle</code>: 値は <code><var>x,y,radius</var></code> です。値は円の中央の座標と半径を指定します。<br> + 例: <code><area shape="circle" coords="130,136,60" href="#" target="_blank" alt="MDN"></code></li> + <li><code>poly</code>: 値は <code><var>x1,y1,x2,y2,..,xn,yn</var></code> です。値は多角形の角の座標を指定します。先頭と末尾の座標が同じではない場合、ブラウザーは最後に座標を追加して多角形を閉じます。</li> + <li><code>default</code>: 領域全体を定義します。</li> + </ul> + 値は CSS ピクセルの数です。</dd> + <dt>{{htmlattrdef("download")}}</dt> + <dd>この属性がある場合は、作者はハイパーリンクをリソースのダウンロードに使用すると考えていることを示します。{{htmlattrxref("download", "a")}} 属性の詳しい説明は {{HTMLElement("a")}} をご覧ください。</dd> + <dt>{{htmlattrdef("href")}}</dt> + <dd>この領域のハイパーリンクの宛先です。この値は有効な URL です。この属性は省略可能です。その場合、その <code><area></code> 要素はハイパーリンクを提供しません。</dd> + <dt>{{htmlattrdef("hreflang")}}</dt> + <dd>リンク先のリソースの言語を示します。許容される値は <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt" title="Tags for Identifying Languages">BCP47</a> で定めています。この属性は、 {{htmlattrxref("href", "area")}} 属性を与える場合にのみ使用してください。</dd> + <dt>{{htmlattrdef("ping")}}</dt> + <dd>ハイパーリンクがフォローされたときに、ブラウザーから {{HTTPMethod("POST")}} リクエストが本文を <code>PING</code> として (バックグラウンドで) 送信する URL を空白で区切ったリストで記述します。ふつうはトラッキング用に使用します。</dd> + <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> + <dd>リソースを読み込む際にどのリファラーを使用するかを示す文字列です: + <ul> + <li>"<code>no-referrer</code>" は、<code>Referer:</code> ヘッダーを送信しないことを表します。</li> + <li>"<code>no-referrer-when-downgrade</code>" は、TLS (HTTPS) を使用せずに生成元へナビゲートする場合は <code>Referer:</code> ヘッダーを送信しないことを表します。これは他にポリシーが定められていない場合の、ユーザーエージェントの既定の動作です。</li> + <li>"<code>origin</code>" は、ページの生成元 (大まかにいえばスキーム、ホスト、ポート) をリファラーとすることを表します。</li> + <li>"<code>origin-when-cross-origin</code>" は、異なる生成元へのナビゲートではリファラーをスキーム、ホスト、ポートに制限します。同一生成元へのナビゲートでは、リファラーのパスも含めます。</li> + <li>"<code>unsafe-url</code>" は、リファラーに生成元とパスを含めることを表します (ただし、フラグメント、パスワード、ユーザー名は含めません)。これは生成元やパスの情報が TLS で保護されたリソースからセキュアでない生成元へ漏えいしますので、安全ではありません。</li> + </ul> + </dd> + <dt>{{htmlattrdef("rel")}}</dt> + <dd>{{htmlattrxref("href", "area")}} 属性を含むアンカーで、この属性は、対象オブジェクトとリンクオブジェクトの関係を指定します。属性値は、空白で区切られた<a href="/ja/docs/Web/HTML/Link_types">リンク種別の値</a>のリストです。値とその意味は、文書作成者にとって意味を持つかもしれない何らかの権威によって登録されています。他に何も与えられていない場合の既定の関係は void です。この属性は {{htmlattrxref("href", "area")}} 属性が存在する場合にのみ使用してください。</dd> + <dt>{{htmlattrdef("shape")}}</dt> + <dd>関連づけたホットスポットの形状です。 HTML の仕様書では、長方形の領域を定義する値 <code>rect</code>、円形の領域を定義する値 <code>circle</code>、多角形を定義する値 <code>poly</code>、定義済みの領域以外のすべての領域を示す値 <code>default</code> を定めています。</dd> + <dd>多くのブラウザー、特に Internet Explorer 4 以降では <code>circ</code>, <code>polygon</code>, <code>rectangle</code> を {{htmlattrxref("shape", "area")}} の有効な値として対応していますが、これらの値は標準外です。</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd>キーワードまたは作成者が定義した名前で、リンクされたリソースを表示する{{Glossary("browsing context", "閲覧コンテキスト")}}です。</dd> + <dd>以下のキーワードは特別な意味を持っています。 + <ul> + <li><code>_self</code> (既定値): 現在の閲覧コンテキストのリソースを表します。</li> + <li><code>_blank</code>: 新しい名前の付けられていない閲覧コンテキストのリソースを表します。</li> + <li><code>_parent</code>: 現在のページがフレーム内にある場合は、現在の親の閲覧コンテキストのリソースを表します。親要素がない場合、 <code>_self</code> と同じ動作をします。</li> + <li><code>_top</code>: 最上位の閲覧コンテキストのリソースを表します (現在の閲覧コンテキストの祖先にあたり、それ以上親のない要素です)。親要素がない場合、 <code>_self</code> と同じ動作をします。</li> + </ul> + </dd> + <dd>この属性は {{htmlattrxref("href", "area")}} 属性が存在する場合にのみ使用してください。 + <div class="note"> + <p><strong>注:</strong> 新しいブラウザー (例えば Firefox 79 以降) では、 <code>target="_blank"</code> を <code><area></code> 要素に設定すると、暗黙に同じ動作をする <code>rel</code> を <code>rel="noopener"</code> と設定します。</p> + </div> + </dd> +</dl> + +<h3 id="Deprecated_attributes" name="Deprecated_attributes">非推奨の属性</h3> + +<dl> + <dt>{{htmlattrdef("name")}} {{deprecated_inline}}</dt> + <dd>古いブラウザーでスクリプトから使用できるようにするため、クリッカブル領域に名前を定義します。</dd> + <dt>{{htmlattrdef("nohref")}} {{deprecated_inline}}</dt> + <dd>関連づけた領域にハイパーリンクがないことを示します。 + <div class="note"> + <p><strong>注:</strong> HTML5 では <code>href</code> 属性を省略すれば十分です。</p> + </div> + </dd> + <dt>{{htmlattrdef("tabindex")}} {{deprecated_inline}}</dt> + <dd>ブラウザーのタブオーダーにおける、定義した領域の位置を示す数値です。この属性は HTML5 のグローバル属性です。</dd> + <dt>{{htmlattrdef("type")}} {{deprecated_inline}}</dt> + <dd>この属性は使用しないでください。ブラウザーは無視します (HTML 仕様書の W3C 5.3 では有効なものとして定義していますが、<a href="https://html.spec.whatwg.org/multipage/#the-area-element">正規の HTML 仕様書</a>では定義していておらず、どのユーザーエージェントでも効果がありません。)</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html notranslate"><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"></pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{ EmbedLiveSample('Examples', 360, 160) }}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrerpolicy attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td><code>referrerpolicy</code> 属性を追加。</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-area-element', '<area>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics-embedded-content.html#the-area-element', '<area>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '<area>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.area")}}</p> 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: '<article>: 記事コンテンツ要素' +slug: Web/HTML/Element/article +tags: + - Element + - HTML + - HTML sections + - Reference + - Web +translation_of: Web/HTML/Element/article +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><article></code> 要素</strong>は文書、ページ、アプリケーション、サイトなどの中で自己完結しており、 (集合したものの中で) 個別に配信や再利用を行うことを意図した構成物を表します。</span>例えば、フォーラムの投稿、雑誌や新聞の記事、ブログの記事、商品カード、ユーザーが投稿したコメント、対話型のウィジェットやガジェット、その他の独立したコンテンツの項目が含まれます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/article.html", "tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>ある文書に複数の記事を含めることができます。たとえば、読者がスクロールするたびに各記事のテキストを次々と表示するブログでは、各記事は <code><article></code> 要素に含まれ、おそらくその中に1つ以上の <code><section></code> があります。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Sectioning_content">区分コンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Palpable_content">知覚可能コンテンツ</a></td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素。なお、 <code><article></code> 要素を {{HTMLElement("address")}} 要素の子孫にしてはいけません。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Article_Role">article</a></code></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("main")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">グローバル属性</a>のみがあります。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<ul> + <li>それぞれの <code><article></code> は、子要素として見出し (<a href="/ja/docs/Web/HTML/Element/Heading_Elements"><code><h1></code>-<code><h6></code></a> 要素) を含むなどの方法で識別できるようにするべきです。</li> + <li><code><article></code> 要素を入れ子にした場合、内側の要素は外側の要素に関する記事を表します。例えばブログ投稿へのコメントは、ブログ投稿を表す <code><article></code> 内へ入れ子にした <code><article></code> 要素にできます。</li> + <li><code><article></code> 要素の著者情報は {{HTMLElement("address")}} 要素で提供できますが、入れ子にされた <code><article></code> 要素には適用されません。</li> + <li><code><article></code> 要素の発行日時は、 {{HTMLElement("time")}} 要素の {{htmlattrxref("datetime", "time")}} 属性で示すことができます。なお、 <em>{{HTMLElement("time")}} 要素の {{htmlattrxref("pubdate", "time")}} 属性は {{glossary("W3C")}} {{glossary("HTML5")}} 標準から外されました。</em></li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html notranslate"><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> +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sections.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '<article>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.article")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>他のセクション関連要素: {{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")}}</li> + <li><a href="/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">HTML のセクションとアウトラインの使用</a></li> +</ul> 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: '<aside>: 余談要素' +slug: Web/HTML/Element/aside +tags: + - Element + - HTML + - HTML セクション + - HTML5 + - 'HTML:フローコンテンツ' + - 'HTML:区分コンテンツ' + - 'HTML:知覚可能コンテンツ' + - Reference + - Web + - ウェブ + - リファレンス + - 要素 +translation_of: Web/HTML/Element/aside +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><aside></code> 要素</strong>は、文書のメインコンテンツと間接的な関係しか持っていない文書の部分を表現します。</span>サイドバーやコールアウトボックスなどを表現するためによく使われます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/aside.html", "tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただけるのであれば、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Flow_content">フローコンテンツ</a>、<a href="/ja/docs/Web/Guide/HTML/Content_categories#Sectioning_content">区分コンテンツ</a>、<a href="/ja/docs/Web/Guide/HTML/Content_categories#Palpable_content">知覚可能コンテンツ</a></td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Flow_content">フローコンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素。<code><aside></code> 要素は {{HTMLElement("address")}} 要素の子孫要素として配置してはならない。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Complementary_role">complementary</a></code></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>{{ARIARole("feed")}}, {{ARIARole("none")}}, {{ARIARole("note")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}, {{ARIARole("search")}}</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみがあります。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<ul> + <li>文章中の括弧書きについては、文章の主要な流れに属するものであるといえますので、これをタグ付けするために <code><aside></code> 要素を使用しないでください。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_<aside>" name="Using_<aside>"><aside> の使用</h3> + +<p>このれは <code><aside></code> を使用して記事の中のある段落をマークアップします。この段落は記事の主要な内容と間接的な関係しかありません。</p> + +<pre class="brush: html"><article> + <p> + The Disney movie <cite>The Little Mermaid</cite> was + first released to theatres in 1989. + </p> + <aside> + <p> + The movie earned $87 million during its initial release. + </p> + </aside> + <p> + More info about the movie... + </p> +</article></pre> + +<p>{{EmbedLiveSample("Examples")}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-aside-element', '<aside>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-aside-element', '<aside>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<div>{{Compat("html.elements.aside")}}</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>他の区分化関連要素: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li> + <li><a href="/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">HTML のセクションとアウトラインの使用</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Complementary_role">ARIA: Complementary role</a></li> +</ul> diff --git a/files/ja/web/html/element/audio/index.html b/files/ja/web/html/element/audio/index.html new file mode 100644 index 0000000000..def7381fd2 --- /dev/null +++ b/files/ja/web/html/element/audio/index.html @@ -0,0 +1,419 @@ +--- +title: '<audio>: 埋め込み音声要素' +slug: Web/HTML/Element/audio +tags: + - HTML + - HTML 埋め込みコンテンツ + - HTML5 + - 'HTML:フローコンテンツ' + - 'HTML:埋め込みコンテンツ' + - 'HTML:対話型コンテンツ' + - 'HTML:知覚可能コンテンツ' + - 'HTML:記述コンテンツ' + - Media + - Reference + - Web + - ウェブ + - マルチメディア + - メディア + - 要素 +translation_of: Web/HTML/Element/audio +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><audio></code> 要素</strong>は、文書内に音声コンテンツを埋め込むために使用します。この要素は、1つまたは複数の音源を含むことができます。音源は <code>src</code> 属性または {{HTMLElement("source")}} 要素を使用して表し、ブラウザーがもっとも適切な音源を選択します。また、 {{domxref("MediaStream")}} を使用してストリーミングメディアを指し示すこともできます。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/audio.html","tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>上記の例は、 <code><audio></code> 要素の単純な使用方法を示しています。 {{htmlelement("img")}} 要素と同様の方法で、埋め込みたいメディアへのパスを <code>src</code> 属性に設定します。他にも自動再生や繰り返しを行うかどうか、ブラウザーの既定のオーディオコントロールを表示したいかどうか、などの情報を指定する属性を含めることができます。</p> + +<p>開始および終了タグ <code><audio></audio></code> の中のコンテンツは、この要素に対応してないブラウザーで代替として表示されます。</p> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{htmlattrdef("autoplay")}}</dt> + <dd>論理属性。指定された場合、音声ファイル全体のダウンロードの完了を待たずに、再生可能な状態になった時点で即座にコンテンツの再生が始まります。 + <div class="note"><strong>メモ</strong>: 自動的に音声 (あるいは音声トラックを含む動画) を再生するサイトはユーザーにとって不快な体験になる可能性がありますので、可能な限り避けるべきです。自動再生機能が必須である場合は、オプトイン (ユーザーが明示的に有効化することを求める) にするべきです。ただし、ユーザーの制御下で後からソースを設定するメディア要素を作成するときは、この方法が役に立つでしょう。<a href="/ja/docs/Web/Media/Autoplay_guide">自動再生ガイド</a>には autoplay の正しい使い方についての追加情報があります。</div> + </dd> + <dt>{{htmlattrdef("controls")}}</dt> + <dd>この属性が指定された場合、ブラウザーは再生・一時停止、音量、シークの各機能を制御するコントロールを表示します。</dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>この列挙型の属性は、関連する音声ファイルを取得する際に CORS を使用するかを示します。<a href="/ja/docs/CORS_Enabled_Image">CORS が有効なリソース</a> は、<em>汚染</em>されることなく {{HTMLElement("canvas")}} 要素で再利用できます。次の値が使用できます: + <dl> + <dt><code>anonymous</code></dt> + <dd>資格情報を伴わずにオリジン間リクエストを実行します。すなわち、 Cookie や X.509 証明書がない <code>Origin:</code> HTTP ヘッダーを送信する、あるいは HTTP ベーシック認証を行いません。サーバーが元のサイトに信用情報を付与しない場合 (<code>Access-Control-Allow-Origin:</code> HTTP ヘッダーの設定なし)、画像が<em>汚染</em>され、その使用も制限されます。</dd> + <dt><code>use-credentials</code></dt> + <dd>資格情報を伴ってオリジン間リクエストを実行します。すなわち、Cookie や X.509 証明書を伴う <code>Origin:</code> HTTP ヘッダーを送信する、あるいは HTTP ベーシック認証を行います。サーバーが元のサイトに信用情報を付与しない場合 (<code>Access-Control-Allow-Credentials:</code> HTTP ヘッダーに関わらず)、画像が<em>汚染</em>され、その使用も制限されます。</dd> + </dl> + この属性が存在しない場合、リソースは CORS リクエストなしで (すなわち、 <code>Origin:</code> HTTP ヘッダーなしで) 取得され、 {{HTMLElement('canvas')}} 要素での汚染されない使用が妨げられます。これが無効な場合、列挙型のキーワードに <strong>anonymous</strong> が指定されたものとして扱われます。追加の情報は <a href="/ja/docs/Web/HTML/CORS_settings_attributes">CORS 設定属性</a> を参照してください。</dd> + <dt>{{htmlattrdef("currentTime")}}</dt> + <dd> + <p><code>currentTime</code> を読み取ると、倍精度浮動小数点値で、現在の音声の再生位置を秒単位で示す値を返します。音声のメタデータが利用できない場合—この場合はメディアの開始時刻や長さを知ることができなくなるので— <code>currentTime</code> は再生が始まる時刻を示したり、変更したりすることができます。そうでない場合は、 <code>currentTime</code> を設定すると現在の再生位置を指定された時刻に設定し、メディアが現在読み込まれていれば、その位置にシークします。</p> + + <p>音声がストリーミングである場合は、 {{Glossary("user agent", "ユーザーエージェント")}} はデータがメディアバッファーからあふれた場合に一部を受け取ることができません。他にも音声が0秒から始まらないメディアタイムラインを持っている場合もあり、 <code>currentTime</code> をそれより前の時刻に設定すると失敗します。例えば、音声のメディアタイムラインが12時間目に始まる場合、 <code>currentTime</code> を 3600 に設定すると、現在の再生位置をメディアの開始位置の前に設定しようとするので、失敗します。 {{domxref("HTMLMediaElement.getStartDate", "getStartDate()")}} メソッドは、メディアのタイムラインの参照フレームの開始点を特定するのに使用することができます。</p> + </dd> + <dt>{{htmlattrdef("disableRemotePlayback")}} {{experimental_inline}}</dt> + <dd>論理属性で、有線 (HDMI, DVI, など) や無線技術 (Mirachast, Chromecast, DLNA, AirPlay, など) で接続された機器のリモート再生機能を無効にするために使用します。詳しくは<a href="https://www.w3.org/TR/remote-playback/#the-disableremoteplayback-attribute">この提案中の仕様書</a>をご覧ください。 + <p class="note">Safari では、代替として <a href="https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/AirPlayGuide/OptingInorOutofAirPlay/OptingInorOutofAirPlay.html"><code>x-webkit-airplay="deny"</code></a> を使用することができます。</p> + </dd> + <dt>{{htmlattrdef("duration")}} {{ReadOnlyInline}}</dt> + <dd>倍精度浮動小数点値で、メディアのタイムライン上の音声の長さ (合計の長さ) を秒単位で示します。要素上にメディアがない場合や、メディアが有効でない場合は、返値は <code>NaN</code> になります。メディアの終わりが分からない場合 (長さの分からないライブストリーミング、ウェブラジオ、 <a href="/ja/docs/Web/API/WebRTC_API">WebRTC</a> から来たメディアなど)、この値は <code>+Infinity</code> になります。</dd> + <dt>{{htmlattrdef("loop")}}</dt> + <dd>論理型の属性です。指定された場合、音声プレイヤーは音声の末尾に達すると、自動的に先頭に戻ります。</dd> + <dt>{{htmlattrdef("muted")}}</dt> + <dd>論理型の属性で、音声の既定の設定を示します。この属性を設定すると、初期状態が消音になります。既定値は <code>false</code> です。</dd> + <dt>{{htmlattrdef("preload")}}</dt> + <dd>列挙型の属性で、ユーザーに取って最良の結果をもたらすと作者が考えていることのヒントをブラウザーに伝えるためのものです。以下の値のうちひとつを持つことができます。 + <ul> + <li><code>none</code>: 音声を事前に読み込むべきではないことを示します。</li> + <li><code>metadata</code>: 音声のメタデータ (例えば、長さ) を読み込みます。</li> + <li><code>auto</code>: ユーザーが音声ファイルを使用しないと思われる場合でも、ファイル全体をダウンロードしてよいことを示します。</li> + <li><em>空文字列</em>: これは <code>auto</code> 値と同義です。</li> + </ul> + + <p>既定値はブラウザーによって異なります。仕様書では <code>metadata</code> にするよう助言しています。</p> + + <div class="note"><strong>使用上のメモ:</strong> + + <ul> + <li><code>autoplay</code> 属性は <code>preload</code> より優先します。<code>autoplay</code> を指定すると、言うまでもなくブラウザーは音声を再生するためにダウンロードを始めなければなりません。</li> + <li>仕様書は、ブラウザーがこの属性の値に従うことを強制していません。これは単なるヒントです。</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>埋め込む音声コンテンツの URL を指定します。なお、この属性は <a href="/ja/docs/HTTP_access_control">HTTP access controls</a> に従います。この属性を省略し、audio 要素の子要素として配置した {{htmlelement("source")}} 要素とその src 属性を用いて指定することも可能であり、その場合、これを複数設置することで、異なるタイプの複数の代替コンテンツを配置することが可能となります。</dd> +</dl> + +<h2 id="Events" name="Events">イベント</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">イベント名</th> + <th scope="col">発生する時</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("audioprocess")}}</td> + <td>{{DOMxRef("ScriptProcessorNode")}} の入力バッファが処理可能になった。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.canplay_event", 'canplay')}}</td> + <td>ブラウザーがメディアを再生できるようになったものの、追加のバッファリングのために停止することなくメディアの最後まで再生するには、充分なデータが読み込まれていないとみられる。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.canplaythrough_event", 'canplaythrough')}}</td> + <td>ブラウザーがコンテンツのバッファリングのために停止することなく最後までメディアを再生することができるとみられる。</td> + </tr> + <tr> + <td>{{Event("complete")}}</td> + <td>{{DOMxRef("OfflineAudioContext")}} のレンダリングが終了した。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.durationchange_event", 'durationchange')}}</td> + <td><code>duration</code> 属性が更新された。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.emptied_event", 'emptied')}}</td> + <td>メディアが空になった。例えば、このイベントはメディアがすでに読み込まれた (または部分的に読み込まれた) 状態で、再読み込みのために <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal"><code>load()</code></a> メソッドが呼び出された場合など。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.ended_event", 'ended')}}</td> + <td>メディアの末尾に達したために再生が停止した。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.loadeddata_event", 'loadeddata')}}</td> + <td>メディアの最初のフレームが読み込み終わった。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.loadedmetadata_event", 'loadedmetadata')}}</td> + <td>メタデータを読み込んだ。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.pause_event", 'pause')}}</td> + <td>再生が一時停止した。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.play_event", 'play')}}</td> + <td>再生が始まった。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.playing_event", 'playing ')}}</td> + <td>データがなくなったために一時停止または遅延した後で、再生の再開の準備ができた。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.ratechange_event", 'ratechange')}}</td> + <td>再生レートが変更された。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.seeked_event", 'seeked')}}</td> + <td><em>シーク</em>操作が完了した。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.seeking_event", 'seeking')}}</td> + <td><em>シーク</em>操作が始まった。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.stalled_event", 'stalled')}}</td> + <td>ユーザーエージェントがメディアを読み込もうとしているが、データが予期せずに入ってこない。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.suspend_event", 'suspend')}}</td> + <td>メディアデータの読み込みが停止した。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.timeupdate_event", 'timeupdate')}}</td> + <td><code>currentTime</code> 属性で示されている時刻が更新された。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.volumechange_event", 'volumechange')}}</td> + <td>音量が変更された。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.waiting_event", 'waiting')}}</td> + <td>一時的なデータの不足により、再生が停止した。</td> + </tr> + </tbody> +</table> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<p>ブラウザーはすべてが同じ<a href="/ja/docs/Web/Media/Formats/Containers">ファイル形式</a>および<a href="/ja/docs/Web/Media/Formats/Audio_codecs">音声形式</a>に対応しているわけではありません。内部に含められた {{htmlelement("source")}} 要素で複数のソースを提供することができ、ブラウザーは理解できる最初のものを使用します。</p> + +<pre class="brush: html"><audio controls> + <source src="myAudio.mp3" type="audio/mpeg"> + <source src="myAudio.ogg" type="audio/ogg"> + <p>Your browser doesn't support HTML5 audio. Here is + a <a href="myAudio.mp4">link to the audio</a> instead.</p> +</audio></pre> + +<p>私たちは大量の綿密な<a href="/ja/docs/Web/Media/Formats">メディアファイル形式</a>と<a href="/ja/docs/Web/Media/Formats/Audio_codecs">その中で使用することができる音声コーデックのガイド</a>を提供しています。また、<a href="/ja/docs/Web/Media/Formats/Video_codecs">動画で対応しているコーデックのガイド</a>も利用することができます。</p> + +<p>他の使用上のメモ:</p> + +<ul> + <li><code>controls</code> 属性を指定しない場合、音声プレイヤーはブラウザーの既定のコントロールを含めません。 JavaScript と {{domxref("HTMLMediaElement")}} API を使用して、独自のカスタムコントロールを作成することができます。</li> + <li>音声コンテンツを詳細に制御できるように、 <code>HTMLMediaElement</code> はさまざまな<a href="/ja/docs/Web/Guide/Events/Media_events">イベント</a>を発行します。これは音声の読み込みプロセスを監視する方法も提供するので、エラーを監視したり、再生や捜査を始めることができるようになったことを検出したりすることができます。</li> + <li><a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a> を使用すると、既存の音声ファイルのストリーミングではなく、 JavaScript コードから音声ストリームを直接生成および操作することもできます。</li> + <li><code><audio></code> 要素は <code><video></code> 要素と同じような方法で字幕を持つことができません。 Ian Devlin による <a href="https://www.iandevlin.com/blog/2015/12/html5/webvtt-and-audio">WebVTT and Audio</a> で、役立つ情報や作業があります。</li> +</ul> + +<p>HTML の <code><audio></code> 要素の使用に関する良い情報源として、<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">映像および音声コンテンツ</a>の初心者向けチュートリアルがあります。</p> + +<h3 id="Styling_with_CSS" name="Styling_with_CSS">CSS でのスタイル付け</h3> + +<p><code><audio></code> 要素は既定では固有の視覚的な出力を持ちませんが、 <code>controls</code> 属性が指定されると、ブラウザーの標準のコントロールが表示されます。</p> + +<p>既定のコントロールは {{cssxref("display")}} の値に既定で <code>inline</code> を持っており、テキストブロックなどの中に置いておきたい場合でない限り、配置やレイアウトを制御しやすくするために、値を <code>block</code> に設定することは、多くの場合は良い考えです。</p> + +<p>既定のコントロールは、ブロックを単位としてて影響するプロパティでスタイル付けすることができるので、 {{cssxref("border")}} や {{cssxref("border-radius")}}, {{cssxref("padding")}}, {{cssxref("margin")}} 等を指定することができます。しかし、音声プレイヤー内の個別のコンポーネントはスタイル付けすることができず (例えば、ボタンの寸法やアイコンの変更、フォントの変更など)、またコントロールはブラウザーごとに異なります。</p> + +<p>ブラウザー間で一貫したルック＆フィールを実現するには、カスタムコントロールを作成する必要があるでしょう。これは好きな方法でマークアップおよびスタイル付けをすることができ、 JavaScript と {{domxref("HTMLMediaElement")}} API を使用することで、これらの機能を結合することができます。</p> + +<p><a href="/ja/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">動画プレイヤーのスタイル付けの基本</a>は、便利なスタイル付けテクニックをいくつか紹介しています。これは <code><video></code> の文脈で書かれたものですが、多くは <code><audio></code> にも同様に適用されます。</p> + +<h3 id="Detecting_track_addition_and_removal" name="Detecting_track_addition_and_removal">トラックの追加と削除の検出</h3> + +<p>{{event("addtrack")}} および {{event("removetrack")}} イベントを用いると、 <code><audio></code> 要素でトラックが追加されたり削除されたりしたことを検出することができます。しかし、これらのイベントは <code><audio></code> 要素自身に直接送信されるわけではありません。代わりに、 <code><audio></code> の {{domxref("HTMLMediaElement")}} 内にある、要素に追加されたトラックの種類に対応するトラックリストオブジェクトに送信されます。</p> + +<dl> + <dt>{{domxref("HTMLMediaElement.audioTracks")}}</dt> + <dd>メディア要素のオーディオトラックのすべてを含む {{domxref("AudioTrackList")}} です。 <code>addtrack</code> のリスナーをこのオブジェクトに追加すると、新しいオーディオトラックが要素に追加された時に通知を受け取ることができます。</dd> + <dt>{{domxref("HTMLMediaElement.videoTracks")}}</dt> + <dd>この {{domxref("VideoTrackList")}} オブジェクトに <code>addtrack</code> リスナーを追加することで、要素に動画トラックが追加されたときに通知を受け取ることができます。</dd> + <dt>{{domxref("HTMLMediaElement.textTracks")}}</dt> + <dd>この {{domxref("TextTrackList")}} オブジェクトに <code>addtrack</code> リスナーを追加することで、要素にテキストトラックが追加されたときに通知を受け取るkとができます。</dd> +</dl> + +<div class="note"> +<p><strong>メモ:</strong> <code><audio></code> 要素であっても、動画やテキストトラックリストを持っており、インターフェイスの実装の使用が奇妙に見えますが、実際に動画を表示するために使用することができます。</p> +</div> + +<p>例えば、次のようなコードで <code><audio></code> 要素で音声トラックが追加されたり削除されたりしたときを検出することができます。</p> + +<pre class="brush: js">var elem = document.querySelector("audio"); + +elem.audioTrackList.onaddtrack = function(event) { + trackEditor.addTrack(event.track); +}; + +elem.audioTrackList.onremovetrack = function(event) { + trackEditor.removeTrack(event.track); +}; +</pre> + +<p>このコードは音声トラックが要素で追加および削除されることを監視し、トラックエディターの論理関数を呼び出すことで、エディターにおける利用できるトラックの一覧でトラックを登録や削除を行います。</p> + +<p>{{event("addtrack")}} および {{event("removetrack")}} イベントを監視するには、 {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使用することもできます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Basic_usage" name="Basic_usage">基本的な使用法</h3> + +<p>以下の例は <code><audio></code> 要素で OGG ファイルを再生する単純な例を示しています。ページで許可されていれば、 <code>autoplay</code> 属性によって自動再生され、代替コンテンツも含んでいます。</p> + +<pre class="brush: html"><!-- シンプルな音声再生 --> +<audio + src="AudioTest.ogg" + autoplay> + あなたのブラウザーは <code>audio</code> 要素に対応していません。 +</audio> +</pre> + +<p>いつ自動再生が動作するのか、自動再生を使用する許可の取得方法、いつどのように自動再生を使用するのが適切であるのかについては、<a href="/ja/docs/Web/Media/Autoplay_guide">自動再生ガイド</a>をご覧ください。</p> + +<h3 id="<audio>_element_with_<source>_element" name="<audio>_element_with_<source>_element"><source> 要素を伴う <audio> 要素</h3> + +<p>この例では、埋め込まれる音声トラックを、 <code><audio></code> 要素の直接の <code>src</code> 属性ではなく、内部の <code><source></code> 要素のものを使用して指定しています。これは <code>type</code> 属性の中でファイルの MIME タイプを含めることで、ブラウザーがそのファイルを再生できるかどうかを知ることができ、そのファイル再生できないときに時間を浪費しません。</p> + +<pre class="brush: html"><audio controls> + <source src="foo.wav" type="audio/wav"> + あなたのブラウザーは <code>audio</code> 要素に対応していません。 +</audio> +</pre> + +<h3 id="<audio>_with_multiple_<source>_elements" name="<audio>_with_multiple_<source>_elements">複数の <source> 要素を持つ <audio></h3> + +<p>この例は複数の <code><source></code> 要素を含んでいます。ブラウザーは最初の source 要素 (Opus) を読み込もうとします。再生することができれば、2番目 (vorbis) と3番目 (mp3) の読み込みは行われません。</p> + +<pre class="brush: html"><audio controls> + <source src="foo.opus" type="audio/ogg; codecs=opus"/> + <source src="foo.ogg" type="audio/ogg; codecs=vorbis"/> + <source src="foo.mp3" type="audio/mpeg"/> +</audio></pre> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> + +<p>台詞のある音声には、実際にコンテンツを説明する字幕と<ruby>文字化情報<rp> (</rp><rt>transcript</rt><rp>) </rp></ruby>を提供するべきです。 <a href="/en-US/docs/Web/API/WebVTT_API">WebVTT</a> を使用して字幕を指定すると、聴力を失った人が、音声の再生時に音声の内容を理解する事ができるようになるのに対し、文字化情報を使用すると、録音されたコンテンツを理解するのに時間が掛かる人が、自分に合ったペースと書式で録音の内容を確認できるようになります。</p> + +<p>自動字幕サービスが使用されている場合は、生成されたコンテンツが元の音声を正しく表現しているかを確認することが重要です。</p> + +<p><code><audio></code> 要素は直接 WebVTT に対応していません。機能を提供するライブラリまたはフレームワークを探すか、字幕を表示するコードを自分自身で書くかする必要があります。一つの選択肢として、 {{HTMLElement("video")}} 要素が WebVTT に対応しているので、これで音声を再生するというものもあります。</p> + +<p>字幕や文字化情報では、話されるセリフに加えて、重要な情報を伝える音楽や音響効果も識別できるようにしてください。これには感情や口調も含みます。例えば、以下の WebVTT では、角括弧を使用して口調や感情を閲覧者に示しています。これによって音楽、物音、効果音などの雰囲気を確立するのに役立ちます。</p> + +<pre>1 +00:00:00 --> 00:00:45 +[エネルギチックなテクノ音楽] + +2 +00:00:46 --> 00:00:51 +タイムキーパーのポッドキャストのようこそ！このエピソードでは、私たちはどちらのスイス時計が腕時計かを議論します？ + +16 +00:00:52 --> 00:01:02 +[笑い] ごめん！言いたかったのは、どの腕時計がスイスの腕時計か？です。 +</pre> + +<p>また、 <code><audio></code> 要素に対応していないブラウザーを使用している閲覧者向けのフォールバックとしていくらかのコンテンツ (直接ダウンロードするリンクなど) を提供するのは良い習慣です。</p> + +<pre class="brush: html"><audio controls> + <source src="myAudio.mp3" type="audio/mpeg"> + <source src="myAudio.ogg" type="audio/ogg"> + <p> + Your browser doesn't support HTML5 audio. + Here is a <a href="myAudio.mp4">link to download the audio</a> instead. + </p> +</audio> + +</pre> + +<ul> + <li><a href="/ja/docs/Plugins/Flash_to_HTML5/Video/Subtitles_captions">MDN 字幕とクローズドキャプション - プラグイン</a></li> + <li><a href="/ja/docs/Web/API/WebVTT_API">Web Video Text Tracks Format (WebVTT)</a></li> + <li><a href="https://webaim.org/techniques/captions/">WebAIM: Captions, Transcripts, and Audio Descriptions</a></li> + <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.2_—_Providing_text_alternatives_for_time-based_media">MDN WCAG を理解する ― ガイドライン 1.2 の解説</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html">Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html">Understanding Success Criterion 1.2.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Summary" name="Summary">技術的概要</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>、<a href="/ja/docs/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>、<a href="/ja/docs/HTML/Content_categories#Embedded_content">埋め込みコンテンツ</a>。 {{htmlattrxref("controls", "audio")}} 属性を持つ場合は、<a href="/ja/docs/HTML/Content_categories#Intractive_content">対話型コンテンツ</a>と<a href="/ja/docs/HTML/Content_categories#Palpable_content">知覚可能コンテンツ</a>。</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>要素が {{htmlattrxref("src", "audio")}} 属性を持つ場合: 0個以上の {{HTMLElement("track")}} 要素とそれに続く、メディア要素を含まない透過的コンテンツ。すなわち {{HTMLElement("audio")}} 要素や {{HTMLElement("video")}} を子要素として配置してはなりません。<br> + その他の場合: 0個以上の {{HTMLElement("source")}} 要素、0個以上の {{HTMLElement("track")}} 要素、メディア要素を含まない透過的コンテンツ。すなわち {{HTMLElement("audio")}} 要素や {{HTMLElement("video")}} を子要素として配置してはなりません。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>埋め込みコンテンツを受け入れるすべての要素。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>{{ARIARole("application")}}</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLAudioElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-audio-element', '<audio>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics-embedded-content.html#the-audio-element', '<audio>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.audio")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Media">ウェブメディア技術</a> + + <ul> + <li><a href="/ja/docs/Web/Media/Formats/Containers">メディアコンテナー形式 (ファイル形式)</a></li> + <li><a href="/ja/docs/Web/Media/Formats/Audio_codecs">ウェブで使用される音声コーデックのガイド</a></li> + </ul> + </li> + <li><a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a></li> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{htmlelement("source")}}</li> + <li>{{htmlelement("video")}}</li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">学習エリア: 動画及び音声のコンテンツ</a></li> + <li><a href="/ja/Apps/Fundamentals/Audio_and_video_delivery/Cross-browser_audio_basics">ブラウザーに依存しない音声の基本</a></li> +</ul> diff --git a/files/ja/web/html/element/b/index.html b/files/ja/web/html/element/b/index.html new file mode 100644 index 0000000000..b8422a0d7f --- /dev/null +++ b/files/ja/web/html/element/b/index.html @@ -0,0 +1,124 @@ +--- +title: '<b>: 注目付け要素' +slug: Web/HTML/Element/b +tags: + - HTML + - HTML 文字レベルの意味付け + - 'HTML:フローコンテンツ' + - 'HTML:知覚可能コンテンツ' + - 'HTML:記述コンテンツ' + - Reference + - ウェブ + - 要素 +translation_of: Web/HTML/Element/b +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の注目付け要素 (<code><b></code>)</strong> は、要素の内容に読み手の注意を惹きたい場合で、他の特別な重要性が与えられないものに使用します。</span>これは以前は太字要素と呼ばれており、ほとんどのブラウザーでは文字列を太字で描画していました。しかし、 <code><b></code> を文字列の装飾に使うべきではありません。太字の文字列を作成するには、 CSS の {{cssxref("font-weight")}} プロパティを使用し、特別な重要性を持つテキストを示すには {{HTMLElement("strong")}} 要素を使用してください。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/b.html", "tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>以外の属性はありません。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<ul> + <li><code><b></code> は要約に現れるキーワード、レビュー文内での製品名、または、その他の表記上太字で記述される通例のある箇所 (但し、特別な重要性を持たない部分) に使用してください。</li> + <li><code><b></code> 要素を {{HTMLElement("strong")}}, {{HTMLElement("em")}}, {{HTMLElement("mark")}} 要素と混同しないでください。 {{HTMLElement("strong")}} は特定の<em>重要性</em>を持った文字列を表し、 {{HTMLElement("em")}} はテキストを軽く強調し、 {{HTMLElement("mark")}} は特定の<em>関連性</em>を持った文字列を表します。 <code><b></code> はそのような特別な意味を持ちません。他の要素が持つ意味合いに合わないときのみ使用してください。</li> + <li>同様に、 <code><b></code> 要素でタイトルや見出しをマークしないでください。この用途では {{HTMLElement("h1")}} から {{HTMLElement("h6")}} タグを使用します。さらに、スタイルシートでこれらの要素の既定のスタイルを変更できるので、これらの要素は太字で表示される<em>とは限りません</em>。</li> + <li>必要に応じて追加的な意味情報を伝える目的で <code><b></code> 要素に {{htmlattrxref("class")}} 属性を使用することはよい使用法です (例えば、段落の最初の文に <code><b class="lead"></code> を設定するなど)。これによって、 <code><b></code> の様々な使用法が管理しやすくなり、スタイル上の変更が必要になった時、 HTML における使用方法を変更する必要がなくなります。</li> + <li>歴史的に <code><b></code> 要素は太字の文字列を作るためのものでしたが、 HTML4 でスタイル情報が非推奨になったので <code><b></code> 要素の意味が変更されました。</li> + <li><code><b></code> 要素の使用に意味上の目的がない場合は、文字列を太字にするために代わりに CSS の {{cssxref("font-weight")}} プロパティの値を <code>"bold"</code> に設定してください。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html"><p> + This article describes several <b class="keywords">text-level</b> elements. + It explains their usage in an <b class="keywords">HTML</b> document. +</p> +Keywords are displayed with the default style of the <b>element, likely in bold.</b> +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Examples")}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-b-element', '<b>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-b-element', '<b>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.b")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>その他の<a href="/ja/docs/Web/HTML/Text_level_semantics_conveying_elements">文字レベル意味付け要素</a>: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("abbr")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}</li> + <li><a class="external" href="https://www.w3.org/International/questions/qa-b-and-i-tags">Using <b> and <i> elements (W3C)</a></li> +</ul> diff --git a/files/ja/web/html/element/base/index.html b/files/ja/web/html/element/base/index.html new file mode 100644 index 0000000000..9826ce1a69 --- /dev/null +++ b/files/ja/web/html/element/base/index.html @@ -0,0 +1,137 @@ +--- +title: '<base>: 文書の基底 URL 要素' +slug: Web/HTML/Element/base +tags: + - Element + - HTML + - HTML 文書メタデータ + - 'HTML:メタデータコンテンツ' + - Reference + - 要素 +translation_of: Web/HTML/Element/base +--- +<div>{{HTMLRef}}</div> + +<p id="Summary"><span class="seoSummary"><strong>HTML の <code><base></code> 要素</strong>は、文書内におけるすべての<em>相対</em> URL の基点となる URL を指定します。</span> <code><base></code> 要素は、文書内に1つだけ置くことができます。</p> + +<p>文書に使われている基底 URL は、スクリプトから {{domxref('document.baseURI')}} を使用して問い合わせることができます。文書に <code><base></code> 要素がない場合、 <code>baseURI</code> は既定で {{domxref("location.href")}} になります。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td>メタデータコンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>なし。この要素は{{Glossary("empty element", "空要素")}}。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>終了タグを用いてはならない。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>他に {{HTMLElement("base")}} 要素を含まない {{HTMLElement("head")}}。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>許可されている <code>role</code> なし</td> + </tr> + <tr> + <th>DOM インターフェイス</th> + <td>{{domxref("HTMLBaseElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<div class="blockIndicator warning"> +<p>以下の属性のいずれかが指定されている場合、この要素は URL の属性値を持つ他の要素の前におかなければ<strong>なりません</strong>。例えば {{HTMLElement("link")}} の <code>href</code> 属性などです。</p> +</div> + +<dl> + <dt>{{htmlattrdef("href")}}</dt> + <dd>文書全体を通して相対 URL に使用される基底 URL です。絶対 URL と相対 URL が使用できます。</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd><strong>キーワード</strong>または<strong>作者が定義した名前</strong>で既定の{{Glossary("browsing context", "閲覧コンテキスト")}}を表し、 {{HTMLElement("a")}} または {{HTMLElement("form")}} 要素が明示的に <code>target</code> 属性を持たない場合に、移動の結果を表示する先として使用されます。</dd> + <dd>以下のキーワードは特別な意味を持ちます。 + <ul> + <li><code>_self</code> (既定値): 同じ閲覧コンテキストに結果を表示します。</li> + <li><code>_blank</code>: 新しい無名の閲覧コンテキストに結果を表示します。</li> + <li><code>_parent</code>: 現在のコンテキストの親の閲覧コンテキストに結果を表示します。親がない場合、このオプションは <code>_self</code> と同じ振る舞いをします。</li> + <li><code>_top</code>: 最上位の閲覧コンテキスト (現在のコンテキストの祖先で、それ以上の親をもたない閲覧コンテキスト）に結果を表示します。親がない場合、このオプションは <code>_self</code> と同じ振る舞いをします。</li> + </ul> + </dd> +</dl> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<h3 id="Multiple_<base>_elements" name="Multiple_<base>_elements">複数の <base> 要素</h3> + +<p>複数の <code><base></code> 要素が使用された場合、最初の <code>href</code> と最初の <code>target</code> の値が使用され、他はすべて無視されます。</p> + +<h3 id="In-page_anchors" name="In-page_anchors">ページ内アンカー</h3> + +<p>文書内のフラグメントを指すリンク — 例えば <code><a href="#some-id"></code> — は <code><base></code> によって解決され、基底 URL にフラグメントを付けて HTTP リクエストを発行します。例を示します。</p> + +<ol> + <li><code><base href="https://example.com"></code> が指定された場合</li> + <li>...そこで <code><a href="#anchor">Anker</a></code> というリンクの場合</li> + <li>...リンク先は <code>https://example.com/#anchor</code> となります。</li> +</ol> + +<h3 id="Open_Graph">Open Graph</h3> + +<p><a href="http://ogp.me/">OpenGraph</a> のメタタグは <code><base></code> を認識しないので、次のように常に完全 URL を使用してください。</p> + +<pre class="brush: html notranslate"><meta property="og:image" content="https://example.com/thumbnail.jpg"></pre> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html notranslate"><base href="https://www.example.com/"> +<base target="_blank"> +<base target="_top" href="https://example.com/"> +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-base-element', '<base>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新のスナップショットから変更なし</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata#the-base-element', '<base>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td><code>target</code> の挙動を定義</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.4', '<base>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td><code>target</code> 属性を追加</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.base")}}</p> diff --git a/files/ja/web/html/element/basefont/index.html b/files/ja/web/html/element/basefont/index.html new file mode 100644 index 0000000000..8d3620ed96 --- /dev/null +++ b/files/ja/web/html/element/basefont/index.html @@ -0,0 +1,65 @@ +--- +title: <basefont> +slug: Web/HTML/Element/basefont +tags: + - Element + - HTML + - Obsolete + - Reference + - Web + - フォント +translation_of: Web/HTML/Element/basefont +--- +<div>{{obsolete_header}}</div> + +<p><span class="seoSummary">廃止された <strong>HTML の基本フォント要素</strong> (<code><basefont></code>) は、子孫要素の既定のフォントの種類、大きさ、色を設定します。</span>設定すると、 {{HTMLElement("font")}} を使用したフォントの大きさは基本の大きさから相対的にな物になります。</p> + +<p>この要素は使用しないでください。要素やそのコンテンツのフォントの設定を変更するには、代わりに、 {{cssxref("font")}}, {{cssxref("font-family")}}, {{cssxref("font-size")}}, {{cssxref("color")}} を使用してください。</p> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>他の全ての HTML 要素と同様に、この要素は<a href="/ja/docs/HTML/Global_attributes" title="HTML/Global attributes">グローバル属性</a>に対応します。</p> + +<dl> + <dt>{{htmlattrdef("color")}}</dt> + <dd>この属性は、テキストの文字色を色名または16進の #RRGGBB 表記で設定します。</dd> + <dt>{{htmlattrdef("face")}}</dt> + <dd>この属性は、1つ以上のフォント名のリストです。文書の文字列は既定のスタイルで、クライアントのブラウザーがサポートする最初のフォント書体を使用して表示します。リスト内のフォントがローカルシステムにインストールされていない場合、一般的にブラウザーはシステムのプロポーショナルフォントまたは等幅フォントを既定値にします。</dd> + <dt>{{htmlattrdef("size")}}</dt> + <dd>この属性は、フォントのサイズを数値または相対値で指定します。数値の範囲は1から7で、1が最小、3が既定値です。</dd> +</dl> + +<h2 id="使用上のメモ">使用上のメモ</h2> + +<p><strong>この要素を使用しないでください！</strong>この要素は主要ブラウザー間での一貫した実装がないまま、一度 HTML 3.2 の仕様として策定されました。さらに、その後のブラウザーのバージョンアップでも一貫した実装は行なわれませんでした。これを使用しても、常に<em>不確実な</em>結果しかもたらされませんでした。</p> + +<p><code><basefont></code> 要素は、スタイルの調整用途の為のみの他の要素と同時に、既に非推奨になっています。 HTML 4 より、HTML はスタイル情報を伝えなくなりました（{{HTMLElement("style")}} 要素や各要素の <strong>style</strong> 属性を除く）。 HTML5 では、この要素は完全に削除されました。新たなウェブ開発では、スタイルを <a href="/ja/docs/CSS" title="CSS">CSS</a> のみで記述してください。</p> + +<p>以前の {{HTMLElement("font")}} 要素の動作は <a href="/ja/docs/Web/CSS/CSS_Fonts">CSS フォント</a>のプロパティで実現でき、またより詳しく制御できます。</p> + +<h2 id="DOM_interface" name="DOM_interface">DOM インターフェイス</h2> + +<p>この要素は {{domxref("HTMLBaseFontElement")}} インターフェイスを提供します。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre><basefont color="#FF0000" face="Helvetica" size="+2" /> +</pre> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.basefont")}}</p> + +<h2 id="Notes" name="Notes">メモ</h2> + +<ul> + <li>HTML 3.2 は basefont 要素に対応していますが、 size 属性のみです。</li> + <li>HTML および XHTML の strict 仕様では、この要素に対応していません。</li> + <li>Mozilla や Opera などの一部の標準志向ブラウザーは、これが transitional の標準仕様の一部であるにもかかわらず、この要素に対応していません。</li> + <li>この要素は、 {{HTMLElement("body")}} 要素の CSS 規則で模倣できます。</li> + <li>XHTML 1.0 では <code><basefont /></code> のように末尾のスラッシュが必要です。</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ja/web/html/element/bdi/index.html b/files/ja/web/html/element/bdi/index.html new file mode 100644 index 0000000000..1724873ca0 --- /dev/null +++ b/files/ja/web/html/element/bdi/index.html @@ -0,0 +1,210 @@ +--- +title: '<bdi>: 書字方向分離要素' +slug: Web/HTML/Element/bdi +tags: + - BiDi + - HTML + - HTML 文字レベルの意味付け + - 'HTML:フローコンテンツ' + - 'HTML:知覚可能コンテンツ' + - 'HTML:記述コンテンツ' + - Reference + - i18n + - ltr + - rtl + - ウェブ + - テキスト + - リファレンス + - 右書き + - 国際化 + - 左書き + - 書字方向 + - 要素 +translation_of: Web/HTML/Element/bdi +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">HTML の<strong>書字方向分離要素</strong> (<strong><code><bdi></code></strong>) は、ブラウザーの書字方向アルゴリズムにこのテキストが周囲のテキストから独立していると扱うよう指示します。</span>これは特に、ウェブサイトがテキストを動的に挿入し、挿入されるテキストの書字方向が不明な場合に便利です。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/bdi.html", "tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>双方向のテキストとは、文字の並びが左から右 (左書き、LTR) のものと、右から左 (右書き、RTL) のものの両方を含むテキストであり、英語の文字列の中に埋め込まれたアラビア語の引用のようなものです。ブラウザーはこれを扱うために、 <a href="https://www.w3.org/International/articles/inline-bidi-markup/uba-basics">Unicode Bidirectional Algorithm</a> を実装しています。このアルゴリズムでは、文字には暗黙の書字方向が与えられます。例えば、ラテン文字は左書きとして扱われるのに対し、アラビア文字は右書きとして扱われます。その他の一部の文字 (空白や一部の区切り文字など) は中立として扱われ、周囲の文字に従って書字方向が割り当てられます。</p> + +<p>ふつう、書字方向アルゴリズムは特別なマークアップを行わずに正しく動作しますが、時々、アルゴリズムが助けを必要とすることがあります。これが <code><bdi></code> の出番です。</p> + +<p><code><bdi></code> 要素はテキストの区間を囲んで、書字方向アルゴリズムにこのテキストが周囲から独立していることを指示します。これは二通りに動作します。</p> + +<ul> + <li><code><bdi></code> で囲まれたテキストの書字方向は、周囲のテキストの書字方向に<em>影響を与えない</em>。</li> + <li><code><bdi></code> で囲まれたテキストの書字方向は、周囲のテキストの書字方向から<em>影響を受けない</em>。</li> +</ul> + +<p>例えば、以下のようなテキストを想定してください。</p> + +<pre class="no-line-numbers">EMBEDDED-TEXT - 1st place</pre> + +<p><code>EMBEDDED-TEXT</code> が左書きである場合、これは正しく動作します。しかし、 <code>EMBEDDED-TEXT</code> が右書きである場合は、 <code> - 1</code> は右書きのテキストとして扱われます (中立または弱い文字で構成されているためです)。結果は次のように混乱します。</p> + +<pre class="no-line-numbers">1 - EMBEDDED-TEXTst place</pre> + +<p>さらに、 <code>EMBEDDED-TEXT</code> の書字方向が分かる場合は、 {{htmlattrxref("dir")}} 属性のついた {{HTMLElement("span")}} で <code>EMBEDDED-TEXT</code> を囲むことでこの問題を修正できます。しかし、書字方向が分からない場合は - 例えば、 <code>EMBEDDED-TEXT</code> がデータベースから読み込まれたり、ユーザーに入力されたりするものであれば - <code><bdi></code> を使用して、 <code>EMBEDDED-TEXT</code> の書字方向が周囲に影響されることを防ぐべきです。</p> + +<p><bdi>同様の視覚効果は、 CSS の {{cssxref("unicode-bidi", "unicode-bidi: isolate")}} を {{HTMLElement("span")}} またはその他の文字書式のための要素に付けることで達成できますが、これは意味が含まれず、ブラウザーは CSS の整形を無視することが許されているので、 HTML ではこのアプローチを使用しないでください。</bdi></p> + +<p><bdi><code><span dir="auto"></code> に囲まれた文字は、 <code><bdi></code> を使用するのと同様の効果が得られますが、意味論的には不明確になります。</bdi></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a> を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は、他のすべての HTML 要素と同様に<a href="/ja/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">グローバル属性</a>に対応していますが、 <strong>dir</strong> 属性の挙動が普通とは異なります。初期値は <code>auto</code> であり、親要素から値を継承しないことを示します。つまり、 <code>dir</code> に <code>rtl</code> または <code>ltr</code> のどちらかの値を指定しない限り、{{Glossary("user agent", "ユーザーエージェント")}}は <code><bdi></code> の内容に基づいて正しい方向を特定します。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="No_<bdi>_with_only_LTR" name="No_<bdi>_with_only_LTR"><bdi> がなく左書きのみの場合</h3> + +<p>この例では、競争の勝者を {{HTMLElement("span")}} のみを使用して列挙しています。名前は左書きのテキストのみが入れば、見栄えが良い結果になります。</p> + +<div id="bdi-sample-1"> +<pre class="brush: html"><ul> + <li><span class="name">Henrietta Boffin</span> - 1st place</li> + <li><span class="name">Jerry Cruncher</span> - 2nd place</li> +</ul> +</pre> + +<div class="hidden"> +<pre class="brush: css">body { + border: 1px solid #3f87a6; + max-width: calc(100% - 40px - 6px); + padding: 20px; + width: calc(100% - 40px - 6px); + border-width: 1px 1px 1px 5px; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('bdi-sample-1','','120','','','bdi-example') }}</p> + +<h3 id="No_<bdi>_with_RTL_text" name="No_<bdi>_with_RTL_text"><bdi> がなく右書きを含むテキストの場合</h3> + +<p>この例では、競争の勝者を {{HTMLElement("span")}} のみを使用して列挙しており、右書きのテキストから成る名前を含んでいます。この場合、右書きの名前を入れると、書字方向が中立または弱い文字で構成された "<code>- 1</code>" の部分は、右書きのテキストの書字方向に合わられ、結果が混乱してしまいます。</p> + +<div id="bdi-sample-2"> +<pre class="brush: html"><ul> + <li><span class="name">اَلأَعْشَى</span> - 1st place</li> + <li><span class="name">Jerry Cruncher</span> - 2nd place</li> +</ul> +</pre> + +<div class="hidden"> +<pre class="brush: css">body { + border: 1px solid #3f87a6; + max-width: calc(100% - 40px - 6px); + padding: 20px; + width: calc(100% - 40px - 6px); + border-width: 1px 1px 1px 5px; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('bdi-sample-2','','120','','','bdi-example') }}</p> + +<h3 id="Using_<bdi>_with_LTR_and_RTL_text" name="Using_<bdi>_with_LTR_and_RTL_text"><bdi> を使用した左書きと右書きのあるテキストの場合</h3> + +<p>この例では、競争の勝者を <code> <bdi></code> を使用して列挙しています。これらの要素がブラウザーに、名前を埋め込み先のコンテキストから分離することを指示するので、例の出力は正しく並べられます。</p> + +<div id="bdi-sample-3"> +<pre class="brush: html"><ul> + <li><bdi class="name">اَلأَعْشَى</bdi> - 1st place</li> + <li><bdi class="name">Jerry Cruncher</bdi> - 2nd place</li> +</ul> +</pre> + +<div class="hidden"> +<pre class="brush: css">body { + border: 1px solid #3f87a6; + max-width: calc(100% - 40px - 6px); + padding: 20px; + width: calc(100% - 40px - 6px); + border-width: 1px 1px 1px 5px; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('bdi-sample-3','','120','','','bdi-example') }}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-bdi-element', '<bdi>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-bdi-element', '<bdi>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.bdi")}}</p> + +<h2 dir="ltr" id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="https://www.w3.org/International/articles/inline-bidi-markup/">Inline markup and bidirectional text in HTML</a></li> + <li><a href="https://www.w3.org/International/articles/inline-bidi-markup/uba-basics">Unicode Bidirectional Algorithm basics</a></li> + <li><a href="/ja/docs/Web/Localization">ローカライズと国際化</a></li> + <li>関連 HTML 要素: {{HTMLElement("bdo")}}</li> + <li>関連 CSS プロパティ: {{cssxref("direction")}}, {{cssxref("unicode-bidi")}}</li> +</ul> diff --git a/files/ja/web/html/element/bdo/index.html b/files/ja/web/html/element/bdo/index.html new file mode 100644 index 0000000000..164fd7124b --- /dev/null +++ b/files/ja/web/html/element/bdo/index.html @@ -0,0 +1,128 @@ +--- +title: '<bdo>: 双方向文字列上書き要素' +slug: Web/HTML/Element/bdo +tags: + - BiDi + - HTML + - HTML 文字レベルの意味付け + - 'HTML:フローコンテンツ' + - 'HTML:知覚可能コンテンツ' + - 'HTML:記述コンテンツ' + - Reference + - Web + - ltr + - rtl + - テキスト + - 右書き + - 左書き + - 書字方向 + - 要素 +translation_of: Web/HTML/Element/bdo +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の双方向文字列上書き要素</strong> (<code><bdo></code>) は、現在の文字列の方向を上書きし、中の文字列が異なる方向に描画されるようにします。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/bdo.html", "tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>文字列の文字は指定された方向の開始位置から描画されます。それぞれの文字の向きには影響を与えません (ですから、例えば、文字は裏返しにはなりません)。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}。Gecko 1.9.2 (Firefox 4) 以前では、Firefox はこの要素に対し <code><a href="/ja/docs/Web/API/HTMLSpanElement">HTMLSpanElement</a></code> インターフェイスを実装しています。</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は<a href="/ja/docs/HTML/Global_attributes" title="HTML/Global attributes">グローバル属性</a>を持ちます。</p> + +<dl> + <dt>{{htmlattrdef("dir")}}</dt> + <dd>この要素の書字方向。以下の値を指定可能です。 + <ul> + <li><code>ltr</code>: テキストを左から右へ (Left to Right) 向かわせることを意味する指定。</li> + <li><code>rtl</code>: テキストを右から左へ (Right to Left) 向かわせることを意味する指定。</li> + </ul> + </dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html"><!-- 書字方向を切り替える --> +<p>This text will go left to right.</p> +<p><bdo dir="rtl">This text will go right +to left.</bdo></p> +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample('Examples')}}</p> + +<h2 id="Notes" name="Notes">メモ</h2> + +<p>HTML 4 の仕様では、この要素にイベントが指定されていません。イベントは XHTML で追加されました。これは、恐らく見落としでしょう。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-bdo-element', '<bdo>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-bdo-element', '<bdo>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'dirlang.html#h-8.2.4', '<bdo>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.bdo")}}</p> diff --git a/files/ja/web/html/element/bgsound/index.html b/files/ja/web/html/element/bgsound/index.html new file mode 100644 index 0000000000..68c0eee8cf --- /dev/null +++ b/files/ja/web/html/element/bgsound/index.html @@ -0,0 +1,57 @@ +--- +title: '<bgsound>: 背景音の要素 (廃止)' +slug: Web/HTML/Element/bgsound +tags: + - HTML + - Non-standard + - Obsolete + - Reference +translation_of: Web/HTML/Element/bgsound +--- +<div>{{obsolete_header}}{{non-standard_header}}</div> + +<p><span class="seoSummary"><strong>HTML の背景音要素</strong> (<strong><code><bgsound></code></strong>) は Internet Explorer のみに実装されており、そのページが使用されている間の背景として再生される音声ファイルを設定します。代わりに {{HTMLElement("audio")}} 要素を使用してください。</span></p> + +<div class="note"> +<p><strong>この要素を使用しないでください!</strong> ウェブページに音声を埋め込むには、{{HTMLElement("audio")}} 要素を使用してください。</p> +</div> + +<h2 id="属性">属性</h2> + +<dl> + <dt>{{ htmlattrdef("balance") }}</dt> + <dd>この属性は -10,000 から +10,000 の値で、ステレオスピーカーの左右の音量バランスを指定します。</dd> + <dt>{{ htmlattrdef("loop") }}</dt> + <dd>この属性は音声が再生される回数を示します。もしくは無限回のループを示す「<code>infinite</code>」キーワードが指定可能です。</dd> + <dt>{{ htmlattrdef("src") }}</dt> + <dd>再生する音声ファイルの URL を指定します。「.wav」、「.au」、「.mid」の何れかの拡張子を持つものでなくてはなりません。</dd> + <dt>{{ htmlattrdef("volume") }}</dt> + <dd>-10,000 から 0 の範囲の数値で、背景音の音量を指定します。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:html"><bgsound src="sound1.mid"> + +<bgsound src="sound2.au" loop="infinite"> +</pre> + +<h2 id="使用上の注意">使用上の注意</h2> + +<p>歴史的には、多くのブラウザーで背景の音声を再生するためにオーディオプレイヤープラグインを {{HTMLElement("embed")}} 要素で使用することができました。しかし、これもすでに適切ではなく、代わりにもっと多機能、もっと互換性が高く、プラグインが必要ない <code><audio></code> を使用するべきです。</p> + +<p><code><bgsound></code> を自己完結タグ (<code><bgsound /></code>) として書くことができます。しかし、この要素は標準規格外なので、妥当性検査されることはありません。</p> + +<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性表は構造化データから生成されています。データに貢献したい場合は、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.bgsound")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{htmlelement("audio")}} 要素。文書に音声を埋め込むための標準要素です。</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ja/web/html/element/big/index.html b/files/ja/web/html/element/big/index.html new file mode 100644 index 0000000000..9d2f5ba93b --- /dev/null +++ b/files/ja/web/html/element/big/index.html @@ -0,0 +1,86 @@ +--- +title: '<big>: 大きめの文字列要素' +slug: Web/HTML/Element/big +tags: + - Element + - HTML + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/big +--- +<div>{{obsolete_header}}</div> + +<p><span class="seoSummary">廃止された <strong>HTML の Big 要素</strong> (<code><big></code>) は、内包するテキストを周りの文字列よりも1段階大きいフォントの大きさで描画します（例えば <code>medium</code> が <code>large</code> になります）。</span>大きさはブラウザーの最大フォントの大きさに制限されます。</p> + +<div class="note"> +<p><strong>使用上の注意:</strong> この要素は純粋に視覚的なものでしたので、 <a href="/ja/docs/Web/Guide/HTML/HTML5" title="Web/Guide/HTML/HTML5">HTML5</a> では削除され、もう使用するべきではありません。ウェブ開発者は CSS の {{cssxref("font-size")}} プロパティを使用して、フォントの大きさを調整してください。</p> +</div> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は、すべての要素で共通の <a href="/ja/docs/HTML/global_attributes" title="HTML/global attributes">グローバル属性</a> 以外には属性を持ちません。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>ここでは <code><big></code> を使って表示する例と、その後で現在の CSS の文法で代用して同じ結果を得る方法を示します。</p> + +<h3 id="Using_<big>" name="Using_<big>"><code><big></code> の使用</h3> + +<div id="Using_big"> +<p>This example uses the obsolete <code><big></code> element to increase the size of some text.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p> + This is the first sentence. <big>This whole + sentence is in bigger letters.</big> +</p></pre> +</div> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample("Using_big", 640, 60)}}</p> + +<h3 id="Using_CSS_font-size" name="Using_CSS_font-size">CSS の <code>font-size</code> の使用</h3> + +<p>この例では CSS の {{cssxref("font-size")}} プロパティを使用して、フォントの大きさを1レベル大きくしています。</p> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.bigger { + font-size: larger; +}</pre> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p> + This is the first sentence. <span class="bigger">This whole + sentence is in bigger letters.</span> +</p></pre> + +<h4 id="Result_2" name="Result_2">結果</h4> + +<p>{{EmbedLiveSample("Using_CSS_font-size", 640, 60)}}</p> + +<h2 id="DOM_interface" name="DOM_interface">DOM インターフェイス</h2> + +<p>この要素は {{domxref('HTMLElement')}} インターフェイスを提供します。</p> + +<div class="note"><strong>実装メモ: </strong>Gecko 1.9.2 までのバージョンは、この要素に {{domxref('HTMLSpanElement')}} インターフェイスを実装しています。</div> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.big")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>CSS: {{cssxref("font-size")}}, {{cssxref("font")}}</li> + <li>HTML: {{htmlelement("small")}}, {{htmlelement("font")}}, {{htmlelement("style")}}</li> + <li>HTML 4.01 仕様書: <a class="external" href="http://www.w3.org/TR/html4/present/graphics.html#h-15.2">Font Styles</a></li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ja/web/html/element/blink/index.html b/files/ja/web/html/element/blink/index.html new file mode 100644 index 0000000000..7c0bbe62fc --- /dev/null +++ b/files/ja/web/html/element/blink/index.html @@ -0,0 +1,83 @@ +--- +title: '<blink>: 点滅文字列要素 (廃止)' +slug: Web/HTML/Element/blink +tags: + - Blink + - Element + - HTML + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/blink +--- +<div>{{HTMLRef}}{{Deprecated_header}} {{obsolete_header}}</div> + +<p><span class="seoSummary"><strong>HTML の点滅要素</strong> (<code><blink></code>) は包含するテキストをゆっくり点滅させるための、標準外の要素です。</span></p> + +<div class="warning">この要素は<strong>廃止されており</strong>、また悪いデザインの実例ですので使用しないでください。文字の点滅は複数のアクセシビリティ標準において難色が示されており、 CSS 仕様書ではブラウザーが <code><blink></code> 要素を無視することを許可しています。</div> + +<h2 id="DOM_interface" name="DOM_interface">DOM インターフェイス</h2> + +<p>この要素はすでに廃止されています。このように存在しない要素に対しては {{domxref("HTMLUnknownElement")}} インターフェイスが提供されます。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:html notranslate"><blink>Why would somebody use this?</blink> +</pre> + +<h3 id="Result_toned_down!" name="Result_toned_down!">結果 (toned down!)</h3> + +<p><img alt="Image:HTMLBlinkElement.gif" src="/@api/deki/files/247/=HTMLBlinkElement.gif"></p> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<p>この要素は標準外であり、どの仕様にも含まれていません。信じられないのでしたら、<a href="https://html.spec.whatwg.org/multipage/obsolete.html#non-conforming-features">自身で HTML 仕様を確認してください</a>。</p> + +<h2 id="CSS_polyfill" name="CSS_polyfill">CSS による代替手段</h2> + +<p>本当に代替手段が必要でしたら、以下の CSS を使用できます。 IE10 以降で動作します。</p> + +<pre class="brush: css notranslate">blink { + -webkit-animation: 2s linear infinite condemned_blink_effect; /* for Safari 4.0 - 8.0 */ + animation: 2s linear infinite condemned_blink_effect; +} + +/* for Safari 4.0 - 8.0 */ +@-webkit-keyframes condemned_blink_effect { + 0% { + visibility: hidden; + } + 50% { + visibility: hidden; + } + 100% { + visibility: visible; + } +} + +@keyframes condemned_blink_effect { + 0% { + visibility: hidden; + } + 50% { + visibility: hidden; + } + 100% { + visibility: visible; + } +}</pre> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.blink")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="http://www.montulli.org/theoriginofthe%3Cblink%3Etag">HTML <code><blink></code> 要素を作成した経緯</a></li> + <li>{{cssxref("text-decoration")}} に blink 値が存在しますが、ブラウザーが実際に点滅させる必要はありません。</li> + <li>{{htmlelement("marquee")}} も同様に非標準の要素です。</li> + <li><a href="/ja/docs/Web/Guide/CSS/Using_CSS_animations" title="Web/Guide/CSS/Using_CSS_animations">CSS animations</a> は、このような効果を生成するための手段です。</li> +</ul> diff --git a/files/ja/web/html/element/blockquote/index.html b/files/ja/web/html/element/blockquote/index.html new file mode 100644 index 0000000000..abd154bdcc --- /dev/null +++ b/files/ja/web/html/element/blockquote/index.html @@ -0,0 +1,137 @@ +--- +title: '<blockquote>: ブロック引用要素' +slug: Web/HTML/Element/blockquote +tags: + - Blockquote + - HTML + - HTML コンテンツグループ化 + - 'HTML:フローコンテンツ' + - 'HTML:区分化ルート' + - 'HTML:知覚可能コンテンツ' + - Reference + - Web + - ウェブ + - 引用 + - 要素 +translation_of: Web/HTML/Element/blockquote +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><blockquote></code> 要素</strong><em> (HTML ブロック引用要素</em>) は、内包する要素の文字列が引用文であることを示します。通常、字下げを伴ってレンダリングされます (整形方法については<a href="#Usage_notes" rel="internal">注意</a>の項を参照してください)。 <strong>cite</strong> 属性により引用元の文書の URL を、 {{HTMLElement("cite")}} 要素により引用元の文書のタイトルなどを明示可能です。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/blockquote.html","tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, 区分化ルート, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLQuoteElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{htmlattrdef("cite")}}</dt> + <dd>引用元の文書の URL、または引用元の情報に関するメッセージを示します。この属性は、引用文の背景や出典についての説明を指し示そうとするものです。</dd> +</dl> + +<h2 id="Notes" name="Notes">使用上の注意</h2> + +<p>引用された文字列に適用される字下げを変更するには、 {{Glossary("CSS")}} の {{cssxref("margin-left")}} や {{cssxref("margin-right")}} プロパティ、または一括指定の {{cssxref("margin")}} プロパティを使用してください。</p> + +<p>独立したブロックというより行内の短い引用を行うには、 {{HTMLElement("q")}} (Quotation) 要素を使用してください。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>この例は {{RFC(1149)}}, <cite>A Standard for the Transmission of IP Datagrams on Avian Carriers</cite> からの文言を引用するために <code><blockquote></code> 要素を使用する例です。</p> + +<pre class="brush: html"><blockquote cite="https://tools.ietf.org/html/rfc1149"> + <p>Avian carriers can provide high delay, low + throughput, and low altitude service. The + connection topology is limited to a single + point-to-point path for each carrier, used with + standard carriers, but many carriers can be used + without significant interference with each other, + outside of early spring. This is because of the 3D + ether space available to the carriers, in contrast + to the 1D ether used by IEEE802.3. The carriers + have an intrinsic collision avoidance system, which + increases availability.</p> +</blockquote> +</pre> + +<p>以下のように出力されます。</p> + +<p>{{EmbedLiveSample("Example", 640, 180)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-blockquote-element', '<blockquote>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-blockquote-element', '<blockquote>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '<blockquote>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.elements.blockquote")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("q")}}: インラインの引用のための要素</li> + <li>{{HTMLElement("cite")}}: 情報源の引用のための要素</li> +</ul> diff --git a/files/ja/web/html/element/body/index.html b/files/ja/web/html/element/body/index.html new file mode 100644 index 0000000000..ab1a6a45c7 --- /dev/null +++ b/files/ja/web/html/element/body/index.html @@ -0,0 +1,166 @@ +--- +title: '<body>: 文書の本文要素' +slug: Web/HTML/Element/body +tags: + - Element + - HTML + - 'HTML:区分化ルート' + - Reference + - Sections + - Web +translation_of: Web/HTML/Element/body +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><body></code> 要素</strong>は、 HTML 文書のコンテンツを示す要素です。 <code><body></code> 要素は文書中に一つだけ配置できます。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリー</a></th> + <td><a href="/ja/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Sectioning_roots">区分化ルート</a></td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>開始タグは、内容の先頭が空白文字、コメント、 {{HTMLElement("script")}} 要素、 {{HTMLElement("style")}} 要素でない場合は省略可能です。終了タグは、 <code><body></code> 要素に内容または開始タグがあり、かつ、直後のノードがコメントでない場合は省略可能です。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>{{HTMLElement("html")}} 要素の子要素でなければなりません。</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLBodyElement")}} + <ul> + <li><code><body></code> 要素は {{domxref("HTMLBodyElement")}} インターフェイスを提供します。</li> + <li><code><body></code> 要素は {{domxref("document.body")}} プロパティからアクセス可能です。</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{htmlattrdef("alink")}} {{obsolete_inline}}</dt> + <dd>ハイパーリンクの選択時の文字色です。<em>この方法は不適合であり、代わりに CSS の {{cssxref(":active")}} 疑似クラスで {{cssxref("color")}} プロパティを使用してください。</em></dd> + <dt>{{htmlattrdef("background")}} {{obsolete_inline}}</dt> + <dd>背景画像の URI です。<em>この方法は不適合であり、代わりに CSS の {{cssxref("background")}} プロパティを使用してください。</em></dd> + <dt>{{htmlattrdef("bgcolor")}} {{obsolete_inline}}</dt> + <dd>文書の背景色です。<em>この方法は不適合であり、代わりに CSS の {{cssxref("background-color")}} プロパティを使用してください。</em></dd> + <dt>{{htmlattrdef("bottommargin")}} {{obsolete_inline}}</dt> + <dd>body の下マージンです。<em>この方法は不適合であり、代わりに CSS の {{cssxref("margin-bottom")}} プロパティを使用してください。</em></dd> + <dt>{{htmlattrdef("leftmargin")}} {{obsolete_inline}}</dt> + <dd>body の左マージンです。<em>この方法は不適合であり、代わりに CSS の {{cssxref("margin-left")}} プロパティを使用してください。</em></dd> + <dt>{{htmlattrdef("link")}} {{obsolete_inline}}</dt> + <dd>未訪問のハイパーリンクの文字色です。<em>この方法は不適合であり、代わりに CSS の {{cssxref(":link")}} 疑似クラスで {{cssxref("color")}} プロパティを使用してください。</em></dd> + <dt>{{htmlattrdef("onafterprint")}}</dt> + <dd>ユーザーによる印刷データ作成直後に呼び出す関数</dd> + <dt>{{htmlattrdef("onbeforeprint")}}</dt> + <dd>ユーザーによるブラウザーへの印刷指示直後に呼び出す関数</dd> + <dt>{{htmlattrdef("onbeforeunload")}}</dt> + <dd>文書のアンロード (ページ遷移、リロード) の直前に呼び出す関数</dd> + <dt>{{htmlattrdef("onblur")}}</dt> + <dd>文書からフォーカスが外されたときに呼び出す関数</dd> + <dt>{{htmlattrdef("onerror")}}</dt> + <dd>文書を正常にロードできなかった際に呼び出す関数</dd> + <dt>{{htmlattrdef("onfocus")}}</dt> + <dd>文書にフォーカスが当たった際に呼び出す関数</dd> + <dt>{{htmlattrdef("onhashchange")}}</dt> + <dd>文書の現在のアドレスのフラグメント識別子 (ハッシュ文字 <code>'#'</code> から始まる部分) が変更された際に呼び出す関数</dd> + <dt>{{htmlattrdef("onlanguagechange")}} {{experimental_inline}}</dt> + <dd>言語が変更された際に呼び出す関数</dd> + <dt>{{htmlattrdef("onload")}}</dt> + <dd>文書の読み込み完了時に呼び出す関数</dd> + <dt>{{htmlattrdef("onmessage")}}</dt> + <dd>文書が API からメッセージを受信した際に呼び出す関数</dd> + <dt>{{htmlattrdef("onoffline")}}</dt> + <dd>ネットワークとの交信が不能になった際に呼び出す関数</dd> + <dt>{{htmlattrdef("ononline")}}</dt> + <dd>ネットワークとの交信が発生あるいは回復した際に呼び出す関数</dd> + <dt>{{htmlattrdef("onpopstate")}}</dt> + <dd>ユーザーによるセッション履歴のナビゲート時に呼び出す関数</dd> + <dt>{{htmlattrdef("onredo")}}</dt> + <dd>ユーザーがトランザクション履歴を元に戻した際に呼び出す関数</dd> + <dt>{{htmlattrdef("onresize")}}</dt> + <dd>文書を表示するウィンドウがリサイズされた際に呼び出す関数</dd> + <dt>{{htmlattrdef("onstorage")}}</dt> + <dd>ストレージ領域が変化した際に呼び出す関数</dd> + <dt>{{htmlattrdef("onundo")}}</dt> + <dd>ユーザーがトランザクション履歴をさかのぼることによって後方へ移動した際に呼び出す関数</dd> + <dt>{{htmlattrdef("onunload")}}</dt> + <dd>文書からの離脱時に呼び出す関数</dd> + <dt>{{htmlattrdef("rightmargin")}} {{obsolete_inline}}</dt> + <dd>body の右マージンです。<em>この方法は不適合であり、代わりに CSS の {{cssxref("margin-right")}} プロパティを使用してください。</em></dd> + <dt>{{htmlattrdef("text")}} {{obsolete_inline}}</dt> + <dd>基本文字色です。<em>この方法は不適合であり、代わりに CSS の {{cssxref("color")}} プロパティを使用してください。</em></dd> + <dt>{{htmlattrdef("topmargin")}} {{obsolete_inline}}</dt> + <dd>body の上マージンです。<em>この方法は不適合であり、代わりに CSS の {{cssxref("margin-top")}} プロパティを使用してください。</em></dd> + <dt>{{htmlattrdef("vlink")}} {{obsolete_inline}}</dt> + <dd>訪問済みのハイパーリンクの文字色です。<em>この方法は不適合であり、代わりに CSS の {{cssxref(":visited")}} 疑似クラスで {{cssxref("color")}} プロパティを使用してください。</em></dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: html notranslate"><html> + <head> + <title>Document title</title> + </head> + <body> + <p>This is a paragraph</p> + </body> +</html> +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-body-element', '<body>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>不適合な機能の一覧を変更。</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-body-element', '<body>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>以前非推奨とされた属性を廃止。不適合であり標準化しない <code>c</code>, <code>leftmargin</code>, <code>rightmargin</code>, <code>bottommargin</code> の動作を定義。<code>on*</code> 属性を追加。</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.1', '<body>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td><code>alink</code>, <code>background</code>, <code>bgcolor</code>, <code>link</code>, <code>text</code>, <code>vlink</code> の各属性を非推奨に変更。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.body")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("html")}}</li> + <li>{{HTMLElement("head")}}</li> +</ul> diff --git a/files/ja/web/html/element/br/index.html b/files/ja/web/html/element/br/index.html new file mode 100644 index 0000000000..138a9fbb08 --- /dev/null +++ b/files/ja/web/html/element/br/index.html @@ -0,0 +1,142 @@ +--- +title: '<br>: 改行要素' +slug: Web/HTML/Element/br +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/br +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><br></code> 要素</strong> は、文中に改行（キャリッジリターン）を生成します。詩や住所など、行の分割が重要な場合に有用です。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/br.html", "tabbed-standard")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<p>上記の例に見られるように、 <code><br></code> 要素はテキストを改行したい場所にそれぞれ含められます。 <code><br></code> の後のテキストは、テキストブロックの次の行の先頭から再開されます。</p> + +<div class="note"> +<p><strong>注</strong>: 段落の間を開けるために <code><br></code> を使わないでください。それぞれを {{htmlelement("p")}} 要素で囲み、 <a href="/ja/docs/Web/CSS">CSS</a> の {{cssxref('margin')}} プロパティで間隔を制御してください。</p> +</div> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を持ちます。</p> + +<h3 id="Deprecated_attributes" name="Deprecated_attributes">非推奨の属性</h3> + +<dl> + <dt>{{htmlattrdef("clear")}}</dt> + <dd>改行後の次の行を開始する場所を示します。</dd> +</dl> + +<h2 id="Styling_with_CSS" name="Styling_with_CSS">CSS でのスタイル付け</h2> + +<p><code><br></code> 要素は、テキストのブロック内で改行するという、単一の明確な目的を持っています。そのため、寸法を持たず、自身が表示されることもなく、スタイル付けすることができるのはわずかです。</p> + +<p><code><br></code> 要素自体に {{cssxref("margin")}} を設定して、ブロック内のテキストの行間を開けることができますが、これは良いやり方ではありません。 — この用途のために設計された {{cssxref("line-height")}} プロパティを使用してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Simple_br" name="Simple_br">単純な br</h3> + +<p>以下の例では <code><br></code> を使用して、住所のそれぞれの行の間に改行を生成しています。</p> + +<pre class="brush: html notranslate">Mozilla<br> +331 E. Evelyn Avenue<br> +Mountain View, CA<br> +94041<br> +USA<br> +</pre> + +<p>以下のように出力されます。</p> + +<p>{{ EmbedLiveSample('Simple_br', '100%', '90') }}</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> + +<p>段落間の間隔を広げるために連続した <code><br></code> 要素を使用することは、読み上げ技術の支援の下で操作をしている人にとっては問題になります。読み上げソフトは要素が存在することをアナウンスするものの、その中にはコンテンツが何もないという状況になる可能性があります。これは読み上げソフトを使用している人の利用を混乱させ不満をためる可能性があります。</p> + +<p>追加の間隔をあける必要がある場合は、 {{cssxref("margin")}} のような CSS プロパティを使用して効果を得るようにしてください。</p> + +<h2 id="Technical_summary" name="Technical_summary">技術的概要</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>、<a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>なし。これは{{Glossary("empty element", "空要素")}}です。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>開始タグは必須で、終了タグを記述してはなりません。 XHTML 文書では、この要素は <code><br /></code> と書きます。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>{{ARIARole("none")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLBRElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-br-element', '<br>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-br-element', '<br>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.2.1', '<br>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.elements.br")}}</p> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li>{{HTMLElement("address")}} 要素</li> + <li>{{HTMLElement("p")}} 要素</li> + <li>{{HTMLElement("wbr")}} 要素</li> +</ul> diff --git a/files/ja/web/html/element/button/index.html b/files/ja/web/html/element/button/index.html new file mode 100644 index 0000000000..985b66e882 --- /dev/null +++ b/files/ja/web/html/element/button/index.html @@ -0,0 +1,304 @@ +--- +title: '<button>: ボタン要素' +slug: Web/HTML/Element/button +tags: + - HTML + - HTML フォーム + - 'HTML:フローコンテンツ' + - 'HTML:対話型コンテンツ' + - 'HTML:知覚可能コンテンツ' + - 'HTML:記述コンテンツ' + - Reference + - ウェブ + - フォーム + - 要素 +translation_of: Web/HTML/Element/button +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><button></code> 要素</strong>はクリックできるボタンを表し、<a href="/ja/docs/Learn/HTML/Forms">フォーム</a>や、文書で単純なボタン機能が必要なあらゆる場所で使用することができます。</span>既定では、 HTML のボタンは {{Glossary("user agent", "ユーザーエージェント")}} が実行されているホストのプラットフォームのスタイルと似ていますが、 <a href="/ja/docs/Web/CSS">CSS</a> を使用してボタンの外見を変更することができます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/button.html", "tabbed-shorter")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>、<a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>、<a href="/ja/docs/Web/HTML/Content_categories#Interactive_content">対話型コンテンツ</a>、<a href="/ja/docs/Web/HTML/Content_categories#Form_listed">リスト化</a>、<a href="/ja/docs/Web/HTML/Content_categories#Form_labelable">ラベル付け可能</a>、<a href="/ja/docs/Web/HTML/Content_categories#Form_submittable">送信可能</a> な <a href="/ja/docs/Web/HTML/Content_categories#Form-associated_">フォーム関連要素</a>、知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>、但し<a href="/ja/docs/Web/HTML/Content_categories#Interactive_content">対話型コンテンツ</a>があってはならない</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素。</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>{{ARIARole("checkbox")}}, {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLButtonElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を持ちます。</p> + +<dl> + <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline(5)}}</dt> + <dd>論理属性で、ページ読み込み時に (ユーザーが例えば他のコントロールに入力するなどして動作を上書きしない限り)、入力<a href="/en-US/docs/Web/API/HTMLElement/focus">フォーカス</a>を持つべきボタンであることを指定します。文書中のフォーム関連要素のうちの一つだけにこの属性を指定することができます。</dd> + <dt>{{htmlattrdef("autocomplete")}} {{non-standard_inline}}</dt> + <dd>{{HTMLElement("button")}} 要素におけるこの属性は、 Firefox 独自の非標準属性です。Firefox の既定の動作は他のブラウザーと異なり、ページを再読み込みしても {{HTMLElement("button")}} を<a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">動的に無効化した状態を維持します</a>。 <code>autocomplete="off"</code> に設定すると、この機能が無効になります。 {{bug(654072)}} をご覧ください。</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd> + <p>論理属性で、ユーザーがボタンを操作することを抑止します。この属性が設定されていない場合、ボタンを内包する親要素の設定値を継承します。例えば、ボタンの祖先となる {{HTMLElement("fieldset")}} 要素などにも <strong>disabled</strong> 属性が指定されていないのであれば、この子要素であるボタンは使用可能のままであるということです。</p> + + <p>Firefox の動作は他のブラウザーと異なり、ページを再読み込みしても {{HTMLElement("button")}} を<a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">動的に無効化した状態を維持します</a>。この機能は {{htmlattrxref("autocomplete","button")}} 属性で制御できます。</p> + </dd> + <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt> + <dd>ボタンに関連付けられた {{HTMLElement("form")}} 要素 (<em>フォームオーナー</em>) です。属性値は同一文書内の <code><form></code> 要素の <code>id</code> 属性と同一の値にしなくてはなりません。この属性を設定しなかった場合は、祖先に <code><form></code> 要素が存在すれば、その要素に関連付けられます。この属性によって <code><form></code> 要素の子孫にするだけでなく、同一文書内にある任意の <code><form></code> 要素に <code><button></code> 要素を関連付けることが可能になりました。</dd> + <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline(5)}}</dt> + <dd>ボタンによって送信された情報を処理する URL です。指定した場合は、そのボタンの属するフォームの {{htmlattrxref("action","form")}} 属性よりも優先されます。</dd> + <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline(5)}}</dt> + <dd>ボタンを送信ボタンとして使用する場合、ブラウザーがフォーム情報をサーバーに送信するために使用するフォームデータのエンコード方法を指定します。以下の値が指定可能です。 + <ul> + <li><code>application/x-www-form-urlencoded</code>: 初期値。属性を指定していない場合、この値が使用されます。</li> + <li><code>multipart/form-data</code>: {{HTMLElement("input")}} 要素の {{htmlattrxref("type","input")}} 属性に <code>file</code> を指定して使用する場合に使用。</li> + <li><code>text/plain</code>: デバッグ目的で仕様書に追加されました。実用的なフォーム送信で使用するべきではありません。</li> + </ul> + + <p>この属性が指定されている場合、button 属性が紐付けられた form 要素 (form owner)の {{htmlattrxref("enctype","form")}} 属性より、ボタンのそれが優先されます。</p> + </dd> + <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline(5)}}</dt> + <dd>ボタンが送信ボタンである場合に、ブラウザーがフォーム情報を送信するために使用する <a href="/ja/docs/Web/HTTP/Methods">HTTP メソッド</a>です。以下の値が指定可能です。 + <ul> + <li><code>post</code>: フォームのデータは、サーバーへ送信する際に HTTP リクエストの本文に含められます。フォームにパスワードなどの公開するべきではない情報が含まれている場合は、このメソッドを使用してください。</li> + <li><code>get</code>: フォームのデータは、セパレーターとして '?' を使用してフォームの <code>action</code> の URL に追加され、その結果となる URL をサーバーへ送信します。検索フォームのように、まったく副作用がない場合にのみ、このメソッドを使用してください。</li> + </ul> + + <p>この属性が指定された場合、これはボタンのフォームオーナーの {{htmlattrxref("method","form")}} 属性より優先して使用されます。</p> + </dd> + <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline(5)}}</dt> + <dd>論理属性で、ボタンが送信ボタンである場合に、フォームデータ送信時に内容を<a href="/ja/docs/Learn/HTML/Forms/Form_validation">検証</a>しないように指定するものです。この属性が指定された場合、ボタンの属するフォームオーナーの {{htmlattrxref("novalidate","form")}} 属性より優先して使用されます。</dd> + <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline(5)}}</dt> + <dd>ボタンが送信ボタンである場合、フォームの送信後に受信したレスポンスを表示する場所を示すユーザー定義の名前、もしくはアンダースコアから始まる標準化されたキーワードです。これは、<em>閲覧コンテキスト</em> (タブ、ウィンドウ、インラインフレーム) の <code>name</code> またはそれを表すキーワードです。この属性が指定された場合、ボタンの属するフォームオーナーの {{htmlattrxref("target", "form")}} 属性より優先されます。以下のキーワードは特別な意味を持ちます。 + <ul> + <li><code>_self</code>: 同じ閲覧コンテキストにレスポンスデータを読み込みます。これは、属性が指定されていない場合の既定値です。</li> + <li><code>_blank</code>: 新しい無名の閲覧コンテキスト — 普通は、ブラウザーの設定に従い、新しいタブまたはウィンドウ — にレスポンスデータを読み込みます。</li> + <li><code>_parent</code>: 現在のコンテキストの親の閲覧コンテキストにレスポンスデータを読み込みます。親要素がない場合、このオプションは <code>_self</code> と同じ振る舞いをします。</li> + <li><code>_top</code>: 最上位の閲覧コンテキスト (現在のコンテキストの祖先で、それ以前の祖先をもたない閲覧コンテキスト) にレスポンスデータを読み込みます。親要素がない場合、このオプションは <code>_self</code> と同じ振る舞いをします。</li> + </ul> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>フォームデータの一部としてボタンの <code>value</code> との組み合わせで送信される、ボタンの名前です。</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>ボタンの種別。以下の値を指定可能です。 + <ul> + <li><code>submit</code>: 自身が属するフォームのデータをサーバーに送信するボタンとなります。これは <code>type</code> 属性が指定されていない場合、もしくは属性値が動的に空にされたり不正な値にされた場合の既定の動作です。</li> + <li><code>reset</code>: <code><input type="reset"></code> と同様に、すべてのコントロールを初期値にリセットするボタンです。</li> + <li><code>button</code>: ボタンには既定の動作がなく、押されても何も行いません。クライアントサイドスクリプトを要素のイベントに関連付けることで、イベントが発生したときに実行させます。</li> + </ul> + </dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>ボタンの初期値です。フォームデータと一緒に送信する際に、ボタンの <code>name</code> と関連付けられる値を定義します。この値は、フォームに送信する際にサーバーに引数として渡されます。</dd> +</dl> + +<h2 id="Notes" name="Notes">メモ</h2> + +<p><code><button></code> 要素は {{HTMLElement("input")}} 要素よりもずっと簡単に整形できます。 {{HTMLElement("input")}} が <code>value</code> 属性に文字列を設定することしかできないのに対し、内部に HTML コンテンツを追加できますし (<code><em></code>、 <code><strong></code> や <code><img></code> さえも)、複雑な描画のために {{Cssxref("::after")}} や {{Cssxref("::before")}} 疑似要素を使用することもできます。</p> + +<p>ボタンがサーバーにデータを送信するためのものでない場合は、 <code>button</code> に <code>type</code> 属性を設定することを忘れないでください。さもないと、フォームデータを送信して (存在しない) レスポンスを読み込み、文書の現在の状態を破棄してしまうおそれがあります。</p> + +<div class="blockIndicator warning"> +<p>Internet Explorer 7 には <code><button type="submit" name="myButton" value="foo">Click me</button></code> でフォームデータを送信したとき、 <code>POST</code> データが <code>myButton=foo</code> ではなく <code>myButton=Click me</code> として送信されるバグがあります。この問題は Internet Explorer 6 ではもっと悪く、ボタンを介してフォームデータを送信すると、 Internet Explorer 7 と同様の方法でフォーム内のすべてのボタンが送信されるバグもあります。このバグは Internet Explorer 8 で修正されました。</p> +</div> + +<div class="blockIndicator note"> +<p>Firefox の既定の動作は他のブラウザーと異なり、ページを再読み込みしても {{HTMLElement("button")}} を<a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">動的に無効化した状態を維持します</a>。 {{htmlattrxref("autocomplete","button")}} 属性の値を <code>off</code> にすると、この機能が無効になります。 {{bug(654072)}} をご覧ください。</p> +</div> + +<p>Android 版 Firefox のバージョン35より前では、すべてのボタンに既定でグラデーションの {{cssxref("background-image")}} を設定していました ({{bug(763671)}} をご覧ください)。これは <code>background-image: none</code> を使用して無効化できます。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:html"><button name="button">クリックしてね</button> +</pre> + +<p>{{ EmbedLiveSample('Example', 200, 64) }}</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> + +<h3 id="Icon_buttons" name="Icon_buttons">アイコンボタン</h3> + +<p>アイコンのみを使って機能を表現するボタンは、アクセシブル名を持ちません。アクセシブル名は読み上げソフトのような支援技術で文書を解析し、<a href="/ja/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">アクセシビリティツリー</a>を生成するときに、アクセスするためのプログラム的なフックを提供します。そのため、支援技術や移動やページコンテンツの操作にアクセシビリティツリーを使用します。</p> + +<p>アイコンボタンにアクセシブル名を与えるには、 <code><button></code> 要素でボタンの機能を簡潔に説明するテキスト文字列を提供してください。</p> + +<h4 id="Example_2" name="Example_2">例</h4> + +<pre><button name="favorite" type="button"> + <svg aria-hidden="true" viewBox="0 0 10 10"><path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z"/></svg> + お気に入りに追加 +</button> +</pre> + +<p>ボタンのテキストを、アクセシブルな方法で視覚的に隠したい場合は、 <a href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link">CSS プロパティの組み合わせ</a>を使用して画面から削除し、支援技術からは解析可能のままにします。</p> + +<p>しかし、ボタンのテキストを視覚的に見えるようにしておけば、アイコンの意味に慣れていない人がボタンの目的を理解できるようになります。これは特に、技術的に慣れていない人や、アイコンボタンが使用するアイコンの文化的解釈が異なる人に適しています。</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/">What is an accessible name? | The Paciello Group</a></li> + <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Robust#Guideline_4.1_—_Compatible_Maximize_compatibility_with_current_and_future_user_agents_including_assistive_technologies">MDN "WCAG を理解する ― ガイドライン 4.1 の解説"</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html">Understanding Success Criterion 4.1.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h3 id="Size_and_Proximity" name="Size_and_Proximity">大きさと近接性</h3> + +<h4 id="Size" name="Size">大きさ</h4> + +<p>ボタンなどの対話型要素は、容易にアクティブ化させることができるだけの大きさで提供するようにしてください。これは、動きが不自由な人、スタイラスや指のような正確性の低い形の入力を使用している人など、様々な人に役立ちます。 44×44 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels">CSS ピクセル</a>以上の操作のための大きさが推奨されています。</p> + +<ul> + <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1</a></li> + <li><a href="http://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Target Size and 2.5.5 | Adrian Roselli</a></li> + <li><a href="https://a11yproject.com/posts/large-touch-targets/">Quick test: Large touch targets - The A11Y Project</a></li> +</ul> + +<h4 id="Proximity" name="Proximity">近接性</h4> + +<p>たくさんの対話型コンテンツ — ボタンを含む — が互いに視覚的に接近して配置されるときは、それを隔てるために間隔を置いてください。間隔を置くことは、動きが不自由で誤った対話型コンテンツを有効化してしまうことがある人にとって有益です。</p> + +<p>間隔は {{cssxref("margin")}} などの CSS プロパティを使用して作成することができます。</p> + +<ul> + <li><a href="https://axesslab.com/hand-tremors/">Hand tremors and the giant-button-problem - Axess Lab</a></li> +</ul> + +<h3 id="Firefox">Firefox</h3> + +<p>Firefox はフォーカスされたボタンに小さな点線の境界線を表示します。この境界線はブラウザーのスタイルシートの CSS で宣言されていますが、 <code>button{{cssxref("::-moz-focus-inner")}} { }</code> を使用して独自のフォーカスのスタイルを追加すると上書きすることができます。</p> + +<p>上書きした場合は、弱視の人が知覚するのの十分なほど、<strong>フォーカスがボタンに移動したときの状態の変化が十分に大きいことを確認すること</strong>が重要です。</p> + +<p>色のコントラスト比は、テキスト及び背景色の明度の値を比較することで決定されます。現在の<a href="https://www.w3.org/WAI/intro/wcag">ウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG)</a> によれば、文字列コンテンツで 4.5:1 以上、大きめの文字列で 3:1 以上のコントラスト比が求められています。 (大きめの文字列とは、 {{cssxref("font-weight", "bold")}} の 18.66px 以上、または 24px 以上と定義されています。)</p> + +<ul> + <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li> + <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h3 id="Clicking_and_focus" name="Clicking_and_focus">クリックとフォーカス</h3> + +<p>{{HTMLElement("button")}} をクリックしたときに (既定で) フォーカスを得るかは、ブラウザーおよび OS により異なります。{{HTMLElement("input")}} 要素では <code>type="button"</code>、<code>type="submit"</code> ともに同じ動作になります。</p> + +<table> + <caption>{{HTMLElement("button")}} をクリックするとフォーカスを得るかどうか</caption> + <thead> + <tr> + <th>デスクトップ版ブラウザー</th> + <th>Windows 8.1</th> + <th>OS X 10.X</th> + </tr> + </thead> + <tbody> + <tr> + <th>Firefox</th> + <td class="bc-supports-yes">はい - Firefox 30.0</td> + <td class="bc-supports-no">いいえ (<code>tabindex</code> がある場合でも) Firefox 63</td> + </tr> + <tr> + <th>Chrome</th> + <td class="bc-supports-yes">はい - Chrome 35</td> + <td class="bc-supports-yes">はい - Chrome 65</td> + </tr> + <tr> + <th>Safari</th> + <td style="background: #eee;">N/A</td> + <td class="bc-supports-no">いいえ (<code>tabindex</code> がある場合でも) Safari 12</td> + </tr> + <tr> + <th>Internet Explorer</th> + <td class="bc-supports-yes">はい - Internet Explorer 11</td> + <td style="background: #eee;">N/A</td> + </tr> + <tr> + <th>Presto</th> + <td class="bc-supports-yes">はい - Opera 12</td> + <td class="bc-supports-yes">はい - Opera 12</td> + </tr> + </tbody> +</table> + +<table> + <caption>{{HTMLElement("button")}} をタップするとフォーカスを得るかどうか</caption> + <thead> + <tr> + <th>モバイル版ブラウザー</th> + <th>iOS 7.1.2</th> + <th>Android 4.4.4</th> + </tr> + </thead> + <tbody> + <tr> + <th>Safari Mobile</th> + <td class="bc-supports-no">いいえ (<code>tabindex</code> がある場合でも)</td> + <td style="background-color: #eeeeee;">N/A</td> + </tr> + <tr> + <th>Chrome 35</th> + <td class="bc-supports-no">いいえ (<code>tabindex</code> がある場合でも)</td> + <td class="bc-supports-yes">はい</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-button-element', '<button>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-button-element', '<button>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.5', '<button>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.button")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<p>フォーム作成に用いるその他の要素: {{HTMLElement("form")}}, {{HTMLElement("datalist")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}}, {{HTMLElement("meter")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}</p> diff --git a/files/ja/web/html/element/canvas/index.html b/files/ja/web/html/element/canvas/index.html new file mode 100644 index 0000000000..4bc12f67ca --- /dev/null +++ b/files/ja/web/html/element/canvas/index.html @@ -0,0 +1,201 @@ +--- +title: '<canvas>: グラフィックキャンバス要素' +slug: Web/HTML/Element/canvas +tags: + - Canvas + - Element + - HTML + - HTML scripting + - HTML5 + - Reference + - Web +translation_of: Web/HTML/Element/canvas +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><canvas></code> 要素</strong> と <a href="/ja/docs/Web/API/Canvas_API">Canvas スクリプティング API</a> や <a href="/ja/docs/Web/API/WebGL_API">WebGL API</a> を使用して、グラフィックやアニメーションを描画することができます。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Embedded_content">埋め込みコンテンツ</a>, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>透過的コンテンツ、ただし子孫に<a href="/ja/docs/Web/HTML/Content_categories#Interactive_content">対話型コンテンツ</a>のうち {{HTMLElement("a")}} 要素, {{HTMLElement("button")}} 要素, {{HTMLElement("input")}} 要素の {{htmlattrxref("type", "input")}} 属性が <code>checkbox</code>, <code>radio</code>, <code>button</code> のいずれか以外を含まないもの</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLCanvasElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>他のすべての HTML 要素と同様に、<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を持ちます。</p> + +<dl> + <dt>{{htmlattrdef("height")}}</dt> + <dd>CSS ピクセルで示した座標空間の高さ。既定では150ピクセルに設定されています。</dd> + <dt>{{htmlattrdef("moz-opaque")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>canvas に半透明性がファクターになるかを知らせます。キャンバスは半透明性がないことがわかっていれば、描画パフォーマンスを最適化できます。これは Mozilla ベースのブラウザーしか対応していません。代わりに標準化された {{domxref("HTMLCanvasElement.getContext()", "canvas.getContext('2d', { alpha: false })")}} を使用してください。</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>CSS ピクセルで示した座標空間の幅。既定では300ピクセルに設定されています。</dd> +</dl> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<h3 id="Alternative_content" name="Alternative_content">代替コンテンツ</h3> + +<p><code><canvas></code> のブロックの中で、代替コンテンツを提供することが可能 (また、提供すべき) です。その内容物は、 canvas に対応しない古いブラウザーおよび JavaScript が無効であるブラウザーで描画されます。有用な代替テキストやサブ DOM のヘルプを提供すると、<a href="/ja/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">キャンバスがよりアクセシブルになります</a>。</p> + +<h3 id="Required_<canvas>_tag" name="Required_<canvas>_tag"></canvas> タグが必要</h3> + +<p>{{HTMLElement("img")}} 要素とは異なり、 {{HTMLElement("canvas")}} 要素は終了タグ (<code></canvas></code>) が<strong>必要です</strong>。</p> + +<h3 id="Sizing_the_canvas_using_CSS_versus_HTML" name="Sizing_the_canvas_using_CSS_versus_HTML">CSS と HTML におけるキャンバスの寸法指定の違い</h3> + +<p>表示されるキャンバスの寸法は、スタイルシートを用いて変更できますが、そうすると画像はスタイルで設定した寸法に合うように拡大縮小され、最終的なグラフィックが歪んで表示されることがあります。</p> + +<p>キャンバスの寸法は、 HTML または JavaScript を用いて <code>width</code> および <code>height</code> 属性を <code><canvas></code> 要素に直接設定するした方がいいでしょう。</p> + +<h3 id="Maximum_canvas_size" name="Maximum_canvas_size">キャンバスの最大寸法</h3> + +<p><code><canvas></code> 要素の最大寸法はとても広いのですが、正確な寸法はブラウザーに依存します。以下のものは様々なテストやその他の情報源 (<a href="https://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element">Stack Overflow</a> など) から収集したいくらかのデータです。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">ブラウザー</th> + <th scope="col">最大高</th> + <th scope="col">最大幅</th> + <th scope="col">最大面積</th> + </tr> + </thead> + <tbody> + <tr> + <td>Chrome</td> + <td>32,767 pixels</td> + <td>32,767 pixels</td> + <td>268,435,456 pixels (つまり 16,384 x 16,384)</td> + </tr> + <tr> + <td>Firefox</td> + <td>32,767 pixels</td> + <td>32,767 pixels</td> + <td>472,907,776 pixels (つまり 22,528 x 20,992)</td> + </tr> + <tr> + <td>Safari</td> + <td>32,767 pixels</td> + <td>32,767 pixels</td> + <td>268,435,456 pixels (つまり 16,384 x 16,384)</td> + </tr> + <tr> + <td>IE</td> + <td>8,192 pixels</td> + <td>8,192 pixels</td> + <td>?</td> + </tr> + </tbody> +</table> + +<div class="blockIndicator note"> +<p><strong>注</strong>: 寸法や面積の最大値を超えると、キャンバスが使用できなくなります。 — 描画コマンドが動作しなくなります。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="HTML">HTML</h3> + +<p>このコードスニペットは、 HTML 文書に canvas 要素を追加します。ブラウザーがキャンバスをレンダリングできない場合や、キャンバスを読み込めない場合には、代替テキストが提供されます。</p> + +<pre class="brush: html notranslate"><canvas width="300" height="300"> + キャンバスの表示内容を説明する代替テキストです。 +</canvas> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<p>それから JavaScript コード内で {{domxref("HTMLCanvasElement.getContext()")}} を呼び出して描画コンテキストを取得し、キャンバス上に描画を開始します。</p> + +<pre class="brush: js notranslate">const canvas = document.querySelector('canvas'); +const ctx = canvas.getContext('2d'); +ctx.fillStyle = 'green'; +ctx.fillRect(10, 10, 100, 100);</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample('Examples')}}</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> + +<h3 id="Alternative_content_2" name="Alternative_content_2">代替コンテンツ</h3> + +<p><code>canvas</code> 要素は単なるビットマップであり、描かれたオブジェクトに関する情報は提供しません。キャンバスのコンテンツには、セマンティック HTML のようなアクセシビリティツールには公開されていません。一般的に、アクセシビリティに配慮したウェブサイトやアプリではキャンバスを使用しないでください。アクセシビリティを改善するには、以下のガイドが役立ちます。</p> + +<ul> + <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">MDN ヒット領域とアクセシビリティ</a></li> + <li><a href="https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases">Canvas accessibility use cases</a></li> + <li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Canvas element accessibility issues</a></li> + <li><a href="https://developer.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/">HTML5 Canvas Accessibility in Firefox 13 – by Steve Faulkner</a></li> + <li><a href="https://html.spec.whatwg.org/multipage/scripting.html#best-practices">Best practices for interactive canvas elements</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics-scripting.html#the-canvas-element', '<canvas>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.canvas")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Canvas_API">MDN の canvas ポータル</a></li> + <li><a href="/ja/docs/Web/API/Canvas_API/Tutorial">Canvas チュートリアル</a></li> + <li><a href="https://simon.html5.org/dump/html5-canvas-cheat-sheet.html">Canvas チートシート</a></li> + <li><a href="/ja/demos/tag/tech:canvas">Canvas に関するデモ</a></li> + <li><a href="https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/HTML-canvas-guide/Introduction/Introduction.html">Apple によるキャンバスの紹介</a></li> +</ul> diff --git a/files/ja/web/html/element/caption/index.html b/files/ja/web/html/element/caption/index.html new file mode 100644 index 0000000000..61d20c88ee --- /dev/null +++ b/files/ja/web/html/element/caption/index.html @@ -0,0 +1,172 @@ +--- +title: '<caption>: 表キャプション要素' +slug: Web/HTML/Element/caption +tags: + - Element + - HTML + - HTML Tables + - HTML tabular data + - Reference + - Table Captions + - Table Titles + - Tables + - Web + - caption +translation_of: Web/HTML/Element/caption +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><caption></code> 要素</strong>は、表のキャプション (またはタイトル) を指定します。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/caption.html", "tabbed-taller")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td>なし</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>要素の直後に ASCII 空白文字やコメントが続かない場合、終了タグは省略可能です。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>{{HTMLElement("table")}} 要素。table 要素の最初の子要素としてのみ配置可能。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>許可されている <code>role</code> なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLTableCaptionElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a> を持ちます。</p> + +<h3 id="Deprecated_attributes" name="Deprecated_attributes">非推奨の属性</h3> + +<p>以下の属性は非推奨であり、使用するべきではありません。以下に記述しているのは、既存コードを更新する際の参考や、歴史的な関心としてのためのみです。</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecated_inline}}</dt> + <dd>この列挙属性は caption 要素の、自身の指し示す table 要素を基準とした相対的な位置を指定します。以下の値を指定できます。 + <dl> + <dt><code>left</code></dt> + <dd>キャプションを表の左側に表示します。</dd> + <dt><code>top</code></dt> + <dd>キャプションを表の上側に表示します。</dd> + <dt><code>right</code></dt> + <dd>キャプションを表の右側に表示します。</dd> + <dt><code>bottom</code></dt> + <dd>キャプションを表の下側に表示します。</dd> + </dl> + + <div class="note"><strong>使用上の注意:</strong> この属性は非推奨ですので使用しないでください。 {{HTMLElement("caption")}} 要素にスタイルを適用するには、 <a href="/ja/docs/Web/CSS">CSS</a> プロパティの {{cssxref("caption-side")}} および {{cssxref("text-align")}} を使用してください。</div> + </dd> +</dl> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<p><code><caption></code> 要素は親である {{htmlelement("table")}} 要素の最初の子としてください。</p> + +<p><code><table></code> 要素が {{HTMLElement("figure")}} 要素の唯一の子孫である場合は、 {{HTMLElement("figcaption")}} 要素を <code><caption></code> の代わりに使用してください。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>このシンプルな例は、キャプションを含む票を表します。</p> + +<pre class="brush: html notranslate"><table> + <caption>Example Caption</caption> + <tr> + <th>Login</th> + <th>Email</th> + </tr> + <tr> + <td>user1</td> + <td>user1@sample.com</td> + </tr> + <tr> + <td>user2</td> + <td>user2@sample.com</td> + </tr> +</table></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">caption { + caption-side: top; + align: right; +} +table { + border-collapse: collapse; + border-spacing: 0px; +} +table, th, td { + border: 1px solid black; +} +</pre> +</div> + +<p>{{EmbedLiveSample('Example', 650, 100)}}</p> + +<p><code>table {background: red;}</code> ではキャプションは変更されません。そのためには <code>display: block</code> が必要です。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'tables.html#the-caption-element', '<caption>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-caption-element', '<caption>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.2', '<caption>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.caption")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("caption")}} 要素の align 属性 の代替となる CSS プロパティ: + <ul> + <li>{{cssxref("text-align")}}, {{cssxref("caption-side")}}</li> + </ul> + </li> +</ul> diff --git a/files/ja/web/html/element/center/index.html b/files/ja/web/html/element/center/index.html new file mode 100644 index 0000000000..7cbf29d11b --- /dev/null +++ b/files/ja/web/html/element/center/index.html @@ -0,0 +1,61 @@ +--- +title: '<center>: 文字列の中央揃え要素 (廃止)' +slug: Web/HTML/Element/center +tags: + - Deprecated + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/center +--- +<div>{{obsolete_header()}}</div> + +<p><span class="seoSummary">廃止済みの <strong>HTML の中央揃え要素</strong> (<strong><code><center></code></strong>) は、中に含まれるブロックレベルまたはインラインコンテンツを中央揃えして表示する<a href="/ja/docs/Web/HTML/Block-level_elements" title="HTML/Block-level_elements">ブロックレベル要素</a>です。</span>コンテナーはふつう {{HTMLElement("body")}} ですが、必ずしもそうとは限りません。</p> + +<p>このタグは HTML 4 (及び XHTML 1) で非推奨要素に指定され、 <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a> の {{Cssxref("text-align")}} プロパティを {{HTMLElement("div")}} 要素に適用するか、それぞれの {{HTMLElement("p")}} 要素に適用する方式が採用されました。ブロックを中央揃えするには、別な CSS プロパティである {{Cssxref("margin-left")}} および {{Cssxref("margin-right")}} など用いて、値を <code>auto</code> に設定してください（または、 {{Cssxref("margin")}} を <code>0 auto</code> に設定してください）。</p> + +<h2 id="DOM_Interface" name="DOM_Interface">DOM インタフェース</h2> + +<p>この要素は {{domxref("HTMLElement")}} インタフェースを実装しています。</p> + +<div class="note"> +<p><strong>実装メモ: </strong>Gecko 1.9.2 以前 (Firefox) は、この要素に {{domxref("HTMLSpanElement")}} インタフェースを実装しています。</p> +</div> + +<h2 id="Example_1" name="Example_1">例1</h2> + +<pre class="brush: html"><center>This text will be centered. +<p>So will this paragraph.</p></center> +</pre> + +<h2 id="Example_2" name="Example_2">例2 （CSSでの方法）</h2> + +<pre class="brush: html"><div style="text-align:center">This text will be centered. +<p>So will this paragraph.</p></div> +</pre> + +<h3 id="Example_3" name="Example_3">例3 （CSSでの方法）</h3> + +<pre class="brush: html"><p style="text-align:center">This line will be centered.<br> +And so will this line.</p> +</pre> + +<h2 id="Notes" name="Notes">メモ</h2> + +<p>{{Cssxref("text-align")}}<code>:center</code> を {{HTMLElement("div")}} または {{HTMLElement("p")}} 要素に適用すると、その<em>コンテンツ</em>を中央揃えにしますが、コンテンツの寸法はどれも変更されません。</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.center")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{Cssxref("text-align")}}</li> + <li>{{Cssxref("display")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ja/web/html/element/cite/index.html b/files/ja/web/html/element/cite/index.html new file mode 100644 index 0000000000..47c9c2feed --- /dev/null +++ b/files/ja/web/html/element/cite/index.html @@ -0,0 +1,154 @@ +--- +title: '<cite>: 引用元要素' +slug: Web/HTML/Element/cite +tags: + - Attribution + - Citation + - Citing References + - Citing Works + - Element + - HTML + - HTML text-level semantics + - Quotations + - Reference + - Web +translation_of: Web/HTML/Element/cite +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の引用元要素</strong> (<strong><code><cite></code></strong>) は、引用された創作物の参照を表し、作品のタイトルを含む必要があります。参照は、引用メタデータに関する利用場面に合わせた慣習に応じて省略形が用いられることがあります。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/cite.html", "tabbed-standard")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}。Gecko 1.9.2 (Firefox 4) 以前では、この要素には {{domxref("HTMLSpanElement")}} インターフェイスが実装されています。</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes" rel="internal">グローバル属性</a>のみを持ちます。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<p><code><cite></code> 要素の文脈では、例えば以下のような創作物のうちの一つを引用することができます。</p> + +<div class="threecolumns" id="creative-works"> +<ul> + <li>書籍</li> + <li>研究論文</li> + <li>エッセイ</li> + <li>詩</li> + <li>楽譜</li> + <li>歌</li> + <li>演劇や映画の台本</li> + <li>映画</li> + <li>テレビ番組</li> + <li>ゲーム</li> + <li>彫刻</li> + <li>絵画</li> + <li>舞台作品</li> + <li>演劇</li> + <li>オペラ</li> + <li>ミュージカル</li> + <li>展示</li> + <li>事件報告書</li> + <li>コンピュータープログラム</li> + <li>ウェブサイト</li> + <li>ウェブページ</li> + <li>ブログ投稿やコメント</li> + <li>フォーラム投稿やコメント</li> + <li>ツイート</li> + <li>Facebook 投稿</li> + <li>記述された、または口頭の声明</li> + <li>その他</li> +</ul> +</div> + +<p>注目すべきこととして、 W3C の仕様書では、 <code><cite></code> 要素に含められる創作物の参照には、作者名を含めてよいとしています。しかし、 WHATWG における <code><cite></code> の仕様では逆に、どのような場合でも人名を含めてはならないとしています。</p> + +<p>{{HTMLElement("blockquote")}} 要素や {{HTMLElement("q")}} 要素によって引用された素材の情報源の出典を記述するには、これらの要素の {{htmlattrxref("cite", "blockquote")}} 属性を使用してください。</p> + +<p>通常、ブラウザーは既定で <code><cite></code> に斜体を適用します。これを防ぐには、要素で既定のイタリックスタイルが使用されるのを避けるには、 <code><cite></code> 要素に CSS の {{cssxref("font-style")}} プロパティを適用してください。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: html notranslate">より詳しい情報については <cite>[ISO-0000]</cite> に記載されています。</pre> + +<p>以下のように出力されます。</p> + +<p>{{EmbedLiveSample("Example", 640, 60)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-cite-element', '<cite>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-cite-element', '<cite>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<cite>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.cite")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("blockquote")}} 要素は長い引用に使用します。</li> + <li>{{HTMLElement("q")}} 要素は行内の引用に使用します。</li> +</ul> diff --git a/files/ja/web/html/element/code/index.html b/files/ja/web/html/element/code/index.html new file mode 100644 index 0000000000..72dbc333bf --- /dev/null +++ b/files/ja/web/html/element/code/index.html @@ -0,0 +1,120 @@ +--- +title: '<code>: 行内コード要素' +slug: Web/HTML/Element/code +tags: + - Code + - Element + - HTML + - HTML text-level semantics + - Inline Code + - Reference + - Web +translation_of: Web/HTML/Element/code +--- +<div>{{HTMLRef}}</div> + +<p id="Summary"><span class="seoSummary"><strong>HTML の <code><code></code> 要素</strong>は、コンピューターコードの短い断片の文字列であると識別できるような外見のコンテンツを表示します。</span>既定では、中の文字列が{{Glossary("user agent", "ユーザーエージェント")}}の既定の等幅フォントを使用して表示されます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/code.html", "tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}。Gecko 1.9.2 (Firefox 4) 以前では、この要素には {{domxref("HTMLSpanElement")}} インターフェイスが実装されています。</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>以外の属性はありません。</p> + +<h2 id="Example" name="Example">例</h2> + +<p><code><code></code> を含むテキストの段落です。</p> + +<pre class="brush: html notranslate"><p>The function <code>selectAll()</code> highlights all the text in the +input field so the user can, for example, copy or delete the text.</p> +</pre> + +<p>この HTML によって生成される出力は以下のようになります。</p> + +<p>{{EmbedLiveSample("Example", 640, 70)}}</p> + +<h2 id="Notes" name="Notes">補足</h2> + +<p>複数行のコードを表すには、 <code><code></code> 要素を {{HTMLElement("pre")}} 要素の中に入れてください。 <code><code></code> 要素自身は、コードの単一のフレーズや1行のみを表します。</p> + +<p>CSS の規則によって、 <code>code</code> セレクターを定義して、ブラウザーの既定のフォントを上書きすることができます。ユーザーによる設定を CSS による指定より優先させることもできます。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-code-element', '<code>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-code-element', '<code>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<code>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.code")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("samp")}}</li> + <li>{{HTMLElement("kbd")}}</li> + <li>{{HTMLElement("command")}} (非推奨)</li> + <li>{{HTMLElement("var")}}</li> + <li>{{HTMLElement("pre")}}</li> +</ul> diff --git a/files/ja/web/html/element/col/index.html b/files/ja/web/html/element/col/index.html new file mode 100644 index 0000000000..252d9f7bd3 --- /dev/null +++ b/files/ja/web/html/element/col/index.html @@ -0,0 +1,177 @@ +--- +title: <col> +slug: Web/HTML/Element/col +tags: + - Element + - HTML + - HTML tabular data + - Reference + - Tables + - Web +translation_of: Web/HTML/Element/col +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><col></code> 要素</strong>は、表内の列を定義して、すべての一般セルに共通の意味を定義するために使用します。この要素は通常、 {{HTMLElement("colgroup")}} 要素内にみられます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/col.html","tabbed-taller")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<p><code><col></code> では CSS を使用して列にスタイルを設定できますが、列に対して効果があるプロパティは限定されています (<a href="https://www.w3.org/TR/CSS21/tables.html#columns">CSS 2.1 仕様書</a> をご覧ください)。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td>なし</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>なし。これは{{Glossary("empty element", "空要素")}}です。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>開始タグは必須ですが、終了タグを置いてはいけません。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>{{HTMLElement("colgroup")}} のみ。ただし開始タグが必須ではないため暗黙的に定義されることがあります。 {{HTMLElement("colgroup")}} 要素は {{htmlattrxref("span", "colgroup")}} 属性を持っていてはいけません。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>許可されている <code>role</code> なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLTableColElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{htmlattrdef("span")}}</dt> + <dd>この属性は正の整数で、 <code><col></code> 要素がまたがる列の数を示します。存在しない場合、既定値は <code>1</code> です。</dd> +</dl> + +<h3 id="Deprecated_attributes" name="Deprecated_attributes">非推奨の属性</h3> + +<p>以下の属性は非推奨であり、使用すべきではありません。これらの属性は、既存のコードを更新する際の参考として、また歴史的な興味のためだけに、以下に文書化されています。</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecated_inline}}</dt> + <dd>この列挙属性は、各列の内容物の水平方向の配置方法を制御します。以下の値が指定可能です。 + <ul> + <li><code>left</code> : 内容物をセルの左側に揃えます。</li> + <li><code>center</code> : 内容物をセル内で中央揃えにします。</li> + <li><code>right</code> : 内容物をセルの右側に揃えます。</li> + <li><code>justify</code>: 内容物がセル内で両端揃えになるように、テキストコンテンツに空白を挿入します。</li> + </ul> + + <p>この属性が設定されていない場合、その値は <code><col></code> 要素が属する {{HTMLElement("colgroup")}} 要素の {{htmlattrxref("align", "colgroup")}} 属性から継承します。それも存在しない場合は、<code>left</code> 値であるものとします。</p> + + <div class="note"><strong>補足:</strong> + + <ul> + <li>値 <code>left</code>、<code>center</code>、<code>right</code>、<code>justify</code> と同じ効果を得る方法: + + <ul> + <li>{{cssxref("text-align")}} プロパティを <code><col></code> 要素を与えたセレクターに設定しようとしてはいけません。 {{HTMLElement("td")}} 要素は <code><col></code> 要素の子孫ではないため、プロパティを継承しません。</li> + <li>表で {{htmlattrxref("colspan", "td")}} 属性を使用していない場合は、<code>td:nth-child(an+b)</code> CSS セレクターを使用してください。 <code>a</code> を 0 に、<code>b</code> を表内の列の位置を示す序数にします。例えば <code>td:nth-child(2) { text-align: right; }</code> は、2 列目を右揃えにします。</li> + <li>表で {{htmlattrxref("colspan", "td")}} 属性を使用している場合は <code>[colspan=n]</code> のような、十分な CSS 属性セレクターの組み合わせで実現できますが、容易ではありません。</li> + </ul> + </li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt> + <dd> + <p>表の背景色です。この属性は、列の各セルの背景色を定義します。 <a href="/ja/docs/Web/CSS/color_value#RGB_colors">6桁の16進数の RGB コード</a>の前に '<code>#</code>' が付いた形です。定義済みの<a href="/ja/docs/Web/CSS/color_value#Color_keywords">色キーワード</a>のうちの一つも使用できます。</p> + + <p>同様の効果を得るには、 CSS の {{cssxref("background-color")}} プロパティを使用してください。</p> + </dd> + <dt>{{htmlattrdef("char")}} {{deprecated_inline}}</dt> + <dd>この属性は、列内のセルで揃える文字を設定します。よく使用する値としては、数値や金額を揃えるときのピリオド (.) があります。 {{htmlattrxref("align", "col")}} 属性が <code>char</code> ではない場合は、この属性は無視されます。</dd> + <dt>{{htmlattrdef("charoff")}} {{deprecated_inline}}</dt> + <dd>この属性は、 <code>char</code> 属性で指定された揃え文字からその列のデータをオフセットする文字数を示します。</dd> + <dt>{{htmlattrdef("valign")}} {{deprecated_inline}}</dt> + <dd>この属性は、その列のそれぞれのセルの中にある内容物の垂直方向の配置方法を指定します。以下の値が指定可能です。 + <ul> + <li><code>baseline</code> : テキストを可能な限りセルの下端に近づけますが、下端ではなく文字の<a class="external" href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">ベースライン</a>に揃えます。文字がサイズ全体に渡る場合は、 <code>bottom</code> と同じ効果になります。</li> + <li><code>bottom</code> : テキストを可能な限りセルの下端に近づけて配置します。</li> + <li><code>middle</code> : テキストをセルの中央部に置きます。</li> + <li>and <code>top</code> : テキストを可能な限りセルの上端に近づけて配置します。</li> + </ul> + + <div class="note"><strong>補足:</strong> + + <ul> + <li>{{cssxref("vertical-align")}} プロパティを、 <code><col></code> 要素を与えたセレクターに設定しようとしてはいけません。{{HTMLElement("td")}} 要素は <code><col></code> 要素の子孫ではないため、プロパティを継承しません。</li> + <li>表で {{htmlattrxref("colspan", "td")}} 属性を使用していない場合は、 CSS の <code>td:nth-child(an+b)</code> セレクターを使用してください。a は表内の列数、b は表内の列の位置を示す序数です。このセレクターの後でのみ <code>vertical-align</code> プロパティを使用することができます。</li> + <li>表で {{htmlattrxref("colspan", "td")}} 属性を使用している場合は <code>[colspan=n]</code> のような、十分な CSS 属性セレクターの組み合わせで実現できますが、容易ではありません。</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("width")}} {{deprecated_inline}}</dt> + <dd>この属性は、現在の列グループ内の各列に既定の幅を指定します。標準的なピクセル値やパーセント値に加えて、この属性は特別な書式である <code>0*</code> も使用できます。これはグループ内の各列の幅を、列の内容物を保持するのに必要最小限の幅にします。<code>5*</code> のような幅の相対値も使用できます。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<p>{{HTMLElement("table")}} ページに <code><col></code> 要素の使用例があります。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'tables.html#the-col-element', '<col>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-col-element', '<col>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.4.2', '<col>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.col")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><code><col></code> 要素のスタイル設定に特に役立つであろう CSS プロパティと擬似クラス: + + <ul> + <li>列の幅を制御するための {{cssxref("width")}} プロパティ</li> + <li>列内のセルの配置を設定するための {{cssxref(":nth-child")}} 擬似クラス</li> + <li>すべてのセル内コンテンツを '.' などの同一文字で揃えるための {{cssxref("text-align")}} プロパティ</li> + </ul> + </li> +</ul> diff --git a/files/ja/web/html/element/colgroup/index.html b/files/ja/web/html/element/colgroup/index.html new file mode 100644 index 0000000000..89d4786c22 --- /dev/null +++ b/files/ja/web/html/element/colgroup/index.html @@ -0,0 +1,183 @@ +--- +title: <colgroup> +slug: Web/HTML/Element/colgroup +tags: + - Element + - HTML + - HTML tabular data + - Reference + - Tables + - Web +translation_of: Web/HTML/Element/colgroup +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><colgroup></code> 要素</strong>は、表内の列のグループを定義します。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/colgroup.html","tabbed-taller")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td>なし</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>{{htmlattrxref("span", "colgroup")}} 属性を与えた場合: なし。これは{{Glossary("empty element", "空要素")}}です。<br> + span 属性を与えない場合: 0 個以上の {{HTMLElement("col")}} 要素。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>最初の子要素が {{HTMLElement("col")}} 要素であり、かつ終了タグを省略した {{HTMLElement("colgroup")}} 要素が前にない場合は、開始タグを省略できます。<br> + 空白またはコメントが後にない場合は、終了タグを省略できます。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>{{HTMLElement("table")}} 要素。{{HTMLElement("colgroup")}} は省略可能な {{HTMLElement("caption")}} 要素より後、かつ {{HTMLElement("thead")}}, {{HTMLElement("th")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("tr")}} の各要素より前に置かなければなりません。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>許可されている <code>role</code> なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLTableColElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を持っています。</p> + +<dl> + <dt>{{htmlattrdef("span")}}</dt> + <dd>この属性は正の整数で、 <code><colgroup></code> 要素がまたがる列の数を示します。存在しない場合の既定値は <code>1</code> です。 + <div class="note"><strong>注:</strong> この属性は列グループの属性に適用され、それに関連付けられた CSS のスタイル付け規則には影響を与えず、さらに、列グループのメンバーのセルにも影響を与えません。 + <ul> + <li><code>span</code> 属性は、1つ以上の <code><col></code> 要素が <code><colgroup></code> の中にある場合は許可されていません。</li> + </ul> + </div> + </dd> +</dl> + +<h3 id="Deprecated_attributes" name="Deprecated_attributes">非推奨の属性</h3> + +<p>以下の属性は非推奨であり、使用すべきではありません。これらの属性は、既存のコードを更新する際の参考として、また歴史的な興味のためだけに、以下に文書化されています。</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecated_inline}}</dt> + <dd>この列挙属性は、各列の内容物の水平方向の配置方法を制御します。以下の値が指定可能です。 + <ul> + <li><code>left</code> : 内容物をセルの左側に揃えます。</li> + <li><code>center</code> : 内容物をセル内で中央揃えにします。</li> + <li><code>right</code> : 内容物をセルの右側に揃えます。</li> + <li><code>justify</code>: 内容物がセル内で両端揃えになるように、テキストコンテンツに空白を挿入します。</li> + <li><code>char</code> : テキストコンテンツを特定の文字に対して、最小のオフセットで揃えます。特定の文字は {{htmlattrxref("char", "col")}} 属性および {{htmlattrxref("charoff", "col")}} 属性で定義します。</li> + </ul> + + <p>この属性が設定されていない場合は、<code>left</code> 値であるものとします。子孫の {{HTMLElement("col")}} 要素は自身の {{htmlattrxref("align", "col")}} 属性を使用して、この値を上書きできます。</p> + + <div class="note"><strong>注:</strong> + + <ul> + <li>{{cssxref("text-align")}} プロパティを、 {{HTMLElement("colgroup")}} 要素を与えたセレクターに設定しようとしてはいけません。 {{HTMLElement("td")}} 要素は {{HTMLElement("colgroup")}} 要素の子孫ではないため、プロパティを継承しません。</li> + <li>表で {{htmlattrxref("colspan", "td")}} 属性を使用していない場合は、列ごとに 1 つずつ <code>td:nth-child(an+b)</code> CSS セレクターを使用してください。a は表内の列数、b は表内の列の位置を示す序数です。このセレクターの後でのみ <code>text-align</code> プロパティを使用できます。</li> + <li>値 <code>char</code> と同じ効果を得るには、CSS3 では {{cssxref("text-align")}} プロパティの値として {{htmlattrxref("char", "colgroup")}} の値を使用します。{{unimplemented_inline}}</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt> + <dd> + <p>表の背景色です。この属性は、列の各セルの背景色を定義します。 <a href="/ja/docs/Web/CSS/color_value#RGB_colors">6桁の16進数の RGB コード</a>の前に '<code>#</code>' が付いた形です。定義済みの<a href="/ja/docs/Web/CSS/color_value#Color_keywords">色キーワード</a>の一つも使用できます。</p> + + <p>同様の効果を得るには、 CSS の {{cssxref("background-color")}} プロパティを使用してください。</p> + </dd> + <dt>{{htmlattrdef("char")}} {{deprecated_inline}}</dt> + <dd>この属性は、列グループ内の内容をある文字へ整列することを指定します。典型的な値としては、数字や金額を整列させようとするときのピリオド (.) があります。 {{htmlattrxref("align", "colgroup")}} が <code>char</code> に設定されていない場合、この属性は無視されますが、この列グループのメンバーである {{HTMLElement("col")}} の {{htmlattrxref("align", "col")}} の既定値として使用されます。</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("charoff")}} {{deprecated_inline}}</dt> + <dd>この属性は、<code>char</code> 属性で指定した揃え文字から列のデータをオフセットする文字数を示します。</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("valign")}} {{deprecated_inline}}</dt> + <dd>この属性は、各列の内容物の垂直方向の配置方法を制御します。以下の値が指定可能です。 + <ul> + <li><code>baseline</code> : テキストを可能な限りセルの下端に近づけますが、下端ではなく文字の <a class="external" href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">ベースライン</a> に揃えます。文字がサイズ全体に渡る場合は、<code>bottom</code> と同じ効果になります。</li> + <li><code>bottom</code> : テキストを可能な限りセルの下端に近づけて配置します。</li> + <li><code>middle</code> : テキストをセルの中央部に置きます。</li> + <li>and <code>top</code> : テキストを可能な限りセルの上端に近づけて配置します。</li> + </ul> + + <div class="note"><strong>注:</strong> + + <ul> + <li>{{cssxref("vertical-align")}} プロパティを、 <code><colgroup></code> 要素を与えたセレクターに設定しようとしてはいけません。{{HTMLElement("td")}} 要素は <code><colgroup></code> 要素の子孫ではないため、プロパティを継承しません。</li> + <li>表で {{htmlattrxref("colspan", "td")}} 属性を使用していない場合は、<code>td:nth-child(an+b)</code> CSS セレクターを使用してください。 a は表の列数、 b は表内の列の位置を示す序数です。このセレクターの後でのみ <code>vertical-align</code> プロパティを使用できます。</li> + <li>表で {{htmlattrxref("colspan", "td")}} 属性を使用している場合は <code>[colspan=n]</code> のような、十分な CSS 属性セレクターの組み合わせで実現できますが、容易ではありません。</li> + </ul> + </div> + </dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code><colgroup></code> 要素の使用例については、{{HTMLElement("table")}} 要素のページを参照してください。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'tables.html#the-colgroup-element', '<colgroup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-colgroup-element', '<colgroup>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'tables.html#edef-COLGROUP', '<colgroup>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.colgroup")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><code><col></code> 要素のスタイル付けに特に便利な CSS プロパティおよび <a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>: + + <ul> + <li>列の幅を制御するための {{cssxref("width")}} プロパティ</li> + <li>列内のセルの配置を設定するための {{cssxref(":nth-child")}} 擬似クラス</li> + <li>すべてのセル内コンテンツを '.' などの同一文字で揃えるための {{cssxref("text-align")}} プロパティ</li> + </ul> + </li> +</ul> diff --git a/files/ja/web/html/element/command/index.html b/files/ja/web/html/element/command/index.html new file mode 100644 index 0000000000..ff02ae0e96 --- /dev/null +++ b/files/ja/web/html/element/command/index.html @@ -0,0 +1,109 @@ +--- +title: '<command>: HTML コマンド要素' +slug: Web/HTML/Element/command +tags: + - Command + - HTML + - HTML commands + - HTML5 + - 'HTML:Element' + - 'HTML:Element Reference' + - Obsolete +translation_of: Web/HTML/Element/command +--- +<div>{{obsolete_header()}}</div> + +<p><span class="seoSummary"><strong>HTML のコマンド要素</strong> (<strong><code><command></code></strong>) はユーザーが実行することができるコマンドを表します。コマンドは普通、メニューやツールバーのコンテンツの一部として使われます。</span>しかし、ページ上のどこでも使用できます。</p> + +<div class="note"> +<p><code><command></code> 要素は W3C の仕様書に含まれていますが、 WHATWG の仕様書には含まれておらず、ブラウザーの互換性もありません。非標準で Edge と Firefox でしか対応していませんが、代わりに {{HTMLElement("menuitem")}} 要素を使用してください。</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, メタデータコンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>なし。これは{{Glossary("empty element", "空要素")}}です。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>開始タグは必須です。終了タグは、空要素であるため使用できません。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>{{HTMLElement("colgroup")}} のみですが、これは開始要素が必須ではないので暗黙的に定義されることがあります。 {{HTMLElement("colgroup")}} は {{HTMLElement("span")}} を子として持ってはなりません。</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLCommandElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{htmlattrdef("checked")}}</dt> + <dd>コマンドが選択されているかを示します。 <code>type</code> 属性が <code>checkbox</code> または <code>radio</code> でなければ指定できません。</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>コマンドが使用不可であることを示します。</dd> + <dt>{{htmlattrdef("icon")}}</dt> + <dd>コマンドを表す画像を与えます。</dd> + <dt>{{htmlattrdef("label")}}</dt> + <dd>ユーザに対して表示する、コマンドの名称です。</dd> + <dt>{{htmlattrdef("radiogroup")}}</dt> + <dd>この属性はコマンド自身を切り替えた時に切り替えられる、 <code>type</code> が <code>radio</code> であるコマンドのグループ名を与えます。この属性は、 <code>type</code> 属性が <code>radio</code> でなければ指定できません。</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>この属性は、コマンドの種類を示します。以下の3つの値のうち1つが使用できます。 + <ul> + <li> + <p><code>command</code> または空文字列はデフォルトの状態で、通常のコマンドを示します。</p> + </li> + <li> + <p><code>checkbox</code> は、コマンドがチェックボックスで切り替え可能であることを示します。</p> + </li> + <li> + <p><code>radio</code> は、コマンドがラジオボタンで切り替え可能であることを示します。</p> + </li> + </ul> + </dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html notranslate"><command type="command" label="Save" + icon="icons/save.png" onclick="save()"> +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics.html#the-command-element', '<command>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.elements.command")}}</p> + +<p>{{ HTMLRef }}</p> diff --git a/files/ja/web/html/element/content/index.html b/files/ja/web/html/element/content/index.html new file mode 100644 index 0000000000..be8758de88 --- /dev/null +++ b/files/ja/web/html/element/content/index.html @@ -0,0 +1,109 @@ +--- +title: '<content>: シャドウ DOM のコンテンツのプレイスホルダー要素' +slug: Web/HTML/Element/content +tags: + - Deprecated + - Element + - HTML + - NeedsContent + - Reference + - Web + - Web Components +translation_of: Web/HTML/Element/content +--- +<div>{{Deprecated_header}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><content></code> 要素</strong>は、一連の<a href="/docs/Web/Web_Components">ウェブコンポーネント</a>技術の廃止された部分であり、 <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">Shadow DOM</a> の中で {{glossary("insertion point")}} として使われていましたが、通常の HTML で利用することは意図されていませんでした。</span>現在では DOM の中で Shadow DOM を挿入することができる場所を作成する {{HTMLElement("slot")}} 要素に置き換えられました。</p> + +<div class="note"> +<p><strong>メモ:</strong> この要素は初期のドラフト仕様に存在し、いくつかのブラウザーで実装されていましたが、後のバージョンの仕様書から削除され、使用するべきではありません。ここで文書化しているのは、その間に書かれたコードを、新しいバージョンの仕様書で動作するように適合させるのを支援するためです。</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/docs/Web/HTML/Content_categories" title="HTML/Content_categories">コンテンツカテゴリー</a></th> + <td><a href="/docs/Web/HTML/Content_categories#Transparent_content_model" title="HTML/Content_categories#Transparent_content_model">透過的コンテンツ</a></td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>フローコンテンツを受け入れるすべての要素。</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLContentElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は<a href="https://developer.mozilla.org/ja/docs/HTML/Global_attributes" title="HTML/Global attributes">グローバル属性</a>を持ちます。</p> + +<dl> + <dt><code>select</code></dt> + <dd>コンマ区切りで複数のセレクターを指定できます。これらは CSS セレクターと同じ文法です。 <code><content></code> 要素が指定された場所に挿入する内容を指定します。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<p>以下に <code><content></code> 要素の使用例を示します。これは必要なものがすべて含まれている HTML ファイルです。</p> + +<div class="note"> +<p><strong>メモ:</strong> 以下のコードを動作させるには、ブラウザーが Web Components をサポートしている必要があります。 <a href="/ja/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">Firefox で Web Components を有効にするには</a>の記事も参照してください。</p> +</div> + +<pre class="brush: html"><html> + <head></head> + <body> + <!-- The original content accessed by <content> --> + <div> + <h4>My Content Heading</h4> + <p>My content text</p> + </div> + + <script> + // Get the <div> above. + var myContent = document.querySelector('div'); + // Create a shadow DOM on the <div> + var shadowroot = myContent.createShadowRoot(); + // Insert into the shadow DOM a new heading and + // part of the original content: the <p> tag. + shadowroot.innerHTML = + '<h2>Inserted Heading</h2> <content select="p"></content>'; + </script> + + </body> +</html> +</pre> + +<p>ブラウザーで表示した場合、以下のように表示されます。</p> + +<p><img alt="content example" src="https://mdn.mozillademos.org/files/10077/content-example.png" style="height: 383px; width: 716px;"></p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<p>この要素は現在、どの仕様書でも定義されていません。</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.content")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Web_Components">Web Components</a></li> + <li>{{HTMLElement("shadow")}}, {{HTMLElement("slot")}}, {{HTMLElement("template")}}, {{HTMLElement("element")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ja/web/html/element/data/index.html b/files/ja/web/html/element/data/index.html new file mode 100644 index 0000000000..7c75b5f0c8 --- /dev/null +++ b/files/ja/web/html/element/data/index.html @@ -0,0 +1,108 @@ +--- +title: <data> +slug: Web/HTML/Element/data +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/data +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><data></code> 要素</strong>は、与えられたコンテンツの断片を機械可読な翻訳にリンクします。コンテンツが時刻または日付に関連するものであれば、 {{HTMLElement("time")}} 要素を使用する必要があります。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/data.html", "tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールナシ</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLDataElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素の属性は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を含みます。</p> + +<dl> + <dt>{{htmlattrdef("value")}}</dt> + <dd>この属性は要素の内容を機械可読な形式で指定します。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<p>以下の例は商品名を表示しますが、それぞれの商品名に商品番号も結びつけます。</p> + +<pre class="brush: html notranslate"><p>新製品</p> +<ul> + <li><data value="398">ミニケチャップ</data></li> + <li><data value="399">ジャンボケチャップ</data></li> + <li><data value="400">メガジャンボケチャップ</data></li> +</ul> +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-data-element', '<data>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>{{SpecName('HTML5 W3C')}} から変更なし</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-data-element', '<data>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.data")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>HTML の {{HTMLElement("time")}} 要素</li> +</ul> diff --git a/files/ja/web/html/element/datalist/index.html b/files/ja/web/html/element/datalist/index.html new file mode 100644 index 0000000000..ab28779717 --- /dev/null +++ b/files/ja/web/html/element/datalist/index.html @@ -0,0 +1,119 @@ +--- +title: <datalist> +slug: Web/HTML/Element/datalist +tags: + - Element + - HTML + - HTML forms + - HTML フォーム + - HTML5 + - 'HTML:フローコンテンツ' + - 'HTML:記述コンテンツ' + - Reference + - Web + - ウェブ + - フォーム + - リファレンス + - 要素 +translation_of: Web/HTML/Element/datalist +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><datalist></code> 要素</strong>は、他のコントロールで利用可能な値を表現する一連の {{HTMLElement("option")}} 要素を含みます。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/datalist.html", "tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>、<a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>、または 0 個以上の {{HTMLElement("option")}} 要素のどちらか</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLDataListElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には、すべての要素が持つ<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>以外の属性はありません。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html"><label for="myBrowser">一覧からブラウザーを選択して下さい:</label> +<input list="browsers" id="myBrowser" name="myBrowser" /> +<datalist id="browsers"> + <option value="Chrome"> + <option value="Firefox"> + <option value="Internet Explorer"> + <option value="Opera"> + <option value="Safari"> + <option value="Microsoft Edge"> +</datalist> +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Examples")}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-datalist-element', '<datalist>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-datalist-element', '<datalist>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.datalist")}}</p> + +<h2 id="Polyfill" name="Polyfill">代替手段</h2> + +<p>古いブラウザーや非互換の現行ブラウザーで対応するための代替手段 (polyfill) を以下に挙げます。<br> + <a href="https://github.com/mfranzke/datalist-polyfill">datalist-polyfill</a></p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("input")}} 要素、およびもっと具体的な {{htmlattrxref("list", "input")}} 属性</li> + <li>{{HTMLElement("option")}} 要素</li> +</ul> diff --git a/files/ja/web/html/element/dd/index.html b/files/ja/web/html/element/dd/index.html new file mode 100644 index 0000000000..6a739e487c --- /dev/null +++ b/files/ja/web/html/element/dd/index.html @@ -0,0 +1,107 @@ +--- +title: '<dd>: 詳細説明要素' +slug: Web/HTML/Element/dd +tags: + - HTML + - HTML コンテンツグループ化 + - 'HTML:フローコンテンツ' + - ウェブ + - リファレンス + - 要素 +translation_of: Web/HTML/Element/dd +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><dd></code> 要素</strong>は、定義リスト要素 ({{HTMLElement("dl")}}) 内で、先行する用語 ({{HTMLElement("dt")}}) の説明、定義、値などを示します。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/dd.html", "tabbed-standard")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td>なし</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>開始タグは必須。 {{HTMLElement("dd")}} 要素の直後に他の <code><dd></code> 要素または {{HTMLElement("dt")}} 要素がある場合、もしくは親要素内で後続する内容物がない場合は、終了タグが省略可能となる。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>{{HTMLElement("dl")}} 要素または (<a href="/ja/docs/Glossary/WHATWG">WHATWG</a> HTML において) {{HTMLElement("dl")}} 要素内にある {{HTMLElement("div")}} 要素</td> + </tr> + <tr> + <th scope="row">前の兄弟要素</th> + <td>{{HTMLElement("dt")}} 要素または別の {{HTMLElement("dd")}} 要素</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{htmlattrdef("nowrap")}} {{Non-standard_inline}}</dt> + <dd>この属性の値が <code>yes</code> とされた場合、定義部分のテキストは改行されません。初期値は <code>no</code> です。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<p><a href="/ja/docs/Web/HTML/Element/dl#examples" title="HTML/Element/dl#examples"><dl> </a> の解説ページの例を参照してください。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-dd-element', '<dd>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dd-element', '<dd>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dd>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.dd")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLELement("dl")}}</li> + <li>{{HTMLElement("dt")}}</li> +</ul> diff --git a/files/ja/web/html/element/del/index.html b/files/ja/web/html/element/del/index.html new file mode 100644 index 0000000000..4c944b0a2f --- /dev/null +++ b/files/ja/web/html/element/del/index.html @@ -0,0 +1,148 @@ +--- +title: '<del>: 削除文字列要素' +slug: Web/HTML/Element/del +tags: + - HTML + - HTML 編集 + - 'HTML:フローコンテンツ' + - 'HTML:記述コンテンツ' + - Reference + - Web + - 削除文字列 + - 要素 +translation_of: Web/HTML/Element/del +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><del></code> 要素</strong>は、文書から削除された文字列の範囲を表します。</span>これは例えば、「変更の追跡」や、ソースコードの差分情報を描画するときに使用することができます。 {{HTMLElement("ins")}} 要素は逆の目的に、文書に追加された文字列を示すために用いることができます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/del.html", "tabbed-standard")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<p>一般的にこの要素は (必ずではありませんが) 打ち消し線のスタイルを伴って描画されます。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a> または <a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a></td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Transparent_content_model">透過的コンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLModElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">グローバル属性</a>を持ちます。</p> + +<dl> + <dt>{{htmlattrdef("cite")}}</dt> + <dd>変更についての説明を記したリソース（例えば、議事録など）への URI を示す。</dd> + <dt>{{htmlattrdef("datetime")}}</dt> + <dd>この属性は変更日時を示し、有効な日付文字列と任意の時刻文字列でなくてはなりません。値を時刻および日付の文字列として解釈できない場合は、要素に関連付けられたタイムスタンプはないものと解釈されます。日付のない文字列の書式については、<a href="/ja/docs/Web/HTML/Date_and_time_formats#Date_strings">日付の文字列</a>を参照してください。日付と時刻の両方を含んだ文字列の書式は、<a href="/ja/docs/Web/HTML/Date_and_time_formats#Local_date_and_time_strings">地方時の日付と時刻の文字列</a>にあります。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html"><p><del>This text has been deleted</del>, +here is the rest of the paragraph.</p> +<del><p>This paragraph has been deleted.</p></del></pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Examples")}}</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> + +<p><code>del</code> 要素が存在することは、多くの読み上げ技術の既定の設定ではアナウンスされません。 CSS の {{cssxref("::before")}} 及び {{cssxref("::after")}} 疑似要素と共に {{cssxref("content")}} プロパティを使うことでアナウンスさせることができます。</p> + +<pre>del::before, +del::after { + clip-path: inset(100%); + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +del::before { + content: " [削除開始] "; +} + +del::after { + content: " [削除終了] "; +} +</pre> + +<p>読み上げソフトを使用する人によっては、特に冗長になるコンテンツのアナウンスを意図的に無効にしていることがあります。このため、この手法を悪用しないようにすることは重要であり、コンテンツが削除されていることを知らないと理解に影響するような場面でのみ使用するようにしてください。</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">Short note on making your mark (more accessible) | The Paciello Group</a></li> + <li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html">Tweaking Text Level Styles | Adrian Roselli</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'edits.html#the-del-element', '<del>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'edits.html#the-del-element', '<del>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.4', '<del>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.del")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>テキストへの挿入を示す {{HTMLElement("ins")}} 要素</li> + <li> + <p>テキストの削除とは異なる抹消を表すための {{HTMLElement("s")}} 要素</p> + </li> +</ul> diff --git a/files/ja/web/html/element/details/index.html b/files/ja/web/html/element/details/index.html new file mode 100644 index 0000000000..13770b1b37 --- /dev/null +++ b/files/ja/web/html/element/details/index.html @@ -0,0 +1,280 @@ +--- +title: '<details>: 詳細折りたたみ要素' +slug: Web/HTML/Element/details +tags: + - HTML + - HTML 対話的要素 + - 'HTML:フローコンテンツ' + - 'HTML:対話型コンテンツ' + - 'HTML:知覚可能コンテンツ' + - details + - ウェブ + - リファレンス + - 要素 +translation_of: Web/HTML/Element/details +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の詳細折りたたみ要素</strong> (<strong><code><details></code></strong>) は、ウィジェットが open 状態になった時のみ情報が表示される折りたたみウィジェットを作成します。</span>概要やラベルは {{HTMLElement("summary")}} 要素を使用して提供することができます。</p> + +<p>折りたたみウィジェットはふつう、回転して開閉状態を示す小さな三角形を使用し、その隣のラベルと共に画面上に表現されます。 <code><details></code> 要素の最初の子要素が <code><summary></code> の場合は、 <code><summary></code> 要素が折りたたみウィジェットのラベルとして使用されます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/details.html", "tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<div class="note"> +<p><strong>メモ:</strong> ウィジェットの開閉を回転する (ねじる) 三角形で表すのが一般的な使い方なので、このウィジェットはツイスティー (twisties) と呼ばれることがあります。</p> +</div> + +<p><code><details></code> ウィジェットは2つの状態のうち1つを取ります。既定の<em>閉じた</em>状態は <code><summary></code> を使用して指定されたラベル文字列 (または{{Glossary("user agent", "ユーザーエージェント")}}が定義した既定の文字列) とウィジェット自身による三角形だけを表示します。これは次のように表示されます。</p> + +<figure style="margin: 1em 0; padding: 1em; border: 1px solid black; box-shadow: 0 0 4px 1px black; width: 640px;"><img alt="閉じた <details> ウィジェットのスクリーンショット。黒い左向きの三角形が「System Requirements」のテキストの右側にあります。" src="https://mdn.mozillademos.org/files/15717/details-closed.png" style="height: 26px; width: 191px;"></figure> + +<p>ここでは既定の閉じた状態であり、折りたたみウィジェットと "System Requirements" というラベルが表示されています。ユーザーがこのウィジェットをクリックするか、フォーカスしてスペースバーを押すと、「ねじれて」開き、コンテンツが展開されて次のようになります。</p> + +<figure style="margin: 1em 0; padding: 1em; border: 1px solid black; box-shadow: 0 0 4px 1px black; width: 640px;"><img alt="開いた <details> ウィジェットのスクリーンショット。三角形は下向きになり、「System Requirements」とは何かの詳細説明が表示されています。” means is shown." src="https://mdn.mozillademos.org/files/15718/details-open.png" style="height: 96px; width: 640px;"></figure> + +<p>ここから、 CSS を使用して折りたたみウィジェットの外見を変更することができ、また {{htmlattrxref("open", "details")}} の値を設定したり削除したりすることにより、プログラムから開いたり閉じたりすることができます。</p> + +<p>ウィジェットが閉じている時、折りたたみの三角形と概要が表示できるだけの高さしかありません。ウィジェットが開くと、要素は中に含まれた詳細が表示できるだけの大きさに拡大されます。</p> + +<div class="note"> +<p><strong>メモ:</strong> 残念なことに、現時点では開いたり閉じたりする間のアニメーションを行う組込みの方法はありません。</p> +</div> + +<p>完全な標準互換の実装では、 CSS の <code>{{cssxref("display")}}: list-item</code> が自動的に {{HTMLElement("summary")}} に適用されます。この表示方法はカスタマイズすることができます。詳しくは{{anch("Customizing the disclosure widget", "折りたたみウィジェットのカスタマイズ")}}を参照してください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>、区分化ルート、対話型コンテンツ、知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>1つの {{HTMLElement("summary")}} 要素と、それに続く <a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLDetailsElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes" rel="internal">グローバル属性</a>を持ちます。</p> + +<dl> + <dt>{{htmlattrdef("open")}}</dt> + <dd>この論理属性は、ページ読み込み時に詳細内容、つまり <code><details></code> 要素の内容が表示されるよう指定するものです。既定値は <code>false</code> であり、詳細内容は表示しません。</dd> +</dl> + +<h2 id="Events" name="Events">イベント</h2> + +<p>HTML で対応している通常のイベントに加えて、 <code><details></code> 要素は {{event("toggle")}} イベントに対応しており、開閉状態が変化するたびに <code><details></code> 要素が呼び出されます。イベントは状態が変化した<em>後</em>に送信され、もしブラウザーがイベントを送信する前に状態が2回以上変化しても、イベントは合体して1回しか送信されません。</p> + +<p>ウィジェットの状態が変化したことを検出するために、 <code>toggle</code> イベントをリスンすることができます。</p> + +<pre class="brush: js">details.addEventListener("toggle", event => { + if (details.open) { + /* 要素が開いた方に切り替わった */ + } else { + /* 要素が閉じた方に切り替わった */ + } +});</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="A_simple_disclosure_example" name="A_simple_disclosure_example">単純な折りたたみの例</h3> + +<p>この例では <code><details></code> 要素を summary なしで表示します。</p> + +<pre class="brush: html"><details> + <p>Requires a computer running an operating system. The computer + must have some memory and ideally some kind of long-term storage. + An input device as well as some form of output device is + recommended.</p> +</details></pre> + +<p>このような場合、ブラウザーは既定の概要文字列（ふつうは「概要」）を使用します。あなたのブラウザーでは次のように表示されます。</p> + +<p>{{EmbedLiveSample("A_simple_disclosure_example", 650, 150)}}</p> + +<h3 id="Providing_a_summary" name="Providing_a_summary">概要の提供</h3> + +<p>この例では <code><details></code> の中で {{HTMLElement("summary")}} 要素を使用して、上記の例に概要を追加したものです。次のようになります。</p> + +<pre class="brush: html"><details> + <summary>System Requirements</summary> + <p>Requires a computer running an operating system. The computer + must have some memory and ideally some kind of long-term storage. + An input device as well as some form of output device is + recommended.</p> +</details></pre> + +<p>この HTML の結果は次のようになります。</p> + +<p>{{EmbedLiveSample("Providing_a_summary", 650, 150)}}</p> + +<h3 id="Creating_an_open_disclosure_box" name="Creating_an_open_disclosure_box">折りたたみボックスの作成</h3> + +<p><code><details></code> ボックスを開いた状態にするために、論理値の <code>open</code> 属性を追加しましょう。</p> + +<pre class="brush: html"><details open> + <summary>System Requirements</summary> + <p>Requires a computer running an operating system. The computer + must have some memory and ideally some kind of long-term storage. + An input device as well as some form of output device is + recommended.</p> +</details></pre> + +<p>これだけで、次のような結果になります。</p> + +<p>{{EmbedLiveSample("Creating_an_open_disclosure_box", 650, 150)}}</p> + +<h3 id="Customizing_the_appearance" name="Customizing_the_appearance">表示方法のカスタマイズ</h3> + +<p>では、いくらか CSS を適用して折りたたみボックスの外見をカスタマイズしましょう。</p> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">details { + font: 16px "Open Sans", "Arial", sans-serif; + width: 620px; +} + +details > summary { + padding: 2px 6px; + width: 15em; + background-color: #ddd; + border: none; + box-shadow: 3px 3px 4px black; +} + +details > p { + border-radius: 0 0 10px 10px; + background-color: #ddd; + padding: 2px 6px; + margin: 0; + box-shadow: 3px 3px 4px black; +} +</pre> + +<p>この CSS はタブ風のインターフェイスに似た外見を作り出し、クリックするとタブが開いてコンテンツを表示します。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><details> + <summary>System Requirements</summary> + <p>Requires a computer running an operating system. The computer + must have some memory and ideally some kind of long-term storage. + An input device as well as some form of output device is + recommended.</p> +</details></pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample("Customizing_the_appearance", 650, 150)}}</p> + +<h3 id="Customizing_the_disclosure_widget" name="Customizing_the_disclosure_widget">折りたたみウィジェットのカスタマイズ</h3> + +<p>折りたたみの三角形ウィジェット自身はカスタマイズできますが、これは最近標準化され、広くは対応されていません。さらに、この対応方法については複数の種類があり、標準はそれに基づいて決定されましたので、しばらくの間はカスタマイズのために複数の方法を使用する必要があります。</p> + +<p>{{HTMLElement("summary")}} 要素は {{cssxref("list-style")}} 一括指定プロパティや、 {{cssxref("list-style-type")}} などの個別指定プロパティに対応しており、折りたたみウィジェットを三角形から選択したものに変更することができます (ふつうは {{cssxref("list-style-image")}}) を使用します。例えば、折りたたみウィジェットのアイコンは <code>list-style: none</code> と設定することで削除することができます。</p> + +<p>しかし、 Chrome はまだこれに対応していませんので、このブラウザーでは外見をカスタマイズするために、非標準の <code>::-webkit-details-marker</code> <a href="/ja/docs/Web/CSS/Pseudo-elements">疑似要素</a>を使用する必要があります。</p> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css; highlight:[12, 15-17]">details { + font: 16px "Open Sans", "Arial", sans-serif; + width: 620px; +} + +details > summary { + padding: 2px 6px; + width: 15em; + background-color: #ddd; + border: none; + box-shadow: 3px 3px 4px black; + list-style: none; +} + +details > summary::-webkit-details-marker { + display: none; +} + +details > p { + border-radius: 0 0 10px 10px; + background-color: #ddd; + padding: 2px 6px; + margin: 0; + box-shadow: 3px 3px 4px black; +} +</pre> + +<p>この CSS はタブ風のインターフェイスに似た外見を作り出し、クリックするとタブが開いてコンテンツを表示します。</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><details> + <summary>System Requirements</summary> + <p>Requires a computer running an operating system. The computer + must have some memory and ideally some kind of long-term storage. + An input device as well as some form of output device is + recommended.</p> +</details></pre> + +<h4 id="Result_2" name="Result_2">結果</h4> + +<p>{{EmbedLiveSample("Customizing_the_disclosure_widget", 650, 150)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-details-element', '<details>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-details-element', '<details>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.details")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("summary")}}</li> +</ul> diff --git a/files/ja/web/html/element/dfn/index.html b/files/ja/web/html/element/dfn/index.html new file mode 100644 index 0000000000..67d5d50b45 --- /dev/null +++ b/files/ja/web/html/element/dfn/index.html @@ -0,0 +1,219 @@ +--- +title: '<dfn>: 定義要素' +slug: Web/HTML/Element/dfn +tags: + - HTML + - HTML 文字レベルの意味付け + - 'HTML:フローコンテンツ' + - 'HTML:知覚可能コンテンツ' + - 'HTML:記述コンテンツ' + - Reference + - ウェブ + - リファレンス + - 要素 +translation_of: Web/HTML/Element/dfn +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の定義要素</strong> (<strong><dfn><dfn></dfn></strong>) は、定義句や文の文脈の中で定義している用語を示すために用いられます。</span> <code><dfn></code> の直近の祖先である {{HTMLElement("p")}} 要素、 {{HTMLElement("dt")}}/{{HTMLElement("dd")}} の組み合わせ、 {{HTMLElement("section")}} 要素が用語の定義とみなされます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/dfn.html", "tabbed-standard")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>、ただし {{HTMLElement("dfn")}} 要素を子孫にしてはいけません。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素の属性は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を含みます。</p> + +<p>HTML5 においては、この要素の {{htmlattrxref("title")}} 属性は後述のとおり、通常と異なる特別な意味合いを持ちます。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<p><code><dfn></code> 要素の使用については、完全に明らかになっていない側面がいくつかあります。ここでそれらを説明します。</p> + +<h3 id="Specifying_the_term_being_defined" name="Specifying_the_term_being_defined">定義される用語の指定</h3> + +<p>定義される用語は、以下の規則に従います。</p> + +<ol> + <li><code><dfn></code> 要素に {{htmlattrxref("title")}} 属性がある場合、 <code>title</code> 属性の値が定義される用語とみなされます。その要素の中の文字列もその用語でなければなりませんが、略語 (おそらく {{HTMLElement("abbr")}} を使用) や、用語のその他の形でも構いません。</li> + <li><code><dfn></code> が単一の子要素を持ち、自分自身には何も文字列がなく、かつその子要素が <code>title</code> 属性を持つ {{HTMLElement("abbr")}} 要素である場合は、 <code><abbr></code> 要素の <code>title</code> の値が定義する用語です。</li> + <li>それ以外では、 <code><dfn></code> 要素の文字列コンテンツが定義される用語です。これは{{anch("Basic identification of a term", "以下の最初の例")}}で示します。</li> +</ol> + +<div class="note"> +<p>もし <code><dfn></code> 要素に <code>title</code> 属性があれば、それが定義する用語であり、それ以外の文字列ではありません。</p> +</div> + +<h3 id="<dfn>_要素へのリンク"><code><dfn></code> 要素へのリンク</h3> + +<p><code><dfn></code> 要素に {{htmlattrxref("id")}} 属性をつけた場合は、 {{HTMLElement("a")}} 要素を使用してそこにリンクすることができます。用語の使用時にはそのようなリンクを使用して、用語のリンクをクリックすることで読者が用語の定義にすばやく移動できるようにしてください。</p> + +<p>これは以下の{{anch("Links to definitions", "定義へのリンク")}}の例で示します。</p> + +<h2 id="Usage_notes_2" name="Usage_notes_2">使用上の注意</h2> + +<ul> + <li><code><dfn></code> 要素は定義される用語を示すものです。用語の定義はその要素を含んでいる {{HTMLElement("p")}}, {{HTMLElement("section")}}, または定義リスト関連要素 (ふつうは {{HTMLElement("dt")}} と {{HTMLElement("dd")}} の組) の中で行ってください。</li> + <li>定義される用語の値は、次の規則で決定されます。 + <ol> + <li><code><dfn></code> 要素に {{htmlattrxref("title")}} 属性がある場合は、その属性値が用語です。</li> + <li>そうではなく、 {{htmlattrxref("title")}} 属性を持つ {{HTMLElement("abbr")}} 要素のみを含む場合は、そちらの title 属性の値が用語です。これは後述の {{anch("Using abbreviations and definitions together", "略語と定義の両方の使用")}}で示します。</li> + <li>それ以外の場合、<code><dfn></code> 要素が含む文字列コンテンツが用語です。</li> + </ol> + </li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<p>様々な利用シナリオの例をいくつか見てみましょう。</p> + +<h3 id="Basic_identification_of_a_term" name="Basic_identification_of_a_term">基本的な用語の識別</h3> + +<p>この例は単に、定義の中の用語の位置を識別するために素の <code><dfn></code> 要素を使用しています。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>The <strong>HTML Definition element</strong> +(<strong><dfn>&lt;dfn&gt;</dfn></strong>) is used to indicate the +term being defined within the context of a definition phrase or +sentence.</p></pre> + +<p><code><dfn></code> 要素に <code>title</code> がないので、 <code><dfn></code> 要素自身の文字列コンテンツが定義される用語として使用されます。</p> + +<h4 id="Result" name="Result">結果</h4> + +<p>このブラウザーでは、このように描画されます。</p> + +<p>{{EmbedLiveSample("Basic_identification_of_a_term", 650, 120)}}</p> + +<h3 id="Links_to_definitions" name="Links_to_definitions">定義へのリンク</h3> + +<p>定義へのリンクを追加するには、いつも通りの方法で {{HTMLElement("a")}} 要素を使ってリンクを作成します。</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><p>The <strong>HTML Definition element</strong> +(<strong><dfn id="definition-dfn">&lt;dfn&gt;</dfn></strong>) is +used to indicate the term being defined within the context of a +definition phrase or sentence.</p> + +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece +donan, Latine voluptatem vocant. Confecta res esset. Duo Reges: +constructio interrete. Scrupulum, inquam, abeunti; </p> + +<p>Negare non possum. Dat enim intervalla et relaxat. Quonam modo? +Equidem e Cn. Quid de Pythagora? In schola desinis. </p> + +<p>Ubi ut eam caperet aut quando? Cur iustitia laudatur? Aperiendum +est igitur, quid sit voluptas; Quid enim? Non est igitur voluptas +bonum. Urgent tamen et nihil remittunt. Quid enim possumus hoc +agere divinius? </p> + +<p>Because of all of that, we decided to use the +<code><a href="#definition-dfn">&lt;dfn&gt;</a></code> element for +this project.</p></pre> + +<p>ここで {{htmlattrxref("id")}} 属性の <code>"definition-dfn"</code> の値をリンク先として使用して、定義を見ることができます。その後で、 <code><a></code> の {{htmlattrxref("href", "a")}} 属性を <code>"#definition-dfn"</code> に設定して、定義に戻るリンクを設定します。</p> + +<h4 id="Result_2" name="Result_2">結果</h4> + +<p>結果のコンテンツはこのようになります。</p> + +<p>{{EmbedLiveSample("Links_to_definitions", 650, 300)}}</p> + +<h3 id="Using_abbreviations_and_definitions_together" name="Using_abbreviations_and_definitions_together">略語と定義の両方の使用</h3> + +<p>場合によっては、用語を定義する際に略語を使用したくなる場合もあるでしょう。これは <code><dfn></code> と {{HTMLElement("abbr")}} 要素を組み合わせて、このように実現できます。</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><p>The <dfn><abbr title="Hubble Space Telescope">HST</abbr></dfn> +is among the most productive scientific instruments ever constructed. +It has been in orbit for over 20 years, scanning the sky and +returning data and photographs of unprecedented quality and +detail.</p> + +<p>Indeed, the <abbr title="Hubble Space Telescope">HST</abbr> has +arguably done more to advance science than any device ever built.</p></pre> + +<p><code><abbr></code> 要素が <code><dfn></code> の中で入れ子になっています。前者は用語が略語 ("HST") であることを示し、完全な用語 ("Hubble Space Telescope") を <code>title</code> 属性で定義します。後者は略語が定義される用語であることを表します。</p> + +<h4 id="Result_3" name="Result_3">結果</h4> + +<p>上記のコードの出力はこのようになります。</p> + +<p>{{EmbedLiveSample("Using_abbreviations_and_definitions_together", 650, 200)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-dfn-element', '<dfn>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-dfn-element', '<dfn>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<dfn>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div> +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.elements.dfn")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>定義リスト関連要素: {{HTMLElement("dl")}}, {{HTMLElement("dt")}}, {{HTMLElement("dd")}}</li> + <li>{{HTMLElement("abbr")}}</li> +</ul> diff --git a/files/ja/web/html/element/dialog/index.html b/files/ja/web/html/element/dialog/index.html new file mode 100644 index 0000000000..0d3cc585b1 --- /dev/null +++ b/files/ja/web/html/element/dialog/index.html @@ -0,0 +1,186 @@ +--- +title: '<dialog>: ダイアログ要素' +slug: Web/HTML/Element/dialog +tags: + - Dialog + - Experimental + - HTML + - HTML 対話操作 + - 'HTML:フローコンテンツ' + - 'HTML:区分化ルート' + - Reference + - ウェブ + - ダイアログ + - 要素 +translation_of: Web/HTML/Element/dialog +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><dialog></code> 要素</strong>は、ダイアログボックスや、消すことができるアラート、インスペクター、サブウィンドウ等のような対話的コンポーネントを表します。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Sectioning_roots">区分化ルート</a></td> + </tr> + <tr> + <th scope="row">許可された内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可された親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるあらゆる要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="/ja/docs/Web/Accessibility/ARIA/Roles/dialog_role">dialog</a></td> + </tr> + <tr> + <th scope="row">許可された ARIA ロール</th> + <td>{{ARIARole("alertdialog")}}</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLDialogElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<div class="blockIndicator warning"> +<p><code>tabindex</code> 属性を <code><dialog></code> 要素で使用してはいけません。</p> +</div> + +<dl> + <dt>{{htmlattrdef("open")}}</dt> + <dd>ダイアログがアクティブで操作で使用できることを示します。 <code>open</code> 属性が設定されていないときは、ダイアログはユーザーに表示する<em>べきではありません</em>。</dd> +</dl> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<ul> + <li>{{HTMLElement("form")}} 要素は <code>method="dialog"</code> 属性が指定されていれば、ダイアログを閉じることができます。そのようなフォームが送信されると、 {{domxref("HTMLDialogElement.returnValue", "returnValue")}} プロパティがフォーム送信するために使用されたボタンの <code>value</code> に設定されて、ダイアログが閉じられます。</li> + <li>CSS の {{cssxref('::backdrop')}} 擬似要素を使用して、 <code><dialog></code> 要素が {{domxref("HTMLDialogElement.showModal()")}} で表示されたときの背後のスタイルを設定することができます。例えば、モーダルダイアログの背後にある操作できないコンテンツを暗くするなどです。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Simple_example" name="Simple_example">シンプルな例</h3> + +<pre class="brush: html"><dialog open> + <p>Greetings, one and all!</p> +</dialog> +</pre> + +<h3 id="Advanced_example" name="Advanced_example">応用的な例</h3> + +<p>この例では、 "Update details" ボタンをクリックすると、フォームを含むポップアップダイアログボックスが開きます。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><!-- Simple pop-up dialog box containing a form --> +<dialog id="favDialog"> + <form method="dialog"> + <p><label>Favorite animal: + <select> + <option></option> + <option>Brine shrimp</option> + <option>Red panda</option> + <option>Spider monkey</option> + </select> + </label></p> + <menu> + <button value="cancel">Cancel</button> + <button id="confirmBtn" value="default">Confirm</button> + </menu> + </form> +</dialog> + +<menu> + <button id="updateDetails">Update details</button> +</menu> + +<output aria-live="polite"></output> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var updateButton = document.getElementById('updateDetails'); +var favDialog = document.getElementById('favDialog'); +var outputBox = document.querySelector('output'); +var selectEl = document.querySelector('select'); +var confirmBtn = document.getElementById('confirmBtn'); + +// "Update details" button opens the <dialog> modally +updateButton.addEventListener('click', function onOpen() { + if (typeof favDialog.showModal === "function") { + favDialog.showModal(); + } else { + alert("The <dialog> API is not supported by this browser"); + } +}); +// "Favorite animal" input sets the value of the submit button +selectEl.addEventListener('change', function onSelect(e) { + confirmBtn.value = selectEl.value; +}); +// "Confirm" button of form triggers "close" on dialog because of [method="dialog"] +favDialog.addEventListener('close', function onClose() { + outputBox.value = favDialog.returnValue + " button clicked - " + (new Date()).toString(); +});</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Advanced_example", "100%", 300)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-dialog-element', '<dialog>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.2', 'interactive-elements.html#the-dialog-element', '<dialog>')}}</td> + <td>{{Spec2('HTML5.2')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.dialog")}}</p> + +<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> + +<p><code><dialog></code> 要素のないブラウザーには、このポリフィルを含めてください。</p> + +<p><a href="https://github.com/GoogleChrome/dialog-polyfill">dialog-polyfill</a></p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLDialogElement/close_event", "close")}} イベント</li> + <li>{{domxref("HTMLDialogElement/cancel_event", "cancel")}} イベント</li> + <li><a href="/ja/docs/Web/Guide/HTML/Forms">HTML フォームガイド</a></li> + <li>{{cssxref("::backdrop")}} 擬似要素</li> +</ul> diff --git a/files/ja/web/html/element/dir/index.html b/files/ja/web/html/element/dir/index.html new file mode 100644 index 0000000000..ca682f43b7 --- /dev/null +++ b/files/ja/web/html/element/dir/index.html @@ -0,0 +1,55 @@ +--- +title: '<dir>: ディレクトリ要素 (廃止)' +slug: Web/HTML/Element/dir +tags: + - Directory + - Element + - HTML + - HTML Lists + - Obsolete + - Reference + - Web + - dir + - lists +translation_of: Web/HTML/Element/dir +--- +<div>{{HTMLRef}}{{Obsolete_header()}}</div> + +<p><span class="seoSummary">廃止された <strong>HTML のディレクトリ要素</strong> (<strong><code><dir></code></strong>) は、 {{Glossary("user agent","ユーザーエージェント")}}が適用するスタイルやアイコンを用いて表示する、ファイルやフォルダーのディレクトリのコンテナとして使われます。</span>この要素は廃止されたので使わないで下さい。代わりに、ファイル一覧を含め、一覧には {{HTMLElement("ul")}} 要素を使用してください。</p> + +<div class="note"><strong>使用上の注意:</strong> この要素は使用しないでください。この要素は HTML の初期の仕様で定義されていましたが、 HTML 4 で非推奨要素に指定され、完全に廃止されました。<strong>この要素に対応している主要なブラウザーはありません。</strong></div> + +<h2 id="DOM_interface" name="DOM_interface">DOM インターフェイス</h2> + +<p>この要素は {{domxref("HTMLDirectoryElement")}} インターフェイスを実装しています。</p> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>他のすべての HTML 要素と同様、この要素は<a href="/ja/docs/HTML/Global_attributes">グローバル属性</a>に対応しています。</p> + +<dl> + <dt>{{htmlattrdef("compact")}}</dt> + <dd>この真偽値の属性はコンパクトなスタイルでディレクトリ一覧をレンダリングするようブラウザーにヒントを与えるものです。この属性の解釈はユーザーエージェントに委ねられ、また全てのブラウザーで動作するものでもありません。 + <div class="note"><strong>使用上の注意:</strong> この属性は既に廃止されている為、使用しないで下さい。 {{HTMLElement("dir")}} 要素の整形には <a href="/ja/docs/CSS" title="CSS">CSS</a> を用いましょう。 <code>compact</code> 属性を指定した場合と同様の視覚効果は、 <a href="/ja/docs/CSS" title="CSS">CSS</a> の {{cssxref("line-height")}} プロパティに <code>80%</code> を指定することで得ることができます。</div> + </dd> +</dl> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.dir")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>その他のリストに関する HTML 要素: {{HTMLElement("ol")}}, {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}}</li> + <li><code><dir></code> 要素を整形するのに特に有用な CSS プロパティ: + <ul> + <li>{{cssxref('list-style')}} は行頭記号の表示方法を選択するのに便利です。</li> + <li><a href="/ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS counter</a> は、複雑な入れ子リストの扱いに便利です。</li> + <li>{{Cssxref('line-height')}} プロパティは、非推奨の {{htmlattrxref("compact", "dir")}} 属性の代替になります。</li> + <li>{{cssxref('margin')}} プロパティは、リストのインデントを制御するのに便利です。</li> + </ul> + </li> +</ul> diff --git a/files/ja/web/html/element/div/index.html b/files/ja/web/html/element/div/index.html new file mode 100644 index 0000000000..fcb7d5257e --- /dev/null +++ b/files/ja/web/html/element/div/index.html @@ -0,0 +1,148 @@ +--- +title: '<div>: コンテンツ分割要素' +slug: Web/HTML/Element/div +tags: + - HTML + - HTML コンテンツのグループ化 + - 'HTML:フローコンテンツ' + - 'HTML:知覚可能コンテンツ' + - Reference + - ウェブ + - リファレンス + - 要素 +translation_of: Web/HTML/Element/div +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の コンテンツ分割要素</strong> (<strong><code><div></code></strong>) は、フローコンテンツの汎用コンテナーです。 {{glossary("CSS")}} を用いてスタイル付けがされるまでは、コンテンツやレイアウトには影響を与えません。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/div.html","tabbed-standard")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<p><code><div></code> 要素は「純粋」なコンテナーとして、本質的には何も表しません。その代わり、 {{htmlattrxref("class")}} や {{htmlattrxref("id")}} を使用してスタイル付けしやすくしたり、文書内で異なる言語で書かれた部分を ({{htmlattrxref("lang")}} 属性を使用して) 示したりするために使用します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>。<br> + または ({{glossary("WHATWG")}} HTML において) 親要素が {{HTMLElement("dl")}} である場合: 1つ以上の {{HTMLElement("dt")}} 要素と、それに続く1つ以上の {{HTMLElement("dd")}} 要素、さらに任意で {{HTMLElement("script")}} 要素や {{HTMLElement("template")}} 要素が混在。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a> を受け入れるすべての要素。<br> + または ({{glossary("WHATWG")}} HTML において) {{HTMLElement("dl")}} 要素。</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLDivElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を持ちます。</p> + +<div class="blockIndicator note"> +<p><strong>メモ:</strong> <code>align</code> 属性は廃止されたので、使用しないでください。代わりに、 CSS のプロパティを使用したり、 <a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッド</a>や <a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">CSS フレックスボックス</a>を使用して <code><div></code> 要素をページの中央に配置したりしてください。</p> +</div> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<ul> + <li><code><div></code> 要素は、他に適切な意味的要素（{{HTMLElement("article")}} や {{HTMLElement("nav")}} など）がない場合に限り使用してください。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="A_simple_example" name="A_simple_example">単純な例</h3> + +<pre class="brush:html"><div> + <p>Any kind of content here. Such as + &lt;p&gt;, &lt;table&gt;. You name it!</p> +</div> </pre> + +<p>結果はこのようになります。</p> + +<p>{{EmbedLiveSample("A_simple_example", 650, 60)}}</p> + +<h3 id="A_styled_example" name="A_styled_example">スタイル付けを行う例</h3> + +<p>この例では CSS を用いて <code><div></code> にスタイルを適用することで、影付きのボックスを作成します。なお、 <code><div></code> 要素に {{htmlattrxref("class")}} 属性を使用して、 <code>"shadowbox"</code> という名前のスタイルを要素に適用します。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="shadowbox"> + <p>Here's a very interesting note displayed in a + lovely shadowed box.</p> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.shadowbox { + width: 15em; + border: 1px solid #333; + box-shadow: 8px 8px 5px #444; + padding: 8px 12px; + background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc); +}</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample("A_styled_example", 650, 120)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-div-element', '<div>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新のスナップショットから変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '<div>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td><code>align</code> を廃止</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '<div>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.elements.div")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>意味的区分要素: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}</li> + <li>記述コンテンツのスタイリング用の {{HTMLElement("span")}} 要素</li> +</ul> diff --git a/files/ja/web/html/element/dl/index.html b/files/ja/web/html/element/dl/index.html new file mode 100644 index 0000000000..bdc8f616cf --- /dev/null +++ b/files/ja/web/html/element/dl/index.html @@ -0,0 +1,225 @@ +--- +title: '<dl>: 説明リスト要素' +slug: Web/HTML/Element/dl +tags: + - HTML + - HTML コンテンツグループ化 + - 'HTML:フローコンテンツ' + - 'HTML:知覚可能コンテンツ' + - Reference + - Web + - ウェブ + - リファレンス + - 要素 +translation_of: Web/HTML/Element/dl +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><dl></code></strong> 要素は、説明リストを表します。この要素は、一連の用語（{{HTMLElement("dt")}} 要素を使用して指定）と説明（{{HTMLElement("dd")}} 要素によって提供）をリスト化したものです。一般的な使用例として、用語集の作成やメタデータ（キーと値のペアのリスト）の表示が挙げられます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/dl.html", "tabbed-standard")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリー</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>、<code><dl></code> 要素の子要素が 1 つの名前と値のグループの場合は知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td> + <p>1 個以上の {{HTMLElement("dt")}} 要素とそれに続く 1 個以上の {{HTMLElement("dd")}} 要素、任意で {{HTMLElement("script")}} 要素や {{HTMLElement("template")}} 要素が混在するもの。<br> + または 1 個以上の {{HTMLElement("div")}} 要素、任意で {{HTMLElement("script")}} 要素や {{HTMLElement("template")}} 要素が混在するもの。</p> + </td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLDListElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみがあります。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Single_term_and_description" name="Single_term_and_description">一つの定義語に対する一つの定義説明</h3> + +<pre class="brush: html notranslate"><dl> + <dt>Firefox</dt> + <dd> + A free, open source, cross-platform, + graphical web browser developed by the + Mozilla Corporation and hundreds of + volunteers. + </dd> + + <!-- Other terms and descriptions --> +</dl> +</pre> + +<p>{{EmbedLiveSample("Single_term_and_description")}}</p> + +<h3 id="Multiple_terms_single_description" name="Multiple_terms_single_description">複数の定義語に対する一つの定義説明</h3> + +<pre class="brush: html notranslate"><dl> + <dt>Firefox</dt> + <dt>Mozilla Firefox</dt> + <dt>Fx</dt> + <dd> + A free, open source, cross-platform, + graphical web browser developed by the + Mozilla Corporation and hundreds of + volunteers. + </dd> + + <!-- Other terms and descriptions --> +</dl> +</pre> + +<p>{{EmbedLiveSample("Multiple_terms_single_description")}}</p> + +<h3 id="Single_term_multiple_descriptions" name="Single_term_multiple_descriptions">一つの定義語に対し、複数の定義内容をあてる</h3> + +<pre class="brush: html notranslate"><dl> + <dt>Firefox</dt> + <dd> + A free, open source, cross-platform, + graphical web browser developed by the + Mozilla Corporation and hundreds of + volunteers. + </dd> + <dd> + The Red Panda also known as the Lesser + Panda, Wah, Bear Cat or Firefox, is a + mostly herbivorous mammal, slightly larger + than a domestic cat (60 cm long). + </dd> + + <!-- Other terms and descriptions --> +</dl> +</pre> + +<p>{{EmbedLiveSample("Single_term_multiple_descriptions")}}</p> + +<h3 id="Multiple_terms_and_descriptions" name="Multiple_terms_and_descriptions">複数の定義語に対し、複数の定義内容をあてる</h3> + +<p>これまでの例を組み合わせることで、複数の定義語に対し、複数の内容を定義することもできます。</p> + +<h3 id="Metadata" name="Metadata">メタデータ</h3> + +<p>説明リストは、キーと値のペアのリストであるメタデータの表示にも役立ちます。</p> + +<pre class="brush: html notranslate"><dl> + <dt>Name</dt> + <dd>Godzilla</dd> + <dt>Born</dt> + <dd>1952</dd> + <dt>Birthplace</dt> + <dd>Japan</dd> + <dt>Color</dt> + <dd>Green</dd> +</dl> +</pre> + +<p>ヒント: CSS でキーと値のセパレーターを定義すると便利でしょう。</p> + +<pre class="brush: css notranslate">dt::after { + content: ": "; +}</pre> + +<h3 id="Wrapping_name-value_groups_in_HTMLElementdiv_elements" name="Wrapping_name-value_groups_in_HTMLElement(div)_elements">名前と値のグループを {{HTMLElement("div")}} 要素で包む</h3> + +<p><a href="/ja/docs/Glossary/WHATWG">WHATWG</a> HTML では、{{HTMLElement("dl")}} 要素内でそれそれの名前と値のグループを、{{HTMLElement("div")}} 要素で包むことができます。これは <a href="/ja/docs/Web/HTML/Microdata">microdata</a> を使用するとき、グループ全体に <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a> を適用するとき、あるいはスタイルを設定するために役立ちます。</p> + +<pre class="brush: html notranslate"><dl> + <div> + <dt>Name</dt> + <dd>Godzilla</dd> + </div> + <div> + <dt>Born</dt> + <dd>1952</dd> + </div> + <div> + <dt>Birthplace</dt> + <dd>Japan</dd> + </div> + <div> + <dt>Color</dt> + <dd>Green</dd> + </div> +</dl> +</pre> + +<h2 id="Notes" name="Notes">メモ</h2> + +<p>単なる字下げの目的でこの要素 (あるいは {{HTMLElement("ul")}} 要素) を使用するのは誤りです。そのように機能しますが、これは悪い慣習であり説明リストの意味を不明瞭にします。</p> + +<p>用語の説明のインデントを変更するには、<a href="/ja/docs/Web/CSS">CSS</a> の {{cssxref("margin")}} プロパティを使用します。</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> + +<p>読み上げソフトによって <code><dl></code> の内容の読み上げは異なります。iOS の VoiceOver など、読み上げソフトによっては <code><dl></code> の内容がリストであるため読み上げないものがあります。このため、リストグループ内の他のリスト項目との関係が分かるような形でリスト項目の内容が書かれていることを確認してください。</p> + +<ul> + <li><a href="https://s.codepen.io/aardrian/debug/NzGaKP">CodePen - HTML Buddies: dt & dd</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-dl-element', '<dl>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dl-element', '<dl>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dl>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.dl")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("dt")}} 要素</li> + <li>{{HTMLElement("dd")}} 要素</li> +</ul> diff --git a/files/ja/web/html/element/dt/index.html b/files/ja/web/html/element/dt/index.html new file mode 100644 index 0000000000..f7b122f311 --- /dev/null +++ b/files/ja/web/html/element/dt/index.html @@ -0,0 +1,102 @@ +--- +title: '<dt>: 説明用語要素' +slug: Web/HTML/Element/dt +tags: + - HTML + - HTML コンテンツグループ化 + - Reference + - ウェブ + - リスト + - リファレンス + - 定義リスト + - 用語 + - 要素 +translation_of: Web/HTML/Element/dt +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><dt></code> 要素</strong>は、説明又は定義リストの中で用語を表す部分であり、 {{HTMLElement("dl")}} の子要素としてのみ用いることができます。</span>普通は {{HTMLElement("dd")}} 要素が続きます。しかし、複数の <code><dt></code> 要素が続くと、複数の用語がすぐ後に続く {{HTMLElement("dd")}} 要素で定義されていることを表します。</p> + +<p>後に続く {{HTMLElement("dd")}} (<strong>詳細説明</strong>) 要素は、 <code><dt></code> を用いて指定した用語について、定義やその他の関連する文字列を表します。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/dt.html", "tabbed-standard")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td>なし</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>。ただし {{HTMLElement("header")}}、{{HTMLElement("footer")}}、区分コンテンツ、見出しコンテンツを除く。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>開始タグは必須。他の <code><dt></code> または {{HTMLElement("dd")}} 要素が後続する場合、もしくは親要素である <code><dl></code> 要素内に後続する要素がない場合に、終了タグが省略可能となる。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>{{HTMLElement("dl")}} または (<a href="/ja/docs/Glossary/WHATWG">WHATWG</a> HTML において) {{HTMLElement("dl")}} の中にある {{HTMLElement("div")}} の内部における、 {{HTMLElement("dt")}} または {{HTMLElement("dd")}} の前。</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}。 Gecko 1.9.2 (Firefox 4) 以前では、 Firefox はこの要素に対し <a href="/en-US/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> インターフェイスを実装していました。</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">グローバル属性</a>のみを持ちます。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>使用例は、 <a href="/ja/docs/Web/HTML/Element/dl#Examples" title="HTML/Element/dl#Examples"><code><dl></code> 要素の例</a>を参照して下さい。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-dt-element', '<dt>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dt-element', '<dt>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dt>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.elements.dt")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("dd")}}, {{HTMLElement("dl")}}</li> +</ul> diff --git a/files/ja/web/html/element/element/index.html b/files/ja/web/html/element/element/index.html new file mode 100644 index 0000000000..5bc66fccb6 --- /dev/null +++ b/files/ja/web/html/element/element/index.html @@ -0,0 +1,64 @@ +--- +title: '<element>: カスタム要素 (廃止)' +slug: Web/HTML/Element/element +tags: + - Element + - HTML + - Obsolete + - Web Components + - custom elements + - shadow dom +translation_of: Web/HTML/Element/element +--- +<div>{{HTMLRef}}{{obsolete_header}}</div> + +<p><span class="seoSummary">廃止された <strong>HTML の <code><element></code> 要素</strong>は、<a href="/en-US/docs/Web/Web_Components">ウェブコンポーネント</a>の仕様書の一部でした。新しいカスタム DOM 要素を定義するために使用することを意図していました。</span>これは JavaScript からの新しいカスタム要素を生成する方法に取って代わられ、削除されました。</p> + +<div class="warning"> +<p><strong>メモ:</strong> この要素は仕様書から削除されました。仕様書の編集者からの情報は<a href="http://lists.w3.org/Archives/Public/public-webapps/2013JulSep/0287.html">こちら</a>を参照してください。</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">コンテンツカテゴリー</a></th> + <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content">透過的コンテンツ</a></td> + </tr> + <tr> + <th scope="row">許可されているコンテンツ</th> + <td>???</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親コンテンツ</th> + <td>???</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/en-US/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<p><code><element></code> 要素は以前、<a href="http://w3c.github.io/webcomponents/spec/custom/">カスタム要素</a>の仕様書の草稿に含まれていましたが、削除されました。</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.element")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>ウェブコンポーネント: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}, {{HTMLElement("slot")}}, {{HTMLElement("template")}}</li> +</ul> diff --git a/files/ja/web/html/element/em/index.html b/files/ja/web/html/element/em/index.html new file mode 100644 index 0000000000..2f4f0e1d09 --- /dev/null +++ b/files/ja/web/html/element/em/index.html @@ -0,0 +1,132 @@ +--- +title: '<em>: 強調要素' +slug: Web/HTML/Element/em +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/em +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><em></code> 要素</strong>は、強調されたテキストを示します。<code><em></code> 要素は入れ子にすることができ、入れ子の段階に応じてより強い程度の強調を表すことができます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/em.html", "tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/Guide/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}。 Gecko 1.9.2 (Firefox 4) 以前では、この要素には {{domxref("HTMLSpanElement")}} インターフェイスが実装されています。</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>以外の属性はありません。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<p><code><em></code> 要素は、周囲の文字列と比較して強調される言葉のためのものであり、ふつうは文内の一語又は数語に限定され、文自体の意味に影響します。</p> + +<p>通常、この要素は斜体で表示されます。しかしながら、単に斜体のスタイルを適用するために用いるべきではなく、そのような目的のためには CSS によるスタイル付けを使用してください。著作物（書籍、演劇、歌など）の題名を示すためには、 {{HTMLElement("cite")}} 要素を使用してください。これも通常、斜体のスタイルとなりますが、異なる意味を持っています。周辺のテキストよりも高い重要性を持つテキストを示すためには、{{HTMLElement("strong")}} 要素を使用してください。</p> + +<div class="note"> +<p><strong>訳注:</strong> 日本語フォントでは斜体を持たないフォントが多く、斜体で表示されないことがあります。</p> +</div> + +<h3 id="<i>_vs._<em>" name="<i>_vs._<em>"><i> と <em></h3> + +<p>新しい開発者はよく、同様の結果を生み出すために複数の要素があることによく混乱します。 <code><em></code> と<code><i></code> はその代表例で、どちらも文字列を斜体にするものです。違いは何でしょうか。どちらを使用するべきでしょうか。</p> + +<p>既定では、視覚的な結果は同じです。しかし、意味論的な意味合いは異なります。 <code><em></code> 要素はその内容を強調することを表しますが、一方で <code><i></code> 要素は、外来語、架空の登場人物の考え、用語の定義を表す文字列など、通常の文章から外れた文字列を表します。（書籍や映画などの作品名には、 <code><cite></code> を使用してください。）</p> + +<p>つまり、どちらを使うのが正しいかは場面に依存します。どちらも純粋な装飾目的ではなく、それは CSS による整形の役割です。</p> + +<p><code><em></code> の例は "Just <em>do</em> it already!" や "We <em>had</em> to do something about it" です。文字列を読む人やソフトウェアは、斜体の単語を強調して読み上げるでしょう。</p> + +<p><code><i></code> の例は "The <em>Queen Mary</em> sailed last night" です。ここで、 "Queen Mary" という語句に強調や重要性は与えていません。これは単に、対象物が Mary という名前の女王ではなく<em>Queen Mary</em> という名前の船であることを示します。<code><i></code> の別の例として "The word <em>the</em> is an article" があります。</p> + +<h2 id="Example" name="Example">例</h2> + +<p><code><em></code> 要素は、暗黙的あるいは明示的な対比を表すためによく使われます。</p> + +<pre class="brush: html notranslate"><p> + In HTML 5, what was previously called + <em>block-level</em> content is now called + <em>flow</em> content. +</p></pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-em-element', '<em>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-em-element', '<em>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<em>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.em")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("i")}}</li> +</ul> diff --git a/files/ja/web/html/element/embed/index.html b/files/ja/web/html/element/embed/index.html new file mode 100644 index 0000000000..f1eae81e90 --- /dev/null +++ b/files/ja/web/html/element/embed/index.html @@ -0,0 +1,131 @@ +--- +title: '<embed>: 埋め込み外部コンテンツ要素' +slug: Web/HTML/Element/embed +tags: + - Element + - Embedding Content + - External content + - HTML + - HTML embedded content + - HTML5 + - Plugins + - Reference + - Web + - embed +translation_of: Web/HTML/Element/embed +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><embed></code> 要素</strong>は、外部のコンテンツを文書中の指定された場所に埋め込みます。コンテンツは外部アプリケーションや、対話型コンテンツの他の出所 (ブラウザーのプラグインなど) によって提供されます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/embed.html", "tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<div class="blockIndicator note"> +<p><strong>注:</strong> 本文書は、 HTML5 の一部として定義された要素についてのみ記載します。以前の標準化されていない要素の実装については扱いません。</p> +</div> + +<p>最近のほとんどのブラウザーは、ブラウザーのプラグインの対応を非推奨にして削除しているため、サイトを平均的なユーザーのブラウザーで操作できるようにしたいのであれば、 <code><embed></code> に頼ることは賢明ではないということを意識しておいてください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Flow_content">フローコンテンツ</a>、<a href="/ja/docs/Web/Guide/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>、埋め込みコンテンツ、対話型コンテンツ、<a href="/ja/docs/Web/Guide/HTML/Content_categories#Palpable_content">知覚可能コンテンツ</a></td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>なし。これは{{Glossary("empty element", "空要素")}}です。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>開始タグは必須。終了タグを記述してはならない。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>埋め込みコンテンツを受け入れるすべての要素。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("img")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLEmbedElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{htmlattrdef("height")}}</dt> + <dd>このリソースを表示する高さを <a href="https://drafts.csswg.org/css-values/#px">CSS ピクセル値</a>で示します。絶対的な値でなければなりません。パーセント値は使用<em>できません</em>。</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>埋め込むリソースの URL を示します。</dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd>インスタンス化するプラグインを選択するために使用する {{glossary("MIME type", "MIME タイプ")}}。</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>このリソースを表示する幅を <a href="https://drafts.csswg.org/css-values/#px">CSS ピクセル値</a>で示します。絶対的な値でなければなりません。パーセント値は使用<em>できません</em>。</dd> +</dl> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<p>{{cssxref("object-position")}} プロパティを使用して、要素のフレーム内の埋め込みオブジェクトの位置を調整することができ、 {{cssxref("object-fit")}} プロパティを使用して、オブジェクトの寸法をフレーム内にどのように合わせるかを制御することができます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html notranslate"><embed type="video/quicktime" src="movie.mov" width="640" height="480" title="私の動画の題名"> +</pre> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> + +<p><code>embed</code> 要素に <a href="/ja/docs/Web/HTML/Global_attributes/title"><code>title</code> 属性</a>を使用してコンテンツにラベルを付けるようにしてください。そうすれば、読み上げソフトのような支援技術を使用して捜査している人々が内容を理解することができるようになります。題名がないと、埋め込みコンテンツが何であるかを特定することができません。このようにして文脈を見失うと、特に <code>embed</code> 要素が動画や音声のような対話的なコンテンツを含んでいたとに、混乱したり時間を浪費したりします。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-embed-element', '<embed>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics-embedded-content.html#the-embed-element', '<embed>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="note"> +<p><strong>注:</strong> Firefox のバージョン45以前では HTML リソースの内容を表示せず、プラグインが必要である旨の汎用的なメッセージを表示します ({{Bug("730768")}} をご覧ください)。</p> +</div> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.embed")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>様々な種類のコンテンツの埋め込みのために使用されるその他の要素: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, {{HTMLElement("video")}}</li> + <li>フレーム内での埋め込みコンテンツの位置や寸法の設定: {{cssxref("object-position")}} および {{cssxref("object-fit")}}</li> +</ul> diff --git a/files/ja/web/html/element/fieldset/index.html b/files/ja/web/html/element/fieldset/index.html new file mode 100644 index 0000000000..240beeec04 --- /dev/null +++ b/files/ja/web/html/element/fieldset/index.html @@ -0,0 +1,163 @@ +--- +title: '<fieldset>: フィールドセット要素' +slug: Web/HTML/Element/fieldset +tags: + - Element + - Forms + - HTML + - HTML forms + - Reference + - Web +translation_of: Web/HTML/Element/fieldset +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><fieldset></code> 要素</strong>は、ウェブフォーム内のラベル ({{HTMLElement("label")}}) などのようにいくつかのコントロールをグループ化するために使用します。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/fieldset.html", "tabbed-standard")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<p>上記の例にあるように、 <code><fieldset></code> 要素は HTML フォームの一部をグループ化し、内側の {{htmlelement("legend")}} 要素で <code><fieldset></code> のキャプションを提供しています。いくつかの属性を取りますが、特に重要なものとして <code>form</code> は、同じページの {{htmlelement("form")}} の <code>id</code> を含むことができ、 <code><fieldset></code> が <code><form></code> の中になくてもその一部として扱うことができたり、 <code>disabled</code> は、 <code><fieldset></code> およびその中身を一度に無効にすることができたりします。</p> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>この論理型属性が設定されている場合、 <fieldset> の子孫要素として配置したフォームコントロールはすべて無効になり、つまり編集したり {{htmlelement("form")}} と一緒に送信したりすることができなくなります。マウスクリックやフォーカス関連のイベントのような閲覧イベントを受け取らなくなります。既定では、ブラウザーはそのようなコントロールを灰色で表示します。なお、子孫の {{HTMLElement("legend")}} 要素の中のフォーム要素は無効になりません。</dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd>{{HTMLElement("form")}} 要素の {{htmlattrxref("id")}} 属性を指定し、 <code><fieldset></code> 要素はたとえその中になくても、その一部とすることができます。なお、 <code><fieldset></code> 内の {{HTMLElement("input")}} 要素をフォームに関連付けたい場合は、それらの要素に直接 <code>form</code> 属性を使用する必要があります。どの要素がフォームに関連付けられているかは、 JavaScript で {{domxref("HTMLFormElement.elements")}} を使用して確認することができます。</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>グループに関連付けられた名前です。 + <div class="note"><strong>注</strong>: fieldset 要素自身のラベルの役割は、その最初の子要素として配置した {{HTMLElement("legend")}} 要素が担います。</div> + </dd> +</dl> + +<h2 id="Styling_with_CSS" name="Styling_with_CSS">CSS でのスタイル付け</h2> + +<p><code><fieldset></code> には、スタイル付けの特殊な考慮事項がいくつかあります。</p> + +<p>{{cssxref("display")}} の値は既定で <code>block</code> であり、<a href="/ja/docs/Web/Guide/CSS/Block_formatting_context">ブロック整形コンテキスト</a>を確立します。 <code><fieldset></code> がインラインレベルの <code>display</code> の値でスタイル付けされた場合は <code>inline-block</code> として動作し、そうでなければ <code>block</code> として動作します。既定では、コンテンツを囲む <code>2px</code> <code>groove</code> の境界線があり、少量の既定のパディングがあります。要素は既定で {{cssxref("min-inline-size", "min-inline-size: min-content")}} を持ちます。</p> + +<p>{{htmlelement("legend")}} が存在する場合は、 <code>block-start</code> 境界線の上に配置されます。 <code><legend></code> は縮小折り返しであり、整形コンテキストを確立します。 <code>display</code> の値はブロック的です。 (例えば、 <code>display: inline</code> は <code>block</code> として動作します。)</p> + +<p><code><fieldset></code> の内容を保持する無名のボックスが生成され、 <code><fieldset></code> から特定のプロパティを継承します。 <code><fieldset></code> が <code>display: grid</code> または <code>display: inline-grid</code> でスタイル付けされていた場合、無名ボックスはグリッド整形コンテキストになり、 <code><fieldset></code> が <code>display: flex</code> または <code>display: inline-flex</code> でスタイル付けされていた場合、無名ボックスはフレックス整形コンテキストになります。それ以外の場合はブロック整形コンテキストになります。</p> + +<p><code><fieldset></code> および <code><legend></code> に対しては、ページデザインに合うあらゆる方法で気軽にスタイル付けしてください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Simple_fieldset" name="Simple_fieldset">単純なフィールドセット</h3> + +<p>この例は、本当に単純な <code><fieldset></code> の例で、 <code><legend></code> および1つのコントールが中にあります。</p> + +<pre class="brush: html notranslate"><form action="#"> + <fieldset> + <legend>Simple fieldset</legend> + <input type="radio" id="radio"> + <label for="radio">Spirit of radio</label> + </fieldset> +</form></pre> + +<p>{{ EmbedLiveSample('Simple_fieldset', '100%', '80') }}</p> + +<h3 id="Disabled_fieldset" name="Disabled_fieldset">無効化したフィールドセット</h3> + +<p>この例は無効化した <code><fieldset></code> で、二つのコントロールが中にあります。なお、両方のコントロールは無効化した <code><fieldset></code> の中にあるので、無効になります。</p> + +<pre class="brush: html notranslate"><form action="#"> + <fieldset disabled> + <legend>Disabled fieldset</legend> + <div> + <label for="name">Name: </label> + <input type="text" id="name" value="Chris"> + </div> + <div> + <label for="pwd">Archetype: </label> + <input type="password" id="pwd" value="Wookie"> + </div> + </fieldset> +</form></pre> + +<p>{{ EmbedLiveSample('Disabled_fieldset', '100%', '110') }}</p> + +<h2 id="Technical_summary" name="Technical_summary">技術的概要</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリー</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Sections_and_Outlines_of_an_HTML5_document#Sectioning_root">区分化ルート</a>, <a href="/ja/docs/Web/HTML/Content_categories#Form_listed">リスト化</a>, <a href="/ja/docs/Web/HTML/Content_categories#Form-associated_content">フォーム関連</a>要素, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>任意の {{HTMLElement("legend")}} 要素と、それに続くフローコンテンツ</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td>{{ARIARole("group")}}</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>{{ARIARole("radiogroup")}}, {{ARIARole("presentation")}}, {{ARIARole("none")}}</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLFieldSetElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-fieldset-element', '<fieldset>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td><code>fieldset</code> 要素を定義</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-fieldset-element', '<fieldset>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.10', '<fieldset>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.fieldset")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("legend")}} 要素</li> + <li>{{HTMLElement("input")}} 要素</li> + <li>{{HTMLElement("label")}} 要素</li> + <li>{{HTMLElement("form")}} 要素</li> +</ul> diff --git a/files/ja/web/html/element/figcaption/index.html b/files/ja/web/html/element/figcaption/index.html new file mode 100644 index 0000000000..f3403dc145 --- /dev/null +++ b/files/ja/web/html/element/figcaption/index.html @@ -0,0 +1,91 @@ +--- +title: '<figcaption>: 図キャプション要素' +slug: Web/HTML/Element/figcaption +tags: + - HTML + - HTML コンテンツグループ化 + - 'HTML:フローコンテンツ' + - Reference + - 要素 +translation_of: Web/HTML/Element/figcaption +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><figcaption></code> 要素または図キャプション要素</strong>は、親の {{HTMLElement("figure")}} 要素内にあるその他のコンテンツを説明するキャプションや凡例を表します。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/figcaption.html","tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td>なし</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>{{HTMLElement("figure")}} 要素。 <code><figcaption></code> 要素は最初または最後の子要素でなければなりません。</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>{{ARIARole("group")}}、 {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes" rel="internal">グローバル属性</a>のみがあります。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code><figcaption></code> の例については、 {{HTMLElement("figure")}} のページを参照して下さい。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-figcaption-element', '<figcaption>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figcaption-element', '<figcaption>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されます。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.figcaption")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("figure")}} 要素</li> +</ul> diff --git a/files/ja/web/html/element/figure/index.html b/files/ja/web/html/element/figure/index.html new file mode 100644 index 0000000000..2eb475494e --- /dev/null +++ b/files/ja/web/html/element/figure/index.html @@ -0,0 +1,171 @@ +--- +title: '<figure>: 任意のキャプション付きの図要素' +slug: Web/HTML/Element/figure +tags: + - HTML + - HTML コンテンツグループ化 + - 'HTML:フローコンテンツ' + - 'HTML:区分化ルート' + - 'HTML:知覚可能コンテンツ' + - Reference + - 要素 +translation_of: Web/HTML/Element/figure +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><figure></code> (任意のキャプション付きの図) 要素</strong>は、図表などの自己完結型のコンテンツを表し、任意で ({{HTMLElement("figcaption")}}) 要素を使用して表されるキャプションを伴います。</span>図、すなわちキャプションとその中身は一つの単位として参照されます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/figure.html","tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Sectioning_roots">区分化ルート</a>, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>{{HTMLElement("figcaption")}} 要素とそれに続く<a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>、またはフローコンテンツとそれに続く{{HTMLElement("figcaption")}} 要素、またはフローコンテンツ</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみがあります。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<ul> + <li>ふつう <code><figure></code> は画像、イラスト、グラフ、コードの断片など、文書の本文の流れから参照されるものの、本文の流れに影響を与えることなく、文書のほかの部分や付録に移動することが可能なものに用います。</li> + <li><a href="/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Sectioning_roots">区分化ルート</a>となり、 <code><figure></code> 要素のコンテンツのアウトラインは、文書の本文のアウトラインから除外されます。</li> + <li>キャプションは <code><figure></code> 要素の中に (最初または最後の子要素として) {{HTMLElement("figcaption")}} 要素を挿入することで表すことができます。図の中で最初に見つかった最初の <code><figcaption></code> 要素が図のキャプションとして表示されます。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Images" name="Images">画像</h3> + +<pre class="brush: html"><!-- 単なる画像 --> +<figure> + <img + src="https://developer.mozilla.org/static/img/favicon144.png" + alt="美しい MDN のロゴ"> +</figure> + +<!-- キャプションが付いた画像 --> +<figure> + <img + src="https://developer.mozilla.org/static/img/favicon144.png" + alt="美しい MDN のロゴ"> + <figcaption>MDN ロゴ</figcaption> +</figure> +</pre> + +<div>{{EmbedLiveSample("Images", "100%", 375)}}</div> + +<h3 id="Code_snippets" name="Code_snippets">コードスニペット</h3> + +<pre class="brush: html"><figure> + <figcaption>Get browser details using <code>navigator</code>.</figcaption> + <pre> +function NavigatorExample() { + var txt; + txt = "Browser CodeName: " + navigator.appCodeName + "; "; + txt+= "Browser Name: " + navigator.appName + "; "; + txt+= "Browser Version: " + navigator.appVersion + "; "; + txt+= "Cookies Enabled: " + navigator.cookieEnabled + "; "; + txt+= "Platform: " + navigator.platform + "; "; + txt+= "User-agent header: " + navigator.userAgent + "; "; + console.log("NavigatorExample", txt); +} + </pre> +</figure></pre> + +<div>{{EmbedLiveSample("Code_snippets", "100%", 250)}}</div> + +<h3 id="Quotations" name="Quotations">引用</h3> + +<pre class="brush: html"><figure> + <figcaption><cite>Edsger Dijkstra:</cite></figcaption> + <blockquote>デバッグがソフトウェアのバグを取るプロセスであるならば、 + プログラミングはそれを入れるプロセスだ。</blockquote> +</figure> +</pre> + +<div>{{EmbedLiveSample("Quotations")}}</div> + +<h3 id="Poems" name="Poems">詩</h3> + +<pre class="brush: html"><figure> + <p style="white-space:pre"> +Bid me discourse, I will enchant thine ear, + Or like a fairy trip upon the green, +Or, like a nymph, with long dishevell'd hair, + Dance on the sands, and yet no footing seen: +Love is a spirit all compact of fire, + Not gross to sink, but light, and will aspire.</p> + <figcaption><cite>Venus and Adonis</cite>, + by William Shakespeare</figcaption> +</figure></pre> + +<div>{{EmbedLiveSample("Poems", "100%", 250)}}</div> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-figure-element', '<figure>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.2', 'grouping-content.html#the-figure-element', '<figure>')}}</td> + <td>{{Spec2('HTML5.2')}}</td> + <td>HTML 5.0 から変更なし</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figure-element', '<figure>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されます。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.figure")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("figcaption")}} 要素</li> +</ul> diff --git a/files/ja/web/html/element/font/index.html b/files/ja/web/html/element/font/index.html new file mode 100644 index 0000000000..35129319f9 --- /dev/null +++ b/files/ja/web/html/element/font/index.html @@ -0,0 +1,52 @@ +--- +title: <font> +slug: Web/HTML/Element/font +tags: + - Element + - HTML + - Obsolete + - Reference + - Web + - 廃止 +translation_of: Web/HTML/Element/font +--- +<div>{{ obsolete_header }}</div> + +<h2 id="概要">概要</h2> + +<p><em>フォント要素</em>（<code><font></code>）はその内包するテキストの、フォントサイズ、文字色、使用フォントを定義します。</p> + +<div class="note"> +<p><em>使用上の注意:</em></p> + +<p><strong>この要素は使用しないで下さい！</strong> この要素は HTML 3.2 で一度仕様に取り込まれましたが、HTML 4.01 で他の外見のみに関するすべての要素とともに非推奨要素とされ、 HTML5 で廃止されています。</p> + +<p>HTML 4 になって、 HTML ではスタイルに関する情報を扱わなくなりました（{{HTMLElement("style")}} 要素や各要素の <strong>style</strong> 属性は例外）。新規のウェブ開発では、スタイルは <a href="/ja/docs/CSS" title="CSS">CSS</a> のみを用いて記述するべきです。</p> + +<p>以前の {{HTMLElement("font")}} 要素の動きは、 CSS の <a href="/en-US/docs/Web/CSS/CSS_Fonts">CSS Fonts</a> でより良い形で実現できます。</p> +</div> + +<h2 id="属性">属性</h2> + +<p>他のすべての HTML 要素と同様に、この要素は <a href="/ja/docs/HTML/Global_attributes" title="HTML/Global attributes">グローバル属性</a>に対応しています。</p> + +<dl> + <dt>{{ htmlattrdef("color") }}</dt> + <dd>色名または #RRGGBB 形式のカラーコードでテキストの色を指定します。</dd> + <dt>{{ htmlattrdef("face") }}</dt> + <dd>フォント名を 1 つ、またはカンマで区切って複数指定します。複数記述した場合は、表示可能なフォントの内で最初のものが優先されます。指定したフォントが全てローカルのシステム内にインストールされていない場合は、システムで設定されている等幅フォントかプロポーショナルフォントが適用されます。</dd> + <dt>{{ htmlattrdef("size") }}</dt> + <dd>フォントサイズとして、数値または相対値キーワードを指定します。 数値の場合の範囲は <code>1</code> から <code>7</code> で、<code>1</code> が最小、<code>3</code> が初期値となります。 「<code>+2</code>」、「<code>-3</code>」の様に、{{ HTMLElement("basefont") }} 要素の {{ htmlattrxref("size", "basefont") }} 属性の値、もしくは初期値である <code>3</code> を基準とする相対値で記述する事も可能です。</dd> +</dl> + +<h2 id="DOM_interface" name="DOM_interface">DOM インターフェース</h2> + +<p>この要素は {{domxref("HTMLFontElement")}} インターフェースを提供します。</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されます。データに貢献したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.font")}}</p> + +<div>{{ HTMLRef }}</div> diff --git a/files/ja/web/html/element/footer/index.html b/files/ja/web/html/element/footer/index.html new file mode 100644 index 0000000000..15fd4563c7 --- /dev/null +++ b/files/ja/web/html/element/footer/index.html @@ -0,0 +1,115 @@ +--- +title: <footer> +slug: Web/HTML/Element/footer +tags: + - Element + - HTML + - HTML sections + - Reference +translation_of: Web/HTML/Element/footer +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><footer></code> 要素</strong>は、直近の<a href="/ja/docs/Web/Guide/HTML/Content_categories#Sectioning_content">区分コンテンツ</a>または<a href="/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Sectioning_root">区分化ルート</a>要素のフッターを表します。フッターには通常、そのセクションの著作者に関する情報、関連文書へのリンク、著作権情報等を含めます。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/footer.html", "tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>。但し、他の <code><footer></code> や {{HTMLElement("header")}} の子孫がないもの。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素。ただし、 {{HTMLElement("address")}}, {{HTMLElement("header")}}, 他の <code><footer></code> の子孫要素として配置してはならない。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">contentinfo</a>、ただし <a href="/ja/docs/Web/HTML/Element/article">article</a>, <a href="/ja/docs/Web/HTML/Element/aside">aside</a>, <a href="/ja/docs/Web/HTML/Element/main">main</a>, <a href="/ja/docs/Web/HTML/Element/nav">nav</a>, <a href="/ja/docs/Web/HTML/Element/section">section</a> のいずれかの要素、または <code>role=<a href="/ja/docs/Web/Accessibility/ARIA/Roles/Article_Role">article</a></code>, <a href="/ja/docs/Web/Accessibility/ARIA/Roles/Complementary_role">complementary</a>, <a href="/ja/docs/Web/Accessibility/ARIA/Roles/Main_role">main</a>, <a href="/ja/docs/Web/Accessibility/ARIA/Roles/Navigation_Role">navigation</a>, <a href="/ja/docs/Web/Accessibility/ARIA/Roles/Region_role">region</a> がある要素の子である場合は<a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}, {{ARIARole("none")}}</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみがあります。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<ul> + <li>セクションの著作者や編集者の連絡先情報は、多くの場合 <code><footer></code> 要素内に {{HTMLElement("address")}} 要素として配置します。</li> + <li><code><footer></code> 要素は区分コンテンツではありません。つまり、この要素が新たな<a href="/ja/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">アウトライン</a>を生成することはありません。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html notranslate"><footer> + Some copyright info or perhaps some author + info for an &lt;article&gt;? +</footer> +</pre> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> + +<p>Safari 13 のリリース以前は、 <code>contentinfo</code> の<a href="/ja/docs/Learn/Accessibility/WAI-ARIA_basics#SignpostsLandmarks">ランドマークロール</a>が <a href="https://help.apple.com/voiceover/info/guide/">VoiceOver</a> によって適切に公開されていませんでした。古い Safari ブラウザーに対応する必要がある場合は、 <code>role="contentinfo"</code> を <code>footer</code> 要素に追加して、ランドマークが適切に表示されるようにしてください。</p> + +<ul> + <li>関連記事: <a href="https://bugs.webkit.org/show_bug.cgi?id=146930">WebKit Bugzilla: 146930 – AX: HTML native elements (header, footer, main, aside, nav) should work the same as ARIA landmarks, sometimes they don't</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#the-footer-element', '<footer>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-footer-element', '<footer>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.footer")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>他のセクション関連要素: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}}</li> + <li><a href="/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">HTML のセクションとアウトラインの使用</a></li> + <li class="last"><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">ARIA: Contentinfo ロール</a></li> +</ul> diff --git a/files/ja/web/html/element/form/index.html b/files/ja/web/html/element/form/index.html new file mode 100644 index 0000000000..a87b78ac3e --- /dev/null +++ b/files/ja/web/html/element/form/index.html @@ -0,0 +1,202 @@ +--- +title: <form> +slug: Web/HTML/Element/form +tags: + - HTML + - HTML フォーム + - 'HTML:フローコンテンツ' + - 'HTML:知覚可能コンテンツ' + - Reference + - ウェブ + - フォーム + - 要素 +translation_of: Web/HTML/Element/form +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><form></code> 要素</strong>は、ウェブサーバーに情報を送信するための対話型コントロールを含む文書の区間を表します。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/form.html", "tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p><code><form></code> 要素には、 CSS の {{cssxref(':valid')}} および {{cssxref(':invalid')}} 疑似クラスを使用して整形することが可能です。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Palpable_content">知覚可能コンテンツ</a></td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Flow_content">フローコンテンツ</a>。ただし、<code><form></code> 要素の中に別の <code><form></code> 要素を内包することは許可されていません。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLFormElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{htmlattrdef("accept")}} {{HTMLVersionInline(4)}} {{obsolete_inline}}</dt> + <dd>サーバーが受け付けるコンテンツ型のコンマ区切りリスト。 + <div class="note"><strong>使用上のメモ:</strong> この属性は HTML5 の仕様から削除されており、すでに使用不可となっています。代わりに個々の {{HTMLElement("input")}} 要素の {{htmlattrxref("accept", "input")}} 属性を使用してください。</div> + </dd> + <dt>{{htmlattrdef("accept-charset")}}</dt> + <dd>サーバーが受け入れる文字エンコーディングのリスト。リストはスペースまたはコンマで区切ることができます。ブラウザーは、それらがリストされている順序を優先順位として使用します。既定値である予約語 <code>"UNKNOWN"</code> は、 form 要素を含む文書のエンコーディングと同じであることを示します。<br> + 以前のバージョンの HTML では、さまざまな文字エンコーディングをスペースまたはコンマで区切ることができました。これは HTML5 ではあてはまらず、スペースだけが適切です。</dd> + <dt>{{htmlattrdef("action")}}</dt> + <dd>フォーム経由で送信された情報を処理するプログラムの URI。この値は {{HTMLElement("button")}}, <code><a href="/ja/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/image"><input type="image"></a></code> の {{htmlattrxref("formaction", "button")}} 属性によって上書きすることが可能です。</dd> + <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt> + <dd>これは iOS 版 Safari Mobile で使用する非標準属性であり、子孫の文字列型フォームコントロールでユーザーが入力または編集したテキスト値を自動的に大文字に変換するか否か、またどのように変換するかを制御します。<code>autocapitalize</code> 属性を個別にフォームコントロール子孫要素で指定した場合は、フォーム全体に設定した <code>autocapitalize</code> より優先します。非推奨とされていない値は、iOS 5 以降で使用できます。既定値は <code>sentences</code> です。以下の値を指定できます。 + <ul> + <li><code>none</code>: 自動大文字化機能を無効にします。</li> + <li><code>sentences</code>: 文の先頭文字を自動的に大文字化します。</li> + <li><code>words</code>: 単語の先頭文字を自動的に大文字化します。</li> + <li><code>characters</code>: すべての文字を自動的に大文字化します。</li> + <li><code>on</code>: {{deprecated_inline}} iOS 5 から非推奨です。</li> + <li><code>off</code>: {{deprecated_inline}} iOS 5 から非推奨です。</li> + </ul> + </dd> + <dt>{{htmlattrdef("autocomplete")}} {{HTMLVersionInline(5)}}</dt> + <dd>input 要素が既定で、ブラウザーによる値の入力補完を受けるかを示します。この設定はフォームに属する要素の <code>autocomplete</code> 属性で上書きできます。以下の値が指定可能です。 + <ul> + <li><code>off</code>: ユーザーは、フォームを使用するたびにすべての値を入力するか、もしくは独自の入力補完を使用する必要があります。ブラウザーが入力補完をサポートすることはありません。</li> + <li><code>on</code>: ブラウザーはユーザーが以前に入力した値に基づき、これを自動補完のための候補として使用することができます。</li> + </ul> + ほとんどの現行ブラウザー (Firefox 38+、Google Chrome 34+、IE 11+ など) では autocomplete 属性を設定しても、ブラウザーのパスワードマネージャーがユーザーにログイン情報 (ユーザー名やパスワード) を保存したいかを問い合わせる、またユーザーが同意した場合に次回以降ページを訪れた際にログイン情報を自動入力することは抑制できません。<a href="/ja/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#autocomplete_属性とログインフィールド">autocomplete 属性とログインフィールド</a>をご覧ください。</dd> + <dd> + <div class="note"> + <p><strong>メモ:</strong> 文書で独自の入力補完を提供するために <code>autocomplete</code> を <code>off</code> に設定する場合は、フォーム内で入力補完が可能なそれぞれの <code>input</code> 要素でも <code>autocomplete</code> を <code>off</code> に設定するべきです。詳しくは、<a href="#Browser_compatibility">互換性一覧表</a>の Google Chrome に関するメモを参照してください。</p> + </div> + </dd> + <dt>{{htmlattrdef("enctype")}}</dt> + <dd><code>method</code> 属性の値が <code>post</code> であるとき、この属性はフォームをサーバーに送信する際に使用する、コンテンツの <a href="https://en.wikipedia.org/wiki/Mime_type">MIME タイプ</a>を示します。以下の値が指定可能です。 + <ul> + <li><code>application/x-www-form-urlencoded</code>: 初期値。属性を指定していない場合、この値が使用されます。</li> + <li><code>multipart/form-data</code>: <code>type</code> 属性で "file" を指定した {{HTMLElement("input")}} 要素のために使用する値です。</li> + <li><code>text/plain</code>: (HTML5)</li> + </ul> + + <p>この値は、 {{HTMLElement("button")}}, <code><a href="/ja/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/image"><input type="image"></a></code> の {{htmlattrxref("formenctype", "button")}} 属性によって上書きすることが可能です。</p> + </dd> + <dt>{{htmlattrdef("method")}}</dt> + <dd>フォームを送信する際にブラウザーが使用する <a href="/ja/docs/Web/HTTP">HTTP</a> メソッドです。以下の値が指定可能です。 + <ul> + <li><code>post</code>: HTTP <a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5">POST メソッド</a>に相当します。フォームのデータはボディに収めてサーバーに送信します。</li> + <li><code>get</code>: HTTP <a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3">GET メソッド</a>に相当します。フォームのデータは '?' をセパレーターとして <code>action</code> 属性の URI に追加して、その結果となる URI をサーバにー送信します。フォームが ASCII 文字列だけを含み、まったく副作用がない場合にのみ、このメソッドを使用してください。</li> + <li><code>dialog</code>: フォームが {{HTMLElement("dialog")}} 要素の中にある場合に使用し、送信するとダイアログが閉じます。</li> + </ul> + + <p>この値は、 {{HTMLElement("button")}}, <code><a href="/ja/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/image"><input type="image"></a></code> の {{htmlattrxref("formmethod", "button")}} 属性によって上書きすることが可能です。</p> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>フォームの名前です。HTML 4 では推奨されていません（代わりに <code>id</code> を用いるべきです）。HTML 5 ではドキュメント内のフォーム間でユニークである必要があり、また空文字列であってはいけません。</dd> + <dt>{{htmlattrdef("novalidate")}} {{HTMLVersionInline("5")}}</dt> + <dd>フォームを送信するときに検証しないことを示す真偽値です。この属性を指定していない（つまり検証される）場合は、既定の設定を {{HTMLElement("button")}}, <code><a href="/ja/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/image"><input type="image"></a></code> の {{htmlattrxref("formnovalidate", "button")}} 属性で上書きすることが可能です。</dd> + <dt>{{htmlattrdef("target")}}</dt> + <dd>フォームを送信した後に受け取った応答の表示位置を示す名前またはキーワードです。これは、HTML 4 ではフレームの名前またはキーワードでした。HTML5 では、<em>閲覧コンテキスト</em> の名前またはキーワードです (例えば、タブ、ウィンドウ、インラインフレームなど)。以下のキーワードは特別な意味を持ちます: + <ul> + <li><code>_self</code>: 応答を現在と同じ HTML 4 フレーム (または HTML5 閲覧コンテキスト) に表示します。この値は、属性が指定されていない場合の既定値です。</li> + <li><code>_blank</code>: 応答を新しい名前のつけられていない、HTML 4 ウィンドウまたは HTML5 の閲覧コンテキストに読み込みます。</li> + <li><code>_parent</code>: 応答を現在のフレームの HTML 4 フレームセットの親要素または HTML5 の現在の親閲覧コンテキストに読み込みます。親要素がない場合、このオプションは <code>_self</code> と同じ振る舞いをします。</li> + <li><code>_top</code>: HTML 4 では、応答を元のウィンドウ全体に読み込み、他のフレームをすべてキャンセルします。HTML5 では、応答をトップレベルの閲覧コンテキストに読み込みます (現在の閲覧コンテキストの祖先にあたり、それ以上親のない要素です)。親要素がない場合、このオプションは <code>_self</code> と同じ振る舞いをします。</li> + <li><em>iframename</em>: 応答を、名前のついた {{HTMLElement("iframe")}} に読み込みます。</li> + </ul> + + <p>HTML5: この値は、 {{HTMLElement("button")}}, <code><a href="/ja/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/image"><input type="image"></a></code> の {{htmlattrxref("formtarget", "button")}} 属性によって上書きすることが可能です。</p> + </dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><!-- Simple form which will send a GET request --> +<form action="" method="get"> + <label for="GET-name">Name:</label> + <input id="GET-name" type="text" name="name"> + <input type="submit" value="Save"> +</form> + +<!-- POST 要求を送信する簡単なフォーム --> +<form action="" method="post"> + <label for="POST-name">Name:</label> + <input id="POST-name" type="text" name="name"> + <input type="submit" value="Save"> +</form> + +<!-- fieldset、legend、label を用いたフォームのマークアップの例 --> +<form action="" method="post"> + <fieldset> + <legend>Title</legend> + <input type="radio" name="radio" id="radio"> + <label for="radio">Click me</label> + </fieldset> +</form> +</pre> + +<p>{{ EmbedLiveSample('Examples', '100%', 110) }}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-form-element', '<form>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-form-element', '<form>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.3', '<form>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.form")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Guide/HTML/Forms">HTML フォームガイド</a></li> + <li>フォームの作成に使用される、その他の要素: {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}},{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}}, {{HTMLElement("meter")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}</li> + <li>フォーム内の要素一覧の取得: {{domxref("HTMLFormElement.elements")}}</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Form_Role">ARIA: Form ロール</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Search_role">ARIA: Search ロール</a></li> +</ul> diff --git a/files/ja/web/html/element/frame/index.html b/files/ja/web/html/element/frame/index.html new file mode 100644 index 0000000000..5d9c6cfb50 --- /dev/null +++ b/files/ja/web/html/element/frame/index.html @@ -0,0 +1,58 @@ +--- +title: <frame> +slug: Web/HTML/Element/frame +tags: + - Deprecated + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/frame +--- +<div>{{HTMLRef}}{{Deprecated_header}}</div> + +<p><code><frame></code> は、別の HTML 文書を表示できる個々の領域を定義する HTML 要素です。 frame 要素は {{HTMLElement("frameset")}} の内部で使用します。</p> + +<p>パフォーマンスの問題やスクリーンリーダーを使用するユーザへのアクセシビリティの欠如といった欠点があるため、 <code><frame></code> 要素の使用は推奨されません。 <code><frame></code> 要素に代わり、 {{HTMLElement("iframe")}} を推奨します。</p> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>他のすべての HTML 要素と同様に、この要素は<a href="/ja/docs/HTML/Global_attributes">グローバル属性</a>を持ちます。</p> + +<dl> + <dt>{{htmlattrdef("src")}}</dt> + <dd>この属性は、フレームに表示する文書を指定します。</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>この属性は、フレームに名前をつけます。名前がなければ、すべてのリンクは自身が存在するフレーム – 直近の親フレームで開きます。詳しくは {{htmlattrxref("target","a")}} 属性を参照してください。</dd> + <dt>{{htmlattrdef("noresize")}}</dt> + <dd>この属性は、ユーザによるフレームのリサイズを抑止します。</dd> + <dt>{{htmlattrdef("scrolling")}}</dt> + <dd>この属性は、スクロールバーの存在の有無を定義します。この属性を指定しない場合、ブラウザは必要なときにスクロールバーを表示します。設定できる値は二つです。 "yes" は不要なときでもスクロールバーを表示します。 "no" は必要なとき<em>でも</em>スクロールバーを表示しません。</dd> + <dt>{{htmlattrdef("marginheight")}}</dt> + <dd>この属性は、フレーム間のマージンの高さを定義します。</dd> + <dt>{{htmlattrdef("marginwidth")}}</dt> + <dd>この属性は、フレーム間のマージンの幅を定義します。</dd> + <dt>{{htmlattrdef("frameborder")}}</dt> + <dd>この属性で、フレームにボーダーを設定できます。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: html"><frameset cols="50%,50%"> + <frame src="https://developer.mozilla.org/en/HTML/Element/iframe" /> + <frame src="https://developer.mozilla.org/en/HTML/Element/frame" /> +</frameset> +</pre> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.elements.frame")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("frameset")}}</li> + <li>{{HTMLElement("iframe")}}</li> +</ul> diff --git a/files/ja/web/html/element/frameset/index.html b/files/ja/web/html/element/frameset/index.html new file mode 100644 index 0000000000..7d63ce0912 --- /dev/null +++ b/files/ja/web/html/element/frameset/index.html @@ -0,0 +1,47 @@ +--- +title: <frameset> +slug: Web/HTML/Element/frameset +tags: + - Deprecated + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/frameset +--- +<div>{{HTMLRef}}{{Deprecated_header}}</div> + +<p><strong>HTML の <code><frameset></code> 要素</strong>は、 {{HTMLElement("frame")}} 要素を包含するために使用する HTML 要素です。</p> + +<div class="note"><strong>メモ:</strong> {{HTMLElement("iframe")}} の使用が支持されたことからフレームの使用は好ましくないため、一般的に現行のウェブサイトではこの要素を使用しません。</div> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>他のすべての HTML 要素と同様に、この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>に対応しています。</p> + +<dl> + <dt>{{htmlattrdef("cols")}}</dt> + <dd>この属性は、フレームセット内の水平方向の領域の数と寸法を指定します。</dd> + <dt>{{htmlattrdef("rows")}}</dt> + <dd>この属性は、フレームセット内の垂直方向の領域の数と寸法を指定します。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: html"><frameset cols="50%,50%"> + <frame src="https://developer.mozilla.org/ja/docs/Web/HTML/Element/frameset" /> + <frame src="https://developer.mozilla.org/ja/docs/Web/HTML/Element/frame" /> +</frameset></pre> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.frameset")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("frame")}}</li> + <li>{{HTMLElement("iframe")}}</li> +</ul> diff --git a/files/ja/web/html/element/head/index.html b/files/ja/web/html/element/head/index.html new file mode 100644 index 0000000000..fcd05172e1 --- /dev/null +++ b/files/ja/web/html/element/head/index.html @@ -0,0 +1,131 @@ +--- +title: '<head>: 文書メタデータ (ヘッダー) 要素' +slug: Web/HTML/Element/head +tags: + - Element + - HTML + - HTML 文書メタデータ + - 'HTML:メタデータコンテンツ' + - Reference + - Web + - ウェブ + - 要素 +translation_of: Web/HTML/Element/head +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><head></code> 要素</strong>は、文書に関する機械可読な情報 ({{glossary("metadata", "メタデータ")}})、たとえば<a href="/ja/docs/Web/HTML/Element/title">題名</a>、<a href="/ja/docs/Web/HTML/Element/script">スクリプト</a>、<a href="/ja/docs/Web/HTML/Element/style">スタイルシート</a>などを含みます。</span></p> + +<div class="blockIndicator note"> +<p><strong>メモ:</strong> <code><head></code> は機械処理のための情報を保持するためのものであり、人間が読むためのものではありません。人間が読むための情報、例えば最上位のヘッダーや著者のリストのためのものは、 {{HTMLElement("header")}} 要素を参照してください。</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td>なし</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td> + <p>文書が {{HTMLElement("iframe")}} の {{htmlattrxref("srcdoc", "iframe")}} 文書である場合、または題名情報がより上位のプロトコル (HTML メールの件名の行など) で使用される場合は、0個以上のメタデータコンテンツ。</p> + + <p>他の場合は正確に1つの {{HTMLElement("title")}} 要素を含む、1個以上のメタデータコンテンツ。</p> + </td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td><code><head></code> 要素内で最初に存在するものが要素である場合、開始タグを省略可能。<br> + <code><head></code> 要素に続く最初のものが空白文字やコメントでない場合、終了タグが省略可能。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>{{HTMLElement("html")}} 要素の最初の子要素として配置可能。</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLHeadElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{htmlattrdef("profile")}} {{obsolete_inline}}</dt> + <dd>1つ以上のメタデータプロファイルの {{glossary("URI")}} で、{{Glossary("whitespace", "ホワイトスペース")}}区切りです。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: html"><!doctype html> +<html> + <head> + <title>Document title</title> + </head> +</html> +</pre> + +<h2 id="Notes" name="Notes">メモ</h2> + +<p>HTML5 互換のブラウザーでは、タグが省略されていても <code><head></code> 要素を自動的に生成します。<a href="https://www.stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/">この自動生成は、過去のブラウザーでは保証されていません</a>。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-head-element', '<head>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新のスナップショットから変更なし</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-head-element', '<head>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td><code>profile</code> を廃止</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.1', '<head>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.elements.head")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><code><head></code> の中で使用することができる要素: + + <ul> + <li>{{HTMLElement("title")}}</li> + <li>{{HTMLElement("base")}}</li> + <li>{{HTMLElement("link")}}</li> + <li>{{HTMLElement("style")}}</li> + <li>{{HTMLElement("meta")}}</li> + <li>{{HTMLElement("script")}}</li> + <li>{{HTMLElement("noscript")}}</li> + <li>{{HTMLElement("template")}}</li> + </ul> + </li> +</ul> diff --git a/files/ja/web/html/element/header/index.html b/files/ja/web/html/element/header/index.html new file mode 100644 index 0000000000..5ac47e40a3 --- /dev/null +++ b/files/ja/web/html/element/header/index.html @@ -0,0 +1,121 @@ +--- +title: <header> +slug: Web/HTML/Element/header +tags: + - Element + - HTML + - HTML sections + - Reference +translation_of: Web/HTML/Element/header +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><header></code> 要素</strong>は、導入的なコンテンツ、ふつうは導入部やナビゲーション等のグループを表します。見出し要素だけでなく、ロゴ、検索フォーム、作者名、その他の要素を含むこともできます。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/header.html", "tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただけるのであれば、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Palpable_content">知覚可能コンテンツ</a></td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>。但し、子孫に他の <code><header></code> や {{HTMLElement("footer")}} がないこと。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素。ただし、{{HTMLElement("address")}}、{{HTMLElement("footer")}}、他の {{HTMLElement("header")}} 要素の子孫要素として配置してはなりません。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Banner_role">banner</a>, または <code><a href="/ja/docs/Web/HTML/Element/article">article</a></code>, <code><a href="/ja/docs/Web/HTML/Element/aside">aside</a></code>, <code><a href="/ja/docs/Web/HTML/Element/main">main</a></code>, <code><a href="/ja/docs/Web/HTML/Element/nav">nav</a></code>, <code><a href="/ja/docs/Web/HTML/Element/section">section</a></code> の各要素、または <code>role=<a href="/ja/docs/Web/Accessibility/ARIA/Roles/Article_Role">article</a></code>, <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Complementary_role">complementary</a></code>, <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Main_role">main</a></code>, <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Navigation_Role">navigation</a></code>, <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Region_role">region</a></code> の要素の子孫である場合は<a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}, {{ARIARole("none")}}</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<p><code><header></code> 要素は区分コンテンツではありません。つまり、この要素が新たな<a href="/ja/docs/Sections_and_Outlines_of_an_HTML5_document">アウトライン</a>を生成することはありません。すなわち <code>header</code> 要素は通常、自身を囲む <code>section</code> の見出し (<code>h1</code>–<code>h6</code> 要素) を含むことを意図していますが、<strong>必須ではありません</strong>。</p> + +<h3 id="Historical_Usage" name="Historical_Usage">歴史的な使用法</h3> + +<p><code><header></code> 要素は {{glossary("HTML5")}} まで仕様書には現れていませんでしたが、実は HTML の最初期に存在していました。 <a href="http://info.cern.ch/">the very first website</a> に見られるように、元は <code><head></code> 要素として使用されていました。ある時点で、別な名前を使用することが決定されました。これによって <code><header></code> が自由になり、のちに別な役割を担うことができるようになりました。</p> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみがあります。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Page_Header" name="Page_Header">ページのヘッダー</h3> + +<pre class="brush: html notranslate"><header> + <h1>Main Page Title</h1> + <img src="mdn-logo-sm.png" alt="MDN logo"> +</header> +</pre> + +<h3 id="Article_Header" name="Article_Header">記事のヘッダー</h3> + +<pre class="brush: html notranslate"><article> + <header> + <h2>The Planet Earth</h2> + <p>Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by Jane Smith</p> + </header> + <p>We live on a planet that's blue and green, with so many things still unseen.</p> + <p><a href="https://janesmith.com/the-planet-earth/">Continue reading....</a></p> +</article> +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-header-element', '<header>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-header-element', '<header>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.header")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>他の区分化関連要素: {{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("address")}}</li> + <li><a href="/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">HTML のセクションとアウトラインの使用</a></li> +</ul> diff --git a/files/ja/web/html/element/heading_elements/index.html b/files/ja/web/html/element/heading_elements/index.html new file mode 100644 index 0000000000..15d08cfb06 --- /dev/null +++ b/files/ja/web/html/element/heading_elements/index.html @@ -0,0 +1,258 @@ +--- +title: '<h1>–<h6>: HTML の見出し要素' +slug: Web/HTML/Element/Heading_Elements +tags: + - Element + - HTML + - HTML sections + - Reference + - Web +translation_of: Web/HTML/Element/Heading_Elements +--- +<div>{{HTMLRef}}</div> + +<p id="Summary"><span class="seoSummary"><strong>HTML の <code><h1></code>–<code><h6></code> 要素</strong>は、セクションの見出しを6段階で表します。 <code><h1></code> が最上位で、 <code><h6></code> が最下位です。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/h1-h6.html", "tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Flow_content">フローコンテンツ</a>, 見出しコンテンツ, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素。 {{HTMLElement("hgroup")}} は非推奨になったので、見出し要素をその子要素として使用しないでください。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="/ja/docs/Web/Accessibility/ARIA/Roles/heading_role">heading</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}} または {{ARIARole("none")}}</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLHeadingElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>見出し要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみがあります。</p> + +<div class="note"> +<p><code>align</code> 属性は廃止されたので、使用しないでください。</p> +</div> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<ul> + <li>見出し情報は、ユーザーエージェントが自動的に文書の目次を作成するために使用するうことがあります。</li> + <li>テキストの大きさを変えるために見出し要素を使用しないでください。代わりに {{glossary("CSS")}} の {{cssxref("font-size")}} プロパティを使用してください。</li> + <li>見出しレベルを飛ばすことは避けてください。常に <code><h1></code> から始め、次に <code><h2></code>、以下も同様にしてください。</li> + <li><code><h1></code> はページまたはビューにつき1つだけ使用してください。内容の全体的な目的を簡潔に記載しなければなりません。</li> + <li>複数の <code><h1></code> を使用してもエラーにはなりませんが、これは最善の方法とは見なされていません。これは読み上げソフトや {{glossary("SEO")}} で有利です。</li> + <li>1つのページで <code><h1></code> を2回以上使用することは避けてください。詳しくは<a href="/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Section_Elements_in_HTML5">区分化要素</a>を参照してください。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="All_headings" name="All_headings">すべての見出し</h3> + +<p>以下のコードでは、すべての見出しレベルを示しています。</p> + +<pre class="brush: html notranslate"><h1>Heading level 1</h1> +<h2>Heading level 2</h2> +<h3>Heading level 3</h3> +<h4>Heading level 4</h4> +<h5>Heading level 5</h5> +<h6>Heading level 6</h6> +</pre> + +<p>以下の様に出力されます。</p> + +<p>{{ EmbedLiveSample('All_headings', '280', '300', '') }}</p> + +<h3 id="Example_page" name="Example_page">ページの例</h3> + +<p>以下のコードでは、いくつかの見出しとその配下のコンテンツを示しています。</p> + +<pre class="brush: html notranslate"><h1>Heading elements</h1> +<h2>Summary</h2> +<p>Some text here...</p> + +<h2>Examples</h2> +<h3>Example 1</h3> +<p>Some text here...</p> + +<h3>Example 2</h3> +<p>Some text here...</p> + +<h2>See also</h2> +<p>Some text here...</p> +</pre> + +<p>以下の様に出力されます。</p> + +<p>{{ EmbedLiveSample('Example_page', '280', '480', '') }}</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> + +<h3 id="Navigation" name="Navigation">ナビゲーション</h3> + +<p>読み上げソフトの利用者のよくあるナビゲーションテクニックとして、ページの内容を手早く特定するために、見出しから見出しへとジャンプすることがあります。このため、見出しレベルを飛ばさないようにすることが重要です。飛ばすとこのようにナビゲーションしている人が、ヘッダーがないと疑問を残すことになり、混乱を生じさせます。</p> + +<h4 id="Dont" name="Don't">悪い例</h4> + +<pre class="brush: html example-bad notranslate"><h1>Heading level 1</h1> +<h3>Heading level 3</h3> +<h4>Heading level 4</h4> +</pre> + +<h4 id="Do" name="Do">良い例</h4> + +<pre class="brush: html example-good notranslate"><h1>Heading level 1</h1> +<h2>Heading level 2</h2> +<h3>Heading level 3</h3> +</pre> + +<h4 id="Nesting" name="Nesting">入れ子</h4> + +<p>ヘッダーはページのコンテンツの構造を反映して、節として入れ子になることがあります。多くの読み上げソフトはページのすべての見出しの順序付きリストを生成し、利用者がコンテンツの階層構造を手早く特定することもできます。</p> + +<ol> + <li><code>h1</code> Beetles + + <ol> + <li><code>h2</code> Etymology</li> + <li><code>h2</code> Distribution and Diversity</li> + <li><code>h2</code> Evolution + <ol> + <li><code>h3</code> Late Paleozoic</li> + <li><code>h3</code> Jurassic</li> + <li><code>h3</code> Cretaceous</li> + <li><code>h3</code> Cenozoic</li> + </ol> + </li> + <li><code>h2</code> External Morphology + <ol> + <li><code>h3</code> Head + <ol> + <li><code>h4</code> Mouthparts</li> + </ol> + </li> + <li><code>h3</code> Thorax + <ol> + <li><code>h4</code> Prothorax</li> + <li><code>h4</code> Pterothorax</li> + </ol> + </li> + <li><code>h3</code> Legs</li> + <li><code>h3</code> Wings</li> + <li><code>h3</code> Abdomen</li> + </ol> + </li> + </ol> + </li> +</ol> + +<p>見出しが入れ子になった場合、見出しレベルは節が閉じる際に「飛ばされる」ことがあります。</p> + +<ul> + <li><a href="https://www.w3.org/WAI/tutorials/page-structure/headings/">Headings • Page Structure • WAI Web Accessibility Tutorials</a></li> + <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_—_Create_content_that_can_be_presented_in_different_ways">MDN "WCAG を理解する ― ガイドライン 1.3 の解説"</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li> + <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN "WCAG を理解する ― ガイドライン 2.4 の解説"</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html">Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-headings.html">Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h3 id="Labeling_section_content" name="Labeling_section_content">区分コンテンツのラベル付け</h3> + +<p>読み上げソフト利用者のための他のナビゲーションテクニックとして、<a href="/ja/docs/Web/HTML/Element#Content_sectioning">区分コンテンツ</a>の一覧を作成して、ページのレイアウトを特定するために使用するものがあります。</p> + +<p>区分コンテンツは <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> および {{htmlattrxref("id")}} 属性の組み合わせで、セクションの目的を詳細に記述するラベルを付けることができます。このテクニックは、同一ページに二つ以上の区分要素がある場合に有用です。</p> + +<h4 id="Example">Example</h4> + +<pre class="brush: html notranslate"><header> + <nav aria-labelledby="primary-navigation"> + <h2 id="primary-navigation">Primary navigation</h2> + <!-- navigation items --> + </nav> +</header> + +<!-- ページコンテンツ --> + +<footer> + <nav aria-labelledby="footer-navigation"> + <h2 id="footer-navigation">Footer navigation</h2> + <!-- navigation items --> + </nav> +</footer> +</pre> + +<p>この例では、読み上げ技術は二つの {{HTMLElement("nav")}} セクションがあり、一つが "Primary navigation" でもう一つが "Footer navigation" であるとアナウンスするでしょう。ラベルが提供されていない場合は、読み上げソフトを使用している人がそれぞれの <code>nav</code> 要素の中身を調べて、それぞれの用途を確かめなければならないかもしれません。</p> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby 属性の利用</a></li> + <li><a href="https://www.w3.org/WAI/tutorials/page-structure/labels/#using-aria-labelledby">Labeling Regions • Page Structure • W3C WAI Web Accessibility Tutorials</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-h1-h2-h3-h4-h5-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.h1")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("p")}}</li> + <li>{{HTMLElement("div")}}</li> + <li>{{HTMLElement("section")}}</li> +</ul> diff --git a/files/ja/web/html/element/hgroup/index.html b/files/ja/web/html/element/hgroup/index.html new file mode 100644 index 0000000000..68e33d95f2 --- /dev/null +++ b/files/ja/web/html/element/hgroup/index.html @@ -0,0 +1,145 @@ +--- +title: <hgroup> +slug: Web/HTML/Element/hgroup +tags: + - Experimental + - HTML + - HTML セクション + - HTML5 + - 'HTML:フローコンテンツ' + - 'HTML:知覚可能コンテンツ' + - 'HTML:見出しコンテンツ' + - Reference + - ウェブ + - 要素 +translation_of: Web/HTML/Element/hgroup +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><hgroup></code> 要素</strong>は、文書のセクションの、複数レベルの見出しを表します。これは <code><a href="/ja/docs/Web/HTML/Element/Heading_Elements"><h1>–<h6></a></code> 要素のセットをグループ化します。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/hgroup.html", "tabbed-standard")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, 見出しコンテンツ, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>1個以上の {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}},{{HTMLElement("h4")}}, {{HTMLElement("h5")}},{{HTMLElement("h6")}}</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみがあります。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<div class="note"> +<p><code><hgroup></code> 要素は HTML5 (W3C) 仕様から削除されましたが、 WHATWG 版の HTML には依然として含まれています。ほとんどのブラウザーで部分的に実装されており、実装が削除される可能性は低くなっています。<br> + ただし、<code><hgroup></code> 要素の主要な目的は <a href="/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#The_HTML5_outline_algorithm">HTML 仕様書で定義されたアウトラインのアルゴリズム</a>によって見出しをどのように表示するかに作用することですが、<strong>どのブラウザーでもアウトラインのアルゴリズムは実装されていないため</strong>、 <code><hgroup></code> のセマンティクスは実際のところ、理論上のものになっています。<br> + HTML5 (W3C) 仕様書では、<code><hgroup></code>を使用せずに<a href="https://www.w3.org/TR/html5/common-idioms.html#sub-head">副見出し、サブタイトル、代替タイトル、スローガン</a>をマークアップする方法についてアドバイスを提供しています。</p> +</div> + +<p><code><hgroup></code> 要素は、<em>複数レベル</em>の見出しを構成するために文書のセクションの主見出しと副次的な見出し（副見出しや副題など）をグループ化することが可能です。</p> + +<p>言い換えると、 <code><hgroup></code> 要素は副次的な子の <code><a href="/ja/docs/Web/HTML/Element/Heading_Elements"><h1>–<h6></a></code> がアウトライン内で独自のセクションを生成することを妨げます。これらの <code><a href="/ja/docs/Web/HTML/Element/Heading_Elements"><h1>–<h6></a></code> 要素は <code><hgroup></code> の子でなければ通常どおりです。</p> + +<p>よって <a href="/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#The_HTML5_outline_algorithm">HTML 仕様書で定義されているアウトラインのアルゴリズム</a>で生成される理論的なアウトラインでは、<code><hgroup></code> は全体としてひとつの論理的な見出しを構成します。そして <code><hgroup></code> の子である <code><a href="/ja/docs/Web/HTML/Element/Heading_Elements"><h1>–<h6></a></code> とともに、理論的なアウトライン内でひとつの論理的な見出しを構成するために<em>複数レベル</em>のユニットとしてのアウトラインになります。</p> + +<p>このようなアウトラインの (理論的ではない) <em>描画</em>ビューを生成するために、マルチレベルの性質を伝えるため <code><hgroup></code> の見出しをどのように描画するかについて、レンダリングツールのデザインでいくつかの選択が必要です。例えば以下のように、描画されたアウトラインで <code><hgroup></code> を表示するさまざまな方法が考えられます:</p> + +<ul> + <li>主見出しの後および最初の副次的な見出しの前にコロンと空白 (“<code>: </code>”) または同様の句読点を置く形で (および同じまたは同様の句読点を、他の副次的な見出しの前に置いて) <code><hgroup></code> を描画されたアウトラインで表示する</li> + <li>主見出しの後に、括弧でくくった副次的な見出しを置く形で、<code><hgroup></code> を描画されたアウトラインで表示する</li> +</ul> + +<p>以下の HTML 文書で考えてみましょう。</p> + +<pre class="brush: html"><!DOCTYPE html> +<title>HTML Standard</title> +<body> + <hgroup id="document-title"> + <h1>HTML</h1> + <h2>Living Standard — Last Updated 12 August 2016</h2> + </hgroup> + <p>Some intro to the document.</p> + <h2>Table of contents</h2> + <ol id=toc>...</ol> + <h2>First section</h2> + <p>Some intro to the first section.</p> +</body></pre> + +<p>この文書のアウトラインを描画すると、以下のようになるでしょう。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14599/outline-colon.png" style="height: 99px; width: 450px;"></p> + +<p>ここでは主見出し「<em>HTML</em>」の後にコロンと空白を置いて、副次的な見出し「<em>Living Standard — Last Updated 12 August 2016</em>」が続きます。</p> + +<p>あるいは、以下のようにアウトラインを描画することもできるでしょう。</p> + +<p><img alt="Rendered outline that includes an <hgroup> element, with parens around the secondary heading" src="https://mdn.mozillademos.org/files/14601/outline-paren.png" style="height: 106px; width: 450px;"></p> + +<p>ここでは主見出し「<em>HTML</em>」の後に、括弧でくくった副次的な見出し「<em> (Living Standard — Last Updated 12 August 2016)</em>」があります。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html"><hgroup id="document-title"> + <h1>HTML</h1> + <h2>Living Standard — Last Updated 12 August 2016</h2> +</hgroup> +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-hgroup-element', '<hgroup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.elements.hgroup")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>他のセクション関連要素: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li> + <li><a class="deki-ns current" href="/ja/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">HTML5 文書のセクションとアウトライン</a></li> +</ul> diff --git a/files/ja/web/html/element/hr/index.html b/files/ja/web/html/element/hr/index.html new file mode 100644 index 0000000000..929cb187a9 --- /dev/null +++ b/files/ja/web/html/element/hr/index.html @@ -0,0 +1,132 @@ +--- +title: '<hr>: 主題分割 (水平線) 要素' +slug: Web/HTML/Element/hr +tags: + - HTML + - HTML コンテンツグループ化 + - 'HTML:フローコンテンツ' + - Reference + - ウェブ + - 要素 +translation_of: Web/HTML/Element/hr +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><hr></code> 要素</strong>は、段落レベルの要素間において、テーマの意味的な区切りを表します。例えば、話の場面の切り替えや、節内での話題の転換などです。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/hr.html", "tabbed-shorter")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<p>以前はこれは水平の区切り線として定義されていました。現在でもブラウザーでは水平線として表示されますが、この要素は表示論的な用語ではなく意味論的な用語で定義されましたので、水平線を引きたいのであれば、適切な CSS を使用して行うようにしてください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリー</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a></td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>なし。これは{{Glossary("empty element", "空要素")}}です。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>開始タグは必須。終了タグを記述してはならない。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>{{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLHRElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecated_inline}}</dt> + <dd>区切り線の配置を指定します。初期値は <code>left</code> です。</dd> + <dt>{{htmlattrdef("color")}} {{Non-standard_inline}}</dt> + <dd>区切り線の色を色名、または16進数で指定します。</dd> + <dt>{{htmlattrdef("noshade")}} {{deprecated_inline}}</dt> + <dd>網掛けをしないように指定します。</dd> + <dt>{{htmlattrdef("size")}} {{deprecated_inline}}</dt> + <dd>区切り線の高さをピクセル数で指定します。</dd> + <dt>{{htmlattrdef("width")}} {{deprecated_inline}}</dt> + <dd>区切り線の幅をピクセル数、あるいはパーセントで指定します。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p> + This is the first paragraph of text. + This is the first paragraph of text. + This is the first paragraph of text. + This is the first paragraph of text. +</p> + +<hr> + +<p> + This is the second paragraph of text. + This is the second paragraph of text. + This is the second paragraph of text. + This is the second paragraph of text. +</p></pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-hr-element', '<hr>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td><code><hr></code> 要素の定義</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-hr-element', '<hr>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.3', '<hr>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td><code>align</code>, <code>noshade</code>, <code>size</code>, <code>width</code> 属性を非推奨にする</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.hr")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement('p')}}</li> +</ul> diff --git a/files/ja/web/html/element/html/index.html b/files/ja/web/html/element/html/index.html new file mode 100644 index 0000000000..13a98c9ea1 --- /dev/null +++ b/files/ja/web/html/element/html/index.html @@ -0,0 +1,121 @@ +--- +title: '<html>: HTML 文書 / ルート要素' +slug: Web/HTML/Element/html +tags: + - HTML + - HTML ルート要素 + - Reference + - ウェブ + - リファレンス + - 要素 +translation_of: Web/HTML/Element/html +--- +<p>{{HTMLRef}}</p> + +<p><span class="seoSummary"><strong>HTML の <code><html></code> 要素</strong>は HTML 文書においてルート (基点) となる要素 (トップレベル要素) であり、<em>ルート要素</em>とも呼ばれます。他のすべての要素は、この要素の子孫として配置しなければなりません。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td>なし</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>ひとつの {{HTMLElement("head")}} 要素と、それに続くひとつの {{HTMLElement("body")}} 要素。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>開始タグは、 <code><html></code> 要素内の最初のノードがコメントでない場合は省略可能です。<br> + 終了タグは、 <code><html></code> 要素の直後にコメントがない場合は省略可能です。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>なし。これは文書のルート要素です。</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLHtmlElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を持っています。</p> + +<dl> + <dt>{{htmlattrdef("manifest")}} {{obsolete_inline}}</dt> + <dd>ローカルにキャッシュされるべきリソースを示すリソースマニフェストの {{glossary("URI")}} を指定します。詳細については<a href="/ja/docs/Web/HTML/Using_the_application_cache">『アプリケーションキャッシュの使用』</a>を参照してください。</dd> + <dt>{{htmlattrdef("version")}} {{obsolete_inline}}</dt> + <dd>現在の文書を管理する HTML {{glossary("DTD", "文書型定義")}}のバージョンを指定します。文書型宣言のバージョン情報と重複しているため、この属性は必須ではありません。</dd> + <dt>{{htmlattrdef("xmlns")}}</dt> + <dd>文書の {{glossary("XML")}} {{glossary("Namespace", "名前空間")}}を指定します。既定値は <code>"http://www.w3.org/1999/xhtml"</code> です。これは XML {{glossary("parser", "パーサー")}}で解釈される文書では必須、 text/html の文書では任意です。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="en"> + <head>...</head> + <body>...</body> +</html> +</pre> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> + +<p><code><html></code> 要素に対して {{htmlattrxref("lang")}} 属性に<a href="https://www.ietf.org/rfc/bcp/bcp47.txt">有効な IETF の識別用言語タグ</a>を設定することで、読み上げ技術が正しい言語をアナウンスする助けになります。識別用言語タグはページのコンテンツの大部分で使用されている言語を記述するべきです。これがないと、読み上げソフトはふつう、既定でオペレーティングシステムの設定言語を使用しますので、間違って発音する可能性があります。</p> + +<p><code>html</code> 要素に妥当な <code>lang</code> を設定することは、ページの {{HTMLElement("head")}} に含まれる {{HTMLElement("title")}} などの重要なメタデータについても、正しくアナウンスすることができます。</p> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.1_%E2%80%94_Readable_Make_text_content_readable_and_understandable">MDN "WCAG を理解する ― ガイドライン 3.1 の解説"</a></li> + <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/meaning-doc-lang-id.html">Understanding Success Criterion 3.1.1 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-html-element', '<html>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics.html#the-html-element', '<html>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td><code>manifest</code> 属性を追加 (後に非推奨)<br> + <code>version</code> 属性を廃止</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.3', '<html>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td><code>version</code> 属性を非推奨に変更</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.html")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>MathML トップレベル要素: {{MathMLElement("math")}}</li> + <li>SVG トップレベル要素: {{SVGElement("svg")}}</li> +</ul> diff --git a/files/ja/web/html/element/i/index.html b/files/ja/web/html/element/i/index.html new file mode 100644 index 0000000000..4eef372ddd --- /dev/null +++ b/files/ja/web/html/element/i/index.html @@ -0,0 +1,130 @@ +--- +title: '<i>: 興味深いテキスト要素' +slug: Web/HTML/Element/i +tags: + - HTML + - HTML 文字レベルの意味付け + - 'HTML:フローコンテンツ' + - 'HTML:知覚可能コンテンツ' + - 'HTML:記述コンテンツ' + - Reference + - Web + - font-style + - ウェブ + - 要素 +translation_of: Web/HTML/Element/i +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の興味深いテキスト要素 (<code><i></code>)</strong>は、何らかの理由で他のテキストと区別されるテキストの範囲を表します。</span>例えば、技術用語、外国語のフレーズ、架空の人物の思考などです。英文においてはよく斜体で表示されるものです。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/i.html", "tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>以外の属性はありません。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<ul> + <li><code><i></code> 要素は、読みやすくする目的で文字列を通常の文脈から区別するために使用します。これは、この範囲の文字列が周囲の文字列とは意味論的に異なるということです。</li> + <li>以前のバージョンの HTML 仕様では、 <code><i></code> 要素は文字列をイタリック体で表示するために使用する、単なる表現用の要素でした。これは <code><b></code> タグが文字列の太字表示に使用されたことと同様です。これらのタグに印字表現ではない意味が定義されたため、それは正しくなくなりました。ブラウザーは現在でも一般的に <code><i></code> の中身を斜体で表示するでしょうが、この要素の定義としては、そうすることは要件ではなくなりました。テキストをイタリック体で表示するには、 CSS の {{cssxref("font-style")}} プロパティを使用してください。</li> + <li>この要素は、他の要素でより適切にマークアップされていない場合のみ使用してください。 + <ul> + <li>強調を表すには {{HTMLElement("em")}} 要素を使用してください。</li> + <li>重要性を表すには {{HTMLElement("strong")}} 要素を使用してください。</li> + <li>関連性を表すには {{HTMLElement("mark")}} 要素を使用してください。</li> + <li>書籍、演劇、音楽などの作品名を表すには {{HTMLElement("cite")}} 要素を使用してください。</li> + <li>用語の定義のインスタンスを表すには {{HTMLElement("dfn")}} 要素を使用してください。</li> + </ul> + </li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例では、 <code><i></code> 要素を他の言語の文字列を示すために使用することを示します。</p> + +<pre class="brush: html notranslate"><p>The Latin phrase <i>Veni, vidi, vici</i> is often +mentioned in music, art, and literature.</p> +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Examples")}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-i-element', '<i>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-i-element', '<i>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.i")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("em")}}</li> + <li>その他のイタリック体にする要素: {{HTMLElement("var")}}, {{HTMLElement("dfn")}}, {{HTMLElement("cite")}}, {{HTMLElement("address")}}</li> +</ul> diff --git a/files/ja/web/html/element/iframe/index.html b/files/ja/web/html/element/iframe/index.html new file mode 100644 index 0000000000..5d561b5439 --- /dev/null +++ b/files/ja/web/html/element/iframe/index.html @@ -0,0 +1,272 @@ +--- +title: '<iframe>: インラインフレーム要素' +slug: Web/HTML/Element/iframe +tags: + - Content + - Element + - Embedded content + - Embedding + - Frames + - HTML + - HTML embedded content + - Inline Frames + - Reference + - Web + - embedded + - iframe +translation_of: Web/HTML/Element/iframe +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML のインラインフレーム要素 (<code><iframe></code>)</strong> は、入れ子になった{{Glossary("browsing context", "閲覧コンテキスト")}}を表現し、現在の HTML ページに他のページを埋め込むことができます。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/iframe.html", "tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>それぞれの閲覧コンテキストは、<a href="/ja/docs/Web/API/History">セッション履歴</a>と<a href="/ja/docs/Web/API/Document">文書</a>を持ちます。他の閲覧コンテキストを埋め込んでいる閲覧コンテキストは、<em><dfn>親</dfn>閲覧コンテキスト</em>と呼ばれます。<em>最上位</em>の閲覧コンテキストは (親を持たないもの) は、通常はブラウザーのウィンドウで、 {{domxref("Window")}} オブジェクトで表されます。</p> + +<div class="blockIndicator warning"> +<p>それぞれの閲覧コンテキストは完全な文書環境であるため、ページの中で <code><iframe></code> を使用するごとに、必要となるメモリやその他の計算リソースが増加します。理論的には好きなだけ <code><iframe></code> を使用することができますが、パフォーマンスの問題を確認してください。</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, 埋め込みコンテンツ, 対話型コンテンツ, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>なし。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>埋め込みコンテンツを受け入れるすべての要素。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("img")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLIFrameElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を持ちます。</p> + +<dl> + <dt>{{htmlattrdef("allow")}}</dt> + <dd><a href="/ja/docs/Web/HTTP/Feature_Policy">機能ポリシー</a>を <code><iframe></code> に指定します。このポリシーは、 <code><iframe></code> が利用可能な機能をリクエストのオリジン (例：マイク、カメラ、バッテリー、ウェブ共有 API へのアクセスなど) に基づいて定義します<br> + 詳細と例については、<a href="/ja/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy">機能ポリシーの使用</a> > <a href="/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy#The_iframe_allow_attribute">iframe の allow 属性</a>を参照してください。</dd> + <dt>{{htmlattrdef("allowfullscreen")}}</dt> + <dd>この <code><iframe></code> が {{domxref("Element.requestFullscreen", "requestFullscreen()")}} を呼び出して全画面モードにすることができる場合は、 <code>true</code> に設定します。</dd> + <dd> + <div class="note">この属性は古い属性とみなされており、 <code>allow="fullscreen"</code> に更新されました。</div> + </dd> + <dt>{{htmlattrdef("allowpaymentrequest")}}</dt> + <dd>異なるオリジンの <code><iframe></code> で <a href="/ja/docs/Web/API/Payment_Request_API">Payment Request API</a> の実行を許可する場合は <code>true</code> に設定します。</dd> + <dd> + <div class="note">この属性は古い属性とみなされており、 <code>allow="payment"</code> に更新されました。</div> + </dd> + <dt>{{htmlattrdef("csp")}} {{experimental_inline}}</dt> + <dd>埋め込みリソースを制限する<a href="/ja/docs/Web/HTTP/CSP">コンテンツセキュリティポリシー</a>です。詳しくは {{domxref("HTMLIFrameElement.csp")}} をご覧ください。</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>フレームの高さを CSS ピクセル数で示します。既定値は <code>150</code> です。</dd> + <dt>{{htmlattrdef("loading")}} {{experimental_inline}}</dt> + <dd>ブラウザーが iframe をどのように読み込むかを示します。 + <ul> + <li><code>eager</code>: 可視ビューポートの外にあるかどうかに関わらず、 iframe を直ちにロードします (これが既定値です)。</li> + <li><code>lazy</code>: ブラウザーで定義されたビューポートからの計算された距離に達するまで iframe の読み込みを延期します。</li> + </ul> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>埋め込み閲覧コンテキストのターゲット表の名前です。 {{HTMLElement("a")}}, {{HTMLElement("form")}}, {{HTMLElement("base")}} 要素における <code>target</code> 属性の値、 {{HTMLElement("input")}} や {{HTMLElement("button")}} 要素における <code>formtarget</code> 属性の値、 {{domxref("Window.open()","window.open()")}} メソッドの <code>windowName</code> 引数の値として使用することができます。</dd> + <dt id="attr-referrer">{{htmlattrdef("referrerpolicy")}}</dt> + <dd>フレームのリソースにアクセスする際にどの<a href="/ja/docs/Web/API/Document/referrer">リファラー</a>を送信するかを示します。 + <ul> + <li><code>no-referrer</code>: {{HTTPHeader("Referer")}} ヘッダーを送信しません。</li> + <li><code>no-referrer-when-downgrade</code> (既定値): {{HTTPHeader("Referer")}} ヘッダーは {{Glossary("TLS")}} ({{Glossary("HTTPS")}}) のない{{Glossary("origin", "オリジン")}}には送信しません。</li> + <li><code>origin</code>: 送信するリファラーを、参照しているページのオリジン (<a href="/ja/docs/Archive/Mozilla/URIScheme">スキーム</a>, {{Glossary("host", "ホスト名")}}, {{Glossary("port", "ポート番号")}}) に限定します。</li> + <li><code>origin-when-cross-origin</code>: 他のオリジンへ送信されるリファラーは、スキーム、ホスト名、ポート番号に制限します。同一オリジンへの移動では、パスも含めます。</li> + <li><code>same-origin</code>: リファラーは{{Glossary("Same-origin policy", "同じオリジン")}}には送信しますが、異なるオリジンへのリクエストにはリファラー情報を送信しません。</li> + <li><code>strict-origin</code>: プロトコルのセキュリティ水準が同じ (HTTPS→HTTPS) である場合は、文書のオリジンのみをリファラーとして送信しますが、宛先の安全性が劣る場合 (HTTPS→HTTP) には送信しません。</li> + <li><code>strict-origin-when-cross-origin</code>: 同一オリジンへのリクエストには URL 全体を送信し、プロトコルのセキュリティ水準が同じ (HTTPS→HTTPS) である場合は、文書のオリジンのみをリファラーとして送信し、宛先の安全性が劣る場合 (HTTPS→HTTP) にはヘッダーを送信しません。</li> + <li><code>unsafe-url</code>: リファラーにオリジン<em>および</em>パスを含めます (ただし、<a href="/ja/docs/Web/API/HTMLHyperlinkElementUtils/hash">フラグメント</a>、<a href="/ja/docs/Web/API/HTMLHyperlinkElementUtils/password">パスワード</a>、<a href="/ja/docs/Web/API/HTMLHyperlinkElementUtils/username">ユーザー名</a>は含めません)。オリジンやパスの情報が TLS で保護されたリソースから安全性の劣るオリジンへ漏えいしますので、<strong>これは安全ではありません</strong>。</li> + </ul> + </dd> + <dt>{{htmlattrdef("sandbox")}}</dt> + <dd>フレーム内のコンテンツに追加の制約を適用します。この属性の値は、空にするとすべての制約を適用し、空白区切りのトークンにすると特定の制約を外します。 + <ul> + <li><code>allow-downloads-without-user-activation</code> {{experimental_inline}}: ユーザーの操作なしでダウンロードが発生することを許可します。</li> + <li><code>allow-downloads</code>: ユーザーの操作により発生するダウンロードを許可します。</li> + <li><code>allow-forms</code>: リソースがフォームを送信することを許可します。このキーワードが使用されない場合は、フォーム送信がブロックされます。</li> + <li><code>allow-modals</code>: リソースが<a href="https://html.spec.whatwg.org/multipage/origin.html#sandboxed-modals-flag">モーダルウィンドウを開く</a>ことができるようにします。</li> + <li><code>allow-orientation-lock</code>: リソースが<a href="/ja/docs/Web/API/Screen/lockOrientation">スクリーンの方向をロック</a>することができるようにします。</li> + <li><code>allow-pointer-lock</code>: リソースが <a href="/ja/docs/WebAPI/Pointer_Lock">Pointer Lock API</a> を使用できるようにします。</li> + <li><code>allow-popups</code>: (<code>window.open()</code>, <code>target="_blank"</code>, <code>showModalDialog()</code> のような) ポップアップを許可します。このキーワードを与えなければ、これらの機能は暗黙に失敗します。</li> + <li><code>allow-popups-to-escape-sandbox</code>: サンドボックス化された文書が、サンドボックスを継承するウィンドウではないウィンドウを開けるようにします。例えば、これによって安全に広告をサンドボックス化し、同じ制約を広告のリンク先のページに強制しないようにすることができます。</li> + <li><code>allow-presentation</code>: リソースが<a href="/ja/docs/Web/API/PresentationRequest">プレゼンテーションセッション</a>を開始できるようにします。</li> + <li><code>allow-same-origin</code>: このトークンが使用されなかった場合、リソースは特殊なオリジンからのものであるとして扱い、常に{{Glossary("same-origin policy", "同一オリジンポリシー")}}に失敗します。</li> + <li><code>allow-scripts</code>: リソースがスクリプト (ただし、ポップアップウィンドウを作成しないもの) を実行できるようにします。</li> + <li><code>allow-storage-access-by-user-activation</code> {{experimental_inline}}: リソースが <a href="/ja/docs/Web/API/Storage_Access_API">Storage Access API</a> で親のストレージ容量へのアクセスを要求できるようにします。</li> + <li><code>allow-top-navigation</code>: リソースが最上位の閲覧コンテキスト (<code>_top</code> という名前のもの) に移動できるようにします。</li> + <li><code>allow-top-navigation-by-user-activation</code>: リソースが最上位の閲覧コンテキストに移動できるようにしますが、ユーザーの操作によって開始されたものに限ります。</li> + </ul> + + <div class="note"><strong>サンドボックスのメモ:</strong> + + <ul> + <li>埋め込まれた文書のオリジンが埋め込み先のページと同じである場合、 <code>allow-scripts</code> と <code>allow-same-origin</code> を同時に使用すると、埋め込まれた文書から <code>sandbox</code> 属性を削除することができるようになるため、<strong>絶対に避けるべき</strong>です。 — <code>sandbox</code> 属性をまったく使用しないよりも安全ではなくなります。</li> + <li>攻撃者がサンドボックス化した <code>iframe</code> の外側にコンテンツを表示することができる場合、サンドボックス化は無意味です。例えば、閲覧者がフレームを新しいタブで開く場合などです。潜在的なダメージを抑えるため、そうしたコンテンツは<em>別のオリジン</em>から提供するようにもしてください。</li> + <li><code>sandbox</code> 属性は Internet Explorer 9 以前では対応していません。</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>埋め込むページの URL です。<a href="/ja/docs/Web/Security/Same-origin_policy#Inherited_origins">同一オリジンポリシー</a>に従う空白ページを埋め込む場合は、 <code>about:blank</code> の値を使用してください。また、プログラムから <code><iframe></code> の src 属性を削除すると (例えば {{domxref("Element.removeAttribute()")}} などで)、 Firefox (バージョン65以降)、 Chromium ベースのブラウザー、 Safari/iOS では <code>about:blank</code> が読み込まれます。</dd> + <dt>{{htmlattrdef("srcdoc")}}</dt> + <dd>埋め込むインライン HTML で、 <code>src</code> 属性を上書きします。ブラウザーがブラウザーが <code>srcdoc</code> 属性に対応していない場合は、 <code>src</code> 属性の URL で代替されます。</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>フレームの幅を CSS ピクセル数で示します。既定値は <code>300</code> です。</dd> +</dl> + +<h3 id="Deprecated_attributes" name="Deprecated_attributes">非推奨の属性</h3> + +<p>以下の属性は非推奨であり、すべてのユーザーエージェントが対応しているとは限りません。新しいコンテンツでは使用せず、既存のコンテンツから削除するようにしましょう。</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecated_inline}}</dt> + <dd>フレームを含むコンテキストに対する、フレームの整列方法を指定します。</dd> + <dt>{{htmlattrdef("frameborder")}} {{deprecated_inline}}</dt> + <dd>値が <code>1</code> (既定) ならば、このフレームの周りに境界線を描きます。値が <code>0</code> ならば、このフレームの周りの境界線を削除しますが、代わりに CSS の {{cssxref("border")}} プロパティを使用して <code><iframe></code> の境界線を制御してください。</dd> + <dt>{{htmlattrdef("longdesc")}} {{deprecated_inline}}</dt> + <dd>フレームの内容についての長い説明の URL です。誤用が広がっているため、非視覚ブラウザーでは有用ではありません。</dd> + <dt>{{htmlattrdef("marginheight")}} {{deprecated_inline}}</dt> + <dd>フレームの内容と上下の境界との間における、ピクセル単位の余白の量です。</dd> + <dt>{{htmlattrdef("marginwidth")}} {{deprecated_inline}}</dt> + <dd>フレームの内容と左右の境界との間における、ピクセル単位の余白の量です。</dd> + <dt>{{htmlattrdef("scrolling")}} {{deprecated_inline}}</dt> + <dd>ブラウザーがフレームにスクロールバーを表示することを示します。 + <ul> + <li><code>auto</code>: フレームの内容が、フレームの寸法よりも大きい場合のみ。</li> + <li><code>yes</code>: 常にスクロールバーを表示する。</li> + <li><code>no</code>: スクロールバーを一切表示しない。</li> + </ul> + </dd> +</dl> + +<h3 id="Non-standard_attributes" name="Non-standard_attributes">標準外の属性</h3> + +<dl> + <dt>{{htmlattrdef("mozbrowser")}} {{non-standard_inline}}</dt> + <dd> + <div class="note">これを Firefox のウェブ拡張機能に公開するには {{bug(1318532)}} を参照してください。</div> + この <code><iframe></code> を最上位のブラウザーウィンドウのように動作させます。詳しくは <a href="/ja/docs/Mozilla/Gecko/Chrome/API/Browser_API">Browser API</a> を参照してください。<br> + <strong><a href="/ja/docs/Mozilla/Add-ons/WebExtensions">ウェブ拡張機能</a>でのみ使用可能です。</strong></dd> +</dl> + +<h2 id="Scripting" name="Scripting">スクリプト操作</h2> + +<p>インラインフレームは、 {{HTMLElement("frame")}} 要素のように {{domxref("window.frames")}} 擬似配列に入ります。</p> + +<p>DOM の {{domxref("HTMLIFrameElement")}} オブジェクトでは、スクリプトはフレーム化されたリソースの {{domxref("window")}} オブジェクトに {{domxref("HTMLIFrameElement.contentWindow", "contentWindow")}} プロパティを使ってアクセスすることができます。 {{domxref("HTMLIFrameElement.contentDocument", "contentDocument")}} プロパティは <code>iframe</code> の内側の <code>document</code> 要素を参照します (<code>contentWindow.document</code> と等価です)。</p> + +<p>スクリプトは、フレームの内側からは {{domxref("window.parent")}} で親ウィンドウを参照できます。</p> + +<p>フレームの内容にアクセスするスクリプトは、<a href="/ja/docs/Web/Security/Same-origin_policy">同一オリジンポリシー</a>に従います。別なオリジンから読み込まれたスクリプトは、フレーム内のスクリプトがフレームの親にアクセスする場合を含め、他の <code>window</code> オブジェクトのほとんどのプロパティにアクセスできません。オリジンをまたいだやりとりは {{domxref("Window.postMessage()")}} を使用して実現できます。</p> + +<h2 id="Positioning_and_scaling" name="Positioning_and_scaling">位置指定と表示倍率</h2> + +<p><a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a>なので、 <code><iframe></code> 要素のボックス内における埋め込み文書の位置、配置、表示倍率は、 {{cssxref("object-position")}} および {{cssxref("object-fit")}} プロパティで設定することができます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Example1" name="Example1">シンプルな <iframe></h3> + +<p><code><iframe></code> の例です。フレームを作成した後に、ユーザーがボタンをクリックすると、タイトルをアラートで表示します。</p> + +<h4 id="HTML">HTML</h4> + +<div id="htmlOutputWrapper"> +<pre class="brush: html notranslate"><iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" + title="iframe Example 1" width="400" height="300"> +</iframe></pre> +</div> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{ EmbedLiveSample('Example1', 640,400)}}</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> + +<p>読み上げソフトのような支援技術を利用して操作している人は、 <code><iframe></code> 上の <a href="/ja/docs/Web/HTML/Global_attributes/title"><code>title</code> 属性</a>を使用して内容をラベル付けします。 title の値で埋め込みコンテンツを正確に説明してください。</p> + +<div id="htmlOutputWrapper"> +<pre class="brush: html notranslate"><iframe title="アボガドのウィキペディアページ" src="https://en.wikipedia.org/wiki/Avocado"></iframe></pre> +</div> + +<p>この title がないと、埋め込みコンテンツが何であるかを特定するために <code><iframe></code> の内容に移動しなければならなります。このコンテキストの移動は、特に複数の <code><iframe></code> が存在するページや、動画や音楽などの対話型コンテンツが埋め込まれているページでは、混乱を招き、時間のかかる作業になる可能性があります。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrerpolicy attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td><code>referrerpolicy</code> 属性を追加。</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'iframe-embed-object.html#the-iframe-element', '<iframe>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics-embedded-content.html#the-iframe-element', '<iframe>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/frames.html#h-16.5', '<iframe>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('Screen Orientation')}}</td> + <td>{{Spec2('Screen Orientation')}}</td> + <td><code>sandbox</code> 属性に <code>allow-orientation-lock</code> を追加。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.iframe", 3)}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Privacy">プライバシー、アクセス制限と情報セキュリティ</a></li> +</ul> diff --git a/files/ja/web/html/element/image/index.html b/files/ja/web/html/element/image/index.html new file mode 100644 index 0000000000..251f704bcb --- /dev/null +++ b/files/ja/web/html/element/image/index.html @@ -0,0 +1,48 @@ +--- +title: '<image>: 廃止された画像要素' +slug: Web/HTML/Element/image +tags: + - HTML + - HTML リファレンス + - HTML 要素 + - HTML 要素リファレンス + - Non-standard + - Obsolete + - 標準外 + - 要素 +translation_of: Web/HTML/Element/image +--- +<div>{{obsolete_header}}</div> + +<div>{{non-standard_header}}</div> + +<p><span class="seoSummary">廃止された<strong>HTML 画像要素 (<code><image></code>)</strong> は、時間の霧の中で失われた古代版の HTML の廃止された残骸です。代わりに標準の {{HTMLElement("img")}} 要素を使用してください。</span>仕様書でもこの要素を説明する際には「使用しないでください」という言葉を使用しています。</p> + +<div class="note"> +<p><strong>使用しないでください！</strong>画像を表示する目的であれば、標準の {{HTMLElement("img")}} 要素を使用してください。</p> +</div> + +<p>一部のブラウザーはこの要素を自動的に {{HTMLElement("img")}} 要素に変換を試みてくれるでしょうが、常にそうなるとは限らず、オプションを解釈するのに様々な方法があるため、常に成功するとは限りません。ユーザーが好きなのであれば、使わないようにしましょう。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<p>これは一旦は仕様書に入る可能性がありましたが、誰も覚えていないようです。確かにそのようになっていません。ペストのように避けてください。</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p>一般に、ブラウザーはこの要素を {{htmlattrxref("src", "img")}} 属性が正しく設定されていた場合のみ、 <code><img></code> に変換しようとします。 <code>src</code> 属性なしで <code><image></code> 要素を作成すると、局所的な要素名を <code>"image"</code> とした {{domxref("HTMLElement")}} オブジェクトが生成されます。しかし、 <code>src</code> 属性付きで要素が作成された場合、 {{domxref("HTMLImageElement")}} となって要素名が <code>"img"</code> に変換されます。</p> + +<p>しかし、これは使用してよいという意味ではありません。使用してはいけません。</p> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されます。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.image")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("img")}}: 文書中で画像を表示する正しい方法</li> + <li>{{HTMLElement("picture")}}: 文書中で画像を表示するもっと強力な方法</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ja/web/html/element/img/index.html b/files/ja/web/html/element/img/index.html new file mode 100644 index 0000000000..7981e2d327 --- /dev/null +++ b/files/ja/web/html/element/img/index.html @@ -0,0 +1,443 @@ +--- +title: '<img>: 画像埋め込み要素' +slug: Web/HTML/Element/Img +tags: + - Content + - Element + - Graphics + - HTML + - HTML Graphics + - HTML Images + - HTML Photos + - HTML Pictures + - HTML embedded content + - Image + - Image Element + - Media + - Multimedia + - Photos + - Pictures + - Reference + - Web +translation_of: Web/HTML/Element/img +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><img></code> 要素</strong>は、文書に画像を埋め込みます。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/img.html", "tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>上記の例では、 <code><img></code> 要素のとてもシンプルな使い方を示しています。</p> + +<ul> + <li><code>src</code> 属性は<strong>必須</strong>で、埋め込みたい画像へのパスを入れます。</li> + <li><code>alt</code> 属性は画像のテキストによる説明で、必須ではありませんがアクセシビリティのために<strong>非常に有用</strong>です。 — 読み上げソフトがこの説明を読み上げることで、画像が何を表すかをユーザーが知ることができます。また、ネットワークエラーやコンテンツのブロック、リンク切れ等の理由で画像が読み込めなかった場合にも代替テキストが表示されます。</li> +</ul> + +<p>他にも、様々な目的で指定できる属性がたくさんあります。</p> + +<ul> + <li>セキュリティとプライバシーのための <a href="/ja/docs/Web/HTTP/Headers/Referrer-Policy">Referrer</a>/{{glossary("CORS")}} 制御。 {{htmlattrxref("crossorigin", "img")}} および {{htmlattrxref("referrerpolicy", "img")}} を参照してください。</li> + <li>{{htmlattrxref("width", "img")}} と {{htmlattrxref("height", "img")}} の両方を使用して画像の固有の寸法を設定すると、画像を読み込む前に場所を確保し、コンテンツのレイアウトが移動することを防ぐことができます。</li> + <li>{{htmlattrxref("sizes", "img")}} および {{htmlattrxref("srcset", "img")}} を使用したレスポンシブ画像のヒント ({{htmlelement("picture")}} 要素、および<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像</a>のチュートリアルもご覧ください)。</li> +</ul> + +<h2 id="Supported_image_formats" name="Supported_image_formats">対応している画像形式</h2> + +<p>HTML 標準では、対応しなければならない画像形式を指定していないので、{{glossary("user agent", "ユーザーエージェント")}}によって対応する画像形式は異なります。ウェブで最もよく使われている画像形式のリストを以下に示します。</p> + +<p>{{page("/ja/docs/Web/Media/Formats/Image_types", "Common_image_file_types")}}</p> + +<div class="note"> +<p><strong>注:</strong> ウェブブラウザーが対応している画像形式に関する、より包括的な情報については、<a href="/ja/docs/Web/Media/Formats/Image_types">画像ファイルの種類と形式ガイド</a>を参照してください。こちらには、対応されているがウェブコンテンツでは推奨されていない画像形式 (例: ICO、BMP など)も含まれています。</p> +</div> + +<h2 id="Image_loading_errors" name="Image_loading_errors">画像読み込みエラー</h2> + +<p>画像の読み込みまたは表示の間にエラーが発生した場合、かつ {{htmlattrxref("onerror")}} イベントハンドラーが {{event("error")}} イベントを扱うよう設定されていた場合は、イベントハンドラーが呼び出されます。これはいくつもの状況がありえます。</p> + +<ul> + <li><code>src</code> 属性が空 (<code>""</code>) または <code>null</code> である。</li> + <li>指定された <code>src</code> の {{glossary("URL")}} が現在ユーザーがいるページの URL と同じである。</li> + <li>指定された画像が何らかの理由で読み込みが妨害され、中止された。</li> + <li>指定された画像のメタデータが、寸法を受け取ることができないなどの理由で読み込みが中止され、かつ <code><img></code> 要素の属性に寸法が指定されていなかった場合。</li> + <li>指定された画像が、{{Glossary("user agent", "ユーザーエージェント")}}が対応している形式ではない場合。</li> +</ul> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{htmlattrdef("alt")}}</dt> + <dd>この属性は、画像を説明する代替文字列を定義します。 + <div class="note"> + <p><strong>注:</strong> ブラウザーは常に画像を表示するわけではありません。ブラウザーが画像を表示しない状況はいくつかがあります。</p> + + <ul> + <li>視覚ブラウザー以外のブラウザー (視覚障碍者向けの物を含む) で閲覧された場合</li> + <li>ユーザーが画像を非表示に設定している場合 (帯域の節約、プライバシー上の理由)</li> + <li>画像が無効であったり<a href="#Supported_image_formats">未対応の画像形式</a>であったりした場合</li> + </ul> + + <p>このような場合、ブラウザーは、画像をこの要素の <code>alt</code> 属性で定義された文字列に置き換えます。このような理由から、 <code>alt</code> には可能な限り役に立つ値を指定するべきです。</p> + </div> + + <p><code>alt</code> 属性を省略すると、画像がコンテンツの鍵となる部分であり、同等のテキスト表現を行うことができないことを表します。この属性に空文字列を設定すると (<code>alt=""</code>)、この画像がコンテンツにおいて重要な箇所<em>ではない</em>ことを示し、視覚ブラウザーではない場合は{{glossary("Rendering engine", "レンダリング")}}を省略することがあります。視覚ブラウザーでは、 <code>alt</code> が空欄で画像の表示に失敗した場合は、壊れた画像のアイコンの表示が省略される場合もあります。</p> + + <p>この属性は画像をテキストにコピー＆ペーストした場合や、リンクされた画像をブックマークに保存したときにも使用されます。</p> + </dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd> + <p>関連する画像の取得の際に {{glossary("CORS")}} を使用しなければならないかどうかを示します。 CORS リクエストから返された<a href="/ja/docs/CORS_Enabled_Image">CORS が有効な画像</a>は、 {{HTMLElement("canvas")}} 要素で「<a href="/ja/docs/Web/HTML/CORS_enabled_image#What_is_a_tainted_canvas">汚染</a>」されることなく再利用することができます。</p> + + <p><code>crossorigin</code> 属性が指定されて<em>いない</em>場合は、 ({{httpheader("Origin")}} リクエストヘッダーがない) CORS 以外のリクエストが送信され、ブラウザーは画像が汚染されたものとしてマークし、その画像データへのアクセスを制限して、 {{HTMLElement("canvas")}} 要素での使用を防ぎます。</p> + + <p><code>crossorigin</code> 属性が指定されて<em>いる</em>場合は、({{httpheader("Origin")}} リクエストヘッダーを伴う) CORS リクエストが送信されます。しかし、サーバーがオリジンのサイトによる画像データへのオリジン間アクセスを許可することをオプトインしない場合 ({{httpheader("Access-Control-Allow-Origin")}} レスポンスヘッダーが一切送信されていないか、送信された {{httpheader("Access-Control-Allow-Origin")}} レスポンスヘッダーにサイトのオリジンが含まれていない場合)、ブラウザーは画像が汚染されていると判断し、画像データへのアクセスを制限し、 {{HTMLElement("canvas")}} 要素での使用を禁止します。</p> + + <p>許可されている値:</p> + + <dl> + <dt><code>anonymous</code></dt> + <dd>CORS リクエストは、資格情報を省略して (つまり、{{glossary("cookie", "クッキー")}}、 <a class="external" href="https://tools.ietf.org/html/rfc5280">X.509 証明書</a>、 {{httpheader("Authorization")}} リクエストヘッダーなしで) 送信されます。</dd> + <dt><code>use-credentials</code></dt> + <dd>CORS リクエストは、資格情報 (つまり、Cookie、X.509 証明書、 <code>Authorization</code> リクエストヘッダー) が含まれた状態で送信されます。サーバーが元のサイトとの資格情報の共有を選択する (<code>Access-Control-Allow-Credentials: true</code> レスポンスヘッダーを送り返す) ことをしなかった場合、ブラウザーは画像を汚染されたものとしてマークし、その画像データへのアクセスを制限します。</dd> + </dl> + + <p>この属性がの値が無効である場合は、列挙型のキーワードに <code>anonymous</code> が指定されたものとして扱われます。詳しくは <a href="/ja/docs/Web/HTML/CORS_settings_attributes">CORS 設定属性</a>を参照してください。</p> + </dd> + <dt>{{htmlattrdef("decoding")}}</dt> + <dd> + <p>ブラウザーに画像のデコードのヒントを提供します。次のような値が使用できます。</p> + </dd> + <dd> + <dl> + <dt><code>sync</code></dt> + <dd>他のコンテンツと不可分の表示として、画像を同期的にデコードします。</dd> + <dt><code>async</code></dt> + <dd>他のコンテンツの表示が遅れないように、画像を非同期的にデコードします。</dd> + <dt><code>auto</code></dt> + <dd>既定のモードで、デコード方式を指定しません。ブラウザーはユーザーのために最良の方法を選択します。</dd> + </dl> + </dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>画像固有の高さをピクセル値で指定します。</dd> + <dt>{{htmlattrdef("intrinsicsize")}} {{deprecated_inline}}</dt> + <dd>この属性はブラウザーに、画像の{{glossary("intrinsic size", "固有の寸法")}}を無視し、この属性で指定された寸法であると見せかけるよう指示します。特に、画像がこれらの次元のラスターであって、画像の <code>naturalWidth</code>/<code>naturalHeight</code> はこの属性で指定された値が返されます。<a class="external" href="https://github.com/ojanvafai/intrinsicsize-attribute">説明</a>と<a class="external" href="https://googlechrome.github.io/samples/intrinsic-size/index.html">例</a></dd> + <dt>{{htmlattrdef("ismap")}}</dt> + <dd>この真偽値を持つ属性は、画像が<a href="https://en.wikipedia.org/wiki/Image_map#Server-side">サーバーサイドマップ</a>の一部であるかを示します。そうである場合は、クリック位置の正確な座標をサーバーに送信します。 + <div class="note"> + <p><strong>注:</strong> この属性は <code><img></code> 要素が、有効な {{htmlattrxref("href","a")}} 属性を持つ {{htmlelement("a")}} 要素の子孫である場合に限り許可されます。</p> + </div> + </dd> + <dt>{{htmlattrdef("loading")}}</dt> + <dd>ブラウザーがどのように画像を読み込むかを示します。 + <ul> + <li><code>eager</code>: 画像が現在可視ビューポートに入っているかどうかにかかわらず、直ちに画像を読み込みます (これが既定値です)。</li> + <li><code>lazy</code>: 画像がブラウザーで定義されたビューポートからの距離に達するまで、画像の読み込みを遅延させます。これは、画像が必要とされるのが合理的に確実になるまで、処理に必要なネットワークやストレージの帯域幅を使用しないようにするためです。これは一般的に、ほとんどの典型的な使用法において、コンテンツの性能を向上させることができます。 + <div class="note"><strong>注:</strong> 読み込みが延期されるのは JavaScript が有効になっているときだけです。これはトラッキング対策であり、スクリプトが無効になっているときにユーザーエージェントが遅延読み込みに対応している場合でも、サーバーがいつ何枚の画像が要求されたかを追跡できるようにページのマークアップに画像を戦略的に配置することで、サイトがセッション全体を通してユーザーのおおよそのスクロール位置を追跡することが可能になるからです。</div> + </li> + </ul> + </dd> + <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> + <dd>リソースを読み込む際に、どのリファラーを使用するかを示す文字列です。 + <ul> + <li><code>no-referrer</code>: {{httpheader("Referer")}} ヘッダーを送信しないことを表します。</li> + <li><code>no-referrer-when-downgrade</code>: {{glossary("TLS")}} ({{glossary("HTTPS")}}) を使用せずにあるオリジンへ移動する場合は、 <code>Referer</code> ヘッダーを送信しないことを表します。これは他にポリシーが定められていない場合の、{{glossary("user agent", "ユーザーエージェント")}}の既定の動作です。</li> + <li><code>origin</code>: <code>Referer</code> ヘッダーにそのページのオリジンのスキーム、{{glossary("host", "ホスト名")}}、{{glossary("port", "ポート番号")}}を含めます。</li> + <li><code>origin-when-cross-origin</code>: 異なるオリジンへのナビゲーションでは、リファラーをスキーム、ホスト、ポートのみに制限します。同一のオリジンへのナビゲーションでは、リファラーのフルパスを含めます。</li> + <li><code>unsafe-url</code>: <code>Referer</code> ヘッダーにオリジンとパスを含めることを表します (ただし、フラグメント、パスワード、ユーザー名は含めません)。これはオリジンやパスの情報が TLS で保護されたリソースからセキュアでないオリジンへ漏えいしますので、安全ではありません。</li> + </ul> + </dd> + <dt>{{htmlattrdef("sizes")}}</dt> + <dd>ソースのサイズのセットを示す、カンマ区切りの文字列を1個以上並べたリストです。それぞれのソースサイズの構成は以下のとおりです。 + <ol> + <li><a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax">メディア条件</a>。最後のアイテムでは省略しなければなりません。</li> + <li>ソースサイズ値。</li> + </ol> + + <p>メディアの状態は<em>ビューポート</em>のプロパティで記述するものであり、<em>画像</em>のプロパティではありません。例えば、 <code>(max-height: 500px) 1000px</code> は、<em>ビューポート</em>の高さが 500px 以下であれば 1000px 幅のソースを使用することを提案します。</p> + + <p>ソースサイズ値は、画像の表示サイズを指定するものです。{{glossary("User agent", "ユーザーエージェント")}}は <code>srcset</code> 属性で与えられたソースからひとつを選択するために、現在のソースサイズを使用します。そのとき、ソースは幅記述子 ('<code>w</code>') を使用して説明します。選択したソースサイズは画像の{{glossary("intrinsic size", "固有の寸法")}} ({{glossary("CSS")}} スタイルが適用されていない場合の、画像の表示サイズ) に影響します。<code>srcset</code> 属性がない場合、あるいは幅記述子 (<code>w</code>) を持つ値がない場合は、<code>sizes</code> 属性の効果はありません。</p> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>画像の {{glossary("URL")}} です。この属性は、 <code><img></code> 要素に必須です。 <code>srcset</code> に対応する{{glossary("Browser", "ブラウザー")}}では <code>src</code> を、画素密度記述子 <code>1x</code> の候補画像であるように扱います。ただし、この画素密度記述子が <code>srcset</code> で定義済みである、または <code>srcset</code> に '<code>w</code>' 記述子が含まれている場合を除きます。</dd> + <dt>{{htmlattrdef("srcset")}}</dt> + <dd>{{glossary("User agent", "ユーザーエージェント")}}が使用可能なソース画像のセットを示す、カンマ区切りで文字列を 1 個以上並べたリストです。各々の文字列の構成は以下のとおりです: + <ol> + <li>画像の {{glossary("URL")}}</li> + <li>任意で、ホワイトスペースの後に以下のいずれかを記述: + <ul> + <li>幅記述子。これは直後に '<code>w</code>' を付加した正の整数です。幅記述子は実際の画素密度を計算するために、<code>sizes</code> 属性で与えられたソースサイズで割られます。</li> + <li>画素密度記述子。これは直後に '<code>x</code>' を付加した正の浮動小数点数です。</li> + </ul> + </li> + </ol> + + <p>記述子を指定しない場合は、ソースを既定の記述子 <code>1x</code> に割り当てます。</p> + + <p>幅記述子と画素密度記述子を同一の <code>srcset</code> 属性に混在させると無効になります。重複した記述子 (例えばひとつの <code>srcset</code> に2つのソースがあり、どちらも '<code>2x</code>' とする) も無効になります。</p> + + <p>ユーザーエージェントには、利用可能なソースからひとつを選択する裁量があります。これは、ユーザー設定や{{glossary("bandwidth", "帯域幅")}}の条件などに基づいて選択を適合させるような、かなりの裁量が与えられています。例としては<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像</a>のチュートリアルをご覧ください。</p> + </dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>画像固有の幅をピクセル値で指定します。</dd> + <dt>{{htmlattrdef("usemap")}}</dt> + <dd>要素に関連づけられた <a href="/ja/docs/Web/HTML/Element/map">イメージマップ</a>の部分的な {{glossary("URL")}} ('<code>#</code>' で始まる) です。 + <div class="note"> + <p><strong>注:</strong> <code><img></code> 要素が {{htmlelement("a")}} または {{HTMLElement("button")}} 要素の子孫である場合は、この属性を使用することはできません。</p> + </div> + </dd> +</dl> + +<h3 id="Deprecated_attributes" name="Deprecated_attributes">非推奨の属性</h3> + +<dl> + <dt>{{htmlattrdef("align")}} {{Obsolete_Inline}}</dt> + <dd>周囲の文脈に対する画像の配置を指定します。もう使用するべきではありません。 — 代わりに {{glossary("CSS")}} の {{cssxref('float')}} プロパティや {{cssxref('vertical-align')}} プロパティを使用してください。要素ボックス内の画像の位置を示すために、 {{cssxref("object-position")}} プロパティを使用することもできます。</dd> + <dd> + <dl> + <dt><code>top</code></dt> + <dd><code style="white-space: nowrap;">vertical-align: top;</code> または <code style="white-space: nowrap;">vertical-align: text-top;</code> と等価です。</dd> + <dt><code>middle</code></dt> + <dd><code style="white-space: nowrap;">vertical-align: -moz-middle-with-baseline;</code> と等価です。</dd> + <dt><code>bottom</code></dt> + <dd>値の既定値はなく <code style="white-space: nowrap;">vertical-align: unset;</code> または <code style="white-space: nowrap;">vertical-align: initial;</code> と等価です。</dd> + <dt><code>left</code></dt> + <dd><code style="white-space: nowrap;">float: left;</code> と等価です。</dd> + <dt><code>right</code></dt> + <dd><code style="white-space: nowrap;">float: right;</code> と等価です。</dd> + </dl> + </dd> + <dt>{{htmlattrdef("border")}} {{Obsolete_Inline}}</dt> + <dd>画像の周りの境界線の幅を指定します。代わりに {{glossary("CSS")}} の {{cssxref('border')}} プロパティを使用してください。</dd> + <dt>{{htmlattrdef("hspace")}} {{Obsolete_Inline}}</dt> + <dd>画像の左右に挿入する空間の幅をピクセル単位で指定します。代わりに CSS の {{cssxref('margin')}} プロパティを使用してください。</dd> + <dt>{{htmlattrdef("longdesc")}} {{Obsolete_Inline}}</dt> + <dd>画像の詳細な説明へのリンクです。有効な値は、 {{glossary("URL")}} または要素の {{htmlattrxref("id")}} です。 + <div class="note"> + <p>この属性は、最新の {{glossary("W3C")}} のバージョンである <a class="external" href="https://www.w3.org/TR/html52/obsolete.html#element-attrdef-img-longdesc">HTML 5.2</a> でも言及されていますが、一方、 {{glossary("WHATWG")}} の <a class="external" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">HTML Living Standard</a> では完全に削除されています。将来が不確実なので、代わりに、 <a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby"><code>aria-describedby</code></a> または <a class="external" href="https://www.w3.org/TR/wai-aria-1.1/#aria-details"><code>aria-details</code></a> のような {{glossary("WAI")}}-{{glossary("ARIA")}} の代替手段を検討してください。</p> + </div> + </dd> + <dt>{{htmlattrdef("name")}} {{Obsolete_Inline}}</dt> + <dd>要素の名前です。代わりに {{htmlattrxref("id")}} 属性を使用してください。</dd> + <dt>{{htmlattrdef("vspace")}} {{Obsolete_Inline}}</dt> + <dd>画像の上下に挿入する空間の幅をピクセル単位で指定します。HTML5 では、代わりに CSS の {{cssxref('margin')}} プロパティを使用してください。</dd> +</dl> + +<h2 id="Styling_with_CSS" name="Styling_with_CSS">CSS でのスタイル付け</h2> + +<p><code><img></code> は<a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a>です。 {{cssxref("display")}} の値が既定で <code>inline</code> ですが、既定の寸法は埋め込まれた画像の内部的な値で定義されます。画像には {{cssxref("border")}}/{{cssxref("border-radius")}}, {{cssxref("padding")}}/{{cssxref("margin")}}, {{cssxref("width")}}, {{cssxref("height")}}, などのプロパティを設定することができます。</p> + +<p><code><img></code> にはベースラインがありません。つまり {{cssxref("vertical-align")}}<code>: baseline</code> を伴うインライン整形文脈内で使用したときに、画像の下端はコンテナーのベースラインに揃えられます。</p> + +<p>{{cssxref("object-position")}} プロパティを使用して、要素ボックス内の画像の位置を指定したり、 {{cssxref("object-fit")}} プロパティを使用して、ボックス内の画像の寸法を調整したり（例えば、クリッピングが必要な時に画像をボックスに合わせるか埋めるか）することができます。</p> + +<p>画像の種類に応じて、固有の寸法を持つことができます。ただし、固有の寸法が必須ではない画像形式があります。例えば {{glossary("SVG")}} 画像は、固有の寸法を持ちません。つまり、 SVG 画像には {{SVGElement("svg")}} 要素に <code>width</code> または <code>height</code> が設定されていない限り、固有の寸法はありません。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Alternative_text" name="Alternative_text">代替テキスト</h3> + +<p>以下の簡単な例では、ページに画像を埋め込み、アクセシビリティを向上させるために代替テキストを含めています。</p> + +<pre class="brush: html notranslate"><img src="https://developer.mozilla.org/static/img/favicon144.png" + alt="MDN ロゴ — MDN のテキストが入った恐竜のロゴ"> +</pre> + +<p>{{ EmbedLiveSample('Alternative_text', '100%', '160') }}</p> + +<h3 id="Image_link" name="Image_link">画像リンク</h3> + +<p>この例は前回のを土台に、画像をリンクにする方法を示しています。これを行うのはとても単純です。 — <code><img></code> タグを {{HTMLElement("a")}} の中に組み込むだけです。一つの考慮事項として、リンクが指すリソースを説明する代替テキストを作成するようにしてください。</p> + +<pre class="brush: html notranslate"><a href="https://developer.mozilla.org"> + <img src="https://developer.mozilla.org/static/img/favicon144.png" + alt="MDN サイトにおいでください"> +</a></pre> + +<p>{{ EmbedLiveSample('Image_link', '100%', '160') }}</p> + +<h3 id="Using_the_srcset_attribute" name="Using_the_srcset_attribute">srcset 属性の使用</h3> + +<p>この例では、 <code>srcset</code> 属性によって高解像度版のロゴの参照を指定しています。これで、高解像度の端末では <code>src</code> 画像の代わりにこちらが読み込まれます。 <code>src</code> で参照される画像は、 <code>srcset</code> に対応している{{glossary("User agent", "ユーザーエージェント")}}では、 <code>1x</code> の候補としてカウントされます。</p> + +<pre class="brush: html notranslate"> <img src="https://developer.mozilla.org/static/img/favicon72.png" + alt="MDN logo" + srcset="https://developer.mozilla.org/static/img/favicon144.png 2x"></pre> + +<p>{{EmbedLiveSample("Using_the_srcset_attribute", "100%", "160")}}</p> + +<h3 id="Using_the_srcset_and_sizes_attributes" name="Using_the_srcset_and_sizes_attributes">srcset および sizes 属性の使用</h3> + +<p><code>src</code> 属性は、 <code>srcset</code> に対応している{{glossary("User agent", "ユーザーエージェント")}}で '<code>w</code>' 記述子を使用している場合は無視されます。 <code>(max-width: 600px)</code> のメディア条件に一致すると、 200px の幅の画像 (200px にもっと近いもの) が読み込まれ、そうでなければ他の画像が読み込まれます。</p> + +<pre class="brush: html notranslate"> <img src="/files/16796/clock-demo-200px.png" + alt="時計" + srcset="/files/16864/clock-demo-200px.png 200w, + /files/16797/clock-demo-400px.png 400w" + sizes="(max-width: 600px) 200px, 50vw"></pre> + +<p>{{EmbedLiveSample("Using_the_srcset_and_sizes_attributes", "100%", 350)}}</p> + +<div class="blockIndicator note"> +<p>その場で大きさを変更してみるには、<a href="https://mdn.mozillademos.org/en-US/docs/Web/HTML/Element/img$samples/Using_the_srcset_and_sizes_attributes">この例を別なページで表示</a>させる必要があり、そうすればコンテンツエリアの大きさを実際に使用することができます。</p> +</div> + +<h2 id="Security_and_privacy_concerns" name="Security_and_privacy_concerns">セキュリティとプライバシーの考慮事項</h2> + +<p><code><img></code> 要素の多くは無害な使用ですが、ユーザーのセキュリティとプライバシーに望ましくない結果をもたらす可能性もあります。詳細情報と緩和策については <a href="/ja/docs/Web/Security/Referer_header:_privacy_and_security_concerns">Referer ヘッダー: プライバシーとセキュリティの考慮事項</a>を参照してください。</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> + +<h3 id="Authoring_meaningful_alternate_descriptions" name="Authoring_meaningful_alternate_descriptions">意味のある代替説明を書く</h3> + +<p><code>alt</code> 属性の値は明確で簡潔に画像の内容を説明するものにしてください。画像そのもの存在を説明するものであったり、画像のファイル名であったりするべきではありません。画像が言葉で説明できるものではなく、 <code>alt</code> 属性を意図的に省略する場合は、画像が伝えようとしていることの内容を他の方法で表すように考慮してください。</p> + +<h4 id="Dont" name="Don't">悪い例</h4> + +<pre class="brush: html example-bad notranslate"><img alt="image" src="penguin.jpg"> +</pre> + +<h4 id="Do" name="Do">良い例</h4> + +<pre class="brush: html example-good notranslate"><img alt="海岸に立っているイワトビペンギン" src="penguin.jpg"> +</pre> + +<p><code>alt</code> 属性が画像にない場合、読み上げソフトによっては代わりに画像のファイル名を読み上げることがあります。ファイル名が画像の内容を表していない場合、これが操作を混乱させる可能性があります。</p> + +<ul> + <li><a class="external" href="https://www.w3.org/WAI/tutorials/images/decision-tree/">An alt Decision Tree • Images • WAI Web Accessibility Tutorials</a></li> + <li><a class="external" href="https://axesslab.com/alt-texts/">Alt-texts: The Ultimate Guide — Axess Lab</a></li> + <li><a class="external" href="https://www.deque.com/blog/great-alt-text-introduction/">How to Design Great Alt Text: An Introduction | Deque</a></li> + <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">MDN "WCAG を理解する ― ガイドライン 1.1 の解説"</a></li> + <li><a class="external" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h3 id="The_title_attribute" name="The_title_attribute">title 属性</h3> + +<p>The {{htmlattrxref("title")}} 属性を <code>alt</code> 属性の代わりに利用することはできません。加えて、 <code>alt</code> 属性の値を同じ画像の <code>title</code> 属性に複製して宣言することは避けてください。このようにすると、読み上げソフトが説明を二回読み上げ、操作を混乱させる可能性があります。</p> + +<p><code>title</code> 属性は、画像の <code>alt</code> の説明と組み合わせた補助的な説明として使用するべきでもありません。画像にキャプションが必要であれば、 <code><a href="/en-US/docs/Web/HTML/Element/figure">figure</a></code> および <code><a href="/en-US/docs/Web/HTML/Element/figcaption">figcaption</a></code> 要素と組み合わせて使用してください。</p> + +<p><code>title</code> 属性の値は、よくツールチップとして、画像の上でカーソルを停止させた後で間もなく表示されます。これはユーザーに追加の情報を提供する<em>ことができます</em>が、ユーザーが必ず見ると仮定してはいけません。ユーザーが見ることが特に重要または有益である情報があるのであれば、上記の <code>title</code> を使用するのではなく、何らかの方法で行内に表示するべきです。</p> + +<ul> + <li><a class="external" href="https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/">Using the HTML title attribute – updated | The Paciello Group</a></li> +</ul> + +<h2 id="Technical_summary" name="Technical_summary">技術的概要</h2> + +<ul> + <li><code>alt</code> 属性が空ではない場合: + + <ul> + <li><code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></li> + <li><code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/checkbox_role">checkbox</a></code></li> + <li>{{ARIARole("link")}}</li> + <li>{{ARIARole("menuitem")}}</li> + <li>{{ARIARole("menuitemcheckbox")}}</li> + <li>{{ARIARole("menuitemradio")}}</li> + <li>{{ARIARole("option")}}</li> + <li>{{ARIARole("progressbar")}}</li> + <li>{{ARIARole("scrollbar")}}</li> + <li>{{ARIARole("separator")}}</li> + <li>{{ARIARole("slider")}}</li> + <li><code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Switch_role">switch</a></code></li> + <li><code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Tab_Role">tab</a></code></li> + <li>{{ARIARole("treeitem")}}</li> + </ul> + </li> + <li><code>alt</code> 属性が空の場合、 {{ARIARole("none")}} または {{ARIARole("presentation")}}</li> + <li><code>alt</code> 属性がない場合、許可されている <code>role</code> なし</li> +</ul> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Flow_content">フローコンテンツ</a>、<a href="/ja/docs/Web/Guide/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>、<a href="/ja/docs/Web/Guide/HTML/Content_categories#Embedded_content">埋め込みコンテンツ</a>、<a href="/ja/docs/Web/Guide/HTML/Content_categories#Palpable_content">知覚可能コンテンツ</a>。要素が <code>usemap</code> 属性を持つ場合は、対話型コンテンツのカテゴリの一角にもなります。</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>なし。これは{{Glossary("empty element", "空要素")}}です。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>開始タグは必須。終了タグを記述してはならない。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>埋め込みコンテンツを受け入れるすべての要素。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td> + <ul> + <li><code>alt</code> 属性が空ではない場合や <code>alt</code> 属性がない場合: <code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Role_Img">img</a></code></li> + <li><code>alt</code> 属性が空の場合: <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></li> + </ul> + </td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLImageElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td><code>referrerpolicy</code> 属性を追加。</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-img-element', '<img>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics-embedded-content.html#the-img-element', '<img>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.2', '<img>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.img")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">HTML の画像</a></li> + <li><a href="/ja/docs/Web/Media/Formats/Image_types">画像のファイル形式のガイド</a></li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">レスポンシブ画像</a></li> + <li>{{HTMLElement("picture")}}, {{HTMLElement("object")}}, {{HTMLElement("embed")}} 要素</li> + <li>その他の画像に関する CSS プロパティ: {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, and {{cssxref("image-resolution")}}.</li> +</ul> diff --git a/files/ja/web/html/element/index.html b/files/ja/web/html/element/index.html new file mode 100644 index 0000000000..ee8e2747f0 --- /dev/null +++ b/files/ja/web/html/element/index.html @@ -0,0 +1,107 @@ +--- +title: HTML 要素リファレンス +slug: Web/HTML/Element +tags: + - Basic + - Element + - HTML + - Reference + - Web + - 'l10n:priority' +translation_of: Web/HTML/Element +--- +<p><span class="seoSummary">このページでは、{{Glossary("Tag", "タグ")}}を使用して作成されるすべての {{Glossary("HTML")}} {{Glossary("Element","要素")}}を一覧表示しています。</span>この一覧は、考えているものを見つけやすいように、機能別にグループ化しています。アルファベット順のすべての要素の一覧は、このページと同様に各要素ページのサイドバーにあります。</p> + +<div class="note"> +<p>HTML 要素や属性の基礎について詳しくは、<a href="/ja/docs/Web/Guide/HTML/Introduction#Elements_%E2%80%94_the_basic_building_blocks">HTML 概論の記事で要素のセクション</a> をご覧ください。</p> +</div> + +<h2 id="Main_root" name="Main_root">メインルート</h2> + +<p>{{HTMLRefTable("HTML Root Element")}}</p> + +<h2 id="Document_metadata" name="Document_metadata">文書メタデータ</h2> + +<p>メタデータは、ページに関する情報のことです。これはソフトウェア ({{Glossary("search engine", "検索エンジン")}} や {{Glossary("Browser","ブラウザー")}} など) が利用する、およびページの描画を支援するスタイル、スクリプト、データといった情報を含みます。スタイルやスクリプトのメタデータはページ内で定義するか、それらの情報を持つ別のファイルへのリンクとして定義します。</p> + +<p>{{HTMLRefTable("HTML Document Metadata")}}</p> + +<h2 id="Sectioning_root" name="Sectioning_root">セクショニングルート</h2> + +<p>{{HTMLRefTable("Sectioning Root Element")}}</p> + +<h2 id="Content_sectioning" name="Content_sectioning">コンテンツセクショニング</h2> + +<p>コンテンツセクショニング要素は、ドキュメントのコンテンツを論理的な断片に体系づけます。ページのコンテンツでヘッダーやフッターのナビゲーション、あるいはコンテンツのセクションを識別する見出しなどの、大まかなアウトラインを作成するためにセクショニング要素を使用します。</p> + +<p>{{HTMLRefTable("HTML Sections")}}</p> + +<h2 id="Text_content" name="Text_content">テキストコンテンツ</h2> + +<p>HTML テキストコンテンツ要素は、開始タグ {{HTMLElement("body")}} と終了タグ <code></body></code> の間にあるコンテンツでブロックやセクションを編成します。これらの要素はコンテンツの用途や構造を識別するものであり、{{Glossary("accessibility","アクセシビリティ")}} や {{Glossary("SEO")}} のために重要です。</p> + +<p>{{HTMLRefTable("HTML Grouping Content")}}</p> + +<h2 id="Inline_text_semantics" name="Inline_text_semantics">インライン文字列意味付け</h2> + +<p>HTML インラインテキストセマンティクス要素は、単語、行、あるいは任意のテキスト範囲の意味、構造、スタイルを定義します。</p> + +<p>{{HTMLRefTable("HTML Text-Level Semantics")}}</p> + +<h2 id="Image_and_multimedia" name="Image_and_multimedia">画像とマルチメディア</h2> + +<p>HTML は画像、音声、映像といった、さまざまなマルティメディアリソースをサポートします。</p> + +<p>{{HTMLRefTable("multimedia")}}</p> + +<h2 id="Embedded_content" name="Embedded_content">埋め込みコンテンツ</h2> + +<p>HTML は公式にサポートするマルチメディアコンテンツ以外のさまざまなコンテンツを、容易に対話できるとは限らないものであっても埋め込むことができます。</p> + +<p>{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}</p> + +<h2 id="Scripting" name="Scripting">スクリプティング</h2> + +<p>動的なコンテンツやウェブアプリケーションを作成するために、HTML ではスクリプト言語を使用できます。もっとも有名な言語は、JavaScript です。いくつかの要素がスクリプト機能をサポートします。</p> + +<p>{{HTMLRefTable("HTML Scripting")}}</p> + +<h2 id="Demarcating_edits" name="Demarcating_edits">編集範囲の特定</h2> + +<p>これらの要素は、テキストの特定の範囲が変更されたことを示します。</p> + +<p>{{HTMLRefTable("HTML Edits")}}</p> + +<h2 id="Table_content" name="Table_content">テーブル</h2> + +<p>以下の要素は、表形式のデータを作成および制御するために使用します。</p> + +<p>{{HTMLRefTable("HTML tabular data")}}</p> + +<h2 id="Forms" name="Forms">フォーム</h2> + +<p>HTML では、ユーザーがデータを記入してウェブサイトやアプリケーションに送信することを可能にするフォームを作成するために、組み合わせて使用する要素をいくつか提供します。フォームに関する多くの情報を、<a href="/ja/docs/Web/Guide/HTML/Forms">HTML フォームガイド</a> に掲載しています。</p> + +<p>{{HTMLRefTable({"include": ["HTML forms"], "exclude":["Deprecated"]})}}</p> + +<h2 id="Interactive_elements" name="Interactive_elements">インタラクティブ要素</h2> + +<p>HTML には、インタラクティブなユーザーインターフェイスを作成するための要素があります。</p> + +<p>{{HTMLRefTable({"include": ["HTML interactive elements"], "exclude":["Deprecated"]})}}</p> + +<h2 id="Web_Components" name="Web_Components">ウェブコンポーネント</h2> + +<p>Web Components は要するに、独自の要素を作成して通常の HTML 要素であるかのように使用できる、HTML 関連技術です。加えて、独自版の標準 HTML 要素を作成することもできます。</p> + +<p>{{HTMLRefTable({"include":["Web Components"],"elements":["shadow"]})}}</p> + +<h2 id="Obsolete_and_deprecated_elements" name="Obsolete_and_deprecated_elements">廃止または非推奨の要素</h2> + +<div class="warning"> +<p><strong>警告:</strong> 以下は非推奨の古い HTML 要素であり、使用するべきものではありません。<strong>新たなプロジェクトではこれらを使用せず、また既存のプロジェクトでも可能な限りこれらを置き換えてください。</strong> この一覧は、情報提供のために記載しています。</p> +</div> + +<p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p> + +<p>{{HTMLSidebar("Elements")}}</p> diff --git a/files/ja/web/html/element/input/button/index.html b/files/ja/web/html/element/input/button/index.html new file mode 100644 index 0000000000..d88460c3ef --- /dev/null +++ b/files/ja/web/html/element/input/button/index.html @@ -0,0 +1,351 @@ +--- +title: <input type="button"> +slug: Web/HTML/Element/input/button +tags: + - Element + - Forms + - HTML + - HTML forms + - Input + - Input Element + - Input Type + - Reference + - button +translation_of: Web/HTML/Element/input/button +--- +<div>{{HTMLRef("Input_types")}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <strong><code>button</code></strong> 型は、単純なプッシュボタンとして描画され、イベントハンドラー関数 (ふつうは {{event("click")}} イベント) を割り当てることで、ウェブページのあらゆる場所でカスタム機能を制御するようにプログラムすることができます。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-button.html", "tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<div class="note"> +<p><strong>注</strong>: <code><input></code> 要素の <code>button</code> 型は完全に妥当な HTML ですが、より新しい {{HTMLElement("button")}} 要素が、ボタンの作成にはより好まれるようになりました。 {{HTMLElement("button")}} のラベル文字列は開始タグと終了タグの間に挿入され、ラベルに画像を含む HTML を含めることができます。</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value", "値")}}</strong></td> + <td>ボタンのラベルとして使われる {{domxref("DOMString")}}</td> + </tr> + <tr> + <td><strong>イベント</strong></td> + <td>{{domxref("Element/click_event", "click")}}</td> + </tr> + <tr> + <td><strong>対応している共通属性</strong></td> + <td>{{htmlattrxref("type", "input")}}, {{htmlattrxref("value", "input")}}</td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>メソッド</strong></td> + <td>なし</td> + </tr> + </tbody> +</table> + +<h2 id="Value" name="Value">値</h2> + +<p><code><input type="button"></code> 要素の {{htmlattrxref("value", "input")}} 属性には、ボタンのラベルとして使われる {{domxref("DOMString")}} を設定します。</p> + +<div id="summary-example3"> +<pre class="brush: html notranslate"><input type="button" value="クリックしてね"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p> + +<p><code>value</code> を指定しなかった場合は、無印のボタンになります。</p> + +<div id="summary-example1"> +<pre class="brush: html notranslate"><input type="button"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p> + +<h2 id="Using_buttons" name="Using_buttons">ボタンの使用</h2> + +<p><code><input type="button"></code> 要素には既定の動作がありません (親戚である <code><a href="/ja/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> や <code><a href="/ja/docs/Web/HTML/Element/input/reset"><input type="reset"></a></code> は、それぞれフォームの送信とリセットに使用されます)。ボタンに何かをさせる場合は、処理を行うための JavaScript コードを書く必要があります。</p> + +<h3 id="A_simple_button" name="A_simple_button">単純なボタン</h3> + +<p>単純なボタンに {{event("click")}} イベントハンドラーを設定し、マシンを起動させましょう (つまり、ボタンの <code>value</code> と続く段落の文字列コンテンツを切り替えます)。</p> + +<pre class="brush: html notranslate"><form> + <input type="button" value="マシンを起動"> +</form> +<p>マシンが停止しています。</p></pre> + +<pre class="brush: js notranslate">const button = document.querySelector('input'); +const paragraph = document.querySelector('p'); + +button.addEventListener('click', updateButton); + +function updateButton() { + if (button.value === 'マシンを起動') { + button.value = 'マシンを停止'; + paragraph.textContent = 'マシンが起動しています！'; + } else { + button.value = 'マシンを起動'; + paragraph.textContent = 'マシンが停止しています。'; + } +}</pre> + +<p>このスクリプトは DOM で <code><input></code> を表す {{domxref("HTMLInputElement")}} オブジェクトの参照を受け取り、この参照を変数 <code>button</code> に保存します。{{domxref("EventTarget.addEventListener", "addEventListener()")}} は、ボタンに {{event("click")}} イベントが発生したときに実行される関数を設定します。</p> + +<p>{{EmbedLiveSample("A_simple_button", 650, 100)}}</p> + +<h3 id="Adding_keyboard_shortcuts_to_buttons" name="Adding_keyboard_shortcuts_to_buttons">ボタンへのショートカットキーの追加</h3> + +<p>ショートカットキーは、アクセスキーやキーボードショートカットとも呼ばれますが、ユーザーがキーボード上のキーまたはキーの組み合わせを使用してボタンを操作できるものです。ボタンにショートカットキーを追加するには、どの {{HTMLElement("input")}} でも同じですが、 {{htmlattrxref("accesskey")}} グローバル属性を使用します。</p> + +<p>この例では、 <kbd>s</kbd> がアクセスキーとして指定されています (ブラウザーと OS の組み合わせによっては、 <kbd>s</kbd> と特定の修飾キーの組み合わせが必要です。その一覧については <a href="/ja/docs/Web/HTML/Global_attributes/accesskey">accesskey</a> を参照してください)。</p> + +<div id="accesskey-example1"> +<pre class="brush: html notranslate"><form> + <input type="button" value="マシンを起動" accesskey="s"> +</form> +<p>マシンが停止しています。</p> +</pre> +</div> + +<div class="hidden"> +<pre class="brush: js notranslate">const button = document.querySelector('input'); +const paragraph = document.querySelector('p'); + +button.addEventListener('click', updateButton); + +function updateButton() { + if (button.value === 'マシンを起動') { + button.value = 'マシンを停止'; + paragraph.textContent = 'マシンが起動しています！'; + } else { + button.value = 'マシンを起動'; + paragraph.textContent = 'マシンが停止しています。'; + } +}</pre> +</div> + +<p>{{EmbedLiveSample("Adding_keyboard_shortcuts_to_buttons", 650, 100)}}</p> + +<div class="note"> +<p><strong>注</strong>: 上記の例では、ユーザーがアクセスキーが何であるかを知ることができないという問題があります。実際のサイトでは、この情報を、サイトのデザインに干渉しない方法で提供する必要があります (たとえば、簡単にアクセスできるリンクを設置して、サイトのアクセスキーに関する情報を指すなど)。</p> +</div> + +<h3 id="Disabling_and_enabling_a_button" name="Disabling_and_enabling_a_button">ボタンの無効化と有効化</h3> + +<p>ボタンを無効にするには、次のように {{htmlattrxref("disabled")}} グローバル属性を指定するだけです。</p> + +<div id="disable-example1"> +<pre class="brush: html notranslate"><input type="button" value="Disable me" disabled></pre> +</div> + +<p>実行時に <code>disabled</code> に <code>true</code> または <code>false</code> を設定するだけで、ボタンを有効化したり無効化したりすることができます。この例では、ボタンは有効の状態で始まりますが、押すと <code>button.disabled = true</code> を使用して無効化されます。それから {{domxref("WindowTimers.setTimeout","setTimeout()")}} 関数を使用して、2秒後にボタンの状態を有効の状態にリセットしています。</p> + +<div class="hidden"> +<h6 id="Hidden_code_1">Hidden code 1</h6> + +<pre class="brush: html notranslate"><input type="button" value="Enabled"></pre> + +<pre class="brush: js notranslate">const button = document.querySelector('input'); + +button.addEventListener('click', disableButton); + +function disableButton() { + button.disabled = true; + button.value = 'Disabled'; + window.setTimeout(function() { + button.disabled = false; + button.value = 'Enabled'; + }, 2000); +}</pre> +</div> + +<p>{{EmbedLiveSample("Hidden_code_1", 650, 60)}}</p> + +<p><code>disabled</code> 属性が指定されなかった場合、ボタンは <code>disabled</code> の状態を親要素から継承します。これによって、複数の要素を {{HTMLElement("fieldset")}} 要素のようなコンテナーの中に入れ、コンテナーに <code>disabled</code> を設定することで、一括で有効化したり無効化したりすることができます。</p> + +<p>以下の例はこの操作を表しています。これは一つ前の例ととても似ていますが、最初のボタンが押されたときに <code>disabled</code> 属性が <code><fieldset></code> に設定され、2秒経過するまで3つのボタンがすべて無効になります。</p> + +<div class="hidden"> +<h6 id="Hidden_code_2">Hidden code 2</h6> + +<pre class="brush: html notranslate"><fieldset> + <legend>Button group</legend> + <input type="button" value="Button 1"> + <input type="button" value="Button 2"> + <input type="button" value="Button 3"> +</fieldset></pre> + +<pre class="brush: js notranslate">const button = document.querySelector('input'); +const fieldset = document.querySelector('fieldset'); + +button.addEventListener('click', disableButton); + +function disableButton() { + fieldset.disabled = true; + window.setTimeout(function() { + fieldset.disabled = false; + }, 2000); +}</pre> +</div> + +<p>{{EmbedLiveSample("Hidden_code_2", 650, 60)}}</p> + +<div class="note"> +<p><strong>注</strong>: Firefox は他のブラウザーとは異なり、ページのロード中は既定で {{HTMLElement("button")}} に<a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">動的な無効状態を維持</a>します。この機能を制御するには {{htmlattrxref("autocomplete","button")}} 属性を使用してください。</p> +</div> + +<h2 id="Validation" name="Validation">検証</h2> + +<p>ボタンに対して制約検証は行われません。制約するべき値はありません。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>以下の例では、 {{htmlelement("canvas")}} 要素といくらかの単純な CSS と JavaScript を使用して作成した、とても簡単なお絵かきアプリを紹介します。 (簡略化のため CSS を省略します)。上部の2つのコントロールで、色と描画するペンの大きさを選択できます。ボタンは、クリックすると、キャンバスを消去する関数を呼び出します。</p> + +<pre class="brush: html notranslate"><div class="toolbar"> + <input type="color" aria-label="select pen color"> + <input type="range" min="2" max="50" value="30" aria-label="select pen size"><span class="output">30</span> + <input type="button" value="Clear canvas"> +</div> + +<canvas class="myCanvas"> + <p>Add suitable fallback here.</p> +</canvas></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">body { + background: #ccc; + margin: 0; + overflow: hidden; +} + +.toolbar { + background: #ccc; + width: 150px; + height: 75px; + padding: 5px; +} + +input[type="color"], input[type="button"] { + width: 90%; + margin: 0 auto; + display: block; +} + +input[type="range"] { + width: 70%; +} + +span { + position: relative; + bottom: 5px; +}</pre> +</div> + +<pre class="brush: js notranslate">var canvas = document.querySelector('.myCanvas'); +var width = canvas.width = window.innerWidth; +var height = canvas.height = window.innerHeight-85; +var ctx = canvas.getContext('2d'); + +ctx.fillStyle = 'rgb(0,0,0)'; +ctx.fillRect(0,0,width,height); + +var colorPicker = document.querySelector('input[type="color"]'); +var sizePicker = document.querySelector('input[type="range"]'); +var output = document.querySelector('.output'); +var clearBtn = document.querySelector('input[type="button"]'); + +// 角度をラジアンに変換する +function degToRad(degrees) { + return degrees * Math.PI / 180; +}; + +// 選択した大きさの値を反映 + +sizePicker.oninput = function() { + output.textContent = sizePicker.value; +} + +// マウスポインターと、ボタンが押されているかどうかを格納 +var curX; +var curY; +var pressed = false; + +// マウスポインターの座標を更新 +document.onmousemove = function(e) { + curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); + curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); +} + +canvas.onmousedown = function() { + pressed = true; +}; + +canvas.onmouseup = function() { + pressed = false; +} + +clearBtn.onclick = function() { + ctx.fillStyle = 'rgb(0,0,0)'; + ctx.fillRect(0,0,width,height); +} + +function draw() { + if(pressed) { + ctx.fillStyle = colorPicker.value; + ctx.beginPath(); + ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false); + ctx.fill(); + } + + requestAnimationFrame(draw); +} + +draw();</pre> + +<p>{{EmbedLiveSample("Examples", '100%', 600)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#button-state-(type=button)', '<input type="button">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#button-state-(type=button)', '<input type="button">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.input.input-button")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("input")}} およびそれに実装されている {{domxref("HTMLInputElement")}} インターフェイス。</li> + <li>より新しい {{HTMLElement("button")}} 要素。</li> + <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li> +</ul> diff --git a/files/ja/web/html/element/input/checkbox/index.html b/files/ja/web/html/element/input/checkbox/index.html new file mode 100644 index 0000000000..961bdf143d --- /dev/null +++ b/files/ja/web/html/element/input/checkbox/index.html @@ -0,0 +1,344 @@ +--- +title: <input type="checkbox"> +slug: Web/HTML/Element/input/checkbox +tags: + - HTML + - HTML フォーム + - Reference + - checkbox + - チェックボックス + - フォーム + - 入力型 + - 要素 +translation_of: Web/HTML/Element/input/checkbox +--- +<div>{{HTMLRef}}</div> + +<p>{{htmlelement("input")}} 要素の <strong><code>checkbox</code></strong> 型は、既定でボックスとして描画され、政府の書類で見られるように、有効な時にはチェックが入ります。正確な外見はブラウザーが実行されているオペレーティングシステムの構成によります。一般にこれは四角形ですが、角が丸くなることもあります。チェックボックスによって、フォームで単一の値を選択して (または選択せずに) 送信することができます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-checkbox.html", "tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<div class="note"> +<p><strong>メモ</strong>: <a href="/ja/docs/Web/HTML/Element/input/radio">ラジオボタン</a>はチェックボックスと似ていますが、重要な違いがあります。ラジオボタンはグループ化されており、同時に1つしか選択できないのに対し、チェックボックスは単一の値をオンにしたりオフにしたり切り替えることができます。複数のコントロールがある場所では、ラジオボタンはその中で一つしか選択できませんが、チェックボックスは複数の値が選択できます。</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value", "値")}}</strong></td> + <td>チェックボックスの値を表す {{domxref("DOMString")}}</td> + </tr> + <tr> + <td><strong>イベント</strong></td> + <td>{{event("change")}} および {{event("input")}}</td> + </tr> + <tr> + <td><strong>対応している共通属性</strong></td> + <td><code>checked</code></td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>{{anch("checked")}}</code> および <code>{{anch("value")}}</code></td> + </tr> + <tr> + <td><strong>メソッド</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value" name="Value">値</h2> + +<p>チェックボックスの値を表す {{domxref("DOMString")}} です。これはクライアント側には表示されませんが、サーバー上ではチェックボックスの <code>name</code> と共に送信されるデータに与えられる <code>value</code> になります。次の例を見てください。</p> + +<pre class="brush: html notranslate"><form> + <div> + <input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter"> + <label for="subscribeNews">Subscribe to newsletter?</label> + </div> + <div> + <button type="submit">Subscribe</button> + </div> +</form></pre> + +<p>{{EmbedLiveSample('Value', 600, 60)}}</p> + +<p>この例では、 <code>name</code> を <code>subscribe</code> に、 <code>value</code> を <code>newsletter</code> に設定しました。フォームが送信されると、データの名前と値の組み合わせは <code>subscribe=newsletter</code> となります。</p> + +<p><code>value</code> 属性が省略された場合は、チェックボックスの既定値は <code>on</code> ですので、その場合の送信されるデータは <code>subscribe=on</code> となります。</p> + +<div class="note"> +<p><strong>メモ</strong>: フォームが送信されたときにチェックボックスがチェックされていなかった場合、チェックされていない状態を表す値 (<code>value=unchecked</code> など) が送信されることはなく、値はサーバーに全く送信されません。チェックボックスがチェックされていないときに既定値を送信したい場合は、フォーム内に {{HTMLElement("input/hidden", '<input type="hidden">')}} を、同じ <code>name</code> と <code>value</code> で、おそらく JavaScript で含めることで実現できます。</p> +</div> + +<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2> + +<p>すべての {{HTMLElement("input")}} 型で共通する属性に加え、 "<code>checkbox</code>" 型の入力欄は次の属性にも対応しています。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("checked")}}</code></td> + <td>論理属性。存在する場合、チェックボックスは既定でオンの状態</td> + </tr> + <tr> + <td><code>{{anch("value")}}</code></td> + <td>文字列で、チェックボックスがオンの状態の場合、フォームを送信するときのチェックボックスの値として使われる</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefchecked">{{htmlattrdef("checked")}}</h3> + +<p>論理属性で、チェックボックスが既定で (ページが読み込まれたときに) チェックされているかどうかを示します。チェックボックスが現在チェックされているかどうかを示すものでは<em>ありません</em>。チェックボックスの状態が変化した場合、このコンテンツ属性は変化を反映しません。 ({{domxref("HTMLInputElement")}} の <code>checked</code> IDL 属性のみが更新されます。)</p> + +<div class="note"> +<p><strong>メモ:</strong> 他の入力コントロールとは異なり、チェックボックスの値は現在 <code>checked</code> の状態にある場合のみ、送信データに含まれます。その場合、チェックボックスの <code>value</code> 属性の値が入力欄の値として報告されます。</p> +</div> + +<p>他のブラウザーとは異なり、 Firefox は既定でページ読み込みを通して <code><input></code> の<a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">チェック状態を維持します</a>。この機能を制御するには {{htmlattrxref("autocomplete","input")}} 属性を使用してください。</p> + +<h3 id="htmlattrdefvalue">{{htmlattrdef("value")}}</h3> + +<p><code>value</code> 属性はすべての {{HTMLElement("input")}} 要素で共通のものです。しかし、 <code>checkbox</code> 型の入力欄では特殊な用途を提供します。フォームが送信されると、現在チェックされているチェックボックスのみがサーバーに送信され、報告される値が <code>value</code> 属性の値になります。 <code>value</code> が指定されていない場合は、既定で <code>on</code> の文字列になります。これは前述の{{anch("Value", "値")}}の節で紹介されています。</p> + +<h2 id="Using_checkbox_inputs" name="Using_checkbox_inputs">チェックボックスの使用</h2> + +<p>上記で最も基本的なチェックボックスの使用を見てきました。他に必要になりそうなチェックボックスに関するよく使われる機能や技術を見てみましょう。</p> + +<h3 id="Handling_multiple_checkboxes" name="Handling_multiple_checkboxes">複数チェックボックスの扱い</h3> + +<p>上記の例では、チェックボックスが1つしか含まれていませんでした。実際の状況では、複数のチェックボックスが発生する可能性があります。それらが互いに完全に無関係であれば、上記のようにすべて別々に処理できます。しかし、もしそれらがすべて関連していれば、事はそう単純ではありません。</p> + +<p>例えば、次のデモにはユーザーが関心のあることを選択できるように、複数のチェックボックスが含まれています (完全な版は {{anch("Examples")}} の章で確認してください)。</p> + +<pre class="brush: html notranslate"><fieldset> + <legend>関心があるものを選んでください</legend> + <div> + <input type="checkbox" id="coding" name="interest" value="coding"> + <label for="coding">コーディング</label> + </div> + <div> + <input type="checkbox" id="music" name="interest" value="music"> + <label for="music">音楽</label> + </div> +</fieldset></pre> + +<p>{{EmbedLiveSample('Handling_multiple_checkboxes', 600, 100)}}</p> + +<p>この例では、両方のチェックボックスに同じ <code>name</code> を設定しました。両方のチェックボックスがチェックされてフォームが送信されると、名前/値の組み合わせの文字列は <code>interest=coding&interest=music</code> のように送信されます。データがサーバー側に届いたときには、連想配列以外の方法で解析して、 <code>interest</code> の値を持つ値を、最後の値だけでなくすべて拾う必要があります。 PHP を使用したやり方としては、例えば、<a class="question-hyperlink" href="http://stackoverflow.com/questions/18745456/handle-multiple-checkboxes-with-a-single-serverside-variable">単一のサーバー側の変数で複数のチェックボックスを扱う</a>を参照してください。</p> + +<h3 id="Checking_boxes_by_default" name="Checking_boxes_by_default">既定のチェックボックス</h3> + +<p>チェックボックスを既定でチェック状態にするには、 <code>checked</code> 属性を設定するだけです。次の例を見てください。</p> + +<pre class="brush: html notranslate"><fieldset> + <legend>関心があるものを選んでください</legend> + <div> + <input type="checkbox" id="coding" name="interest" value="coding" checked> + <label for="coding">コーディング</label> + </div> + <div> + <input type="checkbox" id="music" name="interest" value="music"> + <label for="music">音楽</label> + </div> +</fieldset></pre> + +<p>{{EmbedLiveSample('Checking_boxes_by_default', 600, 100)}}</p> + +<h3 id="Providing_a_bigger_hit_area_for_your_checkboxes" name="Providing_a_bigger_hit_area_for_your_checkboxes">チェックボックスの当たり判定領域を広げる</h3> + +<p>上記の例では、チェックボックス自身と同様に、関連する {{htmlelement("label")}} 要素をクリックするとチェックボックスを切り替えられることに気づいたかもしれません。これは HTML フォームのラベルの本当に便利な機能で、特にスマートフォンのような画面の小さい端末でオプションをクリックしやすくなります。</p> + +<p>これがフォームに <code><label></code> 要素を適切に設定する、アクセシビリティ以外のもう一つの理由です。</p> + +<h3 id="Indeterminate_state_checkboxes" name="Indeterminate_state_checkboxes">未決定状態のチェックボックス</h3> + +<p>チェックボックスにはチェックと未チェックの状態に加え、第三の状態である<ruby><strong>未決定</strong><rp> (</rp><rt>indeterminate</rt><rp>) </rp></ruby>を持つことができます。この状態は項目がオンともオフとも言えない状態です。これは JavaScript から {{domxref("HTMLInputElement")}} オブジェクトの <code>indeterminate</code> プロパティを使用して設定されます (HTML の属性を使用して設定することはできません)。</p> + +<pre class="brush: js notranslate">inputInstance.indeterminate = true;</pre> + +<p>多くのブラウザーでは、未決定の状態のチェックボックスにはボックス内にチェックの代わりに水平線 (ハイフンやマイナス記号のように見えるもの) が引かれます。</p> + +<p>このプロパティを使用する機会は多くありません。最もよくある例では、チェックボックスが複数のサブオプション (チェックボックス) を「統括」している場合です。すべてのサブオプションがチェックされたとき、統括しているチェックボックスもチェックされ、すべてのチェックボックスのチェックが外れたとき、統括しているチェックボックスもチェックが外れます。1つ以上のサブオプションが他とは異なる状態にあるとき、統括しているチェックボックスは未決定の状態になります。</p> + +<p>これは以下の例に見られます (この発想は <a href="https://css-tricks.com/indeterminate-checkboxes/">CSS Tricks</a> のおかげです)。この例では、製作手順のために収集する材料を追跡しています。材料のチェックボックスをオンまたはオフにすると、 JavaScript の関数はチェックされた材料の総数をチェックします。</p> + +<ul> + <li>チェックがない場合、製作手順名のチェックボックスは未チェックになります。</li> + <li>1つまたは2つがチェックされた場合、製作手順名のチェックボックスは <code>indeterminate</code> に設定されます。</li> + <li>3つともチェックされた場合は、製作手順名のチェックボックスが <code>checked</code> に設定されます。</li> +</ul> + +<p>ですからこの場合は、材料を集め始めているものの、製作が完成していない状態に <code>indeterminate</code> が使われます。</p> + +<pre class="brush: js notranslate" id="line1"> var overall = document.querySelector('input[id="EnchTbl"]'); + var ingredients = document.querySelectorAll('ul input'); + + overall.addEventListener('click', function(e) { + e.preventDefault(); + }); + + for(var i = 0; i < ingredients.length; i++) { + ingredients[i].addEventListener('click', updateDisplay); + } + + function updateDisplay() { + var checkedCount = 0; + for(var i = 0; i < ingredients.length; i++) { + if(ingredients[i].checked) { + checkedCount++; + } + } + + if(checkedCount === 0) { + overall.checked = false; + <strong>overall.indeterminate = false;</strong> + } else if(checkedCount === ingredients.length) { + overall.checked = true; + <strong>overall.indeterminate = false;</strong> + } else { + overall.checked = false; + <strong>overall.indeterminate = true;</strong> + } + }</pre> + +<p>{{EmbedGHLiveSample("learning-area/html/forms/indeterminate-example/index.html", '100%', 200)}}</p> + +<div class="note"> +<p><strong>メモ</strong>: 未決定状態のチェックボックスを持つフォームを送信すると、チェックボックスがチェックされていない場合と同じ結果になります。 — チェックボックスを表すデータは送られません。</p> +</div> + +<h2 id="Validation" name="Validation">検証</h2> + +<p>チェックボックスは<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">検証</a> (すべての {{HTMLElement("input")}} に対して行われる) に対応しています。しかし、多くの場合 {{domxref("ValidityState")}} は常に <code>false</code> になります。チェックボックスに {{htmlattrxref("required", "input")}} 属性がある場合で、チェックされていない場合、 {{domxref("ValidityState.valueMissing")}} が <code>true</code> になります。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>次の例は、上で見た「複数のチェックボックス」の拡張版です。より標準的なオプションと、チェックされたときに「その他」オプションの値を入力する入力欄を表示させる「その他」チェックボックスがあります。これは JavaScript の単純なブロックで実現します。この例には、整形方法を改善するための CSS も含まれています。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><form> + <fieldset> + <legend>Choose your interests</legend> + <div> + <input type="checkbox" id="coding" name="interest" value="coding"> + <label for="coding">Coding</label> + </div> + <div> + <input type="checkbox" id="music" name="interest" value="music"> + <label for="music">Music</label> + </div> + <div> + <input type="checkbox" id="art" name="interest" value="art"> + <label for="art">Art</label> + </div> + <div> + <input type="checkbox" id="sports" name="interest" value="sports"> + <label for="sports">Sports</label> + </div> + <div> + <input type="checkbox" id="cooking" name="interest" value="cooking"> + <label for="cooking">Cooking</label> + </div> + <div> + <input type="checkbox" id="other" name="interest" value="other"> + <label for="other">Other</label> + <input type="text" id="otherValue" name="other"> + </div> + <div> + <button type="submit">Submit form</button> + </div> + </fieldset> +</form></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +form { + width: 600px; + margin: 0 auto; +} + +div { + margin-bottom: 10px; +} + +fieldset { + background: cyan; + border: 5px solid blue; +} + +legend { + padding: 10px; + background: blue; + color: cyan; +} +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">var otherCheckbox = document.querySelector('input[value="other"]'); +var otherText = document.querySelector('input[id="otherValue"]'); +otherText.style.visibility = 'hidden'; + +otherCheckbox.addEventListener('change', () => { + if(otherCheckbox.checked) { + otherText.style.visibility = 'visible'; + otherText.value = ''; + } else { + otherText.style.visibility = 'hidden'; + } +});</pre> + +<p>{{EmbedLiveSample('Examples', '100%', 300)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#checkbox-state-(type=checkbox)', '<input type="checkbox">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#checkbox-state-(type=checkbox)', '<input type="checkbox">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.input.input-checkbox")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("input")}} およびそれに実装されている {{domxref("HTMLInputElement")}} インターフェイス。</li> + <li>CSS の {{cssxref(":checked")}} および {{cssxref(":indeterminate")}} セレクターで、現在の状態に基づいてチェックボックスを整形できます</li> + <li><a href="/ja/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">CSS プロパティの互換性</a></li> +</ul> diff --git a/files/ja/web/html/element/input/color/index.html b/files/ja/web/html/element/input/color/index.html new file mode 100644 index 0000000000..a757675eaf --- /dev/null +++ b/files/ja/web/html/element/input/color/index.html @@ -0,0 +1,228 @@ +--- +title: <input type="color"> +slug: Web/HTML/Element/input/color +tags: + - Color Picker + - Element + - HTML + - HTML input + - HTML フォーム + - Reference + - color + - フォーム + - 入力型 + - 色 +translation_of: Web/HTML/Element/input/color +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <code><strong>color</strong></code> は視覚的なインターフェイス、もしくは <code>#rrggbb</code> の 16進数表記でテキストを入力することでユーザーが色を指定することができます。</span> CSS の色表現には色名、関数表記、アルファ値つきの 16進表記などがありますが、ここでは単純な (アルファ値のない) もののみが利用できます。</p> + +<p>この要素の外見は、ブラウザーやプラットフォームによって大きく異なります。— 単純なテキストの入力欄で、入力された色情報が文字列の検証のみを行う入力欄であったり、プラットフォームの標準カラーピッカーや、独自のピッカーウィンドウを表示するなど、ブラウザーやプラットフォームにより大きく異なることがあります。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-color.html", "tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a class="external" href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value", "値")}}</strong></td> + <td>小文字の 16進数で {{cssxref("<color>")}} を定義する 7文字の {{domxref("DOMString")}}</td> + </tr> + <tr> + <td><strong>イベント</strong></td> + <td>{{domxref("HTMLElement/change_event", "change")}} および {{domxref("HTMLElement/input_event", "input")}}</td> + </tr> + <tr> + <td><strong>対応する共通属性</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}} および {{htmlattrxref("list", "input")}}</td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>list</code> および <code>value</code></td> + </tr> + <tr> + <td><strong>メソッド</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value" name="Value">値</h2> + +<p>type が <code>color</code> の {{HTMLElement("input")}} 要素の {{htmlattrxref("value", "input")}} は、常に 16進表記で RGB カラーを特定する 7文字の {{domxref("DOMString")}} になります。入力欄には色を大文字でも小文字でも入力することができ、大文字を指定した場合、小文字に変換して格納されます。これ以外の値や、空の値になることはありません。</p> + +<div class="note"> +<p><strong>注</strong>: 有効な、不透明な <em>16進表現</em>の RGB カラーではない値を設定した場合は、結果的に <code>#000000</code> に設定されます。特に、CSS で標準化されている色名や、CSS 関数を値の設定に使用することはできません。HTML と CSS は別な言語や仕様であることを考慮していただければお分かりでしょう。加えて、アルファチャネルのある色はサポートされていません。<code>#009900aa</code> のような 9文字の 16進表記で色を設定すると、結果的に <code>#000000</code> に設定されます。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: <code>input</code> の <code>color</code> 型に対応していないウェブブラウザーでは、自然に <code>text</code> 型にフォールバックされます。ユーザーは様々な方法で色を記述する可能性があるので (<code>rgb(255, 255, 0)</code> など)、回避策の一つとして、 <code>pattern</code> 属性を <code>#[0-9a-f]{6}</code> または <code>#[0-9A-Fa-f]{6}</code> に設定しておく方法にして (大文字小文字の変化で異なる結果を期待することはないので、おそらく後者)、 <code>placeholder</code> 属性を色を表すためにユーザーの入力を期待する書式、例えば <code>#ff0000</code> にする方法があります。</p> +</div> + +<h2 id="Using_color_inputs" name="Using_color_inputs">カラー入力欄の使用</h2> + +<p>type が <code>color</code> の入力欄は、対応する属性の数が限られているので単純です。</p> + +<h3 id="Providing_a_default_color" name="Providing_a_default_color">既定の色の設定</h3> + +<p>上記の例で既定値を設定するように変更すると、色の部分があらかじめ既定色で塗りつぶされ、カラーピッカーも（もしあれば）その色が既定になります。</p> + +<pre class="brush: html notranslate"><input type="color" value="#ff0000"></pre> + +<p>{{EmbedLiveSample("Providing_a_default_color", 700, 30)}}</p> + +<p>色を指定しない場合は、既定で黒を表す <code>#000000</code> になります。値は 7文字の 16進表記、つまり "#" の文字に続いて赤、緑、青を示す各2桁が並び、<code>#rrggbb</code> のようになります。他の形式の色を使う場合は (CSS の色名や、<code>rgb()</code> または <code>rgba()</code> のような CSS 色関数など)、<code>value</code> に設定する前に 16進表記に変換する必要があります。</p> + +<h3 id="Tracking_color_changes" name="Tracking_color_changes">色の変更の追跡</h3> + +<p>ほかの {{HTMLElement("input")}} 型と同様に、{{domxref("HTMLElement/input_event", "input")}} および {{domxref("HTMLElement/change_event", "change")}} イベントで色の変化を検出することができます。<code>input</code> は <code><input></code> 要素で色が変更されるたびに実行されます。<code>change</code> イベントはユーザーがカラーピッカーを閉じたときに実行されます。どちらの場合も、新しい値は {{domxref("HTMLInputElement.value", "value")}} で調べることができます。</p> + +<p>次の例は、色の変更をずっと監視します。</p> + +<pre class="brush: js notranslate">colorPicker.addEventListener("input", updateFirst, false); +colorPicker.addEventListener("change", watchColorPicker, false); + +function watchColorPicker(event) { + document.querySelectorAll("p").forEach(function(p) { + p.style.color = event.target.value; + }); +} +</pre> + +<h3 id="Selecting_the_value" name="Selecting_the_value">値の選択</h3> + +<p>対象のブラウザーが {{HTMLElement("input")}} 要素の <code>color</code> 型をサポートしておらず、代わりにテキスト入力欄に値を直接入力した場合、{{domxref("HTMLInputElement.select", "select()")}} メソッドで入力欄のテキストを選択することになります。ブラウザーがカラーピッカーなどを提供している場合、<code>select()</code> は何もしません。いずれの状況でもコードが動作するように気をつける必要があります。</p> + +<pre class="brush: js notranslate">colorWell.select();</pre> + +<h3 id="Appearance_variations" name="Appearance_variations">外観のバリエーション</h3> + +<p>先述の通り、ブラウザーがカラーピッカーのインターフェイスに対応していない場合、color 入力の実装は自動的に値を正しい形式になるよう検証を行うテキストボックスとなります。例えば Safari 10.1 では以下のような外見になります。</p> + +<p><img alt="Safari で撮った例のスクリーンショット" src="https://mdn.mozillademos.org/files/14899/input-color-safari.png" style="border-style: solid; border-width: 1px; height: 160px; width: 598px;"></p> + +<p>同じ内容でも Firefox 55 ではこのようになります。</p> + +<p><img alt="macOS の Firefox 55 で撮った例のスクリーンショット" src="https://mdn.mozillademos.org/files/14901/input-color-firefox.png" style="border-style: solid; border-width: 1px; height: 160px; width: 598px;"></p> + +<p>このとき、対象をクリックすることでプラットフォームのカラーピッカーが表示されます(画像は macOS のカラーピッカー)。</p> + +<p><img alt="Firefox Mac でカラーピッカーを開いたこの要素のスクリーンショット。" src="https://mdn.mozillademos.org/files/14903/input-with-picker-firefox-mac.png" style="border-style: solid; border-width: 1px; height: 405px; width: 682px;"></p> + +<h2 id="Validation" name="Validation">検証</h2> + +<p>{{Glossary("user agent", "ユーザーエージェント")}} が値を正しい形式である7桁の小文字の16進記法に変換できない場合、値は無効であると見なされます。このときは {{cssxref(":invalid")}} 疑似クラスが要素に適用されます。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>{{domxref("HTMLElement/change_event", "change")}} および {{domxref("HTMLElement/input_event", "input")}} イベントを追跡して、新しい色を取得し、その度に文書の {{HTMLElement("p")}} 要素に適用する例をもう少し作成してみましょう。</p> + +<h3 id="HTML" name="HTML">HTML</h3> + +<p>HTML はとても単純です。<code>colorWell</code> という ID を持つ <code>color</code> 型の{{HTMLElement("input")}} は、段落の色を変更するために用います。</p> + +<pre class="brush: html notranslate"><p>An example demonstrating the use of the <code>&lt;input type="color"&gt;</code> + control.</p> + +<label for="colorWell">Color:</label> +<input type="color" value="#ff0000" id="colorWell"> + +<p>カラーピッカーを動かしたときに段落の色が変わるのを見てください。 + カラーピッカーに変更を加えると、最初の段落の色が、プレビューとして + 変化します(<code>input</code> イベントを使用します)。カラー + ピッカーを閉じると、<code>change</code> イベントが実行され、 + 全ての段落が選択された色に変化することが分かります。</p></pre> + +<h3 id="JavaScript" name="JavaScript">JavaScript</h3> + +<p>まずはいくつかの設定を行います。いくつかの変数を作成し、変数の値をページが最初に読み込まれたとき設定する色にし、ページが完全に読み込まれた時に一度スタートアップ作業を実行させるために {{domxref("Window/load_event", "load")}} ハンドラーを設定します。</p> + +<pre class="brush: js notranslate">var colorWell; +var defaultColor = "#0000ff"; + +window.addEventListener("load", startup, false); +</pre> + +<h4 id="Initialization" name="Initialization">初期化</h4> + +<p>ページが読み込まれると、<code>load</code> イベントのハンドラーである <code>startup()</code> が呼び出されます。</p> + +<pre class="brush: js notranslate">function startup() { + colorWell = document.querySelector("#colorWell"); + colorWell.value = defaultColor; + colorWell.addEventListener("input", updateFirst, false); + colorWell.addEventListener("change", updateAll, false); + colorWell.select(); +} +</pre> + +<p><code>colorWell</code> に取得された <code><input></code> 要素を格納し、value プロパティに <code>defaultColor</code> を代入します。次に、{{domxref("HTMLElement/input_event", "input")}} イベントに <code>updateFirst()</code> 関数を、{{domxref("HTMLElement/change_event", "change")}} イベントに <code>updateAll()</code> 関数を指定します。これらについては後述します。</p> + +<p>最後に {{domxref("HTMLInputElement.select", "select()")}} を呼び出し、色入力のテキストコンテンツを選択します。これはカラーピッカーが提供されていないなどで、テキスト入力欄として表示された場合に利用します。</p> + +<h4 id="色の変更に反応させる">色の変更に反応させる</h4> + +<p>色の変更に反応する2つの関数を与えています。<code>updateFirst()</code> 関数は <code>input</code> イベントによって呼び出され、ドキュメントの最初にある段落要素の色を変えて、入力欄の新しい値と一致させます。 <code>input</code> イベントは値を調整する (例えば明るさを増加させるなど) たびに実行されるため、カラーピッカーが使用される毎に繰り返して実行されます。</p> + +<pre class="brush: js notranslate">function updateFirst(event) { + var p = document.querySelector("p"); + + if (p) { + p.style.color = event.target.value; + } +}</pre> + +<p>カラーピッカーが閉じられると、<code>change</code> イベントが要素に送信されます。<code>updateAll()</code> 関数によってこれを捕捉し、{{domxref("HTMLInputElement.value", "Event.target.value")}} によって最終的に選択された色を取得します。</p> + +<pre class="brush: js notranslate">function updateAll(event) { + document.querySelectorAll("p").forEach(function(p) { + p.style.color = event.target.value; + }); +} +</pre> + +<p>これで {{domxref("Event.target", "event.target")}} によって参照されている色入力ボックスの {{cssxref("color")}} 属性の色を、すべての {{HTMLElement("p")}} ブロックに適用します。</p> + +<h3 id="Result" name="Result">結果</h3> + +<p>最終的な結果は次のようになります。</p> + +<p>{{EmbedLiveSample("Example", 700, 200)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#color-state-(type=color)')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>初回定義</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、<a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.input.input-color")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">CSS プロパティの互換性</a></li> +</ul> diff --git a/files/ja/web/html/element/input/date/index.html b/files/ja/web/html/element/input/date/index.html new file mode 100644 index 0000000000..912af9970d --- /dev/null +++ b/files/ja/web/html/element/input/date/index.html @@ -0,0 +1,527 @@ +--- +title: <input type="date"> +slug: Web/HTML/Element/input/date +tags: + - HTML + - HTML フォーム + - Input Element + - Reference + - フォーム + - フォーム入力 + - 入力型 + - 日付 + - 日付選択 + - 要素 +translation_of: Web/HTML/Element/input/date +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <strong><code>type="date"</code></strong> 入力型は、検証付きのテキストボックスまたは特殊な日付選択インターフェイスのどちらかで、ユーザーに日付を入力させる入力欄を生成します。</span></p> + +<p>結果の値には年、月、日が含まれますが、時刻は含まれ<em>ません</em>。 {{HTMLElement("input/time", "time")}} および {{HTMLElement("input/datetime-local", "datetime-local")}} 入力型は時刻や日付と時刻の入力に対応しています。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>入力欄のユーザーインターフェイスは、一般にブラウザーによってまちまちです。詳細は{{anch("Browser compatibility", "ブラウザーの互換性")}}を参照してください。対応していないブラウザーでは、このコントロールは単純な {{HTMLElement("input/text", '<input type="text">')}} に格下げされます。</p> + +<p>日付を選択する専用のインターフェイスを持つブラウザーの中で、 Chrome や Opera のデータコントロールは次のように表示されます。</p> + +<p><img alt="“dd/mm/yyyy” と、増加/減少ボタンと、カレンダーコントロールを表示するための下向きの矢印があるテキストボックス。" src="https://mdn.mozillademos.org/files/14909/date-picker-chrome.png" style="display: block; height: 220px; margin: 0px auto; width: 275px;"></p> + +<p>Edge の日付コントロールは次のように表示されます。</p> + +<p><img alt="“mm/dd/yyyy” があるが、操作をすると、3列の日付選択が表示される。" src="https://mdn.mozillademos.org/files/14911/date-picker-edge.png" style="display: block; margin: 0 auto;"></p> + +<p>Firefox の日付コントロールは次のように表示されます。</p> + +<p><img alt="違う形の “dd/mm/yyyy” テキストボックスで、選択可能なカレンダーコントロールを開いている。" src="https://mdn.mozillademos.org/files/15644/firefox_datepicker.png" style="display: block; margin: 0 auto;"></p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value", "値")}}</strong></td> + <td>{{domxref("DOMString")}} で、 YYYY-MM-DD 形式の日付、または空欄を表す</td> + </tr> + <tr> + <td><strong>イベント</strong></td> + <td>{{domxref("HTMLElement/change_event", "change")}} および {{domxref("HTMLElement/input_event", "input")}}</td> + </tr> + <tr> + <td><strong>対応している共通属性</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("step", "input")}}</td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>list</code>, <code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code></td> + </tr> + <tr> + <td><strong>メソッド</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value" name="Value">値</h2> + +<p>入力欄に入力された日付を表す {{domxref("DOMString")}} です。日付は ISO8601 に従って書式化されており、これは <a href="/ja/docs/Web/HTML/Date_and_time_formats">HTML で使われる日付や時刻の形式</a>の<a href="/ja/docs/Web/HTML/Date_and_time_formats#Date_strings">日付の文字列</a>で説明されています。</p> + +<p>次のように、日付の入力欄の既定値を {{htmlattrxref("value", "input")}} 属性に設定することができます。</p> + +<pre class="brush: html notranslate"><input type="date" value="2017-06-01"></pre> + +<p>{{EmbedLiveSample('Value', 600, 40)}}</p> + +<div class="blockIndicator note"> +<p><strong>表示される日付の書式は実際の <code>value</code> とは異なります。</strong> — 表示される日付は<em>ユーザーのブラウザーに設定されたロケールに基づいて</em>書式になりますが、解釈された <code>value</code> は常に <code>yyyy-mm-dd</code> の書式です。</p> +</div> + +<p>日付の値は JavaScript で入力要素の {{domxref("HTMLInputElement.value", "value")}} および {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} プロパティを用いて、次のように取得したり設定したりすることができます。</p> + +<pre class="brush: js notranslate">var dateControl = document.querySelector('input[type="date"]'); +dateControl.value = '2017-06-01'; +console.log(dateControl.value); // "2017-06-01" と表示 +console.log(dateControl.valueAsNumber); // 1496275200000 と UNIX タイムスタンプを表示</pre> + +<p>このコードは {{HTMLElement("input")}} 要素のうち <code>type</code> が <code>date</code> である最初のものを探し、値を <code>2017-06-01</code> (2017年6月1日) に設定します。それからその値を文字列と数字の書式で読み直しています。</p> + +<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2> + +<p>すべての {{HTMLElement("input")}} 要素で共通する属性と共に、 <code>date</code> 型の入力欄は以下の属性にも対応しています。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("max")}}</code></td> + <td>受け付けられる最も遅い日付</td> + </tr> + <tr> + <td><code>{{anch("min")}}</code></td> + <td>受け付けられる最も早い日付</td> + </tr> + <tr> + <td><code>{{anch("step")}}</code></td> + <td>上下スピナーボタンで値を調整する時や、日付の検証の時の<em>刻み間隔</em></td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3> + +<p>受け付ける最も遅い日付です。要素に入力された {{htmlattrxref("value", "input")}} がこれ以降になった場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code>max</code> 属性の値が <code>yyyy-mm-dd</code> の書式のありうる日付ではない場合、要素は最大の日付値を持ちません。</p> + +<p><code>max</code> と <code>min</code> の両方の属性が設定された場合、この値は <code>min</code> 属性にあるもの<strong>より遅いか、同じ</strong>日付文字列でなければなりません。</p> + +<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3> + +<p>受け付ける最も早い日付です。要素に入力された {{htmlattrxref("value", "input")}} がこれ以前になった場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code>min</code> 属性の値が <code>yyyy-mm-dd</code> の書式のありうる日付でない場合、要素は最小の日付値を持ちません。</p> + +<p><code>max</code> と <code>min</code> の両方の属性が設定された場合、この値は <code>max</code> 属性で指定されたもの<strong>より早いか、同じ</strong>日付を指定する必要があります。</p> + +<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3> + +<p>{{page("/ja/docs/Web/HTML/Element/input/number", "step-include")}}</p> + +<p><code>date</code> 入力欄では、 <code>step</code> の値は日単位で指定します。また、 86,400,000 に <code>step</code> を乗じた値に等しいミリ秒数として扱われます (数値はミリ秒単位であるため)。 <code>step</code> の既定値は <code>1</code> であり、1日を表します。</p> + +<div class="blockIndicator note"> +<p><code>any</code> を <code>step</code> 属性の値として指定すると、 <code>1</code> を <code>date</code> 入力欄に設定したのと同じ効果になります。</p> +</div> + +<h2 id="Using_date_inputs" name="Using_date_inputs">date 入力欄の使用</h2> + +<p>日付入力は便利に見えます。 — 日付の選択に簡単なインターフェイスを提供し、サーバーに送信するデータの書式をユーザーのロケールに関係なく正規化してくれます。しかし、今のところブラウザーの対応が限定されているため、 <code><input type="date"></code> には問題があります。</p> + +<p>この節では、 <code><input type="date"></code> の基本的な使い方と少し複雑な使い方を見てみてから、その後でブラウザーの互換性の問題を緩和するアドバイスを提供しましょう ({{anch("Handling browser support", "ブラウザーの互換性の扱い")}} を参照してください)。</p> + +<div class="blockIndicator note"> +<p>今後ブラウザーの互換性がもっと普遍的になり、この問題が消滅することを願います。</p> +</div> + +<h3 id="Basic_uses_of_date" name="Basic_uses_of_date">日付入力の基本的な使用</h3> + +<p>もっとも単純な <code><input type="date"></code> の使用方法は、次のように基本的な <code><input></code> と {{htmlelement("label")}} 要素の組み合わせです。</p> + +<pre class="brush: html notranslate"><form action="https://example.com"> + <label> + 誕生日を入力してください。 + <input type="date" name="bday"> + </label> + + <p><button>Submit</button></p> +</form></pre> + +<p>{{EmbedLiveSample('Basic_uses_of_date', 600, 40)}}</p> + +<p>この HTML は入力された日付を <code>bday</code> キーに入れて <code>https://example.com</code> に送ります。 — 結果の URL は <code>https://example.com/?bday=1955-06-08</code> のようになります。</p> + +<h3 id="Setting_maximum_and_minimum_dates" name="Setting_maximum_and_minimum_dates">日付の最大値と最小値の設定</h3> + +<p>{{htmlattrxref("min", "input")}} および {{htmlattrxref("max", "input")}} 属性を使用して、ユーザーが選択できる日付を制限することができます。次の例では、日付の最小値を <code>2017-04-01</code> に、日付の最大値を <code>2017-04-30</code> に設定しています。</p> + +<pre class="brush: html notranslate"><form> + <label for="party">希望するパーティーの日を選んでください。 + <input type="date" name="party" min="2017-04-01" max="2017-04-30"> + </label> +</form></pre> + +<p>{{EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40)}}</p> + +<p>この結果は、2017年の4月の日付のみが選択できるようになります。 — テキストボックスの年と月の部分が編集できなくなり、日付選択ウィジェットで4月以外にスクロールすることができなくなります。</p> + +<div class="note"> +<p><strong>注</strong>: {{htmlattrxref("step", "input")}} 属性を使用すると、日付が加算するたびに飛ばす日数を設定できるはずです（例えば、土曜日のみを選択できるようにしたい場合など）。しかし、執筆時点でどの実装も正しく動作していないようです。</p> +</div> + +<h3 id="Controlling_input_size" name="Controlling_input_size">入力欄の寸法の制御</h3> + +<p><code><input type="date"></code> は {{htmlattrxref("size", "input")}} のような寸法に関する属性には対応していません。寸法を変更するには <a href="/ja/docs/Web/CSS">CSS</a> を推奨します。</p> + +<h2 id="Validation" name="Validation">検証</h2> + +<p>既定で、 <code><input type="date"></code> は入力された値をその書式を超えて検証しません。インターフェイスは一般的に、日付でないものの入力をさせないからです。 — これは便利です。 — しかし、入力欄を空のままにしたり、 <code>text</code> 型にフォールバックするブラウザーにおいて、無効な日付を入力したりすることが可能です (例えば4月32日など)。</p> + +<p>{{htmlattrxref("min", "input")}} および {{htmlattrxref("max", "input")}} を使用して有効な日付を制限すると ({{anch("Setting maximum and minimum dates", "日付の最大値と最小値の設定")}}を参照)、対応しているブラウザーは、範囲を外れたの日付を送信しようとしたときにエラーを表示するでしょう。しかし、ユーザーの端末が日付選択に完全に対応していない場合、値がこれらの日付の中にあることを保証するためには、送信された結果を再度チェックしなければならないでしょう。</p> + +<p>{{htmlattrxref("required", "input")}} 属性を使用して、日付の入力を必須にすることもできます。 — 空の日付欄を送信しようとするとエラーが表示されるでしょう。これは、テキスト入力欄で代替されたとしても、ほとんどのブラウザーで動作するはずです。</p> + +<p>日付の最小値と最大値の例と、入力欄を必須にする例を見てみましょう。</p> + +<pre class="brush: html notranslate"><form> + <label> + 推奨したいパーティーの日を選択してください (必須、4月1日～20日): + <input type="date" name="party" min="2017-04-01" max="2017-04-20" required> + <span class="validity"></span> + </label> + + <p> + <button>Submit</button> + </p> +</form></pre> + +<p>不完全な日付 (または設定した範囲を外れた日付) を送信しようとすると、ブラウザーはエラーを表示します。例を実行してみましょう。</p> + +<p>{{EmbedLiveSample('Validation', 600, 100)}}</p> + +<p>対応しているブラウザーで入力しなかった場合のスクリーンショットです。</p> + +<p><img alt="入力欄に吹き出しが重なっており、その中に橙色のビックリマークのアイコンと “Please fill in this field.” というメッセージがある。" src="https://mdn.mozillademos.org/files/14913/date-picker-chrome-error-message.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>上記の例で使用されている CSS です。 {{cssxref(":valid")}} および {{cssxref(":invalid")}} <a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>を使用して、現在の値が妥当かどうかで入力欄の隣にアイコンを追加しています。アイコンは入力欄そのものではなく、入力欄の隣の {{htmlelement("span")}} に置くようにしないと、 Chrome ではコントロールの内側にコンテンツを生成するので、正しく整形したり表示したりすることができません。</p> + +<pre class="brush: css notranslate">label { + display: flex; + align-items: center; +} + +span::after { + padding-left: 5px; +} + +input:invalid + span::after { + content: '✖'; +} + +input:valid+span::after { + content: '✓'; +}</pre> + +<div class="warning"> +<p><strong>重要</strong>: クライアント側のフォーム検証は、サーバー上の検証の<em>代用にはなりません</em>。誰かが HTML を改変したり、 HTML を完全にバイパスしてサーバーに直接データを送信したいrすることは簡単です。サーバーが受信したデータの検証に失敗した場合、不適切な形式のデータ、大きすぎるデータ、誤った種類のデータなどに遭遇すると、障害が発生するおそれがあります。</p> +</div> + +<h2 id="Handling_browser_support" name="Handling_browser_support">ブラウザーの対応の扱い</h2> + +<p>前述のように、現時点で日付入力を書く上で一番の問題は{{anch("Browser compatibility", "ブラウザーの対応")}}です。 Android 版 Firefox の日付選択はこの例のように表示されます。</p> + +<p><img alt="ウェブページとブラウザーの UI の上にモーダルで浮動しているポップアップのカレンダー選択" src="https://mdn.mozillademos.org/files/14915/date-picker-fxa.png" style="display: block; margin: 0 auto;"></p> + +<p>対応していないブラウザーでは、文字列入力欄に安全に格下げされますが、これはユーザーインターフェイスの一貫性 (表示されるコントロールが異なること) とデータの扱い方の両方で問題を生みます。</p> + +<p>2番目の問題はより深刻です。日付入力に対応していると、値が <code>yyyy-mm-dd</code> の書式で正規化されます。しかし、文字列入力欄では、ブラウザーには日付がどの書式で入力されるかの認識がなく、また、以下のように人間が日付を書く書式は様々なものがあります。</p> + +<ul> + <li><code>ddmmyyyy</code></li> + <li><code>dd/mm/yyyy</code></li> + <li><code>mm/dd/yyyy</code></li> + <li><code>dd-mm-yyyy</code></li> + <li><code>mm-dd-yyyy</code></li> + <li><code>Month dd, yyyy</code></li> +</ul> + +<p>これを回避する方法の一つは、日付入力欄に {{htmlattrxref("pattern", "input")}} 属性を付けることです。日付選択ではこれを使用しませんが、文字列入力にフォールバックされたときには使用されます。例えば、次の例を未対応のブラウザーで見てみてください。</p> + +<pre class="brush: html notranslate"><form> + <label for="bday">誕生日を入力してください: + <input type="date" name="bday" required pattern="\d{4}-\d{2}-\d{2}"> + <span class="validity"></span> + </label> + <p> + <button>送信</button> + </p> +</form></pre> + +<p>{{EmbedLiveSample('Handling_browser_support', 600, 100)}}</p> + +<p>送信ボタンを押すと、入力が <code>####-##-##</code> のパターン (<code>#</code> は数字の0から9) に一致しない場合はエラーメッセージが表示され、入力欄が無効として強調表示されるのが分かるでしょう。もちろん、これでユーザーが無効な日付や不正な書式を入力するのを止めることはできません。ですから、まだ問題があります。</p> + +<div class="hidden"> +<pre class="brush: css notranslate">span { + position: relative; +} + +span::after { + right: -18px; + position: absolute; +} + +input:invalid + span::after { + content: '✖'; +} + +input:valid + span::after { + content: '✓'; +}</pre> +</div> + +<p>現時点では、ブラウザーに依存しない方法でフォームで日付を扱う最善の方法は、年月日を別々なコントロールに入力するようにするか、 <a href="https://jqueryui.com/datepicker/">jQuery date picker</a> のような JavaScript ライブラリを使用することです。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例では、日付を選択するユーザーインターフェイスの要素を2組作成します。ネイティブの <code><input type="date"></code> による選択と、ネイティブの日付入力に対応していない古いブラウザー向けの、3つの {{htmlelement("select")}} 要素です。</p> + +<p>{{EmbedLiveSample('Examples', 600, 100)}}</p> + +<h3 id="HTML">HTML</h3> + +<p>HTML は次のようになります。</p> + +<pre class="brush: html notranslate"><form> + <div class="nativeDatePicker"> + <label for="bday">誕生日を入力してください:</label> + <input type="date" id="bday" name="bday"> + <span class="validity"></span> + </div> + <p class="fallbackLabel">誕生日を入力してください:</p> + <div class="fallbackDatePicker"> + <span> + <select id="year" name="year"> + </select> + <label for="year">年</label> + </span> + <span> + <select id="month" name="month"> + <option selected>1</option> + <option>2</option> + <option>3</option> + <option>4</option> + <option>5</option> + <option>6</option> + <option>7</option> + <option>8</option> + <option>9</option> + <option>10</option> + <option>11</option> + <option>12</option> + </select> + <label for="month">月</label> + </span> + <span> + <select id="day" name="day"> + </select> + <label for="day">日</label> + </span> + </div> +</form></pre> + +<p>月は (常に同じなので) ハードコーディングされていますが、年と日の値は、現在の年、および現在選択されている年と月によってそれぞれ動的に生成されます (どのように動作するかについての詳細な説明は、以下のコードのコメントを参照してください)。</p> + +<div class="hidden"> +<pre class="brush: css notranslate">span { + padding-left: 5px; +} + +input:invalid + span::after { + content: '✖'; +} + +input:valid + span::after { + content: '✓'; +}</pre> +</div> + +<h3 id="JavaScript">JavaScript</h3> + +<p>もう一つの面白い部分は、機能の検出コードです。 — ブラウザーが <code><input type="date"></code> に対応しているかどうかを検出するためのものです。</p> + +<p>新たな {{htmlelement("input")}} 要素を生成し、その <code>type</code> を <code>date</code> に設定して、すぐにどの型になったのかをチェックします。対応していないブラウザーでは、 <code>text</code> が返されます。これは、 <code>date</code> 型が <code>text</code> 型へフォールバックされるためです。 <code><input type="date"></code> に対応していない場合は、ネイティブの日付選択を非表示にして、フォールバック ({{htmlelement("select")}}) 表示します。</p> + +<pre class="brush: js notranslate">// 変数を定義 +var nativePicker = document.querySelector('.nativeDatePicker'); +var fallbackPicker = document.querySelector('.fallbackDatePicker'); +var fallbackLabel = document.querySelector('.fallbackLabel'); + +var yearSelect = document.querySelector('#year'); +var monthSelect = document.querySelector('#month'); +var daySelect = document.querySelector('#day'); + +// 最初はフォールバックを隠す +fallbackPicker.style.display = 'none'; +fallbackLabel.style.display = 'none'; + +// 新しい日付入力が文字列入力にフォールバックされるかどうか +var test = document.createElement('input'); + +try { + test.type = 'date'; +} catch (e) { + console.log(e.description); +} + +// もし文字列入力になるならば、 if() {} ブロックの中のコードを実行する +if(test.type === 'text') { + // ネイティブの日付選択を隠してフォールバック版を表示 + nativePicker.style.display = 'none'; + fallbackPicker.style.display = 'block'; + fallbackLabel.style.display = 'block'; + + // 年と日を動的に生成する + // （月は常に同じなのでハードコーディング） + populateDays(monthSelect.value); + populateYears(); +} + +function populateDays(month) { + // delete the current set of <option> elements out of the + // day <select>, ready for the next set to be injected + while(daySelect.firstChild){ + daySelect.removeChild(daySelect.firstChild); + } + + // 挿入する日数を保持する変数を作成 + var dayNum; + + // 31日か30日か？ + if(month === '1' | month === '3' | month === '5' | month === '7' | month === '8' | month === '10' | month === '12') { + dayNum = 31; + } else if(month === '4' | month === '6' | month === '9' | month === '11') { + dayNum = 30; + } else { + // 2月の場合は、閏年かどうかを計算する + var year = yearSelect.value; + var isLeap = new Date(year, 1, 29).getMonth() == 1; + isLeap ? dayNum = 29 : dayNum = 28; + } + + // <select> に正しい数の新しい <option> 要素を挿入 + for(i = 1; i <= dayNum; i++) { + var option = document.createElement('option'); + option.textContent = i; + daySelect.appendChild(option); + } + + // 前回の日が既に設定されていたら、 daySelect の値を + // 日に設定し、年を変えたときに1に戻ることを + // 避ける + if(previousDay) { + daySelect.value = previousDay; + + // 前回設定されていた日が大きい数字、例えば31であり、 + // その後で日数が少ない月 (例えば2月) を選択した場合、 + // このコードで空欄の日選択を表示するのではなく、 + // 利用可能な最大の日を選択するように保証する + if(daySelect.value === "") { + daySelect.value = previousDay - 1; + } + + if(daySelect.value === "") { + daySelect.value = previousDay - 2; + } + + if(daySelect.value === "") { + daySelect.value = previousDay - 3; + } + } +} + +function populateYears() { + // 今年を数値として取得 + var date = new Date(); + var year = date.getFullYear(); + + // 今年から100年前までの年が <select> で選択できるようにする + for(var i = 0; i <= 100; i++) { + var option = document.createElement('option'); + option.textContent = year-i; + yearSelect.appendChild(option); + } +} + +// 年や月の <select> 値が変更されたら、 populateDays() を +// 再実行して日数を調整する +yearSelect.onchange = function() { + populateDays(monthSelect.value); +} + +monthSelect.onchange = function() { + populateDays(monthSelect.value); +} + +// 日の選択を保存 +var previousDay; + +// 以前どの日が設定されていたかを保存する +// 使い方は populateDays() を参照 +daySelect.onchange = function() { + previousDay = daySelect.value; +}</pre> + +<div class="note"> +<p><strong>注</strong>: 53週ある年もあることを忘れないでください (<a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">年あたりの週数</a>を参照)。商品のアプリを開発するときはこれを念頭に置いておく必要があります。</p> +</div> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#date-state-(type=date)', '<input type="date">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#date-state-typedate', '<input type="date">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.input.input-date")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>全般的な {{HTMLElement("input")}} およびその操作に使用する{{domxref("HTMLInputElement")}} インターフェイス</li> + <li><a href="/ja/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">日付と時刻の選択のチュートリアル</a></li> + <li><a href="/ja/docs/Web/HTML/Date_and_time_formats">HTML で使われる日付や時刻の形式</a></li> + <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li> +</ul> diff --git a/files/ja/web/html/element/input/datetime-local/index.html b/files/ja/web/html/element/input/datetime-local/index.html new file mode 100644 index 0000000000..6959b8643f --- /dev/null +++ b/files/ja/web/html/element/input/datetime-local/index.html @@ -0,0 +1,637 @@ +--- +title: <input type="datetime-local"> +slug: Web/HTML/Element/input/datetime-local +tags: + - Date + - Date and Time + - Element + - Form input + - HTML + - HTML forms + - Input + - Input Element + - Input Type + - Reference + - Time + - datetime-local +translation_of: Web/HTML/Element/input/datetime-local +--- +<div>{{HTMLRef("Input_types")}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <strong><code>datetime-local</code></strong> 型は、ユーザーが簡単に日付と時刻、つまり年、月、日と時、分を入力することができる入力コントロールを生成します。ユーザーのローカルタイムゾーンが使用されます。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-datetime-local.html", "tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>コントロールのユーザーインターフェイスは、一般にブラウザーによってまちまちです。現時点で対応は不安定で、 Chrome/Opera とデスクトップ版の Edge、それに最新版のモバイルブラウザーが有用な実装をしています。他のブラウザーでは、このコントロールは単純な <code><a href="/ja/docs/Web/HTML/Element/input/text"><input type="text"></a></code> に格下げされます。</p> + +<p>このコントロールは単純に<em>ローカルの日付と時刻</em>を表現するためのものであって、<em>ユーザーのローカルの日付と時刻</em>を示すとは限りません。言い換えれば、実装では有効な年、月、日、時、分をすべて、仮にその組み合わせがユーザーのタイムゾーンで無効であったとしても (春の夏時間への移行ギャップなど)、許可するべきです。一部のモバイルブラウザーは (特に iOS のものは) これを正しく実装していません。</p> + +<p><code>datetime-local</code> は限られたブラウザーしか対応しておらず、入力欄の動作が様々であるため、現在はこれを表示するためにフレームワークやライブラリを使用するか、独自のカスタム入力欄をした方が良いかもしれません。また、 <code>date</code> と <code>time</code> の入力欄を別々に使用すると、 <code>datetime-local</code> よりも対応が広くなります。</p> + +<p>一部のブラウザーでは、テキストのみの入力要素を表示し、結果をサーバーに送信する前に妥当な日付/時刻値であることを検証するものもありますが、予期しない動作をすることがあるので、この動作に頼るべきではありません。</p> + +<p>対応していないブラウザーを使っている人向けに、 Chrome や Opera の <code>datetime-local</code> コントロールは以下のスクリーンショットのようになります。右端の下向きの矢印をクリックすると、日付を選択するための日付選択画面が現れます。時刻は手入力する必要があります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14949/datetime-local-chrome.png" style="display: block; height: 224px; margin: 0px auto; width: 280px;"></p> + +<p>Edge の <code>datetime-local</code> コントロールは以下のような外見です。日付および時刻のぶぶんの値をクリックすると、2つの別々な選択画面が現れますので、簡単に日付と時刻を設定できます。これは <code>date</code> と <code>time</code> のウィジェットを両方作成して、一つにまとめたようなものです。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14953/datetime-local-picker-edge1.png" style="display: block; height: 398px; margin: 0px auto; width: 320px;"></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14955/datetime-local-picker-edge2.png" style="display: block; height: 394px; margin: 0px auto; width: 264px;"></p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value", "値")}}</strong></td> + <td>(ローカルタイムゾーンでの) 日付と時刻を表す {{domxref("DOMString")}}、または空欄。</td> + </tr> + <tr> + <td><strong>イベント</strong></td> + <td>{{domxref("HTMLElement/change_event", "change")}} および {{domxref("HTMLElement/input_event", "input")}}</td> + </tr> + <tr> + <td><strong>対応している共通属性</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("step", "input")}}</td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code></td> + </tr> + <tr> + <td><strong>メソッド</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value" name="Value">値</h2> + +<p>入力欄に入力された日付の値を表す {{domxref("DOMString")}} です。この入力型で使われる日付と時刻の値の形式は、<a href="/ja/docs/Web/HTML/Date_and_time_formats#Local_date_and_time_strings">ローカル日時の文字列</a>で説明されています。</p> + +<p>次のように、 {{htmlattrxref("value", "input")}} 属性に日付と時刻を入れることで、入力欄の既定値を設定することができます。</p> + +<pre class="brush: html notranslate"><label for="party">パーティーを予約する日時を入力してください。</label> +<input id="party" type="datetime-local" name="partydate" value="2017-06-01T08:30"></pre> + +<p>{{EmbedLiveSample('Value', 600, 60)}}</p> + +<p>一点気を付けなければならないことは、表示される日付と時刻の書式は実際の <code>value</code> とは異なることです。表示される日付と時刻は、オペレーティングシステムからの報告に従ってユーザーのロケールによって書式化されますが、日付や時刻の <code>value</code> は常に <code>yyyy-MM-ddThh:mm</code> の書式です。例えば、上記の値をサーバーに送信すると、 <code>partydate=2017-06-01T08:30</code> のようになります。</p> + +<div class="note"> +<p><strong>注:</strong> このようなデータが HTTP の <code><a href="/ja/docs/Web/HTTP/Methods/GET">GET</a></code> を通じて送信されると、コロン文字を URL 引数に含めるために、 <code>partydate=2017-06-01T08%3A30</code> のようにエスケープする必要があることもお忘れなく。これを行う方法の一つとして {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} を参照してください。</p> +</div> + +<p>次のように、 JavaScript で {{domxref("HTMLInputElement.value")}} プロパティを使用して日付の値を取得したり設定したりすることもできます。</p> + +<pre class="brush: js notranslate">var dateControl = document.querySelector('input[type="datetime-local"]'); +dateControl.value = '2017-06-01T08:30';</pre> + +<p>JavaScript の {{jsxref("Date")}} には、数値の日時情報を正しく整形された文字列に変換したり、手動で行ったりするメソッドがいくつかあります。例えば、この用途では {{jsxref("Date.toISOString()")}} メソッドが利用できます。</p> + +<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2> + +<p>すべての {{HTMLElement("input")}} 要素で共通する属性に加え、 <code>datetime-local</code> 型の入力欄は次の属性にも対応しています。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("max")}}</code></td> + <td>受け付ける最新の日時</td> + </tr> + <tr> + <td><code>{{anch("min")}}</code></td> + <td>受け付ける最古の日時</td> + </tr> + <tr> + <td><code>{{anch("step")}}</code></td> + <td>上下の矢印で値を調整する時や、検証を行う時に使用する刻み値</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3> + +<p>受け付ける最新の日時です。要素に入力された {{htmlattrxref("value", "input")}} がこのタイムスタンプよりも後の場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code>max</code> 属性の値が <code>yyyy-MM-ddThh:mm</code> の書式に従う妥当な文字列でない場合、要素は最大値を持ちません。</p> + +<p>この値は <code>min</code> 属性で指定されたものより後か、同じ日付を指定する必要があります。</p> + +<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3> + +<p>受け付ける最古の日時です。これより前のタイムスタンプの場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code>min</code> 属性の値が <code>yyyy-MM-ddThh:mm</code> の書式に従う妥当な文字列でない場合、要素は最小値を持ちません。</p> + +<p>この値は <code>max</code> 属性で指定されたものより前か、同じ日付を指定する必要があります。</p> + +<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3> + +<p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p> + +<p><code>datetime-local</code> 入力欄では、 <code>step</code> の値は秒数で指定され、 1000 が乗じられます (ミリ秒単位の数値であるため)。 <code>step</code> の既定値は 60 であり、60秒 (1分、60000ミリ秒) を表します。</p> + +<p><em>現時点で、 <code>datetime-local</code> 入力欄で <code>step</code> に <code>any</code> の値が何を意味するかが不明確です。これは情報が決定次第、更新されるでしょう。</em></p> + +<h2 id="datetime-local_入力の使用">datetime-local 入力の使用</h2> + +<p>datetime-local 入力欄は一見すると便利に見えます。簡単に日付と時刻を選択するユーザーインターフェイスを提供し、ユーザーのロケールに関係なく、データ形式を正規化してサーバーに送信するからです。しかし、ブラウザーの互換性が限られているため、 <code><input type="datetime-local"></code> には問題があります。</p> + +<p><code><input type="datetime-local"></code> の基本的な使い方と少し複雑な使い方を見てみてから、その後でブラウザーの互換性の問題を緩和するアドバイスを提供しましょう ({{anch("Handling browser support", "ブラウザーの対応の扱い")}}を参照してください)。</p> + +<h3 id="datetime-local_の基本的な使用">datetime-local の基本的な使用</h3> + +<p>もっとも単純な <code><input type="datetime-local"></code> の使用方法は、次のような基本的な <code><input></code> と {{htmlelement("label")}} 要素の組み合わせです。</p> + +<pre class="brush: html notranslate"><form> + <label for="party">パーティーを予約する日時を入力してください。</label> + <input id="party" type="datetime-local" name="partydate"> +</form></pre> + +<p>{{EmbedLiveSample('Basic_uses_of_datetime-local', 600, 40)}}</p> + +<h3 id="Setting_maximum_and_minimum_dates_and_times" name="Setting_maximum_and_minimum_dates_and_times">日時の最大値と最小値の設定</h3> + +<p>{{htmlattrxref("min", "input")}} および {{htmlattrxref("max", "input")}} 属性を使用して、ユーザーが選択できる日時を制限することができます。次の例では、日時の最小値を <code>2017-06-01T08:30</code> に、日時の最大値を <code>2017-06-30T16:30</code> に設定しています。</p> + +<pre class="brush: html notranslate"> <form> + <label for="party">パーティーを予約する日時を入力してください。</label> + <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30"> + </form></pre> + +<p>{{EmbedLiveSample('Setting_maximum_and_minimum_dates_and_times', 600, 40)}}</p> + +<p>結果は次のようになります。</p> + +<ul> + <li>この結果は、2017年の6月の日付のみが選択できるようになります。文字列値の「日」の部分のみが編集可能となり、日付選択ウィジェットで6月以外にスクロールすることはできなくなります。</li> + <li>どのブラウザーを使用するかによって、指定された値の範囲外の時刻が時刻選択画面で選択できなかったり (Edge など)、無効な値 ({{anch("Validation")}} を参照) であっても設定できたりすることがあります (Chrome など)。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: {{htmlattrxref("step", "input")}} 属性を使用すると、日時を加算するたびに飛ばす日時を設定できるはずです (例えば、土曜日のみを選択できるようにしたい場合など)。しかし、執筆時点でどの実装も正しく動作していないようです。</p> +</div> + +<h3 id="Controlling_input_size" name="Controlling_input_size">入力欄の寸法の制御</h3> + +<p><code><input type="datetime-local"></code> は、 {{htmlattrxref("size", "input")}} のようなコントロールの寸法に関する属性には対応していません。寸法を変更する必要がある場合は、 <a href="/ja/docs/Web/CSS">CSS</a> を使用する必要があります。</p> + +<h3 id="Setting_timezones" name="Setting_timezones">タイムゾーンの設定</h3> + +<p><code>datetime-local</code> 入力型はコントロールのタイムゾーンやロケールを設定する方法がありません。これは <code><a href="/ja/docs/Web/HTML/Element/input/datetime">datetime</a></code> 入力型では利用できましたが、この入力型は廃止され、仕様書から削除されました。削除された主な理由はブラウザーの互換性がなく、ユーザーインターフェイスや使い勝手が決まっていなかったからです。単に日付と時刻を設定するコントロールを用意して、別なコントロールで地域を設定したほうが簡単です。</p> + +<p>例えば、ユーザーがログインしている場所によって地域を設定するようなシステムを開発する場合、タイムゾーンを <code><a href="/ja/docs/Web/HTML/Element/input/hidden">hidden</a></code> 入力型で次のように提供することができます。</p> + +<pre class="brush: html notranslate"><input type="hidden" id="timezone" name="timezone" value="-08:00"></pre> + +<p>一方、ユーザーに日時入力と共にタイムゾーンを入力できるようにする必要がある場合、 {{htmlelement("select")}} 要素などでタイムゾーンを入力する手段を提供することができます。</p> + +<pre class="brush: html notranslate"><select name="timezone_offset" id="timezone-offset" class="span5"> + <option value="-12:00">(GMT -12:00) Eniwetok, Kwajalein</option> + <option value="-11:00">(GMT -11:00) Midway Island, Samoa</option> + <option value="-10:00">(GMT -10:00) Hawaii</option> + <option value="-09:50">(GMT -9:30) Taiohae</option> + <option value="-09:00">(GMT -9:00) Alaska</option> + <option value="-08:00">(GMT -8:00) Pacific Time (US &amp; Canada)</option> + + ... + +</select></pre> + +<p>どちらの場合も、日時の値とタイムゾーンの値はサーバーに別々のデータポイントとして送信されるため、サーバー側のデータベースに適切に格納する必要があります。</p> + +<div class="note"> +<p><strong>注</strong>: 上記のコードの断片は、<a href="https://gist.github.com/nodesocket/3919205">HTML select 要素の全世界のタイムゾーン</a>から取得しました。</p> +</div> + +<h2 id="Validation" name="Validation">検証</h2> + +<p>既定では、 <code><input type="datetime-local"></code> は入力された値の検証を行いません。ユーザーインターフェイスの実装は一般的に、日付でないものの入力をさせないからです。これは便利です。しかし、それでも入力欄を空のままにしたり、 (<code>text</code> 型にフォールバックするブラウザーにおいて) 無効な日付 (例えば4月32日など) を入力したりすることが可能です。</p> + +<p>{{htmlattrxref("min", "input")}} および {{htmlattrxref("max", "input")}} を使用して有効な日付を制限したり ({{anch("Setting maximum and minimum dates", "日付の最大値と最小値の設定")}}を参照)、 {{htmlattrxref("required", "input")}} 属性を使用して日時の入力を必須にしたりすることができます。その結果、対応しているブラウザーでは、範囲を外れた日付や空の日付欄を送信しようとするとエラーが表示されるでしょう。</p> + +<p>例を見てみましょう。ここで日付の最小値と最大値を設定し、入力欄を必須にしました。</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="party">希望するパーティーの日時を選択して下さい (必須、6月1日午前8:30～6月30日午後4:30) </label> + <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30" required> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="予約する！"> + </div> +</form></pre> + +<p>不完全な日付 (または設定した範囲を外れた日付) を送信しようとすると、ブラウザーはエラーを表示します。例を実行してみましょう。</p> + +<p>{{ EmbedLiveSample('Validation', 600, 120) }}</p> + +<p>対応しているブラウザーで入力しなかった場合のスクリーンショットです。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14957/datetime-local-error.png" style="display: block; height: 100px; margin: 0px auto; width: 558px;"></p> + +<p>上記の例の CSS です。 CSS の {{cssxref(":valid")}} および {{cssxref(":invalid")}} プロパティを使用して、現在の値が有効かどうかに基づいてスタイルを設定しています。アイコンは入力欄そのものではなく、入力欄の隣の {{htmlelement("span")}} に置くようにしないと、 Chrome ではコントロールの内側にコンテンツを生成するので、正しく整形したり表示したりすることができません。</p> + +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + display: flex; + align-items: center; +} + +label { + display: inline-block; + width: 300px; +} + +input:invalid+span:after { + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + content: '✓'; + padding-left: 5px; +}</pre> + +<div class="warning"> +<p><strong>重要</strong>: HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用にはなりません。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、誤った種類のデータなど) が送信された場合に障害が発生するおそれがあります。</p> +</div> + +<h2 id="Handling_browser_support" name="Handling_browser_support">ブラウザーの対応の扱い</h2> + +<p>前述のように、現時点で日付入力を書く上で一番の問題は{{anch("Browser compatibility", "ブラウザーの互換性")}}です。デスクトップでは Chrome/Opera と Edge のみが対応しており、モバイルでは多くの最新のブラウザーが対応しています。例えば、 Android 版 Firefox の <code>datetime-local</code> の選択画面はこの例のように表示されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14951/datetime-local-fxa.png" style="display: block; height: 640px; margin: 0px auto; width: 360px;"></p> + +<p>対応していないブラウザーでは、文字列入力欄に安全に格下げされますが、これはユーザーインターフェイスの一貫性 (表示されるコントロールが異なること) とデータの扱いの両方で問題を生みます。</p> + +<p>2番目の問題はより深刻です。すでに述べたように、 <code>datetime-local</code> 入力欄では、実際の値が常に <code>yyyy-mm-ddThh:mm</code> の書式で正規化されます。一方、文字列入力欄では、既定でブラウザーは日付がどの書式で入力されるかの認識がなく、以下のように人間が日付と時刻を書く様々な方法で入力される可能性があります。</p> + +<ul> + <li><code>ddmmyyyy</code></li> + <li><code>dd/mm/yyyy</code></li> + <li><code>mm/dd/yyyy</code></li> + <li><code>dd-mm-yyyy</code></li> + <li><code>mm-dd-yyyy</code></li> + <li><code>mm-dd-yyyy hh:mm</code> (12時制)</li> + <li><code>mm-dd-yyyy HH:mm</code> (24時制)</li> + <li>など</li> +</ul> + +<p>これを回避する方法の一つは、日付入力欄に {{htmlattrxref("pattern", "input")}} 属性を付けることです。日付入力欄はこれを使用しないので、 <code>text</code> 入力欄にフォールバックされたときは使用します。例えば、次の例を未対応のブラウザーで見てみてください。</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="party">希望するパーティーの日時を選択して下さい (必須、6月1日午前8:30～6月30日午後4:30) </label> + <input id="party" type="datetime-local" name="partydate" + min="2017-06-01T08:30" max="2017-06-30T16:30" + pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" required> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="予約する！"> + </div> + <input type="hidden" id="timezone" name="timezone" value="-08:00"> +</form></pre> + +<p>{{EmbedLiveSample('Handling_browser_support', 600, 100)}}</p> + +<p><code>nnnn-nn-nnTnn:nn</code> のパターン (<code>n</code> は数字の0から9) に一致しない文字列を入力して送信しようとすると、エラーメッセージが表示される (そして入力欄が無効として強調表示される) のが分かるでしょう。もちろん、これではユーザーが無効な日付を入力したり、誤った形式で日付や時刻を入力したりすることを止めることはできません。</p> + +<p>また、日付や時刻を入力するパターンをどうやってユーザーに理解させればよいのでしょうか？</p> + +<p>まだ問題があります。</p> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; +} + +input:invalid + span { + position: relative; +} + +input:invalid + span:after { + content: '✖'; + position: absolute; + right: -18px; +} + +input:valid + span { + position: relative; +} + +input:valid + span:after { + content: '✓'; + position: absolute; + right: -18px; +}</pre> +</div> + +<p>ブラウザーに依存しない方法によってフォームで日付を扱う最善の方法は、現時点では年月日を別々なコントロール ({{htmlelement("select")}} 要素が一般的です。以下の実装を見てください) にするか、 <a href="https://jqueryui.com/datepicker/">jQuery date picker</a> や <a href="http://timepicker.co/">jQuery timepicker plugin</a> のような JavaScript ライブラリを使用することです。</p> + +<h2 id="2038年問題_主にサーバー側">2038年問題 (主にサーバー側)</h2> + +<p>JavaScript は日付を格納するとき、すべての数値と同様に、倍精度浮動小数点を使用しますので、 JavaScript のコードは整数への変換やビット操作が行われない限り、2038年問題に悩まされることはありません。ビット操作演算は、32ビットの符号付き2の補数で演算を行っているので影響を受ける可能性があります。</p> + +<p>問題はサーバー側で、 2<sup>31</sup>-1 よりも大きな日付値を格納する場合です。この問題を解決するには、すべての日付を符号なしの32ビット整数、符号付きの64ビット整数、または倍精度の浮動小数点のいずれかでサーバーに格納する必要があります。サーバーが PHP で書かれている場合は、PHP 8 または 7 にアップグレードし、ハードウェアを x86_64 または IA64 にアップグレードするだけで解決できるかもしれません。他のハードウェアで行き詰っている場合は、32ビット仮想マシン内で64ビットハードウェアをエミュレートすることもできますが、ほとんどの仮想マシンはこの種の仮想化をサポートしていないため、安定性が損なわれ、性能が大きく低下する可能性があります。</p> + +<h2 id="The_Y10k_Problem_often_client-side" name="The_Y10k_Problem_often_client-side">10000年問題 (主にクライアント側)</h2> + +<p>多くのサーバーでは、日付を文字列ではなく数値として保存します。10000年以降は、これらの数字は以前よりも少し大きくなるだけなので、多くのサーバーでは10000年以降をフォームで送信しても問題が発生することはありません。</p> + +<p>問題はクライアント側の問題です。年に4桁以上の数字を持つ日付の解析です。</p> + +<pre class="brush: html notranslate"><!--midnight of January 1st, 10000: the exact time of Y10K--> +<input type="datetime-local" value="+010000-01-01T05:00"/></pre> + +<p>単純なことです。何桁でもいいコードを用意するだけです。5桁の数字だけを用意するのではありません。プログラムで値を設定するための JavaScript のコードを紹介します。</p> + +<pre class="brush: js notranslate">function setValue(element, date) { + var isoString = date.toISOString() + element.value = isoString.substring(0, (isoString.indexOf("T")|0) + 6|0); +}</pre> + +<p>もしこれがあなたの死後何世紀も経ってから起こるのであれば、なぜ10000年問題を心配するのかでしょうか。その通り、あなたはすでに死んでいるので、あなたのソフトウェアを使っている企業は、システムを十分に知っている他のコーダーが入ってきてそれを修正することなく、あなたのソフトウェアを使うと行き詰まってしまうからです。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例では、日付を選択するユーザーインターフェイスの要素を2組生成します。ネイティブの <code><input type="datetime-local"></code> 入力欄と、ネイティブの入力に対応しない古いブラウザー向けの、5つの {{htmlelement("select")}} 要素による日時選択です。</p> + +<p>{{EmbedLiveSample('Examples', 600, 140)}}</p> + +<p>HTML は次のようになります。</p> + +<pre class="brush: html notranslate"><form> + <div class="nativeDateTimePicker"> + <label for="party">希望するパーティーの日時を選択して下さい。</label> + <input type="datetime-local" id="party" name="bday"> + <span class="validity"></span> + </div> + <p class="fallbackLabel">希望するパーティーの日時を選択して下さい。</p> + <div class="fallbackDateTimePicker"> + <div> + <span> + <select id="year" name="year"> + </select> + <label for="year">年</label> + </span> + <span> + <select id="month" name="month"> + <option selected>1</option> + <option>2</option> + <option>3</option> + <option>4</option> + <option>5</option> + <option>6</option> + <option>7</option> + <option>8</option> + <option>9</option> + <option>10</option> + <option>11</option> + <option>12</option> + </select> + <label for="month">月</label> + </span> + <span> + <select id="day" name="day"> + </select> + <label for="day">日</label> + </span> + </div> + <div> + <span> + <select id="hour" name="hour"> + <label for="hour">時</label> + </select> + </span> + <span> + <select id="minute" name="minute"> + <label for="minute">分</label> + </select> + </span> + </div> + </div> +</form></pre> + +<p>月は (常に同じなので) ハードコーディングされていますが、年と日の値は、現在の年、および現在選択されている年と月によってそれぞれ動的に生成されます (どのように動作するかについての詳細な説明は、以下のコードのコメントを参照してください)。時と分についても、とても多いので動的に生成するようにしました。</p> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<p>もう一つの面白い部分は、機能の検出コードです。ブラウザーが <code><input type="datetime-local"></code> に対応しているかどうかを検出するために、新たな {{htmlelement("input")}} 要素を生成し、その <code>type</code> を <code>datetime-local</code> に設定してみて、すぐに type に何が設定されたかをチェックします。 <code>datetime-local</code> 型に対応していないブラウザーでは、 <code>datetime-local</code> 型が <code>text</code> 型へフォールバックされます。 <code><input type="datetime-local"></code> に対応していない場合は、ネイティブの日時入力欄を非表示にしてフォールバック用の ({{htmlelement("select")}}) による選択ユーザーインターフェイスを表示します。</p> + +<pre class="brush: js notranslate">// 変数を定義 +var nativePicker = document.querySelector('.nativeDateTimePicker'); +var fallbackPicker = document.querySelector('.fallbackDateTimePicker'); +var fallbackLabel = document.querySelector('.fallbackLabel'); + +var yearSelect = document.querySelector('#year'); +var monthSelect = document.querySelector('#month'); +var daySelect = document.querySelector('#day'); +var hourSelect = document.querySelector('#hour'); +var minuteSelect = document.querySelector('#minute'); + +// 最初はフォールバックを非表示にする +fallbackPicker.style.display = 'none'; +fallbackLabel.style.display = 'none'; + +// 新しい日付入力が文字列入力にフォールバックされるかどうか +var test = document.createElement('input'); + +try { + test.type = 'datetime-local'; +} catch (e) { + console.log(e.description); +} + +// もし文字列入力になるならば、 if() {} ブロックの中のコードを実行する +if(test.type === 'text') { + // ネイティブの日付選択を隠してフォールバック版を表示 + nativePicker.style.display = 'none'; + fallbackPicker.style.display = 'block'; + fallbackLabel.style.display = 'block'; + + // 日と年を動的に生成する + // (月は常に同じなのでハードコーディング) + populateDays(monthSelect.value); + populateYears(); + populateHours(); + populateMinutes(); +} + +function populateDays(month) { + // 日の <select> から現在の一連の <option> 要素を削除し、 + // 挿入のための準備をする + while(daySelect.firstChild){ + daySelect.removeChild(daySelect.firstChild); + } + + // 挿入する日数を保持する変数を作成 + var dayNum; + + // 31 か 30 日か + if(month === '1' || month === '3' || month === '5' || month === '7' || month === '8' || month === '10' || month === '12') { + dayNum = 31; + } else if(month === '4' || month === '6' || month === '9' || month === '11') { + dayNum = 30; + } else { + // 2月の場合は、閏年かどうかを計算する + var year = yearSelect.value; + var isLeap = new Date(year, 1, 29).getMonth() == 1; + isLeap ? dayNum = 29 : dayNum = 28; + } + + // 日付の <select> に正しい数の新しい <option> 要素を + for(i = 1; i <= dayNum; i++) { + var option = document.createElement('option'); + option.textContent = i; + daySelect.appendChild(option); + } + + // 前回の日が既に設定されていたら、 daySelect の値を + // 日に設定し、年を変えたときに1に戻ることを避ける + if(previousDay) { + daySelect.value = previousDay; + + // 前回設定されていた日が大きい数字、つまり31であった場合、 + // そして日数が少ない月 (例えば2月) を選択した場合、 + // コードのこの部分で空欄を表示するのではなく、一番大きな日が + // 選択されるようにする + if(daySelect.value === "") { + daySelect.value = previousDay - 1; + } + + if(daySelect.value === "") { + daySelect.value = previousDay - 2; + } + + if(daySelect.value === "") { + daySelect.value = previousDay - 3; + } + } +} + +function populateYears() { + // 今年を数字として取得 + var date = new Date(); + var year = date.getFullYear(); + + // 今年から100年前までの年が <select> で選択できるようにする + for(var i = 0; i <= 100; i++) { + var option = document.createElement('option'); + option.textContent = year-i; + yearSelect.appendChild(option); + } +} + +function populateHours() { + // populate the hours <select> with the 24 hours of the day + for(var i = 0; i <= 23; i++) { + var option = document.createElement('option'); + option.textContent = (i < 10) ? ("0" + i) : i; + hourSelect.appendChild(option); + } +} + +function populateMinutes() { + // populate the minutes <select> with the 60 hours of each minute + for(var i = 0; i <= 59; i++) { + var option = document.createElement('option'); + option.textContent = (i < 10) ? ("0" + i) : i; + minuteSelect.appendChild(option); + } +} + +// 年や月の <select> 値が変更されたら、 populateDays() を +// 再実行して日数を調整する +yearSelect.onchange = function() { + populateDays(monthSelect.value); +} + +monthSelect.onchange = function() { + populateDays(monthSelect.value); +} + +//日数を保存 +var previousDay; + +// 以前どの日が設定されていたかを保存する +// 使い方は populateDays() を参照 +daySelect.onchange = function() { + previousDay = daySelect.value; +}</pre> + +<div class="note"> +<p><strong>注</strong>: 53週ある年もあることを忘れないでください (<a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">年あたりの週数</a>を参照)。商品のアプリを開発するときはこれを念頭に置いておく必要があります。</p> +</div> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#local-date-and-time-state-(type=datetime-local)', '<input type="datetime-local">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#local-date-and-time-state-(type=datetime-local)', '<input type="datetime-local">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.input.input-datetime-local")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>全般的な {{HTMLElement("input")}} およびその操作に使用する{{domxref("HTMLInputElement")}} インターフェイス</li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/date"><input type="date"></a></code> および <code><a href="/ja/docs/Web/HTML/Element/input/time"><input type="time"></a></code></li> + <li><a href="/ja/docs/Web/HTML/Date_and_time_formats">HTML で使われる日付や時刻の形式</a></li> + <li><a href="/ja/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">日付と時刻の選択のチュートリアル</a></li> + <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Compatibility of CSS properties</a></li> +</ul> diff --git a/files/ja/web/html/element/input/datetime/index.html b/files/ja/web/html/element/input/datetime/index.html new file mode 100644 index 0000000000..01dd0c0cc6 --- /dev/null +++ b/files/ja/web/html/element/input/datetime/index.html @@ -0,0 +1,29 @@ +--- +title: <input type="datetime"> +slug: Web/HTML/Element/input/datetime +tags: + - HTML + - HTML フォーム + - Obsolete + - Reference + - datetime + - input 要素 + - フォーム + - 入力型 + - 要素 +translation_of: Web/HTML/Element/input/datetime +--- +<div>{{HTMLRef}}{{obsolete_header}}</div> + +<p>HTML の <code><input type="datetime"></code> は日付と時刻 (時、分、秒と小数点以下の秒) に加えてタイムゾーンを入力するコントロールでした。<strong>この機能は <a class="external external-icon" href="https://github.com/whatwg/html/issues/336">WHATWG HTML 仕様書から削除</a>され</strong>、もうブラウザーでは対応されていません。</p> + +<p>代わりに、ブラウザーは <code><a href="/ja/docs/Web/HTML/Element/input/datetime-local"><input type="datetime-local"></a></code> を実装して (かつ開発者に使用を推奨して) います。</p> + +<p>この入力型で使用される日付と時刻の形式は、{{SectionOnPage("/ja/docs/Web/HTML/Date_and_time_formats", "Format of a valid global date and time string")}}で説明しています。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("input")}} 要素</li> + <li><a href="/ja/docs/Web/HTML/Date_and_time_formats">HTML で使われる日付と時刻の形式</a></li> +</ul> diff --git a/files/ja/web/html/element/input/email/index.html b/files/ja/web/html/element/input/email/index.html new file mode 100644 index 0000000000..9b45e82247 --- /dev/null +++ b/files/ja/web/html/element/input/email/index.html @@ -0,0 +1,416 @@ +--- +title: <input type="email"> +slug: Web/HTML/Element/input/email +tags: + - Email + - Forms + - HTML + - HTML forms + - Input Type + - Reference +translation_of: Web/HTML/Element/input/email +--- +<div>{{HTMLRef("Input_types")}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <code><strong>email</strong></code> 型は、ユーザーに一つのメールアドレス、または、 <code><a href="/ja/docs/Web/HTML/Attributes/multiple">multiple</a></code> 属性が設定されていた場合は、メールアドレスのリストを入力および編集させるために使用します。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-email.html", "tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>入力値はフォームの送信前に自動的に検証され、空欄または正しい形式のメールアドレス (またはメールアドレスのリスト) のどちらかであることが確認されます。 CSS の {{cssxref(":valid")}} および {{cssxref(":invalid")}} 擬似クラスが自動的に適用され、フィールド上の現在の値が妥当なメールアドレスであるかどうかを視覚的に示します。</p> + +<p><code>email</code> 型に対応していないブラウザーでは、 <code>email</code> 入力欄は標準の {{HTMLElement("input/text", "text")}} 入力欄で代替されます。</p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value", "値")}}</strong></td> + <td>メールアドレスを表す {{domxref("DOMString")}}、または空欄</td> + </tr> + <tr> + <td><strong>イベント</strong></td> + <td>{{domxref("HTMLElement/change_event", "change")}} および {{domxref("HTMLElement/input_event", "input")}}</td> + </tr> + <tr> + <td><strong>対応している共通属性</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("multiple", "input")}}, {{htmlattrxref("name", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}}, {{htmlattrxref("size", "input")}}, {{htmlattrxref("type", "input")}}</td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>list</code> および <code>value</code></td> + </tr> + <tr> + <td><strong>メソッド</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value" name="Value">値</h2> + +<p>{{HTMLElement("input")}} 要素の {{htmlattrxref("value", "input")}} 属性には {{domxref("DOMString")}} が入り、メールアドレスの構文に合うかどうかが自動的に検証されます。具体的には、検証に通ることができる値の書式には3種類があります。</p> + +<ol> + <li>空文字列 ("")。ユーザーが値を入力しないか、または値が削除されたことを表します。</li> + <li>単一の正しい形式のメールアドレス。メールアドレスが実在する必要はありませんが、少なくとも正しい書式です。簡単に言えば、 <code>username@domain</code> または <code>username@domain.tld</code> の形です。もちろんそれ以上のものもあります。{{anch("Validation", "検証")}}の節で、メールアドレスの検証アルゴリズムで一致する{{Glossary("regular expression", "正規表現")}}について参照してください。</li> + <li>{{htmlattrxref("multiple", "input")}} 属性が指定されたとき (のみ)、値はカンマ区切りで複数の正しい形式のメールアドレスを入れることができます。それぞれのメールアドレスの前後にある空白は除去されます。</li> +</ol> + +<p>{{anch("Validation", "検証")}}の節で、どのようなメールアドレスが正しい形式であると検証されるかの詳細を参照してください。</p> + +<h2 id="Additional_attributes" name="Additional_attributes">追加属性</h2> + +<p>型に関係なくすべての {{HTMLElement("input")}} 要素を操作する属性に加え、 <code>email</code> 型の入力欄は次の属性にも対応しています。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("list")}}</code></td> + <td>The id of the <datalist> element that contains the optional pre-defined autocomplete options</td> + </tr> + <tr> + <td><code>{{anch("maxlength")}}</code></td> + <td>入力欄が受け付ける最大文字数</td> + </tr> + <tr> + <td><code>{{anch("minlength")}}</code></td> + <td>入力欄が取りうる、妥当と判断される最小文字列長</td> + </tr> + <tr> + <td><code>{{anch("multiple")}}</code></td> + <td>複数のメールアドレスをカンマ区切りで入力することを受け付けるかどうか</td> + </tr> + <tr> + <td><code>{{anch("pattern")}}</code></td> + <td>妥当と判断されるために、入力欄の内容が一致する必要がある正規表現</td> + </tr> + <tr> + <td><code>{{anch("placeholder")}}</code></td> + <td>空欄の時に入力欄に表示される入力例の値</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>入力欄の内容を読み取り専用にするかどうかを示す論理属性</td> + </tr> + <tr> + <td><code>{{anch("size")}}</code></td> + <td>入力欄の長さを何文字分にするかを表す数値</td> + </tr> + </tbody> +</table> + +<p id="htmlattrdeflist">{{page("/en-US/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p> + +<h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3> + +<p>ユーザーが <code>email</code> 入力欄に入力することができる (UTF-16 コード単位での) 最大文字数です。 0 以上の整数値である必要があります。 <code>maxlength</code> が指定されていないか、無効な値が指定されていると、 <code>email</code> 入力欄には最大文字数が設定されません。この値は <code>minlength</code> の値以上である必要もあります。</p> + +<p>フィールドのメールアドレスの長さが UTF-16 コード単位で <code>maxlength</code> の長さを超えていると、その入力欄は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。</p> + +<h3 id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</h3> + +<p>ユーザーが <code>email</code> 入力欄に入力することができる (UTF-16 コード単位での) 最小文字数です。これは非負の整数値で、 <code>maxlength</code> で指定された値以下である必要があります。 <code>minlength</code> が指定されていないか、無効な値が指定されていると、 <code>email</code> 入力欄には最小文字数が設定されません。</p> + +<p>入力欄のメールアドレスの長さが UTF-16 コード単位で <code>minlength</code> の長さよりも短いと、その入力欄は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。</p> + +<h3 id="htmlattrdefmultiple">{{htmlattrdef("multiple")}}</h3> + +<p>論理属性で、存在する場合、ユーザーが複数のメールアドレスを、カンマと任意のホワイトスペースで区切ったリストを入力できることを示します。詳しくは{{anch("Allowing multiple e-mail addresses", "複数のメールアドレスの許可")}}または <a href="/ja/docs/Web/HTML/Attributes/multiple">HTML 属性: multiple</a> を参照してください。</p> + +<div class="note"> +<p><strong>注:</strong> 通常、 {{htmlattrxref("required", "input")}} 属性を指定すると、ユーザーは入力欄に妥当なメールアドレスを入力しなければなりません。しかし、 <code>multiple</code> 属性を追加すると、ゼロ個のメールアドレス (空文字列、またはホワイトスペースのみの文字列) が妥当な値になります。言い換えれば、 <code>multiple</code> が指定されていると、 <code>required</code> の値に関係なく、ユーザーはメールアドレスを一つも入力する必要がありません。</p> +</div> + +<h3 id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</h3> + +<p>{{page("/ja/docs/Web/HTML/Element/input/text", "pattern-include")}}</p> + +<p>詳細と例については{{anch("Pattern validation", "パターン検証")}}の節を参照してください。</p> + +<p>{{page("/ja/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> + +<p>{{page("/ja/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> + +<p>{{page("/ja/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p> + +<h2 id="Using_email_inputs" name="Using_email_inputs">email 入力欄の使用</h2> + +<p>メールアドレスはウェブで最も頻繁に入力される文字列データです。ウェブサイトにログインするときに使われたり、情報をリクエストしたり、注文の確認をできるようにしたり、ウェブメールでつかったりなどです。そのような場合、 <code>email</code> 入力型は、ユーザーインターフェイスやメールアドレスの処理の構築作業を簡略化することができるので、ウェブ開発者の仕事をはるかに楽にすることができます。メールアドレスの入力欄を、 <code>type</code> の値を正しく <code>email</code> にして作成すれば、入力された文字列が少なくとも合法のメールアドレスである可能性がある但し書式であることを自動的に検証してくれます。これにより、ユーザーがアドレスを打ち間違えたり、無効なアドレスを入力したりすることを防ぐのに役立ちます。</p> + +<p>しかし、指定された文字列が、実際に存在するメールアドレスであるかどうか、サイトのユーザーに一致するか、他の方法で利用できるかを保証するには不十分です。単に入力欄の値がメールアドレスの形式に沿っているかを保証するだけです。</p> + +<div class="note"> +<p><strong>注</strong>: ユーザーが HTML をその場面の裏でいじることができることを意識しておくことは極めて重要です。ですから、安全を目的として、サイトでクライアント側の値検証機能のみを使用しては<em>いけません</em>。何らかのセキュリティ上の問題を含む可能性がある値が提供されるトランザクションの場合は、いずれもサーバー側で値検証を行う<em>必要があります</em>。</p> +</div> + +<h3 id="A_simple_email_input" name="A_simple_email_input">単純な email 型の入力欄</h3> + +<p>現在、この要素を実装しているすべてのブラウザーが、これを基本的な検証機能がついた標準のテキスト入力欄として実装しています。しかし、仕様書ではブラウザーに自由度を許容しています。例えば、この要素はユーザーの端末に内蔵されたアドレス帳と統合され、メールアドレスをリストから選ぶことができるようにすることも可能です。多くの基本的なフォームでは、 <code>email</code> 入力欄は次のように実装されています。</p> + +<pre class="brush: html notranslate"><input id="emailAddress" type="email"></pre> + +<p>{{ EmbedLiveSample('A_simple_email_input', 600, 40) }}</p> + +<p>なお、妥当と判断されるのは空欄の場合と、単一の妥当な書式のメールアドレスが入力されている場合で、それ以外は妥当であるとは判断されません。 {{htmlattrxref("required", "input")}} 属性を追加することで、妥当な書式のメールアドレスのみが許容されるようになり、空欄の場合は妥当であるとは判断されなくなります。</p> + +<h3 id="Allowing_multiple_e-mail_addresses" name="Allowing_multiple_e-mail_addresses">複数のメールアドレスの許可</h3> + +<p><code><a href="/ja/docs/Web/HTML/Attributes/multiple">multiple</a></code> 論理属性を追加することで、入力欄に複数のメールアドレスを受け付けるよう構成することができます。</p> + +<pre class="brush: html notranslate"><input id="emailAddress" type="email" multiple></pre> + +<p>{{ EmbedLiveSample('Allowing_multiple_e-mail_addresses', 600, 40) }}</p> + +<p>入力欄は単一のメールアドレスが入力された時や、任意の数のメールアドレスをカンマ区切りで入力した場合、その中にホワイトスペース文字がある場合も有効として扱われるようになります。</p> + +<div class="note"> +<p><strong>注</strong>: <code>multiple</code> が使用されると、値を空欄にすることが許可されます。</p> +</div> + +<p><code>multiple</code> が指定された場合に有効な文字列の例をいくつか示します。</p> + +<ul> + <li><code>""</code></li> + <li><code>"me@example"</code></li> + <li><code>"me@example.org"</code></li> + <li><code>"me@example.org,you@example.org"</code></li> + <li><code>"me@example.org, you@example.org"</code></li> + <li><code>"me@example.org,you@example.org, us@example.org"</code></li> +</ul> + +<p>無効な文字列の例をいくつか示します。</p> + +<ul> + <li><code>","</code></li> + <li><code>"me"</code></li> + <li><code>"me@example.org you@example.org"</code></li> +</ul> + +<h3 id="Placeholders" name="Placeholders">プレイスホルダー</h3> + +<p>フォームがどのような入力データを取るのかについての行内のヒントを提供すると、有益なことがあります。これはページのデザインでそれぞれの {{HTMLElement("input")}} に説明のラベルを付けることができない場合に特に重要になります。ここで<strong>プレイスホルダー</strong>が登場します。プレイスホルダーは、入力される <code>value</code> が取るべき値の形式を、有効な値の例を示すことで表現する値であり、 <code>value</code> が "" の時に入力欄の中に表示されます。入力欄にデータが入力されると、プレイスホルダーは非表示になり、入力欄が空欄になると、プレイスホルダーは再度表示されます。</p> + +<p>ここで、 <code>email</code> 入力欄に <code>sophie@example.com</code> というプレイスホルダーを設定します。なお、入力欄の中身を操作すると、プレイスホルダーが非表示になったり再表示されたりします。</p> + +<pre class="brush: html notranslate"><input type="email" placeholder="sophie@example.com"></pre> + +<p>{{ EmbedLiveSample('Placeholders', 600, 40) }}</p> + +<h3 id="Controlling_the_input_size" name="Controlling_the_input_size">入力欄の寸法の制御</h3> + +<p>入力ボックスの物理的な長さだけでなく、入力された文字列自身の許容される最小長および最大長も制御することができます。</p> + +<h4 id="Physical_input_element_size" name="Physical_input_element_size">物理的な入力欄の寸法</h4> + +<p>入力ボックスの物理的な寸法は、入力ボックスの {{htmlattrxref("size", "input")}} 属性を使用して制御することができます。これにより、入力ボックスが同時に表示することができる文字数を指定することができます。この例では <code>email</code> 入力ボックスは15文字分の幅になります。</p> + +<pre class="brush: html notranslate"><input type="email" size="15"></pre> + +<p>{{ EmbedLiveSample('Physical_input_element_size', 600, 40) }}</p> + +<h4 id="Element_value_length" name="Element_value_length">要素の値の長さ</h4> + +<p><code>size</code> は入力されたメールアドレスの長さ制限からは独立しており、フィールドを小さい空間に収めることができますが、より長いメールアドレス文字列が入力できます。入力されたメールアドレスの最小文字数は {{htmlattrxref("minlength", "input")}} 属性を使用して、同様に入力されたメールアドレスの最大文字数は {{htmlattrxref("maxlength", "input")}} を使用して設定することができます。</p> + +<p>以下の例は32文字の幅で、内容は3文字より短くなったり、64文字より長くなったりしないようにする必要があるメールアドレス入力ボックスを生成します。</p> + +<pre class="brush: html notranslate"><input type="email" size="32" minlength="3" maxlength="64"></pre> + +<p>{{EmbedLiveSample("Element_value_length", 600, 40) }}</p> + +<h3 id="Providing_default_options" name="Providing_default_options">既定のオプションの提供</h3> + +<p>これまでどおり、 {{htmlattrxref("value", "input")}} 属性を設定することで <code>email</code> 入力欄に既定値を指定することができます。</p> + +<div id="Default_value"> +<pre class="brush: html notranslate"><input type="email" value="default@example.com"></pre> +</div> + +<p>{{EmbedLiveSample("Default_value", 600, 40)}}</p> + +<h4 id="Offering_suggested_values" name="Offering_suggested_values">サジェスト値の提供</h4> + +<p>Taking it a step farther, you can provide a list of default options from which the user can select by specifying the {{htmlattrxref("list", "input")}} attribute. This doesn't limit the user to those options, but does allow them to select commonly-used e-mail addresses more quickly. This also offers hints to {{htmlattrxref("autocomplete", "input")}}. The <code>list</code> attribute specifies the ID of a {{HTMLElement("datalist")}}, which in turn contains one {{HTMLElement("option")}} element per suggested value; each <code>option</code>'s <code>value</code> is the corresponding suggested value for the email entry box.</p> + +<pre class="brush: html notranslate"><input type="email" size="40" list="defaultEmails"> + +<datalist id="defaultEmails"> + <option value="jbond007@mi6.defence.gov.uk"> + <option value="jbourne@unknown.net"> + <option value="nfury@shield.org"> + <option value="tony@starkindustries.com"> + <option value="hulk@grrrrrrrr.arg"> +</datalist></pre> + +<p>{{EmbedLiveSample("Offering_suggested_values", 600, 40)}}</p> + +<p>With the {{HTMLElement("datalist")}} element and its {{HTMLElement("option")}}s in place, the browser will offer the specified values as potential values for the e-mail address; this is typically presented as a popup or drop-down menu containing the suggestions. While the specific user experience may vary from one browser to another, typically clicking in the edit box presents a drop-down of the suggested e-mail addresses. Then, as the user types, the list is filtered to show only matching values. Each typed character narrows down the list until the user makes a selection or types a custom value.</p> + +<p><img alt="Animation: Using keyboard entry to filter the list of suggested e-mail addresses" src="https://mdn.mozillademos.org/files/14831/html-input-email1.gif" style="border-style: solid; border-width: 1px; height: 168px; width: 352px;"></p> + +<h2 id="Validation" name="Validation">検証</h2> + +<p>There are two levels of content validation available for <code>email</code> inputs. First, there's the standard level of validation offered to all {{HTMLElement("input")}}s, which automatically ensures that the contents meet the requirements to be a valid e-mail address. But there's also the option to add additional filtering to ensure that your own specialized needs are met, if you have any.</p> + +<div class="warning"> +<p><strong>重要</strong>: HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用にはなりません。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、間違った種類のデータなど) がデータベースに入力された場合に災害が発生するおそれがあります。</p> +</div> + +<h3 id="Basic_validation" name="Basic_validation">基本的な検証</h3> + +<p>Browsers that support the <code>email</code> input type automatically provide validation to ensure that only text that matches the standard format for Internet e-mail addresses is entered into the input box. Browsers that implement the specification should be using an algorithm equivalent to the following regular expression:</p> + +<pre class="brush: js notranslate">/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61} + [a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/ +</pre> + +<p>To learn more about how form validation works and how to take advantage of the {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS properties to style the input based on whether or not the current value is valid, see <a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a>.</p> + +<div class="note"> +<p><strong>Note</strong>: There are known specification issues related to international domain names and the validation of e-mail addresses in HTML. See <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15489">W3C bug 15489</a> for details.</p> +</div> + +<h3 id="Pattern_validation" name="Pattern_validation">パターンによる値検証</h3> + +<p>If you need the entered e-mail address to be restricted further than just "any string that looks like an e-mail address," you can use the {{htmlattrxref("pattern", "input")}} attribute to specify a {{Glossary("regular expression")}} the value must match for it to be valid. If the {{htmlattrxref("multiple", "input")}} attribute is specified, each individual item in the comma-delineated list of values must match the {{Glossary("regular expression")}}.</p> + +<p>For example, let's say you're building a page for employees of Best Startup Ever, Inc. which will let them contact their IT department for help. In our simplified form, the user needs to enter their e-mail address and a message describing the problem they need help with. We want to ensure that not only does the user provide a valid e-mail address, but for security purposes, we require that the address be an internal corporate e-mail address.</p> + +<p>Since inputs of type <code>email</code> validate against both the standard e-mail address validation <em>and</em> the specified {{htmlattrxref("pattern", "input")}}, you can implement this easily. Let's see how:</p> + +<div class="hidden"> +<pre class="brush: css notranslate">body { + font: 16px sans-serif; +} + +.emailBox { + padding-bottom: 20px; +} + +.messageBox { + padding-bottom: 20px; +} + +label { + line-height: 22px; +} + +label::after { + content: ":"; +}</pre> +</div> + +<pre class="brush: html notranslate"><form> + <div class="emailBox"> + <label for="emailAddress">Your e-mail address</label><br> + <input id="emailAddress" type="email" size="64" maxLength="64" required + placeholder="username@beststartupever.com" pattern=".+@beststartupever.com" + title="Please provide only a Best Startup Ever corporate e-mail address"> + </div> + + <div class="messageBox"> + <label for="message">Request</label><br> + <textarea id="message" cols="80" rows="8" required + placeholder="My shoes are too tight, and I have forgotten how to dance."></textarea> + </div> + <input type="submit" value="Send Request"> +</form> +</pre> + +<p>{{EmbedLiveSample("Pattern_validation", 700, 275)}}</p> + +<p>Our {{HTMLElement("form")}} contains one {{HTMLElement("input")}} of type <code>email</code> for the user's e-mail address, a {{HTMLElement("textarea")}} to enter their message for IT into, and an <code><input></code> of type <code><a href="/en-US/docs/Web/HTML/Element/input/submit">"submit"</a></code>, which creates a button to submit the form. Each text entry box has a {{HTMLElement("label")}} associated with it to let the user know what's expected of them.</p> + +<p>Let's take a closer look at the e-mail address entry box. Its {{htmlattrxref("size", "input")}} and {{htmlattrxref("maxlength", "input")}} attributes are both set to 64 in order to show room for 64 characters worth of e-mail address, and to limit the number of characters actually entered to a maximum of 64. The {{htmlattrxref("required", "input")}} attribute is specified, making it mandatory that a valid e-mail address be provided.</p> + +<p>An appropriate {{htmlattrxref("placeholder", "input")}} is provided—<code>username@beststartupever.com</code>—to demonstrate what constitutes a valid entry. This string demonstrates both that an e-mail address should be entered, and suggests that it should be a corporate beststartupever.com account. This is in addition to the fact that using type <code>email</code> will validate the text to ensure that it's formatted like an e-mail address. If the text in the input box isn't an e-mail address, you'll get an error message that looks something like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14855/enter-valid-email-address.png" style="height: 125px; width: 530px;"></p> + +<p>If we left things at that, we would at least be validating on legitimate e-mail addresses. But we want to go one step farther: we want to make sure that the e-mail address is in fact in the form "<em>username</em>@beststartupever.com". This is where we'll use {{htmlattrxref("pattern", "input")}}. We set <code>pattern</code> to <code>.+@beststartupever.com</code>. This simple regular expression requests a string that consists of at least one character of any kind, then an "@" followed by the domain name "beststartupever.com".</p> + +<p>Note that this is not even close to an adequate filter for valid e-mail addresses; it would allow things such as " @beststartupever.com" (note the leading space) or "@@beststartupever.com", neither of which is valid. However, the browser runs both the standard e-mail address filter <em>and</em> our custom pattern against the specified text. As a result, we wind up with a validation which says "make sure this resembles a valid e-mail address, and if it is, make sure it's also a beststartupever.com address."</p> + +<p>It's advisable to use the {{htmlattrxref("title")}} attribute along with <code>pattern</code>. If you do, the <code>title</code> <em>must</em> describe the pattern. That is, it should explain what format the data should take on, rather than any other information. That's because the <code>title</code> may be displayed or spoken as part of a validation error message. For example, the browser might present the message "The entered text doesn't match the required pattern." followed by your specified <code>title</code>. If your <code>title</code> is something like "E-mail address", the result would be the message "The entered text doesn't match the required pattern. E-mail address", which isn't very good.</p> + +<p>That's why, instead, we specify the string "Please provide only a Best Startup Ever corporate e-mail address" By doing that, the resulting full error message might be something like "The entered text doesn't match the required pattern. Please provide only a Best Startup Ever corporate e-mail address."</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14853/email-pattern-match-bad.png" style="height: 140px; width: 536px;"></p> + +<div class="note"> +<p><strong>Note</strong>: If you run into trouble while writing your validation regular expressions and they're not working properly, check your browser's console; there may be helpful error messages there to aid you in solving the problem.</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<p>Here we have an email input with the ID <code>emailAddress</code> which is allowed to be up to a maximum of 256 characters long. The input box itself is physically 64 characters wide, and displays the text <code>user@example.gov</code> as a placeholder anytime the field is empty. In addition, by using the <code><a href="/ja/docs/Web/HTML/Attributes/multiple">multiple</a></code> attribute, the box is configured to allow the user to enter zero or more e-mail addresses, separated by commas, as described in {{anch("Allowing multiple e-mail addresses")}}. As a final touch, the <code><a href="/ja/docs/Web/HTML/Attributes/list">list</a></code> attribute contains the ID of a {{HTMLElement("datalist")}} whose {{HTMLElement("option")}}s specify a set of suggested values the user can choose from.</p> + +<p>As an added touch, the {{HTMLElement("label")}} element is used to establish a label for the email entry box, with its {{htmlattrxref("for", "label")}} attribute referencing the <code>emailAddress</code> ID of the {{HTMLElement("input")}} element. By associating the two elements in this way, clicking on the label will focus the input element.</p> + +<pre class="brush: html notranslate"><label for="emailAddress">Email</label><br/> +<input id="emailAddress" type="email" placeholder="user@example.gov" + list="defaultEmails" size="64" maxlength="256" multiple> + +<datalist id="defaultEmails"> + <option value="jbond007@mi6.defence.gov.uk"> + <option value="jbourne@unknown.net"> + <option value="nfury@shield.org"> + <option value="tony@starkindustries.com"> + <option value="hulk@grrrrrrrr.arg"> +</datalist></pre> + +<p>{{EmbedLiveSample('Examples', 600, 50)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#email-state-(type=email)', '<input type="email">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>{{SpecName('HTML5.1', 'sec-forms.html#email-state-typeemail', '<input type="email">')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.input.input-email")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Forms">HTML フォームガイド</a></li> + <li>{{HTMLElement("input")}}</li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/tel"><input type="tel"></a></code></li> + <li><code><a href="/en-US/docs/Web/HTML/Element/input/url"><input type="url"></a></code></li> + <li>Attributes: + <ul> + <li><code><a href="/en-US/docs/Web/HTML/Attributes/list">list</a></code></li> + <li><code><a href="/en-US/docs/Web/HTML/Attributes/minlength">minlength</a></code></li> + <li><code><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code></li> + <li><code><a href="/en-US/docs/Web/HTML/Attributes/multiple">multiple</a></code></li> + <li><code><a href="/en-US/docs/Web/HTML/Attributes/pattern">pattern</a></code></li> + <li><code><a href="/en-US/docs/Web/HTML/Attributes/placeholder">placeholder</a></code></li> + <li><code><a href="/en-US/docs/Web/HTML/Attributes/readonly">readonly</a></code></li> + <li><code><a href="/en-US/docs/Web/HTML/Attributes/size">size</a></code></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls">Compatibility of CSS properties</a></li> +</ul> diff --git a/files/ja/web/html/element/input/file/index.html b/files/ja/web/html/element/input/file/index.html new file mode 100644 index 0000000000..9b9821000c --- /dev/null +++ b/files/ja/web/html/element/input/file/index.html @@ -0,0 +1,523 @@ +--- +title: <input type="file"> +slug: Web/HTML/Element/input/file +tags: + - Directory Picker + - File + - File Picker + - Files + - Form input + - HTML + - HTML forms + - Input Type + - Reference + - Type +translation_of: Web/HTML/Element/input/file +--- +<div>{{HTMLRef("Input_types")}}</div> + +<p><span class="seoSummary"><strong><code>type="file"</code></strong> 型の {{HTMLElement("input")}} 要素は、ユーザーが一つまたは複数のファイルを端末のストレージから選択することができるようにします。選択されると、ファイルは<a href="/ja/docs/Learn/HTML/Forms">フォーム投稿</a>を使用してサーバーにアップロードしたり、 JavaScript コードと <a href="/ja/docs/Web/API/File/Using_files_from_web_applications">File API</a> を使用して操作したりすることができます。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-file.html", "tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value", "値")}}</strong></td> + <td>選択されたファイルのパスを表す {{domxref("DOMString")}} です。</td> + </tr> + <tr> + <td><strong>イベント</strong></td> + <td>{{domxref("HTMLElement/change_event", "change")}} および {{domxref("HTMLElement/input_event", "input")}}</td> + </tr> + <tr> + <td><strong>対応する共通属性</strong></td> + <td>{{htmlattrxref("required", "input")}}</td> + </tr> + <tr> + <td><strong>追加の属性</strong></td> + <td>{{htmlattrxref("accept", "input/file")}}, {{htmlattrxref("capture", "input/file")}}, {{htmlattrxref("files", "input/file")}}, {{htmlattrxref("multiple", "input/file")}}</td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>files</code> および <code>value</code></td> + </tr> + <tr> + <td><strong>DOM インターフェイス</strong></td> + <td> + <p>{{domxref("HTMLInputElement")}}</p> + </td> + </tr> + <tr> + <td><strong>プロパティ</strong></td> + <td> + <p><a href="/ja/docs/Web/API/HTMLInputElement#Properties_file"><code>file</code> 型の要素にだけ適用されるプロパティ</a></p> + </td> + </tr> + <tr> + <td><strong>メソッド</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value" name="Value">値</h2> + +<p>ファイル入力欄の {{htmlattrxref("value", "input")}} 属性には、選択されたファイルへのパスを表す {{domxref("DOMString")}} が入ります。ユーザーが複数のファイルを選択すると、 <code>value</code> は選択されたファイルのリストのうち最初のファイルを表します。その他のファイルは input 要素の <code>HTMLInputElement.files</code> プロパティを使って得ることができます。</p> + +<div class="note"><strong>注:</strong> + +<ol> + <li>複数のファイルが選択された場合、文字列は最初に選択されたファイルを表します。 JavaScript は他のファイルに <a href="/ja/docs/Using_files_from_web_applications#Getting_information_about_selected_files">input の <code>FileList</code> プロパティを通して</a>アクセスすることができます。</li> + <li>ファイルが選択されていない場合、文字列は <code>""</code> (空) になります。</li> + <li>疑わしいソフトウェアがユーザーのファイル構造を推測することを防止するため、文字列には <a href="https://html.spec.whatwg.org/multipage/input.html#fakepath-srsly"><code>C:\fakepath\</code> の接頭辞が付きます</a>。</li> +</ol> +</div> + +<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2> + +<p>すべての {{HTMLElement("input")}} に共通の属性に加え、 <code>file</code> 型の入力欄は次の属性にも対応しています。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("accept")}}</code></td> + <td>許可するファイル型を表す1つ以上の{{anch("Unique file type specifiers", "固有ファイル型指定子")}}</td> + </tr> + <tr> + <td><code>{{anch("capture")}}</code></td> + <td>画像や動画データをキャプチャするのに使用するソースは何か</td> + </tr> + <tr> + <td><code>{{anch("files")}}</code></td> + <td>選択されたファイルを列挙する {{domxref("FileList")}}</td> + </tr> + <tr> + <td><code>{{anch("multiple")}}</code></td> + <td>論理値で、存在すれば、ユーザーが複数のファイルを選択することができることを表す</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefaccept">{{htmlattrdef("accept")}}</h3> + +<p><a href="/ja/docs/Web/HTML/Attributes/accept"><code>accept</code></a> 属性の値は文字列で、ファイル入力欄が受け付けるファイル型を定義します。この文字列は<strong>{{anch("Unique file type specifiers", "固有ファイル型指定子")}}</strong>をカンマで区切ったリストです。指定されたファイル型が複数の方法で識別されることがあるので、指定された形式のファイルが必要な場合は一連の型指定子を提供するといいでしょう。</p> + +<p>例えば、 Microsoft Word ファイルを識別する方法がいくつもあるので、 Word ファイルを受け付けるサイトは次のように <code><input></code> を使用することがあります。</p> + +<pre class="brush: html notranslate"><input type="file" id="docpicker" + accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"></pre> + +<h3 id="htmlattrdefcapture">{{htmlattrdef("capture")}}</h3> + +<p><a href="/ja/docs/Web/HTML/Attributes/capture"><code>capture</code></a> 属性は文字列で、 <a href="/ja/docs/Web/HTML/Attributes/accept"><code>accept</code></a> 属性で入力が画像または映像データであると示した場合、これらのデータを取り込むためにどのカメラを使用するかを指定します。 <code>user</code> の値では、ユーザーの方を向いているカメラやマイクを使用します。 <code>environment</code> は外側を向いたカメラやマイクを使用します。この属性がない場合、{{Glossary("user agent", "ユーザーエージェント")}}は何をするかを自分で自由に決めます。要求された方向が有効ではない場合、ユーザーエージェントは推奨される既定のモードで代用します。</p> + +<div class="note"><strong>注:</strong> <code>capture</code> は以前は論理値であり、存在した場合、ファイル入力を要求する代わりに、カメラやマイクなどその端末のメディア取り込み機器を使用するように要求していました。</div> + +<h3 id="htmlattrdeffiles">{{htmlattrdef("files")}}</h3> + +<p>{{domxref("FileList")}} オブジェクトで、選択されたそれぞれのファイルのリストです。このリストは {{htmlattrxref("multiple", "input/file")}} 属性が指定されていない限り、メンバーが複数にはなりません。</p> + +<h3 id="htmlattrdefmultiple">{{htmlattrdef("multiple")}}</h3> + +<p><a href="/ja/docs/Web/HTML/Attributes/multiple"><code>multiple</code></a> 論理属性が指定されていると、ファイル入力欄はユーザーに複数のファイルを選択することを許します。</p> + +<h2 id="Non-standard_attributes" name="Non-standard_attributes">標準外の属性</h2> + +<p>上記に挙げた属性に加え、以下の標準外の属性が一部のブラウザーで利用できます。実装していないブラウザーではコードが機能する可能性が制限されるため、できれば使用することを避けてください。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("webkitdirectory")}}</code></td> + <td>論理値で、ユーザーが単一のディレクトリ (または <code>{{anch("multiple")}}</code> 属性がある場合は複数のディレクトリ) のみを選択できるようにするかどうかを選択します。</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefwebkitdirectory_non-standard_inline">{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}</h3> + +<div id="webkitdirectory-include"> +<p>論理値の <code>webkitdirectory</code> 属性は、もし存在する場合は、ファイル選択インターフェイスでユーザーがディレクトリのみを選択することができることを示します。詳しい解説と例については {{domxref("HTMLInputElement.webkitdirectory")}} を参照してください。</p> + +<div class="note"> +<p><strong>注:</strong> <code>webkitdirectory</code> はもともと WebKit ベースのブラウザー向けのみに実装されたものですが、 Microsoft Edge や Firefox 50 以降でも使用できます。しかし、比較的広く対応されていますが、まだ標準になっておらず、代替手段がない限りは使用するべきではありません。</p> +</div> +</div> + +<h2 id="Unique_file_type_specifiers" name="Unique_file_type_specifiers">固有ファイル型指定子</h2> + +<p><strong>固有ファイル型指定子</strong>は文字列で、 <code>file</code> 型の {{HTMLElement("input")}} 要素でユーザーが選択することができるファイルの種類を記述します。それぞれの固有ファイル型指定子は、次の形のうち一つを取ることができます。</p> + +<ul> + <li>有効なファイル拡張子で、大文字小文字の区別なく、ピリオド (".") 文字で始まるもの。例えば、 <code>.jpg</code>, <code>.pdf</code>, <code>.doc</code> など。</li> + <li>有効な MIME タイプ文字列で、拡張子のないもの。</li> + <li>文字列 <code>audio/*</code> で「任意の音声ファイル」を意味する。</li> + <li>文字列 <code>video/*</code> で「任意の動画ファイル」を意味する。</li> + <li>文字列 <code>image/*</code> で「任意の画像ファイル」を意味する。</li> +</ul> + +<p><code>accept</code> 属性は、これらの固有ファイル型指定子を1つ以上含む文字列を取ります。例えば、ファイル選択ダイアログが画像として表示することができるコンテンツを必要としており、標準の画像形式と PDF ファイルの両方を含める場合、このようになります。</p> + +<pre class="brush: html notranslate"><input type="file" accept="image/*,.pdf"></pre> + +<h2 id="Using_file_inputs" name="Using_file_inputs">ファイル入力欄の使用</h2> + +<h3 id="A_basic_example" name="A_basic_example">基本的な例</h3> + +<pre class="brush: html notranslate"><form method="post" enctype="multipart/form-data"> + <div> + <label for="file">アップロードするファイルを選択してください</label> + <input type="file" id="file" name="file" multiple> + </div> + <div> + <button>送信</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; +}</pre> +</div> + +<p>これは以下のような出力になります。</p> + +<p>{{EmbedLiveSample('A_basic_example', 650, 60)}}</p> + +<div class="note"> +<p><strong>注</strong>: この例は GitHub にもあります。 — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html">ソースコード</a>と<a href="https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html">ライブ実行</a>を確認してください。</p> +</div> + +<p>ユーザーの端末やオペレーティングシステムに関わらず、ファイル入力欄にはユーザーがファイルを選択することができるファイル選択ダイアログを開くボタンがあります。</p> + +<p>上記のように、 {{htmlattrxref("multiple", "input/file")}} 属性を含めると、複数のファイルを一度に選択することができることを指定します。ユーザーはファイル選択ダイアログから、プラットフォームが許す方法 (例えば、 <kbd>Shift</kbd> または <kbd>Control</kbd> を押しながらクリック) によって、複数のファイルを選択できます。ユーザーに <code><input></code> あたり1つのファイルを選択させたい場合は、 <code>multiple</code> 属性を省略してください。</p> + +<h3 id="Getting_information_on_selected_files" name="Getting_information_on_selected_files">選択されたファイルの情報の取得</h3> + +<p>選択されたファイルは、要素の {{domxref("HTMLElement.files", "files")}} プロパティで返され、これは {{domxref("File")}} オブジェクトのリストを含む {{domxref("FileList")}} オブジェクトです。 <code>FileList</code> は配列のようにふるまうので、 <code>length</code> プロパティを使用して選択されたファイルの数を取得することができます。</p> + +<p>それぞれの <code>File</code> オブジェクトは以下のような情報を持っています。</p> + +<dl> + <dt><code>name</code></dt> + <dd>ファイルの名前です。</dd> + <dt><code>lastModified</code></dt> + <dd>ファイルが最後に変更された日時を表す数値で、 UNIX 時刻 (1970年1月1日午前0時) からの経過ミリ秒数です。</dd> + <dt><code>lastModifiedDate</code> {{deprecated_inline}}</dt> + <dd>ファイルが最後に変更された日時を表す {{jsxref("Date")}} オブジェクトです。<em>これは非推奨であり使うべきではありません。代わりに <code>lastModified</code> を使用してください。</em></dd> + <dt><code>size</code></dt> + <dd>バイト数によるファイルの長さです。</dd> + <dt><code>type</code></dt> + <dd>ファイルの <a href="/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME タイプ</a>です。</dd> + <dt><code>webkitRelativePath</code> {{non-standard_inline}}</dt> + <dd>ディレクトリ選択ダイアログ (つまり、 {{htmlattrxref("webkitdirectory", "input/file")}} 属性が設定されている <code>file</code> ダイアログ) で選択されたベースディレクトリからのファイルの相対パスを表す文字列です。<em>これは標準外なので使用するには注意してください。</em></dd> +</dl> + +<div class="note"> +<p><strong>注</strong>: 最近のブラウザーはすべて、 <code>HTMLInputElement.files</code> の値を取得だけではなく設定もできるようになっています。これが最も後に追加されたのは Firefox で、バージョン57で追加されました (see {{bug(1384030)}})。</p> +</div> + +<h3 id="Limiting_accepted_file_types" name="Limiting_accepted_file_types">受け付けるファイル型の制限</h3> + +<p>ふつう、ユーザーが自由な形式のファイルを選択できるようにはしたくないでしょう。代わりに、特定の形式のファイルを選択させたいでしょう。例えば、ファイル入力欄でユーザーにプロフィールファイルをアップロードさせるのであれば、おそらく {{Glossary("JPEG")}} または {{Glossary("PNG")}} のようなウェブに互換性がある画像形式を選択させたいでしょう。</p> + +<p>受付可能なファイル形式は {{htmlattrxref("accept","input/file")}} 属性で、受け付けるファイルの拡張子または MIME タイプいくつか例を示します。</p> + +<ul> + <li><code>accept="image/png"</code> または <code>accept=".png"</code> — PNG ファイルを受け付けます。</li> + <li><code>accept="image/png, image/jpeg"</code> または <code>accept=".png, .jpg, .jpeg"</code> — PNG または JPEG ファイルを受け付けます。</li> + <li><code>accept="image/*"</code> — <code>image/*</code> の MIME タイプである任意のファイルを受け付けます。 (多くのモバイル端末では、この場合にユーザーがカメラで写真を撮ることもできるようになっています。)</li> + <li><code>accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"</code> — MS Word 文書と思われるファイルをすべて受け付けます。</li> +</ul> + +<p>もっと複雑な例を見てみましょう。</p> + +<pre class="brush: html notranslate"><form method="post" enctype="multipart/form-data"> + <div> + <label for="profile_pic">アップロードするファイルを選択してください</label> + <input type="file" id="profile_pic" name="profile_pic" + accept=".jpg, .jpeg, .png"> + </div> + <div> + <button>送信</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; +}</pre> +</div> + +<p>これは前回の例と似た外見の出力をします。</p> + +<p>{{EmbedLiveSample('Limiting_accepted_file_types', 650, 60)}}</p> + +<div class="note"> +<p><strong>注</strong>: この例は GitHub にもあります。 — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-with-accept.html">ソースコード</a>と<a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-with-accept.html">ライブ実行</a>を確認してください。</p> +</div> + +<p>同じように見えるかもしれませんが、この入力欄でファイルを選択しようとすると、このファイル選択ダイアログでは <code>accept</code> の値で指定されたファイル形式しか選択できません。 (細かい動きはブラウザーやオペレーティングシステムによって異なります)。</p> + +<p><img alt="macOS のファイル選択ダイアログのスクリーンショットです。 JPEG 以外のファイルは灰色になり選択できません。" src="https://mdn.mozillademos.org/files/15183/file-chooser.png" style="margin: 0 auto;"></p> + +<p><code>accept</code> 属性は選択されたファイルの形式を検証しません。単にブラウザーにユーザーが正しいファイル形式を選択するためのガイドするためのヒントを出すだけです。 (多くの場合) ユーザーがファイル選択ダイアログオプションを切り替えることで、ファイル選択ダイアログがこの設定を上書きして任意のファイルを選択することができるので、不正なファイル形式を選択する可能性があります。</p> + +<p>このため、 <code>accept</code> 属性は適切なサーバー側の検証でバックアップする必要があることを意識しておいてください。</p> + +<h3 id="Notes" name="Notes">注</h3> + +<ol> + <li> + <p>スクリプトからファイル選択ダイアログの値を設定することはできません。 — 以下のようにしても効果はありません。</p> + + <pre class="brush: js notranslate">const input = document.querySelector("input[type=file]"); +input.value = "foo"; +</pre> + </li> + <li> + <p><code><input type="file"></code> を使用してファイルが選択された場合、セキュリティ上の理由から、元のファイルへの実際のパスが <code>value</code> 属性上では見えないようになっています。その代わりに、ファイル名の先頭に <code>C:\fakepath\</code> を追加したものが表示されます。この処置にはいくつかの経緯上の理由がありますが、すべての最新のブラウザーで対応されており、実際に<a href="https://html.spec.whatwg.org/multipage/forms.html#fakepath-srsly">仕様書で定義されています</a>。</p> + </li> +</ol> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例では、この例では、 {{domxref("HTMLInputElement.files")}} プロパティで利用できるファイル情報を利用する、さらに高度なファイル選択ダイアログを示し、またいくつか巧妙なテクニックを示します。</p> + +<div class="note"> +<p><strong>注</strong>: この例の完全なソースコードは GitHub — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html">file-example.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html">ライブ版もあります</a>) で見ることができます。 CSS については説明しません。 JavaScript が中心です。</p> +</div> + +<p>最初に、 HTML を見てみましょう。</p> + +<pre class="brush: html notranslate"><form method="post" enctype="multipart/form-data"> + <div> + <label for="image_uploads">アップロードする画像を選択してください (PNG, JPG)</label> + <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple> + </div> + <div class="preview"> + <p>アップロードするファイルが選択されていません</p> + </div> + <div> + <button>送信</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +form { + width: 580px; + background: #ccc; + margin: 0 auto; + padding: 20px; + border: 1px solid black; +} + +form ol { + padding-left: 0; +} + +form li, div > p { + background: #eee; + display: flex; + justify-content: space-between; + margin-bottom: 10px; + list-style-type: none; + border: 1px solid black; +} + +form img { + height: 64px; + order: 1; +} + +form p { + line-height: 32px; + padding-left: 10px; +} + +form label, form button { + background-color: #7F9CCB; + padding: 5px 10px; + border-radius: 5px; + border: 1px ridge black; + font-size: 0.8rem; + height: auto; +} + +form label:hover, form button:hover { + background-color: #2D5BA3; + color: white; +} + +form label:active, form button:active { + background-color: #0D3F8F; + color: white; +}</pre> +</div> + +<p>これは以前見たものに似ています。特筆するべきものはありません。</p> + +<p>次に、 JavaScript を一通り見てみましょう。</p> + +<p>スクリプトの最初の行で、フォームの入力欄自体と <code>.preview</code> クラスが設定された {{htmlelement("div")}} 要素の参照を取得します。次に {{htmlelement("input")}} 要素を非表示にします。 — これは、ファイル入力欄が概して醜く、スタイル付けをするのが難しく、ブラウザー間でデザインに一貫性がないからです。 {{htmlelement("label")}} をクリックすることで <code>input</code> 要素をアクティブ化することができるので、 <code>input</code> 要素を見かけは非表示にしてラベルをボタンらしくしたほうが、ユーザーがファイルをアップロードしたいときの操作が分かります。</p> + +<pre class="brush: js notranslate">const input = document.querySelector('input'); +const preview = document.querySelector('.preview'); + +input.style.opacity = 0;</pre> + +<div class="note"> +<p><strong>注:</strong> ファイル入力欄を非表示にするのに {{cssxref("visibility", "visibility: hidden")}} や {{cssxref("display", "display: none")}} ではなく {{cssxref("opacity")}} を使用しているのは、支援技術が前二者のファイル入力欄が対話可能ではないと解釈するからです。</p> +</div> + +<p>次に、<a href="/ja/docs/Web/API/EventTarget/addEventListener">イベントリスナー</a>を入力欄に追加して、選択された値の変化 (この場合、ファイルが選択されたこと) を監視します。イベントリスナーは独自の <code>updateImageDisplay()</code> 関数を呼び出します。</p> + +<pre class="brush: js notranslate">input.addEventListener('change', updateImageDisplay);</pre> + +<p><code>updateImageDisplay()</code> 関数が呼び出されるたびに、以下のことを行います。</p> + +<ul> + <li>{{jsxref("Statements/while", "while")}} ループを使ってプレビューの <code><div></code> の中にある以前のコンテンツを空にします。</li> + <li>選択されたすべてのファイルの情報を持つ {{domxref("FileList")}} オブジェクトを取り、 <code>curFiles</code> と呼ばれる変数に保存します。</li> + <li><code>curFiles.length</code> が0かどうかをチェックすることで、ファイルが選択されていないかを確認します。選択されていない場合は、プレビューの <code><div></code> に選択されているファイルがない旨のメッセージを表示します。</li> + <li>ファイルが選択されて<em>いた</em>場合、ループで1つずつ、プレビューの <code><div></code> にそれについての情報を表示します。特筆するべきは次です。</li> + <li>独自の <code>validFileType()</code> 関数を使用して、ファイルが正しい形式 (つまり、 <code>accept</code> 属性で指定された画像形式) であるかどうかをチェックします。</li> + <li>そうであるなら、次のことを行います。 + <ul> + <li>ファイルの名前とファイルの長さを、前述の <code><div></code> (<code>file.name</code> および <code>file.size</code> で取得) 内のリストアイテムに出力します。独自の <code>returnFileSize()</code> 関数はファイルの長さを バイト/KB/MB のうち適切な形式で返します (既定でブラウザーは長さを絶対的なバイトで返します)。</li> + <li>{{domxref("URL.createObjectURL", "URL.createObjectURL(curFiles[i])")}} を呼び出して、画像のプレビューのサムネイルを生成します。次に、新しい {{htmlelement("img")}} を生成し、その {{htmlattrxref("src", "img")}} をサムネイルに設定することで、リスト項目にも画像を挿入します。</li> + </ul> + </li> + <li>ファイル形式が無効である場合、リストのアイテム内にメッセージを表示して、ユーザーに別なファイル形式を選択する必要があることを伝えます。</li> +</ul> + +<pre class="brush: js notranslate">function updateImageDisplay() { + while(preview.firstChild) { + preview.removeChild(preview.firstChild); + } + + const curFiles = input.files; + if(curFiles.length === 0) { + const para = document.createElement('p'); + para.textContent = 'アップロードするファイルが選択されていません'; + preview.appendChild(para); + } else { + const list = document.createElement('ol'); + preview.appendChild(list); + + for(const file of curFiles) { + const listItem = document.createElement('li'); + const para = document.createElement('p'); + if(validFileType(file)) { + para.textContent = `ファイル名: ${file.name}, ファイルの長さ: ${returnFileSize(file.size)}.`; + const image = document.createElement('img'); + image.src = URL.createObjectURL(file); + + listItem.appendChild(image); + listItem.appendChild(para); + } else { + para.textContent = `ファイル名: ${file.name}: ファイル形式が有効ではありません。選択しなおしてください。`; + listItem.appendChild(para); + } + + list.appendChild(listItem); + } + } +}</pre> + +<p>独自の <code>validFileType()</code> 関数は {{domxref("File")}} オブジェクトを引数として取り、それから {{jsxref("Array.prototype.includes()")}} を使用して、 <code>fileTypes</code> の中の値にファイルの <code>type</code> プロパティに一致するものがあるかどうかをチェックします。一致するものが見つかった場合は、関数は <code>true</code> を返します。一致するものが見つからなければ、 <code>false</code> を返します。</p> + +<pre class="brush: js notranslate">// https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types +const fileTypes = [ + "image/apng", + "image/bmp", + "image/gif", + "image/jpeg", + "image/pjpeg", + "image/png", + "image/svg+xml", + "image/tiff", + "image/webp", + "image/x-icon" +]; + +function validFileType(file) { + return fileTypes.includes(file.type); +}</pre> + +<p><code>returnFileSize()</code> 関数は数値 (現在のファイルの <code>size</code> プロパティから取得したバイト数) を取り、バイト/KB/MB のうち適切な形式で返します。</p> + +<pre class="brush: js notranslate">function returnFileSize(number) { + if(number < 1024) { + return number + 'bytes'; + } else if(number >= 1024 && number < 1048576) { + return (number/1024).toFixed(1) + 'KB'; + } else if(number >= 1048576) { + return (number/1048576).toFixed(1) + 'MB'; + } +}</pre> + +<p>この例は次のようにできます。使ってみましょう。</p> + +<p>{{EmbedLiveSample('Examples', '100%', 200)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#file-upload-state-(type=file)', '<input type="file">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>初回定義</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#file-upload-state-typefile', '<input type="file">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>初回定義</td> + </tr> + <tr> + <td>{{SpecName('HTML Media Capture', '#the-capture-attribute','capture attribute')}}</td> + <td>{{Spec2('HTML Media Capture')}}</td> + <td>initial <code>capture</code> attribute</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.input.input-file")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/File/Using_files_from_web_applications">ウェブアプリケーションからのファイルの利用</a> — <code><input type="file"></code> および <a href="/ja/docs/Web/API/File">File API</a> に関するたくさんの有用な例も含まれています。</li> + <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li> +</ul> diff --git a/files/ja/web/html/element/input/hidden/index.html b/files/ja/web/html/element/input/hidden/index.html new file mode 100644 index 0000000000..c0f6d0fe0d --- /dev/null +++ b/files/ja/web/html/element/input/hidden/index.html @@ -0,0 +1,228 @@ +--- +title: <input type="hidden"> +slug: Web/HTML/Element/input/hidden +tags: + - Element + - Forms + - HTML + - HTML forms + - Input + - Input Types + - Reference + - hidden +translation_of: Web/HTML/Element/input/hidden +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <strong><code>hidden</code></strong> 型は、フォームの送信時にユーザーが見たり変更したりすることができないデータをウェブ開発者が含めることができます。例えば、現在注文中又は編集中の ID や、一意のセキュリティトークンなどに利用できます。隠し入力欄はページの表示で完全に非表示になり、ページの中で表示させる方法はありません。</span></p> + +<div class="note"> +<p><strong>注</strong>: 以下のコードにはライブサンプルがあります。正しく動作していれば、何も見えないはずです。</p> +</div> + +<div id="Basic_example"> +<pre class="brush: html notranslate"><input id="prodId" name="prodId" type="hidden" value="xm234jq"></pre> + +<p>{{ EmbedLiveSample('Basic_example', 600, 40) }}</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value", "値")}}</strong></td> + <td>サーバーに送り返したい隠しデータの値を表す {{domxref("DOMString")}}。</td> + </tr> + <tr> + <td><strong>イベント</strong></td> + <td>なし。</td> + </tr> + <tr> + <td><strong>対応する共通属性</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}</td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>メソッド</strong></td> + <td>なし。</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>注</strong>: {{domxref("HTMLElement/input_event", "input")}} および {{domxref("HTMLElement/change_event", "change")}} の各イベントは、この入力型には適用されません。隠し入力欄は JavaScript (<code>hiddenInput.focus()</code> など) を使用してもフォーカスを与えることはできません。</p> +</div> + +<h2 id="Value" name="Value">値</h2> + +<p>{{HTMLElement("input")}} 要素の {{htmlattrxref("value", "input")}} 属性は、フォームをサーバーに送信する時に含めたい隠しデータを含みます。これは特に、ユーザーインターフェイスを通じで編集したり確認したりすることはできませんが、ブラウザーの開発者ツールから値を編集することはできます。</p> + +<div class="warning"> +<p>ページのコンテンツ内では値がユーザーに表示されませんが、ブラウザーの開発者ツールや「ソースを表示」機能を使用して、見たり編集したりすることができます。 <code>hidden</code> の入力欄をセキュリティの形として当てにしないでください。</p> +</div> + +<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2> + +<p>すべての {{HTMLElement("input")}} 要素で共通する属性に加え、 <code>hidden</code> 型の入力欄は次の属性にも対応しています。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("name")}}</code></td> + <td>他の入力型と同様、フォームを送信した場合に報告される入力欄の名前です。特殊な値 <code>_charset_</code> は、その入力欄の値がフォームの送信に使用される文字エンコーディングとして報告されます。</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefname">{{htmlattrdef("name")}}</h3> + +<p>これは実際には共通の属性の一つですが、隠し入力欄では特別な用途を持っています。通常、 {{htmlattrxref("name", "input")}} 属性は隠し属性でも他の入力欄と同様に機能します。しかし、フォームが送信された時、 <code>name</code> が <code>_charset_</code> に設定された隠し入力欄は、自動的にフォームを送信するのに使用される文字エンコーディングの値として報告されます。</p> + +<h2 id="Using_hidden_inputs" name="Using_hidden_inputs">隠し入力欄の利用</h2> + +<p>前述の通り、隠し入力欄はフォームに、一緒にサーバーに送信される、ユーザーが表示または編集できないデータを含めたい場合はどこでも使用できます。使い方を示すいくつかの例をご覧ください。</p> + +<h3 id="Tracking_edited_content" name="Tracking_edited_content">編集された内容の追跡</h3> + +<p>隠し入力欄のもっとも一般的な用途は、編集フォームを送信したときに、データベースのどのレコードを更新する必要があるかを追跡することです。一般的なワークフローは次のようなものです。</p> + +<ol> + <li>ユーザーはブログの記事や製品の項目など、管理権を持っているコンテンツの編集することにします。編集ボタンを押して始めます。</li> + <li>編集するコンテンツがデータベースから取得され、 HTML フォーム内に読み込まれてユーザーが編集できるようになります。</li> + <li>編集後、ユーザーはフォームを送信し、更新されたデータがサーバーに送り返されてデータベースを更新します。</li> +</ol> + +<p>この考え方はステップ2で、更新するレコードの ID を隠し入力欄で保持しておきます。ステップ3でフォームが送信されたとき、 ID は自動的にレコードの中身と共にサーバーに送り返されます。サイトのサーバー側コンポーネントは、 ID によって送信されたデータでどのレコードを更新する必要があるかを正しく特定することができます。</p> + +<p>以下の{{anch("Examples", "例")}}の節で、これがどのように見えるかを示す例全体を見ることができます。</p> + +<h3 id="Improving_website_security" name="Improving_website_security">ウェブサイトのセキュリティの改善</h3> + +<p>隠し入力欄は、ウェブサイトのセキュリティを高めるためにセキュリティトークンや秘密を格納しておくことができます。基本的な考え方としては、例えばオンラインバンキングで他の口座に送金するためのフォームなど、機密を要するフォームにユーザーが記入するときに、秘密を提供することで自分が誰であるか、正しいフォームを利用して送金リクエストを行っているかを証明することができます。</p> + +<p>これで悪意のあるユーザーが偽のフォームを作成して、銀行に成りすまし、騙されやすいユーザーを騙して別なところに送金させるようなことを防ぐことができます。この種の攻撃は<a href="/ja/docs/Learn/Server-side/First_steps/Website_security#Cross-Site_Request_Forgery_(CSRF)">クロスサイトリクエストフォージェリ (CSRF)</a> と呼ばれており、非常に多くの信頼されているサーバー側フレームワークがこのような攻撃を防ぐために隠した秘密を使用しています。</p> + +<div class="note"> +<p>前述のように、隠し入力欄に秘密を配置することは、本質的に安全ではありません。キーの組み合わせやエンコーディングによって実現されます。隠し入力欄の値は秘密とデータを関連付け、フォームがサーバーに送信されるときに自動的に含められます。本当にウェブサイトを安全にするには、よく設計された秘密を使用する必要があります。</p> +</div> + +<h2 id="Validation" name="Validation">検証</h2> + +<p>隠し入力欄は制約検証には関係しません。制約される実際の値を持たないからです。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>以前に作成した編集フォーム ({{anch("Tracking edited content", "編集された内容の追跡")}}を参照) に、隠し入力欄を使用して編集するレコードの ID を記憶する簡単なバージョンを実装する方法を見てみましょう。</p> + +<p>編集フォームの HTML はこのようになっているかもしれません。</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="title">Post title:</label> + <input type="text" id="title" name="title" value="My excellent blog post"> + </div> + <div> + <label for="content">Post content:</label> + <textarea id="content" name="content" cols="60" rows="5"> +This is the content of my excellent blog post. I hope you enjoy it! + </textarea> + </div> + <div> + <button type="submit">Update post</button> + </div> + <input type="hidden" id="postId" name="postId" value="34657"> +</form></pre> + +<p>簡単な CSS も追加しましょう。</p> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +form { + width: 500px; +} + +div { + display: flex; + margin-bottom: 10px; +} + +label { + flex: 2; + line-height: 2; + text-align: right; + padding-right: 20px; +} + +input, textarea { + flex: 7; + font-family: sans-serif; + font-size: 1.1rem; + padding: 5px; +} + +textarea { + height: 60px; +}</pre> + +<p>サーバーはフォームをユーザーのブラウザーに送信する前に、 ID が "<code>postID</code>" である隠し入力欄の値にデータベース内の投稿の ID を設定し、フォームが戻されたときにこの情報を、変更された情報を更新するデータベースのレコードを知るために使用します。コンテンツの中でこれを扱うためにスクリプトは必要はありません。</p> + +<p>出力結果は次のようになります。</p> + +<p>{{ EmbedLiveSample('Examples', '100%', 200) }}</p> + +<div class="note"> +<p><strong>注</strong>: この例は GitHub にもあります (<a href="https://github.com/mdn/learning-area/blob/master/html/forms/hidden-input-example/index.html">ソースコード</a>および<a href="https://mdn.github.io/learning-area/html/forms/hidden-input-example/index.html">ライブでの動作の確認</a>も参照してください)。</p> +</div> + +<p>送信されるとき、サーバーへ送信されるフォームデータは以下のようになります。</p> + +<p><code>title=My+excellent+blog+post&content=This+is+the+content+of+my+excellent+blog+post.+I+hope+you+enjoy+it!&postId=34657</code></p> + +<p>隠し入力欄は全く表示されなくても、データは送信されています。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#hidden-state-(type=hidden)', '<input type="hidden">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>初回定義</td> + </tr> + <tr> + <td>{{SpecName('HTML5.2', 'sec-forms.html#hidden-state-typehidden', '<input type="hidden">')}}</td> + <td>{{Spec2('HTML5.2')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.input.input-hidden")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Forms">HTML フォームガイド</a></li> + <li>{{HTMLElement("input")}} および {{domxref("HTMLInputElement")}} インターフェイス</li> +</ul> diff --git a/files/ja/web/html/element/input/image/index.html b/files/ja/web/html/element/input/image/index.html new file mode 100644 index 0000000000..368a73b960 --- /dev/null +++ b/files/ja/web/html/element/input/image/index.html @@ -0,0 +1,414 @@ +--- +title: <input type="image"> +slug: Web/HTML/Element/input/image +tags: + - Element + - Form Image + - Form Image Button + - Forms + - HTML + - HTML Image Button + - HTML forms + - Image Button + - Input + - Input Type + - Number + - Reference +translation_of: Web/HTML/Element/input/image +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <strong><code>image</code></strong> 型は、テキストではなく画像の形をとる送信ボタン、すなわち送信ボタンを作成するために使用されます。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-image.html", "tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value", "値")}}</strong></td> + <td>なし — <code>value</code> 属性は指定しないでください。</td> + </tr> + <tr> + <td><strong>イベント</strong></td> + <td>なし</td> + </tr> + <tr> + <td><strong>対応している共通属性</strong></td> + <td>{{htmlattrxref("alt", "input")}}, {{htmlattrxref("src", "input")}}, {{htmlattrxref("width", "input")}}, {{htmlattrxref("height", "input")}}, {{htmlattrxref("formaction", "input")}}, {{htmlattrxref("formenctype", "input")}}, {{htmlattrxref("formmethod", "input")}}, {{htmlattrxref("formnovalidate", "input")}}, {{htmlattrxref("formtarget", "input")}}</td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td>なし</td> + </tr> + <tr> + <td><strong>メソッド</strong></td> + <td>なし</td> + </tr> + </tbody> +</table> + +<h2 id="Value" name="Value">値</h2> + +<p><code><input type="image"></code> 要素は <code>value</code> 属性を受け付けません。表示する画像へのパスを <code>src</code> 属性で指定します。</p> + +<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2> + +<p>すべての {{HTMLElement("input")}} 型で共通する属性に加え、 <code>image</code> 型の入力欄は次の属性にも対応しています。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("alt")}}</code></td> + <td>画像が表示できない場合に表示する代替文字列</td> + </tr> + <tr> + <td><code>{{anch("formaction")}}</code></td> + <td>データの送信先の URL</td> + </tr> + <tr> + <td><code>{{anch("formenctype")}}</code></td> + <td>フォームデータを送信する際に使用するエンコーディング方法</td> + </tr> + <tr> + <td><code>{{anch("formmethod")}}</code></td> + <td>フォームを送信する際に使用する HTTP メソッド</td> + </tr> + <tr> + <td><code>{{anch("formnovalidate")}}</code></td> + <td>論理属性で、存在する場合、送信前にフォームを検証しないことを示す</td> + </tr> + <tr> + <td><code>{{anch("formtarget")}}</code></td> + <td>フォームの送信結果を読み込む閲覧コンテキストを示す文字列</td> + </tr> + <tr> + <td><code>{{anch("height")}}</code></td> + <td>画像を描画する CSS ピクセル単位の高さ</td> + </tr> + <tr> + <td><code>{{anch("src")}}</code></td> + <td>画像の読み込み元の URL</td> + </tr> + <tr> + <td><code>{{anch("width")}}</code></td> + <td>画像を描画する CSS ピクセル単位の幅</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefalt">{{htmlattrdef("alt")}}</h3> + +<p><code>alt</code> 属性は、画像が表示できない場合のボタンのラベルとして使用される代替文字列を提供します (エラーの場合、{{Glossary("user agent", "ユーザーエージェント")}}が画像を表示できない場合、画像を表示しないように設定されていた場合、ユーザーが読み上げ端末を使用している場合など)。提供する場合は、ボタンのラベルとして適切な空ではない文字列である必要があります。</p> + +<p>例えば、「今すぐログイン」をアイコンやテキストが入った画像を表示するグラフィックボタンの場合、 <code>alt</code> 属性も <code>今すぐログイン</code> のように設定してください。</p> + +<div class="note"> +<p><strong>重要:</strong> <code>alt</code> 属性は技術的には省略可能ですが、コンテンツの利用性を最大化するために常に設定してください。</p> +</div> + +<p><code><input type="image"></code> の <code>alt</code> 属性は、機能的には {{HTMLElement("img")}} 要素における {{htmlattrdef("alt", "img")}} 属性と同様に動作します。</p> + +<h3 id="htmlattrdefformaction">{{htmlattrdef("formaction")}}</h3> + +<p>文字列で、データの送信先の URL を示します。これはこの {{HTMLElement("input")}} が属する {{HTMLElement("form")}} 要素の {{htmlattrxref("action", "form")}} 属性より優先します。</p> + +<p>この属性は <code><a href="/ja/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> および {{HTMLElement("button")}} 要素でも使用できます。</p> + +<h3 id="htmlattrdefformenctype">{{htmlattrdef("formenctype")}}</h3> + +<p>文字列で、フォームのデータをサーバーに送信する際に使われるエンコーディング方法を識別します。許されている値は3つです。</p> + +<dl> + <dt><code>application/x-www-form-urlencoded</code></dt> + <dd>これは既定値で、フォームのデータを {{jsxref("encodeURI", "encodeURI()")}} などのアルゴリズムを使って URL エンコーディングした後で送信します。</dd> + <dt><code>multipart/form-data</code></dt> + <dd>データを管理するために {{domxref("FormData")}} API を使用し、複数のファイルをサーバーに送信することができます。フォームに {{HTMLElement("input")}} 要素の {{htmlattrxref("type", "input")}}<code>=file</code> (<code><a href="/ja/docs/Web/HTML/Element/input/file"><input type="file"></a></code>) が含まれている場合は、このエンコーディング型を<em>使わなければなりません</em>。</dd> + <dt><code>text/plain</code></dt> + <dd>プレーンテキストです。ほとんどデバッグでしか役に立ちませんが、送信されたデータを簡単に見ることができます。</dd> +</dl> + +<p><code>formenctype</code> 属性が指定された場合、所属するフォームの {{htmlattrxref("action", "form")}} 属性を上書きします。</p> + +<p>この属性は <code><a href="/ja/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> および {{HTMLElement("button")}} 要素でも使用できます。</p> + +<h3 id="htmlattrdefformmethod">{{htmlattrdef("formmethod")}}</h3> + +<p>文字列で、フォームのデータを送信するときに使用する HTTP メソッドを示します。この値は所有者であるフォームの {{htmlattrxref("method", "form")}} を上書きします。許されている値は次の通りです。</p> + +<dl> + <dt><code>get</code></dt> + <dd>A URL is constructed by starting with the URL given by the <code>formaction</code> or {{htmlattrxref("action", "form")}} attribute, appending a question mark ("?") character, then appending the form's data, encoded as described by <code>formenctype</code> or the form's {{htmlattrxref("enctype", "form")}} attribute. This URL is then sent to the server using an HTTP {{HTTPMethod("get")}} request. This method works well for simple forms that contain only ASCII characters and have no side effects. This is the default value.</dd> + <dt><code>post</code></dt> + <dd>The form's data is included in the body of the request that is sent to the URL given by the <code>formaction</code> or {{htmlattrxref("action", "form")}} attribute using an HTTP {{HTTPMethod("post")}} request. This method supports complex data and file attachments.</dd> + <dt><code>dialog</code></dt> + <dd>This method is used to indicate that the button simply closes the dialog with which the input is associated, and does not transmit the form data at all.</dd> +</dl> + +<p>この属性は <code><a href="/ja/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> および {{HTMLElement("button")}} 要素でも使用できます。</p> + +<h3 id="htmlattrdefformnovalidate">{{htmlattrdef("formnovalidate")}}</h3> + +<p>A Boolean attribute which, if present, specifies that the form should not be validated before submission to the server. This overrides the value of the {{htmlattrxref("novalidate", "form")}} attribute on the element's owning form.</p> + +<p>この属性は <code><a href="/ja/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> および {{HTMLElement("button")}} 要素でも使用できます。</p> + +<h3 id="htmlattrdefformtarget">{{htmlattrdef("formtarget")}}</h3> + +<p>A string which specifies a name or keyword that indicates where to display the response received after submitting the form. The string must be the name of a <strong>browsing context</strong> (that is, a tab, window, or {{HTMLElement("iframe")}}. A value specified here overrides any target given by the {{htmlattrxref("target", "form")}} attribute on the {{HTMLElement("form")}} that owns this input.</p> + +<p>In addition to the actual names of tabs, windows, or inline frames, there are a few special keywords that can be used:</p> + +<dl> + <dt><code>_self</code></dt> + <dd>Loads the response into the same browsing context as the one that contains the form. This will replace the current document with the received data. This is the default value used if none is specified.</dd> + <dt><code>_blank</code></dt> + <dd>Loads the response into a new, unnamed, browsing context. This is typically a new tab in the same window as the current document, but may differ depending on the configuration of the {{Glossary("user agent")}}.</dd> + <dt><code>_parent</code></dt> + <dd>Loads the response into the parent browsing context of the current one. If there is no parent context, this behaves the same as <code>_self</code>.</dd> + <dt><code>_top</code></dt> + <dd>Loads the response into the top-level browsing context; this is the browsing context that is the topmost ancestor of the current context. If the current context is the topmost context, this behaves the same as <code>_self</code>.</dd> +</dl> + +<p>この属性は <code><a href="/ja/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> および {{HTMLElement("button")}} 要素でも使用できます。</p> + +<h3 id="htmlattrdefheight">{{htmlattrdef("height")}}</h3> + +<p>A number specifying the height, in CSS pixels, at which to draw the image specified by the <code>src</code> attribute.</p> + +<h3 id="htmlattrdefsrc">{{htmlattrdef("src")}}</h3> + +<p>A string specifying the URL of the image file to display to represent the graphical submit button. When the user interacts with the image, the input is handled like any other button input.</p> + +<h3 id="htmlattrdefwidth">{{htmlattrdef("width")}}</h3> + +<p>A number indicating the width at which to draw the image, in CSS pixels.</p> + +<h2 id="Obsolete_attributes" name="Obsolete_attributes">廃止された属性</h2> + +<p>The following attribute was defined by HTML 4 for <code>image</code> inputs, but was not implemented by all browsers and has since been deprecated:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("usemap")}}</code></td> + <td>The name of an image map ({{HTMLElement("map")}}) element to use with the image; this is obsolete. Use the {{HTMLElement("img")}} element to create image maps instead</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefusemap">{{htmlattrdef("usemap")}}</h3> + +<p>If <code>usemap</code> is specified, it must be the name of an image map element, {{HTMLElement("map")}}, that defines an image map to use with the image. This usage is obsolete; you should switch to using the {{HTMLElement("img")}} element when you want to use image maps.</p> + +<h2 id="Using_image_inputs" name="Using_image_inputs">image 入力の使用</h2> + +<p>The <code><input type="image"></code> element is a <a href="/ja/docs/Web/CSS/Replaced_element">replaced element</a> (an element whose content isn't generated or directly managed by the CSS layer), behaving in much the same way as a regular {{htmlelement("img")}} element, but with the capabilities of a <a href="/ja/docs/Web/HTML/Element/input/submit">submit button</a>.</p> + +<h3 id="Essential_image_input_features" name="Essential_image_input_features">基本的な input 入力の機能</h3> + +<p>Let's look at a basic example that includes all the essential features you'd need to use (These work exactly the same as they do on the <code><img></code> element.):</p> + +<pre class="brush: html notranslate"><input id="image" type="image" width="100" height="30" alt="Login" + src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"></pre> + +<p>{{ EmbedLiveSample('Essential_image_input_features', 600, 50) }}</p> + +<ul> + <li>The {{htmlattrxref("src", "input")}} attribute is used to specify the path to the image you want to display in the button.</li> + <li>The {{htmlattrxref("alt", "input")}} attribute provides alt text for the image, so screen reader users can get a better idea of what the button is used for. It will also display if the image can't be shown for any reason (for example if the path is misspelled). If possible, use text which matches the label you'd use if you were using a standard submit button.</li> + <li>The {{htmlattrxref("width", "input")}} and {{htmlattrxref("height", "input")}} attributes are used to specify the width and height the image should be shown at, in pixels. The button is the same size as the image; if you need the button's hit area to be bigger than the image, you will need to use CSS (e.g. {{cssxref("padding")}}). Also, if you specify only one dimension, the other is automatically adjusted so that the image maintains its original aspect ratio.</li> +</ul> + +<h3 id="Overriding_default_form_behaviors" name="Overriding_default_form_behaviors">既定のフォームの動作の上書き</h3> + +<p><code><input type="image"></code> elements — like regular <a href="/ja/docs/Web/HTML/Element/input/submit">submit buttons</a> — can accept a number of attributes that override the default form behavior:</p> + +<dl> + <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline("5")}}</dt> + <dd>The URI of a program that processes the information submitted by the input element; overrides the {{htmlattrxref("action","form")}} attribute of the element's form owner.</dd> +</dl> + +<dl> + <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline("5")}}</dt> + <dd>Specifies the type of content that is used to submit the form to the server. Possible values are: + <ul> + <li><code>application/x-www-form-urlencoded</code>: The default value if the attribute is not specified.</li> + <li><code>text/plain</code>.</li> + </ul> + + <p>If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.</p> + </dd> + <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline("5")}}</dt> + <dd>Specifies the HTTP method that the browser uses to submit the form. Possible values are: + <ul> + <li><code>post</code>: The data from the form is included in the body of the form and is sent to the server.</li> + <li><code>get</code>: The data from the form is appended to the <code><strong>form</strong></code> attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.</li> + </ul> + + <p>If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.</p> + </dd> + <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline("5")}}</dt> + <dd>A Boolean attribute specifying that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner.</dd> + <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline("5")}}</dt> + <dd>A name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a <em>browsing context</em> (for example, tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the element's form owner. The following keywords have special meanings: + <ul> + <li>_<code>self</code>: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.</li> + <li><code>_blank</code>: Load the response into a new unnamed browsing context.</li> + <li><code>_parent</code>: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li> + <li><code>_top</code>: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same as <code>_self</code>.</li> + </ul> + </dd> +</dl> + +<h3 id="Using_the_x_and_y_data_points">Using the x and y data points</h3> + +<p>When you submit a form using a button created with <code><input type="image"></code>, two extra data points are submitted to the server automatically by the browser — <code>x</code> and <code>y</code>. You can see this in action in our <a href="https://mdn.github.io/learning-area/html/forms/image-type-example/xy-coordinates-example.html">X Y coordinates example</a>.</p> + +<p>When you click on the image to submit the form, you'll see the data appended to the URL as parameters, for example <code>?x=52&y=55</code>. If the image input has a {{htmlattrxref("name", "input")}} attribute, then keep in mind that the specified name is prefixed on every attribute, so if the <code>name</code> is <code>position</code>, then the returned coordinates would be formatted in the URL as <code>?position.x=52&position.y=55</code>. This, of course, applies to all other attributes as well.</p> + +<p>These are the X and Y coordinates of the image that the mouse clicked on to submit the form, where (0,0) is the top-left of the image. These can be used when the position the image was clicked on is significant, for example you might have a map that when clicked, sends the coordinates that were clicked to the server. The server-side code then works out what location was clicked on, and returns information about places nearby.</p> + +<p>In our above example, we could write server-side code that works out what color was clicked on by the coordinates submitted, and keeps a tally of the favorite colors people voted for.</p> + +<h3 id="Adjusting_the_images_position_and_scaling_algorithm">Adjusting the image's position and scaling algorithm</h3> + +<p>You can use the {{cssxref("object-position")}} property to adjust the positioning of the image within the <code><input></code> element's frame, and the {{cssxref("object-fit")}} property to control how the image's size is adjusted to fit within the frame. This allows you to specify a frame for the image using the <code>width</code> and <code>height</code> attributes to set aside space in the layout, then adjust where within that space the image is located and how (or if) it is scaled to occupy that space.</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="A_login_form">A login form</h3> + +<p>The following example shows the same button as before, but included in the context of a typical login form.</p> + +<p>{{ EmbedLiveSample('A_login_form', 600, 170) }}</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><form> + <p>Login to your account</p> + <div> + <label for="userId">User ID</label> + <input type="text" id="userId" name="userId"> + </div> + <div> + <label for="pwd">Password</label> + <input type="password" id="pwd" name="pwd"> + </div> + <div> + <input id="image" type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" alt="Login" width="100"> + </div> +</form></pre> + +<h4 id="CSS">CSS</h4> + +<p>And now some simple CSS to make the basic elements sit more neatly:</p> + +<pre class="brush: css notranslate">div { + margin-bottom: 10px; +} + +label { + display: inline-block; + width: 70px; + text-align: right; + padding-right: 10px; +}</pre> + +<h3 id="Adjusting_the_image_position_and_scaling">Adjusting the image position and scaling</h3> + +<p>In this example, we adapt the previous example to set aside more space for the image and then adjust the actual image's size and positioning using {{cssxref("object-fit")}} and {{cssxref("object-position")}}.</p> + +<p>{{EmbedLiveSample("Adjusting_the_image_position_and_scaling", 600, 300)}}</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><form> + <p>Login to your account</p> + <div> + <label for="userId">User ID</label> + <input type="text" id="userId" name="userId"> + </div> + <div> + <label for="pwd">Password</label> + <input type="password" id="pwd" name="pwd"> + </div> + <div> + <input id="image" type="image" + src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" + alt="Login" width="200" height="100"> + </div> +</form></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">div { + margin-bottom: 10px; +} + +label { + display: inline-block; + width: 70px; + text-align: right; + padding-right: 10px; +} + +#image { + object-position: right top; + object-fit: contain; + background-color: #ddd; +} +</pre> + +<p>Here, <code>object-position</code> is configured to draw the image at the top-right corner of the element, while <code>object-fit</code> is set to <code>contain</code>, which indicates that the image should be drawn at the largest size that will fit within the element's box without altering its aspect ratio. Note the visible grey background of the element still visible in the area not covered by the image.</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#image-button-state-(type=image)', '<input type="image">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#image-button-state-%28type=image%29', '<input type="image">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.input.input-image")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("input")}} and the {{domxref("HTMLInputElement")}} interface which implements it.</li> + <li>Positioning and sizing the image within the <code><input></code> element's frame: {{cssxref("object-position")}} and {{cssxref("object-fit")}}</li> + <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li> +</ul> diff --git a/files/ja/web/html/element/input/index.html b/files/ja/web/html/element/input/index.html new file mode 100644 index 0000000000..5a7ce1c5ca --- /dev/null +++ b/files/ja/web/html/element/input/index.html @@ -0,0 +1,1376 @@ +--- +title: '<input>: 入力欄 (フォーム入力) 要素' +slug: Web/HTML/Element/input +tags: + - Element + - Forms + - HTML + - HTML input tag + - HTML フォーム + - 'HTML:フローコンテンツ' + - 'HTML:対話型コンテンツ' + - 'HTML:記述コンテンツ' + - Reference + - Web + - ウェブ + - データ入力 + - フォーム + - 要素 +translation_of: Web/HTML/Element/input +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">HTML の <strong><code><input></code> 要素</strong>は、ユーザーからデータを受け取るための、ウェブベースのフォーム用の対話的なコントロールを作成するために使用します。端末と{{Glossary("user agent", "ユーザーエージェント")}}によりますが、広範に渡る種類のデータ入力やコントロールウィジェットが利用できます。</span> <code><input></code> 要素は入力型と属性の組み合わせの数が非常に多いため、 HTML の中で最も強力かつ最も複雑な要素の一つです。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="<input>_types" name="<input>_types"><input> の型</h2> + +<p><code><input></code> の動作は {{htmlattrxref("type", "input")}} 属性の値に応じて大きく異なりますので、個別のリファレンスページでさまざまな型を扱っています。この属性を指定しない場合の既定の型は <code>text</code> です。</p> + +<p>利用可能な型は次の通りです。</p> + +<table class="standard-table"> + <colgroup> + <col> + <col style="width: 50%;"> + <col> + </colgroup> + <thead> + <tr> + <th>型</th> + <th>説明</th> + <th>基本的な例</th> + <th>仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{HTMLElement("input/button", "button")}}</td> + <td>プッシュボタンで、既定の動作を持たず、 {{anch('htmlattrdefvalue', 'value')}} 属性の値 (既定では空) を表示します。</td> + <td id="examplebutton"> + <pre class="brush: html hidden notranslate"> +<input type="button" name="button" /></pre> + {{EmbedLiveSample("examplebutton",200,55,"","", "nobutton")}}</td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/checkbox", "checkbox")}}</td> + <td>チェックボックスで、選択または未選択のうちひとつの値をとることができます。</td> + <td id="examplecheckbox"> + <pre class="brush: html hidden notranslate"> +<input type="checkbox" name="checkbox"/></pre> + {{EmbedLiveSample("examplecheckbox",200,55,"","", "nobutton")}}</td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/color", "color")}}</td> + <td>色を指定するためのコントロールです。対応しているブラウザーでは、アクティブになったときにカラーピッカーが開きます。</td> + <td id="examplecolor"> + <pre class="brush: html hidden notranslate"> +<input type="color" name="color"/></pre> + {{EmbedLiveSample("examplecolor",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/date", "date")}}</td> + <td>日付 (時刻を除く年、月、日) を入力するためのコントロールです。対応しているブラウザーでは、アクティブになったときに日付ピッカーまたは年月日の数値のホイールが開きます。</td> + <td id="exampledate"> + <pre class="brush: html hidden notranslate"> +<input type="date" name="date"/></pre> + {{EmbedLiveSample("exampledate",200,55,"","", "nobutton")}}</td> + <td> {{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/datetime-local", "datetime-local")}}</td> + <td>タイムゾーン情報がない日付と時刻を入力するためのコントロールです。対応しているブラウザーでは、アクティブになったときに日付ピッカーまたは日付および時刻部分の数値のホイールが開きます。</td> + <td id="exampledtl"> + <pre class="brush: html hidden notranslate"> +<input type="datetime-local" name="datetime-local"/></pre> + {{EmbedLiveSample("exampledtl",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/email", "email")}}</td> + <td>電子メールアドレスを編集するための欄です。 <code>text</code> 入力欄のように見えますが、対応しているブラウザーや動的なキーボードのある端末では、入力値を検証したり、関連するキーボードを表示したりします。</td> + <td id="exampleemail"> + <pre class="brush: html hidden notranslate"> +<input type="email" name="email"/></pre> + {{EmbedLiveSample("exampleemail",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/file", "file")}}</td> + <td>ユーザーがファイルを選択するコントロールです。 {{anch('htmlattrdefaccept', 'accept')}} 属性を使用して、コントロールが選択することができるファイル形式を定義することができます。</td> + <td id="examplefile"> + <pre class="brush: html hidden notranslate"> +<input type="file" accept="image/*, text/*" name="file"/></pre> + {{EmbedLiveSample("examplefile",'100%',55,"","", "nobutton")}}</td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/hidden", "hidden")}}</td> + <td>表示されないコントロールですが、その値はサーバーに送信されます。隣の列には例がありますが、非表示です。</td> + <td></td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/image", "image")}}</td> + <td>グラフィックの <code>submit</code> ボタンです。 <code>src</code> 属性で定義された画像を表示します。 {{anch('htmlattrdefalt', 'alt')}} 属性は {{anch('htmlattrdefsrc', 'src')}} の画像が見つからないときに表示されます。</td> + <td id="exampleimage"> + <pre class="brush: html hidden notranslate"> +<input type="image" name="image" src="" alt="image input"/></pre> + {{EmbedLiveSample("exampleimage",200,55,"","", "nobutton")}}</td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/month", "month")}}</td> + <td>タイムゾーン情報がない年と月を入力するためのコントロールです。</td> + <td id="examplemonth"> + <pre class="brush: html hidden notranslate"> +<input type="month" name="month"/></pre> + {{EmbedLiveSample("examplemonth",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/number", "number")}}</td> + <td>数値を入力するためのコントロールです。対応していればスピナーを表示し、既定の検証を追加します。動的キーボードを持つ一部の端末では、テンキーを表示します。</td> + <td id="examplenumber"> + <pre class="brush: html hidden notranslate"> +<input type="number" name="number"/></pre> + {{EmbedLiveSample("examplenumber",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/password", "password")}}</td> + <td>入力値を隠す1行テキストフィールド。サイトが安全ではない場合はユーザーに警告します。</td> + <td id="examplepassword"> + <pre class="brush: html hidden notranslate"> +<input type="password" name="password"/></pre> + {{EmbedLiveSample("examplepassword",200,55,"","", "nobutton")}}</td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/radio", "radio")}}</td> + <td>ラジオボタンで、同じ {{anch('htmlattrdefname', 'name')}} の値を持つ複数の選択肢から一つの値を選択することができます。</td> + <td id="exampleradio"> + <pre class="brush: html hidden notranslate"> +<input type="radio" name="radio"/></pre> + {{EmbedLiveSample("exampleradio",200,55,"","", "nobutton")}}</td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/range", "range")}}</td> + <td>厳密な値であることが重要ではない数値を入力するためのコントロールです。範囲のウィジェットを表示し、既定では中央の値になります。 {{anch('htmlattrdefmin', 'min')}} と {{anch('htmlattrdefmax', 'max')}} の組み合わせで、受け入れる値の範囲を定義することができます。</td> + <td id="examplerange"> + <pre class="brush: html hidden notranslate"> +<input type="range" name="range" min="0" max="25"/></pre> + {{EmbedLiveSample("examplerange",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/reset", "reset")}}</td> + <td>フォームのコントロールを既定値に初期化するボタンです。推奨しません。</td> + <td id="examplereset"> + <pre class="brush: html hidden notranslate"> +<input type="reset" name="reset"/></pre> + {{EmbedLiveSample("examplereset",200,55,"","", "nobutton")}}</td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/search", "search")}}</td> + <td>検索文字列を入力するための単一行のテキスト欄です。入力値から改行が自動的に取り除かれます。対応しているブラウザーでは、入力欄を初期化するための削除アイコンが表示されることがあり、欄の内容を消去するために使用することができます。 Displays a search icon instead of enter key on some devices with dynamic keypads.</td> + <td id="examplesearch"> + <pre class="brush: html hidden notranslate"> +<input type="search" name="search"/></pre> + {{EmbedLiveSample("examplesearch",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/submit", "submit")}}</td> + <td>フォームを送信するボタンです。</td> + <td id="examplesubmit"> + <pre class="brush: html hidden notranslate"> +<input type="submit" name="submit"/></pre> + {{EmbedLiveSample("examplesubmit",200,55,"","", "nobutton")}}</td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/tel", "tel")}}</td> + <td>電話番号を入力するためのコントロールです。動的なテンキーを備えた一部の機器では、電話用のテンキーを表示します。</td> + <td id="exampletel"> + <pre class="brush: html hidden notranslate"> +<input type="tel" name="tel"/></pre> + {{EmbedLiveSample("exampletel",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/text", "text")}}</td> + <td>既定値です。単一行の入力欄です。改行は自動的に入力値から取り除かれます。</td> + <td id="exampletext"> + <pre class="brush: html hidden notranslate"> +<input type="text" name="text"/></pre> + {{EmbedLiveSample("exampletext",200,55,"","", "nobutton")}}</td> + <td></td> + </tr> + <tr> + <td>{{HTMLElement("input/time", "time")}}</td> + <td>タイムゾーン情報がない時刻を入力するためのコントロールです。</td> + <td id="exampletime"> + <pre class="brush: html hidden notranslate"> +<input type="time" name="time"/></pre> + {{EmbedLiveSample("exampletime",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/url", "url")}}</td> + <td>URL 入力するための入力欄です。 <code>text</code> 入力欄のように見えますが、対応しているブラウザーや動的なキーボードのある端末では、入力値を検証したり、関連するキーボードを表示したりします。</td> + <td id="exampleurl"> + <pre class="brush: html hidden notranslate"> +<input type="url" name="url"/></pre> + {{EmbedLiveSample("exampleurl",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <td>{{HTMLElement("input/week", "week")}}</td> + <td>年と週番号で構成される日付を入力するためのコントロールです。週番号はタイムゾーンを伴いません。</td> + <td id="exampleweek"> + <pre class="brush: html hidden notranslate"> +<input type="week" name="week"/></pre> + {{EmbedLiveSample("exampleweek",200,55,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + <tr> + <th colspan="4">廃止された値</th> + </tr> + <tr> + <td>{{HTMLElement("input/datetime", "datetime")}}</td> + <td>{{deprecated_inline}} {{obsolete_inline}} UTC タイムゾーンに基づく日付と時刻 (時、分、秒、秒の端数) を入力するためのコントロールです。</td> + <td id="exampledatetime"> + <pre class="brush: html hidden notranslate"> +<input type="datetime" name="datetime"/></pre> + {{EmbedLiveSample("exampledatetime",200,75,"","", "nobutton")}}</td> + <td>{{HTMLVersionInline("5")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p><code><input></code> 要素は属性があるためたいへん強力です。上記の例で説明している {{htmlattrxref("type", "input")}} 属性が最も重要です。すべての <code><input></code> 要素が、 {{domxref("HTMLInputElement")}} インターフェイスに基づいているため、、技術的にはまったく同じ属性を共有しています。しかし実際には、ほとんどの属性は一部の特定の入力型にのみ影響を与えます。さらに、属性によっては入力欄に影響を及ぼす方法が入力型によって異なり、入力型によって異なる方法で影響を与えることがあります。</p> + +<p>この節では、すべての属性に簡単な説明を書いた一覧表を示します。その後で、それぞれの属性がどの入力型に関連付けられているか、より詳細に説明された一覧を示します。ほとんど、またはすべての入力型に共通する属性については、以下でより詳細に定義します。特定の入力型に固有の属性、またはすべての入力型に共通するが、特定の入力型で使用されたときに特別な動作をする属性は、それぞれの型のページで示します。この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を含みます。 <code><input></code> に関連して特に重要な属性は強調表示されています。</p> + +<table class="standard-table"> + <caption>{{htmlelement('input')}} 要素の属性で、<a href="/en-US/docs/Web/HTML/Global_attributes">グローバル HTML 属性</a>を含むもの</caption> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">型</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{anch('htmlattrdefaccept', 'accept')}}</td> + <td>file</td> + <td>ファイルアップロードコントロールで期待されるファイル形式のヒント</td> + </tr> + <tr> + <td>{{anch('htmlattrdefalt', 'alt')}}</td> + <td>image</td> + <td>image 型の alt 属性です。アクセシビリティのために必要です。</td> + </tr> + <tr> + <td>{{anch('htmlattrdefautocomplete', 'autocomplete')}}</td> + <td>すべて</td> + <td>フォームの自動補完機能のためのヒント</td> + </tr> + <tr> + <td>{{anch('htmlattrdefautofocus', 'autofocus')}}</td> + <td>すべて</td> + <td>ページが読み込まれたときに、自動的にそのフォームコントロールにフォーカスを設定する</td> + </tr> + <tr> + <td>{{anch('htmlattrdefcapture', 'capture')}}</td> + <td>file</td> + <td>ファイルアップロードコントロールのメディアキャプチャのインプットメソッド</td> + </tr> + <tr> + <td>{{anch('htmlattrdefchecked', 'checked')}}</td> + <td>radio, checkbox</td> + <td>コマンドやコントロールがチェックされているか</td> + </tr> + <tr> + <td>{{anch('htmlattrdefdirname', 'dirname')}}</td> + <td>text, search</td> + <td>フォーム送信時に要素の方向性を送信するために使用するフォームフィールドの名前です。</td> + </tr> + <tr> + <td>{{anch('htmlattrdefdisabled', 'disabled')}}</td> + <td>すべて</td> + <td>コントロールが無効であるかどうか</td> + </tr> + <tr> + <td>{{anch('htmlattrdefform', 'form')}}</td> + <td>すべて</td> + <td>コントロールを form 要素に関連付ける</td> + </tr> + <tr> + <td>{{anch('htmlattrdefformaction', 'formaction')}}</td> + <td>image, submit</td> + <td>フォームの送信に使用する URL</td> + </tr> + <tr> + <td>{{anch('htmlattrdefformenctype', 'formenctype')}}</td> + <td>image, submit</td> + <td>フォームの送信に使用するデータセットのエンコード種別</td> + </tr> + <tr> + <td>{{anch('htmlattrdefformmethod', 'formmethod')}}</td> + <td>image, submit</td> + <td>フォームの送信に使用する HTTP メソッド</td> + </tr> + <tr> + <td>{{anch('htmlattrdefformnovalidate', 'formnovalidate')}}</td> + <td>image, submit</td> + <td>フォームの送信でフォームの検証をバイパス</td> + </tr> + <tr> + <td>{{anch('htmlattrdefformtarget', 'formtarget')}}</td> + <td>image, submit</td> + <td>フォーム送信に使用する閲覧コンテキスト</td> + </tr> + <tr> + <td>{{anch('htmlattrdefheight', 'height')}}</td> + <td>image</td> + <td>{{htmlelement('img')}} の <code>height</code> 属性と同じで、垂直の高さ</td> + </tr> + <tr> + <td>{{anch('htmlattrdeflist', 'list')}}</td> + <td>ほぼすべて</td> + <td>自動補完オプションの入った {{htmlelement('datalist')}} の id 属性の値</td> + </tr> + <tr> + <td>{{anch('htmlattrdefmax', 'max')}}</td> + <td>数値型</td> + <td>最大値</td> + </tr> + <tr> + <td>{{anch('htmlattrdefmaxlength', 'maxlength')}}</td> + <td>password, search, tel, text, url</td> + <td><code>value</code> の最大長 (文字数)</td> + </tr> + <tr> + <td>{{anch('htmlattrdefmin', 'min')}}</td> + <td>数値型</td> + <td>最小値</td> + </tr> + <tr> + <td>{{anch('htmlattrdefminlength', 'minlength')}}</td> + <td>password, search, tel, text, url</td> + <td><code>value</code> の最小長 (文字数)</td> + </tr> + <tr> + <td>{{anch('htmlattrdefmultiple', 'multiple')}}</td> + <td>email, file</td> + <td>論理属性。複数の値を許可するかどうか</td> + </tr> + <tr> + <td>{{anch('htmlattrdefname', 'name')}}</td> + <td>すべて</td> + <td>入力欄コントロールの名前。名前/値の組の部分としてフォームと一緒に送信される</td> + </tr> + <tr> + <td>{{anch('htmlattrdefpattern', 'pattern')}}</td> + <td>password, text, tel</td> + <td><code>value</code> が一致すると妥当となるパターン</td> + </tr> + <tr> + <td>{{anch('htmlattrdefplaceholder', 'placeholder')}}</td> + <td>password, search, tel, text, url</td> + <td>フォームコントロールが空の時にフォームコントロール内に表示される内容</td> + </tr> + <tr> + <td><a href="/ja/docs/Web/HTML/Attributes/readonly">readonly</a></td> + <td>ほぼすべて</td> + <td>論理属性。値が編集できない</td> + </tr> + <tr> + <td><a href="/ja/docs/Web/HTML/Attributes/required">required</a></td> + <td>ほぼすべて</td> + <td>論理属性。フォームが送信できるようにするためには値が必要</td> + </tr> + <tr> + <td>{{anch('htmlattrdefsize', 'size')}}</td> + <td>email, password, tel, text</td> + <td>コントロールの大きさ</td> + </tr> + <tr> + <td>{{anch('htmlattrdefsrc', 'src')}}</td> + <td>image</td> + <td>{{htmlelement('img')}} の <code>src</code> 属性と同じで、画像リソースのアドレス</td> + </tr> + <tr> + <td>{{anch('htmlattrdefstep', 'step')}}</td> + <td>numeric types</td> + <td>有効な増分</td> + </tr> + <tr> + <td>{{anch('htmlattrdeftype', 'type')}}</td> + <td>all</td> + <td>入力フォームコントロールの型</td> + </tr> + <tr> + <td>{{anch('htmlattrdefvalue', 'value')}}</td> + <td>all</td> + <td>このフォームコントロールの現在の値。名前/値の組の部分としてフォームと一緒に送信される</td> + </tr> + <tr> + <td>{{anch('htmlattrdefwidth', 'width')}}</td> + <td>image</td> + <td>{{htmlelement('img')}} の <code>width</code> 属性と同じ</td> + </tr> + </tbody> +</table> + +<p>標準属性の説明に続いて、いくつかの追加の非標準属性を列挙します。</p> + +<h3 id="個々の属性">個々の属性</h3> + +<dl> + <dt id="htmlattrdefaccept">{{htmlattrdef("accept")}}</dt> + <dd> + <p><code>file</code> 入力型に対してのみ有効です。 <code>accept</code> 属性は <code>file</code> アップロードコントロールの中でどのファイル形式が選択可能であるかを定義します。 {{HTMLElement("input/file", "file")}} 入力型を参照してください。</p> + </dd> + <dt id="htmlattrdefalt">{{htmlattrdef("alt")}}</dt> + <dd> + <p><code>image</code> ボタンに対してのみ有効です。 alt 属性は画像の代替テキストを提供し、 <a href="#htmlattrdefsrc"><code>src</code></a> の画像が存在しないか、または読み込みに失敗した場合にこの属性の値を表示します。 {{HTMLElement("input/image", "image")}} 入力型を参照してください。</p> + </dd> + <dt id="htmlattrdefautocomplete">{{htmlattrdef("autocomplete")}}</dt> + <dd> + <p>(論理属性では<strong>ありません</strong>!) <code><a href="/ja/docs/Web/HTML/Attributes/autocomplete">autocomplete</a></code> 属性は空白区切りの文字列の値を取り、指定された場合は、入力欄が提供する自動補完機能の種類を示します。自動補完のよくある実装は、以前同じ入力欄に入力された値を単に再呼び出しするものですが、もっと複雑な自動補完もあり得ます。例えば、ブラウザーが端末の連絡先リストと連携して、 <code>email</code> 入力欄でメールアドレスを自動補完したりする可能性もあります。許可されている値は<a href="/ja/docs/Web/HTML/Attributes/autocomplete#Values">autocomplete 属性の値</a>を参照してください。</p> + + <p><code>autocomplete</code> 属性は <code>hidden</code>, <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>range</code>, <code>color</code>, <code>password</code> で有効です。この属性は数値またはテキストデータを返さない入力型では効果がなく、 <code>checkbox</code>, <code>radio</code>, <code>file</code> とすべてのボタン型を除いたすべての入力型で有効になります。</p> + + <p>詳しい情報については <a href="/ja/docs/Web/HTML/Attributes/autocomplete">HTML の autocomplete 属性</a>を参照してください。パスワードセキュリティに関する情報や、 <code>autocomplete</code> が <code>hidden</code> に対して他の入力型とどう異なるのかについての情報があります。</p> + </dd> + <dt id="htmlattrdefautofocus">{{htmlattrdef("autofocus")}}</dt> + <dd> + <p>論理属性で、指定された場合は、ページの読み込みが完了したとき (またはその要素を含む {{HTMLElement("dialog")}} が表示されたとき) に、自動的にその入力欄がフォーカスを持つことを示します。</p> + + <div class="note"> + <p><strong>注:</strong> <code>autofocus</code> 属性がついた要素は、 {{domxref("DOMContentLoaded")}} イベントが発生する前にフォーカスを得ることがあります。</p> + </div> + + <p>文書中で一つの要素だけが <code>autofocus</code> 属性を持つことができます。複数の要素に付けた場合は、最初にこの属性を持つ要素がフォーカスを受け取ります。</p> + + <p><code>autofocus</code> は <code>hidden</code> 型の入力欄にはフォーカスを受け取ることができないため、使用することができません。</p> + + <div class="warning"> + <p><strong>警告:</strong> フォームコントロールに自動的にフォーカスを与えると、読み上げ技術を利用している視覚障碍者を混乱させる可能性があります。 <code>autofocus</code> が割り当てられると、読み上げソフトは予告なしにフォームコントロールにその人を「テレポート」させることになるからです。</p> + </div> + + <p><code>autofocus</code> 属性を適用する際には、アクセシビリティを慎重に検討してください。フォームコントロールにフォーカスを自動的に設定すると、読み込み時にページのスクロールが発生します。フォーカスを与えると、一部のタッチ端末では動的なキーボードを表示させることにもなります。読み上げソフトはフォーカスを受けているフォームコントロールのラベルをアナウンスする一方、ラベルよりも前は何もアナウンスしませんし、小さな端末を使用している視力のあるユーザーは、同様に先行するコンテンツによって作成された文脈を見逃してしまいます。</p> + </dd> + <dt id="htmlattrdefcapture">{{htmlattrdef("capture")}}</dt> + <dd> + <p>HTML Media Capture 仕様書で導入され、 <code>file</code> 入力型に対してのみ有効です。 <code>capture</code> 属性は、どのメディア (マイク、ビデオ、カメラ) を使用して新しいファイルをキャプチャし、対応するシナリオで <code>file</code> アップロードコントロールを使用してアップロードするかを定義します。 {{HTMLElement("input/file", "file")}} 入力型を参照してください。</p> + </dd> + <dt id="htmlattrdefchecked">{{htmlattrdef("checked")}}</dt> + <dd> + <p><code>radio</code> 型と <code>checkbox</code> 型の両方で有効で、 <code>checked</code> は論理属性です。 <code>radio</code> 型に存在した場合、そのラジオボタンが同じ名前のラジオボタンのグループの中で現在選択されているものであることを示します。 <code>checkbox</code> 型に存在した場合、 (ページが読み込まれたとき) 既定でチェックボックスがチェックされていることを示します。このチェックボックスが現在チェックされているかどうかを示すものでは<em>ありません</em>。チェックボックスの状態が変更された場合でも、このコンテンツ属性はその変更を反映しません。 (<a href="/ja/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code> の <code>checked</code> IDL 属性</a>のみが更新されます。)</p> + + <div class="note"> + <p><strong>注:</strong> 他の入力コントロールとは異なり、チェックボックスやラジオボタンの値は、現在 <code>checked</code> の状態にある場合に送信データに含まれます。存在する場合、チェックされたコントロールの名前と値が送信されます。</p> + + <p>例えば、 <code>name</code> が <code>fruit</code> で、 <code>value</code> が <code>cherry</code> であるチェックボックスがチェックされていると、送信されるフォームデータには <code>fruit=cherry</code> が含まれます。チェックボックスがチェックされていない場合、フォームデータには全く含まれません。チェックボックスやラジオボタンの既定の <code>value</code> は <code>on</code> です。</p> + </div> + </dd> + <dt id="htmlattrdefdirname">{{htmlattrdef("dirname")}}</dt> + <dd> + <p><code>text</code> および <code>search</code> 入力型のみに有効で、 <code>dirname</code> 属性によって要素の書字方向を送信することができます。これが含まれていると、フォームコントロールは2組の名前と値を送信します。1組目は <a href="#htmlattrdefname"><code>name</code></a> と <a href="#htmlattrdefvalue"><code>value</code></a> であり、2組目は名前が <code>dirname</code> の値で、値に <code>ltr</code> または <code>rtl</code> がブラウザーによって設定されます。</p> + + <pre class="notranslate"><form action="page.html" method="post"> + <label>Fruit: <input type="text" name="fruit" dirname="fruit.dir" value="cherry"></label> + <input type="submit"/> +</form> +<!-- page.html?fruit=cherry&fruit.dir=ltr --> +</pre> + + <p>上記のフォームが送信されると、入力欄は <code>name</code> / <code>value</code> の組である <code>fruit=cherry</code> と、 <code>dirname</code> / 書字方向の組である <code>fruit.dir=ltr</code> が送信されます。</p> + </dd> + <dt id="htmlattrdefdisabled">{{htmlattrdef("disabled")}}</dt> + <dd> + <p>論理属性で、存在する場合、ユーザーが入力欄と対話できないことを示します。無効な入力欄は、ふつうより薄い色や、その他のフィールドが使用できないことを示すことを示す形で表示されます。</p> + + <p>特に、無効になった入力欄は {{domxref("Element/click_event", "click")}} イベントを受け取らず、フォームと共に送信されることもありません。</p> + + <div class="note"> + <p><strong>メモ:</strong> 仕様書で要件とはされていませんが、 Firefox は既定で、ページを再読み込みしても <code><input></code> を <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">動的に無効化した状態を維持します</a>。この機能は {{htmlattrxref("autocomplete","input")}} 属性で制御することができます。</p> + </div> + </dd> + <dt id="htmlattrdefform">{{htmlattrdef("form")}}</dt> + <dd> + <p>文字列で、入力欄が関連づけられた {{HTMLElement("form")}} 要素 (つまり、<strong>フォームオーナー</strong>) を指定します。存在する場合、この文字列値は同一文書内の <code><form></code> 要素の {{htmlattrxref("id")}} と一致している必要があります。この属性が指定されない場合は、 <code><input></code> 要素は直近の内包するフォームに (もしあれば) 関連付けられます。</p> + + <p><code>form</code> 属性によって、入力欄を文書内のどこに置いても、文書内の他の場所にあるフォームと関連付けることができます。</p> + + <div class="note"> + <p><strong>メモ:</strong> 入力欄は一つのフォームとしか関連付けることができません。</p> + </div> + </dd> + <dt id="htmlattrdefformaction">{{htmlattrdef('formaction')}}</dt> + <dd> + <p><code>image</code> および <code>submit</code> 入力型でのみ有効です。詳しくは {{HTMLElement("input/submit", "submit")}} 入力型を参照してください。</p> + </dd> + <dt id="htmlattrdefformenctype">{{htmlattrdef('formenctype')}}</dt> + <dd> + <p><code>image</code> および <code>submit</code> 入力型でのみ有効です。詳しくは {{HTMLElement("input/submit", "submit")}} 入力型を参照してください。</p> + </dd> + <dt id="htmlattrdefformmethod">{{htmlattrdef('formmethod')}}</dt> + <dd> + <p><code>image</code> および <code>submit</code> 入力型でのみ有効です。詳しくは {{HTMLElement("input/submit", "submit")}} 入力型を参照してください。</p> + </dd> + <dt id="htmlattrdefformnovalidate">{{htmlattrdef('formnovalidate')}}</dt> + <dd> + <p><code>image</code> および <code>submit</code> 入力型でのみ有効です。詳しくは {{HTMLElement("input/submit", "submit")}} 入力型を参照してください。</p> + </dd> + <dt id="htmlattrdefformtarget">{{htmlattrdef('formtarget')}}</dt> + <dd> + <p><code>image</code> および <code>submit</code> 入力型でのみ有効です。詳しくは {{HTMLElement("input/submit", "submit")}} 入力型を参照してください。</p> + </dd> + <dt id="htmlattrdefheight">{{htmlattrdef("height")}}</dt> + <dd> + <p><code>image</code> 入力型でのみ有効です。 <code>height</code> はグラフィックの送信ボタンの表現を表示するための画像ファイルの高さを示します。 {{HTMLElement("input/image", "image")}} 入力型を参照してください。</p> + </dd> + <dt id="htmlattrdefheight">{{htmlattrdef("id")}}</dt> + <dd> + <p>すべての入力欄を含む、すべての要素で有効なグローバル属性で、文書全体で一意でなければならない一意の識別子 (ID) を定義します。その目的は、リンクする際に要素を識別することです。この値は、ラベルとフォームコントロールをリンクするための {{htmlelement('label')}} の <code>for</code> 属性の値として使用されます。 {{htmlelement('label')}} を参照してください。</p> + </dd> + <dt id="htmlattrdefheight">{{htmlattrdef("inputmode")}}</dt> + <dd> + <p>すべての要素で有効なグローバル属性です、この要素やその内容を編集する際に使用される仮想キーボード設定の種類をブラウザーに示すヒントを提供します。値としては <code>none</code>, <code>text</code>, <code>tel</code>, <code>url</code>, <code>email</code>, <code>numeric</code>, <code>decimal</code>, <code>search</code> があります。</p> + </dd> + <dt id="htmlattrdeflist">{{htmlattrdef("list")}}</dt> + <dd id="datalist"> + <p><code>list</code> 属性で与えられる値は、同じ文書内にある {{HTMLElement("datalist")}} 要素の {{domxref("Element.id", "id")}} としてください。 <code><datalist></code> は、この入力欄でユーザーに提案する事前定義された値のリストを提供します。リストに {{htmlattrxref("type", "input")}} と互換性のない値が含まれていた場合は、提案の選択肢には含まれません。この値は提案として使用されるものであり、要件ではありません。ユーザーはこの定義済みリストから選択することもできるし、別な値を提供することもできます。</p> + + <pre class="brush: html hidden notranslate"><datalist id="colorsxx"> + <option>#ff0000</option> + <option>#ee0000</option> + <option>#dd0000</option> + <option>#cc0000</option> + <option>#bb0000</option> +</datalist> +<datalist id="numbersxx"> + <option>0</option> + <option>2</option> + <option>4</option> + <option>8</option> + <option>16</option> + <option>32</option> + <option>64</option> +</datalist> +<datalist id="fruitsxx"> + <option>cherry</option> + <option>banana</option> + <option>mango</option> + <option>orange</option> + <option>blueberry</option> +</datalist> +<datalist id="urlsxx"> + <option>https://developer.mozilla.org</option> + <option>https://caniuse.com/</option> + <option>https://mozilla.com</option> + <option>https://mdn.github.io</option> + <option>https://www.youtube.com/user/firefoxchannel</option> +</datalist> + +<p><label for="textx">Text</label> <input type="text" list="fruitsxx" id="textx"/></p> +<p><label for="colorx">Color</label> <input type="color" list="colorsxx" id="colorx"/></p> +<p><label for="rangex">Range</label> <input type="range" min="0" max="64" list="numbersxx" id="rangex"/></p> +<p><label for="numberx">Number</label> <input type="number" min="0" max="64" list="numbersxx" id="numberx"/></p> +<p><label for="urlx">URL</label> <input type="url" list="urlsxx" id="urlx"/></p></pre> + + <p>{{EmbedLiveSample("datalist",400,275,"","", "nobutton")}}</p> + + <p>これは <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>range</code>, <code>color</code> で有効です。</p> + + <p>仕様書によれば、 <code>list</code> 属性は <code>hidden</code>, <code>password</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code> それにボタン型では対応していません。</p> + + <p>ブラウザーによっては、カスタムカラーパレットが提案されたり、範囲に沿ったチェックマークが表示されたり、{{HTMLElement("select")}}のように開くものの、リストにない値を入力できるようになったりすることもあります。他の入力型については<a href="/ja/docs/Web/HTML/Element/datalist#Browser_compatibility">ブラウザーの互換性一覧表</a>を参照してください。</p> + + <p>{{htmlelement('datalist')}} 要素を参照してください。</p> + </dd> + <dt id="htmlattrdefmax"><a href="/ja/docs/Web/HTML/Attributes/max">{{htmlattrdef("max")}}</a></dt> + <dd> + <p><code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>range</code> で有効であり、許可される値の範囲の最大値を定義します。要素に入力された {{htmlattrxref("value", "input")}} がこれを超えた場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約の検証</a>に失敗します。 <code>max</code> 属性の値が数値でない場合は、要素に最大値は設定されません。</p> + + <p>特殊な場合があります。データ型が期間を表す場合 (日付や時刻など)、 <code>max</code> の値は <code>min</code> の値よりも小さくなる場合があり、これは範囲が折り返す可能性があることを表します。例えば、これによって午後10時から午前4時までの自国の範囲を指定することができます。</p> + </dd> + <dt id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</dt> + <dd> + <p><code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>password</code> で有効であり、ユーザーがフィールドに入力することができる文字数 (UTF-16 コード単位) を定義します。これは <code>0</code> 以上の整数値でなければなりません。 <code>maxlength</code> が指定されなかった場合、または無効な値が指定された場合は、その入力欄には最大長が設定されません。この値は <code>minlength</code> の値以上である必要もあります。</p> + + <p>欄に入力されたテキストの文字数が UTF-16 コード単位で <code>maxlength</code> よりも多いと、この入力欄は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約の検証</a>に失敗します。既定では、ブラウザーはユーザーが <code>maxlength</code> 属性で許可された文字数以上を入力するのを防ぎます。詳しくは{{anch("Client-side validation", "クライアント側検証")}}を参照してください。</p> + </dd> + <dt id="htmlattrdefmin">{{htmlattrdef("min")}}</dt> + <dd> + <p><code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>range</code> で有効であり、許可される値の範囲の最も低い値を定義します。要素に入力された {{htmlattrxref("value", "input")}} がこれを下回った場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約の検証</a>に失敗します。 <code>min</code> 属性の値が数値でない場合は、要素に最小値は設定されません。</p> + + <p>この値は <code>max</code> 属性の値以下である必要があります。 <code>min</code> 属性が存在するものの、指定されていなかったり無効であったりした場合は、 <code>min</code> の値は適用されません。 <code>min</code> 属性が有効であり、値が空ではなく <code>min</code> 属性で許可された最小値よりも小さかった場合、制約の検証によりフォームの送信が行われません。詳しくは{{anch("Client-side validation", "クライアント側検証")}}を参照してください。</p> + + <p>特殊な場合があります。データ型が期間を表す場合 (日付や時刻など)、 <code>max</code> の値は <code>min</code> の値よりも小さくなる場合があり、これは範囲が折り返す可能性があることを表します。例えば、これによって午後10時から午前4時までの自国の範囲を指定することができます。</p> + </dd> + <dt id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</dt> + <dd> + <p><code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>password</code> で有効であり、ユーザーがフィールドに入力することができる最小文字数 (UTF-16 コード単位) を定義します。これは負数ではなく、 <code>maxlength</code> で指定された値以下の整数値でなければなりません。 <code>minlength</code> が指定されなかった場合、または無効な値が指定された場合は、その入力欄には最小文字数が設定されません。</p> + + <p>欄に入力されたテキストの文字数が UTF-16 コード単位で <code>minlength</code> よりも少ないと、この入力欄は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約の検証</a>に失敗します。詳しくは{{anch("Client-side validation", "クライアント側検証")}}を参照してください。</p> + </dd> + <dt id="htmlattrdefmultiple">{{htmlattrdef("multiple")}}</dt> + <dd> + <p>論理属性の <code>multiple</code> は、設定されている場合、ユーザーがウィジェット内でコンマ区切りで複数のメールアドレスを入力できること、または <code>file</code> 入力欄で複数のpファイルを選択することが出えきるinput. See the {{HTMLElement("input/email", "email")}} and {{HTMLElement("input/file", "file")}} input type.</p> + </dd> + <dt id="htmlattrdefname">{{htmlattrdef("name")}}</dt> + <dd> + <p>入力コントロールの名前を指定する文字列です。この名前はフォームデータが送信される時に、コントロールの値と共に送信されます。</p> + + <h5 id="Whats_in_a_name" name="Whats_in_a_name">name に入れるもの</h5> + + <p><code>name</code> は (厳密にはそうではありませんが) 必須の属性と考えてください。入力欄に <code>name</code> が指定されていなかった場合や <code>name</code> が空欄だった場合、その入力欄の値はフォームと一緒に送信されません。 (無効なコントロール、チェックされていないラジオボタン、チェックされていないチェックボックス、リセットボタンも送信されません。)</p> + + <p>特殊な場合が2つあります。</p> + + <ol> + <li><code>_charset_</code> : <code><input></code> 要素の {{HTMLElement("input/hidden", "hidden")}} 型として使用された場合、入力欄の <code>value</code> には自動的に、フォームを送信するのに使用される文字エンコーディングが{{Glossary("user agent", "ユーザーエージェント")}}によって設定されます。</li> + <li><code>isindex</code>: 歴史的な理由で、 <code><a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-name">isindex</a></code> という名前は許可されていません。</li> + </ol> + + <h5 id="name_and_radio_buttons" name="name_and_radio_buttons">name とラジオボタン</h5> + + <p><a href="#htmlattrdefname"><code>name</code></a> 属性はラジオボタンでは独特の動きをします。</p> + + <p>同名のラジオボタングループ内で、一度にチェックできるラジオボタンは1つのみです。そのグループ内のラジオボタンを選択すると、同じグループ内の現在選択されているラジオボタンの選択が自動的に解除されます。チェックされたラジオボタンの値は、フォームが送信された場合、名前と一緒に送信されます。</p> + + <p>同名のラジオボタンが連続したグループにタブ移動した場合、そのうちの1つにチェックが入っていると、それがフォーカスを受け取ります。ソース順でグループ化されていない場合、グループのうちの1つがチェックされていた場合は、タブ移動でグループ内の最初のラジオボタンに出会ったときに、チェックが入っていないラジオボタンをすべてスキップして、そのグループがフォーカスを受け取ります。言い換えれば、1つがチェックされている場合、グループ内のチェックされていないラジオボタンはスキップされます。どれもチェックされていない場合、同名グループの最初のボタンに到達したときに、ラジオボタングループがフォーカスを受け取ります。</p> + + <p>グループ内のラジオボタンにフォーカスがある場合、矢印キーを使用すれば、ラジオボタンがソースの順序でグループ化されていなくても、同じ名前のすべてのラジオボタンに移動することができます。</p> + + <h5 id="HTMLFormElement.elements">HTMLFormElement.elements</h5> + + <p>入力要素に <code>name</code> が与えられると、その名前は所有するフォーム要素の {{domxref("HTMLFormElement.elements")}} プロパティのプロパティになります。 <code>name</code> が <code>guest</code> に設定されている入力と、 <code>name</code> が <code>hat-size</code> に設定されている入力がある場合、以下のコードを使用することができます。</p> + + <pre class="brush: js notranslate">let form = document.querySelector("form"); + +let guestName = form.elements.guest; +let hatSize = form.elements["hat-size"]; +</pre> + + <p>このコードを実行すると、 <code>guestName</code> が {{domxref("HTMLInputElement")}} の <code>guest</code> フィールドになり、 <code>hatSize</code> が <code>hat-size</code> フィールドの</p> + + <div class="warning"> + <p><strong>警告:</strong> フォームの組み込みプロパティに対応する <code>name</code> をフォーム要素に与えないようにします。なぜなら、対応する入力への参照で定義済みのプロパティやメソッドをオーバーライドしてしまうからです。</p> + </div> + </dd> + <dt id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</dt> + <dd> + <div id="pattern-include"> + <p><code>pattern</code> 属性は、指定された場合、入力の {{htmlattrxref("value")}} が一致すれば値が<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約の検証</a>を通過したとみなされる正規表現を指定します。これは {{jsxref("RegExp")}} 型で使用される有効な JavaScript の正規表現でなければならず、これは<a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions">正規表現のガイド</a>で説明されている通りです。正規表現をコンパイルする際には <code>'u'</code> フラグが指定され、パターンが ASCII ではなく Unicode コードポイントのシーケンスとして扱われます。パターンのテキストの周囲にスラッシュを指定しないでください。</p> + + <p><code>pattern</code> 属性が存在するが、指定されていないか無効な場合、正規表現は適用されず、この属性は完全に無視されます。 <code>pattern</code> 属性が有効で、空でない値がパターンと一致しない場合、制約の検証によりフォームの送信ができなくなります。</p> + + <div class="note"> + <p><strong>ヒント:</strong> <code>pattern</code> 属性を使用する場合は、期待される書式をユーザーに知らせる説明文を近くに配置してください。また、パターンに一致させるための要件が何であるかを説明するために、 {{htmlattrxref("title", "input")}} 属性を含めることもできます。ほとんどのブラウザーはこのタイトルをツールチップとして表示します。ツールチップは改善手段です。</p> + </div> + </div> + + <p>詳しくは{{anch("Client-side validation", "クライアント側検証")}}を参照してください。</p> + </dd> + <dt id="htmlattrdefplaceholder">{{htmlattrdef("placeholder")}}</dt> + <dd> + <p><code>placeholder</code> 属性は、フィールドでどのような情報が期待されているかについて、ユーザーに簡単なヒントを与える文字列です。説明的なメッセージではなく、予想されるデータのタイプを示す単語または短いフレーズである必要があります。テキストには、改行を含めては<em>いけません</em>。</p> + + <div class="note"> + <p><strong>注:</strong> <code>placeholder</code> 属性は、フォームを説明するためには他の方法ほど意味的に有用ではなく、コンテンツに予期せぬ技術的な問題を引き起こす可能性があります。詳細は{{SectionOnPage("/ja/docs/Web/HTML/Element/input", "Labels")}}を参照してください。</p> + </div> + </dd> + <dt id="htmlattrdefreadonly">{{htmlattrdef("readonly")}}</dt> + <dd> + <p>論理属性で、存在すれば、ユーザーが入力欄の値を編集できないことを示します。 <code>readonly</code> 属性は <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>password</code> の各入力型が対応しています。</p> + + <p>詳しくは <a href="/ja/docs/Web/HTML/Attributes/readonly">HTML attribute: <code>readonly</code></a> を参照してください。</p> + </dd> + <dt id="htmlattrdefrequired">{{htmlattrdef("required")}}</dt> + <dd> + <p><code>required</code> は論理属性であり、所有するフォームが送信される前に、ユーザーが入力欄の値を指定しなければならないことを示します。 <code>required</code> 属性は <code>text</code>, <code>search</code>, <code>url</code>, <code>tel</code>, <code>email</code>, <code>date</code>, <code>month</code>, <code>week</code>, <code>time</code>, <code>datetime-local</code>, <code>number</code>, <code>password</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code> の各入力型で対応しています。</p> + + <p>See {{anch("Client-side validation")}} and the <a href="/en-US/docs/Web/HTML/Attributes/required">HTML attribute: <code>required</code></a> for more information.</p> + </dd> + <dt id="htmlattrdefsize">{{htmlattrdef("size")}}</dt> + <dd>Valid for <code>email</code>, <code>password</code>, <code>tel</code>, and <code>text</code> <code>input</code> types only. Specifies how much of the input is shown. Basically creates same result as setting CSS <code>width</code> property with a few specialities. The actual unit of the value depends on the input type. For <code>password</code> and <code>text</code> it's number of characters (or <code>em</code> units) and <code>pixel</code>s for others. CSS width takes precedence over size attribute.</dd> + <dt id="htmlattrdefsrc">{{htmlattrdef("src")}}</dt> + <dd> + <p>Valid for the <code>image</code> input button only, the <code>src</code> is string specifying the URL of the image file to display to represent the graphical submit button. See the {{HTMLElement("input/image", "image")}} input type.</p> + </dd> + <dt id="htmlattrdefstep">{{htmlattrdef("step")}}</dt> + <dd> + <div id="step-include"> + <p>Valid for the numeric input types, including <code>number</code>, date/time input types, and <code>range</code>, the <code><a href="/en-US/docs/Web/HTML/Attributes/step">step</a></code> attribute is a number that specifies the granularity that the value must adhere to.</p> + + <p>If not explicitly included, <code>step</code> defaults to 1 for <code>number</code> and <code>range</code>, and 1 unit type (second, week, month, day) for the date/time input types. The value can must be a positive number—integer or float—or the special value <code>any</code>, which means no stepping is implied, and any value is allowed (barring other constraints, such as <code>{{anch("min")}}</code> and <code>{{anch("max")}}</code>).</p> + + <p>If <code>any</code> is not explicity set, valid values for the <code>number</code>, date/time input types, and <code>range</code> input types are equal to the basis for stepping - the <code>{{anch("min")}}</code> value and increments of the step value, up to the <code>{{anch("max")}}</code> value, if specified.</p> + + <p>For example, if you have <code><input type="number" min="10" step="2"></code>, then any even integer, <code>10</code> or greater, is valid. If omitted, <code><input type="number"></code>, any integer is valid, but floats (like <code>4.2</code>) are not valid, because <code>step</code> defaults to <code>1</code>. For <code>4.2</code> to be valid, <code>step</code> would have had to be set to <code>any</code>, 0.1, 0.2, or any the <code>min</code> value would have had to be a number ending in <code>.2</code>, such as <code><input type="number" min="-5.2"></code></p> + + <div class="note"> + <p><strong>Note:</strong> When the data entered by the user doesn't adhere to the stepping configuration, the value is considered invalid in contraint validation and will match the <code>:invalid</code> pseudoclass.</p> + </div> + </div> + + <p>The default stepping value for <code>number</code> inputs is <code>1</code>, allowing only integers to be entered, <em>unless</em> the stepping base is not an integer. The default stepping value for <code>time</code> is 1 second (with 900 being equal to 15 minutes).</p> + + <p>See {{anch("Client-side validation")}} for more information.</p> + </dd> + <dt id="htmlattrdeftype">{{htmlattrdef("tabindex")}}</dt> + <dd> + <p>Global attribute valid for all elements, including all the input types, an integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation. As all input types except for input of type hidden are focusable, this attribute should not be used on form controls, because doing so would require the management of the focus order for all elements within the document with the risk of harming usability and accessibility if done incorrectly.</p> + </dd> + <dt id="htmlattrdefformenctype">{{htmlattrdef('title')}}</dt> + <dd> + <p>Global attribute valid for all elements, including all input types, containing a text representing advisory information related to the element it belongs to. Such information can typically, but not necessarily, be presented to the user as a tooltip. The title should NOT be used as the primary explanation of the purpose of the form control. Instead, use the {{htmlelement('label')}} element with a <code>for</code> attribute set to the form control's {{htmlattrdef('id')}} attribute. See {{anch("Labels")}} below.</p> + </dd> + <dt id="htmlattrdeftype">{{htmlattrdef("type")}}</dt> + <dd> + <p>文字列で、表示するコントロールの型を指定します。例えば、チェックボックスを生成するには、 <code>checkbox</code> の値が使用されます。省略された場合 (または不明な値が指定された場合) は、入力型に <code>text</code> が使用され、テキストの入力欄が生成されます。</p> + + <p>許可されている値は{{anch("<input> types", "<input> の型")}}にあります。</p> + </dd> + <dt id="htmlattrdefvalue">{{htmlattrdef("value")}}</dt> + <dd> + <p>入力コントロールの値です。 HTML の中で指定されると、これは初期値となり、その後で JavaScript を使用してそれぞれの {{domxref("HTMLInputElement")}} オブジェクトの <code>value</code> プロパティにアクセスすることで、いつでも変更したり受け取ったりすることができます。 <code>value</code> 属性は常に省略可ですが、 <code>checkbox</code>, <code>radio</code>, <code>hidden</code> においては必須だと考えてください。</p> + </dd> + <dt id="htmlattrdefwidth">{{htmlattrdef("width")}}</dt> + <dd> + <p>Valid for the <code>image</code> input button only, the <code>width</code> is the width of the image file to display to represent the graphical submit button. See the {{HTMLElement("input/image", "image")}} input type.</p> + </dd> +</dl> + +<h3 id="Non-standard_attributes" name="Non-standard_attributes">標準外の属性</h3> + +<p>The following non-standard attributes are also available on some browsers. As a general rule, you should avoid using them unless it can't be helped.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("autocorrect")}}</code></td> + <td>A string indicating whether or not autocorrect is <code>on</code> or <code>off</code>. <strong>Safari only.</strong></td> + </tr> + <tr> + <td><code>{{anch("incremental")}}</code></td> + <td>Whether or not to send repeated {{domxref("HTMLInputElement/search_event", "search")}} events to allow updating live search results while the user is still editing the value of the field. <strong>WebKit and Blink only (Safari, Chrome, Opera, etc.).</strong></td> + </tr> + <tr> + <td><code>{{anch("mozactionhint")}}</code></td> + <td>A string indicating the type of action that will be taken when the user presses the <kbd>Enter</kbd> or <kbd>Return</kbd> key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard. <strong>Firefox for Android only</strong>.</td> + </tr> + <tr> + <td><code>{{anch("orient")}}</code></td> + <td>Sets the orientation of the range slider. <strong>Firefox only</strong>.</td> + </tr> + <tr> + <td><code>{{anch("results")}}</code></td> + <td>The maximum number of items that should be displayed in the drop-down list of previous search queries. <strong>Safari only.</strong></td> + </tr> + <tr> + <td><code>{{anch("webkitdirectory")}}</code></td> + <td>A Boolean indicating whether or not to only allow the user to choose a directory (or directories, if <code>{{anch("multiple")}}</code> is also present)</td> + </tr> + </tbody> +</table> + +<dl> + <dt>{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</dt> + <dd>{{page("/ja/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</dd> + <dt>{{htmlattrdef("incremental")}} {{non-standard_inline}}</dt> + <dd>{{page("/ja/docs/Web/HTML/Element/input/search", "incremental-include")}}</dd> + <dt>{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</dt> + <dd>{{page("/en-US/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</dd> + <dt>{{htmlattrdef("orient")}} {{non-standard_inline}}</dt> + <dd>{{page("/en-US/docs/Web/HTML/Element/input/range", "orient-include")}}</dd> + <dt>{{htmlattrdef("results")}} {{non-standard_inline}}</dt> + <dd>{{page("/en-US/docs/Web/HTML/Element/input/search", "results-include")}}</dd> + <dt>{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}</dt> + <dd>{{page("/en-US/docs/Web/HTML/Element/input/file", "webkitdirectory-include")}}</dd> +</dl> + +<h2 id="Methods" name="Methods">メソッド</h2> + +<p>以下のメソッドは DOM 内で <code><input></code> を表現する {{domxref("HTMLInputElement")}} インターフェイスで提供されます。親インターフェイスである {{domxref("HTMLElement")}}, {{domxref("Element")}}, {{domxref("Node")}}, {{domxref("EventTarget")}} で指定されているメソッドも使用できます。</p> + +<dl> + <dt>{{domxref("HTMLInputElement.checkValidity", "checkValidity()")}}</dt> + <dd>要素の妥当性チェックを直ちに実行し、値が妥当でない場合は文書に対して {{domxref("HTMLInputElement.invalid_event", "invalid")}} イベントを要素に発生させます。</dd> + <dt>{{domxref("HTMLInputElement.reportValidity", "reportValidity()")}}</dt> + <dd>要素の値が妥当性チェックを通った場合は <code>true</code> を返します。そうでなければ、 <code>false</code> を返します。</dd> + <dt>{{domxref("HTMLInputElement.select", "select()")}}</dt> + <dd>要素が選択可能な場合、 <code><input></code> 要素の内容を選択します。選択可能なテキストコンテンツがない要素 (カラーピッカーまたはカレンダー日付入力など) では、このメソッドは何もしません。</dd> + <dt>{{domxref("HTMLInputElement.setCustomValidity", "setCustomValidity()")}}</dt> + <dd>入力要素の値が妥当ではないときに表示するカスタムメッセージを設定します。</dd> + <dt>{{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}</dt> + <dd>入力要素内の文字の指定された範囲のコンテンツを、指定された文字列に設定します。 <code>selectMode</code> 引数を使用して、既存のコンテンツに影響させる方法を制御することができます。</dd> + <dt>{{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</dt> + <dd>テキストの入力要素内で、指定された文字の範囲を選択します。テキスト入力欄として表現されない入力欄では何もしません。</dd> + <dt>{{domxref("HTMLInputElement.stepDown", "stepDown()")}}</dt> + <dd>数値入力欄の値を既定で1、または指定された数値の単位だけ減少させます。</dd> + <dt>{{domxref("HTMLInputElement.stepUp", "stepUp()")}}</dt> + <dd>数値入力欄の値を既定で1、または指定された数値の単位だけ増加させます。</dd> +</dl> + +<h2 id="CSS">CSS</h2> + +<p>Inputs, being replaced elements, have a few features not applicable to non form elements. There are CSS selectors that can specification target form controls based on their UI features, also known as UI pseudo-classes. The input element can also be targeted by type with attribute selectors. There are some properties that are especially useful as well.</p> + +<h3 id="UI_pseudo-classes" name="UI_pseudo-classes">UI 擬似クラス</h3> + +<table class="standard-table"> + <caption>Captions super relevant to the {{htmlelement("input")}} element:</caption> + <thead> + <tr> + <th>擬似クラス</th> + <th>説明</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Cssxref(":enabled")}}</td> + <td>Any currently enabled element that can be activated (selected, clicked on, typed into, etc.) or accept focus and also has a disabled state, in which it can't be activated or accept focus.</td> + </tr> + <tr> + <td>{{Cssxref(":disabled")}}</td> + <td>Any currently disabled element that has an enabled state, meaing it otherwise could be activated (selected, clicked on, typed into, etc.) or accept focus were it not disabled.</td> + </tr> + <tr> + <td>{{Cssxref(":read-only")}}</td> + <td>Element not editable by the user</td> + </tr> + <tr> + <td>{{Cssxref(":read-write")}}</td> + <td>Element that is editable by the user.</td> + </tr> + <tr> + <td>{{Cssxref(":placeholder-shown")}}</td> + <td>Element that is currently displaying <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-placeholder">placeholder text</a>, including {{HTMLElement("input")}} and {{HTMLElement("textarea")}} elements with the {{anch('htmlattrdefplaceholder', 'placeholder')}} attribute present that has, as of yet, no value.</td> + </tr> + <tr> + <td>{{Cssxref(":default")}}</td> + <td>Form elements that are the default in a group of related elements. Matches {{HTMLElement("input/checkbox", "checkbox")}} and {{HTMLElement("input/radio", "radio")}} input types that were checked on page load or render.</td> + </tr> + <tr> + <td>{{Cssxref(":checked")}}</td> + <td>Matches {{HTMLElement("input/checkbox", "checkbox")}} and {{HTMLElement("input/radio", "radio")}} input types that are currently checked (and the ({{HTMLElement("option")}} in a {{HTMLElement("select")}} that is currently selected).</td> + </tr> + <tr> + <td>{{Cssxref(":indeterminate")}}</td> + <td>{{HTMLElement("input/checkbox", "checkbox")}} elements whose indeterminate property is set to true by JavaScript, {{HTMLElement("input/radio", "radio")}} elements, when all radio buttons with the same name value in the form are unchecked, and {{HTMLElement("progress")}} elements in an indeterminate state</td> + </tr> + <tr> + <td>{{Cssxref(":valid")}}</td> + <td>Form controls that can have constraint validation applied and are currently valid.</td> + </tr> + <tr> + <td>{{Cssxref(":invalid")}}</td> + <td>Form controls that have constraint validation applied and are currently not valid. Matches a form control whose value doesn't match the constraints set on it by it's attributes, such as {{anch('htmlattrdefrequired', 'required')}}, {{anch('htmlattrdefpattern', 'pattern')}} , {{anch('htmlattrdefstep', 'step')}} and {{anch('htmlattrdefmax', 'max')}}.</td> + </tr> + <tr> + <td>{{Cssxref(":in-range")}}</td> + <td>A non-empty input whose current value is within the range limits specified by the {{anch('htmlattrdefmin', 'min')}} and {{anch('htmlattrdefmax', 'max')}} attributes and the {{anch('htmlattrdefstep', 'step')}} .</td> + </tr> + <tr> + <td>{{Cssxref(":out-of-range")}}</td> + <td>A non-empty input whose current value is NOT within the range limits specified by the {{anch('htmlattrdefmin', 'min')}} and {{anch('htmlattrdefmax', 'max')}} attributes or does not adher to the {{anch('htmlattrdefstep', 'step')}} constraint.</td> + </tr> + <tr> + <td>{{Cssxref(":required")}}</td> + <td>{{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element that has the {{ htmlattrxref("required", "input")}} attribute set on it. Only matches elements that can be required. The attribute included on a non-requirable element will not make for a match.</td> + </tr> + <tr> + <td>{{Cssxref(":optional")}}</td> + <td>{{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element that does NOT have the {{ htmlattrxref("required", "input")}} attribute set on it. Does not match elements that can't be required.</td> + </tr> + <tr> + <td>{{Cssxref(":blank")}}</td> + <td>{{HTMLElement("input")}} and {{HTMLElement("textarea")}} elements that currently have no value.</td> + </tr> + <tr> + <td>{{Cssxref(":user-invalid")}}</td> + <td>Similar to <code>:invalid</code>, but is activated on blur. Matches invalid input but only after the user interaction, such as by focusing on the control, leaving the control, or attempting to submit the form containing the invalid control.</td> + </tr> + </tbody> +</table> + +<h4 id="Examples" name="Examples">例</h4> + +<p>We can style a checkbox label based on whether the checkbox is checked or not. In this example, we are styling the {{cssxref('color')}} and {{cssxref('font-weight')}} of the {{htmlelement('label')}} that comes immediately after a checked input. We haven't applied any styles if the <code>input</code> is not checked.</p> + +<div id="checkbox_label"> +<pre class="brush: html hidden notranslate"><input id="checkboxInput" type="checkbox"> +<label for="checkboxInput">Toggle the checkbox on and off</label> +</pre> + +<pre class="brush: css notranslate">input:checked + label { + color: red; + font-weight: bold; +} +</pre> + +<p>{{EmbedLiveSample('checkbox_label', 500, 80)}}</p> +</div> + +<h3 id="Attribute_selectors" name="Attribute_selectors">属性セレクター</h3> + +<p>It is possible to target different types of form controls based on their {{anch('htmlattrdeftype', 'type')}} using <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">attribute selectors</a>. CSS attribute selectors match elements based on either just the presence of a attribute or the value of a given attribute.</p> + +<pre class="brush: css notranslate">/* matches a password input */ +input[type="password"] {} + +/* matches a form control whose valid values are limited to a range of values*/ +input[min][max] {} + +/* matches a form control with with a pattern attribute */ + input[pattern] {}</pre> + +<h3 id="placeholder">::placeholder</h3> + +<p>By default, the appearance of placeholder text is a translucent or light gray. The {{cssxref('::placeholder')}} pseudo-element is the input's <a href="/en-US/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">placeholder text</a>. It can be styled with a limited subset of CSS properties.</p> + +<pre class="brush: css no-line-numbers notranslate">::placeholder { + color: blue; +}</pre> + +<p>Only the subset of CSS properties that apply to the {{cssxref("::first-line")}} pseudo-element can be used in a rule using <code>::placeholder</code> in its selector.</p> + +<h3 id="appearance">appearance</h3> + +<p>The {{cssxref("appearance")}} property enables the displaying of (almost) any element as a platform-native style based on the operating system's theme as well as the removal of any platform-native styling with the <code>none</code> value.</p> + +<p>You could make a <code><div></code> look like a radio button with <code>div {appearance: radio;} </code>or a radio look like a checkbox with <code>[type="checkbox] {appearance: checkbox;}</code>, but don't.</p> + +<p>Setting <code>appearance: none</code> removes platform native borders, but not functionality.</p> + +<h3 id="caret-color">caret-color</h3> + +<p>A property specific to text entry-related elements is the CSS {{cssxref("caret-color")}} property, which lets you set the color used to draw the text input caret:</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><label for="textInput">Note the red caret:</label> +<input id="textInput" class="custom" size="32"> +</pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">input.custom { + caret-color: red; + font: 16px "Helvetica", "Arial", "sans-serif" +} +</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample('caret-color', 500, 80)}}</p> + +<h3 id="object-position_and_object-fit" name="object-position_and_object-fit">object-position と object-fit</h3> + +<p>In certain cases (typically involving non-textual inputs and specialized interfaces), the <code><input></code> element is a <a href="/en-US/docs/Web/CSS/Replaced_element">replaced element</a>. When it is, the position and size of the element's size and positioning within its frame can be adjusted using the CSS {{cssxref("object-position")}} and {{cssxref("object-fit")}} properties</p> + +<h3 id="Styling" name="Styling">スタイル付け</h3> + +<p>For more information about adding color to elements in HTML, see:</p> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a>.</li> +</ul> + +<p>Also see:</p> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms,</a> <a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">advanced styling for HTML forms</a>, and</li> + <li>the<a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets"> compatibility table of CSS properties</a>.</li> +</ul> + +<h2 id="Additional_features" name="Additional_features">追加機能</h2> + +<h3 id="Labels" name="Labels">ラベル</h3> + +<p>ラベルは支援テキストを <code><input></code> に関連付けるために必要です。 {{HTMLElement("label")}} 要素は、フォームの入力欄を説明するために、 (レイアウト方法はさておき) <em>常に</em>適切な手段です。 <code><label></code> を <code><input></code> や {{HTMLElement("textarea")}} に何を入力するべきかを説明するのに使用することは、決して悪い考えではありません。</p> + +<h4 id="Associated_labels" name="Associated_labels">関連付けられたラベル</h4> + +<p>The semantic pairing of <code><input></code> and <code><label></code> elements is useful for assistive technologies such as screen readers. By pairing them using the <code><label></code>'s {{htmlattrxref("for", "label")}} attribute, you bond the label to the input in a way that lets screen readers describe inputs to users more precisely.</p> + +<p>It does not suffice to have plain text adjacent to the <code><input></code> element,. Rather, usability and accessibility requires the inclusion of either implicit or explicit {{HTMLElement("label")}}:</p> + +<pre class="brush: html notranslate"><!-- inaccessible --> +<p>Enter your name: <input id="name" type="text" size="30"></p> + +<!-- implicit label --> +<p><label>Enter your name: <input id="name" type="text" size="30"></label></p> + +<!-- explicit label --> +<p><label for="name">Enter your name: </label><input id="name" type="text" size="30"></p></pre> + +<p>The first example is inaccessible: no relationship exists between the prompt and the <code><input></code> element.</p> + +<p>In addition to an accessible name, the label provides a larger 'hit' area for mouse and touch screen users to click on or touch. By pairing a <code><label></code> with an <code><input></code>, clicking on either one will focus the <code><input></code>. If you use plain text to "label" your input, this won't happen. Having the prompt part of the activation area for the input is helpful for people with motor control conditions.</p> + +<p>As web developers, it's important that we never assume that people will know all the things that we know. The diversity of people using the web—and by extension your web site—practically guarantees that some of your site's visitors will have some variation in thought processes and/or circumstances that leads them to interpret your forms very differently from you without clear and properly-presented labels.</p> + +<h4 id="Placeholders_are_not_accessible" name="Placeholders_are_not_accessible">プレイスホルダーはアクセシブルではない</h4> + +<p>{{htmlattrxref("placeholder", "input")}} 属性で、 <code><input></code> 要素が空の時にコンテンツ領域に表示されるテキストを指定することができます。プレイスホルダーは、フォームを理解するために必要なものであってはいけません。ラベルではありませんし、その代用として使用すべきではありません。プレイスホルダーは入力例を示すために使用されるものであり、説明やプロンプトではありません。プレイスホルダーは、読み上げソフトがアクセスできないだけでなく、ユーザーがフォームコントロールにテキストを入力したり、フォームコントロールにすでに値があったりする場合、プレイスホルダーはなくなります。自動ページ翻訳機能を持つブラウザーは、翻訳時にこの属性をスキップする、すなわち <code>placeholder</code> が翻訳されないことがあります。</p> + +<div class="blockIndicator note"> +<p>避けることができるのであれば、 {{htmlattrxref("placeholder", "input")}} 属性を使用しないでください。 <code><input></code> 要素にラベルを付ける樋津陽があるのであれば、 {{HTMLElement("label")}} 属性を使用してください。</p> +</div> + +<h3 id="Client-side_validation" name="Client-side_validation">クライアント側検証</h3> + +<p>In addition to using CSS to style inputs based on the {{cssxref(":valid")}} or {{cssxref(":invalid")}} UI states based on the current state of each input, as noted in the {{anch('UI pseudo-classes')}} section above, the browser provides for client-side validation on (attempted) form submission. On form submission, if there is a form control that fails constraint validation, supporting browsers will display an error message on the first invalid form control; displaying a default message based on the error type, or a message set by you.</p> + +<p>Some input types and other attributes place limits on what values are valid for a given input. For example, <code><input type="number" min="2" max="10" step="2"></code> means only the number 2, 4, 6, 8, or 10 are valid. Several errors could occur, including a <code>rangeUnderflow</code> error if the value is less than 2, <code>rangeOverflow</code> if greater than 10, <code>stepMismatch</code> if the value is a number between 2 and 10, but not an even integer (does not match the requirements of the <code>step</code> attribute), or <code>typeMismatch</code> if the value is not a number.</p> + +<p>For the input types whose domain of possible values is periodic (that is, at the highest possible value, the values wrap back around to the beginning rather than ending), it's possible for the values of the {{htmlattrxref("max")}} and {{htmlattrxref("min")}} properties to be reversed, which indicates that the range of permitted values starts at <code>min</code>, wraps around to the lowest possible value, then continues on until <code>max</code> is reached. This is particularly useful for dates and times, such as when you want to allow the range to be from 8 PM to 8 AM:</p> + +<pre class="brush: html notranslate"><input type="time" min="20:00" max="08:00" name="overnight"></pre> + +<p>Specific attributes and their values can lead to a specific error {{domxref('ValidityState')}}:</p> + +<table class="standard-table"> + <caption>Validity object errors depend on the {{htmlelement('input')}} attributes and their values:</caption> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">関連するプロパティ/th></th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{anch('htmlattrdefmax', 'max')}}</td> + <td>{{domxref('validityState.rangeOverflow')}}</td> + <td>Occurs when the value is greater than the maximum value as defined by the <code>max</code> attribute</td> + </tr> + <tr> + <td>{{anch('htmlattrdefmaxlength', 'maxlength')}}</td> + <td>{{domxref('validityState.tooLong')}}</td> + <td>Occurs when the number of characters is greater than the number allowed by the <code>maxlength</code> property</td> + </tr> + <tr> + <td>{{anch('htmlattrdefmin', 'min')}}</td> + <td>{{domxref('validityState.rangeUnderflow')}}</td> + <td>Occurs when the value is less than the minimum value as defined by the <code>min</code> attribute</td> + </tr> + <tr> + <td>{{anch('htmlattrdefminlength', 'minlength')}}</td> + <td>{{domxref('validityState.tooShort')}}</td> + <td>Occurs when the number of characters is less than the number required by the <code>minlength</code> property</td> + </tr> + <tr> + <td>{{anch('htmlattrdefpattern', 'pattern')}}</td> + <td>{{domxref('validityState.patternMismatch')}}</td> + <td>Occurs when a pattern attribute is included with a valid regular expression and the <code>value</code> does not match it.</td> + </tr> + <tr> + <td>{{anch('htmlattrdefrequired', 'required')}}</td> + <td>{{domxref('validityState.valueMissing')}}</td> + <td>Occurs when the <code>required</code> attribute is present but the value is <code>null</code> or radio or checkbox is not checked.</td> + </tr> + <tr> + <td>{{anch('htmlattrdefstep', 'step')}}</td> + <td>{{domxref('validityState.stepMismatch')}}</td> + <td>The value doesn't match the step increment. Increment default is <code>1</code>, so only integers are valid on<code> type="number"</code> is step is not included. <code>step="any"</code> will never throw this error.</td> + </tr> + <tr> + <td>{{anch('htmlattrdeftyoe', 'type')}}</td> + <td>{{domxref('validityState.typeMismatch')}}</td> + <td>Occurs when the value is not of the correct type, for example a email does not contain an <code>@</code> or a url doesn't contain a protocol.</td> + </tr> + </tbody> +</table> + +<p>フォームコントロールに <code>required</code> 属性がない場合、値がない場合や空文字列出会った場合は無効にはなりません。 <code>required</code> 以外の上記の属性があった場合も、空文字列でエラーにはなりません。</p> + +<p>We can set limits on what values we accept, and supporting browsers will natively validate these form values and alert the user if there is a mistake when the form is submitted.</p> + +<p>In addition to the errors described in the table above, the <code>validityState</code> interface contains the <code>badInput</code>, <code>valid</code>, and <code>customError</code> boolean readonly properties. The validity object includes:</p> + +<ul> + <li>{{domxref('validityState.valueMissing')}}</li> + <li>{{domxref('validityState.typeMismatch')}}</li> + <li>{{domxref('validityState.patternMismatch')}}</li> + <li>{{domxref('validityState.tooLong')}}</li> + <li>{{domxref('validityState.tooShort')}}</li> + <li>{{domxref('validityState.rangeUnderflow')}}</li> + <li>{{domxref('validityState.rangeOverflow')}}</li> + <li>{{domxref('validityState.stepMismatch')}}</li> + <li>{{domxref('validityState.badInput')}}</li> + <li>{{domxref('validityState.valid')}}</li> + <li>{{domxref('validityState.customError')}}</li> +</ul> + +<p>For each of these Boolean properties, a value of <code>true</code> indicates that the specified reason validation may have failed is true, with the exception of the <code>valid</code> property, which is <code>true</code> if the element's value obeys all constraints.</p> + +<p>If there is an error, supporting browsers will both alert the user and prevent the form from being submitted. A word of caution: if a custom error is set to a truthy value (anything other than the empty string or <code>null</code>), the form will be be prevented from being submitted. If there is no custom error message, and none of the other properties return true, <code>valid</code> will be true, and the form can be submitted.</p> + +<pre class="brush: js notranslate">function validate(input) { + let validityState_object = input.validity; + if(validityState_object.valueMissing) { + input.setCustomValidity('A value is required'); + } else if (input.rangeUnderflow) { + input.setCustomValidity('Your value is too low'); + } else if (input.rangeOverflow) { + input.setCustomValidity('Your value is too high'); + } else { + input.setCustomValidity(''); + } +}</pre> + +<p>The last line, setting the custom validity message to the error string is vital. If the user makes an error, and the validity is set, it will fail to submit, even if all of the values are valid, until the message is <code>null</code>.</p> + +<h4 id="Example" name="Example">例</h4> + +<p>フィールドの検査に失敗したときに、独自のエラーメッセージを表示させたい場合は、 <code><input></code> (および関連する) 要素で利用できる<a href="/ja/docs/Web/API/Constraint_validation#Constraint_validation_interfaces">制約検証機能</a>を使用する必要があります。以下のような形を取ってください。</p> + +<pre class="brush: html notranslate"><form> + <label for="name">ユーザー名を入力してください (英大文字および小文字): </label> + <input type="text" name="name" id="name" required pattern="[A-Za-z]+"> + <button>Submit</button> +</form></pre> + +<p>基本的な HTML フォーム検証機能では、フォームを送信しようとしたときに、有効な値が入力されていなかったり、 <code>pattern</code> と一致しない値が入力されていたりすると、既定のエラーメッセージを生成します。</p> + +<p>独自のエラーメッセージで代替したい場合は、以下のような JavaScript を使用することができます。</p> + +<pre class="brush: js notranslate">const nameInput = document.querySelector('input'); +const form = document.querySelector('form'); + +nameInput.addEventListener('input', () => { + nameInput.setCustomValidity(''); + nameInput.checkValidity(); +}); + +nameInput.addEventListener('invalid', () => { + if(nameInput.value === '') { + nameInput.setCustomValidity('名前を入力してください。'); + } else { + nameInput.setCustomValidity('ユーザー名には英大文字と小文字のみが使えます。入力しなおしてください。'); + } +});</pre> + +<p>この例は次のように表示されます。</p> + +<p>{{EmbedLiveSample('Client-side_validation')}}</p> + +<p>簡単に言えば、以下の通りです。</p> + +<ul> + <li>input 要素が妥当であるかの状態をチェックするために、値が変更されるたびに <code>checkValidity()</code> メソッドを <code>input</code> イベントハンドラーから呼び出します。</li> + <li>値が妥当ではない場合、 <code>invalid</code> イベントが発行され、 <code>invalid</code> イベントのハンドラー関数が実行されます。この関数の中で、値が無効である原因が空欄であるためであるか、パターンに一致しないためであるかを確認し、 <code>if()</code> ブロックを使用して、独自の検証エラーメッセージを設定します。</li> + <li>結果として、送信ボタンが押されたときに入力値が妥当ではない場合は、独自のエラーメッセージのうちの一つが表示されます。</li> + <li>妥当である場合は、期待通りに送信されます。この場合、独自の検証は <code>setCustomValidity()</code> を空文字列で呼び出すことで中断されます。従って、 <code>input</code> イベントが発生するたびにこれが行われます。以前、独自の検証が設定され、これを行わないと、送信時に妥当な値を持っていたとしても、入力欄は無効であるとして登録されます。</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Always validate input constraints both client side and server side. Constraint validation doesn't remove the need for validation on the <em>server side</em>. Invalid values can still be sent by older browsers or by bad actors.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>メモ</strong>: Firefox は多くの版で、同様の方法で独自のエラーメッセージを設定することができる、独自のエラー属性 — <code>x-moz-errormessage</code> — に対応していました。これはバージョン66で削除されました ({{bug(1513890)}} を参照)。</p> +</div> + +<h3 id="Localization" name="Localization">ローカライゼーション</h3> + +<p><input> 型によっては、入力可能な文字列がロケールに依存します。ロケールによっては 1,000.00 が有効な数値である一方、ロケールによっては有効な数値は 1.000,00 です。</p> + +<p>Firefox は (少なくとも <code>type="number"</code> において) ユーザーの入力内容を検証する際に、ロケールを特定するために以下の経験則を使用します。</p> + +<ul> + <li>当該要素または親要素の <code>lang</code>/<code>xml:lang</code> 属性で指定された言語</li> + <li>HTTP の Content-Language ヘッダーで指定された言語</li> + <li>何も指定されていない場合は、ブラウザーのロケール</li> +</ul> + +<h2 id="Technical_summary" name="Technical_summary">技術的概要</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>、リスト化、サブミット可能、リセット可能、フォーム関連要素、<a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>。{{htmlattrxref("type", "input")}} の値が <code>hidden</code> でない場合はラベル付け可能要素、知覚可能コンテンツ。</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>なし。これは{{Glossary("empty element", "空要素")}}です。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>開始タグは必須。終了タグを記述してはなりません。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素。</td> + </tr> + <tr> + <th scope="row">Implicit ARIA role</th> + <td> + <ul> + <li><code>type=button</code>: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></li> + <li><code>type=checkbox</code>: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role">checkbox</a></code></li> + <li><code>type=email</code> + <ul> + <li>with no <code>list</code> attribute: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></code></li> + <li>with <code>list</code> attribute: {{ARIARole("combobox")}}</li> + </ul> + </li> + <li><code>type=image</code>: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></li> + <li><code>type=number</code>: {{ARIARole("spinbutton")}}</li> + <li><code>type=radio</code>: {{ARIARole("radio")}}</li> + <li><code>type=range</code>: {{ARIARole("slider")}}</li> + <li><code>type=reset</code>: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></li> + <li><code>type=search</code> + <ul> + <li>with no <code>list</code> attribute: {{ARIARole("searchbox")}}</li> + <li>with <code>list</code> attribute: {{ARIARole("combobox")}}</li> + </ul> + </li> + <li><code>type=submit</code>: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></li> + <li><code>type=tel</code> + <ul> + <li>with no <code>list</code> attribute: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></code></li> + <li>with <code>list</code> attribute: {{ARIARole("combobox")}}</li> + </ul> + </li> + <li><code>type=text</code> + <ul> + <li>with no <code>list</code> attribute: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></code></li> + <li>with <code>list</code> attribute: {{ARIARole("combobox")}}</li> + </ul> + </li> + <li><code>type=url</code> + <ul> + <li>with no <code>list</code> attribute: <code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></code></li> + <li>with <code>list</code> attribute: {{ARIARole("combobox")}}</li> + </ul> + </li> + <li><code>type=color|date|datetime-local|file|hidden|month|password|time|week</code>: <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">no corresponding role</a></li> + </ul> + </td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td> + <ul> + <li><code>type=button</code>: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}</li> + <li><code>type=checkbox</code>: {{ARIARole("button")}} when used with <code>aria-pressed</code>, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("option")}}, {{ARIARole("switch")}}</li> + <li><code>type=image</code>: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}</li> + <li><code>type=radio</code>: {{ARIARole("menuitemradio")}}</li> + <li><code>type=text</code> with no <code>list</code> attribute: {{ARIARole("combobox")}}, {{ARIARole("searchbox")}}, {{ARIARole("spinbutton")}}</li> + <li><code>type=color|date|datetime|datetime-local|email|file|hidden|month|number|password|range|reset|search|submit|tel|url|week</code> または <code>text</code> に <code>list</code> 属性が付いたもの: 許可されている <code>role</code> なし</li> + </ul> + </td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLInputElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML Media Capture', '#the-capture-attribute','capture attribute')}}</td> + <td>{{Spec2('HTML Media Capture')}}</td> + <td><code>capture</code> 属性を追加</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-input-element', '<input>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '<form>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> + +<h3 id="Labels_2" name="Labels_2">ラベル</h3> + +<p>When including inputs, it is an accessibilty requirement to add labels along side. This is needed so those who use assistive technologies can tell what the input is for. Also, clicking or touching a label gives focus to the label's associated form control. This improves the accessibility and usability for sighted users, increases the area a user can click or touch to activate the form control. this is especially useful (and even needed) for radio buttons and checkboxes, which are tiny. For more information about labels in general see {{anch("Labels")}} .</p> + +<p>次の例は、上記の形で <code><label></code> を <code><input></code> 要素に関連付ける方法の例です。 <code><input></code> に <code>id</code> 属性を設定する必要があります。そして <code><label></code> には入力欄の <code>id</code> と同じ値を持つ <code>for</code> 属性が必要になります。</p> + +<pre class="notranslate"><label for="peas">Do you like peas?</label> +<input type="checkbox" name="peas" id="peas"> +</pre> + +<h3 id="Size" name="Size">大きさ</h3> + +<p>フォーム入力欄のような対話型要素は、簡単に有効化できるだけの大きさを持たせてください。これにより、手足の不自由な人や、スタイラスや指のような精度の低い入力方法を使用している人など、様々な人にとって有用です。対話型の大きさとしては、 44×44 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels">CSS ピクセル</a> を最小値とすることが推奨されています。</p> + +<ul> + <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1</a></li> + <li><a href="http://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Target Size and 2.5.5 | Adrian Roselli</a></li> + <li><a href="https://a11yproject.com/posts/large-touch-targets/">Quick test: Large touch targets - The A11Y Project</a></li> +</ul> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<div>{{Compat("html.elements.input")}}</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">フォーム制約検証</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">初めての HTML フォーム</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">HTML フォームを構成する方法</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets">ネイティブのフォームウィジェット</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Form_validation">フォームデータの検証</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">CSS property compatibility table</a></li> +</ul> diff --git a/files/ja/web/html/element/input/month/index.html b/files/ja/web/html/element/input/month/index.html new file mode 100644 index 0000000000..a7c5bfed63 --- /dev/null +++ b/files/ja/web/html/element/input/month/index.html @@ -0,0 +1,490 @@ +--- +title: <input type="month"> +slug: Web/HTML/Element/input/month +tags: + - Date picker + - Element + - Form input + - Forms + - HTML + - HTML forms + - HTML input + - Input + - Input Element + - Input Type + - Number + - Reference + - month +translation_of: Web/HTML/Element/input/month +--- +<div>{{HTMLRef("Input_types")}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <strong><code>month</code></strong> 型は、ユーザーが年と月を入力できるようにする入力フィールドを作成し、年と月を簡単に入力できるようにします。値は "<code>YYYY-MM</code>" の形式の文字列で、 <code>YYYY</code> は4桁の年、 <code>MM</code> は月の番号です。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-month.html", "tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>コントロールのユーザーインターフェイスは、一般にブラウザーによって異なります。現時点では対応が不安定であり、デスクトップ版の Chrome/Opera と Edge — および最新のバージョンのモバイルブラウザー — のみに利用可能な実装があります。 <code>month</code> 入力欄に対応していないブラウザーでは、コントロールは単純な <code><a href="/ja/docs/Web/HTML/Element/input/text"><input type="text"></a></code> に格下げされますが、入力されたテキストが期待されている形式であることを保証するための自動検証が行われることもあります。</p> + +<p><code>month</code> に対応していないブラウザーを使用している場合のために、このスクリーンショットで Chrome と Opera でどのように見えるかを示します。右端にある下向き矢印をクリックすると、年と月を選択できる日付選択が表示されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15391/month-control-chrome.png" style="display: block; height: 216px; margin: 0px auto; width: 273px;"></p> + +<p>Microsoft Edge では、 <code>month</code> コントロールはこのように表示されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15393/month-control-edge.png" style="display: block; height: 389px; margin: 0px auto; width: 227px;"></p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value", "値")}}</strong></td> + <td>年と月を表す {{domxref("DOMString")}}、または空欄</td> + </tr> + <tr> + <td><strong>イベント</strong></td> + <td>{{domxref("HTMLElement/change_event", "change")}} および {{domxref("HTMLElement/input_event", "input")}}</td> + </tr> + <tr> + <td><strong>対応している共通属性</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("step", "input")}}</td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>メソッド</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value" name="Value">値</h2> + +<p>{{domxref("DOMString")}} で、入力欄に入力された年と月の値を YYYY-MM (4桁以上の年に続いてハイフン ("<code>-</code>")、続いて2桁の月) の形式で表します。この入力型で使用される時刻の値の形式について詳しくは、 <a href="/ja/docs/Web/HTML/Date_and_time_formats">HTML で使われる日付や時刻の形式</a>の<a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">月の文字列をご覧ください。</a></p> + +<p><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">入力コントロールの既定値は、次のように {{htmlattrxref("value", "input")}} 属性に年と月を入れることで設定することができます。</a></p> + +<div id="value-example-1"> +<pre class="brush: html notranslate"><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings"><label for="bday-month">生まれた月は？</label> +<input id="bday-month" type="month" name="bday-month" value="2017-06"></a></pre> + +<p><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">{{EmbedLiveSample('value-example-1', 600, 60)}}</a></p> +</div> + +<p><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">一点気を付けなければならないことは、表示される日付の書式は実際の <code>value</code> とは異なるということです。多くの{{Glossary("user agent", "ユーザーエージェント")}}は、年と月をユーザーのオペレーティングシステムに設定されたロケールに適した形式で表示しますが、日付の <code>value</code> は常に <code>yyyy-MM</code> の書式です。</a></p> + +<p><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">When the above value is submitted to the server, for example, it will look like <code>bday-month=1978-06</code>.</a></p> + +<p><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">次のように、 JavaScript で {{domxref("HTMLInputElement.value", "value")}} プロパティを使用して、日付の値を取得したり設定したりすることもできます。</a></p> + +<div id="value-example-2"> +<div class="hidden"> +<pre class="brush: html notranslate"><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings"><label for="bday-month">生まれた月は？</label> +<input id="bday-month" type="month" name="bday-month" value="2017-06"></a></pre> +</div> + +<pre class="brush: js notranslate"><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">var monthControl = document.querySelector('input[type="month"]'); +monthControl.value = '1978-06';</a></pre> + +<p><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">{{EmbedLiveSample("value-example-2", 600, 60)}}</a></p> +</div> + +<h2 id="Additional_attributes" name="Additional_attributes"><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">追加の属性</a></h2> + +<p><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">すべての {{HTMLElement("input")}} 型で共通する属性に加え、 <code>month</code> 型の入力欄は次の属性にも対応しています。</a></p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">属性</a></th> + <th scope="col"><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">説明</a></th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings"><code>{{anch("list")}}</code></a></td> + <td><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">オプションで自動補完の定義済みの選択肢を含む <datalist> 要素の id</a></td> + </tr> + <tr> + <td><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings"><code>{{anch("max")}}</code></a></td> + <td><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">受け付ける最新の年月</a></td> + </tr> + <tr> + <td><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings"><code>{{anch("min")}}</code></a></td> + <td><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">受け付ける最古の年月</a></td> + </tr> + <tr> + <td><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings"><code>{{anch("readonly")}}</code></a></td> + <td><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">論理属性で、存在すれば、入力欄の値が編集できないことを示す</a></td> + </tr> + <tr> + <td><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings"><code>{{anch("step")}}</code></a></td> + <td><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">上下の矢印で値を調整する時や、検証に使用する刻み値</a></td> + </tr> + </tbody> +</table> + +<p id="htmlattrdeflist"><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">{{page("/ja/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</a></p> + +<h3 id="htmlattrdefmax"><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">{{htmlattrdef("max")}}</a></h3> + +<p><a href="/ja/docs/Web/HTML/Date_and_time_formats#Month_strings">最新の年月で、上記の{{anch("Value", "値")}}で説明した文字列の書式です。要素に入力された {{htmlattrxref("value", "input")}} がこの日付よりも後の場合、要素は</a><a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code>max</code> 属性の値が "<code>yyyy-MM</code>" の書式に従う妥当な文字列でない場合、要素は最大値を持ちません。</p> + +<p>この値は <code>min</code> 属性で指定されたものより後か、同じ年月を指定する必要があります。</p> + +<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3> + +<p>受け付ける最古の年月で、前述と同じ <code>yyyy-MM</code> の書式です。要素の {{htmlattrxref("value", "input")}} がこれより前の場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code>min</code> 属性の値が "<code>yyyy-MM-dd</code>" の書式に従う妥当な文字列でない場合、要素は最小値を持ちません。</p> + +<p>この値は <code>max</code> 属性で指定されたものより前か、同じ年月を指定する必要があります。</p> + +<h3 id="htmlattrdefreadonly">{{htmlattrdef("readonly")}}</h3> + +<p>論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 <code>value</code> は、 JavaScript コードから直接 {{domxref("HTMLInputElement.value")}} プロパティを設定することで変更することができます。</p> + +<div class="note"> +<p><strong>注:</strong> 読み取り専用フィールドは値を持てないため、 <code>required</code> は <code>readonly</code> 属性も指定されている入力欄には効果がありません。</p> +</div> + +<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3> + +<p>{{page("/ja/docs/Web/HTML/Element/input/number", "step-include")}}</p> + +<p><code>date</code> 入力欄では、 <code>step</code> の値は月数で指定され、倍率は1です (数値も月単位であるため)。 <code>step</code> の既定値は 1 です。</p> + +<h2 id="Using_month_inputs" name="Using_month_inputs">month 入力欄の使用</h2> + +<p>日付に関する入力欄は (<code>month</code> を含め) 一見すると便利に見えます。日付の選択に簡単なユーザーインターフェイスを提供し、サーバーに送信するデータの書式をユーザーのロケールに関係なく正規化してくれます。しかし、現時点ではブラウザーの対応が限定されているため、 <code><input type="month"></code> には問題があります。</p> + +<p><code><input type="month"></code> の基本的な使い方と少し複雑な使い方を見てみてから、その後でブラウザーの互換性の問題を緩和するアドバイスを提供しましょう ({{anch("Handling browser support", "ブラウザーの互換性の扱い")}} を参照してください)。</p> + +<h3 id="Basic_uses_of_month" name="Basic_uses_of_month">月入力の基本的な使用</h3> + +<p>もっとも単純な <code><input type="month"></code> の使用方法は、次のように基本的な {{HTMLElement("input")}} と {{htmlelement("label")}} 要素の組み合わせです。</p> + +<pre class="brush: html notranslate"><form> + <label for="bday-month">生まれた月を入力してください。</label> + <input id="bday-month" type="month" name="bday-month"> +</form></pre> + +<p>{{EmbedLiveSample('Basic_uses_of_month', 600, 40)}}</p> + +<h3 id="Setting_maximum_and_minimum_dates" name="Setting_maximum_and_minimum_dates">日付の最大値と最小値の設定</h3> + +<p>{{htmlattrxref("min", "input")}} および {{htmlattrxref("max", "input")}} 属性を使用して、ユーザーが選択できる日付の範囲を制限することができます。次の例では、日付の最小値を <code>1900-01</code> に、日付の最大値を <code>1999-12</code> に指定しています。</p> + +<pre class="brush: html notranslate"><form> + <label for="bday-month">生まれた月を入力してください。</label> + <input id="bday-month" type="month" name="bday-month" + min="1900-01" max="1999-12"> +</form></pre> + +<p>{{EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40)}}</p> + +<p>次のような結果になります。</p> + +<ul> + <li>1900年1月から1999年12月までの間の月のみが選択できます。この範囲から外れた月は、コントロール内でスクロールできません。</li> + <li>使用しているブラウザーによりますが、指定された範囲外の月が月選択で選択できないか (Edge など)、無効になるものの ({{anch("Validation", "検証")}} を参照) 選択できるか (Chrome など) だということが分かるでしょう。</li> +</ul> + +<h3 id="Controlling_input_size" name="Controlling_input_size">入力欄の寸法の制御</h3> + +<p><code><input type="month"></code> は {{htmlattrxref("size", "input")}} のような寸法に関する属性には対応していません。寸法を変更する必要がある場合は、 <a href="/ja/docs/Web/CSS">CSS</a> を使用する必要があります。</p> + +<h2 id="Validation" name="Validation">検証</h2> + +<p>既定で、 <code><input type="month"></code> は入力された値の検証を行いません。ユーザーインターフェイスの実装は一般的に、日付でないものの入力をさせないからです。これは便利です。しかし、それでも <code>month</code> 入力欄を空のまま、または無効な日付 (例えば4月32日など) を入力してフォームを送信することが可能です。</p> + +<p>これを防ぐために、 {{htmlattrxref("min", "input")}} と {{htmlattrxref("max", "input")}} を用いて利用可能な日を制限することができ ({{anch("Setting maximum and minimum dates", "日付の最大値と最小値の設定")}} を参照)、加えて {{htmlattrxref("required", "input")}} 属性を用いて、日付を入力することを必須にすることができます。結果として、対応しているブラウザーは、範囲外の日付や空の日付フィールドを送信しようとするとエラーを表示します。</p> + +<p>例を見てみましょう。ここで日付の最小値と最大値を設定し、入力欄を必須にしました。</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="month">何月にいらっしゃいますか？ (夏期間のみ、 yyyy-mm)</label> + <input id="month" type="month" name="month" + min="2017-06" max="2017-09" required> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="フォームを送信"> + </div> +</form></pre> + +<p>年と月を指定せずに (または設定した範囲を外れた日付を) 送信しようとすると、ブラウザーはエラーを表示します。例を実行してみましょう。</p> + +<p>{{EmbedLiveSample('Validation', 600, 120)}}</p> + +<p>対応しているブラウザーで入力しなかった場合のスクリーンショットです。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15395/month-required.png" style="display: block; margin: 0 auto;"></p> + +<p>上記の例の CSS です。 CSS の {{cssxref(":valid")}} および {{cssxref(":invalid")}} プロパティを使用して、現在の値が有効かどうかに基づいてスタイルを設定しています。アイコンは入力欄そのものではなく、入力欄の隣の {{htmlelement("span")}} に置くようにしないと、 Chrome ではコントロールの内側にコンテンツを生成するので、正しく整形したり表示したりすることができません。</p> + +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> + +<div class="warning"> +<p><strong>重要</strong>: HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用にはなりません。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、誤った種類のデータなど) が送信された場合に障害が発生するおそれがあります。</p> +</div> + +<h2 id="Handling_browser_support" name="Handling_browser_support">ブラウザーの対応の扱い</h2> + +<p>前述のように、現時点で日付入力を書く上で一番の問題は、多くの主要なブラウザーがまだすべてを実装している訳ではないということです。デスクトップでは Chrome/Opera と Edge のみが対応しており、モバイルでは多くの最新のブラウザーが対応しています。例えば、 <code>month</code> の選択画面は Android 版 Chrome ではこのように表示されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15397/month-android.png" style="display: block; margin: 0 auto;"></p> + +<p>対応していないブラウザーでは、文字列入力欄に安全に格下げされますが、これはユーザーインターフェイスの一貫性 (表示されるコントロールが異なること) とデータの扱いの両方で問題を生みます。</p> + +<p>2番目の問題はより深刻です。すでに述べたように、 <code>month</code> 入力欄では、実際の値が常に <code>yyyy-mm</code> の書式で正規化されます。一方、既定の設定では、 <code>text</code> 入力欄ではどの書式で入力されるかの認識がなく、以下のように人間が日付を書く様々な方法で入力される可能性があります。</p> + +<ul> + <li><code>yyyy/mm</code> (2018/07)</li> + <li><code>yyyymm</code> (201807)</li> + <li><code>mm-yyyy</code> (07-2018)</li> + <li><code>yyyy-mm</code> (2018-07)</li> + <li><code>Month yyyy</code> (July 2018)</li> + <li>... などなど。</li> +</ul> + +<p>これを回避する方法の一つは、 <code>month</code> 入力欄に {{htmlattrxref("pattern", "input")}} 属性を付けることです。 <code>month</code> 入力欄はこれを使用しないので、 <code>text</code> 入力欄などとして扱うようフォールバックされたときに、このパターンを使用します。例えば、次の例を <code>month</code> 入力欄に未対応のブラウザーで見てみてください。</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="month">何月にいらっしゃいますか？ (夏期間のみ、 yyyy-mm)</label> + <input id="month" type="month" name="month" + min="2017-06" max="2017-09" required + pattern="[0-9]{4}-[0-9]{2}"> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="フォームを送信"> + </div> +</form></pre> + +<p>{{ EmbedLiveSample('Handling_browser_support', 600, 100) }}</p> + +<p><code>nnnn-nn</code> のパターン (<code>n</code> は数字の0から9) に一致しない文字列を入力して送信しようとすると、エラーメッセージが表示される (そして入力欄が無効として強調表示される) のが分かるでしょう。もちろん、これでユーザーが無効な日付を入力したり (<code>0000-42</code> など)、パターンに合わない誤った書式の日付が入力されたりすることを止めることはできません。</p> + +<p>また、ユーザーが数ある日付形式の中で期待されるものがどれであるかを知らない可能性もあります。後はその分の作業が残っています。</p> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<p>(すべての主要なブラウザーが対応するまでの間) ブラウザーに依存しない方法によってフォームで日付を扱う最善の方法は、ユーザーが年と月を別々なコントロール ({{htmlelement("select")}} 要素が一般的です。以下の実装を見てください) に入力するようにするか、 <a href="https://jqueryui.com/datepicker/">jQuery date picker</a> のような JavaScript ライブラリを使用することです。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例では、ユーザーが都市と月を選択できるよう設計されたユーザーインターフェイスの要素を2組作成します。一つ目はネイティブの <code>month</code> 入力欄であり、もう一つは年と月を個別に選択することができる一組の {{HTMLElement("select")}} 要素で、まだ <code><input type="month"></code> に対応していないブラウザーのためのものです。</p> + +<p>{{EmbedLiveSample('Examples', 600, 140)}}</p> + +<h3 id="HTML">HTML</h3> + +<p>年と月を入力するフォームはこのようになります。</p> + +<pre class="brush: html notranslate"><form> + <div class="nativeDatePicker"> + <label for="month-visit">何月にいらっしゃいますか？</label> + <input type="month" id="month-visit" name="month-visit"> + <span class="validity"></span> + </div> + <p class="fallbackLabel">何月にいらっしゃいますか？</p> + <div class="fallbackDatePicker"> + <div> + <span> + <select id="year" name="year"> + </select> + <label for="year">年</label> + </span> + <span> + <select id="month" name="month"> + <option selected>1</option> + <option>2</option> + <option>3</option> + <option>4</option> + <option>5</option> + <option>6</option> + <option>7</option> + <option>8</option> + <option>9</option> + <option>10</option> + <option>11</option> + <option>12</option> + </select> + <label for="month">月</label> + </span> + </div> + </div> +</form></pre> + +<p><code>nativeDatePicker</code> の ID がついた {{HTMLElement("div")}} は、年と月をリクエストするために <code>month</code> 入力欄を用いるのに対し、 <code>fallbackDatePicker</code> の ID がついた <code><div></code> は代わりに一組の <code><select></code> 要素を使用します。一つ目は年を、二つ目は月を入力します。</p> + +<p>月を選択する <code><select></code> は、変化しないので月をハードコーディングしています (ローカライズの問題が残っていますが)。年に利用できる値は、現在の年に応じて動的に生成されます (どのように動作するかについての詳細な説明は、以下のコードのコメントを参照してください)。</p> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<h3 id="JavaScript">JavaScript</h3> + +<p>どちらの方法を使用するかを選択し、非ネイティブの年の <code><select></code> に年の一覧を設定する JavaScript コードは以下の通りです。</p> + +<p>この例の面白いもう一つの部分は、機能の検出コードです。ブラウザーが <code><input type="month"></code> に対応しているかどうかを検出するために、新たな {{htmlelement("input")}} 要素を生成し、その <code>type</code> を <code>month</code> に設定して、すぐに type に何が設定されたかをチェックします。対応していないブラウザーでは、 <code>month</code> が フォールバックされて <code>text</code> が返されます。 <code><input type="month"></code> に対応していない場合は、ネイティブの日付選択を非表示にしてフォールバック用の選択ユーザーインターフェイスを表示します。</p> + +<pre class="brush: js notranslate">// define variables +var nativePicker = document.querySelector('.nativeDatePicker'); +var fallbackPicker = document.querySelector('.fallbackDatePicker'); +var fallbackLabel = document.querySelector('.fallbackLabel'); + +var yearSelect = document.querySelector('#year'); +var monthSelect = document.querySelector('#month'); + +// hide fallback initially +fallbackPicker.style.display = 'none'; +fallbackLabel.style.display = 'none'; + +// test whether a new date input falls back to a text input or not +var test = document.createElement('input'); + +try { + test.type = 'month'; +} catch (e) { + console.log(e.description); +} + +// if it does, run the code inside the if() {} block +if(test.type === 'text') { + // hide the native picker and show the fallback + nativePicker.style.display = 'none'; + fallbackPicker.style.display = 'block'; + fallbackLabel.style.display = 'block'; + + // populate the years dynamically + // (the months are always the same, therefore hardcoded) + populateYears(); +} + +function populateYears() { + // get the current year as a number + var date = new Date(); + var year = date.getFullYear(); + + // Make this year, and the 100 years before it available in the year <select> + for(var i = 0; i <= 100; i++) { + var option = document.createElement('option'); + option.textContent = year-i; + yearSelect.appendChild(option); + } +}</pre> + +<div class="note"> +<p><strong>注</strong>: 53週ある年もあることを忘れないでください（<a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">年あたりの週数</a>を参照）。商品のアプリを開発するときはこれを念頭に置いておく必要があります。</p> +</div> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#month-state-(type=month)', '<input type="month">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.input.input-month")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>全般的な {{HTMLElement("input")}} およびその操作に使用する{{domxref("HTMLInputElement")}} インターフェイス</li> + <li><a href="/ja/docs/Web/HTML/Date_and_time_formats">HTML で使用される日付と時刻の書式</a></li> + <li><a href="/ja/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">日付と時刻の選択のチュートリアル</a></li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/datetime-local"><input type="datetime-local"></a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/date"><input type="date"></a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/time"><input type="time"></a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/week"><input type="week"></a></code></li> + <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li> +</ul> diff --git a/files/ja/web/html/element/input/number/index.html b/files/ja/web/html/element/input/number/index.html new file mode 100644 index 0000000000..8177c9f00f --- /dev/null +++ b/files/ja/web/html/element/input/number/index.html @@ -0,0 +1,451 @@ +--- +title: <input type="number"> +slug: Web/HTML/Element/input/number +tags: + - Element + - Forms + - HTML + - HTML forms + - Input + - Input Element + - Input Type + - Number + - Reference +translation_of: Web/HTML/Element/input/number +--- +<div>{{HTMLRef("Input_types")}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <strong><code>number</code></strong> 型は、ユーザーに数値を入力させるために使用されます。数値以外の入力を除外するための値検証機能を内蔵しています。</span>ブラウザーによっては、マウスや指先のタップを使用して値をユーザーが値を増減させるための矢印を提供していることもあります。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-number.html", "tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p><code>number</code> 型に対応していないブラウザーでは、 <code>number</code> 入力欄は <code>text</code> 入力欄で代替されます。</p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value", "値")}}</strong></td> + <td>数字を表す {{jsxref("Number")}}、または空欄</td> + </tr> + <tr> + <td><strong>イベント</strong></td> + <td>{{domxref("HTMLElement/change_event", "change")}} および {{domxref("HTMLElement/input_event", "input")}}</td> + </tr> + <tr> + <td><strong>対応している共通属性</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}</td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code></td> + </tr> + <tr> + <td><strong>メソッド</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value" name="Value">値</h2> + +<p>入力欄に入力された数字の値を表す {{jsxref("Number")}} です。 {{htmlattrxref("value", "input")}} 属性に数値を設定することで、次のように入力欄の既定値を設定することができます。</p> + +<pre class="brush: html notranslate"><input id="number" type="number" value="42"></pre> + +<p>{{EmbedLiveSample('Value', 600, 40)}}</p> + +<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2> + +<p>すべての {{HTMLElement("input")}} 型で共通する属性に加え、 <code>number</code> 型の入力欄は次の属性にも対応しています。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("list")}}</code></td> + <td>任意の定義済み自動補完の選択肢を保持する {{HTMLElement("datalist")}} 要素の <code>id</code> です。</td> + </tr> + <tr> + <td><code>{{anch("max")}}</code></td> + <td>この入力欄で受け付ける最大値</td> + </tr> + <tr> + <td><code>{{anch("min")}}</code></td> + <td>この入力欄で受け付ける最小値</td> + </tr> + <tr> + <td><code>{{anch("placeholder")}}</code></td> + <td>入力欄の中が空の時に表示される入力例の値</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>論理値で、値が読み取り専用であるかを示す</td> + </tr> + <tr> + <td><code>{{anch("step")}}</code></td> + <td>上下の矢印で値を調整する時や、検証に使用する刻み値</td> + </tr> + </tbody> +</table> + +<p id="htmlattrdeflist">{{page("/ja/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p> + +<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3> + +<p>この入力欄が受け付ける最大値です。要素に入力された {{htmlattrxref("value", "input")}} がこれを超えた場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code>max</code> 属性の値が数値でない場合、要素は最大値を持ちません。</p> + +<p>この値は <code>min</code> 属性の値より大きいか、等しくしなければなりません。</p> + +<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3> + +<p>この入力欄が受け付ける最小値です。要素の {{htmlattrxref("value", "input")}} がこれより小さい場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code>min</code> 属性の値が数値でない場合、要素は最小値を持ちません。</p> + +<p>この値は <code>max</code> 属性の値より小さいか、等しくしなければなりません。</p> + +<p>{{page("/ja/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> + +<p>{{page("/ja/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> + +<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3> + +<div id="step-include"> +<p><code>step</code> 属性は値が吸着する粒度を指定する数値、または後述する特殊な値 <code>any</code> です。刻みの基準値に等しい値 (指定されていれば <code>{{anch("min")}}</code>、そうでなければ {{htmlattrxref("value", "input")}}、どちらも設定されていなければ適切な既定値) のみが妥当となります。</p> + +<p>文字列値の <code>any</code> は刻みがなく、どの値でも許可されることを意味します (<code>{{anch("min")}}</code> や <code>{{anch("max")}}</code> など、他の制約に制限されます)。</p> + +<div class="note"> +<p><strong>注:</strong> ユーザーがデータを入力したときには刻みの設定には吸着せず、{{Glossary("user agent", "ユーザーエージェント")}}は直近の妥当な値、同じ距離の値の選択肢が二つあった場合は、正の方向の推奨値に丸められます。</p> +</div> +</div> + +<p><code>number</code> 入力欄の既定の刻み値は <code>1</code> であり、刻みの基準値が整数ではない場合を<em>除いて</em>、整数の入力のみを許可します。</p> + +<h2 id="Using_number_inputs" name="Using_number_inputs">number 入力欄の使用</h2> + +<p><code><input type="number"></code> 要素は、フォームに数値を入力するユーザーインターフェイスとロジックを構築する際に、作業を簡略化するのに役立ちます。 <code>type</code> の値に正しく <code>number</code> を設定して数値入力を作成すると、入力された文字列が数値かどうかが自動的に検証されるようになり、通常は値を1つずつ上下するための上下ボタンの組み合わせが表示されます。</p> + +<div class="warning"> +<p><strong>重要</strong>: 論理的には、数値入力欄の中に数字以外を入力することはできないはずです。これらは、ブラウザー間でこれに関するいくつかの意見の相違があるようです。 {{bug(1398528)}} を参照してください。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: ユーザーが HTML をその場面の裏でいじることができることを意識しておくことは極めて重要です。ですから、安全を目的として、サイトでクライアント側の値検証機能のみを使用しては<em>いけません</em>。何らかのセキュリティ上の問題を含む可能性がある値が提供されるトランザクションの場合は、いずれもサーバー側で値検証を行う<em>必要があります</em>。</p> +</div> + +<p>モバイルブラウザーでは、ユーザーが値を入力しようとした時に、数値入力に適した特別なキーボードを表示することで、使い勝手をさらに向上させます。次のスクリーンショットは、 Android の Firefox で撮影されたものです。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14963/number-keyboard-fxa.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<h3 id="A_simple_number_input" name="A_simple_number_input">単純な数値入力</h3> + +<p>最も基本的なフォームでは、次のように数値入力を実装することができます。</p> + +<pre class="brush: html notranslate"><label for="ticketNum">購入するチケットの枚数:</label> +<input id="ticketNum" type="number" name="ticketNum" value="0"></pre> + +<p>{{EmbedLiveSample('A_simple_number_input', 600, 40)}}</p> + +<p>数値入力は空の場合と単一の数値が入力された場合に妥当とみなされますが、それ以下は無効とみなされます。 {{htmlattrxref("required", "input")}} 属性が使用された場合は、入力欄が空の場合に妥当とみなされなくなります。</p> + +<div class="note"> +<p><strong>注</strong>: <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#valid-floating-point-number">有効な浮動小数点数</a>を受け入れることができます (つまり、 <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a> でも <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a> でもないもの)。</p> +</div> + +<h3 id="Placeholders" name="Placeholders">プレイスホルダー</h3> + +<p>フォームがどのような入力データを取るのかについての行内のヒントを提供すると、有益なことがあります。これはページのデザインでそれぞれの {{HTMLElement("input")}} に説明のラベルを付けることができない場合に特に重要になります。ここで<strong>プレイスホルダー</strong>が登場します。プレイスホルダーはほとんどの場合、入力される <code>value</code> が取るべき値の形式のヒントを説明するために使用される値です。これは <code>value</code> が <code>""</code> の時に入力欄の中に表示されます。入力欄にデータが入力されると、プレイスホルダーは非表示になり、入力欄が空欄になると、プレイスホルダーは再度表示されます。</p> + +<p>ここで、 <code>number</code> 入力欄に "<code>10の倍数</code>" というプレイスホルダーを設定します。なお、プレイスホルダーが非表示になったり再表示されたりするのは、入力欄の中身を変更したときです。</p> + +<pre class="brush: html notranslate"><input type="number" placeholder="10の倍数"></pre> + +<p>{{EmbedLiveSample('Placeholders', 600, 40)}}</p> + +<h3 id="Controlling_step_size" name="Controlling_step_size">刻み幅の制御</h3> + +<p>既定で、数値を増減させるための増減ボタンは、1刻みで値を増減させます。 {{htmlattrxref("step", "input")}} 属性を設定することで、刻みの量を指定する数値の値を変更できます。上記の例は10の倍数を指定すると言っていますので、 <code>step</code> の値を <code>10</code> にすることが妥当でしょう。</p> + +<pre class="brush: html notranslate"><input type="number" placeholder="multiple of 10" step="10"></pre> + +<p>{{EmbedLiveSample('Controlling_step_size', 600, 40)}}</p> + +<p>この例で、増減ボタンが値を1ずつではなく10ずつ増減させることが分かるでしょう。手動で10の倍数ではない数値を入力することができますが、無効な値とみなされるでしょう。</p> + +<h3 id="Specifying_minimum_and_maximum_values" name="Specifying_minimum_and_maximum_values">最小値と最大値の指定</h3> + +<p>{{htmlattrxref("min", "input")}} 及び {{htmlattrxref("max", "input")}} 属性を使用して、入力欄が保持できる最小値と最大値を指定することができます。例えば、最小値を <code>0</code> に、最大値を <code>100</code> に設定する例をご紹介しましょう。</p> + +<pre class="brush: html notranslate"><input type="number" placeholder="multiple of 10" step="10" min="0" max="100"></pre> + +<p>{{EmbedLiveSample('Specifying_minimum_and_maximum_values', 600, 40)}}</p> + +<p>更新したこの版では、増減ボタンで0未満や100より大きい数値を設定することができないことにお気づきでしょう。手動でこの範囲の外の値を入力することもできますが、無効な値とみなされるでしょう。</p> + +<h3 id="Allowing_decimal_values" name="Allowing_decimal_values">小数が使用できるようにする</h3> + +<p>数値入力の問題の一つが、既定で刻みが1になっていることです。小数を含む数値 (たとえば "1.0") を入力しようとすると、無効な値とみなされるでしょう。小数が必要な値を入力させたい場合は、これを <code>step</code> の値に反映させる必要があります（例えば <code>step="0.01"</code> で小数第2位まで許可します）。単純な例を示します。</p> + +<pre class="brush: html notranslate"><input type="number" placeholder="1.0" step="0.01" min="0" max="10"></pre> + +<p>{{EmbedLiveSample("Allowing_decimal_values", 600, 40)}}</p> + +<p>この例では <code>0.0</code> から <code>10.0</code> までで、小数第2位までの値が許容されます。この例では "9.52" は妥当になりますが、 "9.521" は妥当ではありません。</p> + +<h3 id="Controlling_input_size" name="Controlling_input_size">入力欄の寸法の制御</h3> + +<p><code>number</code> 型の {{HTMLElement("input")}} 要素では、 {{htmlattrxref("size", "input")}} のような寸法を決める属性には対応していません。入力欄の寸法を変更するには <a href="/ja/docs/Web/CSS">CSS</a> に頼る必要があります。</p> + +<p>例えば、入力欄の幅を数字3桁の入力に必要なだけの幅に調整するには、 HTML に {{htmlattrxref("id")}} を設定し、これから入力欄を短くしたときに文字列が表示できなくならないように、プレイスホルダーを短縮します。</p> + +<pre class="brush: html notranslate"><input type="number" placeholder="x10" step="10" min="0" max="100" id="number"></pre> + +<p>それから、要素の <code>id</code> が <code>#number</code> である要素の幅を短くします。</p> + +<pre class="brush: css notranslate">#number { + width: 3em; +}</pre> + +<p>結果は以下のように表示されます。</p> + +<p>{{EmbedLiveSample('Controlling_input_size', 600, 40)}}</p> + +<h3 id="Offering_suggested_values" name="Offering_suggested_values">サジェスト値の提供</h3> + +<p>{{htmlattrxref("list", "input")}} 属性に、サジェスト値あたり一つの {{HTMLElement("option")}} 要素を含んだ {{HTMLElement("datalist")}} の {{htmlattrxref("id")}} を値として入れることにより、ユーザーの選択することができる既定の選択肢のリストを提供することができます。それぞれの <code>option</code> の <code>value</code> は、数値入力ボックスのサジェスト値に関係します。</p> + +<pre class="brush: html notranslate"><input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers"> +<span class="validity"></span> + +<datalist id="defaultNumbers"> + <option value="10045678"> + <option value="103421"> + <option value="11111111"> + <option value="12345678"> + <option value="12999922"> +</datalist></pre> + +<p>{{EmbedLiveSample("Offering_suggested_values", 600, 40)}}</p> + +<div class="note"> +<p><code>number</code> 入力欄での {{htmlattrxref("list", "input")}} 属性の使用はすべてのブラウザーで対応しているわけではありません。例えば Chrome や Opera では動作しますが、 Firefox では動作しません。</p> +</div> + +<h2 id="Validation" name="Validation">検証</h2> + +<p>すでに <code>number</code> 入力欄における幾つかの検証機能については言及しましたが、ここで確認してみましょう。</p> + +<ul> + <li><code><input type="number"></code> 要素は、数値 (または <code>required</code> が指定されていない場合は空欄) ではない入力を自動的に違反とします。</li> + <li>{{htmlattrxref("required", "input")}} 属性を使用すると、空欄の入力を違反とします。 (つまり、入力欄は埋める<em>必要があります</em>。)</li> + <li>{{htmlattrxref("step", "input")}} 属性を使用すると、妥当な値を特定の刻みの値 (例えば、10の倍数) に制約することができます。</li> + <li>{{htmlattrxref("min", "input")}} および {{htmlattrxref("max", "input")}} 属性を使用すると、妥当な値の下限と上限を設けることができます。</li> +</ul> + +<p>次の例は上記の機能のすべてを例示しており、また幾らか CSS を用いて、 <code>input</code> の値によって、妥当または違反のアイコンを表示するようにします。</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="balloons">風船の注文数 (10の倍数):</label> + <input id="balloons" type="number" name="balloons" step="10" min="0" max="100" required> + <span class="validity"></span> + </div> + <div> + <input type="submit"> + </div> +</form></pre> + +<p>{{EmbedLiveSample("Validation", 600, 80)}}</p> + +<p>様々な違反する値を入力して、フォームを送信しようとしてみてください。例えば、値なし、0未満または100を超えた値、10の倍数ではない値、数値でない値などです。そして、それぞれにおいてブラウザーがどのようなエラーメッセージを表示するかを確認してください。</p> + +<p>この例で適用される CSS は以下の通りです。</p> + +<pre class="brush: css notranslate">div { + margin-bottom: 10px; +} + +input:invalid+span:after { + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + content: '✓'; + padding-left: 5px; +}</pre> + +<p>ここで、 {{cssxref(":invalid")}} および {{cssxref(":valid")}} 擬似クラスを用いて、隣の {{htmlelement("span")}} 要素の生成コンテンツとして無効または妥当の適切なアイコンを表示し、妥当性の視覚的なインジケーターにすることができます。</p> + +<p>別な <code><span></code> 要素に入れたのは自由度を高めるためです。ブラウザーによっては一部の種類のフォーム入力欄において、あまり効果的に生成コンテンツを表示できないことがあります (<a href="/ja/docs/Web/HTML/Element/input/date#Validation"><code><input type="date"></code> の検証</a>の節の例を読んでください)。</p> + +<div class="warning"> +<p><strong>重要</strong>: HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するサーバースクリプトの代用には<em>なりません</em>。</p> + +<p>HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML をバイパスし、サーバーに直接データを送信することも可能です。</p> + +<p>サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、間違った種類のデータなど) がデータベースに入力された場合に災害が発生するおそれがあります。</p> +</div> + +<h3 id="Pattern_validation" name="Pattern_validation">パターンによる値検証</h3> + +<p><code><input type="number"></code> 要素は {{htmlattrxref("pattern", "input")}} 属性を使用して、入力された値が特定の正規表現パターンを満たすようにすることに対応していません。</p> + +<p>これは、 number 入力欄は数値以外の何が入力されても妥当にはならないからであり、上記で説明したとおり、 {{htmlattrxref("min", "input")}} および {{htmlattrxref("max", "input")}} 属性を用いて妥当な数値の最大値および最小値を制約することができます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>すでに既定では増分が <code>1</code> であるという事実を扱いましたので、 {{htmlattrxref("step", "input")}} 属性を使用して実数を入力できるようにすることができます。もう少し詳しく見てみましょう。</p> + +<p>以下の例は、ユーザーの身長を入力するフォームです。既定では慎重をメートル単位で受け付けますが、関連するボタンをクリックすることでフォームがフィートとインチを受け付けるように変更することができます。メートル単位の身長の入力欄は小数第2位まで受け付けます。</p> + +<p>{{EmbedLiveSample("Examples", 600, 100)}}</p> + +<p>HTML は次のようになります。</p> + +<pre class="brush: html notranslate"><form> + <div class="metersInputGroup"> + <label for="meters">あなたの身長を入力してください (メートル):</label> + <input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="例 1.78" required> + <span class="validity"></span> + </div> + <div class="feetInputGroup" style="display: none;"> + <span>あなたの身長を入力してください — </span> + <label for="feet">フィート:</label> + <input id="feet" type="number" name="feet" min="0" step="1"> + <span class="validity"></span> + <label for="inches">インチ:</label> + <input id="inches" type="number" name="inches" min="0" max="11" step="1"> + <span class="validity"></span> + </div> + <div> + <input type="button" class="meters" value="身長をフィートとインチで入力"> + </div> + <div> + <input type="submit" value="フォームを送信"> + </div> +</form></pre> + +<p>これまでの記事ですでに見てきた属性の多くを使用していることがわかります。センチメートル単位のメートル値を受け入れるため、 <code>step</code> の値を <code>0.01</code> に設定して、 <em>1.78</em> のような値が無効とされないようにしました。また、その入力欄のプレイスホルダーも提供しました。</p> + +<p>最初はフィートとインチの入力欄を <code>style="display: none;"</code> を使用して非表示にしているため、既定はメートルでの入力です。</p> + +<p>次に、 CSS に進みます。これは、以前に見た検証のスタイル付けととても良く似ています。ここで注目するところはありません。</p> + +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> + +<p>そして最後に、 JavaScript です。</p> + +<pre class="brush: js notranslate">let metersInputGroup = document.querySelector('.metersInputGroup'); +let feetInputGroup = document.querySelector('.feetInputGroup'); +let metersInput = document.querySelector('#meters'); +let feetInput = document.querySelector('#feet'); +let inchesInput = document.querySelector('#inches'); +let switchBtn = document.querySelector('input[type="button"]'); + +switchBtn.addEventListener('click', function() { + if(switchBtn.getAttribute('class') === 'meters') { + switchBtn.setAttribute('class', 'feet'); + switchBtn.value = '身長をメートルで入力'; + + metersInputGroup.style.display = 'none'; + feetInputGroup.style.display = 'block'; + + feetInput.setAttribute('required', ''); + inchesInput.setAttribute('required', ''); + metersInput.removeAttribute('required'); + + metersInput.value = ''; + } else { + switchBtn.setAttribute('class', 'meters'); + switchBtn.value = '身長をフィートとインチで入力'; + + metersInputGroup.style.display = 'block'; + feetInputGroup.style.display = 'none'; + + feetInput.removeAttribute('required'); + inchesInput.removeAttribute('required'); + metersInput.setAttribute('required', ''); + + feetInput.value = ''; + inchesInput.value = ''; + } +});</pre> + +<p>いくつかの変数を宣言した後、イベントリスナーを <code>button</code> に追加し、切り替えの仕組みを制御しています。これはとても単純で、ほとんどがボタンの <code>class</code> と {{HTMLElement("label")}} を変更するためのものであり、そしてボタンが押されたときに2組の入力の display 値を更新しています。</p> + +<p>(なお、ここではメートルとフィート/インチの間の変換は行っていませんが、実際のウェブアプリケーションではおそらく行うでしょう。)</p> + +<div class="note"> +<p><strong>注:</strong> ユーザーがボタンをクリックしたとき、 <code>required</code> 属性を非表示にする入力欄から削除し、 <code>value</code> 属性を空にしています。これは入力欄の両方の組が入力されていなくてもフォームを送信することができるようにしています。これはユーザーが意図していないデータをフォームが送信しないことを保証するものでもあります。</p> + +<p>これを行わないと、フィート/インチ<strong>と</strong>メートルの両方を入力してフォームを送信することができてしまいます。</p> +</div> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#number-state-(type=number)', '<input type="number">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>初回定義</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#number-state-typenumber', '<input type="number">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.input.input-number")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Forms">HTML フォームガイド</a></li> + <li>{{HTMLElement("input")}}</li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/tel"><input type="tel"></a></code></li> + <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li> +</ul> diff --git a/files/ja/web/html/element/input/password/index.html b/files/ja/web/html/element/input/password/index.html new file mode 100644 index 0000000000..16dbe563b6 --- /dev/null +++ b/files/ja/web/html/element/input/password/index.html @@ -0,0 +1,315 @@ +--- +title: <input type="password"> +slug: Web/HTML/Element/input/password +tags: + - Element + - Forms + - HTML + - HTML Input Types + - HTML Inputs + - HTML Password Input + - HTML forms + - HTML input tag + - Input Types + - Reference + - Web + - password +translation_of: Web/HTML/Element/input/password +--- +<div>{{HTMLRef("Input_types")}}</div> + +<p><span class="seoSummary"><code><input></code> 要素の <strong><code>password</code></strong> 型は、パスワードを安全に入力する方法を提供します。</span>この要素はプレーンテキストの 1 行編集コントロールとして表示され、そのテキストは読み取られることがないように、1 つ 1 つの文字がアスタリスク ("*") やドット ("•") のような記号に置き換えられ、隠されます。この文字は{{Glossary("user agent", "ユーザーエージェント")}}や {{Glossary("OS")}} によって変わります。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-password.html", "tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>詳細な入力プロセスの動作は、ブラウザーによって異なっている場合があります。例えば、モバイル端末ではしばしば、ユーザーが思ったとおりのキーを押したかどうかを確かめることができるように、入力した文字を、隠す前に一瞬だけ表示します。これは特に、キーのサイズが小さく、押し間違いが起こりやすい、仮想キーボードの場合に役立ちます。</p> + +<div class="note"> +<p>パスワードのような機密情報が含まれているフォーム (ログインフォームなど) は、 HTTPS で送信するべきです。現在では多くのブラウザーで、安全ではないログインフォームの場合に警告を行う仕組みが実装されています。詳細は<a href="/ja/docs/Web/Security/Insecure_passwords">安全でないパスワード</a>を参照してください。</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value", "値")}}</strong></td> + <td>パスワードを表す {{domxref("DOMString")}}、または空欄</td> + </tr> + <tr> + <td><strong>イベント</strong></td> + <td>{{event("change")}} および {{event("input")}}</td> + </tr> + <tr> + <td><strong>対応している共通属性</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("inputmode", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}}, {{htmlattrxref("size", "input")}}</td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>selectionStart</code>, <code>selectionEnd</code>, <code>selectionDirection</code>, <code>value</code></td> + </tr> + <tr> + <td><strong>メソッド</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value" name="Value">値</h2> + +<p>{{htmlattrxref("value", "input")}} 属性は、パスワードを入力するために使われているテキスト編集コントロールの、現在の内容である {{domxref("DOMString")}} を格納します。ユーザーが何も入力していない場合、この値は空文字列 (<code>" "</code>) です。{{htmlattrxref("required")}} プロパティが指定されている場合、パスワード編集ボックスが妥当となるためには、空文字列以外の値を含まなければなりません。</p> + +<p>{{htmlattrxref("pattern", "input")}} 属性が指定されている場合、<code>"password"</code> コントロールの内容は、その値が検証をパスした場合のみ、妥当とみなされます。詳細は {{anch("Validation")}} を参照してください。</p> + +<div class="note"> +<p>改行文字の LF (U+000A) と CR (U+000D) は <code>"password"</code> の値には許容されません。パスワードコントロールに値がセットされるとき、LF 及び CR は値から取り除かれます。</p> +</div> + +<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2> + +<p>型に関係なくすべての {{HTMLElement("input")}} 要素を操作する属性に加え、 <code>password</code> 型の入力欄は次の属性にも対応しています。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("maxlength")}}</code></td> + <td>値が取りうる UTF-16 文字単位での最大長</td> + </tr> + <tr> + <td><code>{{anch("minlength")}}</code></td> + <td>妥当と判断される最小文字数</td> + </tr> + <tr> + <td><code>{{anch("pattern")}}</code></td> + <td>妥当と判断されるために、入力欄の内容が一致する必要がある正規表現</td> + </tr> + <tr> + <td><code>{{anch("placeholder")}}</code></td> + <td>空欄の時に入力欄に表示される入力例の値</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>入力欄の内容を読み取り専用にするかどうかを示す論理属性</td> + </tr> + <tr> + <td><code>{{anch("size")}}</code></td> + <td>入力欄の長さを何文字分にするかを表す数値</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3> + +<p>ユーザーがパスワード入力欄に入力することができる (UTF-16 コード単位での) 最大文字数です。 0 以上の整数値である必要があります。 <code>maxlength</code> が指定されていないか、無効な値が指定されていると、パスワード入力欄には最大文字数が設定されません。この値は <code>minlength</code> の値以上である必要もあります。</p> + +<p>フィールドに入力されたテキストの長さが UTF-16 コード単位で <code>maxlength</code> の長さを超えていると、その入力欄は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。</p> + +<h3 id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</h3> + +<p>ユーザーがパスワード入力欄に入力することができる (UTF-16 コード単位での) 最小文字数です。これは非負の整数値で、 <code>maxlength</code> で指定された値以下である必要があります。 <code>minlength</code> が指定されていないか、無効な値が指定されていると、パスワード入力欄には最小文字数が設定されません。</p> + +<p>入力欄のテキストの長さが UTF-16 コード単位で <code>minlength</code> の長さよりも短いと、その入力欄は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。</p> + +<h3 id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</h3> + +<p>{{page("/ja/docs/Web/HTML/Element/input/text", "pattern-include")}}</p> + +<p>pattern の使用はパスワード入力において、ユーザーが幅広い種類の文字クラスを使用した有効なパスワードを選択して使用するのに役立ちます。パターンを使用すると、大文字・小文字の規則、数桁の数字や区切り記号などの使用を義務づけることができます。詳細と例については{{anch("Validation", "検証")}}の節を参照してください。</p> + +<p>{{page("/ja/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> + +<h3 id="htmlattrdefreadonly">{{htmlattrdef("readonly")}}</h3> + +<p>論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 <code>value</code> は、 JavaScript コードから直接 {{domxref("HTMLInputElement.value")}} プロパティを設定することで変更することができます。</p> + +<div class="note"> +<p><strong>注:</strong> 読み取り専用フィールドは値を持てないため、 <code>required</code> は <code>readonly</code> 属性も指定されている入力欄には効果がありません。</p> +</div> + +<p>{{page("/ja/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p> + +<h2 id="Using_password_inputs" name="Using_password_inputs">パスワード入力欄の使用</h2> + +<p>パスワード入力ボックスは通常、他のテキスト入力ボックスのように動作します。主な違いは、ユーザーの近くにいる人がパスワードを読み取ることを防ぐために、その内容を隠すことです。</p> + +<h3 id="A_simple_password_input" name="A_simple_password_input">シンプルなパスワード入力欄</h3> + +<p>以下は最も基本的なパスワード入力欄で、{{HTMLElement("label")}} 要素を使ったラベルとともに設置されています。</p> + +<pre class="brush: html notranslate"><label for="userPassword">Password: </label> +<input id="userPassword" type="password"></pre> + +<p>{{EmbedLiveSample("A_simple_password_input", 600, 40)}}</p> + +<h3 id="Allowing_autocomplete" name="Allowing_autocomplete">オートコンプリートを許可する</h3> + +<p>パスワードを自動的に入力するため、ユーザーのパスワードマネージャを許可するには、{{htmlattrxref("autocomplete", "input")}} 属性を指定します。パスワードの場合、通常は次のいずれかの値をとります。</p> + +<dl> + <dt><code>"on"</code></dt> + <dd>ブラウザー、あるいはパスワードマネージャが自動的にパスワード欄を埋めることを許可します。これは、<code>"current-password"</code> あるいは<code>"new-password"</code> を使用するほど有益ではありません。</dd> + <dt><code>"off"</code></dt> + <dd>ブラウザー、あるいはパスワードマネージャが自動的にパスワード欄を埋めることを許可しません。いくつかのソフトウェアはこの値を無視しますが、それは通常、ユーザーの安全なパスワードの実践を維持する能力を、阻害するものであることに注意してください。</dd> + <dt><code>"current-password"</code></dt> + <dd>ブラウザー、あるいはパスワードマネージャがサイトのための現在のパスワードを入力することを許可します。この値はブラウザー、あるいはパスワードマネージャに、そのサイトの既知のパスワードを自動的に入力させ、新しいパスワードを提案するものではないもので、<code>"on"</code> よりも多くの情報を提供します。</dd> + <dt><code>"new-password"</code></dt> + <dd>ブラウザー、あるいはパスワードマネージャが、そのサイトの新しいパスワードを自動的に入力することを許可します。これは「パスワードの変更」や「新規ユーザー」フォームの、ユーザーに新しいパスワードを求める入力欄で使われます。新しいパスワードは、パスワードマネージャによって、複数の方法で生成される場合があります。単に新しく提示されるパスワードで埋めるかもしれませんし、あるいは新しいパスワードを生成するインターフェイスを、ユーザーに見せるかもしれません。</dd> +</dl> + +<div id="Autocomplete_sample1"> +<pre class="brush: html notranslate"><label for="userPassword">Password:</label> +<input id="userPassword" type="password" autocomplete="current-password"></pre> +</div> + +<p>{{EmbedLiveSample("Autocomplete_sample1", 600, 40)}}</p> + +<h3 id="Making_the_password_mandatory" name="Making_the_password_mandatory">パスワードを必須にする</h3> + +<p>ユーザーのブラウザーに対し、フォームの送信前に、パスワード欄が妥当な値を持っていなければならないことを伝えるためには、ただ {{htmlattrxref("required", "input")}} 論理属性を指定するだけです。</p> + +<pre class="brush: html notranslate"><label for="userPassword">Password: </label> +<input id="userPassword" type="password" required> +<input type="submit" value="Submit"></pre> + +<p>{{EmbedLiveSample("Making_the_password_mandatory", 600, 40)}}</p> + +<h3 id="Specifying_an_input_mode" name="Specifying_an_input_mode">入力モードを指定する</h3> + +<p>推奨する、または必須となるパスワードの構文ルールが、標準キーボードよりも、代替となるテキスト入力インターフェースから恩恵を受ける場合、特定のものを要求するために {{htmlattrxref("inputmode", "input")}} 属性を使用することができます。この最も明快な用途は、 PIN のようにパスワードが数字で構成されていることを必要とする場合です。例えば、仮想キーボードを持つモバイル端末では、パスワードの入力をより簡単にするため、フルキーボードの代わりに、数字のキーパッドレイアウトに切り替えることを選択するかもしれません。 PIN が１回限りの使用であれば、 {{htmlattrxref("autocomplete", "input")}} 属性を <code>off</code> または <code>one-time-code</code> のどちらかに設定してサジェストが保存されないようにしてください。</p> + +<pre class="brush: html notranslate"><label for="pin">PIN: </label> +<input id="pin" type="password" inputmode="numeric"></pre> + +<p>{{EmbedLiveSample("Specifying_an_input_mode", 600, 40)}}</p> + +<h3 id="Setting_length_requirements" name="Setting_length_requirements">長さの要件を設定する</h3> + +<p>普通、{{htmlattrxref("minlength", "input")}} 属性や {{htmlattrxref("maxlength", "input")}} 属性を使って、許容する最小の長さと最大の長さをパスワードに適用することができます。この例では、直前の例を拡張して、ユーザーの PIN が 4 〜 8文字でなければならないことを指定しています。{{htmlattrxref("size", "input")}} 属性は、パスワード入力コントロールが 8 文字分の幅であることを保証するために使用されています。</p> + +<pre class="brush: html notranslate"><label for="pin">PIN:</label> +<input id="pin" type="password" inputmode="numeric" minlength="4" + maxlength="8" size="8"></pre> + +<p>{{EmbedLiveSample("Setting_length_requirements", 600, 40)}}</p> + +<h3 id="Selecting_text" name="Selecting_text">テキストを選択する</h3> + +<p>他のテキスト入力コントロールのように、 {{domxref("HTMLInputElement.select", "select()")}} メソッドを使って、パスワード欄のすべてのテキストを選択することができます。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><label for="userPassword">Password: </label> +<input id="userPassword" type="password" size="12"> +<button id="selectAll">Select All</button> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js notranslate">document.getElementById("selectAll").onclick = function() { + document.getElementById("userPassword").select(); +}</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample("Selecting_text", 600, 40)}}</p> + +<p>また、{{domxref("HTMLInputElement.selectionStart", "selectionStart")}} や {{domxref("HTMLInputElement.selectionEnd", "selectionEnd")}} を使って、コントロールの文字がどの範囲で選択されているかを取得または設定することができ、{{domxref("HTMLInputElement.selectionDirection", "selectionDirection")}} を使って、どの方向に選択が発生したのか（あるいは広げようとしているのか。プラットフォームに依存します。詳細は各ドキュメントを参照してください）を知ることができます。しかしながら、与えられるテキストは隠されており、その有用性は幾分か制限されています。</p> + +<h2 id="Validation" name="Validation">検証</h2> + +<p>もしアプリケーションが文字セットの制限を有している場合、あるいは入力されたパスワードの実際の内容について、他の何らかの要件がある場合には、{{htmlattrxref("pattern", "input")}} 属性を使って、パスワードがそれらの要件に合致しているか自動的に確認するための正規表現を設定することができます。</p> + +<p>この例では、4 〜 8 文字の 16 進数の数字のみが妥当です。</p> + +<div id="Validation_sample1"> +<pre class="brush: html notranslate"><label for="hexId">Hex ID: </label> +<input id="hexId" type="password" pattern="[0-9a-fA-F]{4,8}" + title="Enter an ID consisting of 4-8 hexadecimal digits" + autocomplete="new-password"></pre> +</div> + +<p>{{EmbedLiveSample("Validation_sample1", 600, 40)}}</p> + +<dl> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd> + <p>この論理属性は、そのパスワード欄がやり取りに利用できないことを示します。また、無効な入力欄の値は、フォームとともに送信されません。</p> + </dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Requesting_a_Social_Security_number" name="Requesting_a_Social_Security_number">社会保障番号を要求する</h3> + +<p>この例では、<a href="https://ja.wikipedia.org/wiki/%E7%A4%BE%E4%BC%9A%E4%BF%9D%E9%9A%9C%E7%95%AA%E5%8F%B7#%E6%AD%A3%E5%BD%93%E3%81%AA%E7%95%AA%E5%8F%B7">妥当なアメリカ合衆国の社会保障番号</a>の形式に合致する入力のみが受け付けられます。これらの数字はアメリカ合衆国において、税や個人の識別を目的として使われており、その形式は "123-45-6789" です。各種、それぞれのグループ内でどのような値が許可されているかについてのルールも存在しています。</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><label for="ssn">SSN:</label> +<input type="password" id="ssn" inputmode="numeric" minlength="9" maxlength="12" + pattern="(?!000)([0-6]\d{2}|7([0-6]\d|7[012]))([ -])?(?!00)\d\d\3(?!0000)\d{4}" + required autocomplete="off"> +<br> +<label for="ssn">Value:</label> +<span id="current"></span></pre> + +<p>ここでは {{htmlattrxref("pattern", "input")}} を使って、入力される値を、正当な社会保障番号を示す文字列に制限しています。明らかに、この正規表現は、妥当な SSN であることを保証していません（社会保障局のデータベースにアクセスしているわけではないので）が、その番号が SSN になり得るものであることは保証しています。一般に、値が妥当になり得ないことを避けています。加えて、3 つの数字のグループがスペース、ダッシュ ("-") で区切る、あるいは区切らないことを許容しています。</p> + +<p>{{htmlattrxref("inputmode", "input")}} が <code>"numeric"</code> にセットされ、より入力しやすくするために、仮想キーボードを持つ端末が数字キーパッドレイアウトに切り替えることを支援しています。{{htmlattrxref("minlength", "input")}} と {{htmlattrxref("maxlength", "input")}} がそれぞれ 9 と 12 にセットされ、値が 9 〜 12 文字 (前者はグループ間の区切り文字無し、後者は有り) であることを要件としています。 {{htmlattrxref("required", "input")}} 属性は、このコントロールが値を持っていなければならないことを示すために使われています。最後に、 {{htmlattrxref("autocomplete", "input")}} が <code>"off"</code> にセットされており、これはまったくパスワードではないので、パスワードマネージャーが値をセットしようとすることを回避しています。</p> + +<h4 id="JavaScript_2">JavaScript</h4> + +<p>これは実にシンプルなコードで、入力された SSN を見られるように、画面に表示するためのものです。これは明らかに、パスワード欄の目的を損ねるものですが、<code>pattern</code> を試すには役立ちます。</p> + +<pre class="brush: js notranslate">var ssn = document.getElementById("ssn"); +var current = document.getElementById("current"); + +ssn.oninput = function(event) { + current.innerHTML = ssn.value; +}</pre> + +<h4 id="Result_2" name="Result_2">結果</h4> + +<p>{{EmbedLiveSample("Requesting_a_Social_Security_number", 600, 60)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#password-state-(type=password)', '<input type="password">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>初回定義</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#password-state-typepassword', '<input type="password">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.input.input-password")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li> +</ul> diff --git a/files/ja/web/html/element/input/radio/index.html b/files/ja/web/html/element/input/radio/index.html new file mode 100644 index 0000000000..820eb38d46 --- /dev/null +++ b/files/ja/web/html/element/input/radio/index.html @@ -0,0 +1,376 @@ +--- +title: <input type="radio"> +slug: Web/HTML/Element/input/radio +tags: + - Choosing Options + - Element + - Form Options + - HTML + - HTML Input Types + - HTML forms + - HTML input + - Input + - Input Types + - Options + - Radio Buttons + - Radio Groups + - Reference + - form + - radio + - radio button +translation_of: Web/HTML/Element/input/radio +--- +<div>{{HTMLRef("Input_types")}}</div> + +<p><span class="seoSummary">{{htmlelement("input")}} 要素の <strong><code>radio</code></strong> 型は、一般に<strong>ラジオグループ</strong>、すなわち関連するオプションの組み合わせを示すラジオボタンの集まりです。</span>グループ内でラジオボタンは一つしか同時に選択することができません。ラジオボタンはふつう、小さな円で描かれ、選択されたら塗りつぶしや強調表示されます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-radio.html", "tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a></div> + +<p><a href="https://github.com/mdn/interactive-examples">をクローンしてプルリクエストを送信してください。</a></p> + + + +<div id="Basic_example"> +<p><a href="https://github.com/mdn/interactive-examples">ラジオボタンと呼ばれるのは、以下のように外見や操作方法が古い型のラジオのプッシュボタンに似ているからです。</a></p> + +<p><a href="https://github.com/mdn/interactive-examples"><img alt="古い時代のラジオボタンの外観を示します。" src="https://mdn.mozillademos.org/files/15610/old-radio.jpg" style="height: 400px; width: 600px;" title="古い時代のラジオの写真"></a></p> +</div> + +<div class="note"> +<p><a href="https://github.com/mdn/interactive-examples"><strong>注</strong>: </a><a href="/ja/docs/Web/HTML/Element/input/checkbox">チェックボックス</a>はラジオボタンに似ていますが、重要な違いがあります。ラジオボタンは一組の中で一つの値を選択するように設計されているのに対し、チェックボックスは個別に値をオンまたはオフに設定できます。複数のコントロールが存在するところでは、ラジオボタンは全体の中で一つを選択できますが、チェックボックスは複数の値を選択することができます。</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value", "値")}}</strong></td> + <td>ラジオボタンの値を表す {{domxref("DOMString")}}</td> + </tr> + <tr> + <td><strong>イベント</strong></td> + <td>{{event("change")}} および {{event("input")}}</td> + </tr> + <tr> + <td><strong>対応している共通属性</strong></td> + <td><code>checked</code> および <code>value</code></td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>{{anch("checked")}}</code> および <code>{{anch("value")}}</code></td> + </tr> + <tr> + <td><strong>メソッド</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value" name="Value">値</h2> + +<p><code>value</code> 属性はラジオボタンの値を持つ {{domxref("DOMString")}} です。値は{{Glossary("user agent", "ユーザーエージェント")}}がユーザーに表示することはありません。代わりに、グループ内のどのラジオボタンが選択されているかを識別するために使用されます。</p> + +<h3 id="Defining_a_radio_group" name="Defining_a_radio_group">ラジオグループの定義</h3> + +<p>ラジオグループは、グループ内のそれぞれのラジオボタンに同じ {{htmlattrxref("name", "input")}} を設定することで定義します。ラジオグループが確立されると、グループ内のラジオボタンを選択すると、同じグループの現在選択されているラジオボタンが自動的に選択解除されます。</p> + +<p>ページ内には、固有の <code>name</code> を持っている限り、好きなだけの数のラジオグループを作成することができます。</p> + +<p>例えば、フォームでユーザーに希望する問い合わせ方法を尋ねる必要がある場合、3つのラジオボタンを作成し、それぞれの <code>name</code> プロパティに <code>contact</code> を設定しますが、1つは {{htmlattrxref("value", "input")}} を <code>email</code> に、1つは value を <code>phone</code> に、1つは value を <code>mail</code> に設定します。ユーザーは <code>value</code> または <code>name</code> を見ることはありません (表示させるコードを追加しない限り)。</p> + +<p>最終的な HTML はこのようになります。</p> + +<pre class="brush: html notranslate"><form> + <p>希望する連絡方法を選択してください。</p> + <div> + <input type="radio" id="contactChoice1" + name="contact" value="email"> + <label for="contactChoice1">電子メール</label> + + <input type="radio" id="contactChoice2" + name="contact" value="phone"> + <label for="contactChoice2">電話</label> + + <input type="radio" id="contactChoice3" + name="contact" value="mail"> + <label for="contactChoice3">郵便</label> + </div> + <div> + <button type="submit">送信</button> + </div> +</form></pre> + +<p>ここでは三つのラジオボタンがあり、それぞれの <code>name</code> が <code>contact</code> に設定されており、それぞれのラジオボタンを個別に識別するための固有の <code>value</code> を持っています。それぞれは固有の {{domxref("Element.id", "id")}} も持っており、 {{HTMLElement("label")}} 要素の {{htmlattrxref("for", "label")}} 属性でラジオボタンにラベルを結びつけるために使われます。</p> + +<p>この例をこちらで試すことができます。</p> + +<p>{{EmbedLiveSample('Defining_a_radio_group', 600, 130)}}</p> + +<h3 id="Data_representation_of_a_radio_group" name="Data_representation_of_a_radio_group">ラジオグループのデータ表現</h3> + +<p>ラジオボタンが選択された状態で上記のフォームが送信されると、フォームのデータには <code>contact=<var>value</var></code> の形の項目が含まれます。例えば、ユーザーが「電話」ラジオボタンをクリックしてからフォームを送信すると、フォームのデータには <code>contact=phone</code> という行が含まれます。</p> + +<p>HTML で <code>value</code> 属性を省略すると、送信されたフォームデータのそのグループには <code>on</code> の値が割り当てられます。この場合、ユーザーが「電話」をクリックしてフォームを送信したのに、結果のフォームデータが <code>contact=on</code> となるため有益ではありません。ですから、 <code>value</code> 属性を設定することを忘れないようにしてください。</p> + +<div class="note"> +<p><strong>注</strong>: フォームが送信されたときにラジオボタンが全く選択されていないと、ラジオグループが送信されたフォームにまったく含まれず、報告される値がなくなります。</p> +</div> + +<p>実際には、フォームがグループ内のラジオボタンをまったく選択しない状態で送信するのを許可することは一般的ではないので、既定で一つを <code>checked</code> 状態を設定しておくことには意味があります。下記の{{anch("Selecting a radio button by default", "既定のラジオボタンの選択")}}を参照してください。</p> + +<p>例に若干のコードを加えて、このフォームで生成されるデータを確認できるようにしましょう。 HTML を変更して、フォームデータを出力するための {{HTMLElement("pre")}} を追加します。</p> + +<pre class="brush: html notranslate"><form> + <p>希望する連絡方法を選択してください。</p> + <div> + <input type="radio" id="contactChoice1" + name="contact" value="email"> + <label for="contactChoice1">電子メール</label> + <input type="radio" id="contactChoice2" + name="contact" value="phone"> + <label for="contactChoice2">電話</label> + <input type="radio" id="contactChoice3" + name="contact" value="mail"> + <label for="contactChoice3">郵便</label> + </div> + <div> + <button type="submit">送信</button> + </div> +</form> +<pre id="log"> +</pre> +</pre> + +<p>それから、いくらかの <a href="/ja/docs/Web/JavaScript">JavaScript</a> を追加して、ユーザーが「送信」ボタンをクリックしたときに発生する {{domxref("HTMLFormElement/submit_event", "submit")}} イベントのイベントリスナーを設定します。</p> + +<pre class="brush: js notranslate">var form = document.querySelector("form"); +var log = document.querySelector("#log"); + +form.addEventListener("submit", function(event) { + var data = new FormData(form); + var output = ""; + for (const entry of data) { + output = output + entry[0] + "=" + entry[1] + "\r"; + }; + log.innerText = output; + event.preventDefault(); +}, false);</pre> + +<p>この例を試してみて、 <code>contact</code> グループに二つ以上の結果が出ないことを確認してください。</p> + +<p>{{EmbedLiveSample("Data_representation_of_a_radio_group", 600, 130)}}</p> + +<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2> + +<p>すべての {{HTMLElement("input")}} 型で共通する属性に加え、 <code>radio</code> 型の入力は次の属性にも対応しています。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("checked")}}</code></td> + <td>論理属性で、このラジオボタンがグループ内で項目が現在選択されているかどうかを示す</td> + </tr> + <tr> + <td><code>{{anch("value")}}</code></td> + <td>ラジオボタンがオンになっている場合に、フォームを投稿したときラジオボタンの値として使用される文字列</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefchecked">{{htmlattrdef("checked")}}</h3> + +<p>論理属性で、もしあれば、このラジオボタンがラジオグループ内で現在選択されているものであることを示します。</p> + +<p>他のブラウザーとは異なり、 Firefox は既定でページ読み込みを通して <code><input></code> の<a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">チェック状態を維持します</a>。この機能を制御するには {{htmlattrxref("autocomplete","input")}} 属性を使用してください。</p> + +<h3 id="htmlattrdefvalue">{{htmlattrdef("value")}}</h3> + +<p><code>value</code> はすべての {{HTMLElement("input")}} で共通のものの一つです。しかし、 <code>radio</code> 型の入力欄では特別な目的になります。フォームが送信されるとき、現在チェックされているラジオボタンのみがサーバーに送信され、報告される値は <code>value</code> 属性の値になります。 <code>value</code> が指定されていない場合は、既定で <code>on</code> という文字列になります。これは前述の{{anch("Value", "値")}}の節で説明しています。</p> + +<h2 id="Using_radio_inputs" name="Using_radio_inputs">ラジオボタンの使用</h2> + +<p>上記で最も基本的なラジオボタンの使用方法を見てきました。他に必要になりそうなラジオボタンに関するよく使われる機能や技術を見てみましょう。</p> + +<h3 id="Selecting_a_radio_button_by_default" name="Selecting_a_radio_button_by_default">既定のラジオボタンの選択</h3> + +<p>ラジオボタンを既定で選択状態にするには、単に <code>checked</code> 属性を加えるだけです。前回の例を更新するとこのようになります。</p> + +<pre class="brush: html notranslate"><form> + <p>希望する連絡方法を選択してください。</p> + <div> + <input type="radio" id="contactChoice1" + name="contact" value="email" checked> + <label for="contactChoice1">電子メール</label> + + <input type="radio" id="contactChoice2" + name="contact" value="phone"> + <label for="contactChoice2">電話</label> + + <input type="radio" id="contactChoice3" + name="contact" value="mail"> + <label for="contactChoice3">郵便</label> + </div> + <div> + <button type="submit">送信</button> + </div> +</form></pre> + +<p>{{EmbedLiveSample('Selecting_a_radio_button_by_default', 600, 130)}}</p> + +<p>In this case, the first radio button is now selected by default.</p> + +<div class="note"> +<p><strong>Note</strong>: If you put the <code>checked</code> attribute on more than one radio button, later instances will override earlier ones; that is, the last <code>checked</code> radio button will be the one that is selected. This is because only one radio button in a group can ever be selected at once, and the user agent automatically deselects others each time a new one is marked as checked.</p> +</div> + +<h3 id="Providing_a_bigger_hit_area_for_your_radio_buttons" name="Providing_a_bigger_hit_area_for_your_radio_buttons">ラジオボタンのヒット領域を大きくする</h3> + +<p>In the above examples, you may have noticed that you can select a radio button by clicking on its associated {{htmlelement("label")}} element, as well as on the radio button itself. This is a really useful feature of HTML form labels that makes it easier for users to click the option they want, especially on small-screen devices like smartphones.</p> + +<p>Beyond accessibility, this is another good reason to properly set up <code><label></code> elements on your forms.</p> + +<h2 id="Validation" name="Validation">検証</h2> + +<p>Radio buttons don't participate in constraint validation; they have no real value to be constrained.</p> + +<h2 id="Styling_radio_inputs" name="Styling_radio_inputs">ラジオボタンの整形</h2> + +<p>The following example shows a slightly more thorough version of the example we've seen throughout the article, with some additional styling, and with better semantics established through use of specialized elements. The HTML looks like this:</p> + +<pre class="brush: html notranslate"><form> + <fieldset> + <legend>希望する連絡方法を選択してください。</legend> + <div> + <input type="radio" id="contactChoice1" + name="contact" value="email" checked> + <label for="contactChoice1">電子メール</label> + + <input type="radio" id="contactChoice2" + name="contact" value="phone"> + <label for="contactChoice2">電話</label> + + <input type="radio" id="contactChoice3" + name="contact" value="mail"> + <label for="contactChoice3">郵便</label> + </div> + <div> + <button type="submit">送信</button> + </div> + </fieldset> +</form></pre> + +<p>There's not much new to note here except for the addition of {{htmlelement("fieldset")}} and {{htmlelement("legend")}} elements, which help to group the functionality nicely and in a semantic way.</p> + +<p>The CSS involved is a bit more significant:</p> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +div:first-of-type { + display: flex; + align-items: flex-start; + margin-bottom: 5px; +} + +label { + margin-right: 15px; + line-height: 32px; +} + +input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + + border-radius: 50%; + width: 16px; + height: 16px; + + border: 2px solid #999; + transition: 0.2s all linear; + margin-right: 5px; + + position: relative; + top: 4px; +} + +input:checked { + border: 6px solid black; +} + +button, +legend { + color: white; + background-color: black; + padding: 5px 10px; + border-radius: 0; + border: 0; + font-size: 14px; +} + +button:hover, +button:focus { + color: #999; +} + +button:active { + background-color: white; + color: black; + outline: 1px solid black; +}</pre> + +<p>Most notable here is the use of the {{cssxref("-moz-appearance")}} property (with prefixes needed to support some browsers). By default, radio buttons (and <a href="/ja/docs/Web/HTML/Element/input/checkbox">checkboxes</a>) are styled with the operating system's native styles for those controls. By specifying <code>appearance: none</code>, you can remove the native styling altogether, and create your own styles for them. Here we've used a {{cssxref("border")}} along with {{cssxref("border-radius")}} and a {{cssxref("transition")}} to create a nice animating radio selection. Notice also how the {{cssxref(":checked")}} pseudo-class is used to specify the styles for the radio button's appearance when selected.</p> + +<div class="note"> +<p><strong>Compatibility note</strong>: If you wish to use the {{cssxref("appearance")}} property, you should test it very carefully. Although it is supported in most modern browsers, its implementation varies widely. In older browsers, even the keyword <code>none</code> does not have the same effect across different browsers, and some do not support it at all. The differences are smaller in the newest browsers.</p> +</div> + +<p>{{EmbedLiveSample('Styling_radio_inputs', 600, 120)}}</p> + +<p>Notice that when clicking on a radio button, there's a nice, smooth fade out/in effect as the two buttons change state. In addition, the style and coloring of the legend and submit button are customized to have strong contrast. This might not be a look you'd want in a real web application, but it definitely shows off the possibilities.</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th></th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#radio-button-state-(type=radio)', '<input type="radio">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#radio-button-state-(type=radio)', '<input type="radio">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.input.input-radio")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("input")}} およびそれが実装している {{domxref("HTMLInputElement")}} インターフェイス</li> + <li>{{domxref("RadioNodeList")}}: ラジオボタンのリストを表現するインターフェイス</li> + <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li> +</ul> diff --git a/files/ja/web/html/element/input/range/index.html b/files/ja/web/html/element/input/range/index.html new file mode 100644 index 0000000000..41888581fb --- /dev/null +++ b/files/ja/web/html/element/input/range/index.html @@ -0,0 +1,525 @@ +--- +title: <input type="range"> +slug: Web/HTML/Element/input/range +tags: + - Element + - Forms + - HTML + - HTML forms + - HTML input tag + - HTML フォーム + - Input + - Range + - Reference + - Web + - slider + - スライダー + - フォーム + - 要素 +translation_of: Web/HTML/Element/input/range +--- +<div>{{HTMLRef("Input_types")}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <strong><code>range</code></strong> 型は、ユーザーに一定の値より小さくなく、別な一定の値より大きくない数値を指定させるために使用します。しかし、厳密な値は重要であるとはされません。これは通常、 {{HTMLElement('input/number', 'number')}} 入力型のようなテキスト入力ボックスではなく、スライダーやダイアルコントロールを用いて表現されます。</span>この種のウィジェットは厳密なものではないので、コントロールの値が厳密なものではない限り、通常は使用するべきではありません。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>ユーザーのブラウザーが <code>range</code> 型に対応していない場合は、 <code>{{HTMLElement('input/text', 'text')}}</code> 入力で代替されて扱われます。</p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value", "値")}}</strong></td> + <td>選択された数値を表す文字列を含む {{domxref("DOMString")}}。 {{jsxref("Number")}} として値を取得するには {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} を使用する。</td> + </tr> + <tr> + <td><strong>イベント</strong></td> + <td>{{event("change")}} および {{event("input")}}</td> + </tr> + <tr> + <td><strong>対応している共通属性</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("max", "input")}}, {{htmlattrxref("min", "input")}}, {{htmlattrxref("step", "input")}}</td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code></td> + </tr> + <tr> + <td><strong>メソッド</strong></td> + <td>{{domxref("HTMLInputElement.stepDown", "stepDown()")}} および {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td> + </tr> + </tbody> +</table> + +<h3 id="Validation" name="Validation">検証</h3> + +<p>利用可能なパターン検証はありません。しかし、以下の形で自動検証が行われます。</p> + +<ul> + <li>{{htmlattrxref("value", "input")}} が何かに設定されており、妥当な浮動小数点数に変換できない場合、入力が不正な入力になるので検証に失敗します。</li> + <li>値は {{htmlattrxref("min", "input")}} より小さくはなりません。この既定値は 0 です。</li> + <li>値は {{htmlattrxref("max", "input")}} より大きくはなりません。この既定値は 100 です。</li> + <li>値は {{htmlattrxref("step", "input")}} の倍数になります。この既定値は 1 です。</li> +</ul> + +<h3 id="Value" name="Value">値</h3> + +<p>{{htmlattrxref("value", "input")}} 属性は、選択された数値を表す文字列が入った {{domxref("DOMString")}} です。値は空文字列 (<code>""</code>) にはなりません。既定値は指定された最大値と最小値の中間値で、ただし最大値が最小値を下回っている場合は、既定値は <code>min</code> 属性の値に設定されます。既定値を特定するアルゴリズムは次の通りです。</p> + +<pre class="brush: js notranslate">defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min + : rangeElem.min + (rangeElem.max - rangeElem.min)/2;</pre> + +<p>最小値よりも小さな値を設定しようとすると、最小値に設定されます。同様に、最大値よりも大きな値を設定しようとすると、最大値に設定される結果になります。</p> + +<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2> + +<p>すべての {{HTMLElement("input")}} 型で共通する属性に加え、 <code>range</code> 型の入力欄は次の属性にも対応しています。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("list")}}</code></td> + <td>オプションで自動補完の定義済みの選択肢を含む <datalist> 要素の id</td> + </tr> + <tr> + <td><code>{{anch("max")}}</code></td> + <td>許可されている最大値</td> + </tr> + <tr> + <td><code>{{anch("min")}}</code></td> + <td>許可されている最小値</td> + </tr> + <tr> + <td><code>{{anch("step")}}</code></td> + <td>ユーザーインターフェイスと検証の両方で使用される刻み値</td> + </tr> + </tbody> +</table> + +<p id="htmlattrdeflist">{{page("/ja/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p> + +<p>See the <a href="#A_range_control_with_hash_marks">range control with hash marks</a> below for an example of how the options on a range are denoted in supported browsers</p> + +<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3> + +<p>許可されている値の範囲の最大値です。要素に入力された {{htmlattrxref("value", "input")}} がこれを超えた場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code><a href="/ja/docs/Web/HTML/Attributes/max">max</a></code> 属性の値が数値でない場合、要素は最大値を持ちません。</p> + +<p>この値は <code><a href="/ja/docs/Web/HTML/Attributes/min">min</a></code> 属性の値より大きいか、等しくしなければなりません。 <a href="/ja/docs/Web/HTML/Attributes/max">HTML の <code>max</code> 属性</a>を参照してください。</p> + +<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3> + +<p>許可されている値の範囲の最小値です。要素の {{htmlattrxref("value", "input")}} がこれより小さい場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code>min</code> 属性の値が数値でない場合、要素は最小値を持ちません。</p> + +<p>この値は <code><a href="/ja/docs/Web/HTML/Attributes/max">min</a></code> 属性の値より小さいか、等しくしなければなりません。 <a href="/ja/docs/Web/HTML/Attributes/min">HTML の <code>min</code> 属性</a>を参照してください。</p> + +<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3> + +<p>{{page("/ja/docs/Web/HTML/Element/input/number", "step-include")}}</p> + +<p><code>range</code> 入力欄の既定の刻み値は1であり、刻みの基準値が整数ではない場合を<em>除いて</em>、整数の入力のみを許可します。例えば、 <code>min</code> に -10 を、 <code>value</code> に 1.5 を設定した場合、 <code>step</code> が 1 の場合は正の方向に 1.5, 2.5, 3.5,... など、負の方向に -0.5, -1.5, -2.5,... などのみが許可されます。 <a href="/ja/docs/Web/HTML/Attributes/step">HTML の <code>step</code> 属性</a>を参照してください。</p> + +<h3 id="Non_Standard_Attributes" name="Non_Standard_Attributes">標準外の属性</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("orient")}}</code></td> + <td>範囲のスライダーの向きを設定します。 <strong>Firefox のみ。</strong></td> + </tr> + </tbody> +</table> + +<dl> + <dt>{{htmlattrdef("orient")}} {{non-standard_inline}}</dt> + <dd id="orient-include">CSS の標準外の -moz-orient non-standard プロパティは、 {{htmlelement('progress')}} および {{htmlelement('meter')}} 要素に影響し、範囲スライダーの向きを定義する <code>orient</code> 属性を定義します。値は <code>horizontal</code> が範囲を水平方向に描画することを、 <code>vertical</code> が範囲を垂直に描画することを意味します。</dd> +</dl> + +<div class="blockIndicator note"> +<p>注: 以下の input 型の属性のうち、 <code>accept</code>, <code>alt</code>, <code>checked</code>, <code>dirname</code>, <code>formaction</code>, <code>formenctype</code>, <code>formmethod</code>, <code>formnovalidate</code>, <code>formtarget</code>, <code>height</code>, <code>maxlength</code>, <code>minlength</code>, <code>multiple</code>, <code>pattern</code>, <code>placeholder</code>, <code>readonly</code>, <code>required</code>, <code>size</code>, <code>src</code>, <code>width</code> は範囲入力には適用されません。これらの属性が含まれた場合は無視されます。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code>number</code> 型がユーザーに数値を入力させ、任意で値を最小値と最大値の間に強制することができるものですので、具体的な値を入力する必要があります。 <code>range</code> 入力型は、どの値が選択されているかをユーザーが気にする、または知る必要がない場合に、ユーザーに値を尋ねることができます。</p> + +<p>range 入力欄がよく使用される場合の例をいくつか示します。</p> + +<ul> + <li>ボリュームやバランス、フィルター制御のようなオーディオの制御。</li> + <li>カラーチャネル、透過度、明るさなどの色の構成の制御。</li> + <li>難易度、視点距離、ワールドサイズなどのゲームの構成の制御。</li> + <li>パスワードマネージャーが生成するパスワードの長さ。</li> +</ul> + +<p>原則として、ユーザーが実際の数値自体よりも最大値と最小値の間のパーセント値に関心がある場合は、 range 入力が最有力候補になります。例えば、ホームステレオの音量制御では、ユーザーは通常「音量を0.5に設定する」ではなく、「音量を最大値の半分くらいに設定する」と考えます。</p> + +<h3 id="Specifying_the_minimum_and_maximum" name="Specifying_the_minimum_and_maximum">最小値と最大値の指定</h3> + +<p>既定では、最小値は0で最大値は100です。これが望むものでないのであれば、 {{htmlattrxref("min", "input")}} や {{htmlattrxref("max", "input")}} 属性の値を変更することで、簡単に範囲を変更することができます。浮動小数点値にすることもできます。</p> + +<p>例えば、ユーザーに-10から10までの値を尋ねるのであれば、次のようにすることができます。</p> + +<pre class="brush: html notranslate"><input type="range" min="-10" max="10"></pre> + +<p>{{EmbedLiveSample("Specifying_the_minimum_and_maximum", 600, 40)}}</p> + +<h3 id="Setting_the_values_granularity" name="Setting_the_values_granularity">値の精度の設定</h3> + +<p>By default, the granularity, is 1, meaning that the value is always an integer. You can change the {{htmlattrxref("step")}} attribute to control the granularity. For example, If you need a value between 5 and 10, accurate to two decimal places, you should set the value of <code>step</code> to 0.01:</p> + +<div id="Granularity_sample1"> +<pre class="brush: html notranslate"><input type="range" min="5" max="10" step="0.01"></pre> + +<p>{{EmbedLiveSample("Granularity_sample1", 600, 40)}}</p> +</div> + +<p>If you want to accept any value regardless of how many decimal places it extends to, you can specify a value of <code>any</code> for the {{htmlattrxref("step", "input")}} attribute:</p> + +<div id="Granularity_sample2"> +<pre class="brush: html notranslate"><input type="range" min="0" max="3.14" step="any"></pre> + +<p>{{EmbedLiveSample("Granularity_sample2", 600, 40)}}</p> + +<p>This example lets the user select any value between 0 and π without any restriction on the fractional part of the value selected.</p> +</div> + +<h3 id="Adding_hash_marks_and_labels" name="Adding_hash_marks_and_labels">ハッシュマークとラベルの追加</h3> + +<p>The HTML specification gives browsers some flexibility on how to present the range control. Nowhere is this flexibility more apparent than in the area of hash marks and, to a lesser degree, labels. The specification describes how to add custom points to the range control using the {{htmlattrxref("list", "input")}} attribute and a {{HTMLElement("datalist")}} element, but does not have any requirements or even recommendations for standardized hash or tick marks along the length of the control.</p> + +<h4 id="Range_control_mockups" name="Range_control_mockups">範囲コントロールのモックアップ</h4> + +<p>Since browsers have this flexibility, and to date none support all of the features HTML defines for range controls, here are some mockups to show you what you might get on macOS in a browser which supports them.</p> + +<h5 id="An_unadorned_range_control" name="An_unadorned_range_control">簡素な範囲コントロール</h5> + +<p>This is what you get if you don't specify a {{htmlattrxref("list", "input")}} attribute, or if the browser doesn't support it.</p> + +<table class="fullwidth standard-table"> + <tbody> + <tr> + <th>HTML</th> + <th>Examples</th> + </tr> + <tr> + <td rowspan="4"> + <pre class="brush: html notranslate"> +<input type="range"></pre> + </td> + <th>Screenshot</th> + </tr> + <tr> + <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14989/macslider-plain.png" style="height: 28px; width: 184px;"></td> + </tr> + <tr> + <th>Live</th> + </tr> + <tr> + <td>{{EmbedLiveSample("An_unadorned_range_control",200,55,"","", "nobutton")}}</td> + </tr> + </tbody> +</table> + +<h5 id="A_range_control_with_hash_marks" name="A_range_control_with_hash_marks">ハッシュマーク付きの範囲コントロール</h5> + +<p>This range control is using a <code>list</code> attribute specifying the ID of a {{HTMLElement("datalist")}} which defines a series of hash marks on the control. There are eleven of them, so that there's one at 0% as well as at each 10% mark. Each point is represented using an {{HTMLElement("option")}} element with its {{htmlattrxref("value", "option")}} set to the range's value at which a mark should be drawn.</p> + +<table class="fullwidth standard-table"> + <tbody> + <tr> + <th>HTML</th> + <th>Examples</th> + </tr> + <tr> + <td rowspan="4"> + <pre class="brush: html notranslate"> +<input type="range" list="tickmarks"> + +<datalist id="tickmarks"> + <option value="0"></option> + <option value="10"></option> + <option value="20"></option> + <option value="30"></option> + <option value="40"></option> + <option value="50"></option> + <option value="60"></option> + <option value="70"></option> + <option value="80"></option> + <option value="90"></option> + <option value="100"></option> +</datalist> +</pre> + </td> + <th>Screenshot</th> + </tr> + <tr> + <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14991/macslider-ticks.png" style="height: 28px; width: 184px;"></td> + </tr> + <tr> + <th>Live</th> + </tr> + <tr> + <td>{{EmbedLiveSample("A_range_control_with_hash_marks_and_labels",200,55,"","", "nobutton")}}</td> + </tr> + </tbody> +</table> + +<h5 id="A_range_control_with_hash_marks_and_labels" name="A_range_control_with_hash_marks_and_labels">ハッシュマークとラベル付きの範囲コントロール</h5> + +<p>You can add labels to your range control by adding the {{htmlattrxref("label", "option")}} attribute to the {{HTMLElement("option")}} elements corresponding to the tick marks you wish to have labels for.</p> + +<table class="fullwidth standard-table"> + <tbody> + <tr> + <th>HTML</th> + <th>Examples</th> + </tr> + <tr> + <td rowspan="4"> + <pre class="brush: html notranslate"> +<input type="range" list="tickmarks"> + +<datalist id="tickmarks"> + <option value="0" label="0%"></option> + <option value="10"></option> + <option value="20"></option> + <option value="30"></option> + <option value="40"></option> + <option value="50" label="50%"></option> + <option value="60"></option> + <option value="70"></option> + <option value="80"></option> + <option value="90"></option> + <option value="100" label="100%"></option> +</datalist> +</pre> + </td> + <th>Screenshot</th> + </tr> + <tr> + <td><img alt="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14993/macslider-labels.png" style="height: 44px; width: 184px;"></td> + </tr> + <tr> + <th>Live</th> + </tr> + <tr> + <td>{{EmbedLiveSample("A_range_control_with_hash_marks_and_labels",200,55,"","", "nobutton")}}</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note</strong>: Currently, no browser fully supports these features. Firefox doesn't support hash marks and labels at all, for example, while Chrome supports hash marks but doesn't support labels. Version 66 (66.0.3359.181) of Chrome supports labels but the {{htmlelement("datalist")}} tag has to be styled with CSS as its {{cssxref("display")}} property is set to <code>none</code> by default, hiding the labels.</p> +</div> + +<h3 id="Change_the_orientation" name="Change_the_orientation">方向の変更</h3> + +<div class="xhidden"> +<p>By default, if a browser renders a range input as a slider, it will render it so that the knob slides left and right. When supported, we will be able to make the range vertical, to slide up and down with CSS by declaring a height value greater than the width value.<strong> </strong>This is not actually implemented yet by any of the major browsers. (See Firefox {{bug(981916)}}, <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">Chrome bug 341071</a>). It also, perhaps, may still be <a href="https://github.com/whatwg/html/issues/4177">under discussion</a>.</p> + +<p>In the meantime, we can make the range vertical by rotating it using using CSS transforms, or, by targeting each browser engine with their own method, which includes setting the {{cssxref('appearance')}} to <code>slider-vertical</code>, by using a non-standard <code>orient</code> attribute in Firefox, or by changing the text direction for Internet Explorer and Edge.</p> + +<p>Consider this range control:</p> + +<div id="Orientation_sample1"> +<pre class="brush: html notranslate"><input type="range" id="volume" min="0" max="11" value="7" step="1"></pre> +</div> + +<p>{{EmbedLiveSample("Orientation_sample1", 200, 200, "https://mdn.mozillademos.org/files/14983/Orientation_sample1.png")}}</p> + +<p>This control is horizontal (at least on most if not all major browers; others might vary).</p> + +<h3 id="Standards">Standards</h3> + +<p>According to the specification, making it vertical requires adding CSS to change the dimensions of the control so that it's taller than it is wide, like this:</p> + +<div id="Orientation_sample2"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">#volume { + height: 150px; + width: 50px; +}</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><input type="range" id="volume" min="0" max="11" value="7" step="1"></pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample("Orientation_sample2", 200, 200, "https://mdn.mozillademos.org/files/14985/Orientation_sample2.png")}}</p> +</div> +</div> + +<p>Unfortunately, no major browsers currently support vertical range controls directly.</p> + +<h3 id="transform_rotate-90deg">transform: rotate(-90deg)</h3> + +<p>You can, however, create a vertical range control by drawing a horizontal range control on its side. The easiest way is to use CSS: by applying a {{cssxref("transform")}} to rotate the element, you can make it vertical. Let's take a look.</p> + +<h4 id="HTML_2">HTML</h4> + +<p>The HTML needs to be updated to wrap the {{HTMLElement("input")}} in a {{HTMLElement("div")}} to let us correct the layout after the transform is performed (since transforms don't automatically affect the layout of the page):</p> + +<pre class="brush: html notranslate"><div class="slider-wrapper"> + <input type="range" min="0" max="11" value="7" step="1"> +</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<p>Now we need some CSS. First is the CSS for the wrapper itself; this specifies the display mode and size we want so that the page lays out correctly; in essence, it's reserving an area of the page for the slider so that the rotated slider fits into the reserved space without making a mess of things.</p> + +<pre class="brush: css notranslate">.slider-wrapper { + display: inline-block; + width: 20px; + height: 150px; + padding: 0; +} +</pre> + +<p>Then comes the style information for the <code><input></code> element within the reserved space:</p> + +<pre class="brush: css notranslate">.slider-wrapper input { + width: 150px; + height: 20px; + margin: 0; + transform-origin: 75px 75px; + transform: rotate(-90deg); +}</pre> + +<p>The size of the control is set to be 150 pixels long by 20 pixels tall. The margins are set to 0 and the {{cssxref("transform-origin")}} is shifted to the middle of the space the slider rotates through; since the slider is configured to be 150 pixels wide, it rotates through a box which is 150 pixels on each side. Offsetting the origin by 75px on each axis means we will rotate around the center of that space. Finally, we rotate counter-clockwise by 90°. The result: a range input which is rotated so the maximum value is at the top and the minimum value is at the bottom.</p> + +<p>{{EmbedLiveSample("transform_rotate-90deg", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}</p> + +<h3 id="appearance_property">appearance property</h3> + +<p>The {{cssxref('appearance')}} property has a non-standard value of <code>slider-vertical</code> that, well, makes sliders vertical.</p> + +<h4 id="HTML_3">HTML</h4> + +<p>We use the same HTML as in the previous examples:</p> + +<pre class="brush: html notranslate"><input type="range" min="0" max="11" value="7" step="1"> +</pre> + +<h4 id="CSS_3">CSS</h4> + +<p>We target just the inputs with a type of range:</p> + +<pre class="brush: css notranslate">input[type="range"] { + -webkit-appearance: slider-vertical; +}</pre> + +<p>{{EmbedLiveSample("appearance_property", 200, 200)}}</p> + +<h3 id="orient_attribute">orient attribute</h3> + +<p>In Firefox only, there is a non-standard <code>orient</code> property.</p> + +<h4 id="HTML_4">HTML</h4> + +<p>Use similar HTML as in the previous examples, we add the attribute with a value of <code>vertical</code>:</p> + +<pre class="brush: html notranslate"><input type="range" min="0" max="11" value="7" step="1" orient="vertical"> +</pre> + +<p>{{EmbedLiveSample("orient_attribute", 200, 200)}}</p> + +<h3 id="writing-mode_bt-lr">writing-mode: bt-lr;</h3> + +<p>The {{cssxref('writing-mode')}} property should generally not be used to alter text direction for internationalization or localization purposes, but can be used for special effects. </p> + +<h4 id="HTML_5">HTML</h4> + +<p>We use the same HTML as in the previous examples:</p> + +<pre class="brush: html notranslate"><input type="range" min="0" max="11" value="7" step="1"> +</pre> + +<h4 id="CSS_4">CSS</h4> + +<p>We target just the inputs with a type of range, changing the writing mode from the default to <code>bt-lr</code>, or bottom-to-top and left-to-right:</p> + +<pre class="brush: css notranslate">input[type="range"] { + writing-mode: bt-lr; +}</pre> + +<p>{{EmbedLiveSample("writing-mode_bt-lr", 200, 200)}}</p> + +<h3 id="Putting_it_all_together">Putting it all together</h3> + +<p>As each of the above examples works in different browsers, you can put all of them in a single example to make it work cross browser:</p> + +<h4 id="HTML_6">HTML</h4> + +<p>We keep the <code>orient</code> attribute with a value of <code>vertical</code> for Firefox:</p> + +<pre class="brush: html notranslate"><input type="range" min="0" max="11" value="7" step="1" orient="vertical"> +</pre> + +<h4 id="CSS_5">CSS</h4> + +<p>We target just the inputs with a type of range, changing the writing mode from the default to <code>bt-lr</code>, or bottom-to-top and left-to-right, for Edge and Internet Explorer, and add <code>-webkit-appearance: slider-vertical</code> for all -webkit-based browsers:</p> + +<pre class="brush: css notranslate">input[type="range"] { + writing-mode: bt-lr; + -webkit-appearance: slider-vertical; +}</pre> + +<p>{{EmbedLiveSample("Putting_it_all_together", 200, 200)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#range-state-(type=range)', '<input type="range">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>初回定義</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#range-state-typerange', '<input type="range">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.input.input-range")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Forms">HTML フォーム</a></li> + <li>{{HTMLElement("input")}} およびそれに基づく {{domxref("HTMLInputElement")}} インターフェイス</li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/number"><input type="number"></a></code></li> + <li>{{domxref('validityState.rangeOverflow')}} および {{domxref('validityState.rangeUnderflow')}}</li> + <li><a href="/ja/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode">ConstantSourceNode による複数の引数の制御</a></li> + <li><a href="https://css-tricks.com/sliding-nightmare-understanding-range-input">Styling the range element</a></li> + <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li> +</ul> diff --git a/files/ja/web/html/element/input/reset/index.html b/files/ja/web/html/element/input/reset/index.html new file mode 100644 index 0000000000..50f1991f43 --- /dev/null +++ b/files/ja/web/html/element/input/reset/index.html @@ -0,0 +1,177 @@ +--- +title: <input type="reset"> +slug: Web/HTML/Element/input/reset +tags: + - Element + - Form Button + - Form input + - Forms + - HTML + - HTML forms + - Input + - Input Types + - Reference + - Reset Button + - reset +translation_of: Web/HTML/Element/input/reset +--- +<div>{{HTMLRef("Input_types")}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <strong><code>reset</code></strong> 型はボタンとして表示され、既定の {{domxref("Element/click_event", "click")}} イベントのハンドラーは、フォーム内の入力欄すべてを初期値にリセットします。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-reset.html", "tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<div class="note"> +<p>通常、フォームにリセットボタンを配置するべきではありません。このようなボタンは便利なものではなく、間違ってボタンをクリックしてしまったユーザーをイライラさせる可能性が高くなります (<a href="/ja/docs/Web/HTML/Element/input/submit">送信ボタン</a>をクリックしようとしているときにクリックしてしまうことが多いです)。</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value", "値")}}</strong></td> + <td>ボタンのラベルとして使用する {{domxref("DOMString")}}</td> + </tr> + <tr> + <td><strong>イベント</strong></td> + <td>{{domxref("Element/click_event", "click")}}</td> + </tr> + <tr> + <td><strong>対応している共通属性</strong></td> + <td>{{htmlattrxref("type", "input")}} および {{htmlattrxref("value", "input")}}</td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>メソッド</strong></td> + <td>なし</td> + </tr> + </tbody> +</table> + +<h2 id="Value" name="Value">値</h2> + +<p><code><input type="reset"></code> 要素の {{htmlattrxref("value", "input")}} 属性は、ボタンのラベルとして表示される {{domxref("DOMString")}} を示します。 <code>reset</code> などのボタンは他の値を持ちません。</p> + +<div id="summary-example3"> +<pre class="brush: html notranslate"><input type="reset" value="フォームをリセット"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p> + +<p><code>value</code> を指定しなかった場合は、既定のラベルが付いたボタンが表示されます (通常は「リセット」ですが、{{Glossary("user agent", "ユーザーエージェント")}}によって異なります)。</p> + +<div id="summary-example1"> +<pre class="brush: html notranslate"><input type="reset"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p> + +<h2 id="Using_reset_buttons" name="Using_reset_buttons">リセットボタンの使用</h2> + +<p><code><input type="reset"></code> ボタンはフォームをリセットするために使用されます。独自のボタンを作成して JavaScript を使用してカスタマイズしたいのであれば、 <code><a href="/ja/docs/Web/HTML/Element/input/button"><input type="button"></a></code> またはよりよい {{htmlelement("button")}} 要素を使用してください。</p> + +<h3 id="A_simple_reset_button" name="A_simple_reset_button">単純なリセットボタン</h3> + +<p>単純なリセットボタンを作成するところから始めましょう。</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="example">Type in some sample text</label> + <input id="example" type="text"> + </div> + <div> + <input type="reset" value="フォームをリセット"> + </div> +</form> +</pre> + +<p>次のように表示されます。</p> + +<p>{{EmbedLiveSample("A_simple_reset_button", 650, 100)}}</p> + +<p>テキストフィールドにいくらかテキストを入力してから、リセットボタンを押してみてください。</p> + +<h3 id="Adding_a_reset_keyboard_shortcut" name="Adding_a_reset_keyboard_shortcut">リセットのショートカットキーの追加</h3> + +<p>リセットボタンにショートカットキーを追加するには — あらゆる {{HTMLElement("input")}} で通用する方法としてと — グローバル属性の {{htmlattrxref("accesskey")}} を使用します。</p> + +<p>この例では、 <kbd>r</kbd> がアクセスキーとして指定されます (<kbd>r</kbd> はブラウザーや OS の組み合わせによる特定の修飾キーを押しながら押す必要があります {{htmlattrxref("accesskey")}} に有益なリストがあります)。</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="example">Type in some sample text</label> + <input id="example" type="text"> + </div> + <div> + <input type="reset" value="Reset the form" + accesskey="r"> + </div> +</form></pre> + +<p>{{EmbedLiveSample("Adding_a_reset_keyboard_shortcut", 650, 100)}}</p> + +<p>上記の例の問題点は、アクセスキーが何であるかをユーザーが知る方法がないことです。これは特に、一般的には競合を避けるために修飾キーが標準的ではないために特に問題になります。サイトを構築する際には、サイトデザインの邪魔にならないような方法でこの情報を提供するようにしてください (例えば、サイトのアクセスキーについての情報を指す簡単にアクセスできるリンクを提供するなど)。ボタンにツールチップを追加する ({{htmlattrxref("title")}} 属性を使う) ことも役立ちますが、アクセシビリティのためには完全な解決策ではありません。</p> + +<h3 id="Disabling_and_enabling_a_reset_button" name="Disabling_and_enabling_a_reset_button">リセットボタンの無効化と有効化</h3> + +<p>リセットボタンを無効化するには、以下のようにグローバル属性の {{htmlattrxref("disabled")}} を指定するだけです。</p> + +<div id="disable-example1"> +<pre class="brush: html notranslate"><input type="reset" value="Disabled" disabled></pre> +</div> + +<p>実行時に <code>disabled</code> を <code>true</code> または <code>false</code> に設定することで、ボタンを有効化したり無効化したりすることができます。 JavaScript では、これは <code>btn.disabled = true</code> や <code>btn.disabled = false</code> のようになります。</p> + +<div class="note"> +<p><strong>注</strong>: ボタンの有効化や無効化についてのより詳しい情報は、 <code><a href="/ja/docs/Web/HTML/Element/input/button#Disabling_and_enabling_a_button"><input type="button"></a></code> のページを参照してください。</p> +</div> + +<h2 id="Validation" name="Validation">検証</h2> + +<p>ボタンは制約の検証には関係しません。制約を受ける実際の値を持っていません。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>上記に簡単な例を挙げました。リセットボタンについては、これ以上言うことはありません。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#reset-button-state-(type=reset)', '<input type="reset">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#reset-button-state-(type=reset)', '<input type="reset">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.input.input-reset")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("input")}} およびそれが実装している {{domxref("HTMLInputElement")}} インターフェイス</li> + <li><a href="/ja/docs/Learn/Forms/Basic_native_form_controls#Actual_buttons">フォームとボタン</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/forms">フォーム (アクセシビリティ)</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms">HTML フォーム</a></li> + <li>{{HTMLElement("button")}} 要素</li> + <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li> +</ul> diff --git a/files/ja/web/html/element/input/search/index.html b/files/ja/web/html/element/input/search/index.html new file mode 100644 index 0000000000..c181272801 --- /dev/null +++ b/files/ja/web/html/element/input/search/index.html @@ -0,0 +1,475 @@ +--- +title: <input type="search"> +slug: Web/HTML/Element/input/search +tags: + - Form input + - Forms + - HTML + - HTML forms + - Input Type + - Reference + - Search +translation_of: Web/HTML/Element/input/search +--- +<div>{{HTMLRef("Input_types")}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <code><strong>search</strong></code> 型は、ユーザーが検索クエリを入力するために設計されたテキスト入力欄です。 <code><a href="/ja/docs/Web/HTML/Element/input/text">text</a></code> 入力欄と機能的には同じですが、{{Glossary("user agent", "ユーザーエージェント")}}は別なスタイルを適用するかもしれません。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-search.html", "tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value", "値")}}</strong></td> + <td>検索フィールドに含まれる値を表す {{domxref("DOMString")}}。</td> + </tr> + <tr> + <td><strong>イベント</strong></td> + <td>{{domxref("HTMLElement/change_event", "change")}} および {{domxref("HTMLElement/input_event", "input")}}</td> + </tr> + <tr> + <td><strong>対応している共通属性</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("required", "input")}}, {{htmlattrxref("size", "input")}}</td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>メソッド</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value" name="Value">値</h2> + +<p>{{htmlattrxref("value", "input")}} 属性は、テキスト入力欄に入力された現在のテキストの値が入っている {{domxref("DOMString")}} です。 JavaScript では {{domxref("HTMLInputElement.value")}} プロパティを使ってこれを受け取ることができます。</p> + +<pre class="brush: js notranslate">searchTerms = mySearch.value; +</pre> + +<p>入力欄に検証の制約がない場合 (詳しくは{{anch("Validation", "検証")}}を参照)、値は任意の文字列又は空文字列 (<code>""</code>) になることがあります。</p> + +<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2> + +<p>型に関係なくすべての {{HTMLElement("input")}} 要素を操作する属性に加え、 <code>search</code> 型の入力欄は次の属性にも対応しています。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("list")}}</code></td> + <td>オプションで自動補完の定義済みの選択肢を含む <datalist> 要素の id</td> + </tr> + <tr> + <td><code>{{anch("maxlength")}}</code></td> + <td>入力欄が受け付ける最大文字数</td> + </tr> + <tr> + <td><code>{{anch("minlength")}}</code></td> + <td>入力欄が取りうる、妥当と判断される最小文字列長</td> + </tr> + <tr> + <td><code>{{anch("pattern")}}</code></td> + <td>妥当と判断されるために、入力欄の内容が一致する必要がある正規表現</td> + </tr> + <tr> + <td><code>{{anch("placeholder")}}</code></td> + <td>空欄の時に入力欄に表示される入力例の値</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>入力欄の内容を読み取り専用にするかどうかを示す論理属性</td> + </tr> + <tr> + <td><code>{{anch("size")}}</code></td> + <td>入力欄の長さを何文字分にするかを表す数値</td> + </tr> + <tr> + <td><code>{{anch("spellcheck")}}</code></td> + <td>入力欄でスペルチェックを有効にするかどうか、既定のスペルチェック構成を利用するかを制御する</td> + </tr> + </tbody> +</table> + +<p id="htmlattrdeflist">{{page("/en-US/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p> + +<h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3> + +<p>ユーザーが検索フィールドに入力することができる (UTF-16 コード単位での) 最大文字数です。 0 以上の整数値である必要があります。 <code>maxlength</code> が指定されていないか、無効な値が指定されていると、検索フィールドには最大文字数が設定されません。この値は <code>minlength</code> の値以上である必要もあります。</p> + +<p>フィールドに入力されたテキストの長さが UTF-16 コード単位で <code>maxlength</code> の長さを超えていると、その入力欄は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。</p> + +<h3 id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</h3> + +<p>ユーザーが検索フィールドに入力することができる (UTF-16 コード単位での) 最小文字数です。これは非負の整数値で、 <code>maxlength</code> で指定された値以下である必要があります。 <code>minlength</code> が指定されていないか、無効な値が指定されていると、検索フィールドには最小文字数が設定されません。</p> + +<p>入力欄のテキスト値の長さが UTF-16 コード単位で <code>minlength</code> の長さよりも短いと、その検索フィールドは<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。</p> + +<h3 id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</h3> + +<p>{{page("/ja/docs/Web/HTML/Element/input/text", "pattern-include")}}</p> + +<p>詳細や例については{{anch("Specifying a pattern", "パターンの指定")}}を参照してください。</p> + +<p>{{page("/ja/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> + +<p>{{page("/ja/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> + +<p>{{page("/ja/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p> + +<h3 id="htmlattrdefspellcheck">{{htmlattrdef("spellcheck")}}</h3> + +<p>{{page("/ja/docs/Web/HTML/Element/input/text", "spellcheck-include")}}</p> + +<h2 id="Non-standard_attributes" name="Non-standard_attributes">標準外の属性</h2> + +<p>以下の標準外の属性が検索入力フィールドで利用できます。一般的な規則として、できれば使用することを避けてください。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("autocorrect")}}</code></td> + <td>入力フィールドの編集中にオートコレクトを行うかどうか。 <strong>Safari のみ。</strong></td> + </tr> + <tr> + <td><code>{{anch("incremental")}}</code></td> + <td>ユーザーがフィールドの値を編集している間、ライブで検索結果を更新できるように繰り返して {{event("search")}} イベントを送信するかどうか。 <strong>WebKit and Blink only (Safari, Chrome, Opera, etc.).</strong></td> + </tr> + <tr> + <td><code>{{anch("mozactionhint")}}</code></td> + <td>入力欄を編集している間、ユーザーが <kbd>Enter</kbd> または <kbd>Return</kbd> キーを押したときに実行されるアクションを示す文字列です。これは仮想キーボードのキーに適切なラベルを特定するために使用します。 <strong>Android 版 Firefox のみ。</strong></td> + </tr> + <tr> + <td><code>{{anch("results")}}</code></td> + <td>以前の検索クエリのドロップダウンリストに表示されるアイテムの最大数。 <strong>Safari のみ。</strong></td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefautocorrect_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3> + +<p>{{page("/ja/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p> + +<h3 id="htmlattrdefincremental_non-standard_inline">{{htmlattrdef("incremental")}} {{non-standard_inline}}</h3> + +<div id="incremental-include"> +<p>論理属性 <code>incremental</code> は WebKit および Blink 拡張で (そのため Safari, Opera, Chrome, などで対応)、もし存在すれば、{{Glossary("user agent", "ユーザーエージェント")}}に入力をライブ検索として処理します。ユーザーがフィールドの値を編集すると、ユーザーエージェントは {{event("search")}} イベントを検索ボックスを表す {{domxref("HTMLInputElement")}} オブジェクトへ送信します。これにより、ユーザーが検索を編集するたびに、コードからリアルタイムに検索結果を更新することができます。</p> + +<p><code>incremental</code> が指定されていない場合、 {{event("search")}} イベントはユーザーが明示的に検索を実行した時のみ (フィールドを編集中に <kbd>Enter</kbd> または <kbd>Return</kbd> キーを押すなど) 送信されます。</p> + +<p><code>search</code> イベントは発生頻度が制限されているため、実装により定義された間隔よりも頻繁に送信されることはありません。</p> +</div> + +<h3 id="htmlattrdefmozactionhint_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3> + +<p>{{page("/ja/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p> + +<h3 id="htmlattrdefresults_non-standard_inline">{{htmlattrdef("results")}} {{non-standard_inline}}</h3> + +<div id="results-include"> +<p><code>results</code> 属性は、 Safari のみが対応していますが、数値で {{HTMLElement("input")}} 要素が本来持っている過去の検索クエリのドロップダウンメニューに表示される項目の最大数を上書きします。</p> + +<p>値は非負の10進数でなければなりません。提供されなかった場合、または無効な値が指定された場合、ブラウザー既定の項目の最大数が使用されます。</p> +</div> + +<h2 id="Using_search_inputs" name="Using_search_inputs">検索入力欄の使用</h2> + +<p><code>search</code> 型の <code><input></code> 要素は、 <code>text</code> 型ととても似ていますが、検索用語を扱うことに特化している点が異なります。どちらも基本的には同じ動作をしますが、ユーザーエージェントによっては既定で異なるスタイルを選択するかもしれません (そしてもちろん、サイトは独自のスタイルを適用することができます)。</p> + +<h3 id="Basic_example" name="Basic_example">基本的な例</h3> + +<pre class="brush: html notranslate"><form> + <div> + <input type="search" id="mySearch" name="q"> + <button>Search</button> + </div> +</form></pre> + +<p>これは次のように表示されます。</p> + +<p>{{EmbedLiveSample("Basic_example", 600, 40)}}</p> + +<p><code>q</code> は検索入力に与えられる最も一般的な <code>name</code> ですが、そうすることが必須ではありません。送信すると、サーバーに送信されるデータの名前と値の組は <code>q=searchterm</code> となります。</p> + +<div class="note"> +<p>入力欄に {{htmlattrxref("name", "input")}} を設定することを忘れないでください。そうしないと送信されません。</p> +</div> + +<h3 id="Differences_between_search_and_text_types" name="Differences_between_search_and_text_types">search 型と text 型の違い</h3> + +<p>主な違いはブラウザーによる扱い方です。特筆するべき最初のことは、ブラウザーによっては×印を表示して、クリックすると簡単に検索語を削除できることです。次のスクリーンショットは Chrome のものです。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15235/chrome-cross-icon.png" style="display: block; height: 31px; margin: 0px auto; width: 144px;"></p> + +<p>加えて、最近のブラウザーは以前ドメイン内で入力された検索用語を自動的に格納し、そのドメインの検索入力欄で従属的な検索が行われたときに、自動補完オプションに上がってくるようにする傾向があります。これは同じ又は似た検索を繰り返して行う傾向があるユーザーにとって便利です。次のスクリーンショットは Firefox のものです。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15237/firefox-auto-complete.png" style="display: block; height: 83px; margin: 0px auto; width: 171px;">この点について、検索フォームに適用することができる有用なテクニックを見てみましょう。</p> + +<h3 id="Setting_placeholders" name="Setting_placeholders">プレイスホルダーの設定</h3> + +<p>{{htmlattrxref("placeholder","input")}} 属性を使用して、テキスト入力欄の内部に有用なプレイスホルダーを提供することで、何を入力すればよいかのヒントを提供することができます。次の例を見てください。</p> + +<pre class="brush: html notranslate"><form> + <div> + <input type="search" id="mySearch" name="q" + placeholder="Search the site..."> + <button>Search</button> + </div> +</form></pre> + +<p>プレイスホルダーの表示方法を以下で確認できます。</p> + +<p>{{EmbedLiveSample("Setting_placeholders", 600, 40)}}</p> + +<h3 id="Search_form_labels_and_accessibility" name="Search_form_labels_and_accessibility">検索フォームのラベルとアクセシビリティ</h3> + +<p>検索フォームの一つの問題はアクセシビリティです。一般的なデザインの慣例では、検索フィールドにラベルがなく (虫眼鏡のアイコンや同類のものはあります)、検索フォームの目的はふつう、よく見えるユーザーにとっては配置から明らかです (<a href="https://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">この例ではよくあるパターンを示しています</a>)。</p> + +<p>しかし、これは、検索入力が何であるかを言葉で示していないため、読み上げソフトの利用者に混乱を引き起こす可能性があります。 ビジュアルデザインに影響を与えないこの方法の1つは、 <a href="/ja/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> の機能を使用することです。</p> + +<ul> + <li><code><form></code> フォームの <code>role</code> 属性の値が <code>search</code> であることで、読み上げソフトがフォームが検索フォームであることをアナウンスします。</li> + <li>これで十分ではない場合、 {{HTMLElement("input")}} 自身の <code>aria-label</code> 属性を使用することができます。これは読み上げソフトによって読み上げられ説明的なテキストラベルです。これは非視覚的な <code><label></code> と同等のものです。</li> +</ul> + +<p>例を見てみましょう。</p> + +<pre class="brush: html notranslate"><form role="search"> + <div> + <input type="search" id="mySearch" name="q" + placeholder="Search the site..." + aria-label="Search through site content"> + <button>Search</button> + </div> +</form></pre> + +<p>プレイスホルダーがどう表示されるかを以下で確認できます。</p> + +<p>{{EmbedLiveSample("Search_form_labels_and_accessibility", 600, 40)}}</p> + +<p>前回の例から見かけ上の違いはありませんが、読み上げソフトのユーザーは追加情報を得る方法があります。</p> + +<div class="note"> +<p><strong>注</strong>: このようなアクセシビリティ機能の詳細ついては、 <a href="/ja/docs/Learn/Accessibility/WAI-ARIA_basics#SignpostsLandmarks">Signposts/Landmarks</a> をご覧ください。</p> +</div> + +<h3 id="Physical_input_element_size" name="Physical_input_element_size">物理的な入力要素の寸法</h3> + +<p>入力ボックスの物理的な寸法は、 {{htmlattrxref("size", "input")}} 属性を使って制御することができます。これによって、テキスト入力欄が一度に表示できる文字数を指定することができます。これは要素の幅に影響し、幅をピクセル数ではなく文字数で指定することができます。例えば、この例の中では、入力欄は30文字の幅です。</p> + +<pre class="brush: html notranslate"><form> + <div> + <input type="search" id="mySearch" name="q" + placeholder="Search the site..." size="30"> + <button>Search</button> + </div> +</form></pre> + +<p>結果はこの広い入力ボックスになります。</p> + +<p>{{ EmbedLiveSample('Physical_input_element_size', 600, 40) }}</p> + +<h2 id="Validation" name="Validation">検証</h2> + +<p><code>search</code> 型の <code><input></code> 要素は、通常の <code>text</code> 入力欄と同じ検証機能が利用できます。一般に検索ボックスに検証機能を使うことはあまりないでしょう。多くの場合、ユーザーは何でも入力できますが、既存の形式のデータに対して検索を行う場合など、考慮するべきケースも多少あります。</p> + +<div class="note"> +<p><strong>注</strong>: HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するサーバースクリプトの代用には<em>なりません</em>。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、間違った種類のデータなど) がデータベースに入力された場合に災害が発生するおそれがあります。</p> +</div> + +<h3 id="A_note_on_styling" name="A_note_on_styling">スタイルにおけるメモ</h3> + +<p>ユーザーにとって値が妥当かそうでないかが分かりやすくなるように、フォーム要素のスタイル付けに便利な擬似クラスが利用できます。 {{cssxref(":valid")}} 及び {{cssxref(":invalid")}} です。この節では、以下の CSS を使用して入力欄の値が妥当であれば隣にチェックマークを表示し、妥当な値でなければ隣にバツ (X) マークを表示します。</p> + +<pre class="brush: css notranslate">input:invalid ~ span:after { + content: '✖'; + padding-left: 5px; + position: absolute; +} + +input:valid ~ span:after { + content: '✓'; + padding-left: 5px; + position: absolute; +}</pre> + +<p>このテクニックにはフォーム要素の後に配置される {{htmlelement("span")}} 要素も必要で、これがアイコンのホルダーとして動作します。ブラウザーによっては一部の入力型で、直後に配置されたアイコンをうまく表示できないことがあるのでこれが必要です。</p> + +<h3 id="Making_input_required" name="Making_input_required">入力を必須にする</h3> + +<p>入力を行わないとフォームの送信が許可されないようにするための簡単な方法として、 {{htmlattrxref("required", "input")}} 属性を使うことができます。</p> + +<pre class="brush: html notranslate"><form> + <div> + <input type="search" id="mySearch" name="q" + placeholder="Search the site..." required> + <button>Search</button> + <span class="validity"></span> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">input { + margin-right: 10px; +} + +input:invalid ~ span:after { + content: '✖'; + padding-left: 5px; + position: absolute; +} + +input:valid ~ span:after { + content: '✓'; + padding-left: 5px; + position: absolute; +}</pre> +</div> + +<p>次のように表示されます。</p> + +<p>{{ EmbedLiveSample('Making_input_required', 600, 40) }}</p> + +<p>加えて、何も検索用語を入力せずに送信しようとすると、ブラウザーがメッセージを表示します。以下のものは Firefox の例です。</p> + +<p><img alt="form field with attached message that says Please fill out this field" src="https://mdn.mozillademos.org/files/15241/firefox-required-message.png" style="display: block; margin: 0 auto;"></p> + +<p>入力欄の中に無効な異なるデータ型を持つフォームを送信しようとすれば、下記の例のように、異なるメッセージが表示されるでしょう。</p> + +<h3 id="Input_value_length" name="Input_value_length">入力値の長さ</h3> + +<p>{{htmlattrxref("minlength", "input")}} 属性を使用して入力された値の最小の長さ (文字数) を指定することができます。同様に、 {{htmlattrxref("maxlength", "input")}} を使用して入力された値の最大長を文字数で設定します。</p> + +<p>以下の例では、入力値が4～8文字の長さであることが求められます。</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="mySearch">Search for user</label> + <input type="search" id="mySearch" name="q" + placeholder="User IDs are 4–8 characters in length" required + size="30" minlength="4" maxlength="8"> + <button>Search</button> + <span class="validity"></span> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">input { + margin-right: 10px; +} + +input:invalid ~ span:after { + content: '✖'; + padding-left: 5px; + position: absolute; +} + +input:valid ~ span:after { + content: '✓'; + padding-left: 5px; + position: absolute; +}</pre> +</div> + +<p>This renders like so:</p> + +<p>{{ EmbedLiveSample('Input_value_length', 600, 40) }}</p> + +<p>４文字未満でフォームを送信しようとすると、適切なエラーメッセージが表示されます (ブラウザーによって異なります)。８文字を超えて入力しようとしても、ブラウザーが許しません。</p> + +<h3 id="Specifying_a_pattern" name="Specifying_a_pattern">パターンの指定</h3> + +<p>{{htmlattrxref("pattern", "input")}} 属性を使用して、入力値が妥当と判断されるために一致しなければならない正規表現を指定することができます (入力値を検証するために正規表現を使うための短期コースは<a href="/ja/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression">正規表現による検証</a>をご覧ください)。</p> + +<p>例を見てみましょう。製品 ID の検索フォームを提供し、 ID はすべてが2文字の英字に続いて4桁の番号です。以下の例でそれに対応します。</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="mySearch">Search for product by ID:</label> + <input type="search" id="mySearch" name="q" + placeholder="two letters followed by four numbers" required + size="30" pattern="[A-z]{2}[0-9]{4}"> + <button>Search</button> + <span class="validity"></span> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">input { + margin-right: 10px; +} + +input:invalid ~ span:after { + content: '✖'; + padding-left: 5px; + position: absolute; +} + +input:valid ~ span:after { + content: '✓'; + padding-left: 5px; + position: absolute; +}</pre> +</div> + +<p>次のように表示されます。</p> + +<p>{{ EmbedLiveSample('Specifying_a_pattern', 600, 40) }}</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p><a class="external external-icon" href="https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-aria-roles">website-aria-roles</a> の例ので使用した検索フォーム (<a class="external external-icon" href="http://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">ライブで見る</a>) が良い例です。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#text-(type=text)-state-and-search-state-(type=search)', '<input type="search">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>初回定義</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#text-typetext-state-and-search-state-typesearch', '<input type="search">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.input.input-search")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Forms">HTML Forms</a></li> + <li>{{HTMLElement("input")}} および {{domxref("HTMLInputElement")}} インターフェイスに基づいています。</li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/text"><input type="text"></a></code></li> + <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li> +</ul> diff --git a/files/ja/web/html/element/input/submit/index.html b/files/ja/web/html/element/input/submit/index.html new file mode 100644 index 0000000000..269fc8345b --- /dev/null +++ b/files/ja/web/html/element/input/submit/index.html @@ -0,0 +1,286 @@ +--- +title: <input type="submit"> +slug: Web/HTML/Element/input/submit +tags: + - Element + - Form Button + - Form input + - HTML + - HTML forms + - Input + - Input Types + - Reference + - Submit Form + - button + - form + - submit + - submit button +translation_of: Web/HTML/Element/input/submit +--- +<div>{{HTMLRef("Input_types")}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <strong><code>submit</code></strong> 型は、ボタンとして描画されます。 {{domxref("Element/click_event", "click")}} イベントが発生したとき (ふつうはユーザーがボタンをクリックしたとき)、{{Glossary("user agent", "ユーザーエージェント")}}はサーバーへフォームを送信しようとします。</span></p> + +<div id="summary-example2"> +<pre class="brush: html notranslate"><input type="submit" value="リクエストを送信"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example2", 650, 30)}}</p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value", "値")}}</strong></td> + <td>ボタンのラベルとして使用する {{domxref("DOMString")}}</td> + </tr> + <tr> + <td><strong>イベント</strong></td> + <td>{{domxref("Element/click_event", "click")}}</td> + </tr> + <tr> + <td><strong>対応している共通属性</strong></td> + <td>{{htmlattrxref("type", "input")}} および {{htmlattrxref("value", "input")}}</td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>メソッド</strong></td> + <td>なし</td> + </tr> + </tbody> +</table> + +<h2 id="Value" name="Value">値</h2> + +<p><code><input type="submit"></code> 要素の {{htmlattrxref("value", "input")}} 属性は、ボタンのラベルとして表示される {{domxref("DOMString")}} を示します。ボタンはその他の真の値を持ちません。</p> + +<div id="summary-example3"> +<pre class="brush: html notranslate"><input type="submit" value="Send Request"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p> + +<p><code>value</code> を指定しなかった場合、ボタンにはユーザーエージェントによって選ばれた既定のラベルが表示されます。このラベルは「送信」または「クエリを送信」などのものです。次のものはこのブラウザーにおける送信ボタンの既定のラベルです。</p> + +<div id="summary-example1"> +<pre class="brush: html notranslate"><input type="submit"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p> + +<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2> + +<p>すべての {{HTMLElement("input")}} 型で共通する属性に加え、 <code>submit</code> 型の入力欄は次の属性にも対応しています。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("formaction")}}</code></td> + <td>フォームのデータの送信先の URL。もしあれば、フォームの {{htmlattrxref("action", "form")}} 属性を上書きする</td> + </tr> + <tr> + <td><code>{{anch("formenctype")}}</code></td> + <td>文字列で、フォームのデータに使用するエンコーディング型を指定</td> + </tr> + <tr> + <td><code>{{anch("formmethod")}}</code></td> + <td>フォームを送信する際に使用する HTTP メソッド ({{HTTPMethod("get")}} または {{HTTPMethod("post")}})</td> + </tr> + <tr> + <td><code>{{anch("formnovalidate")}}</code></td> + <td>論理属性で、存在する場合、サーバーにデータを送信する前にフォームのフィールドに<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>をしないことを示す</td> + </tr> + <tr> + <td><code>{{anch("formtarget")}}</code></td> + <td>フォームを送信した後で、サーバーから返されるレスポンスを読み込む先の{{Glossary("browsing context", "閲覧コンテキスト")}}</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefformaction">{{htmlattrdef("formaction")}}</h3> + +<p>文字列で、データの送信先の URL を示します。これはこの {{HTMLElement("input")}} が属する {{HTMLElement("form")}} 要素の {{htmlattrxref("action", "form")}} 属性より優先します。</p> + +<p>この属性は <code><a href="/ja/docs/Web/HTML/Element/input/image"><input type="image"></a></code> および {{HTMLElement("button")}} 要素でも使用できます。</p> + +<h3 id="htmlattrdefformenctype">{{htmlattrdef("formenctype")}}</h3> + +<p>文字列で、フォームのデータをサーバーに送信する際に使われるエンコーディング方法を識別します。許されている値は3つです。</p> + +<dl> + <dt><code>application/x-www-form-urlencoded</code></dt> + <dd>これは既定値で、フォームのデータを {{jsxref("encodeURI", "encodeURI()")}} などのアルゴリズムを使って URL エンコーディングした後で送信します。</dd> + <dt><code>multipart/form-data</code></dt> + <dd>データを管理するために {{domxref("FormData")}} API を使用し、複数のファイルをサーバーに送信することができます。フォームに {{HTMLElement("input")}} 要素の {{htmlattrxref("type", "input")}}<code>=file</code> (<code><a href="/ja/docs/Web/HTML/Element/input/file"><input type="file"></a></code>) が含まれている場合は、このエンコーディング型を<em>使わなければなりません</em>。</dd> + <dt><code>text/plain</code></dt> + <dd>プレーンテキストです。ほとんどデバッグでしか役に立ちませんが、送信されたデータを簡単に見ることができます。</dd> +</dl> + +<p><code>formenctype</code> 属性が指定された場合、所属するフォームの {{htmlattrxref("action", "form")}} 属性を上書きします。</p> + +<p>この属性は <code><a href="/ja/docs/Web/HTML/Element/input/image"><input type="image"></a></code> および {{HTMLElement("button")}} 要素でも使用できます。</p> + +<h3 id="htmlattrdefformmethod">{{htmlattrdef("formmethod")}}</h3> + +<p>文字列で、フォームのデータを送信するときに使用する HTTP メソッドを示します。この値は所有者であるフォームの {{htmlattrxref("method", "form")}} を上書きします。許可されている値は次の通りです。</p> + +<dl> + <dt><code>get</code></dt> + <dd>URL は <code>formaction</code> または {{htmlattrxref("action", "form")}} 属性で指定された URL に疑問符 ("?") を追加し、 <code>formenctype</code> または {{htmlattrxref("enctype", "form")}} 属性で指定された方法でエンコードされたフォームのデータが続くものになります。この URL は HTTP の {{HTTPMethod("get")}} リクエストを用いてサーバーに送信されます。このメソッドは ASCII 文字のみを含む単純なフォームでうまく動作し、副作用はありません。これが既定値です。</dd> + <dt><code>post</code></dt> + <dd>フォームのデータは、 <code>formaction</code> または {{htmlattrxref("action", "form")}} で指定された URL に HTTP の {{HTTPMethod("post")}} メソッドを用いて送信されるリクエストの本文に含められます。このメソッドは複雑なデータやファイルの添付に対応しています。</dd> + <dt><code>dialog</code></dt> + <dd>このメソッドは、入力欄が関連付けられたダイアログを閉じるだけで、フォームのデータをまったく送信しない場合ことを表すために使用します。</dd> +</dl> + +<p>この属性は <code><a href="/ja/docs/Web/HTML/Element/input/image"><input type="image"></a></code> および {{HTMLElement("button")}} 要素でも使用できます。</p> + +<h3 id="htmlattrdefformnovalidate">{{htmlattrdef("formnovalidate")}}</h3> + +<p>A Boolean attribute which, if present, specifies that the form should not be validated before submission to the server. This overrides the value of the {{htmlattrxref("novalidate", "form")}} attribute on the element's owning form.</p> + +<p>この属性は <code><a href="/ja/docs/Web/HTML/Element/input/image"><input type="image"></a></code> および {{HTMLElement("button")}} 要素でも使用できます。</p> + +<h3 id="htmlattrdefformtarget">{{htmlattrdef("formtarget")}}</h3> + +<p>A string which specifies a name or keyword that indicates where to display the response received after submitting the form. The string must be the name of a <strong>browsing context</strong> (that is, a tab, window, or {{HTMLElement("iframe")}}. A value specified here overrides any target given by the {{htmlattrxref("target", "form")}} attribute on the {{HTMLElement("form")}} that owns this input.</p> + +<p>In addition to the actual names of tabs, windows, or inline frames, there are a few special keywords that can be used:</p> + +<dl> + <dt><code>_self</code></dt> + <dd>Loads the response into the same browsing context as the one that contains the form. This will replace the current document with the received data. This is the default value used if none is specified.</dd> + <dt><code>_blank</code></dt> + <dd>Loads the response into a new, unnamed, browsing context. This is typically a new tab in the same window as the current document, but may differ depending on the configuration of the {{Glossary("user agent")}}.</dd> + <dt><code>_parent</code></dt> + <dd>Loads the response into the parent browsing context of the current one. If there is no parent context, this behaves the same as <code>_self</code>.</dd> + <dt><code>_top</code></dt> + <dd>Loads the response into the top-level browsing context; this is the browsing context that is the topmost ancestor of the current context. If the current context is the topmost context, this behaves the same as <code>_self</code>.</dd> +</dl> + +<p>この属性は <code><a href="/ja/docs/Web/HTML/Element/input/image"><input type="image"></a></code> および {{HTMLElement("button")}} 要素でも使用できます。</p> + +<h2 id="Using_submit_buttons" name="Using_submit_buttons">submit ボタンの使用</h2> + +<p><code><input type="submit"></code> buttons are used to submit forms. If you want to create a custom button and then customize the behavior using JavaScript, you need to use <code><a href="/ja/docs/Web/HTML/Element/input/button"><input type="button"></a></code>, or better still, a {{htmlelement("button")}} element.</p> + +<p>If you choose to use <code><button></code> elements to create the buttons in your form, keep this in mind: if there's only one <code><button></code> inside the {{HTMLElement("form")}}, that button will be treated as the "submit" button. So you should be in the habit of expressly specifying which button is the submit button.</p> + +<h3 id="A_simple_submit_button">A simple submit button</h3> + +<p>We'll begin by creating a form with a simple submit button:</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="example">Let's submit some text</label> + <input id="example" type="text" name="text"> + </div> + <div> + <input type="submit" value="送信"> + </div> +</form> +</pre> + +<p>次のように表示されます。</p> + +<p>{{EmbedLiveSample("A_simple_submit_button", 650, 100)}}</p> + +<p>テキストフィールドにいくらかテキストを入力してから、送信ボタンを押してみてください。</p> + +<p>Upon submitting, the data name/value pair gets sent to the server. In this instance, the string will be <code>text=<em>usertext</em></code>, where "usertext" is the text entered by the user, encoded to preserve special characters. Where and how the data is submitted depends on the configuration of the <code><form></code>; see <a href="/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a> for more details.</p> + +<h3 id="Adding_a_submit_keyboard_shortcut">Adding a submit keyboard shortcut</h3> + +<p>Keyboard shortcuts, also known as access keys and keyboard equivalents, let the user trigger a button using a key or combination of keys on the keyboard. To add a keyboard shortcut to a submit button — just as you would with any {{HTMLElement("input")}} for which it makes sense — you use the {{htmlattrxref("accesskey")}} global attribute.</p> + +<p>In this example, <kbd>s</kbd> is specified as the access key (you'll need to press <kbd>s</kbd> plus the particular modifier keys for your browser/OS combination. In order to avoid conflicts with the user agent's own keyboard shortcuts, different modifier keys are used for access keys than for other shortcuts on the host computer. See {{htmlattrxref("accesskey")}} for further details.</p> + +<p>Here's the previous example with the <kbd>s</kbd> access key added:</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="example">Let's submit some text</label> + <input id="example" type="text" name="text"> + </div> + <div> + <input type="submit" value="Send" + accesskey="s"> + </div> +</form></pre> + +<p>For example, in Firefox for Mac, pressing <kbd>Control</kbd>-<kbd>Option</kbd>-<kbd>S</kbd> triggers the Send button, while Chrome on Windows uses <kbd>Alt</kbd>+<kbd>S</kbd>.</p> + +<p>{{EmbedLiveSample("Adding_a_submit_keyboard_shortcut", 650, 100)}}</p> + +<p>The problem with the above example is that the user will not know what the access key is! This is especially true since the modifiers are typically non-standard to avoid conflicts. When building a site, be sure to provide this information in a way that doesn't interfere with the site design (for example by providing an easily accessible link that points to information on what the site access keys are). Adding a tooltip to the button (using the {{htmlattrxref("title")}} attribute) can also help, although it's not a complete solution for accessibility purposes.</p> + +<h3 id="Disabling_and_enabling_a_submit_button">Disabling and enabling a submit button</h3> + +<p>To disable a submit button, simply specify the {{htmlattrxref("disabled")}} global attribute on it, like so:</p> + +<div id="disable-example1"> +<pre class="brush: html notranslate"><input type="submit" value="Disabled" disabled></pre> +</div> + +<p>You can enable and disable buttons at run time by simply setting <code>disabled</code> to <code>true</code> or <code>false</code>; in JavaScript this looks like <code>btn.disabled = true</code> or <code>btn.disabled = false</code>.</p> + +<div class="note"> +<p>See the <code><a href="/ja/docs/Web/HTML/Element/input/button#Disabling_and_enabling_a_button"><input type="button"></a></code> page for more ideas about enabling and disabling buttons.</p> +</div> + +<h2 id="Validation" name="Validation">検証</h2> + +<p>送信ボタンは制約の検証には参加しません。制約を受ける実際の値を持っていません。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>We've included simple examples above. There isn't really anything more to say about submit buttons. There's a reason this kind of control is sometimes called a "simple button."</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#submit-button-state-(type=submit)', '<input type="submit">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#submit-button-state-(type=submit)', '<input type="submit">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.input.input-submit")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("input")}} およびそれが実装している {{domxref("HTMLInputElement")}} インターフェイス</li> + <li><a href="/ja/docs/Learn/Forms/Basic_native_form_controls#Actual_buttons">フォームとボタン</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/forms">フォーム (アクセシビリティ)</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms">HTML フォーム</a></li> + <li>{{HTMLElement("button")}} 要素</li> + <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li> +</ul> diff --git a/files/ja/web/html/element/input/tel/index.html b/files/ja/web/html/element/input/tel/index.html new file mode 100644 index 0000000000..07198f4c82 --- /dev/null +++ b/files/ja/web/html/element/input/tel/index.html @@ -0,0 +1,544 @@ +--- +title: <input type="tel"> +slug: Web/HTML/Element/input/tel +tags: + - Element + - Form Inputs + - Forms + - HTML + - HTML forms + - HTML input + - Input + - Input Element + - Input Type + - Phone Numbers + - Reference + - Telephone Numbers + - tel +translation_of: Web/HTML/Element/input/tel +--- +<div>{{HTMLRef("Input_types")}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <code><strong>tel</strong></code> 型は、ユーザーに電話番号を入力または編集させるために使用します。 <code><a href="/ja/docs/Web/HTML/Element/input/email"><input type="email"></a></code> や <code><a href="/ja/docs/Web/HTML/Element/input/url"><input type="url"></a></code> とは異なり、送信前に値が特定の書式であると自動的には検証されません。電話番号の書式は世界中で様々だからです。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-tel.html", "tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p><code>tel</code> の入力欄は機能的に標準の <code>text</code> 入力欄と同じであるという事実にもかかわらず、便利な用途を提供します。もっとも手っ取り早く表れるのは、モバイルブラウザー — 特に携帯電話のもの — では、電話番号の入力に最適化された専用のキーパッドを表示することがあります。電話番号の専用の入力型を使用すると、カスタム検証を追加して電話番号の扱いをもっと便利にすることができます。</p> + +<div class="note"> +<p><strong>注</strong>: <code>tel</code> 型に対応していないブラウザーでは、通常の {{HTMLElement("input/text", "text")}} 入力欄で代用されます。</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value", "値")}}</strong></td> + <td>電話番号を表す {{domxref("DOMString")}}、または空欄</td> + </tr> + <tr> + <td><strong>イベント</strong></td> + <td>{{domxref("HTMLElement/change_event", "change")}} および {{domxref("HTMLElement/input_event", "input")}}</td> + </tr> + <tr> + <td><strong>対応している共通属性</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("size", "input")}}</td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>list</code>, <code>selectionStart</code>, <code>selectionEnd</code>, <code>selectionDirection</code>, and <code>value</code></td> + </tr> + <tr> + <td><strong>メソッド</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value" name="Value">値</h2> + +<p>{{HTMLElement("input")}} 要素の {{htmlattrxref("value", "input")}} 属性には、電話番号を表す文字列、または空文字列 (<code>""</code>) の {{domxref("DOMString")}} が入ります。</p> + +<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2> + +<p>型に関係なくすべての {{HTMLElement("input")}} 要素を操作する属性に加え、電話番号型の入力欄は次の属性にも対応しています。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("list")}}</code></td> + <td>オプションで自動補完の定義済みの選択肢を含む <datalist> 要素の id</td> + </tr> + <tr> + <td><code>{{anch("maxlength")}}</code></td> + <td>妥当な入力として受け入れるための、 UTF-16 文字単位の最大長</td> + </tr> + <tr> + <td><code>{{anch("minlength")}}</code></td> + <td>フィールドの内容が妥当と判断される最小文字列長</td> + </tr> + <tr> + <td><code>{{anch("pattern")}}</code></td> + <td>制約検証に通るために入力された値が一致する必要がある正規表現</td> + </tr> + <tr> + <td><code>{{anch("placeholder")}}</code></td> + <td>値がない時にフィールド内に表示される入力例の値</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>論理属性で、存在すれば、フィールドの内容をユーザーが編集できないことを示す</td> + </tr> + <tr> + <td><code>{{anch("size")}}</code></td> + <td>画面上における入力フィールドの幅の文字数</td> + </tr> + </tbody> +</table> + +<p id="htmlattrdeflist">{{page("/ja/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p> + +<h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3> + +<p>ユーザーが電話番号フィールドに入力することができる (UTF-16 コード単位での) 最大文字数です。 0 以上の整数値である必要があります。 <code>maxlength</code> が指定されていないか、無効な値が指定されていると、電話番号フィールドには最大文字数が設定されません。この値は <code>minlength</code> の値以上である必要もあります。</p> + +<p>フィールドに入力された長さが UTF-16 コード単位で <code>maxlength</code> の長さを超えていると、その入力欄は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。</p> + +<h3 id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</h3> + +<p>ユーザーが電話番号フィールドに入力することができる (UTF-16 コード単位での) 最小文字数です。これは非負の整数値で、 <code>maxlength</code> で指定された値以下である必要があります。 <code>minlength</code> が指定されていないか、無効な値が指定されていると、電話番号フィールドには最小文字数が設定されません。</p> + +<p>入力欄のテキストの長さが UTF-16 コード単位で <code>minlength</code> の長さよりも短いと、電話番号フィールドは<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。</p> + +<h3 id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</h3> + +<p>{{page("/ja/docs/Web/HTML/Element/input/text", "pattern-include")}}</p> + +<p>詳細と例については後述の{{anch("Pattern validation", "パターン検証")}}を参照してください。</p> + +<p>{{page("/ja/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> + +<p>{{page("/ja/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> + +<p>{{page("/ja/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p> + +<h2 id="Non-standard_attributes" name="Non-standard_attributes">標準外の属性</h2> + +<p>ブラウザーによっては、以下の標準外の属性が利用できます。一般的な規則として、できれば使用することを避けてください。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("autocorrect")}}</code></td> + <td>この入力フィールドの編集中にオートコレクトを許可するかどうか。 <strong>Safari のみ。</strong></td> + </tr> + <tr> + <td><code>{{anch("mozactionhint")}}</code></td> + <td>入力欄を編集している間、ユーザーが <kbd>Enter</kbd> または <kbd>Return</kbd> キーを押したときに実行されるアクションを示す文字列です。これは仮想キーボードのキーに適切なラベルを特定するために使用します。 <strong>Android 版 Firefox for のみ。</strong></td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefautocorrect_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3> + +<p>{{page("/ja/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p> + +<h3 id="htmlattrdefmozactionhint_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3> + +<p>{{page("/ja/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p> + +<h2 id="tel_入力欄の使用">tel 入力欄の使用</h2> + +<p>ウェブにおいて、電話番号はとてもよく収集されるデータの種類です。例えば、何らかの会員登録や通信販売サイトで、商取引や緊急時連絡の目的でユーザーに電話番号を尋ねることが良くあります。一般的にどのように電話番号が入力されるかを考えれば、残念ながら「1つのサイズですべてに合う」ような解決策は現実的ではありません。</p> + +<p>幸い、自分でサイトの要件を検討し、自分で適切なレベルの検証を実装することができます。詳しくは、以下の{{anch("Validation", "検証")}}をご覧ください。</p> + +<h3 id="Custom_keyboards" name="Custom_keyboards">カスタムキーボード</h3> + +<p>One of the main advantages of <code><input type="tel"></code> is that it causes mobile browsers to display a special keyboard for entering phone numbers. For example, here's what the keypads look like on a couple of devices.</p> + +<table class="standard-table"> + <caption>Examples of custom keyboards on mobile devices.</caption> + <thead> + <tr> + <th scope="col">Firefox for Android</th> + <th scope="col">WebKit iOS (Safari/Chrome/Firefox)</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Firefox for Android screen shot" src="https://mdn.mozillademos.org/files/15441/fx-android-tel.png" style="height: 640px; width: 360px;"></td> + <td><img alt="Firefox for iOS screenshot" src="https://mdn.mozillademos.org/files/15603/iphone-tel-keyboard-50pct.png" style="height: 640px; width: 360px;"></td> + </tr> + </tbody> +</table> + +<h3 id="A_simple_tel_input" name="A_simple_tel_input">単純な tel 入力欄</h3> + +<p>In its most basic form, a tel input can be implemented like this:</p> + +<pre class="brush: html notranslate"><label for="telNo">Phone number:</label> +<input id="telNo" name="telNo" type="tel"></pre> + +<p>{{ EmbedLiveSample('A_simple_tel_input', 600, 40) }}</p> + +<p>There is nothing magical going on here. When submitted to the server, the above input's data would be represented as, for example, <code>telNo=+12125553151</code>.</p> + +<h3 id="Placeholders" name="Placeholders">プレイスホルダー</h3> + +<p>Sometimes it's helpful to offer an in-context hint as to what form the input data should take. This can be especially important if the page design doesn't offer descriptive labels for each {{HTMLElement("input")}}. This is where <strong>placeholders</strong> come in. A placeholder is a value that demonstrates the form the <code>value</code> should take by presenting an example of a valid value, which is displayed inside the edit box when the element's <code>value</code> is <code>""</code>. Once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears.</p> + +<p>Here, we have an <code>tel</code> input with the placeholder <code>123-4567-8901</code>. Note how the placeholder disappears and reappears as you manipulate the contents of the edit field.</p> + +<pre class="brush: html notranslate"><input id="telNo" name="telNo" type="tel" + placeholder="123-4567-8901"></pre> + +<p>{{ EmbedLiveSample('Placeholders', 600, 40) }}</p> + +<h3 id="Controlling_the_input_size" name="Controlling_the_input_size">入力欄の寸法の制御</h3> + +<p>You can control not only the physical length of the input box, but also the minimum and maximum lengths allowed for the input text itself.</p> + +<h4 id="Physical_input_element_size" name="Physical_input_element_size">物理的な入力欄の寸法</h4> + +<p>The physical size of the input box can be controlled using the {{htmlattrxref("size", "input")}} attribute. With it, you can specify the number of characters the input box can display at a time. In this example, for instance, the <code>tel</code> edit box is 20 characters wide:</p> + +<pre class="brush: html notranslate"><input id="telNo" name="telNo" type="tel" + size="20"></pre> + +<p>{{ EmbedLiveSample('Physical_input_element_size', 600, 40) }}</p> + +<h4 id="Element_value_length" name="Element_value_length">要素の値の長さ</h4> + +<p>The <code>size</code> is separate from the length limitation on the entered telephone number. You can specify a minimum length, in characters, for the entered telephone number using the {{htmlattrxref("minlength", "input")}} attribute; similarly, use {{htmlattrxref("maxlength", "input")}} to set the maximum length of the entered telephone number.</p> + +<p>The example below creates a 20-character wide telephone number entry box, requiring that the contents be no shorter than 9 characters and no longer than 14 characters.</p> + +<pre class="brush: html notranslate"><input id="telNo" name="telNo" type="tel" + size="20" minlength="9" maxlength="14"></pre> + +<p>{{EmbedLiveSample("Element_value_length", 600, 40) }}</p> + +<div class="note"> +<p><strong>Note</strong>: The above attributes do affect {{anch("Validation")}} — the above example's inputs will count as invalid if the length of the value is less than 9 characters, or more than 14. Most browser won't even let you enter a value over the max length.</p> +</div> + +<h3 id="Providing_default_options" name="Providing_default_options">既定のオプションの提供</h3> + +<p>これまでどおり、 {{htmlattrxref("value", "input")}} 属性を設定することで <code>tel</code> 入力欄に既定値を指定することができます。</p> + +<div id="Default_value"> +<pre class="brush: html notranslate"><input id="telNo" name="telNo" type="tel" + value="333-4444-4444"></pre> +</div> + +<p>{{EmbedLiveSample("Default_value", 600, 40)}}</p> + +<h4 id="Offering_suggested_values" name="Offering_suggested_values">サジェスト値の提供</h4> + +<p>Taking it a step farther, you can provide a list of default phone number values from which the user can select. To do this, use the {{htmlattrxref("list", "input")}} attribute. This doesn't limit the user to those options, but does allow them to select commonly-used telephone numbers more quickly. This also offers hints to {{htmlattrxref("autocomplete", "input")}}. The <code>list</code> attribute specifies the ID of a {{HTMLElement("datalist")}} element, which in turn contains one {{HTMLElement("option")}} element per suggested value; each <code>option</code>'s <code>value</code> is the corresponding suggested value for the telephone number entry box.</p> + +<pre class="brush: html notranslate"><label for="telNo">Phone number: </label> +<input id="telNo" name="telNo" type="tel" list="defaultTels"> + +<datalist id="defaultTels"> + <option value="111-1111-1111"> + <option value="122-2222-2222"> + <option value="333-3333-3333"> + <option value="344-4444-4444"> +</datalist></pre> + +<p>{{EmbedLiveSample("Offering_suggested_values", 600, 40)}}</p> + +<p>With the {{HTMLElement("datalist")}} element and its {{HTMLElement("option")}}s in place, the browser will offer the specified values as potential values for the email address; this is typically presented as a popup or drop-down menu containing the suggestions. While the specific user experience may vary from one browser to another, typically clicking in the edit box presents a drop-down of the suggested email addresses. Then, as the user types, the list is adjusted to show only filtered matching values. Each typed character narrows down the list until the user makes a selection or types a custom value.</p> + +<p>Here's a screenshot of what that might look like:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15605/phone-number-with-options.png" style="border-style: solid; border-width: 1px; height: 150px; width: 684px;"></p> + +<h2 id="Validation" name="Validation">検証</h2> + +<p>As we've touched on before, it's quite difficult to provide a one-size-fits-all client-side validation solution for phone numbers. So what can we do? Let's consider some options.</p> + +<div class="warning"> +<p><strong>重要</strong>: HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用には<em>なりません</em>。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、間違った種類のデータなど) が送信された場合に災害が発生するおそれがあります。</p> +</div> + +<h3 id="Making_telephone_numbers_required" name="Making_telephone_numbers_required">電話番号を必須にする</h3> + +<p>You can make it so that an empty input is invalid and won't be submitted to the server using the {{htmlattrxref("required", "input")}} attribute. For example, let's use this HTML:</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="telNo">Enter a telephone number (required): </label> + <input id="telNo" name="telNo" type="tel" required> + <span class="validity"></span> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<p>And let's include the following CSS to highlight valid entries with a checkmark and invalid entries with a cross:</p> + +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; content: '✖'; + padding-left: 5px; + color: #8b0000; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; + color: #009000; +}</pre> + +<p>The output looks like this:</p> + +<p>{{EmbedLiveSample("Making_telephone_numbers_required", 700, 70)}}</p> + +<h3 id="Pattern_validation" name="Pattern_validation">パターンによる値検証</h3> + +<p>If you want to further restrict entered numbers so they also have to conform to a specific pattern, you can use the {{htmlattrxref("pattern","input")}} attribute, which takes as its value a {{Glossary("regular expression")}} that entered values have to match.</p> + +<p>In this example we'll use the same CSS as before, but our HTML is changed to look like this:</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="telNo">Enter a telephone number (in the form xxx-xxx-xxxx): </label> + <input id="telNo" name="telNo" type="tel" required + pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"> + <span class="validity"></span> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; content: '✖'; + padding-left: 5px; + color: #8b0000; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; + color: #009000; +}</pre> +</div> + +<p>{{EmbedLiveSample("Pattern_validation", 700, 70)}}</p> + +<p>Notice how the entered value is reported as invalid unless the pattern xxx-xxx-xxxx is matched; for instance, 41-323-421 won't be accepted. Neither will 800-MDN-ROCKS. However, 865-555-6502 will be accepted. This particular pattern is obviously only useful for certain locales — in a real application you'd probably have to vary the pattern used depending on the locale of the user.</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>In this example, we present a simple interface with a {{htmlelement("select")}} element that lets the user choose which country they're in, and a set of <code><input type="tel"></code> elements to let them enter each part of their phone number; there is no reason why you can't have multiple <code>tel</code> inputs.</p> + +<p>Each input has a {{htmlattrxref("placeholder","input")}} attribute to show a hint to sighted users about what to enter into it, a {{htmlattrxref("pattern","input")}} to enforce a specific number of characters for the desired section, and an <code>aria-label</code> attribute to contain a hint to be read out to screenreader users about what to enter into it.</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="country">Choose your country:</label> + <select id="country" name="country"> + <option>UK</option> + <option selected>US</option> + <option>Germany</option> + </select> + </div> + <div> + <p>Enter your telephone number: </p> + <span class="areaDiv"> + <input id="areaNo" name="areaNo" type="tel" required + placeholder="Area code" pattern="[0-9]{3}" + aria-label="Area code"> + <span class="validity"></span> + </span> + <span class="number1Div"> + <input id="number1" name="number1" type="tel" required + placeholder="First part" pattern="[0-9]{3}" + aria-label="First part of number"> + <span class="validity"></span> + </span> + <span class="number2Div"> + <input id="number2" name="number2" type="tel" required + placeholder="Second part" pattern="[0-9]{4}" + aria-label="Second part of number"> + <span class="validity"></span> + </span> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<p>The JavaScript is relatively simple — it contains an {{domxref("GlobalEventHandlers.onchange", "onchange")}} event handler that, when the <code><select></code> value is changed, updates the <code><input></code> element's <code>pattern</code>, <code>placeholder</code>, and <code>aria-label</code> to suit the format of telephone numbers in that country/territory.</p> + +<pre class="brush: js notranslate">var selectElem = document.querySelector("select"); +var inputElems = document.querySelectorAll("input"); + +selectElem.onchange = function() { + for(var i = 0; i < inputElems.length; i++) { + inputElems[i].value = ""; + } + + if(selectElem.value === "US") { + inputElems[2].parentNode.style.display = "inline"; + + inputElems[0].placeholder = "Area code"; + inputElems[0].pattern = "[0-9]{3}"; + + inputElems[1].placeholder = "First part"; + inputElems[1].pattern = "[0-9]{3}"; + inputElems[1].setAttribute("aria-label","First part of number"); + + inputElems[2].placeholder = "Second part"; + inputElems[2].pattern = "[0-9]{4}"; + inputElems[2].setAttribute("aria-label","Second part of number"); + } else if(selectElem.value === "UK") { + inputElems[2].parentNode.style.display = "none"; + + inputElems[0].placeholder = "Area code"; + inputElems[0].pattern = "[0-9]{3,6}"; + + inputElems[1].placeholder = "Local number"; + inputElems[1].pattern = "[0-9]{4,8}"; + inputElems[1].setAttribute("aria-label","Local number"); + } else if(selectElem.value === "Germany") { + inputElems[2].parentNode.style.display = "inline"; + + inputElems[0].placeholder = "Area code"; + inputElems[0].pattern = "[0-9]{3,5}"; + + inputElems[1].placeholder = "First part"; + inputElems[1].pattern = "[0-9]{2,4}"; + inputElems[1].setAttribute("aria-label","First part of number"); + + inputElems[2].placeholder = "Second part"; + inputElems[2].pattern = "[0-9]{4}"; + inputElems[2].setAttribute("aria-label","Second part of number"); + } +}</pre> + +<p>The example looks like this:</p> + +<p>{{EmbedLiveSample('Examples', 600, 140)}}</p> + +<p>This is an interesting idea, which goes to show a potential solution to the problem of dealing with international phone numbers. You would have to extend the example of course to provide the correct pattern for potentially every country, which would be a lot of work, and there would still be no foolproof guarantee that the users would enter their numbers correctly.</p> + +<p>It makes you wonder if it is worth going to all this trouble on the client-side, when you could just let the user enter their number in whatever format they wanted on the client-side and then validate and sanitize it on the server. But this choice is yours to make.</p> + +<div class="hidden"> +<pre class="brush: css notranslate">div { +margin-bottom: 10px; +position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; content: '✖'; + padding-left: 5px; + color: #8b0000; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; + color: #009000; +}</pre> +</div> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#telephone-state-(type=tel)', '<input type="tel">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>初回定義</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#tel-state-typetel', '<input type="tel">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.input.input-tel")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Forms">HTML フォームガイド</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/forms">フォームとアクセシビリティ</a></li> + <li>{{HTMLElement("input")}} + <ul> + <li><code><a href="/ja/docs/Web/HTML/Element/input/text"><input type="text"></a></code></li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/email"><input type="email"></a></code></li> + </ul> + </li> + <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li> +</ul> diff --git a/files/ja/web/html/element/input/text/index.html b/files/ja/web/html/element/input/text/index.html new file mode 100644 index 0000000000..b1e4a6db94 --- /dev/null +++ b/files/ja/web/html/element/input/text/index.html @@ -0,0 +1,471 @@ +--- +title: <input type="text"> +slug: Web/HTML/Element/input/text +tags: + - Form input + - Forms + - HTML + - HTML forms + - Input + - Input Type + - Reference + - Text + - text entry + - text input +translation_of: Web/HTML/Element/input/text +--- +<div>{{HTMLRef("Input_types")}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <code><strong>text</strong></code> 型は、基本的な単一行のテキスト入力欄を生成します。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value", "値")}}</strong></td> + <td>テキスト入力欄に含まれる文字列を表す {{domxref("DOMString")}}。</td> + </tr> + <tr> + <td><strong>イベント</strong></td> + <td>{{event("change")}} および {{event("input")}}</td> + </tr> + <tr> + <td><strong>対応している共通属性</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} and {{htmlattrxref("size", "input")}}</td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td>{{htmlattrxref("list", "input")}}, <code>value</code></td> + </tr> + <tr> + <td><strong>メソッド</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value" name="Value">値</h2> + +<p> {{htmlattrxref("value", "input")}} 属性は、テキスト入力欄に入力された現在のテキストの値が入っている {{domxref("DOMString")}} です。 JavaScript では {{domxref("HTMLInputElement.value", "value")}} プロパティを使ってこれを受け取ることができます。</p> + +<pre class="brush: js notranslate">let theText = myTextInput.value; +</pre> + +<p>入力欄に検証の制約がない場合 (詳しくは{{anch("Validation", "検証")}}を参照)、値は空文字列 ("") にすることができます。</p> + +<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2> + +<p>型に関係なくすべての {{HTMLElement("input")}} 要素を操作する属性に加え、 <code>text</code> 型の入力欄は次の属性にも対応しています。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("list")}}</code></td> + <td>任意の定義済みの自動補完オプションを含む<datalist> 要素の id</td> + </tr> + <tr> + <td><code>{{anch("maxlength")}}</code></td> + <td>入力欄が受け付ける最大文字数</td> + </tr> + <tr> + <td><code>{{anch("minlength")}}</code></td> + <td>入力欄が取りうる、妥当と判断される最小文字列長</td> + </tr> + <tr> + <td><code>{{anch("pattern")}}</code></td> + <td>妥当と判断されるために、入力欄の内容が一致する必要がある正規表現</td> + </tr> + <tr> + <td><code>{{anch("placeholder")}}</code></td> + <td>空欄の時に入力欄に表示される入力例の値</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>入力欄の内容を読み取り専用にするかどうかを示す論理属性</td> + </tr> + <tr> + <td><code>{{anch("size")}}</code></td> + <td>入力欄の長さを何文字分にするかを表す数値</td> + </tr> + <tr> + <td><code>{{anch("spellcheck")}}</code></td> + <td>入力欄でスペルチェックを有効にするかどうか、既定のスペルチェック構成を利用するかを制御する</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdeflist">{{htmlattrdef("list")}}</h3> + +<p>list 属性の値は、同じ文書内にある {{HTMLElement("datalist")}} 要素の {{domxref("Element.id", "id")}} です。 {{HTMLElement("datalist")}} は、この入力欄でユーザーに提案するための事前定義された値のリストを提供します。リストの中の値のうち {{htmlattrxref("type", "input")}} と互換性のないものは、提案されるオプションには含まれません。提供される値は提案であり、要件ではありません。ユーザーはこの定義済みリストから選択することも、異なる値を提供することもできます。</p> + +<h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3> + +<p>ユーザーが <code>text</code> 入力欄に入力することができる (UTF-16 コード単位での) 最大文字数です。 0 以上の整数値である必要があります。 <code>maxlength</code> が指定されていないか、無効な値が指定されていると、 <code>text</code> 入力欄には最大文字数が設定されません。この値は <code>minlength</code> の値以上である必要もあります。</p> + +<p>フィールドのテキスト値の長さが UTF-16 コード単位で <code>maxlength</code> の長さを超えていると、その入力欄は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。</p> + +<h3 id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</h3> + +<p>ユーザーが <code>text</code> 入力欄に入力することができる (UTF-16 コード単位での) 最小文字数です。これは非負の整数値で、 <code>maxlength</code> で指定された値以下である必要があります。 <code>minlength</code> が指定されていないか、無効な値が指定されていると、 <code>text</code> 入力欄には最小文字数が設定されません。</p> + +<p>入力欄のテキスト値の長さが UTF-16 コード単位で <code>minlength</code> の長さよりも短いと、その入力欄は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。</p> + +<h3 id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</h3> + +<div id="pattern-include"> +<p><code>pattern</code> 属性は、指定する場合は正規表現であり、入力欄の {{htmlattrxref("value")}} が<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に合格するためにはこれと一致しなければなりません。これは {{jsxref("RegExp")}} 型で使用される JavaScript の妥当な正規表現である必要があり、これは<a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions">正規表現のガイド</a>で記述されています。正規表現がコンパイルされるときに <code>'u'</code> フラグが指定されるので、パターンは ASCII ではなく Unicode コードポイントの並びとして扱われます。パターンのテキストをスラッシュで囲んではいけません。</p> + +<p>指定されたパターンがないかか無効である場合は、正規表現は適用されず、この属性は完全に無視されます。</p> + +<div class="note"> +<p><strong>Tip:</strong> {{htmlattrxref("title", "input")}} 属性を使用してテキストを指定すると、多くのブラウザーでパターンに一致する要件が何であるかを説明するツールチップを表示することができます。近くに他の説明テキストを配置する必要があります。</p> +</div> +</div> + +<p>詳細や例については{{anch("Specifying a pattern", "パターンの指定")}}を参照してください。</p> + +<h3 id="htmlattrdefplaceholder">{{htmlattrdef("placeholder")}}</h3> + +<p><code>placeholder</code> 属性は文字列で、その欄にどのような種類の情報が求められるかについてのユーザーに対する短いヒントを提供します。これは求められるデータの種類を紹介する一語または短い句であり、説明的なメッセージではありません。テキストには改行を含めることは<em>できません</em>。</p> + +<p>コントロールの内容が単一の書字方向 ({{Glossary("LTR")}} または {{Glossary("RTL")}}) であるものの、プレイスホルダーを逆の方向に表示する必要がある場合、 Unicode 双方向アルゴリズム書式文字を使用してプレイスホルダーの中で書字方向を上書きすることができます。これらの文字については、{{SectionOnPage("/ja/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm", "Unicode 制御文字を使用した書字方向の上書き")}}を参照してください。</p> + +<div class="note"> +<p><strong>注:</strong> 可能であれば <code>placeholder</code> を使用することは避けてください。フォームを説明する他の方法ほど意味論的に有益ではなく、コンテンツに予期しない技術的な問題を引き起こす可能性があります。詳しくは、{{SectionOnPage("/ja/docs/Web/HTML/Element/input", "Labels and placeholders", "ラベルとプレイスホルダー")}}を参照してください。</p> +</div> + +<h3 id="htmlattrdefreadonly">{{htmlattrdef("readonly")}}</h3> + +<p>論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 <code>value</code> は、 JavaScript コードから直接 {{domxref("HTMLInputElement.value")}} プロパティを設定することで変更することができます。</p> + +<div class="note"> +<p><strong>注:</strong> 読み取り専用フィールドは値を持てないため、 <code>required</code> は <code>readonly</code> 属性も指定されている入力欄には効果がありません。</p> +</div> + +<h3 id="htmlattrdefsize">{{htmlattrdef("size")}}</h3> + +<p><code>size</code> 属性は数値であり、入力欄の幅を何文字分とするかを示します。値はゼロより大きな数値である必要があり、既定値は20です。文字の幅は様々であるため、これは正確ではない可能性もあり、依存することはできません。結果の入力欄は文字数やフォント (使用中の {{cssxref("font")}} 設定) によって、指定された文字数より狭くなったり広くなったりすることがあります。</p> + +<p>これはユーザーがフィールドに入力することができる文字数の制限を設定するものでは<em>ありません</em>。これは一度に見える文字数をおよそ指定するだけです。入力データの長さの上限を設定するには、 <code>{{anch("maxlength")}}</code> 属性を使用してください。</p> + +<h3 id="htmlattrdefspellcheck">{{htmlattrdef("spellcheck")}}</h3> + +<p><code>spellcheck</code> はグローバル属性で、要素でスペルチェックを有効にするかどうかを示します。内容が編集可能なものすべてに使用することができますが、ここでは <code>spellcheck</code> 属性の {{HTMLElement("input")}} 要素の使用に関して特に考えます。 <code>spellcheck</code> で利用できる値は次の通りです。</p> + +<dl> + <dt><code>false</code></dt> + <dd>この要素でスペルチェックを無効にします。</dd> + <dt><code>true</code></dt> + <dd>この要素でスペルチェックを有効にします。</dd> + <dt>"" (空文字列) または値なし</dt> + <dd>スペルチェックについて、要素の既定の動作に従います。これは親の <code>spellcheck</code> 設定や、その他の要因に基づくことがあります。</dd> +</dl> + +<p>入力欄では、 {{anch("readonly")}} 属性が設定されておらず、かつ無効になっていない場合にスペルチェックを有効にすることができます。</p> + +<p><code>spellcheck</code> を読み取ることで返される値は、{{Glossary("user agent", "ユーザーエージェント")}}の設定によって上書きされる場合、コントロール内のスペルチェックの実際の状態を反映しない可能性があります。</p> + +<h2 id="Non-standard_attributes" name="Non-standard_attributes">標準外の属性</h2> + +<p>ブラウザーによっては、以下の標準外の属性が利用できます。一般的な規則として、できれば使用することを避けてください。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("autocorrect")}}</code></td> + <td>オートコレクトを行うかどうかを <code>on</code> または <code>off</code> で示します。 <strong>Safari のみ。</strong></td> + </tr> + <tr> + <td><code>{{anch("mozactionhint")}}</code></td> + <td>入力欄を編集している間、ユーザーが <kbd>Enter</kbd> または <kbd>Return</kbd> キーを押したときに実行されるアクションを示す文字列です。これは仮想キーボードのキーに適切なラベルを特定するために使用します。 <strong>Android 版 Firefox for のみ。</strong></td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefautocorrect_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3> + +<div id="autocorrect-include"> +<p>Safari 拡張である <code>autocorrect</code> 属性は文字列で、ユーザーがこの欄を編集している間に自動修正を有効にするかどうかを示します。次の値が許されています。</p> + +<dl> + <dt><code>on</code></dt> + <dd>構成されていれば、打ち間違いの自動修正や、テキストの置き換え処理を有効にします。</dd> + <dt><code>off</code></dt> + <dd>自動修正やテキストの置き換えを無効にします。</dd> +</dl> +</div> + +<h3 id="htmlattrdefmozactionhint_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3> + +<div id="mozactionhint-include"> +<p>Mozilla 拡張で Android 版 Firefox で対応しており、ユーザーがフィールドを編集中に <kbd>Enter</kbd> キーや <kbd>Return</kbd> キーを押した場合に行われるアクションの種類のヒントを提供します。この情報は仮想キーボードの <kbd>Enter</kbd> キーにどのようなラベルを使用するかを決定するために使用されます。</p> + +<div class="note"> +<p><strong>注:</strong> これはグローバル属性 {{htmlattrxref("enterkeyhint")}} として<a href="https://html.spec.whatwg.org/#input-modalities:-the-enterkeyhint-attribute">標準化されています</a>が、まだ広くは実装されていません。 Firefox の実装状態の変遷を確認するには、 {{bug(1490661)}} を参照してください。</p> +</div> + +<p>許可されている値は <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code>, <code>send</code> です。ブラウザーはこのヒントを使用して、 Enter キーにどのラベルを置くかを決定します。</p> +</div> + +<h2 id="Using_text_inputs" name="Using_text_inputs">テキスト入力欄の使用</h2> + +<p><code>text</code> 型の <code><input></code> 要素は、基本的な単一行の入力欄を作成します。どこでも、ユーザーに単一行の値を入力させたい場所で、もっと具体的な入力型が値の中にない場合 (例えば、<a href="/ja/docs/Web/HTML/Element/input/datetime-local">日付</a>、 <a href="/ja/docs/Web/HTML/Element/input/url">URL</a>、<a href="/ja/docs/Web/HTML/Element/input/email">メールアドレス</a>、<a href="/ja/docs/Web/HTML/Element/input/search">検索語</a>など、もっと良い選択肢が利用できるもの) に使用します。</p> + +<h3 id="Basic_example" name="Basic_example">基本的な例</h3> + +<pre class="brush: html notranslate"><form> + <div> + <label for="uname">Choose a username: </label> + <input type="text" id="uname" name="name"> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<p>これは次のように表示されます。</p> + +<p>{{EmbedLiveSample("Basic_example", 600, 50)}}</p> + +<p>送信されると、サーバーに送信される名前と値の組のデータは <code>uname=Chris</code> になります (送信前に入力値として "Chris" が入力された場合)。 {{HTMLElement("input")}} 要素に {{htmlattrxref("name", "input")}} 属性を入れ忘れてはいけません。さもないと、テキスト入力欄の値が送信されるデータに含まれなくなります。</p> + +<h3 id="Setting_placeholders" name="Setting_placeholders">プレイスホルダーの設定</h3> + +<p> {{htmlattrxref("placeholder","input")}} 属性を使用して、テキスト入力欄の内部に有用なプレイスホルダーを提供することで、何を入力すればよいかのヒントを提供することができます。次の例を見てください。</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="uname">Choose a username: </label> + <input type="text" id="uname" name="name" + placeholder="Lower case, all one word"> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<p>プレイスホルダーがどう表示されるかを以下で確認できます。</p> + +<p>{{EmbedLiveSample("Setting_placeholders", 600, 50)}}</p> + +<p>プレイスホルダーはふつう、要素の前景色よりも薄い色で表示され、ユーザーが入力欄にテキストを入力し始めると (または、 <code>value</code> 属性に設定することで、プログラム的に値を設定する場合も) 自動的に消滅します。</p> + +<h3 id="Physical_input_element_size" name="Physical_input_element_size">物理的な入力要素の寸法</h3> + +<p>入力ボックスの物理的な寸法は、 {{htmlattrxref("size", "input")}} 属性を使って制御することができます。これによって、テキスト入力欄が一度に表示できる文字数を指定することができます。これは要素の幅に影響し、幅をピクセル数ではなく文字数で指定することができます。例えば、この例の中では、入力欄は30文字の幅です。</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="uname">Choose a username: </label> + <input type="text" id="uname" name="name" + placeholder="Lower case, all one word" + size="30"> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<p>{{ EmbedLiveSample('Physical_input_element_size', 600, 50) }}</p> + +<h2 id="Validation" name="Validation">検証</h2> + +<p><code>text</code> 型の <code><input></code> 要素は、適用される自動的な検証はありませんが (基本的なテキスト入力欄は、自由な文字列を受け付けることが求められるからです)、以下に解説するように、クライアント側の検証のオプションがいくつか利用できます。</p> + +<div class="note"> +<p><strong>注</strong>: HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するサーバースクリプトの代用には<em>なりません</em>。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、間違った種類のデータなど) がデータベースに入力された場合に災害が発生するおそれがあります。</p> +</div> + +<h3 id="A_note_on_styling" name="A_note_on_styling">スタイルにおけるメモ</h3> + +<p>ユーザーにとって値が妥当かそうでないかが分かりやすくなるように、フォーム要素のスタイル付けに便利な擬似クラスが利用できます。 {{cssxref(":valid")}} および {{cssxref(":invalid")}} です。この節では、以下の CSS を使用して入力欄の値が妥当であれば隣にチェックマークを表示し、妥当な値でなければ隣にバツ (X) マークを表示します。</p> + +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> + +<p>このテクニックにはフォーム要素の後に配置される {{htmlelement("span")}} 要素も必要で、これがアイコンのホルダーとして動作します。ブラウザーによっては一部の入力型で、直後に配置されたアイコンをうまく表示できないことがあるのでこれが必要です。</p> + +<h3 id="Making_input_required" name="Making_input_required">入力を必須にする</h3> + +<p>入力を行わないとフォームの送信が許可されないようにするための簡単な方法として、 {{htmlattrxref("required","input")}} 属性を使うことができます。</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="uname">Choose a username: </label> + <input type="text" id="uname" name="name" required> + <span class="validity"></span> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre> +</div> + +<p>次のように表示されます。</p> + +<p>{{ EmbedLiveSample('Making_input_required', 600, 70) }}</p> + +<p>検索用語を入力せずにフォームを送信しようとした場合、ブラウザーはエラーメッセージを表示します。</p> + +<h3 id="Input_value_length" name="Input_value_length">入力値の長さ</h3> + +<p> {{htmlattrxref("minlength", "input")}} 属性を使用して入力された値の最小の長さ (文字数) を指定することができます。同様に、 {{htmlattrxref("maxlength", "input")}} を使用して入力された値の最大長を文字数で設定します。</p> + +<p>以下の例では、入力値が4～8文字の長さであることが求められます。</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="uname">Choose a username: </label> + <input type="text" id="uname" name="name" required size="10" + placeholder="Username" + minlength="4" maxlength="8"> + <span class="validity"></span> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre> +</div> + +<p>以下のように表示されます。</p> + +<p>{{ EmbedLiveSample('Input_value_length', 600, 70) }}</p> + +<p>４文字未満でフォームを送信しようとすると、適切なエラーメッセージが表示されます (ブラウザーによって異なります)。８文字を超えて入力しようとしても、ブラウザーが許しません。</p> + +<div class="note"> +<p><strong>Note:</strong> <code>minlength</code> を指定して <code>required</code> を指定しないと、ユーザーが値を指定する必要がなくなるので、入力は妥当と判断されます。</p> +</div> + +<h3 id="Specifying_a_pattern" name="Specifying_a_pattern">パターンの指定</h3> + +<p> {{htmlattrxref("pattern","input")}} 属性を使用して、入力値が妥当と判断されるために一致しなければならない正規表現を指定することができます (入力値を検証するために正規表現を使うための短期コースは<a href="/ja/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression">正規表現による検証</a>をご覧ください)。</p> + +<p>以下の例では、4～8文字の値で、英小文字のみが含まれているという要件の制約を与えます。</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="uname">Choose a username: </label> + <input type="text" id="uname" name="name" required size="45" + pattern="[a-z]{4,8}"> + <span class="validity"></span> + <p>Usernames must be lowercase and 4-8 characters in length.</p> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +p { + font-size: 80%; + color: #999; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<p>次のように表示されます。</p> + +<p>{{ EmbedLiveSample('Specifying_a_pattern', 600, 110) }}</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p> <a href="/ja/docs/Learn/HTML/Forms/Your_first_HTML_form">最初の HTML フォーム</a>および <a href="/ja/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">HTML フォームの構成方法</a>の記事の文脈で、良いテキスト入力欄の例を見ることができます。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'input.html#text-(type=text)-state-and-search-state-(type=search)', '<input type="text">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>初回定義</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#text-typetext-state-and-search-state-typesearch', '<input type="text">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.input.input-text")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Forms">HTML フォーム</a></li> + <li>{{HTMLElement("input")}} およびそれに基づく {{domxref("HTMLInputElement")}} インターフェイス</li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/search"><input type="search"></a></code></li> + <li>{{HTMLElement("textarea")}}: 複数行のテキスト入力欄</li> + <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li> +</ul> diff --git a/files/ja/web/html/element/input/time/index.html b/files/ja/web/html/element/input/time/index.html new file mode 100644 index 0000000000..5b27633b50 --- /dev/null +++ b/files/ja/web/html/element/input/time/index.html @@ -0,0 +1,554 @@ +--- +title: <input type="time"> +slug: Web/HTML/Element/input/time +tags: + - Element + - Forms + - HTML + - HTML Input Types + - HTML forms + - HTML input + - Input + - Input Element + - Input Type + - Reference + - Time +translation_of: Web/HTML/Element/input/time +--- +<div>{{HTMLRef("Input_types")}}</div> + +<p><span class="seoSummary">{{htmlelement("input")}} 要素の <strong><code>time</code></strong> 型は、ユーザーが簡単に時刻 (時と分、任意で秒) を入力できるように設計された入力欄を生成します。</span></p> + +<p>コントロールのユーザーインターフェイスは、ブラウザーによってまちまちです。最近のブラウザーは対応が進んでおり、 Safari は有名なブラウザーの中で唯一実装していません。 Safari やその他の <code><time></code> に対応していないブラウザーでは、このコントロールは単純な <code><a href="/ja/docs/Web/HTML/Element/input/text"><input type="text"></a></code> に格下げされます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-time.html", "tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Appearance" name="Appearance">外観</h2> + +<h3 id="Chrome_and_Opera" name="Chrome_and_Opera">Chrome と Opera</h3> + +<p>Chrome/Opera では、 <code>time</code> コントロールはシンプルで、時と分をオペレーティングシステムのロケールに従って12時制または24時制で入力するスロットと、現在選択中の部分を増減するための上下の矢印から成ります。コントロールの値を消去する "X" ボタンが提供されています。</p> + +<p><img alt="Chrome の12時制の time input" src="https://mdn.mozillademos.org/files/16417/chrome_time.PNG" style="height: 30px; width: 93px;"> 12-hour</p> + +<p><img alt="Chrome の24時制の time input" src="https://mdn.mozillademos.org/files/15399/chrome-time.png" style="height: 30px; width: 79px;"> 24-hour</p> + +<h3 id="Firefox">Firefox</h3> + +<p>Firefox の <code>time</code> コントロールは Chrome のものとよく似ていますが、上下の矢印があります。これも時刻の入力には、システムのロケールに従って12時制または24時制の書式を使用します。コントロールの値を消去するための "X" ボタンがあります。</p> + +<p><img alt="Firefox の12時制の time input" src="https://mdn.mozillademos.org/files/15403/firefox-time.png" style="height: 29px; width: 106px;"> 12-hour</p> + +<p><img alt="Firefox の24時制の time input" src="https://mdn.mozillademos.org/files/16461/firefox-time-24.png" style="height: 29px; width: 80px;"> 24-hour</p> + +<h3 id="Edge">Edge</h3> + +<p>Edge の <code>time</code> コントロールはいくらかもっと精巧で、時と分を選択するスライドリールが開きます。 Chrome のように、時刻の入力にはシステムのロケールに従って12時制または24時制を使用します。</p> + +<p><img alt="Edge の12時制の time input" src="https://mdn.mozillademos.org/files/16418/edge_time.PNG" style="display: block; height: 290px; width: 188px;"> 12-hour</p> + +<p><img alt="Edge の24時制の time input" src="https://mdn.mozillademos.org/files/15401/edge-time.png" style="display: block; height: 290px; width: 129px;"> 24-hour</p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value", "値")}}</strong></td> + <td>時刻を表す {{domxref("DOMString")}}、または空欄。</td> + </tr> + <tr> + <td><strong>イベント</strong></td> + <td>{{domxref("HTMLElement/change_event", "change")}} および {{domxref("HTMLElement/input_event", "input")}}</td> + </tr> + <tr> + <td><strong>対応する共通属性</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("step", "input")}}</td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>, <code>list</code>.</td> + </tr> + <tr> + <td><strong>メソッド</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value" name="Value">値</h2> + +<div id="value-sample1"> +<p>入力欄に入力された時刻を表す {{domxref("DOMString")}} です。 <code><input></code> 要素が作成されたときに、次のように {{htmlattrxref("value", "input")}} 属性の中に時刻を含めることで、既定値を設定することができます。</p> + +<pre class="brush: html notranslate"><label for="appt-time">予約時刻を選んでください: </label> +<input id="appt-time" type="time" name="appt-time" value="13:30"></pre> +</div> + +<p>{{ EmbedLiveSample('value-sample1', 600, 60) }}</p> + +<p>次のように、 {{domxref("HTMLInputElement.value")}} プロパティを使って JavaScript の date 値を取得したり設定したりすることができます。</p> + +<pre class="brush: js notranslate">var timeControl = document.querySelector('input[type="time"]'); +timeControl.value = '15:30';</pre> + +<h3 id="Time_value_format" name="Time_value_format">時刻値の書式</h3> + +<p><code>time</code> 入力欄の <code>value</code> は、常に先頭にゼロを含む24時制で <code>hh:mm</code> の書式であり、ユーザーのロケール (またはユーザーエージェント) に基づいて選択される入力書式とは関係ありません。時刻が秒を含む場合 ({{anch("Using the step attribute", "step 属性の使用")}}を参照) は、書式は常に <code>hh:mm:ss</code> です。この入力型で使用される時刻の値の形式について詳しくは、 <a href="/ja/docs/Web/HTML/Date_and_time_formats">HTML で使われる日付や時刻の形式</a>の<a href="/ja/docs/Web/HTML/Date_and_time_formats#Time_strings">時刻の文字列</a>をご覧ください。</p> + +<p>この例では、時刻を入力すると time 入力欄の値が、どのように変化するかを見ることができます。</p> + +<p>最初に、 HTML を見てください。これは以前見たラベルと入力欄だけで十分にシンプルですが、 {{HTMLElement("p")}} 要素と、 <code>time</code> 入力欄の値を表示する {{HTMLElement("span")}} があります。</p> + +<pre class="brush: html notranslate"><form> + <label for="startTime">開始時刻: </label> + <input type="time" id="startTime"> + <p> + <code>time</code> 入力欄の値: <code> + "<span id="value">n/a</span>"</code>. + </p> +</form></pre> + +<p>JavaScript コードは、 time 入力欄に {{domxref("HTMLElement/input_event", "input")}} イベントを監視するコードを追加し、 input 要素の中身が変更されるたびに呼び出されるようにします。これが発生すると、 <code><span></code> 要素の中身が input 要素の新しい値で置き換えられます。</p> + +<pre class="brush: js notranslate">var startTime = document.getElementById("startTime"); +var valueSpan = document.getElementById("value"); + +startTime.addEventListener("input", function() { + valueSpan.innerText = startTime.value; +}, false);</pre> + +<p>{{EmbedLiveSample("Time_value_format", 600, 80)}}</p> + +<p><code>time</code> 入力欄を含むフォームが送信されると、フォームのデータに含められる前に値がエンコードされます。 time 入力欄のフォームのデータ項目は、常に <code>name=hh%3Amm</code> の形式か、秒が含まれる場合は <code>name=hh%3Amm%3ass</code> の形式になります ({{anch("Using the step attribute", "step 属性の利用")}}を参照してください)。</p> + +<p>追加の属性</p> + +<p>すべての {{HTMLElement("input")}} 要素で共通する属性に加え、 <code>time</code> 型の入力欄は次の属性にも対応しています。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("list")}}</code></td> + <td>任意の定義済みの自動補完オプションを含む<datalist> 要素の id</td> + </tr> + <tr> + <td><code>{{anch("max")}}</code></td> + <td>受け付ける最も遅い時刻、{{anch("Time value format", "時刻値の書式")}}の構文による</td> + </tr> + <tr> + <td><code>{{anch("min")}}</code></td> + <td>妥当な入力として受け付ける最も早い時刻</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>論理属性で、存在する場合、 <code>time</code> 入力欄の内容はユーザーが編集できないことを示す</td> + </tr> + <tr> + <td><code>{{anch("step")}}</code></td> + <td>ユーザーインターフェイスや制約検証に使用する刻み値</td> + </tr> + </tbody> +</table> + +<div class="callout-box">多くのデータ型とは異なり、時刻値は<strong>周期的範囲</strong>を持ち、値が最大値に達すると、最初の値に折り返します。例えば、 <code>min</code> を <code>14:00</code> に、 <code>max</code> を <code>2:00</code> に設定すると、許可される時間の値は午後2時から始まり、深夜を経て次の日の午前2時で終わります。詳しくは、この記事の<a href="#Making_min_and_max_cross_midnight">最小値と最大値が真夜中をまたぐようにする</a>の節をご覧ください。</div> + +<p id="htmlattrdeflist">{{page("/ja/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p> + +<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3> + +<p>文字列で、受け付ける最も遅い時刻を示し、前述の同じ{{anch("Time value format", "時刻値の書式")}}で指定します。指定された文字列が妥当な時刻でなければ、最大値は設定されません。</p> + +<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3> + +<p>文字列で、受け付ける最も速い時刻を示し、前述の{{anch("Time value format", "時刻値の書式")}}で与えられます。指定された値が妥当な時刻の文字列でなければ、最小値は設定されません。</p> + +<p>{{page("/ja/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> + +<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3> + +<p>{{page("/ja/docs/Web/HTML/Element/input/number", "step-include")}}</p> + +<p><code>time</code> 入力欄では、 <code>step</code> の値は秒数で指定され、 1000 が乗じられます (ミリ秒単位の数値であるため)。 <code>step</code> の既定値は 60 であり、60秒 (1分、60000ミリ秒) を表します。</p> + +<p><em>現時点で、 <code>time</code> 入力欄で <code>step</code> に <code>any</code> の値が何を意味するかが不明確です。これは情報が決定次第、更新されるでしょう。</em></p> + +<h2 id="Using_time_inputs" name="Using_time_inputs">time 入力欄の利用</h2> + +<p>日時の入力型の中で <code>time</code> はブラウザーが最も広く対応していますが、まだすべてとは言えないため、日付と時刻を入力する代替手段を提供する必要があり、そうすれば Safari のユーザー (およびその他の未対応のブラウザーのユーザー) も簡単に時刻の値を入力できるようになります。</p> + +<p><code><input type="time"></code> の基本的な使い方と少し複雑な使い方を見てみてから、その後でブラウザーの互換性の問題を緩和するアドバイスを提供しましょう ({{anch("Handling browser support", "ブラウザーの互換性の扱い")}}を参照してください)。</p> + +<h3 id="Basic_uses_of_time" name="Basic_uses_of_time">時刻入力欄の基本的な使用</h3> + +<p>もっとも単純な <code><input type="time"></code> の使用方法は、次のような基本的な <code><input></code> と {{htmlelement("label")}} 要素の組み合わせです。</p> + +<pre class="brush: html notranslate"><form> + <label for="appt-time">予約時刻を選んでください: </label> + <input id="appt-time" type="time" name="appt-time"> +</form></pre> + +<p>{{EmbedLiveSample('Basic_uses_of_time', 600, 40)}}</p> + +<h3 id="Controlling_input_size" name="Controlling_input_size">入力欄の寸法の制御</h3> + +<p><code><input type="time"></code> は、 {{htmlattrxref("size", "input")}} のようなコントロールの寸法に関する属性には対応していません。寸法を変更する必要がある場合は、 <a href="/ja/docs/Web/CSS">CSS</a> を使用する必要があります。</p> + +<h3 id="Using_the_step_attribute" name="Using_the_step_attribute">step 属性の使用</h3> + +<p>{{htmlattrxref("step", "input")}} 属性を使用して、時刻を上下させるときに加減する時間の大きさを変更することができます (例えば、小さな矢印ウィジェットをクリックしたときに10分単位で時刻が動くように)。</p> + +<div class="note"> +<p>このプロパティはブラウザー間で異なる結果になることがあり、完全に信頼できるものではありません。</p> +</div> + +<p>これは整数の値を取り、増加させたい秒数と同じ値になります。既定値は60秒、または1分です。60秒 (1分) よりも小さな値を指定した場合は、 <code>time</code> 入力欄は時と分の隣に秒の入力領域を表示します。</p> + +<pre class="brush: html notranslate"><form> + <label for="appt-time">予約時刻を選んでください: </label> + <input id="appt-time" type="time" name="appt-time" step="2"> +</form></pre> + +<p>{{EmbedLiveSample('Using_the_step_attribute', 600, 40)}}</p> + +<p>上下の操作を行う矢印を表示するブラウザーである Chrome と Opera では、矢印をクリックすると秒の値が2秒単位で変わりますが、時と分には影響しません。分 (または時) の刻みは、分 (または時) の数を秒数で指定した場合のみ使用されます (120 で2分刻み、 7200 で2時間刻みなど)。</p> + +<p>Firefox では矢印はなく、 <code>step</code> の値は使用されません。しかし、この値を提供すると、秒の入力欄が分の部分のとなりに追加されます。</p> + +<p>step の値は Edge には効果がないようです。</p> + +<div class="note"> +<p><code>step</code> を使用しても、検証は正しく動作しないようです (次の節にある通り)。</p> +</div> + +<h2 id="Validation" name="Validation">検証</h2> + +<p>既定では、 <code><input type="time"></code> は入力された値の検証を行いません。ユーザーインターフェイスの実装は一般的に、日付でないものの入力をさせないからです。 (<code>time</code> 入力欄をユーザーエージェントが完全に対応していると仮定すれば) これは便利ですが、値を空文字列 (<code>""</code>) にすることが許されているため、値が正しい時刻文字列であることを完全に信頼することはできません。また、およそ妥当な時刻に見えるが正しくない値、例えば <code>25:05</code> を入力したりすることが可能です。</p> + +<h3 id="Setting_maximum_and_minimum_times" name="Setting_maximum_and_minimum_times">時刻の最大値と最小値の設定</h3> + +<p>{{htmlattrxref("min", "input")}} および {{htmlattrxref("max", "input")}} 属性を使用して、ユーザーが選択できる時刻を制限することができます。次の例では、時刻の最小値を <code>12:00</code> に、時刻の最大値を <code>18:00</code> に設定しています。</p> + +<pre class="brush: html notranslate"><form> + <label for="appt-time">予約時刻を選んでください (営業時間 12:00～18:00): </label> + <input id="appt-time" type="time" name="appt-time" + min="12:00" max="18:00"> + <span class="validity"></span> +</form></pre> + +<p>{{EmbedLiveSample('Setting_maximum_and_minimum_times', 600, 40)}}</p> + +<p>上記の例の CSS です。 CSS の {{cssxref(":valid")}} および {{cssxref(":invalid")}} プロパティを使用して、現在の値が有効かどうかに基づいてスタイルを設定しています。アイコンは入力欄そのものではなく、入力欄の隣の {{htmlelement("span")}} に置くようにしないと、 Chrome ではコントロールの内側にコンテンツを生成するので、正しく整形したり表示したりすることができません。</p> + +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> + +<p>ここでの結果は次のようになります。</p> + +<ul> + <li>12:00 から 18:00 までの時刻だけが有効として表示されます。この範囲を外れた時刻は無効として表示されます。</li> + <li>使用しているブラウザーによっては、指定された範囲を外れた時刻が選択できることが分かります (Edge など)。</li> +</ul> + +<h4 id="Making_min_and_max_cross_midnight" name="Making_min_and_max_cross_midnight">最小値と最大値が真夜中をまたぐようにする</h4> + +<p>{{htmlattrxref("min", "input")}} 属性に {{htmlattrxref("max", "input")}} 属性よりも大きな値を設定することで、有効な時間帯が真夜中をまたぐようにするために、有効な時間帯を真夜中で折り返させることができます。この機能は他の入力型では対応していません。この機能は<a href="https://html.spec.whatwg.org/C/#has-a-reversed-range">仕様書内</a>に存在するものの、まだ全体では対応されていません。 Chrome ベースのブラウザーでは82版から対応しており、 Firefox は76版から対応しています。 Safari が追加するかどうか、いつ追加するかはまだ情報がありません。そうなることを見越して、準備しておきましょう。</p> + +<pre class="brush: js notranslate">const input = document.createElement('input'); +input.type = 'time'; +input.min = '23:00'; +input.max = '01:00'; +input.value = '23:59'; + +if (input.validity.valid && input.type === 'time') { + // <input type=time> が範囲の折り返しに対応している +} else { + // <input type=time> が範囲の折り返しに対応していない +} +</pre> + +<h3 id="Making_times_required" name="Making_times_required">時刻を必須にする</h3> + +<p>加えて、 {{htmlattrxref("required", "input")}} 属性を使用して、時刻の入力を必須にすることができます。結果として、対応するブラウザーでは設定範囲外または空欄の time 入力欄を送信しようとすると、エラーを表示します。</p> + +<p>例を見てみましょう。時刻の最小値と最大値を設定し、かつ入力欄を必須に設定しています。</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="appt-time">予約時刻を選んでください (営業時間 12:00～18:00): </label> + <input id="appt-time" type="time" name="appt-time" + min="12:00" max="18:00" required> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="フォームを送信"> + </div> +</form></pre> + +<p>フォームに不完全な時刻 (または設定された範囲外の時刻) を設定して送信しようとすると、ブラウザーはエラーを表示します。例を実行してみてください。</p> + +<p>{{ EmbedLiveSample('Making_times_required', 600, 120) }}</p> + +<p><code>time</code> 入力欄に対応していないブラウザーを使用している場合は、こちらのスクリーンショットを参照してください。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15405/firefox-validation-message.png" style="display: block; margin: 0 auto;"></p> + +<div class="warning"> +<p><strong>重要</strong>: HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用にはなりません。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、間違った種類のデータなど) が送信された場合に災害が発生するおそれがあります。</p> +</div> + +<h2 id="Handling_browser_support" name="Handling_browser_support">ブラウザーの対応の扱い</h2> + +<p>前述の通り、 Safari やその他の少数派のブラウザーは、まだ time 入力欄にネイティブに対応していません。一般に、それ以外では、よく対応されています。 — 特にモバイルプラットフォームでは、時刻の値を指定するのにとても良いユーザーインターフェイスを持つ傾向があります。例えば、 Android 版 Chrome の <code>time</code> ピッカーは次のようになっています。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15407/chrome-android-time.png" style="display: block; margin: 0 auto;"></p> + +<p>対応していないブラウザーでは、文字列入力欄に安全に格下げされますが、これはユーザーインターフェイスの一貫性 (表示されるコントロールが異なること) とデータの扱いの両方で問題を生みます。</p> + +<p>2番目の問題はより深刻です。すでに述べたように、 <code>time</code> 入力欄では、実際の値が常に <code>hh:mm</code> または <code>hh:mm:ss</code> の書式で正規化されます。一方、文字列入力欄では、既定でブラウザーは時刻がどの書式で入力されるかの認識がなく、以下のように人間が時刻を書く様々な方法で入力される可能性があります。</p> + +<ul> + <li><code>3.00 pm</code></li> + <li><code>3:00pm</code></li> + <li><code>15:00</code></li> + <li><code>午後3時</code></li> + <li>etc.</li> +</ul> + +<p>これを回避する方法の一つとして、 <code>time</code> 入力欄に {{htmlattrxref("pattern", "input")}} 属性を付けるという方法があります。 <code>time</code> 入力欄はこれを使用しないので、 <code>text</code> 入力欄にフォールバックされたときにに使用されます。例えば、次の例を未対応のブラウザーで見てみてください。</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="appt-time">予約時刻を選んでください (営業時間 12:00～18:00): </label> + <input id="appt-time" type="time" name="appt-time" + min="12:00" max="18:00" required + pattern="[0-9]{2}:[0-9]{2}"> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="フォームを送信"> + </div> +</form></pre> + +<p>{{EmbedLiveSample('Handling_browser_support', 600, 100)}}</p> + +<p><code>nn:nn</code> のパターン (<code>n</code> は数字の0から9) に一致しない文字列を入力して送信しようとすると、エラーメッセージが表示される (そして入力欄が無効として強調表示される) のが分かるでしょう。もちろん、これではユーザーが無効な日付を入力したり、誤った形式で日付や時刻を入力したりすることを止めることはできません。</p> + +<p>それから、ユーザーからはどの様な時刻の書式が期待されているかが正確にわからないという問題があります。</p> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<p>ブラウザーに依存しない方法によってフォームで時刻を扱う最善の方法は、現時点では、時と分 (および必要であれば秒) を別々なコントロール ({{htmlelement("select")}} 要素が一般的です。以下の実装を見てください) にするか、 <a href="http://timepicker.co/">jQuery timepicker plugin</a> のような JavaScript ライブラリを使用することです。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例では、時刻を選択するユーザーインターフェイスの要素を2組生成します。ネイティブの <code><input type="time"></code> 入力欄と、ネイティブの入力に対応しない古いブラウザー向けの、2つの {{htmlelement("select")}} 要素による時刻選択です。</p> + +<p>{{EmbedLiveSample('Examples', 600, 140)}}</p> + +<p>HTML は次のようになります。</p> + +<pre class="brush: html notranslate"><form> + <div class="nativeTimePicker"> + <label for="appt-time">予約時刻を選んでください (営業時間 12:00～18:00): </label> + <input id="appt-time" type="time" name="appt-time" + min="12:00" max="18:00" required> + <span class="validity"></span> + </div> + <p class="fallbackLabel">予約時刻を選んでください (営業時間 12:00～18:00):</p> + <div class="fallbackTimePicker"> + <div> + <span> + <select id="hour" name="hour"> + <label for="hour">時</label> + </select> + </span> + <span> + <select id="minute" name="minute"> + <label for="minute">分</label> + </select> + </span> + </div> + </div> +</form></pre> + +<p><code><select></code> 要素に入れる時と分の値は、動的に生成されます。</p> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<p>もう一つの面白い部分は、機能の検出コードです。ブラウザーが <code><input type="time"></code> に対応しているかどうかを検出するために、新たな {{htmlelement("input")}} 要素を生成し、その <code>type</code> を <code>time</code> に設定してみて、すぐにどの type に設定されたかをチェックします。 <code>time</code> 型に対応していないブラウザーでは、 <code>time</code> 型が <code>text</code> 型で代替されます。 <code><input type="time"></code> に対応していない場合は、ネイティブの時刻入力欄を非表示にしてフォールバック用の ({{htmlelement("select")}}) による選択ユーザーインターフェイスを表示します。</p> + +<pre class="brush: js notranslate">// 変数の宣言 +var nativePicker = document.querySelector('.nativeTimePicker'); +var fallbackPicker = document.querySelector('.fallbackTimePicker'); +var fallbackLabel = document.querySelector('.fallbackLabel'); + +var hourSelect = document.querySelector('#hour'); +var minuteSelect = document.querySelector('#minute'); + +// 最初はフォールバックを非表示にする +fallbackPicker.style.display = 'none'; +fallbackLabel.style.display = 'none'; + +// 新しい日付入力が文字列入力にフォールバックされるかどうか +var test = document.createElement('input'); + +try { + test.type = 'time'; +} catch (e) { + console.log(e.description); +} + +// もし文字列入力になるならば、 if() {} ブロックの中のコードを実行する +if(test.type === 'text') { + // ネイティブの日付選択を隠してフォールバック版を表示 + nativePicker.style.display = 'none'; + fallbackPicker.style.display = 'block'; + fallbackLabel.style.display = 'block'; + + // 時と分を動的に生成する + populateHours(); + populateMinutes(); +} + +function populateHours() { + // 時刻の <select> に営業時間の6時間分を生成する + for(var i = 12; i <= 18; i++) { + var option = document.createElement('option'); + option.textContent = i; + hourSelect.appendChild(option); + } +} + +function populateMinutes() { + // 分の <select> に1時間内の60分を生成する + for(var i = 0; i <= 59; i++) { + var option = document.createElement('option'); + option.textContent = (i < 10) ? ("0" + i) : i; + minuteSelect.appendChild(option); + } +} + +// 時が18になったら、分を00に設定する +// — 18:00 以降を選択できなくする + function setMinutesToZero() { + if(hourSelect.value === '18') { + minuteSelect.value = '00'; + } + } + + hourSelect.onchange = setMinutesToZero; + minuteSelect.onchange = setMinutesToZero;</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#time-state-(type=time)', '<input type="time">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.input.input-time")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>全般的な {{HTMLElement("input")}} およびその操作に使用する {{domxref("HTMLInputElement")}} インターフェイス</li> + <li><a href="/ja/docs/Web/HTML/Date_and_time_formats">HTML で使われる日付や時刻の形式</a></li> + <li><a href="/ja/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">日付と時刻の選択のチュートリアル</a></li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/datetime-local"><input type="datetime-local"></a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/date"><input type="date"></a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/week"><input type="week"></a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/month"><input type="month"></a></code></li> + <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li> +</ul> diff --git a/files/ja/web/html/element/input/url/index.html b/files/ja/web/html/element/input/url/index.html new file mode 100644 index 0000000000..bfb3d59913 --- /dev/null +++ b/files/ja/web/html/element/input/url/index.html @@ -0,0 +1,427 @@ +--- +title: <input type="url"> +slug: Web/HTML/Element/input/url +tags: + - Element + - Form Control + - Form Inputs + - Forms + - HTML + - HTML Input Types + - HTML forms + - Input + - Input Type + - Reference + - Text + - URL + - control +translation_of: Web/HTML/Element/input/url +--- +<div>{{HTMLRef("Input_types")}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <code><strong>url</strong></code> 型は、ユーザーに URL を入力および編集させるために使用します。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-url.html", "tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>入力値はフォームの送信前に自動的に検証され、空欄または正しい形式の URL のどちらかであることが確認されます。 CSS の {{cssxref(":valid")}} および {{cssxref(":invalid")}} 擬似クラスが自動的に適用され、フィールド上の現在の値が妥当なメールアドレスであるかどうかを視覚的に示します。</p> + +<p><code>url</code> 型に対応していないブラウザーでは、 <code>url</code> 入力欄は標準の {{HTMLElement("input/text", "text")}} 入力欄で代替されます。</p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value", "値")}}</strong></td> + <td>URL を表す {{domxref("DOMString")}}、または空欄</td> + </tr> + <tr> + <td><strong>イベント</strong></td> + <td>{{event("change")}} および {{event("input")}}</td> + </tr> + <tr> + <td><strong>対応している共通属性</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}}, {{htmlattrxref("size", "input")}}</td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>list</code>, <code>value</code>, <code>selectionEnd</code>, <code>selectionDirection</code></td> + </tr> + <tr> + <td><strong>メソッド</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value" name="Value">値</h2> + +<p>{{HTMLElement("input")}} 要素の {{htmlattrxref("value", "input")}} 属性は {{domxref("DOMString")}} で、自動的に URL の構文として検証されます。より具体的に言うと、検証を通る値の書式は下記の2通りがあります。</p> + +<ol> + <li>空文字列 ("")。ユーザーが値を入力しないか、または値が削除されたことを表します。</li> + <li>単一の正しい形式の絶対 URL。 URL が実在する必要はありませんが、少なくとも正しい書式です。簡単に言えば、 <code>urlscheme://restofurl</code> の形です。</li> +</ol> + +<p>{{anch("Validation", "検証")}}の節で、どのようなメールアドレスが正しい形式であると検証されるかの詳細を参照してください。</p> + +<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2> + +<p>型に関係なくすべての {{HTMLElement("input")}} 要素を操作する属性に加え、 <code>url</code> 型の入力欄は次の属性にも対応しています。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("list")}}</code></td> + <td>オプションで自動補完の定義済みの選択肢を含む <datalist> 要素の id</td> + </tr> + <tr> + <td><code>{{anch("maxlength")}}</code></td> + <td>入力欄が受け付ける最大文字数</td> + </tr> + <tr> + <td><code>{{anch("minlength")}}</code></td> + <td>入力欄が取りうる、妥当と判断される最小文字列長</td> + </tr> + <tr> + <td><code>{{anch("pattern")}}</code></td> + <td>妥当と判断されるために、入力欄の内容が一致する必要がある正規表現</td> + </tr> + <tr> + <td><code>{{anch("placeholder")}}</code></td> + <td>空欄の時に入力欄に表示される入力例の値</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>入力欄の内容を読み取り専用にするかどうかを示す論理属性</td> + </tr> + <tr> + <td><code>{{anch("size")}}</code></td> + <td>入力欄の長さを何文字分にするかを表す数値</td> + </tr> + <tr> + <td><code>{{anch("spellcheck")}}</code></td> + <td>入力欄でスペルチェックを有効にするかどうか、既定のスペルチェック構成を利用するかを制御する</td> + </tr> + </tbody> +</table> + +<p id="htmlattrdeflist">{{page("/ja/docs/Web/HTML/Element/input/text", "list", 0, 1, 2)}}</p> + +<h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3> + +<p>ユーザーが <code>url</code> 入力欄に入力することができる (UTF-16 コード単位での) 最大文字数です。 0 以上の整数値である必要があります。 <code>maxlength</code> が指定されていないか、無効な値が指定されていると、 <code>url</code> 入力欄には最大文字数が設定されません。この値は <code>minlength</code> の値以上である必要もあります。</p> + +<p>フィールドの URL の長さが UTF-16 コード単位で <code>maxlength</code> の長さを超えていると、その入力欄は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。</p> + +<h3 id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</h3> + +<p>ユーザーが <code>url</code> 入力欄に入力することができる (UTF-16 コード単位での) 最小文字数です。これは非負の整数値で、 <code>maxlength</code> で指定された値以下である必要があります。 <code>minlength</code> が指定されていないか、無効な値が指定されていると、 <code>url</code> 入力欄には最小文字数が設定されません。</p> + +<p>入力欄の URL の長さが UTF-16 コード単位で <code>minlength</code> の長さよりも短いと、その入力欄は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。</p> + +<h3 id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</h3> + +<p>{{page("/ja/docs/Web/HTML/Element/input/text", "pattern-include")}}</p> + +<p>詳細と例については{{anch("Pattern validation", "パターン検証")}}の節を参照してください。</p> + +<p>{{page("/ja/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> + +<p>{{page("/ja/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> + +<p>{{page("/ja/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p> + +<p>{{page("/ja/docs/Web/HTML/Element/input/text", "spellcheck", 0, 1, 2)}}</p> + +<h2 id="Non-standard_attributes" name="Non-standard_attributes">標準外の属性</h2> + +<p>ブラウザーによっては、以下の標準外の属性が利用できます。一般的な規則として、できれば使用することを避けてください。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("autocorrect")}}</code></td> + <td>オートコレクトを行うかどうかを <code>on</code> または <code>off</code> で示します。 <strong>Safari のみ。</strong></td> + </tr> + <tr> + <td><code>{{anch("mozactionhint")}}</code></td> + <td>入力欄を編集している間、ユーザーが <kbd>Enter</kbd> または <kbd>Return</kbd> キーを押したときに実行されるアクションを示す文字列です。これは仮想キーボードのキーに適切なラベルを特定するために使用します。 <strong>Android 版 Firefox for のみ。</strong></td> + </tr> + </tbody> +</table> + +<p>{{page("/ja/docs/Web/HTML/Element/input/text", "autocorrect", 0, 1, 2)}}</p> + +<p>{{page("/ja/docs/Web/HTML/Element/input/text", "mozactionhint", 0, 1, 2)}}</p> + +<h2 id="Using_URL_inputs" name="Using_URL_inputs">URL 入力欄の使用</h2> + +<p>When you create a URL input with the proper <code>type</code> value, <code>url</code>, you get automatic validation that the entered text is at least in the correct form to potentially be a legitimate URL. This can help avoid cases in which the user mis-types their web site's address, or provides an invalid one.</p> + +<p>It's important, however, to note that this is not enough to ensure that the specified text is a URL which actually exists, corresponds to the user of the site, or is acceptable in any other way. It simply ensures that the value of the field is properly formatted to be a URL.</p> + +<div class="note"> +<p><strong>注</strong>: ユーザーが HTML をその場面の裏でいじることができることを意識しておくことは極めて重要です。ですから、安全を目的として、サイトでクライアント側の値検証機能のみを使用しては<em>いけません</em>。何らかのセキュリティ上の問題を含む可能性がある値が提供されるトランザクションの場合は、いずれもサーバー側で値検証を行う<em>必要があります</em>。</p> +</div> + +<h3 id="A_simple_URL_input" name="A_simple_URL_input">A simple URL input</h3> + +<p>Currently, all browsers which implement this element implement it as a standard text input field with basic validation features. In its most basic form, a URL input can be implemented like this:</p> + +<pre class="brush: html notranslate"><input id="myURL" name="myURL" type="url"></pre> + +<p>{{ EmbedLiveSample('A_simple_URL_input', 600, 40) }}</p> + +<p>Notice that it's considered valid when empty and when a single validly-formatted URL address is entered, but is otherwise not considered valid. By adding the {{htmlattrxref("required", "input")}} attribute, only properly-formed URLs are allowed; the input is no longer considered valid when empty.</p> + +<p>There is nothing magical going on here. Submitting this form would cause the following data to be sent to the server: <code>myURL=http%3A%2F%2Fwww.example.com</code>. Note how characters are escaped as necessary.</p> + +<h3 id="Placeholders">Placeholders</h3> + +<p>Sometimes it's helpful to offer an in-context hint as to what form the input data should take. This can be especially important if the page design doesn't offer descriptive labels for each {{HTMLElement("input")}}. This is where <strong>placeholders</strong> come in. A placeholder is a value that demonstrates the form the <code>value</code> should take by presenting an example of a valid value, which is displayed inside the edit box when the element's <code>value</code> is "". Once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears.</p> + +<p>Here, we have a <code>url</code> input with the placeholder <code>http://www.example.com</code>. Note how the placeholder disappears and reappears as you manipulate the contents of the edit field.</p> + +<pre class="brush: html notranslate"><input id="myURL" name="myURL" type="url" + placeholder="http://www.example.com"></pre> + +<p>{{ EmbedLiveSample('Placeholders', 600, 40) }}</p> + +<h3 id="Controlling_the_input_size">Controlling the input size</h3> + +<p>You can control not only the physical length of the input box, but also the minimum and maximum lengths allowed for the input text itself.</p> + +<h4 id="Physical_input_element_size">Physical input element size</h4> + +<p>The physical size of the input box can be controlled using the {{htmlattrxref("size", "input")}} attribute. With it, you can specify the number of characters the input box can display at a time. In this example, for instance, the <code>url</code> edit box is 30 characters wide:</p> + +<pre class="brush: html notranslate"><input id="myURL" name="myURL" type="url" + size="30"></pre> + +<p>{{ EmbedLiveSample('Physical_input_element_size', 600, 40) }}</p> + +<h4 id="Element_value_length">Element value length</h4> + +<p>The <code>size</code> is separate from the length limitation on the entered URL itself. You can specify a minimum length, in characters, for the entered URL using the {{htmlattrxref("minlength", "input")}} attribute; similarly, use {{htmlattrxref("maxlength", "input")}} to set the maximum length of the entered URL. If <code>maxLength</code> exceeds <code>size</code>, the input box's contents will scroll as needed to show the current selection or insertion point as the content is manipulated.</p> + +<p>The example below creates a 30-character wide URL address entry box, requiring that the contents be no shorter than 10 characters and no longer than 80 characters.</p> + +<pre class="brush: html notranslate"><input id="myURL" name="myURL" type="url" + size="30" minlength="10" maxlength="80"> +</pre> + +<p>{{EmbedLiveSample("Element_value_length", 600, 40) }}</p> + +<div class="note"> +<p><strong>Note</strong>: These attributes also affect validation; a value shorter or longer than the specified minimum/maximum lengths will be classified as invalid; in addition most browsers will simply refuse to let the user enter a value longer than the specified maximum length.</p> +</div> + +<h3 id="Providing_default_options">Providing default options</h3> + +<p>As always, you can provide a default value for a <code>url</code> input box by setting its {{htmlattrxref("value", "input")}} attribute:</p> + +<div id="Default_value"> +<pre class="brush: html notranslate"><input id="myURL" name="myURL" type="url" + value="http://www.example.com"></pre> +</div> + +<p>{{EmbedLiveSample("Default_value", 600, 40)}}</p> + +<h4 id="Offering_suggested_values">Offering suggested values</h4> + +<p>Taking it a step farther, you can provide a list of default options from which the user can select by specifying the {{htmlattrxref("list", "input")}} attribute. This doesn't limit the user to those options, but does allow them to select commonly-used URLs more quickly. This also offers hints to {{htmlattrxref("autocomplete", "input")}}. The <code>list</code> attribute specifies the ID of a {{HTMLElement("datalist")}}, which in turn contains one {{HTMLElement("option")}} element per suggested value; each <code>option</code>'s <code>value</code> is the corresponding suggested value for the URL entry box.</p> + +<pre class="brush: html notranslate"><input id="myURL" name="myURL" type="url" + list="defaultURLs"> + +<datalist id="defaultURLs"> + <option value="https://developer.mozilla.org/"> + <option value="http://www.google.com/"> + <option value="http://www.microsoft.com/"> + <option value="https://www.mozilla.org/"> + <option value="http://w3.org/"> +</datalist></pre> + +<p>{{EmbedLiveSample("Offering_suggested_values", 600, 40)}}</p> + +<p>With the {{HTMLElement("datalist")}} element and its {{HTMLElement("option")}}s in place, the browser will offer the specified values as potential values for the URL; this is typically presented as a popup or drop-down menu containing the suggestions. While the specific user experience may vary from one browser to another, typically clicking in the edit box presents a drop-down of the suggested URLs. Then, as the user types, the list is adjusted to show only matching values. Each typed character narrows down the list until the user makes a selection or types a custom value.</p> + +<h4 id="Using_labels_for_suggested_values">Using labels for suggested values</h4> + +<p>You can opt to include the {{htmlattrxref("label", "option")}} attribute on one or all of your <code><option></code> elements to provide textual labels. Some browsers may display only the labels, while others may display both the label and the URL.</p> + +<pre class="brush: html notranslate"><input id="myURL" name="myURL" type="url" + list="defaultURLs"> + +<datalist id="defaultURLs"> + <option value="https://developer.mozilla.org/" label="MDN Web Docs"> + <option value="http://www.google.com/" label="Google"> + <option value="http://www.microsoft.com/" label="Microsoft"> + <option value="https://www.mozilla.org/" label="Mozilla"> + <option value="http://w3.org/" label="W3C"> +</datalist></pre> + +<p>{{EmbedLiveSample("Using_labels_for_suggested_values", 600, 40)}}</p> + +<h2 id="Validation">Validation</h2> + +<p>There are two levels of content validation available for <code>url</code> inputs. First, there's the standard level of validation offered to all {{HTMLElement("input")}}s, which automatically ensures that the contents meet the requirements to be a valid URL. But there's also the option to add additional filtering to ensure that your own specialized needs are met, if you have any.</p> + +<div class="warning"> +<p><strong>Important</strong>: HTML form validation is <em>not</em> a substitute for scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to simply bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data (or data which is too large, is of the wrong type, and so forth) is entered into your database.</p> +</div> + +<h3 id="Basic_validation">Basic validation</h3> + +<p>Browsers that support the <code>url</code> input type automatically provide validation to ensure that only text that matches the standard format for URLs is entered into the input box.</p> + +<p>The syntax of a URL is fairly intricate. It's defined by WHATWG's <a href="https://url.spec.whatwg.org/">URL Living Standard</a> and is described for newcomers in our article <a href="/ja/docs/Learn/Common_questions/What_is_a_URL">What is a URL?</a></p> + +<h3 id="Making_a_URL_required">Making a URL required</h3> + +<p>As mentioned earlier, to make a URL entry required before the form can be submitted (you can't leave the field blank), you just need to include the {{htmlattrxref("required", "input")}} attribute on the input.</p> + +<div id="Default_value"> +<pre class="brush: html notranslate"><form> + <input id="myURL" name="myURL" type="url" required> + <button>Submit</button> +</form></pre> +</div> + +<p>{{EmbedLiveSample("Making_a_URL_required", 600, 40)}}</p> + +<p>Try submitting the above form with no value entered to see what happens.</p> + +<h3 id="Pattern_validation" name="Pattern_validation">パターンによる値検証</h3> + +<p>If you need the entered URL to be restricted further than just "any string that looks like a URL," you can use the {{htmlattrxref("pattern", "input")}} attribute to specify a {{Glossary("regular expression")}} the value must match for the value to be valid.</p> + +<p>For example, let's say you're building a support page for employees of Myco, Inc. which will let them contact their IT department for help if one of their pages has a problem. In our simplified form, the user needs to enter the URL of the page that has a problem, and a message describing what is wrong. But we want the URL to only successfully validate if the entered URL is in a Myco domain.</p> + +<p>Since inputs of type <code>url</code> validate against both the standard URL validation <em>and</em> the specified {{htmlattrxref("pattern", "input")}}, you can implement this easily. Let's see how:</p> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; + } + + input[type="number"] { + width: 100px; + } + + input + span { + padding-right: 30px; + } + + input:invalid+span:after { + position: absolute; content: '✖'; + padding-left: 5px; + } + + input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; + }</pre> +</div> + +<pre class="brush: html notranslate"><form> + <div> + <label for="myURL">Enter the problem website address:</label> + <input id="myURL" name="myURL" type="url" + required pattern=".*\.myco\..*" + title="The URL must be in a Myco domain"> + <span class="validity"></span> + </div> + <div> + <label for="myComment">What is the problem?</label> + <input id="myComment" name="myComment" type="text" + required> + <span class="validity"></span> + </div> + <div> + <button>Submit</button> + </div> +</form> +</pre> + +<p>{{EmbedLiveSample("Pattern_validation", 700, 150)}}</p> + +<p>First of all, the {{htmlattrxref("required", "input")}} attribute is specified, making it mandatory that a valid email address be provided.</p> + +<p>Second, in the <code>url</code> input we set <code>pattern</code> to <code>".*\.myco\..*"</code>. This simple regular expression requests a string that has any number of characters, followed by a dot, followed by "myco", followed by a dot, followed by any number of characters. And because the browser runs both the standard URL filter <em>and</em> our custom pattern against the specified text, we wind up with a validation which says "make sure this is a valid URL, and also in a Myco domain."</p> + +<p>This isn't perfect, but it is good enough for this simple demo's requirements.</p> + +<p>It's advisable to use the {{htmlattrxref("title")}} attribute along with <code>pattern</code>. If you do, the <code>title</code> <em>must</em> describe the pattern; it should explain what format the data should take on, rather than any other information. That's because the <code>title</code> may be displayed or spoken as part of a validation error message. For example, the browser might present the message "The entered text doesn't match the required pattern." followed by your specified <code>title</code>. If your <code>title</code> is something like "URL", the result would be the message "The entered text doesn't match the required pattern. URL", which is not a good user experience.</p> + +<p>That's why, instead, we specify the string "The URL must be in a myco domain". By doing that, the resulting full error message might be something like "The entered text doesn't match the required pattern. The URL should be in a myco domain."</p> + +<div class="note"> +<p><strong>Note</strong>: If you run into trouble while writing your validation regular expressions and they're not working properly, check your browser's console; there may be helpful error messages there to aid you in solving the problem.</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<p>There's not much else to say about <code>url</code> type inputs; check the {{anch("Pattern validation")}} and {{anch("Using URL inputs")}} sections for numerous examples.</p> + +<p>You can also find our <a href="https://github.com/mdn/learning-area/blob/master/html/forms/url-example/index.html">pattern validation example on GitHub</a> (see it <a href="https://mdn.github.io/learning-area/html/forms/url-example/">running live also</a>).</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#url-state-(type=url)', '<input type="url">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>初回定義</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sec-forms.html#url-state-typeurl', '<input type="url">')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>初回定義</td> + </tr> + <tr> + <td>{{SpecName("URL", "#urls", "URL syntax")}}</td> + <td>{{Spec2("URL")}}</td> + <td>Living Standard</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.input.input-url")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Forms">HTML フォームガイド</a></li> + <li>{{HTMLElement("input")}}</li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/tel"><input type="tel"></a></code></li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/email"><input type="email"></a></code></li> + <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li> +</ul> diff --git a/files/ja/web/html/element/input/week/index.html b/files/ja/web/html/element/input/week/index.html new file mode 100644 index 0000000000..4434d448d9 --- /dev/null +++ b/files/ja/web/html/element/input/week/index.html @@ -0,0 +1,398 @@ +--- +title: <input type="week"> +slug: Web/HTML/Element/input/week +tags: + - Element + - Forms + - HTML + - HTML Input Types + - HTML forms + - HTML input + - Input + - Input Element + - Input Type + - Input Types + - Reference + - Week + - Weeks +translation_of: Web/HTML/Element/input/week +--- +<div>{{HTMLRef("Input_types")}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <strong><code>week</code></strong> 型は、年と、その年の <a href="https://en.wikipedia.org/wiki/ISO_8601#Week_dates">ISO 8601 週番号</a> (つまり、第1週から第<a href="https://en.wikipedia.org/wiki/ISO_8601#Week_dates">52または53</a>週) を簡単に入力することができる入力欄を生成します。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-week.html", "tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>コントロールのユーザーインターフェイスは、ブラウザーによって様々です。現時点ではブラウザー間の対応は限定的で、 Chrome/Opera と Microsoft Edge のみが対応しています。対応していないブラウザーでは、このコントロールは単純な <code><a href="/ja/docs/Web/HTML/Element/input/text"><input type="text"></a></code> に格下げされます。</p> + +<p>Chrome/Opera では、 <code>week</code> コントロールは週と年の値を埋めるスロット、もっと視覚的に選択するためのポップアップカレンダーインターフェイス、コントロールの値を消去するための "X" ボタンを提供します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15409/week-control-chrome.png" style="display: block; height: 235px; margin: 0px auto; width: 320px;"></p> + +<p>Edge の <code>week</code> コントロールはもう少し凝っており、年と週を選ぶスライドするリールが開きます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15411/week-control-edge.png" style="display: block; height: 391px; margin: 0px auto; width: 227px;"></p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value", "値")}}</strong></td> + <td>年と週を表す {{domxref("DOMString")}}、または空欄</td> + </tr> + <tr> + <td><strong>イベント</strong></td> + <td>{{domxref("HTMLElement/change_event", "change")}} および {{domxref("HTMLElement/input_event", "input")}}</td> + </tr> + <tr> + <td><strong>対応している共通属性</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("step", "input")}}</td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>list</code>, <code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code></td> + </tr> + <tr> + <td><strong>メソッド</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value" name="Value">値</h2> + +<p>{{domxref("DOMString")}} で、入力欄に入力された年と週を表します。この入力型で使われる日時値の形式は、 <a href="/ja/docs/Web/HTML/Date_and_time_formats">HTML で使われる日付や時刻の形式</a>の<a href="/ja/docs/Web/HTML/Date_and_time_formats#Format_of_a_valid_week_string">HTML で使われる日付や時刻の形式</a>で説明しています。</p> + +<p>次のように {{htmlattrxref("value", "input")}} 属性に値を入れることで、既定値を設定することができます。</p> + +<pre class="brush: html notranslate"><label for="week">どの週に始めたいですか。</label> +<input id="week" type="week" name="week" value="2017-W01"></pre> + +<p>{{EmbedLiveSample('Value', 600, 60)}}</p> + +<p>一点気を付けなければならないことは、実際の <code>value</code> は常に <code>yyyy-Www</code> の書式であり、表示される書式はこれとは異なる可能性があるということです。例えば、上記の値をサーバーに送信すると、ブラウザーは <code>Week 01, 2017</code> のように表示するかもしれませんが、送信される値は常に <code>week=2017-W01</code> のようになります。</p> + +<p>次のように、 JavaScript から入力要素の {{domxref("HTMLInputElement.value", "value")}} プロパティを使用して、値を取得したり設定したりすることもできます。</p> + +<pre class="brush: js notranslate">var weekControl = document.querySelector('input[type="week"]'); +weekControl.value = '2017-W45';</pre> + +<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2> + +<p>すべての {{HTMLElement("input")}} 型で共通する属性に加え、 <code>week</code> 型の入力欄は次の属性にも対応しています。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("max")}}</code></td> + <td>妥当な入力として受け付ける最も遅い年と週</td> + </tr> + <tr> + <td><code>{{anch("min")}}</code></td> + <td>妥当な入力として受け付ける最も早い年と週</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>論理属性で、存在する場合、入力欄の内容はユーザーが編集できないことを示す</td> + </tr> + <tr> + <td><code>{{anch("step")}}</code></td> + <td>ユーザーインターフェイスや制約検証に使用する刻み値 (許される値の間隔)</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3> + +<p>受け付ける (時間的に) 最も遅い年と週番号で、上記の{{anch("Value", "値")}}の節で説明した文字列書式です。要素に入力された {{htmlattrxref("value", "input")}} がこれを超えた場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code>max</code> 属性の値が妥当な週の文字列ではない場合、要素は最大値を持ちません。</p> + +<p>この値は <code>min</code> 属性で指定されたものより後か、同じ年と週を指定する必要があります。</p> + +<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3> + +<p>受け付ける最も早い年と週です。要素の {{htmlattrxref("value", "input")}} がこれより小さいと、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。属性の値が妥当な週の文字列ではない場合、要素は最小値を持ちません。</p> + +<p>この値は <code>max</code> 属性で指定されたものより前か、同じ年と週を指定する必要があります。</p> + +<p>{{page("/ja/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> + +<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3> + +<p>{{page("/ja/docs/Web/HTML/Element/input/number", "step-include")}}</p> + +<p><code>week</code> 入力欄では、 <code>step</code> の値は週数で指定され、 604,800,000 が乗じられます (ミリ秒単位の数値であるため)。 <code>step</code> の既定値は 1 であり、1週を表します。既定の刻みの既定値は -259,200,000 で、これは1970年の最初の週 (<code>1970-W01</code>) です。</p> + +<p><em>現時点で、 <code>week</code> 入力欄で <code>step</code> に <code>any</code> の値が何を意味するかが不明確です。これは情報が決定次第、更新されるでしょう。</em></p> + +<h2 id="Using_week_inputs" name="Using_week_inputs">week 入力欄の使用</h2> + +<p>week 入力欄は一見すると便利に見えます。簡単に週を選択するユーザーインターフェイスを提供し、ユーザーのロケールに関係なく、データ形式を正規化してサーバーに送信するからです。しかし、ブラウザーの互換性が限られているため、 <code><input type="week"></code> には問題があります。</p> + +<p><code><input type="week"></code> の基本的な使い方と少し複雑な使い方を見てみてから、その後でブラウザーの互換性の問題を緩和するアドバイスを提供しましょう ({{anch("Handling browser support", "ブラウザーの互換性の扱い")}}を参照してください)。</p> + +<h3 id="Basic_uses_of_week" name="Basic_uses_of_week">week の基本的な使用</h3> + +<p>もっとも単純な <code><input type=week></code> の使用方法は、次のように基本的な <code><input></code> と {{htmlelement("label")}} 要素の組み合わせです。</p> + +<pre class="brush: html notranslate"><form> + <label for="week">どの週から始めたいですか。</label> + <input id="week" type="week" name="week"> +</form></pre> + +<p>{{EmbedLiveSample('Basic_uses_of_week', 600, 40)}}</p> + +<h3 id="Controlling_input_size" name="Controlling_input_size">入力欄の寸法の制御</h3> + +<p><code><input type="week"></code> は {{htmlattrxref("size", "input")}} のような寸法に関する属性には対応していません。寸法を変更する必要がある場合は、 <a href="/ja/docs/Web/CSS">CSS</a> を使用する必要があります。</p> + +<h3 id="Using_the_step_attribute" name="Using_the_step_attribute">step 属性の使用</h3> + +<p>{{htmlattrxref("step", "input")}} 属性を使用して、週の番号が増加または減少するときに飛ばす番号を変更することができるはずですが、対応しているブラウザーでも何も動作していないようです。</p> + +<h2 id="Validation" name="Validation">検証</h2> + +<p>既定で、 <code><input type="week"></code> は入力された値の検証を行いません。ユーザーインターフェイスの実装は一般的に、妥当な年と週でないものの入力をさせず、これは便利ですが、それでも入力欄を空のままにすることができ、また選択できる週の範囲を制限したくなるかもしれません。</p> + +<h3 id="Setting_maximum_and_minimum_weeks" name="Setting_maximum_and_minimum_weeks">週の最大値と最小値の設定</h3> + +<p>{{htmlattrxref("min", "input")}} および {{htmlattrxref("max", "input")}} 属性を使用して、ユーザーが選択することができる有効な週を制限することができます。以下の例では、最小値を <code>Week 01, 2017</code> に、最大値を <code>Week 52, 2017</code> に設定しています。</p> + +<pre class="brush: html notranslate"><form> + <label for="week">どの週から始めたいですか。</label> + <input id="week" type="week" name="week" + min="2017-W01" max="2017-W52"> + <span class="validity"></span> +</form></pre> + +<p>{{EmbedLiveSample('Setting_maximum_and_minimum_weeks', 600, 40)}}</p> + +<p>上記の例の CSS です。 CSS の {{cssxref(":valid")}} および {{cssxref(":invalid")}} プロパティを使用して、現在の値が有効かどうかに基づいてスタイルを設定しています。アイコンは入力欄そのものではなく、入力欄の隣の {{htmlelement("span")}} に置くようにしないと、 Chrome ではコントロールの内側にコンテンツを生成するので、正しく整形したり表示したりすることができません。</p> + +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> + +<p>この結果は、対応するブラウザーでは2017年の第1週から第52週の間が有効に見え、選択することができます。</p> + +<h3 id="Making_week_values_required" name="Making_week_values_required">週の値を必須にする</h3> + +<p>加えて、 {{htmlattrxref("required", "input")}} 属性を使用して、週の入力を必須にすることができます。結果として、対応するブラウザーでは週の入力欄が空欄の場合にエラーを表示します。</p> + +<p>例を見てみましょう。週の最小値と最大値を設定し、かつフィールドを必須に設定しています。</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="week">どの週から始めたいですか。</label> + <input id="week" type="week" name="week" + min="2017-W01" max="2017-W52" required> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="Submit form"> + </div> +</form></pre> + +<p>フォームに値を設定せずに送信しようとすると、ブラウザーはエラーを表示します。例を実行してみてください。</p> + +<p>{{EmbedLiveSample('Making_week_values_required', 600, 120)}}</p> + +<p>対応していないブラウザーを使用したときのスクリーンショットです。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15415/week-validation-chrome.png" style="display: block; height: 85px; margin: 0px auto; width: 473px;"></p> + +<div class="warning"> +<p><strong>重要</strong>: HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用にはなりません。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、間違った種類のデータなど) が送信された場合に災害が発生するおそれがあります。</p> +</div> + +<h2 id="Handling_browser_support" name="Handling_browser_support">ブラウザーの対応の扱い</h2> + +<p>前述のように、現時点で week 入力欄を利用する上で一番の問題はブラウザーの互換性です。デスクトップでは Safari と Firefox は対応しておらず、 IE の古いバージョンも対応していません。</p> + +<p>Android や iOS のようなモバイルプラットフォームは、このような入力型が実に有効であり、タッチスクリーン環境で実に簡単に値を選択できる専用のユーザーインターフェイスコントロールを提供します。例えば、 Android 版 Chrome の <code>week</code> 選択は、次のようになっています。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15413/week-chrome-android.png" style="display: block; margin: 0 auto;"></p> + +<p>対応していないブラウザーでは安全にテキスト入力欄に格下げされますが、これはユーザーインターフェイスの一貫性 (表示されるコントロールが異なること) とデータの扱いの二つの問題を生じます。</p> + +<p>二つ目の問題はより深刻です。すでに述べたように、 <code>week</code> 入力欄では、実際の値が常に <code>yyyy-Www</code> の書式で正規化されます。ブラウザーが一般的なテキスト入力欄にフォールバックした場合、ユーザーが正しい書式で入力するよう案内することができません (そして、おそらく認識できません)。人間が週の値を書くには、次のように色々な方法があります。</p> + +<ul> + <li><code>Week 1 2017</code></li> + <li><code>Jan 2-8 2017</code></li> + <li><code>2017-W01</code></li> + <li>etc.</li> +</ul> + +<p>ブラウザーに依存しない方法によってフォームで年と週を扱う最善の方法は、現時点では年と週を別々なコントロール ({{htmlelement("select")}} 要素で入力するものが一般的です。以下の実装を見てください) にするか、 <a href="https://jqueryui.com/datepicker/">jQuery date picker</a> のような JavaScript ライブラリを使用することです。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例では、週を選択するユーザーインターフェイスの要素を2組生成します。ネイティブの <code><input type="week"></code> 入力欄と、 <code>week</code> 入力欄に対応しない古いブラウザーで年と週を選択するための、２つの {{htmlelement("select")}} 要素です。</p> + +<p>{{EmbedLiveSample('Examples', 600, 140)}}</p> + +<p>HTML は次のようになります。</p> + +<pre class="brush: html notranslate"><form> + <div class="nativeWeekPicker"> + <label for="week">どの週から始めたいですか。</label> + <input id="week" type="week" name="week" + min="2017-W01" max="2018-W52" required> + <span class="validity"></span> + </div> + <p class="fallbackLabel">どの週から始めたいですか。</p> + <div class="fallbackWeekPicker"> + <div> + <span> + <label for="week">Week:</label> + <select id="fallbackWeek" name="week"> + </select> + </span> + <span> + <label for="year">Year:</label> + <select id="year" name="year"> + <option value="2017" selected>2017</option> + <option value="2018">2018</option> + </select> + </span> + </div> + </div> +</form></pre> + +<p>週の値は以下の JavaScript のコードで動的に生成されます。</p> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<p>もう一つの面白い部分は、機能の検出コードです。ブラウザーが <code><input type="week"></code> に対応しているかどうかを検出するために、新たな {{htmlelement("input")}} 要素を生成し、その <code>type</code> を <code>week</code> に設定てみて、すぐに type に何が設定されたかをチェックします。 <code>datetime-local</code> 型に対応していないブラウザーでは、 <code>week</code> 型が <code>text</code> 型へフォールバックされます。 <code><input type="week"></code> に対応していない場合は、ネイティブの日時入力欄を非表示にしてフォールバック用の ({{htmlelement("select")}}) による選択ユーザーインターフェイスを表示します。</p> + +<pre class="brush: js notranslate">// 変数を定義 +var nativePicker = document.querySelector('.nativeWeekPicker'); +var fallbackPicker = document.querySelector('.fallbackWeekPicker'); +var fallbackLabel = document.querySelector('.fallbackLabel'); + +var yearSelect = document.querySelector('#year'); +var weekSelect = document.querySelector('#fallbackWeek'); + +// 最初はフォールバックを非表示にする +fallbackPicker.style.display = 'none'; +fallbackLabel.style.display = 'none'; + +// 新しい日付入力が文字列入力にフォールバックされるかどうか +var test = document.createElement('input'); + +try { + test.type = 'week'; +} catch (e) { + console.log(e.description); +} + +// もし文字列入力になるならば、 if() {} ブロックの中のコードを実行する +if(test.type === 'text') { + // ネイティブの日付選択を隠してフォールバック版を表示 + nativePicker.style.display = 'none'; + fallbackPicker.style.display = 'block'; + fallbackLabel.style.display = 'block'; + + // 週を動的に生成する + populateWeeks(); +} + +function populateWeeks() { + // 週の選択肢を52週で生成 + for(var i = 1; i <= 52; i++) { + var option = document.createElement('option'); + option.textContent = (i < 10) ? ("0" + i) : i; + weekSelect.appendChild(option); + } +}</pre> + +<div class="note"> +<p><strong>注</strong>: 53週ある年もあることを忘れないでください（<a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">年あたりの週数</a>を参照）。商品のアプリを開発するときはこれを念頭に置いておく必要があります。</p> +</div> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#week-state-(type=week)', '<input type="week">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.input.input-week")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>全般的な {{HTMLElement("input")}} およびその操作に使用する{{domxref("HTMLInputElement")}} インターフェイス</li> + <li><a href="/ja/docs/Web/HTML/Date_and_time_formats">HTML で使用される日付と時刻の書式</a></li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/datetime-local"><input type="datetime-local"></a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/date"><input type="date"></a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/time"><input type="time"></a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/month"><input type="month"></a></code></li> + <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li> +</ul> diff --git a/files/ja/web/html/element/ins/index.html b/files/ja/web/html/element/ins/index.html new file mode 100644 index 0000000000..75f1e6c5ef --- /dev/null +++ b/files/ja/web/html/element/ins/index.html @@ -0,0 +1,145 @@ +--- +title: <ins> +slug: Web/HTML/Element/ins +tags: + - Element + - HTML + - HTML edits + - Inserted Text + - Insertion + - Reference + - Web + - ins +translation_of: Web/HTML/Element/ins +--- +<p>{{HTMLRef}}</p> + +<p><span class="seoSummary"><strong>HTML の <code><ins></code> 要素</strong></span>は、文書に追加されたテキストの範囲を表します。同様に、 {{HTMLElement("del")}} 要素を使用して文書から削除されたテキストの範囲を表すことができます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/ins.html", "tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a> または <a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a></td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Transparent_content_model">透過的コンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLModElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>他のすべての HTML 要素と同様に、この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を持っています。</p> + +<dl> + <dt>{{htmlattrdef("cite")}}</dt> + <dd>会議の議事録やトラブルシューティングシステムのチケットといった、追加についての説明を記したリソースへの URI を示します。</dd> + <dt>{{htmlattrdef("datetime")}}</dt> + <dd>この属性は変更が行われた日時を示し、有効な日付または日時の文字列でなければなりません。値が日付または日時の文字列として解釈できなかった場合は、要素にタイムスタンプが関連付けられなくなります。時刻がない日付の書式については、<a href="/ja/docs/Web/HTML/Date_and_time_formats#Date_strings">妥当な日付文字列の書式</a>を参照してください。日付と時刻の両方を含む場合の文字列の書式については、<a href="/ja/docs/Web/HTML/Date_and_time_formats#Local_date_and_time_strings">妥当な日時文字列の書式</a>を参照してください。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html notranslate"><ins>This text has been inserted</ins></pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Examples")}}</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> + +<p><code><ins></code> 要素が存在することは、多くの読み上げ技術の既定の設定では読み上げられません。 CSS の {{cssxref("content")}} プロパティを {{cssxref("::before")}} および {{cssxref("::after")}} 擬似要素と共に使うことで読み上げさせることができます。</p> + +<pre class="brush: css notranslate">ins::before, +ins::after { + clip-path: inset(100%); + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +ins::before { + content: " [挿入開始] "; +} + +ins::after { + content: " [挿入終了] "; +} +</pre> + +<p>読み上げソフトを使用する人によっては、特に冗長になるコンテンツのアナウンスを意図的に無効にしていることがあります。このため、この手法を悪用しないようにすることは重要であり、コンテンツが挿入されていることを知らないと理解に影響するような場面でのみ使用するようにしてください。</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">Short note on making your mark (more accessible) | The Paciello Group</a></li> + <li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html">Tweaking Text Level Styles | Adrian Roselli</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'edits.html#the-ins-element', '<ins>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'edits.html#the-ins-element', '<ins>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.4', '<ins>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.ins")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>文書の削除された部分に印をつける {{HTMLElement("del")}} 要素</li> +</ul> diff --git a/files/ja/web/html/element/isindex/index.html b/files/ja/web/html/element/isindex/index.html new file mode 100644 index 0000000000..7443d92c49 --- /dev/null +++ b/files/ja/web/html/element/isindex/index.html @@ -0,0 +1,78 @@ +--- +title: <isindex> +slug: Web/HTML/Element/isindex +tags: + - Deprecated + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/isindex +--- +<div>{{HTMLRef}}{{Obsolete_header}}</div> + +<p><span class="seoSummary"><strong><code><isindex></code></strong> は廃止された HTML 要素であり、文書に問い合わせを行うためのテキストフィールドをページに追加します。</span> <code><isindex></code> は、問い合わせ文字列を入力するための 1 行テキスト入力フィールドを提供していました。これを送信すると、サーバーが問い合わせに一致するページの一覧を返していました。この対応状況は、ブラウザーとクエリに対応するサーバーの両方に依存していました。</p> + +<p><code><isindex></code> は <a href="https://html.spec.whatwg.org/multipage/">HTML 標準</a>から削除されました。 HTML 4.01 で非推奨になりました。同じ動作は HTML フォームを使用して実現することができます。すべての主要なブラウザーが <code><isindex></code> を削除しています。</p> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>他のすべての HTML 要素と同様に、この要素は<a href="/ja/docs/HTML/Global_attributes">グローバル属性</a>を受け付けます。</p> + +<dl> + <dt>{{htmlattrdef("prompt")}}</dt> + <dd>この属性の値を、テキストフィールド用のプロンプトとして追加します。</dd> + <dt>{{htmlattrdef("action")}}</dt> + <dd>この属性は、異なる URL に対してクエリーを送信する必要がある場合に使用します。アクションは W3C で定義されていません。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: html notranslate"><head> + <isindex prompt="Search Document..." action="/search"> +</head></pre> + +<p>過去のブラウザーでは、解釈時に、 DOM ツリーに以下の HTML と同等のものを作成していました。</p> + +<pre class="brush: html notranslate"><form action="/search"> + <hr> + <label> + Search Document... + <input name="isindex"> + </label> + <hr> +</form> +</pre> + +<h2 id="History" name="History">歴史</h2> + +<p>1992 年 6 月に Dan Connolly は、isindex よりも別の <a href="/ja/docs/Web/HTML/Element/a" title="HTML/Elements/a">アンカー</a> タイプを <a class="external text" href="http://1997.webhistory.org/www.lists/www-talk.1992/0080.html" rel="nofollow">好むと表明しました</a>。</p> + +<p>1992 年 11 月に、インデックスは文書よりもリンクであるという考えを推進する Dan Connolly によって <a class="external text" href="http://lists.w3.org/Archives/Public/www-talk/1992NovDec/thread.html#31" rel="nofollow">indexes as links rather than documents</a> の議論が始まりました。このスレッドでは、さまざまな解決策が提案されました。クエリーを作成する方式への疑問が、Dynatext browser に関連して <a class="external text" href="http://lists.w3.org/Archives/Public/www-talk/1992NovDec/0039.html" rel="nofollow">言及されました</a>: "The browser displays toggle buttons, text fields etc. The user fills in the fields, clicks OK, and the query results come up in the table of contents window."</p> + +<p>1992 年 11 月の <a class="external text" href="http://lists.w3.org/Archives/Public/www-talk/1992NovDec/thread.html#42" rel="nofollow">isindex</a> に関するスレッドで、Kevin Hoadley は isindex 要素の必要性に <a class="external text" href="http://lists.w3.org/Archives/Public/www-talk/1992NovDec/0042.html" rel="nofollow">疑問を持って</a>、 廃止を提案しました。彼は、代わりに <a href="/wiki/HTML/Elements/input" title="HTML/Elements/input">input</a> 要素 (Steve Putz が <a class="external text" href="http://lists.w3.org/Archives/Public/www-talk/1992NovDec/0053.html" rel="nofollow">支持した</a> アイデア) を持つよう提案しました。Tim Berners-Lee は、検索結果を集約したものになるという、isindex の目的を <a class="external text" href="http://lists.w3.org/Archives/Public/www-talk/1992NovDec/0044.html" rel="nofollow">説明しました</a>。Kevin は isindex の二者択一的な性質が嫌いであり、すべてを検索可能なシステムが好ましいと <a class="external text" href="http://lists.w3.org/Archives/Public/www-talk/1992NovDec/0048.html" rel="nofollow">返信する</a> とともに、当時の WWW Framework を特定の httpd 設定で拡張して、ある URI と検索クエリーの作成を関連付けることを提案しました。</p> + +<p>2016 年に、 <code>isindex</code> は Edge および Chrome から削除された後で、標準から削除する<a href="https://github.com/whatwg/html/issues/1088">提案</a>が行われました。この削除は、 Safari と Firefox の対応が削除された後に翌日に<a href="https://github.com/whatwg/html/pull/1095">完了</a>しました。</p> + +<h2 id="HTML_Reference" name="HTML_Reference">HTML リファレンス</h2> + +<ul> + <li><a class="external text" href="http://html.spec.whatwg.org/multipage/" rel="nofollow">HTML 標準</a> では、これを <a class="external text" href="https://html.spec.whatwg.org/multipage/obsolete.html#isindex" rel="nofollow">obsolete and non-conforming feature</a> に分類しています。</li> + <li><a class="external text" href="http://www.w3.org/TR/html401/interact/forms.html#h-17.8" rel="nofollow">ISINDEX</a> 要素は <a class="external text" href="http://www.w3.org/TR/html401/" rel="nofollow">HTML 4.01</a> で非推奨になりました。</li> + <li><a class="external text" href="http://www.w3.org/TR/REC-html32" rel="nofollow">HTML 3.2</a> での <a class="external text" href="http://www.w3.org/TR/REC-html32#isindex" rel="nofollow">ISINDEX</a></li> + <li><a class="external text" href="http://www.w3.org/MarkUp/html-spec/html-spec_5.html" rel="nofollow">HTML 2.0</a> での <a class="external text" href="http://www.w3.org/MarkUp/html-spec/html-spec_5.html#SEC5.2.3" rel="nofollow">ISINDEX</a> と、<a class="external text" href="http://www.w3.org/MarkUp/html-spec/html-spec_7.html#SEC7.5" rel="nofollow">クエリーとインデックス</a> の動作の説明 (HTML 2.0)</li> + <li><a class="external text" href="http://www.w3.org/MarkUp/HTMLPlus/htmlplus_1.html" rel="nofollow">HTML+</a> での <a class="external text" href="http://www.w3.org/MarkUp/HTMLPlus/htmlplus_51.html" rel="nofollow">ISINDEX</a></li> +</ul> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.isindex")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("input")}}</li> + <li>{{HTMLElement("form")}}</li> +</ul> diff --git a/files/ja/web/html/element/kbd/index.html b/files/ja/web/html/element/kbd/index.html new file mode 100644 index 0000000000..f24b3f9c1f --- /dev/null +++ b/files/ja/web/html/element/kbd/index.html @@ -0,0 +1,213 @@ +--- +title: '<kbd>: キーボード入力要素' +slug: Web/HTML/Element/kbd +tags: + - Element + - HTML + - HTML 文字レベルの意味付け + - 'HTML:フローコンテンツ' + - 'HTML:知覚可能コンテンツ' + - 'HTML:記述コンテンツ' + - Reference + - Web + - ウェブ + - キーボード + - リファレンス + - 要素 +translation_of: Web/HTML/Element/kbd +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML のキーボード入力要素</strong> (<strong><code><kbd></code></strong>) はキーボード、音声入力、その他の入力端末からのユーザーによる文字入力を表す行内の文字列の区間を表します。</span>慣習的に、{{Glossary("user agent", "ユーザーエージェント")}}は既定で <code><kbd></code> 要素の中身を等幅フォントで表示しますが、 HTML 標準で規定されているものではありません。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/kbd.html", "tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p><code><kbd></code> は {{HTMLElement("samp")}} (サンプル出力) 要素の中で様々な組み合わせの入れ子が行われ、様々な形の入力や視覚的な合図に基づいた入力を表現します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>以外の属性はありません。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<p>他の要素 <code><kbd></code> と組み合わせることで、もっと具体的なシナリオを表現できる場合があります。</p> + +<ul> + <li>他の <code><kbd></code> 要素の中で更に <code><kbd></code> 要素を使用すると、もっと大きい入力の中における、実際のキー入力またはその他の入力単位を表します。以下の{{anch("Representing keystrokes within an input", "入力時のキー操作の表現")}}を参照してください。</li> + <li>{{HTMLElement("samp")}} 要素の中で <code><kbd></code> 要素を使用すると、システムからユーザーにエコーバックされた入力を表します。以下の{{anch("Echoed input", "入力のエコーバック")}}の例を参照してください。</li> + <li>一方、 <code><kbd></code> 要素の中で <code><samp></code> 要素を使用すると、メニューやメニュー項目の名前、画面上に表示されているボタンの名前など、システムによって表示された文字列に基づく入力を表します。以下の{{anch("Representing onscreen input options", "画面上に表示された入力の選択肢の表現")}}を参照してください。</li> +</ul> + +<div class="note"> +<p>専用のスタイルを定義して、 <code><kbd></code> 要素における既定のフォントの選択を上書きすることができますが、ユーザー設定によっては CSS より優先されることがあります。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Basic_example" name="Basic_example">基本的な例</h3> + +<pre class="brush: html notranslate"><p>コマンド "mycommand" のドキュメントを参照するには <kbd>help mycommand</kbd> +コマンドを使用してください。</p> +</pre> + +<p>{{ EmbedLiveSample('Basic_example', 350, 80) }}</p> + +<h3 id="Representing_keystrokes_within_an_input" name="Representing_keystrokes_within_an_input">入力時のキー操作の表現</h3> + +<p>複数のキー操作から成る入力を表現したい場合、複数の <code><kbd></code> 要素を重ねて、外側の <code><kbd></code> 要素で入力全体を表し、内側の <code><kbd></code> で入力時のそれぞれのキー操作を表すことができます。</p> + +<h4 id="Unstyled" name="Unstyled">スタイルなし</h4> + +<p>最初に、 HTML だけでどのように見えるかを見てみましょう。</p> + +<h5 id="HTML">HTML</h5> + +<pre class="brush: html notranslate"><p>キーボードショートカットの +<kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd> を使用して新規文書を作成することもできます。</p></pre> + +<p>ここでは外側の <code><kbd></code> 要素でキー入力操作全体を囲み、それぞれのキーの組み合わせを記述するために、それぞれのキーを囲んでいます。</p> + +<div class="blockIndicator note"> +<p>常にこのように囲む必要はありません。外側の <code><kbd></code> 要素を省略して簡略化しても構いません。言い換えれば、単に <code><kbd>Ctrl</kbd>+<kbd>N</kbd></code> と表現するのも完全に有効です。</p> + +<p>しかし、スタイルシートによっては、このように重ねて囲んだ方が便利だと感じられるかもしれません。</p> +</div> + +<h5 id="Result" name="Result">結果</h5> + +<p>スタイルシートを適用しないと、出力結果は次のように見えます。</p> + +<p>{{EmbedLiveSample("Unstyled", 650, 80)}}</p> + +<h4 id="With_custom_styles" name="With_custom_styles">専用スタイル付き</h4> + +<p>いくらか CSS を追加して、もっと分かりやすくすることができます。</p> + +<h5 id="CSS">CSS</h5> + +<p>キーボードのキーを表示する際に適用できるスタイル、 <code><kbd></code> 要素の <code>key</code> を定義します。</p> + +<pre class="brush: css notranslate">kbd.key { + border-radius: 3px; + padding: 1px 2px 0; + border: 1px solid black; +}</pre> + +<h5 id="HTML_2">HTML</h5> + +<p>それから HTML を更新して、このクラスを出力中のキーに使用するように表現します。</p> + +<pre class="brush: html notranslate"><p><kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">N</kbd></kbd> を押して新規文書を作成することもできます。</p></pre> + +<h5 id="Result_2" name="Result_2">結果</h5> + +<p>結果は私たちが求めているものです。</p> + +<p>{{EmbedLiveSample("With_custom_styles", 650, 80)}}</p> + +<h3 id="Echoed_input" name="Echoed_input">入力のエコーバック</h3> + +<p>{{HTMLElement("samp")}} 要素内で <code><kbd></code> 要素を使用すると、システムからエコーバックされた入力を表現することができます。</p> + +<pre class="brush: html notranslate"><p>構文エラーが発生すると、このツールは確認のために +あなたが入力したコマンドを出力します。</p> +<blockquote> + <samp><kbd>custom-git ad my-new-file.cpp</kbd></samp> +</blockquote></pre> + +<p>{{EmbedLiveSample("Echoed_input", 650, 100)}}</p> + +<h3 id="Representing_onscreen_input_options" name="Representing_onscreen_input_options">画面上に表示された入力の選択肢の表現</h3> + +<p><code><kbd></code> 要素の中で <code><samp></code> 要素を使用すると、メニューやメニュー項目の名前や、画面上に表示されているボタンの名前など、システムが表示した文字列に基づく入力を表すことができます。</p> + +<p>例えば、「ファイル」メニューの中の「新規文書」を選択する方法を HTML で表現すると、このようになります。</p> + +<pre class="brush: html notranslate"><p>新規ファイルを作成するには、メニューの +<kbd><kbd><samp>ファイル</samp></kbd>⇒<kbd><samp>新規文書</samp></kbd></kbd> +を選択して下さい。</p> + +<p>新しいファイルの名前を入力したら、 <kbd><samp>OK</samp></kbd> +ボタンを押して確認することを忘れないでください。</p></pre> + +<p>これはいくらか興味深い組み合わせです。メニューの選択肢を記述するために、入力全体を <code><kbd></code> 要素で囲んでいます。それからその中で、メニューとメニュー項目の名前を <code><kbd></code> 及び <code><samp></code> の中に入れ、画面上の部品を選択する入力であることを示しています。</p> + +<h4 id="Result_3" name="Result_3">結果</h4> + +<p>{{EmbedLiveSample("Representing_onscreen_input_options", 650, 120)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-kbd-element', '<kbd>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-kbd-element', '<kbd>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>音声入力や個々のキー入力など、どのようなユーザ入力も含むように拡張</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<kbd>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.kbd")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{htmlelement("code")}}</li> +</ul> diff --git a/files/ja/web/html/element/keygen/index.html b/files/ja/web/html/element/keygen/index.html new file mode 100644 index 0000000000..8ec70c008c --- /dev/null +++ b/files/ja/web/html/element/keygen/index.html @@ -0,0 +1,124 @@ +--- +title: <keygen> +slug: Web/HTML/Element/keygen +tags: + - Deprecated + - Element + - HTML + - HTML5 + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/keygen +--- +<p>{{HTMLRef}}{{Obsolete_Header}}</p> + +<p>HTML の <code><keygen></code> 要素は、鍵の材料の生成を容易にするため、および <a href="/ja/docs/Web/Guide/HTML/Forms">HTML フォーム</a>の一部として公開鍵を送信するための要素です。この仕組みは、ウェブベースの証明書管理システムと合わせて使用するものとして設計されています。証明書の要求に必要な他の情報を伴う HTML フォームで <code><keygen></code> 要素を使用して、その処理結果が署名済み証明書になることを想定しています。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, 対話型コンテンツ, <a href="/ja/docs/Web/HTML/Content_categories#Form_listed">リスト化</a>, <a href="/ja/docs/Web/HTML/Content_categories#Form_labelable">ラベル付け可能</a>, <a href="/ja/docs/Web/HTML/Content_categories#Form_submittable">サブミット可能</a>, <a href="/ja/docs/Web/HTML/Content_categories#Form_resettable">リセット可能</a>な<a href="/ja/docs/Web/HTML/Content_categories#Form-associated_content">フォーム関連要素</a>, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>なし。これは{{Glossary("empty element", "空要素")}}です。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>開始タグは必須。終了タグを記述してはならない。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{DOMxRef("HTMLKeygenElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を持ちます。</p> + +<dl> + <dt>{{HTMLAttrDef("autofocus")}}</dt> + <dd>この論理属性で、ユーザーが別のコントロールに入力するなどして変更しない限り、ページ読み込み時にこのコントロールがフォーカスを持つべきであることを指定できます。ドキュメント内のフォーム要素でひとつだけが <code>autofocus</code> 属性を持つことができ、これは真偽値です。</dd> + <dt>{{HTMLAttrDef("challenge")}}</dt> + <dd>公開鍵とともに送信するチャレンジ文字列です。指定しない場合の既定値は空文字列です。</dd> + <dt>{{HTMLAttrDef("disabled")}}</dt> + <dd>この論理属性は、フォームコントロールと対話できないことを示します。</dd> + <dt>{{HTMLAttrDef("form")}}</dt> + <dd>この要素が関連づけられた form 要素 (<em>フォームオーナー</em>)。属性の値は同一文書内の {{HTMLElement("form")}} 要素の <code>id</code> 属性の値でなければなりません。この属性を指定しない場合、この要素は {{HTMLElement("form")}} 要素の子孫要素として配置しなければなりません。この属性は <code><keygen></code> 要素を form 要素の子孫としてだけでなく、文書内のどこにでも配置することを可能にします。</dd> + <dt>{{HTMLAttrDef("keytype")}}</dt> + <dd>生成する鍵の種類。既定値は <code>RSA</code> です。</dd> + <dt>{{HTMLAttrDef("name")}}</dt> + <dd>コントロールの名前であり、フォームデータとともに送信されます。</dd> +</dl> + +<p>この要素は以下のように記述します。</p> + +<pre class="brush: html notranslate"><keygen name="<var>name</var>" challenge="<var>challenge string</var>" keytype="<var>type</var>" + keyparams="<var>pqg-params</var>"></pre> + +<p><code>keytype</code> 引数は、生成する鍵の種類を指定します。有効な値は "<code>RSA</code>" (既定値)、"<code>DSA</code>"、"<code>EC</code>" です。<code>name</code> 属性と <code>challenge</code> 属性はすべての場合で必要です。<code>keytype</code> 属性は RSA 鍵の生成では省略可、DSA 鍵および EC 鍵の生成では必須です。<code>keyparams</code> 属性は DSA 鍵および EC 鍵の生成では必須、RSA 鍵の生成では無視されます。<code>PQG</code> は、<code>keyparams</code> の同意語です。つまり、<code>keyparams="pqg-params"</code> または <code>pqg="pqg-params"</code> と指定できます。</p> + +<p>RSA 鍵では、<code>keyparams</code> 引数を使用しません (指定しても無視されます)。ユーザーは RSA 鍵の強度を選択できます。現在、ユーザーは "高" 強度 (2048 ビット) または "中" 強度 (1024 ビット) を選択できます。</p> + +<p>DSA 鍵では <code>keyparams</code> 引数で、鍵の生成処理で使用する DSA PQG 引数を指定します。<code>pqg</code> 引数の値は、IETF <a class="link-ftp" href="ftp://ftp.rfc-editor.org/in-notes/rfc3279.txt">RFC 3279</a> で定めている DSS 引数を DER で符号化したものを、BASE64 で符号化したものです。ユーザーは DSA 鍵のサイズを、DSA 標準で定義されているサイズから1つ選択できます。</p> + +<p>EC 鍵では <code>keyparams</code> 引数で、鍵が生成される楕円曲線の名前を指定します。これは通常、<a class="external" href="http://mxr.mozilla.org/mozilla-central/source/security/manager/ssl/src/nsKeygenHandler.cpp?mark=179-185,187-206,208-227,229-256#177" title="http://mxr.mozilla.org/mozilla-central/source/security/manager/ssl/src/nsKeygenHandler.cpp?mark=179-185,187-206,208-227,229-256#177">nsKeygenHandler.cpp</a> 内のテーブル由来の文字列です。(ここに名前がある曲線の一部だけが、実際に個々のブラウザーでサポートされている可能性がある点に注意してください) <code>keyparams</code> 引数文字列が認識できない曲線名である場合は、ユーザーが選択した鍵強度 (低、中、高) に基づいて曲線が選択されます。高強度は "<code>secp384r1</code>"、中強度は "<code>secp256r1</code>" です。(注記: 鍵強度の種類数の選択、各強度の既定値、ユーザーに選択肢を提示する UI は仕様の範囲外です)</p> + +<p><code><keygen></code> 要素は、HTML フォーム内のみで有効です。この要素は、ユーザーが鍵のサイズを選択するために提示するいくつかの選択肢をもたらします。選択の UI はメニュー、ラジオボタン、あるいは他に利用可能な何かになるでしょう。ブラウザーは、使用可能な鍵強度をいくつか提示します。現在は、強と中の 2 種類の強度を提供しています。ユーザーのブラウザーが暗号処理ハードウェア (例えば "スマートカード") をサポートするように設定されている場合は、どこへ鍵を生成するか (例えばスマートカードに、あるいはソフトウェアで生成してディスクへ保存) の選択肢も与えられるかもしれません。</p> + +<p>送信ボタンが押下されると、選択したサイズの鍵ペアを生成します。秘密鍵は暗号化されて、ローカルの鍵データベースに保管されます。</p> + +<pre class="notranslate">PublicKeyAndChallenge ::= SEQUENCE { + spki SubjectPublicKeyInfo, + challenge IA5STRING +} +SignedPublicKeyAndChallenge ::= SEQUENCE { + publicKeyAndChallenge PublicKeyAndChallenge, + signatureAlgorithm AlgorithmIdentifier, + signature BIT STRING +}</pre> + +<p>公開鍵とチャレンジ文字列は DER で <code>PublicKeyAndChallenge</code> として符号化され、<code>SignedPublicKeyAndChallenge</code> を生成するために秘密鍵でデジタル署名が施されます。<code>SignedPublicKeyAndChallenge</code> は {{Glossary("Base64")}} で符号化され、最終的に ASCII データがフォームの name/value のペアとしてサーバーに送信されます。name は、<code>keygen</code> 要素の <code>name</code> 属性で指定した<var>名前</var>です。チャレンジ文字列が提供されない場合は、長さが 0 の <code>IA5STRING</code> として符号化されます。</p> + +<p>以下は、HTTP サーバーから CGI プログラムに提供されるフォーム送信内容の例です。</p> + +<pre class="notranslate"> commonname=John+Doe&email=doe@foo.com&org=Foobar+Computing+Corp.& + orgunit=Bureau+of+Bureaucracy&locality=Anytown&state=California&country=US& + key=MIHFMHEwXDANBgkqhkiG9w0BAQEFAANLADBIAkEAnX0TILJrOMUue%2BPtwBRE6XfV%0AWtKQbsshxk5ZhcUwcwyvcnIq9b82QhJdoACdD34rqfCAIND46fXKQUnb0mvKzQID%0AAQABFhFNb3ppbGxhSXNNeUZyaWVuZDANBgkqhkiG9w0BAQQFAANBAAKv2Eex2n%2FS%0Ar%2F7iJNroWlSzSMtTiQTEB%2BADWHGj9u1xrUrOilq%2Fo2cuQxIfZcNZkYAkWP4DubqW%0Ai0%2F%2FrgBvmco%3D</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML5.1", "sec-forms.html#the-keygen-element", 'the <code><keygen></code> element')}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.elements.keygen")}}</p> diff --git a/files/ja/web/html/element/label/index.html b/files/ja/web/html/element/label/index.html new file mode 100644 index 0000000000..61a2b706ba --- /dev/null +++ b/files/ja/web/html/element/label/index.html @@ -0,0 +1,198 @@ +--- +title: <label> +slug: Web/HTML/Element/label +tags: + - Element + - Forms + - HTML + - HTML forms + - Reference + - Web +translation_of: Web/HTML/Element/label +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><label></code> 要素</strong>は、ユーザーインターフェイスの項目のキャプションを表します。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/label.html", "tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p><code><label></code> を {{htmlelement("input")}} 要素と関連付けると、いくらかの利点が発生します。</p> + +<ul> + <li>ラベルのテキストが、対応するテキスト入力欄に視覚的に関連付けられるだけではありません。プログラム的にも関連付けられます。つまり、例えばユーザーがフォーム入力欄にフォーカスを移動した時、読み上げソフトがラベルを読み上げ、支援技術のユーザーが何のデータを入力するべきか理解しやすくすることができます。</li> + <li>関連付けられたラベルをクリックして、入力欄自体をクリックした場合と同様に、入力欄にフォーカスを与えたりアクティブ化にしたりすることができます。こうしてヒット領域を拡大すると、タッチパネルの端末を使用している場合を含めて、入力欄をアクティブ化させやすくなります。</li> +</ul> + +<p><code><label></code> を <code><input></code> 要素に関連付けるには、 <code><input></code> に <code>id</code> 属性を設定しなければなりません。そして <code><label></code> に <code>for</code> 属性を設定して、値を input の <code>id</code> と同じにします。</p> + +<p>他の方法として、 <code><input></code> を直接 <code><label></code> の内側に入れることができますが、この場合は関連付けが明確なので、 <code>for</code> および <code>id</code> 属性は必要ありません。</p> + +<pre class="brush: html notranslate"><label>Do you like peas? + <input type="checkbox" name="peas"> +</label> +</pre> + +<p id="Usage_notes">その他の使用上の注意事項</p> + +<ul> + <li>label がラベル付けするフォームコントロールは<ruby><em>ラベル付きコントロール</em><rp> (</rp><rt>labeled control</rt><rp>) </rp></ruby>と呼ばれます。一つの入力欄に複数のラベルを関連付けることができます。</li> + <li><code><label></code> がクリックやタップされ、それがフォームのコントロールに関連付けられていた場合は、 <code>click</code> イベントが関連付けられたコントロールにも発生するようになります。</li> +</ul> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{htmlattrdef("for")}}</dt> + <dd><code><label></code> 要素と同一の文書内にある<a href="/ja/docs/Web/Guide/HTML/Content_categories#Form_labelable">ラベル付け可能</a>フォーム関連要素の {{htmlattrxref("id")}}。文書中の <code>for</code> 属性の値と合致する <code>id</code> を持つ最初の要素がラベル付け可能な要素であれば、このラベル要素の示す<em>ラベル付きコントロール</em>となります。<a href="https://html.spec.whatwg.org/multipage/forms.html#category-label">ラベル付け可能要素</a>でなければ、 <code>for</code> 属性は効果がありません。一致する <code>id</code> 値を持つ他の要素が文書内のその後にあったとしても、考慮されません。 + <div class="note"><strong>注</strong>: <code><label></code> 要素は、 <code>for</code> 属性が指す要素が包含するコントロール要素である場合、 <code>for</code> 属性を持ちつつ、中にコントロール要素を含めることができます。</div> + </dd> +</dl> + +<h2 id="Styling_with_CSS" name="Styling_with_CSS">CSS のスタイル付け</h2> + +<p><code><label></code> には特殊なスタイル上の考慮事項はありません。 — 構造的に単純なインライン要素であり、ほとんどは {{htmlelement("span")}} や {{htmlelement("a")}} 要素と同じ方法でスタイルを適用します。テキストが読みにくくならない限り、あらゆる方法でスタイルを適用することができます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Simple_label_example" name="Simple_label_example">シンプルな label の例</h3> + +<pre class="brush: html notranslate"><label>Click me <input type="text"></label></pre> + +<p>{{EmbedLiveSample('Simple_label_example', '200', '50', '')}}</p> + +<h3 id="Using_the_for_attribute" name="Using_the_for_attribute">"for" 属性の使用例</h3> + +<pre class="brush: html notranslate"><label for="username">Click me</label> +<input type="text" id="username"></pre> + +<p>{{EmbedLiveSample('Using_the_for_attribute', '200', '50', '')}}</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> + +<h3 id="Interactive_content" name="Interactive_content">対話型コンテンツ</h3> + +<p><code>label</code> の中に{{HTMLElement("a", "アンカー")}}や{{HTMLElement("button", "ボタン")}}のような対話型要素を配置しないでください。そのようにすると、ユーザーが <code>label</code> に関連したフォーム入力欄を有効化する事が難しくなります。</p> + +<h4 id="Dont" name="Dont">悪い例</h4> + +<pre class="brush: html example-bad notranslate"><label for="tac"> + <input id="tac" type="checkbox" name="terms-and-conditions"> + <a href="terms-and-conditions.html">利用規約と利用条件</a>に同意します。 +</label> +</pre> + +<h4 id="Do" name="Do">良い例</h4> + +<pre class="brush: html example-good notranslate"><label for="tac"> + <input id="tac" type="checkbox" name="terms-and-conditions"> + 利用規約と利用条件に同意します。 +</label> +<p> + <a href="terms-and-conditions.html">利用規約と利用条件を読む</a> +</p> +</pre> + +<h3 id="Headings" name="Headings">見出し</h3> + +<p>見出しは一般的に<a href="/ja/docs/Web/HTML/Element/Heading_Elements#Navigation">ナビゲーションエイド</a>として使用されるため、 <code><label></code> の中に<a href="/ja/docs/Web/HTML/Element/Heading_Elements">ヘッダー要素</a>を配置すると、数多くの種類の支援技術を妨げることになります。ラベルの文字列を視覚的に調整する必要がある場合は、代わりに <code><label></code> 要素に CSS クラスを適用してください。</p> + +<p><a href="/ja/docs/Web/HTML/Element/form">フォーム</a>、またはフォームのセクションにタイトルが必要な場合は、 {{HTMLElement("fieldset")}} の中に {{HTMLElement("legend")}} を配置して使用してください。</p> + +<h4 id="Dont_2" name="Dont_2">悪い例</h4> + +<pre class="brush: html example-bad notranslate"><label for="your-name"> + <h3>Your name</h3> + <input id="your-name" name="your-name" type="text"> +</label> +</pre> + +<h4 id="Do_2" name="Do_2">良い例</h4> + +<pre class="brush: html example-good notranslate"><label class="large-label" for="your-name"> + Your name + <input id="your-name" name="your-name" type="text"> +</label> </pre> + +<h3 id="Buttons" name="Buttons">ボタン</h3> + +<p>{{HTMLElement("input")}} 要素に <code>type="button"</code> がついた宣言に妥当な <code>value</code> 属性があれば、関連付けるラベルは必要ありません。ラベルを付けると、支援技術がボタン入力をどう解釈するかをじゃまする可能性があります。 {{HTMLElement("button")}} 要素でも同じことが言えます。</p> + +<h2 id="Technical_summary" name="Technical_summary">技術的概要</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Interactive_content">対話型コンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Form-associated_content">フォーム関連要素</a>, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>、ただし、子孫に <code>label</code> 要素を持つことはできない。ラベル付けの対象となるコントロール以外の<a href="/ja/docs/Web/Guide/HTML/Content_categories#Form_labelable">ラベル付け可能</a>要素を入れてはならない。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>許可されている <code>role</code> なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLLabelElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-label-element', '<label>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-label-element', '<label>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.9.1', '<label>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + <tr> + <td><a class="external external-icon" href="https://www.w3.org/TR/REC-html40-971218/interact/forms.html#h-17.9.1" hreflang="en" lang="en" rel="noopener">HTML 4.0 Specification<br> + <small lang="ja"><label> の定義</small></a></td> + <td>{{Spec2('HTML4.01')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.label")}}</p> diff --git a/files/ja/web/html/element/legend/index.html b/files/ja/web/html/element/legend/index.html new file mode 100644 index 0000000000..31a4d571bf --- /dev/null +++ b/files/ja/web/html/element/legend/index.html @@ -0,0 +1,101 @@ +--- +title: <legend> +slug: Web/HTML/Element/legend +tags: + - Element + - Forms + - HTML + - HTML forms + - Reference + - Web +translation_of: Web/HTML/Element/legend +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><legend></code> 要素</strong>は、その親要素である {{HTMLElement("fieldset")}} の内容のキャプションを表します。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/legend.html", "tabbed-standard")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a class="external" href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td>なし</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a> および <a href="/ja/docs/Web/HTML/Element/Heading_Elements">見出し</a> (h1–h6 要素)</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>{{HTMLElement("fieldset")}} 要素。<code><legend></code> 要素は <code><fieldset></code> の最初の子要素として配置しなくてはならない。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>許可されている <code>role</code> なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLLegendElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には、<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>以外の属性はありません。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code><legend></code> の使用例は、 {{ HTMLElement("form") }} のページを参照してください。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "forms.html#the-legend-element", "<legend>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td><code>legend</code> 要素を定義</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "sec-forms.html#the-legend-element", "<legend>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "interact/forms.html#h-17.10", "<legend>")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.legend")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Form_Role">ARIA: Form ロール</a></li> +</ul> diff --git a/files/ja/web/html/element/li/index.html b/files/ja/web/html/element/li/index.html new file mode 100644 index 0000000000..96fbc152c6 --- /dev/null +++ b/files/ja/web/html/element/li/index.html @@ -0,0 +1,158 @@ +--- +title: <li> +slug: Web/HTML/Element/li +tags: + - Element + - HTML + - HTML grouping content + - Reference +translation_of: Web/HTML/Element/li +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><li></code> 要素</strong>は、リストの項目を表すために用いられます。</span>この要素は、その項目が属する順序付きリスト ({{HTMLElement("ol")}})、順序なしリスト ({{HTMLElement("ul")}})、メニュー ({{HTMLElement("menu")}}) のいずれかの子要素として配置する必要があります。メニュー要素および順序なしリスト内においては、リストの項目は通常、行頭文字伴って表示され、順序付きリスト内では、数字や文字による連番のリストマーカーを伴って表示されます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/li.html", "tabbed-shorter")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリー</a></th> + <td>なし</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>直後に別の {{HTMLElement("li")}} 要素が続く場合、または他のリスト項目が続くことなく親要素が閉じられた場合は、終了タグが省略可能。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>{{HTMLElement("ul")}}、{{HTMLElement("ol")}}、{{HTMLElement("menu")}}。すでに廃止されているが、{{HTMLElement("dir")}} の子要素としても配置可能であった。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Listitem_role">listitem</a></code> when child of an <code><a href="/ja/docs/Web/HTML/Element/ol">ol</a></code>, <code><a href="/ja/docs/Web/HTML/Element/ul">ul</a></code> or <code><a href="/ja/docs/Web/HTML/Element/menu">menu</a></code></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>{{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}, {{ARIARole("radio")}}, {{ARIARole("separator")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLLIElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{htmlattrdef("value")}}</dt> + <dd>これは整数値の属性で、 {{HTMLElement("ol")}} 要素で定義されたリスト項目の序数値を示します。リストがローマ数字や文字で表示される場合であっても、この属性は数値のみが指定できます。続くリスト項目は、その番号から続いて採番されます。順序なしリスト ({{HTMLElement("ul")}}) やメニュー ({{HTMLElement("menu")}}) では <strong>value</strong> 属性は意味がありません。 + <div class="note"><strong>注</strong>: この属性は HTML4 で非推奨とされましたが、 HTML5 で再導入されました。</div> + </dd> + <dt>{{htmlattrdef("type")}} {{Deprecated_inline}}</dt> + <dd>文字の属性で、表示するリストマーカーの種類を指定します。 + <ul> + <li><code>a</code>: 小文字</li> + <li><code>A</code>: 大文字</li> + <li><code>i</code>: 小文字のローマ数字</li> + <li><code>I</code>: 大文字のローマ数字</li> + <li><code>1</code>: 数字</li> + </ul> + もし親の {{HTMLElement("ol")}} 要素で使用されていた場合は、それよりも優先されます。 + + <div class="note"><strong>注意:</strong> この属性は非推奨になっています。代わりにCSS の {{cssxref("list-style-type")}} プロパティを使用してください。</div> + </dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<p>もっと詳細な例は、 {{htmlelement("ol")}} と {{htmlelement("ul")}} のページを参照してください。</p> + +<h3 id="Ordered_list" name="Ordered_list">番号付きリスト</h3> + +<pre class="brush: html notranslate"><ol> + <li>最初のリスト項目</li> + <li>二番目のリスト項目</li> + <li>三番目のリスト項目</li> +</ol> +</pre> + +<p>{{EmbedLiveSample("Ordered_list")}}</p> + +<h3 id="Ordered_list_with_a_custom_value" name="Ordered_list_with_a_custom_value">カスタム値の付いた番号付きリスト</h3> + +<pre class="brush: html notranslate"><ol type="I"> + <li value="3">third item</li> + <li>fourth item</li> + <li>fifth item</li> +</ol> +</pre> + +<p>{{EmbedLiveSample("Ordered_list_with_a_custom_value")}}</p> + +<h3 id="Unordered_list" name="Unordered_list">順序なしリスト</h3> + +<pre class="brush: html notranslate"><ul> + <li>最初のリスト項目</li> + <li>二番目のリスト項目</li> + <li>三番目のリスト項目</li> +</ul></pre> + +<p>{{EmbedLiveSample("Unordered_list")}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-li-element', '<li>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-li-element', '<li>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '<li>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td><code>type</code> 属性を非推奨にした。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.li")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>他のリスト関連 HTML 要素: {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("menu")}} および廃止された {{HTMLElement("dir")}}</li> + <li><code><li></code> の整形に便利な CSS プロパティ: + <ul> + <li>箇条書き記号の表示を選択するための {{cssxref("list-style")}}</li> + <li>複雑な入れ子状リストを処理するのに使用できる <a href="/ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS counters</a></li> + <li>リスト項目のインデントの調整に用いることができる {{cssxref("margin")}}</li> + </ul> + </li> +</ul> diff --git a/files/ja/web/html/element/link/index.html b/files/ja/web/html/element/link/index.html new file mode 100644 index 0000000000..5b1966e9c4 --- /dev/null +++ b/files/ja/web/html/element/link/index.html @@ -0,0 +1,375 @@ +--- +title: '<link>: 外部リソースへのリンク要素' +slug: Web/HTML/Element/link +tags: + - Element + - HTML + - HTML document metadata + - Link + - Reference + - Web + - Web Performance + - metadata +translation_of: Web/HTML/Element/link +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML 外部リソースへのリンク要素 (<code><link></code>)</strong> は、現在の文書と外部のリソースとの関係を指定します。この要素は{{Glossary("CSS", "スタイルシート")}}へのリンクに最もよく使用されますが、サイトのアイコン ("favicon" スタイルのアイコンと、モバイル端末のホーム画面やアプリのアイコンの両方) の確立や、その他のことにも使用されます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/link.html")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>外部スタイルシートへリンクするには、 {{HTMLElement("head")}} の中に次のような <code><link></code> 要素を入れてください。</p> + +<pre class="brush: html no-line-numbers notranslate"><link href="main.css" rel="stylesheet"></pre> + +<p>この単純な例では、 <code>href</code> 属性内にスタイルシートへのパスを提供し、 <code>rel</code> 属性の値を <code>stylesheet</code> にしています。 <code>rel</code> は "relationship" を意味し、おそらく <code><link></code> 要素の重要な機能の一つです。 — 値はこれを含んでいる文書にどのように関係するかを示します。<a href="/ja/docs/Web/HTML/Link_types">リンク種別</a>で見られるように、様々な種類の関係があります。</p> + +<p>他にも見かけるであろう他の一般的な種別はたくさんあります。例えば、サイトのファビコンへのリンクがあります。</p> + +<pre class="brush: html no-line-numbers notranslate"><link rel="icon" href="favicon.ico"></pre> + +<p>他にもアイコンの <code>rel</code> 値はいくつもあり、以下のように主に様々なモバイルプラットフォーム上で特殊なアイコンの種別を示すために使用されます。</p> + +<pre class="brush: html no-line-numbers notranslate"><link rel="apple-touch-icon-precomposed" sizes="114x114" + href="apple-icon-114.png" type="image/png"></pre> + +<p><code>sizes</code> 属性はアイコンの寸法を表し、 <code>type</code> はリンクされようとしているリソースの MIME タイプが入ります。これらはブラウザーが利用できる最も適切なアイコンを選択するための有益なヒントを提供します。</p> + +<p><code>media</code> 属性でメディア種別やクエリを指定することもできます。このリソースはメディアの条件が真になった場合のみ読み込まれます。</p> + +<pre class="brush: html no-line-numbers notranslate"><link href="print.css" rel="stylesheet" media="print"> +<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"></pre> + +<p><code><link></code> 要素には、興味深いパフォーマンスやセキュリティの機能もいくつか追加されています。以下の例を見てみましょう。</p> + +<pre class="brush: html no-line-numbers notranslate"><link rel="preload" href="myFont.woff2" as="font" + type="font/woff2" crossorigin="anonymous"></pre> + +<p><code>rel</code> が <code>preload</code> の値であることは、ブラウザーがこのリソースを先読みすることを指示しており (詳しくは <a href="/ja/docs/Web/HTML/Preloading_content">rel="preload" によるコンテンツの先読み</a>を参照)、 <code>as</code> 属性がコンテンツが読み込まれるされる特定のクラスを示します。 <code>crossorigin</code> 属性はリソースが {{Glossary("CORS")}} リクエストによって読み込まれるかどうかを示します。</p> + +<p>その他の有用なメモです。</p> + +<ul> + <li><code><link></code> 要素は<a href="https://html.spec.whatwg.org/multipage/links.html#body-ok">リンク種別</a>が <strong>body-ok</strong> であるかどうかによって、 {{HTMLElement("head")}} 要素または {{HTMLElement("body")}} 要素のどちらかに置くことができます。例えば <code>stylesheet</code> リンク種別は body-ok であり、<code><link rel="stylesheet"></code> を body 要素内に置くことができます。しかし、これは従うべき良い方法ではありません。 <code><link></code> 要素は <code><head></code> に入れて本文から離した方が分かりやすくなります。</li> + <li>サイトにファビコンを設定するために <code><link></code> を使用する場合で、サイトがセキュリティの強化のためにコンテンツセキュリティポリシー (CSP) を使用している場合、ファビコンにポリシーが適用されます。ファビコンが読み込まれないという問題が発生したら、 {{HTTPHeader("Content-Security-Policy")}} ヘッダーの <a href="/ja/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"><code>img-src</code> ディレクティブ</a>がアクセスを禁止していないかどうか確認してください。</li> + <li>HTML および XHTML の仕様では <code><link></code> 要素向けのイベントハンドラーを定義していますが、それらがどのように使用されるかは不明確です。</li> + <li>XHTML 1.0 では <code><link></code> のような空要素では、 <code><link /></code> のように末尾のスラッシュが必要です。</li> + <li>WebTV は <code>rel</code> に <code>next</code> の値を使用して、一連の文書の次のページを先読みすることに対応しています。</li> +</ul> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{HTMLAttrDef("as")}}</dt> + <dd>この属性は、 <code>rel="preload"</code> または <code>rel="prefetch"</code> を <code><link></code> 要素に設定した場合に限り使用されます。これは <code><link></code> によって読み込まれるコンテンツのタイプを指定する属性であり、リクエストのマッチング、正しい<a href="/ja/docs/Web/HTTP/CSP">コンテンツセキュリティポリシー</a>の適用、正しい {{HTTPHeader("Accept")}} リクエストヘッダーの設定のために必要です。さらに、 <code>rel="preload"</code> はこれをリクエストの優先度付の信号として使用します。下記の表はこの属性に有効な値と、適用先の要素またはリソースの一覧です。</dd> + <dd> + <table class="standard-table"> + <thead> + <tr> + <th scope="col">値</th> + <th scope="col">適用先</th> + </tr> + </thead> + <tbody> + <tr> + <td>audio</td> + <td><code><audio></code> 要素</td> + </tr> + <tr> + <td>document</td> + <td><code><iframe></code> および <code><frame></code> 要素</td> + </tr> + <tr> + <td>embed</td> + <td><code><embed></code> 要素</td> + </tr> + <tr> + <td>fetch</td> + <td> + <p>fetch, XHR</p> + + <div class="blockIndicator note"> + <p>この値は <code><link></code> に crossorigin 属性をつけるために必要です。</p> + </div> + </td> + </tr> + <tr> + <td>font</td> + <td>CSS @font-face</td> + </tr> + <tr> + <td>image</td> + <td><code><img></code> および <code><picture></code> 要素で srcset または imageset 属性が付いているもの、 SVG の <code><image></code> 属性、 CSS の <code>*-image</code> 規則</td> + </tr> + <tr> + <td>object</td> + <td><code><object></code> 要素</td> + </tr> + <tr> + <td>script</td> + <td><code><script></code> 要素、ワーカーの <code>importScripts</code></td> + </tr> + <tr> + <td>style</td> + <td><code><link rel=stylesheet></code> 要素、 CSS の <code>@import</code></td> + </tr> + <tr> + <td>track</td> + <td><code><track></code> 要素</td> + </tr> + <tr> + <td>video</td> + <td><code><video></code> 要素</td> + </tr> + <tr> + <td>worker</td> + <td>ワーカー、共有ワーカー</td> + </tr> + </tbody> + </table> + </dd> + <dt>{{HTMLAttrDef("crossorigin")}}</dt> + <dd>この列挙型の属性は、関連リソースを取得する際に {{Glossary("CORS")}} を使用しなければならないかを示します。 <a href="/ja/docs/Web/HTML/CORS_Enabled_Image">CORS が有効な画像</a>は、<em>汚染</em>されることなく {{HTMLElement("canvas")}} 要素で再利用できます。次の値が使用できます。 + <dl> + <dt><code>anonymous</code></dt> + <dd>オリジン間リクエスト (つまり、 HTTP の {{HTTPHeader("Origin")}} ヘッダーを持つリクエスト) が実行されます。ただし、信用情報は送信されません (Cookie、X.509 証明書、 HTTP ベーシック認証は利用されません)。サーバーが元のサイトに信用情報を付与しない (HTTP の {{HTTPHeader("Access-Control-Allow-Origin")}} ヘッダーの設定がない) 場合、リソースが汚染され、その使用も制限されます。</dd> + <dt><code>use-credentials</code></dt> + <dd>オリジン間リクエスト (つまり、 HTTP の <code>Origin</code> ヘッダーを持つリクエスト) が実行され、信用情報が送信されます (Cookie、証明書、HTTP ベーシック認証が利用されます)。サーバーが元のサイトに信用情報を付与しない場合 (HTTP の {{HTTPHeader("Access-Control-Allow-Credentials")}} ヘッダーに関わらず)、画像が<em>汚染</em>され、その使用も制限されます。</dd> + </dl> + この属性が存在しない場合、リソースは {{Glossary("CORS")}} リクエストなしで (<code>Origin</code> HTTP ヘッダーを送信せずに) 取得され、汚染されない使用が妨げられます。これが無効な場合、列挙型のキーワード <strong>anonymous</strong> が指定されたものとして扱われます。それ以上の情報は <a href="/ja/docs/Web/HTML/CORS_settings_attributes">CORS 設定属性</a> を参照してください。</dd> + <dt>{{HTMLAttrDef("disabled")}}</dt> + <dd> + <p><code>rel="stylesheet"</code> の場合のみ、 <code>disabled</code> は論理属性であり、指定されたスタイルシートを読み込んで文書に適用するかどうかを示します。 <code>disabled</code> が HTML に読み込み時点で指定されていた場合、そのスタイルシートはページ読み込み処理の間に読み込まれません。代わりに、そのスタイルシートは <code>disabled</code> 属性が <code>false</code> に変更されたか削除された場合にオンデマンドで読み込まれます。</p> + + <p>DOM から <code>disabled</code> プロパティの値を変更すると、そのスタイルシートを文書の {{domxref("StyleSheet.disabled")}} のプロパティから削除します。</p> + </dd> + <dt>{{HTMLAttrDef("href")}}</dt> + <dd>この属性は、リンクしたリソースの {{glossary("URL")}} を指定します。URL は絶対・相対のどちらでもかまいません。</dd> + <dt>{{HTMLAttrDef("hreflang")}}</dt> + <dd>この属性は、リンク先のリソースの言語を示します。これは単なる助言です。許容される値は <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a> で定めています。この属性は、 {{HTMLAttrxRef("href", "link")}} 属性が提供されている場合にのみ使用します。</dd> + <dt>{{HTMLAttrDef("imagesizes")}}</dt> + <dd><code>rel="preload"</code> および <code>as="image"</code> において、 <code>imagesizes</code> 属性は、 <code>img</code> 要素によって使用される適切なリソースを、その <code>srcset</code> および <code>sizes</code> 属性に対応する値で先読みすることを示す <a href="https://html.spec.whatwg.org/multipage/images.html#sizes-attribute">sizes 属性</a>です。</dd> + <dt>{{HTMLAttrDef("imagesrcset")}}</dt> + <dd><code>rel="preload"</code> および <code>as="image"</code> において、 <code>imagesrcset</code> 属性は <code>img</code> 要素によって使用される適切なリソースを、その <code>srcset</code> および <code>sizes</code> 属性に対応する値で先読みすることを示す <a href="https://html.spec.whatwg.org/multipage/images.html#srcset-attribute">sourceset 属性</a>です。</dd> + <dt>{{HTMLAttrDef("integrity")}} {{Experimental_Inline}}</dt> + <dd>この属性は、取得したリソースが予期せぬ改ざんを受けずに提供されたかを、ユーザーエージェントが検証するために使用できるメタデータである、ブラウザーに取得させたリソース (ファイル) の暗号学的ハッシュを BASE64 でエンコードしたデータを含みます。<a href="/ja/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a> をご覧ください。</dd> + <dt>{{HTMLAttrDef("media")}}</dt> + <dd>この属性は、リンク先のリソースが適用されるメディアを指定します。この値は<a href="/ja/docs/Web/CSS/Media_queries">メディアクエリー</a>でなければなりません。この属性は主に外部のスタイルシートから、実行中のデバイスに最適なものをユーザーエージェントが選択できるようにリンクするときに役立ちます。 + <div class="blockIndicator note"> + <p><strong>注:</strong></p> + + <ul> + <li>HTML 4 では、単純なホワイトスペースで区切られたメディアリテラルのリストのみ記述できます。これは<a href="/ja/docs/Web/CSS/@media">メディアタイプとグループ</a> で、<code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code> などの使用可能な値が定義されています。 HTML5 ではこれがあらゆる<a href="/ja/docs/Web/CSS/Media_queries">メディアクエリ</a>に拡張され、 HTML 4 で使用できる値の上位互換となっています。</li> + <li><a href="/ja/docs/Web/CSS/Media_queries">CSS3 メディアクエリ</a>に対応していないブラウザーは、リンクを適切に理解するとは限りません。 HTML 4 で定義されたメディアクエリーのセットに制限されるので、フォールバックリンクを設定することを忘れないでください。</li> + </ul> + </div> + </dd> + <dt>{{HTMLAttrDef("prefetch")}} {{Non-standard_Inline}} {{secureContext_inline}}</dt> + <dd>この属性は、おそらく次のナビゲーション先で必要でありユーザーエージェントが取得すべきであるリソースを特定します。これは将来リソースがリクエストされたときに、ユーザーエージェントが早く応答することを可能にします。</dd> + <dt>{{HTMLAttrDef("referrerpolicy")}} {{Experimental_Inline}}</dt> + <dd>リソースを読み込む際にどのリファラーを使用するかを示す文字列です。 + <ul> + <li><code>no-referrer</code> は、{{HTTPHeader("Referer")}} ヘッダーを送信しないことを表します。</li> + <li><code>no-referrer-when-downgrade</code> は、TLS (HTTPS) を使用せずに生成元へナビゲートする場合は {{HTTPHeader("Referer")}} ヘッダーを送信しないことを表します。これは他にポリシーが定められていない場合の、ユーザーエージェントの既定の動作です。</li> + <li><code>origin</code> は、ページの生成元 (大まかにいえばスキーム、ホスト、ポート) をリファラーとすることを表します。</li> + <li><code>origin-when-cross-origin</code> は、異なるオリジンへの移動ではリファラーをスキーム、ホスト、ポートに制限します。同一オリジンへの移動では、リファラーのパスも含めます。</li> + <li><code>unsafe-url</code> は、リファラーに生成元とパスを含めることを表します (ただし、フラグメント、パスワード、ユーザー名は含めません)。これは生成元やパスの情報が TLS で保護されたリソースからセキュアでない生成元へ漏えいしますので、安全ではありません。</li> + </ul> + </dd> + <dt>{{HTMLAttrDef("rel")}}</dt> + <dd>この属性は現在の文書に対する、リンクされた文書の関係を示します。属性値は、空白で区切られた<a href="/ja/docs/Web/HTML/Link_types">リンク種別の値</a>のリストでなければなりません。</dd> + <dt>{{HTMLAttrDef("sizes")}}</dt> + <dd>この属性は、リソースに含まれる映像メディア向けのアイコンのサイズを定義します。これは、 {{HTMLAttrxRef("rel","link")}} の値が <code>icon</code> 又は Apple の <code>apple-touch-icon</code> のような標準外の種別が含まれている場合にのみ指定することができます。以下の値を指定できます。 + <ul> + <li><code>any</code>: <code>image/svg+xml</code> のようなベクター画像であるため、どのようなサイズにも調整可能であることを示します。</li> + <li>ホワイトスペースで区切られたサイズのリスト。サイズはそれぞれ <code><em><幅のピクセル値></em>x<em><高さのピクセル値></em></code> または <code><em><幅のピクセル値></em>X<em><高さのピクセル値></em></code> という形式です。それぞれのサイズがリソースに含まれていることが必要です。</li> + </ul> + + <div class="blockIndicator note"> + <p><strong>注:</strong> ほとんどのアイコン形式は1個のアイコンのみ保存可能です。よってほとんどの場合、 {{HTMLAttrxRef("sizes")}} 属性はエントリーが1個だけになります。アップルの ICN はもちろん、マイクロソフトの ICO 形式も使用できます。 ICO の方が一般的であり、複数ブラウザーの対応 (特に IE の古いバージョン) が重要である場合はこの形式を使用してください。</p> + </div> + </dd> + <dt>{{HTMLAttrDef("title")}}</dt> + <dd><code>title</code> 属性は、<code><link></code> 要素では特別な意味があります。<code><link rel="stylesheet"></code> で使用すると、<a href="/ja/docs/Web/CSS/Alternative_style_sheets">優先スタイルシートか代替スタイルシートか</a> を定義します。間違って使用すると <a href="/ja/docs/Correctly_Using_Titles_With_External_Stylesheets">スタイルシートが無視されます</a>。</dd> + <dt>{{HTMLAttrDef("type")}}</dt> + <dd>この属性は、リンク先コンテンツの種類を定義します。この属性の値は <strong>text/html</strong> や <strong>text/css</strong> などの MIME タイプにします。この属性の一般的な使用法は、参照されるスタイルシートのタイプ (<strong>text/css</strong> など) の定義ですが、 CSS はウェブ上の唯一のスタイルシート言語であるため、 <code>type</code> 属性を省略できるばかりでなく、それが実際に推奨される習慣になっています。また <code>rel="preload"</code> リンク種別で、ブラウザーが対応するファイルタイプのみダウンロードさせるためにも使用します。</dd> +</dl> + +<h3 id="Non-standard_attributes" name="Non-standard_attributes">標準外の属性</h3> + +<dl> + <dt>{{HTMLAttrDef("methods")}} {{Non-standard_Inline}}</dt> + <dd>この属性の値は、オブジェクト上で動作する関数についての情報を提供します。この値は基本的に HTTP プロトコルが利用されたときに与えられますが、(<strong>title</strong> 属性と同じような理由で) リンク先の情報を前もって含めるときに役立ちます。例えば定義されたメソッドの機能によって、異なるリンクの描画をブラウザーが選択します。検索可能なリンクで異なるアイコンを取得したり、外部リンクには現在のサイトから去ることを示す描画にしたりできます。この属性は、定義された Internet Explorer 4 ですら、あまり理解されておらず対応もされていません。<a href="https://msdn.microsoft.com/en-us/library/ms534168%28VS.85%29.aspx" rel="external nofollow">Methods プロパティ (MSDN)</a> をご覧ください。</dd> + <dt>{{HTMLAttrDef("target")}} {{Non-standard_Inline}}</dt> + <dd>定義されたリンク関係を持つ、またはリンクしたリソースを表示するフレームまたはウィンドウの名前を定義します。</dd> +</dl> + +<h3 id="Obsolete_attributes" name="Obsolete_attributes">廃止された属性</h3> + +<dl> + <dt>{{HTMLAttrDef("charset")}} {{Obsolete_Inline}}</dt> + <dd>この属性は、リンク先のリソースの文字エンコーディングを定義します。この値は {{rfc(2045)}} で定義されている文字セットの、スペースまたはカンマで区切られたリストです。既定値は <code>iso-8859-1</code> です。 + <div class="note"><strong>使用上のメモ:</strong> この廃止された属性と同じ効果を生み出すためには、リンク先のリソースで HTTP の {{HTTPHeader("Content-Type")}} ヘッダーを使用してください。</div> + </dd> + <dt>{{HTMLAttrDef("rev")}} {{Obsolete_Inline}}</dt> + <dd>この属性の値は、{{HTMLAttrxRef("href", "link")}} 属性で定義したリンク先文書に対する、現在の文書の関係を示します。従って、この属性は <code>rel</code> 属性の値と比べたときに逆向きの関係を定義します。この属性向けの<a href="/ja/docs/Web/HTML/Link_types">リンク種別の値</a>は、{{HTMLAttrxRef("rel", "link")}} 向けの値と似ています。</dd> + <dd> + <div class="blockIndicator note"> + <p><strong>注:</strong> この属性は WHATWG HTML living standard (MDN が正式とみなしている仕様書) で廃止とみなされています。しかし、 <code>rev</code> は W3C 仕様書では廃止とみなされて<em>いない</em>ことは注目に値します。とはいうものの、不確実性を考えると、 <code>rev</code> に頼ることは賢明ではありません。</p> + + <p>代わりに、逆の意味の<a href="/ja/docs/Web/HTML/Link_types">リンク種別の値</a>を与えた {{HTMLAttrxRef("rel", "link")}} 属性を使用してください。例えば <code>made</code> は <code>author</code> に置き換えます。また、この属性は<ruby>リビジョン<rp> (</rp><rt>revision</rt><rp>) </rp></ruby>を表すものではなく、バージョン番号を指定してはいけませんが、残念ながらいくつものサイトでそのように使用されています。</p> + </div> + </dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Including_a_stylesheet" name="Including_a_stylesheet">スタイルシートの読み込み</h3> + +<p>ページにスタイルシートを読み込むには、以下の構文を使用します。</p> + +<pre class="brush: html no-line-numbers notranslate"><link href="style.css" rel="stylesheet"> +</pre> + +<h3 id="Providing_alternative_stylesheets" name="Providing_alternative_stylesheets">代替スタイルシートの提供</h3> + +<p><a href="/ja/docs/Web/CSS/Alternative_style_sheets">代替スタイルシート</a>も提示できます。</p> + +<p>ユーザーはメニューの 表示 > スタイルシート で、使用するスタイルシートを選択できます。これは、ユーザーがページをさまざまなバージョンで閲覧する手段を提供します。</p> + +<pre class="brush: html no-line-numbers notranslate"><link href="default.css" rel="stylesheet" title="Default Style"> +<link href="fancy.css" rel="alternate stylesheet" title="Fancy"> +<link href="basic.css" rel="alternate stylesheet" title="Basic"> +</pre> + +<h3 id="異なる利用場面のアイコンの提供">異なる利用場面のアイコンの提供</h3> + +<p>同じページにいくつかの異なるアイコンへのリンクを含めて、ブラウザーが <code>rel</code> や <code>sizes</code> の値をヒントとして使用し、特定の場面で最適に動作する一つを選択するようにすることができます。</p> + +<pre class="brush: html no-line-numbers notranslate"><!-- 高解像度ディスプレイの第三世代 iPad --> +<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png"> +<!-- 高解像度ディスプレイの iPhone --> +<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png"> +<!-- 第一、第二世代の iPad: --> +<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png"> +<!-- 高解像度でない iPhone, iPod Touch, Android 2.1 以降の端末 --> +<link rel="apple-touch-icon-precomposed" href="favicon57.png"> +<!-- 基本的なファビコン --> +<link rel="shortcut icon" href="favicon32.png"></pre> + +<h3 id="メディアクエリのついた条件付きのリソース読み込み">メディアクエリのついた条件付きのリソース読み込み</h3> + +<p>以下のように、メディア種別やクエリを <code>media</code> 属性で指定することができます。このリソースはメディア条件が真の場合にのみ読み込まれます。</p> + +<pre class="brush: html no-line-numbers notranslate"><link href="print.css" rel="stylesheet" media="print"> +<link href="mobile.css" rel="stylesheet" media="all"> +<link href="desktop.css" rel="stylesheet" media="screen and (min-width: 600px)"> +<link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)"> +</pre> + +<h3 id="Stylesheet_load_events" name="Stylesheet_load_events">スタイルシートの load イベント</h3> + +<p><code>load</code> イベントの発生を確認することで、スタイルシートが読み込まれた時を判断できます。同様に <code>error</code> イベントを確認することで、スタイルシートを処理する際のエラー発生を検出できます。</p> + +<pre class="brush: html notranslate"><script> +var myStylesheet = document.querySelector('#my-stylesheet'); + +myStylesheet.onload = function() { + // Do something interesting; the sheet has been loaded +} + +myStylesheet.onerror = function() { + console.log("An error occurred loading the stylesheet!"); +} +</script> + +<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet"> +</pre> + +<div class="blockIndicator note"> +<p><strong>注:</strong> <code>load</code> イベントはスタイルシートとスタイルシートがインポートするすべてのコンテンツの読み込みと解析が行われた後、スタイルシートがコンテンツに適用される直前に発生します。</p> +</div> + +<h3 id="Preload_examples" name="Preload_examples">Preload の例</h3> + +<p><a href="/ja/docs/Web/HTML/Preloading_content"><code>rel="preload"</code> によるコンテンツの先読み</a>に、<link rel="preload"> の例がいくつかあります。</p> + +<h2 id="Technical_summary" name="Technical_summary">技術的概要</h2> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td>メタデータコンテンツ。 <a href="/ja/docs/Web/HTML/Global_attributes/itemprop">itemprop</a> 属性がある場合は<a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>、<a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th>許可されている内容</th> + <td>なし。これは{{Glossary("empty element", "空要素")}}です。</td> + </tr> + <tr> + <th>タグの省略</th> + <td>空要素であるため開始タグは必須であり、終了タグは置いてはいけません。</td> + </tr> + <tr> + <th>許可されている親要素</th> + <td>メタデータ要素を受け入れるすべての要素。 <a href="/ja/docs/Web/HTML/Global_attributes/itemprop">itemprop</a> 属性がある場合は<a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><code>href</code> 属性つきの {{ARIARole("link")}}</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>許可されている <code>role</code> なし</td> + </tr> + <tr> + <th>DOM インターフェイス</th> + <td>{{DOMxRef("HTMLLinkElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "semantics.html#the-link-element", "<link>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>最新のスナップショットから変更なし。</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "document-metadata.html#the-link-element", "<link>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td><code>crossorigin</code> 属性および <code>sizes</code> 属性を追加。<code>media</code> の値をすべてのメディアクエリーに拡張。<code>rel</code> に多くの新たな値を追加。</td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "struct/links.html#h-12.3", "<link>")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.link", 3)}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>HTTP の {{HTTPHeader("Link")}} ヘッダー</li> +</ul> diff --git a/files/ja/web/html/element/listing/index.html b/files/ja/web/html/element/listing/index.html new file mode 100644 index 0000000000..a359093d17 --- /dev/null +++ b/files/ja/web/html/element/listing/index.html @@ -0,0 +1,52 @@ +--- +title: <listing> +slug: Web/HTML/Element/listing +tags: + - Element + - HTML + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/listing +--- +<div>{{Obsolete_header}}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p><em>HTML の Listing 要素</em> (<code><listing></code>) は、開始タグと終了タグの間にあるテキストを HTML として解釈せず、等幅フォントを使用して表示します。HTML 2 標準では、1 行が 132 文字を超えない場合は改行すべきではないと勧告しています。</p> + +<div class="note"><strong>注記:</strong> この要素を使用してはいけません。 + +<ul> + <li>この要素は HTML 3.2 で非推奨とされており、実装していないブラウザがあることに加えて実装に一貫性がありません。さらにこの要素は HTML5 で廃止されており、適合するユーザエージェントによっては {{HTMLElement("pre")}} 要素のように表示されるかもしれませんが、内部の HTML を解釈するでしょう!</li> + <li>代わりに {{HTMLElement("pre")}} 要素、または意味的に適切な場合は {{HTMLElement("code")}} 要素を使用して、タグが解釈されないようにするため HTML の '<code><</code>' と '<code>></code>' をエスケープしてください。</li> + <li>等幅フォントによる表示は {{cssxref("font-family")}} プロパティの総称フォントとして <code>monospace</code> を使用する、適切な <a href="/ja/docs/Web/CSS" title="CSS">CSS</a> スタイルを適用した {{HTMLElement("div")}} 要素でも実現できます。</li> +</ul> +</div> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は、すべての要素で共通の<a class="new " href="/ja/docs/Web/HTML/global_attributes" rel="internal" title="HTML/global attributes">グローバル属性</a>以外の属性がありません。</p> + +<h2 id="DOM_interface" name="DOM_interface">DOM インタフェース</h2> + +<p>この要素は {{domxref('HTMLElement')}} インターフェイスを提供します。</p> + +<div class="note"> +<p><strong>実装メモ:</strong> Gecko 1.9.2 まで、Firefox はこの要素に {{domxref('HTMLSpanElement')}} インターフェイスを実装していました。</p> +</div> + +<h2 id="See_also" name="See_also">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから作成されます。データに貢献したい場合は、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送ってください。</div> + +<p>{{Compat("html.elements.listing")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>代わりに {{HTMLElement("pre")}} 要素や {{HTMLElement("code")}} 要素を使用します。</li> + <li>{{HTMLElement("listing")}} と同様に {{HTMLElement("plaintext")}} 要素や {{HTMLElement("xmp")}} 要素も廃止されています。</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ja/web/html/element/main/index.html b/files/ja/web/html/element/main/index.html new file mode 100644 index 0000000000..8c3e730415 --- /dev/null +++ b/files/ja/web/html/element/main/index.html @@ -0,0 +1,173 @@ +--- +title: <main> +slug: Web/HTML/Element/main +tags: + - HTML + - HTML コンテンツグループ化 + - 'HTML:フローコンテンツ' + - 'HTML:知覚可能コンテンツ' + - Reference + - main + - 要素 +translation_of: Web/HTML/Element/main +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><main></code> 要素</strong>は、文書の {{HTMLElement("body")}} の主要な内容を表します。主要な内容とは、文書の中心的な主題、またはアプリケーションの中心的な機能に直接関連または拡張した内容の範囲のことです。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/main.html","tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>文書には {{htmlattrxref("hidden")}} 属性が指定されていない <code><main></code> 要素を2つ以上置くことはできません。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>不可。開始タグと終了タグの両方が必須。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れる場所、但し<a href="https://html.spec.whatwg.org/multipage/grouping-content.html#hierarchically-correct-main-element" id="the-main-element:hierarchically-correct-main-element">階層的に正しい <code>main</code> 要素であること</a>。</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>既定で <code><main></code> 要素に <code>main</code> ロールを適用します。また、<code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role">presentation</a></code> ロールも許可されます。</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみがあります。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<p><code><main></code> 要素の内容は、文書で固有のものにしてください。この内容はサイドバー、ナビゲーションリンク、著作権表示、サイトロゴ、検索フォームのような、文書のセットや文書のセクションにまたがって繰り返されるものを除くべきです。(もちろん、主な内容が検索フォームでない限り)</p> + +<p><code><main></code> は文書のアウトラインに寄与しません。すなわち {{HTMLElement("body")}} や {{HTMLElement("h2")}} などの見出しとは異なり、 <code><main></code> はページの構造の {{glossary("DOM")}} の概念に影響を与えません。これは情報を与えるだけです。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: html"><!-- 他のコンテンツ --> + +<main> + <h1>Apples</h1> + <p>The apple is the pomaceous fruit of the apple tree.</p> + + <article> + <h2>Red Delicious</h2> + <p>These bright red apples are the most common found in many + supermarkets.</p> + <p>... </p> + <p>... </p> + </article> + + <article> + <h2>Granny Smith</h2> + <p>These juicy, green apples make a great filling for + apple pies.</p> + <p>... </p> + <p>... </p> + </article> +</main> + +<!-- 他のコンテンツ --></pre> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> + +<h3 id="Landmark" name="Landmark">ランドマーク</h3> + +<p><code><main></code> 要素は <a href="/ja/docs/Web/Accessibility/ARIA/Roles/Main_role"><code>main</code> ランドマーク</a>ロールのように動作します。<a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques#Landmark_roles">ランドマーク</a>は、文書の長いセクションをすばやく識別して移動するための支援技術として使用することができます。 <a href="/ja/docs/Web/HTML/Element/main#Browser_compatibility">古いブラウザーの互換性の確認</a>ができない限り、 <code><main></code> を <code>role="main"</code> の宣言付きで使用するべきです。</p> + +<h3 id="Skip_navigation" name="Skip_navigation">スキップナビゲーション</h3> + +<p>スキップナビゲーションは、 "skipnav" とも呼ばれますが、支援技術のユーザーが繰り返されるコンテンツ (メインナビゲーション、情報バナー、等) の大きなセクションをすばやく飛ばすことができる技法です。これによって、ユーザーがページのメインコンテンツをより早くアクセスすることができます。</p> + +<p>{{htmlattrxref("id")}} 属性を追加することで、 <code><main></code> 要素がスキップナビゲーションリンクのターゲットになることができます。</p> + +<pre><span class="tag"><body</span><span class="tag">> + <a href="#main-content">Skip to main content</a> + + <!-- navigation and header content --> + + <main id="main-content"> + <!-- main page content --> + </main> +</body></span> +</pre> + +<ul> + <li><a href="https://webaim.org/techniques/skipnav/">WebAIM: "Skip Navigation" Links</a></li> +</ul> + +<h3 id="Reader_mode" name="Reader_mode">リーダーモード</h3> + +<p>ブラウザーのリーダーモードでは、コンテンツをリーダーに特化したビューに変換するときに、<a href="/ja/docs/Web/HTML/Element/Heading_Elements">見出し</a>や<a href="/ja/docs/Web/HTML/Element#Content_sectioning">コンテンツ区分要素</a>と同様に <code><main></code> 要素の存在を探します。</p> + +<ul> + <li><a href="https://medium.com/@mandy.michael/building-websites-for-safari-reader-mode-and-other-reading-apps-1562913c86c9">Building websites for Safari Reader Mode and other reading apps.</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#the-main-element', '<main>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'grouping-content.html#the-main-element', '<main>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML5 W3C')}} から変更なし</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-main-element', '<main>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p><code><main></code> は広く対応されています。 Internet Explorer 11 およびそれ以前については、アクセシビリティにするために <code><main></code> 要素に ARIA の <code>"main"</code> ロールを追加することが提案されています (JAWS のような、古い Internet Explorer との組み合わせで使用する読み上げソフトは、 <code>role</code> 属性を含めれば <code><main></code> 要素の意味論的な意味を理解できるでしょう)。</p> + +<pre class="brush: html"><main role="main"> + ... +</main> +</pre> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.main")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>基本構造の要素: {{HTMLElement("html")}}, {{HTMLElement("head")}}, {{HTMLElement("body")}}</li> + <li>セクション関連の要素: {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, {{HTMLElement("nav")}}</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Main_role">ARIA: Main ロール</a></li> +</ul> diff --git a/files/ja/web/html/element/map/index.html b/files/ja/web/html/element/map/index.html new file mode 100644 index 0000000000..783d6e09c2 --- /dev/null +++ b/files/ja/web/html/element/map/index.html @@ -0,0 +1,126 @@ +--- +title: <map> +slug: Web/HTML/Element/map +tags: + - Element + - HTML + - HTML embedded content + - Multimedia + - Reference + - Web +translation_of: Web/HTML/Element/map +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><map></code> 要素</strong>はイメージマップ (クリック可能なリンク領域) を定義するために {{HTMLElement("area")}} 要素とともに使用します。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/map.html", "tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>、<a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>、知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>すべての<a href="/ja/docs/Web/HTML/Content_categories#Transparent_content_model">透過的</a>要素</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>許可されている <code>role</code> なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLMapElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を持っています。</p> + +<dl> + <dt>{{htmlattrdef("name")}}</dt> + <dd><code>name</code> 属性は、マップを参照可能にするための名前を与えます。この属性は指定しなければならず、値は空文字列ではなく空白文字を含まないものにしなければなりません。 <code>name</code> 属性の値は、同一文書内の別の <code><map></code> 要素の <code>name</code> 属性の値と compatibility-caseless 方式で一致してはいけません。 {{htmlattrxref("id")}} 属性も指定した場合は、両方の属性の値を同一にしなければなりません。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html notranslate"><map name="primary"> + <area shape="circle" coords="75,75,75" href="left.html"> + <area shape="circle" coords="275,75,75" href="right.html"> +</map> +<img usemap="#primary" src="https://placehold.it/350x150" alt="350 x 150 pic"> +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{ EmbedLiveSample('Examples', '350', '166', '', 'Web/HTML/Element/map') }}</p> + +<h3 id="Expected_live_example_output" name="Expected_live_example_output">想定されるライブ例の結果</h3> + +<p>上の live example は、(キーボードの Tab キーを使用すると) 以下の画像のようになるはずです:</p> + +<p><em><code>left.html</code> へのリンク:</em><br> + <img alt="" src="https://mdn.mozillademos.org/files/14595/Screen%20Shot%202017-02-02%20at%2010.48.40%20PM.png" style="height: 156px; width: 356px;"></p> + +<p><em><code>right.html</code> へのリンク</em><br> + <img alt="" src="https://mdn.mozillademos.org/files/14597/Screen%20Shot%202017-02-02%20at%2010.49.04%20PM.png" style="height: 157px; width: 355px;"></p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-map-element', '<map>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics-embedded-content.html#the-map-element', '<map>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '<map>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.map")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("a")}}</li> + <li>{{HTMLElement("area")}}</li> +</ul> diff --git a/files/ja/web/html/element/mark/index.html b/files/ja/web/html/element/mark/index.html new file mode 100644 index 0000000000..8e1737fca6 --- /dev/null +++ b/files/ja/web/html/element/mark/index.html @@ -0,0 +1,175 @@ +--- +title: '<mark>: 文字列マーク要素' +slug: Web/HTML/Element/mark +tags: + - HTML + - HTML 文字レベルの意味付け + - HTML5 + - 'HTML:フローコンテンツ' + - 'HTML:知覚可能コンテンツ' + - 'HTML:記述コンテンツ' + - Reference + - ウェブ + - マーク + - 強調 + - 要素 +translation_of: Web/HTML/Element/mark +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の文字列マーク要素</strong> (<strong><code><mark></code></strong>) は、周囲の文脈の中でマークを付けた部分の関連性や重要性のために、参照や記述の目的で目立たせたり強調したりする文字列を表します。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/mark.html", "tabbed-standard")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>以外の属性はありません。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<p><code><mark></code> のよくある利用方法は以下のようなものです。</p> + +<ul> + <li>引用 ({{HTMLElement("q")}}) またはブロック引用 ({{HTMLElement("blockquote")}}) の中で使用される場合は、ふつう原文で特にマークされていなくても特別な関心事となる文字列、または原文の筆者が特に重要だと考えていなかったことでも、特別に精査が必要な部分を示します。本の中で興味のある部分が見つかったときに、蛍光ペンを使ってマークするようなものだと考えてください。</li> + <li>それ以外に、 <code><mark></code> はユーザーの現在の行動に関する文書中の部分を示します。これは例えば、検索操作で検索された語を示す場合などに使用されます。</li> + <li><code><mark></code> を (ソースコードなどの) 構文の強調には使用しないで下さい。{{HTMLElement("span")}} 要素とそれに適用する適切な CSS を使用してください。</li> +</ul> + +<div class="note"> +<p><code><mark></code> 要素と {{HTMLElement("strong")}} 要素を混同しないよう注意してください。 <code><mark></code> は<em>関連性</em>のあるコンテンツを表すために使用されますが、 <code><strong></code> は<em>重要性</em>のある文字列の区間を表します。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Marking_text_of_interest" name="Marking_text_of_interest">関心のある文字列のマーク</h3> + +<p>最初の例では <code><mark></code> 要素を使用して、引用の中でユーザーに特定の関心を引く部分の文字列をマークしています。</p> + +<pre class="brush: html notranslate"><blockquote> + It is a period of civil war. Rebel spaceships, striking from a + hidden base, have won their first victory against the evil + Galactic Empire. During the battle, <mark>Rebel spies managed + to steal secret plans</mark> to the Empire’s ultimate weapon, + the DEATH STAR, an armored space station with enough power to + destroy an entire planet. +</blockquote></pre> + +<p>出力結果は以下のようになります。</p> + +<p>{{EmbedLiveSample("Marking_text_of_interest", 650, 130)}}</p> + +<h3 id="Identifying_context-sensitive_passages" name="Identifying_context-sensitive_passages">文脈に依存する部分の識別</h3> + +<p>この例では <code><mark></code> を使用して一節の中の検索結果をマークしています。</p> + +<pre class="brush: html notranslate"><p>It is a dark time for the Rebellion. Although the Death +Star has been destroyed, <mark class="match">Imperial</mark> +troops have driven the Rebel forces from their hidden base and +pursued them across the galaxy.</p> + +<p>Evading the dreaded <mark class="match">Imperial</mark> +Starfleet, a group of freedom fighters led by Luke Skywalker +has established a new secret base on the remote ice world of +Hoth.</p></pre> + +<p>検索結果に対する <code><mark></code> の使用を他の使い方と区別しやすくするように、この例ではそれぞれの一致部分に <code>"match"</code> カスタムクラスを適用しています。</p> + +<p>結果は以下のようになります。</p> + +<p>{{EmbedLiveSample("Identifying_context-sensitive_passages", 650, 130)}}</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> + +<p><code>mark</code> 要素が存在することは、多くの読み上げ技術の既定の設定ではアナウンスされません。 CSS の {{cssxref("::before")}} 及び {{cssxref("::after")}} 擬似要素と共に {{cssxref("content")}} プロパティを使うことでアナウンスさせることができます。</p> + +<pre class="brush: css notranslate">mark::before, +mark::after { + clip-path: inset(100%); + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +mark::before { + content: " [強調開始] "; +} + +mark::after { + content: " [強調終了] "; +} +</pre> + +<p>読み上げソフトを使用する人によっては、特に冗長になるコンテンツのアナウンスを意図的に無効にしていることがあります。このため、この手法を悪用しないようにすることは重要であり、コンテンツが強調されていることを知らないと理解に影響するような場面でのみ使用するようにしてください。</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">Short note on making your mark (more accessible) | The Paciello Group</a></li> + <li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html">Tweaking Text Level Styles | Adrian Roselli</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-mark-element', '<mark>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-mark-element', '<mark>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.mark")}}</p> diff --git a/files/ja/web/html/element/marquee/index.html b/files/ja/web/html/element/marquee/index.html new file mode 100644 index 0000000000..622a57da0e --- /dev/null +++ b/files/ja/web/html/element/marquee/index.html @@ -0,0 +1,121 @@ +--- +title: '<marquee>: マーキー要素 (廃止)' +slug: Web/HTML/Element/marquee +tags: + - Element + - HTML + - Obsolete + - Reference + - Web + - marquee +translation_of: Web/HTML/Element/marquee +--- +<div>{{Obsolete_header}}</div> + +<p>HTML の <code><marquee></code> 要素はテキストがスクロールする領域を挿入します。要素の属性を使用して、テキストがコンテンツ領域の端に達したときにどうするかを制御できます。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{DOMxRef("HTMLMarqueeElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<dl> + <dt>{{htmlattrdef("behavior")}}</dt> + <dd>marquee 要素内でのテキストのスクロール方法を <code>scroll</code>、 <code>slide</code>、<code>alternate</code> の内の何れかのキーワードで指定します。指定を省略した場合は、初期値の <code>scroll</code> が適用されます。</dd> + <dt>{{htmlattrdef("bgcolor")}}</dt> + <dd>背景色を、色名もしくは HEX カラーコードで指定します。</dd> + <dt>{{htmlattrdef("direction")}}</dt> + <dd>marquee 要素内でのテキストのスクロール方向を <code>left</code>、 <code>right</code>、 <code>up</code>、 <code>down</code> の内の何れかのキーワードで指定します。初期値は <code>left</code> です。</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>スクロール範囲の高さを、ピクセル値かパーセント値で指定します。</dd> + <dt>{{htmlattrdef("hspace")}}</dt> + <dd>水平方向のマージンを指定します。</dd> + <dt>{{htmlattrdef("loop")}}</dt> + <dd>テキストのスクロール回数を指定します。初期値は −1 であり、これはスクロール回数を制限せず、恒久的にスクロールを続ける指定です。</dd> + <dt>{{htmlattrdef("scrollamount")}}</dt> + <dd>インターバル内での、テキストの移動ピクセル数を指定します。初期値は 6 です。</dd> + <dt>{{htmlattrdef("scrolldelay")}}</dt> + <dd>スクロール動作のインターバルをミリ秒で指定します。初期値は 85 です。<code>truespeed</code> 属性が指定されていない場合は 60 が最下限であり、これ以下の値は 60 として解釈されます。</dd> + <dt>{{htmlattrdef("truespeed")}}</dt> + <dd>デフォルトでは、<code>scrolldelay</code> で 60 を下回る値は無視します。<code>truespeed</code> を指定すると、それらの値が無視されません。</dd> + <dt>{{htmlattrdef("vspace")}}</dt> + <dd>垂直方向のマージンをピクセル値かパーセント値で指定します。</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>スクロール範囲の幅をピクセル値かパーセント値で指定します。</dd> +</dl> + +<h2 id="Event_handlers" name="Event_handlers">イベントハンドラー</h2> + +<dl> + <dt>{{htmlattrdef("onbounce")}}</dt> + <dd>スクロール範囲の終端に達した時に発火するイベントハンドラ。behavior 属性の値に <code>alternate</code> が指定されている場合のみ発火します。</dd> + <dt>{{htmlattrdef("onfinish")}}</dt> + <dd>loop 属性で指定された回数のループが終了した時に発火するイベントハンドラ。loop 属性に 1 以上の値が指定されている場合にのみ発火します。</dd> + <dt>{{htmlattrdef("onstart")}}</dt> + <dd>marquee がスクロールを開始した時に発火するイベントハンドラです。</dd> +</dl> + +<h2 id="Methods" name="Methods">メソッド</h2> + +<dl> + <dt><code>start()</code></dt> + <dd>marquee のスクロールの開始</dd> + <dt><code>stop()</code></dt> + <dd>marquee のスクロールの停止</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html notranslate"><marquee>This text will scroll from right to left</marquee> + +<marquee direction="up">This text will scroll from bottom to top</marquee> + +<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"> + <marquee behavior="alternate"> + This text will bounce + </marquee> +</marquee></pre> + +<p>{{EmbedLiveSample("Examples", 600, 450)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'obsolete.html#the-marquee-element-2', '<marquee>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>CSS の方が望ましいため廃止しましたが、後方互換性のため期待する動作を定義しています。ただし CSS のマーキー機能の開発は<a href="https://www.w3.org/TR/css3-marquee/">放棄されました</a>。</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'obsolete.html#the-marquee-element-0', '<marquee>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>CSS の方が望ましいため廃止しましたが、後方互換性のため期待する動作を定義しています。ただし CSS のマーキー機能の開発は<a href="https://www.w3.org/TR/css3-marquee/">放棄されました</a>。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.elements.marquee")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{DOMxRef("HTMLMarqueeElement")}}</li> +</ul> diff --git a/files/ja/web/html/element/menu/index.html b/files/ja/web/html/element/menu/index.html new file mode 100644 index 0000000000..815207ede2 --- /dev/null +++ b/files/ja/web/html/element/menu/index.html @@ -0,0 +1,216 @@ +--- +title: <menu> +slug: Web/HTML/Element/menu +tags: + - HTML + - HTML 対話型コンテンツ + - 'HTML:フローコンテンツ' + - 'HTML:知覚可能コンテンツ' + - Reference + - Web + - ウェブ + - サイトナビゲーション + - メニュー + - ユーザーインターフェイス + - 要素 +translation_of: Web/HTML/Element/menu +--- +<div>{{HTMLRef}}{{SeeCompatTable}}</div> + +<p><strong>HTML の <code><menu></code> 要素</strong>は、ユーザーが実行またはアクティブ化可能なコマンドのグループを表します。これはスクリーンの上部にあるリストメニューや、ボタンを押したときにボタンの下部に現れるような<a href="/en-US/docs/Web/HTML/Element/menu#Context_menu">コンテキストメニュー</a>を含みます。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td> + <p><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>。要素の子が1個以上の {{HTMLElement("li")}} 要素を含んでいる場合は<a href="/ja/docs/Web/Guide/HTML/Content_categories#Palpable_content">知覚可能コンテンツ</a>。</p> + </td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td> + <p>要素が<em>リストメニュー</em>状態である場合: <a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>または0個以上の {{HTMLElement("li")}}, {{HTMLElement("script")}}, {{HTMLElement("template")}}。 (<em>リストメニュー</em>は、親要素が<em>コンテキストメニュー</em>状態の {{HTMLElement("menu")}} でない場合の既定の状態です。)</p> + + <p>要素が<em>コンテキストメニュー</em>状態である場合は、任意の順序で、0個以上の {{HTMLElement("menu")}} (コンテキストメニュー状態に限る), {{HTMLElement("menuitem")}}, {{HTMLElement("hr")}}, {{HTMLElement("script")}}, {{HTMLElement("template")}}。</p> + </td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{No_Tag_Omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{DOMxRef("HTMLMenuElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{HTMLAttrDef("label")}} {{Deprecated_inline}}</dt> + <dd>ユーザーに対して表示する、メニューの名称です。入れ子のメニューで、サブメニューへアクセスできるようにするためにラベルを与えます。親要素が<em>コンテキストメニュー</em>状態の {{HTMLElement("menu")}} である場合に限り、必須です。</dd> + <dt>{{HTMLAttrDef("type")}}</dt> + <dd>この属性は定義済みのメニューの種類を示すものであり、以下2つの値のいずれかを指定します。 + <ul> + <li><code>context</code> {{Deprecated_inline}} : <em>ポップアップメニュー</em>状態であり、他の要素を経由してアクティブになるコマンドのグループを表します。 {{HTMLElement("button")}} 要素の {{HTMLAttrxRef("menu", "button")}} 属性や、 <a href="/ja/docs/Web/HTML/Global_attributes#attr-contextmenu"><code>contextmenu</code></a> 属性を持つ要素を経由することが考えられます。 <code><menu></code> 要素が別の menu 要素の入れ子になっているとき、親要素がすでにこの状態であれば、子要素で値が指定されていない場合の既定値になります。</li> + <li><code>toolbar</code>: <em>ツールバー</em>状態であり、ユーザーと対話するための一連のコマンドを表します。これは {{HTMLElement("li")}} が並んだ番号なしリストの形か、子要素に <code><li></code> を含まない場合は、利用できるコマンドを記述した<a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>です。属性が指定されていない場合の既定値です。</li> + </ul> + </dd> +</dl> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<p>{{HTMLElement("menu")}} 要素と {{HTMLElement("ul")}} 要素はともに順序なしリストの項目を表すものですが、 {{HTMLElement("ul")}} は主に項目の表示を目的とするのに対し、 {{HTMLElement("menu")}} 要素は操作を行うための対話型の項目を含めるためのものです。</p> + +<p>HTML メニューは、コンテキストメニュー（一般的に、別の要素を右クリックすると表示される）またはツールバーを作成するために使用できます。</p> + +<p><strong>{{anch("Context menu", "コンテキストメニュー")}}</strong>は、「メニューで選択可能な項目を表す {{HTMLElement("menuitem")}} 要素」「メニュー内のサブメニューを表す <code><menu></code> 要素」「メニューの内容をセクションに分けるセパレーター行を表す {{HTMLElement("hr")}} 要素」を包含する <code><menu></code> 要素で構成されます。. コンテキストメニューは、関連付ける要素の {{HTMLAttrxRef("contextmenu")}} 属性、または {{anch("Button menu", "ボタンでアクティブにするメニュー")}} であれば {{HTMLElement("button")}} 要素の {{HTMLAttrxRef("menu", "button")}} 属性を使用して、メニューをアクティブ化する要素に紐づけます。</p> + +<p><strong>{{anch("Toolbar", "ツールバーメニュー")}}</strong> は、以下のいずれかをコンテンツにした <code><menu></code> 要素で構成されます: {{HTMLElement("li")}} 要素で表した項目の順不同リスト (それぞれの項目が、ユーザーが利用できるコマンドやオプションを表します)。または、(<code><li></code> 要素がない場合) 使用なコマンドやオプションを表す <a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>。</p> + +<p>この要素は HTML4 で非推奨になりましたが、 HTML5.1 および HTML living standard で再導入されました。本ドキュメントは、現行の Firefox の実装について説明します。 HTML 5.1 によって、type 属性の 'list' が 'toolbar' に変わりました。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Context_menu" name="Context_menu">コンテキストメニュー</h3> + +<p>{{Deprecated_header}}</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html;"><!-- A <div> element with a context menu --> +<div contextmenu="popup-menu"> + Right-click to see the adjusted context menu +</div> + +<menu type="context" id="popup-menu"> + <menuitem>Action</menuitem> + <menuitem>Another action</menuitem> + <hr/> + <menuitem>Separated action</menuitem> +</menu> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css;">div { + width: 300px; + height: 80px; + background-color: lightgreen; +} +</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample("Context_menu", "100%", 80)}}</p> + +<h3 id="Menu_button" name="Menu_button">メニューボタン</h3> + +<div class="blockIndicator warning"> +<p>メニューボタンを実装しているブラウザーはまだありません。 <code><menu></code> 要素の {{HTMLAttrxRef("type", "menu")}} 属性は廃止されました。</p> +</div> + +<div class="blockIndicator warning"> +<p>{{HTMLElement("menuitem")}} 要素は廃止されました。</p> +</div> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html;"><!-- A button, which displays a menu when clicked. --> +<button type="menu" menu="popup-menu"> + Dropdown +</button> + +<menu type="context" id="popup-menu"> + <menuitem>Action</menuitem> + <menuitem>Another action</menuitem> + <hr/> + <menuitem>Separated action</menuitem> +</menu> +</pre> + +<h4 id="Result_2" name="Result_2">結果</h4> + +<p>{{EmbedLiveSample("Menu_button", "100%", 50)}}</p> + +<h3 id="Toolbar" name="Toolbar">ツールバー</h3> + +<div class="blockIndicator warning"> +<p>ツールバーメニューを実装しているブラウザーはまだありません。</p> +</div> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html;"><!-- A context menu for a simple editor, + - containing two menu buttons. --> +<menu type="toolbar"> + <li> + <button type="menu" menu="file-menu">File</button> + <menu type="context" id="file-menu"> + <menuitem label="New..." onclick="newFile()"> + <menuitem label="Save..." onclick="saveFile()"> + </menu> + </li> + <li> + <button type="menu" menu="edit-menu">Edit</button> + <menu type="context" id="edit-menu"> + <menuitem label="Cut..." onclick="cutEdit()"> + <menuitem label="Copy..." onclick="copyEdit()"> + <menuitem label="Paste..." onclick="pasteEdit()"> + </menu> + </li> +</menu> +</pre> + +<h4 id="Result_3" name="Result_3">結果</h4> + +<p>{{EmbedLiveSample("Toolbar", "100%", 100)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "grouping-content.html#the-menu-element", "<menu>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>最新のスナップショット {{SpecName("HTML5.3")}} から変更なし</td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "interactive-elements.html#the-menu-element", "<menu>")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.menu")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>他のリスト関連 HTML 要素: {{HTMLElement("ol")}}, {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("hr")}} および廃止済の {{HTMLElement("dir")}}</li> + <li><a href="/ja/docs/Web/HTML/Global_attributes#attr-contextmenu"><code>contextmenu</code></a> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>: {{HTMLAttrxRef("type", "menu", 'type="context"')}} がついた <code>menu</code> の <code>id</code> を参照するために使用することができる</li> +</ul> diff --git a/files/ja/web/html/element/menuitem/index.html b/files/ja/web/html/element/menuitem/index.html new file mode 100644 index 0000000000..535b84a4be --- /dev/null +++ b/files/ja/web/html/element/menuitem/index.html @@ -0,0 +1,155 @@ +--- +title: <menuitem> +slug: Web/HTML/Element/menuitem +tags: + - Deprecated + - Element + - HTML + - HTML5 + - Navigation + - Navigation Menus + - Reference + - UI + - UX + - User Interface + - User experience + - Web + - menuitem +translation_of: Web/HTML/Element/menuitem +--- +<p>{{HTMLRef}}{{Deprecated_Header("HTML5.2")}}</p> + +<p><strong>HTML の <code><menuitem></code> 要素</strong>は、ユーザーがポップアップメニューから実行できるコマンドをあらわします。メニューボタンに割り当てるメニューはもちろん、コンテキストメニューも含みます。</p> + +<p>コマンドはテキストのラベルと任意で外観を表すアイコン、あるいは代わりに別の要素で動作を定義する<em>インダイレクトコマンド</em>で明示的に定義できます。また、任意でコマンドにチェックボックスを含めたり、ラジオボタンを共有するグループにすることができます (インダイレクトコマンドのメニュー項目を <code><input type="checkbox"></code> および <code><input type="radio"></code> 要素に対して定義するとき、チェックボックスまたはラジオボタンを持ちます)。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td>なし。</td> + </tr> + <tr> + <th scope="row"><dfn>許可されている内容</dfn></th> + <td>なし。これは{{Glossary("空要素")}}です。</td> + </tr> + <tr> + <th scope="row"><dfn>タグの省略</dfn></th> + <td>開始タグが必須で、終了タグはあってはいけません。</td> + </tr> + <tr> + <th scope="row"><dfn>許可されている親要素</dfn></th> + <td><em>ポップアップメニュー</em>状態である {{HTMLElement("menu")}} 要素。({{HTMLElement("menu")}} 要素の <code>type</code> 属性を指定する場合は <code>popup</code> にしなければなりません。属性がない場合は {{HTMLElement("menu")}} の親要素自体が<em>ポップアップメニュー</em>状態の {{HTMLElement("menu")}} であることが必要です。)</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{DOMxRef("HTMLMenuItemElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。特に <code>title</code> 属性はコマンドの説明やヒントを出すのに使われます。</p> + +<dl> + <dt>{{HTMLAttrDef("checked")}}</dt> + <dd>コマンドが選択されているか否かを示す論理属性。<code>type</code> 属性が <code>checkbox</code> または <code>radio</code> のときのみ使われます。</dd> + <dt>{{HTMLAttrDef("command")}}</dt> + <dd>別の要素の ID を指定して、間接的に実行するコマンドを示します。 <code>checked</code>, <code>disabled</code>, <code>icon</code>, <code>label</code>, <code>radiogroup</code>, <code>type</code> 属性も含むメニューアイテムで使用してはいけません。</dd> + <dt>{{HTMLAttrDef("default")}}</dt> + <dd>この論理属性は、メニューのサブジェクト要素 (<code>button</code> や <code>input</code> など) と同じコマンドを使用することを示します。</dd> + <dt>{{HTMLAttrDef("disabled")}}</dt> + <dd>現在の状態ではコマンドを使用できないことを示す論理属性です。<code>disabled</code> は <code>hidden</code> とは異なりますので注意してください。<code>disabled</code> 属性は、状態の変化によってコマンドが妥当になる状況で適切です。</dd> + <dt>{{HTMLAttrDef("icon")}}</dt> + <dd>コマンドを表す画像を提供するために、画像の URL を指定します。</dd> + <dt>{{HTMLAttrDef("label")}}</dt> + <dd>ユーザーに表示する、コマンドの名前です。<code>command</code> 属性を提供しない場合は必須です。</dd> + <dt>{{HTMLAttrDef("radiogroup")}}</dt> + <dd>この属性は、選択されたときにラジオボタンを切り替えるコマンドのグループの名前を指定します。<code>type</code> 属性が <code>radio</code> である場合に限り使用できます。</dd> + <dt>{{HTMLAttrDef("type")}}</dt> + <dd>この属性は、コマンドの種類を以下の 3 つの値のいずれかで示すことができます。 + <ul> + <li><code>command</code>: 関連付けられたアクションを持つ、通常のコマンド。値がない場合の既定値です。</li> + <li><code>checkbox</code>: 2 つの異なる状態を切り替えできるコマンドを表します。</li> + <li><code>radio</code>: ラジオボタンで切り替え可能なコマンドのグループから 1 つを選択します。</li> + </ul> + </dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html; notranslate"><!-- A <div> element with a context menu --> +<div contextmenu="popup-menu"> + Right-click to see the adjusted context menu +</div> + +<menu type="context" id="popup-menu"> + <menuitem type="checkbox" checked>Checkbox</menuitem> + <hr> + <menuitem type="command" label="This command does nothing" icon="https://developer.cdn.mozilla.net/static/img/favicon144.png"> + Commands don't render their contents. + </menuitem> + <menuitem type="command" label="This command has javascript" onclick="alert('command clicked')"> + Commands don't render their contents. + </menuitem> + <hr> + <menuitem type="radio" radiogroup="group1">Radio Button 1</menuitem> + <menuitem type="radio" radiogroup="group1">Radio Button 2</menuitem> +</menu> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">div { + width: 300px; + height: 80px; + background-color: lightgreen; +} +</pre> + +<h3 id="Result" name="Result">表示結果</h3> + +<p>{{EmbedLiveSample("Example", '100%', 80)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML5.2", "obsolete.html#elementdef-menuitem", "<menuitem>")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>{{SpecName("HTML WHATWG")}} のスナップショット、廃止になった</td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "interactive-elements.html#the-menuitem-element", "<menuitem>")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>{{SpecName("HTML WHATWG")}} のスナップショット、初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.menuitem")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="https://hacks.mozilla.org/2011/11/html5-context-menus-in-firefox-screencast-and-code/">HTML5 context menus in Firefox (Screencast and Code)</a></li> +</ul> diff --git a/files/ja/web/html/element/meta/index.html b/files/ja/web/html/element/meta/index.html new file mode 100644 index 0000000000..667a3eb42b --- /dev/null +++ b/files/ja/web/html/element/meta/index.html @@ -0,0 +1,475 @@ +--- +title: '<meta>: 文書レベルメタデータ要素' +slug: Web/HTML/Element/meta +tags: + - HTML + - HTML マイクロデータ + - HTML 文書メタデータ + - 'HTML:フローコンテンツ' + - 'HTML:メタデータコンテンツ' + - 'HTML:記述コンテンツ' + - Reference + - ウェブ + - メタデータ + - リファレンス + - 文書 + - 要素 +translation_of: Web/HTML/Element/meta +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><meta></code> 要素</strong>は、他のメタ関連要素 ({{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, {{HTMLElement("title")}}) で表すことができない任意の{{Glossary("Metadata","メタデータ")}}を提示します。</p> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td>メタデータコンテンツ。 {{htmlattrxref("itemprop")}} 属性がある場合は<a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>および<a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>。</td> + </tr> + <tr> + <th>許可されている内容</th> + <td>なし。これは{{Glossary("empty element", "空要素")}}です。</td> + </tr> + <tr> + <th>タグの省略</th> + <td>空要素であるため開始タグは必須であり、終了タグは置いてはいけません。</td> + </tr> + <tr> + <th>許可されている親要素</th> + <td><code><meta charset></code> および <code><meta http-equiv></code>: {{HTMLElement("head")}} 要素。{{htmlattrxref("http-equiv", "meta")}} がエンコーディング宣言ではない場合は、{{HTMLElement("head")}} 要素内にある {{HTMLElement("noscript")}} 要素の内部にも配置できます。</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>なし</td> + </tr> + <tr> + <th>DOM インターフェイス</th> + <td>{{domxref("HTMLMetaElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">グローバル属性</a>を持ちます。</p> + +<div class="note"> +<p><strong>メモ:</strong> {{htmlattrxref("name", "meta")}} 属性は {{HTMLElement("meta")}} 要素において特別な意味を持ちます。また、 {{htmlattrxref("itemprop")}} 属性は、 <code><meta></code> 要素にすでに {{htmlattrxref("name", "meta")}}, {{htmlattrxref("http-equiv", "meta")}}, {{htmlattrxref("charset", "meta")}} のいずれかがある場合は設定してはいけません。</p> +</div> + +<dl> + <dt>{{htmlattrdef("charset")}}</dt> + <dd>この属性は、ページで使用している文字エンコーディングを宣言します。この属性は <a class="external" href="https://www.iana.org/assignments/character-sets">文字エンコーディングの標準 IANA MIME name</a> のひとつであることが必要です。標準仕様では特定の文字エンコーディングを要求していませんが、以下の推奨事項があります。 + <ul> + <li><a href="/ja/docs/Glossary/UTF-8"><code>UTF-8</code></a> を使うことを強く推奨します。</li> + <li>セキュリティ上のリスクを防ぐために、 ASCII との互換性がないエンコーディングを使用するべきではありません。その様な文字コードに対応していないブラウザーでは、有害なコンテンツを HTML として解釈する可能性があります。該当するものは、 <code>JIS_C6226-1983</code>, <code>JIS_X0212-1990</code>, <code>HZ-GB-2312</code>, <code>JOHAB</code>, ISO-2022 ファミリー, EBCDIC ファミリーなどです</li> + </ul> + + <div class="note"> + <p><strong>メモ:</strong> ASCII と互換性がないエンコーディングとは、8ビットのコードポイント <code>0x20</code> から <code>0x7E</code> が Unicode のコードポイント <code>0x0020</code> から <code>0x007E</code> に対応していないエンコーディングです。</p> + </div> + + <div class="warning"> + <ul> + <li><code>CESU-8</code>, <code>UTF-7</code>, <code>BOCU-1</code>, <code>SCSU</code> を使用しては<strong>いけません</strong>。これらのエンコーディングで<a href="/ja/docs/Glossary/Cross-site_scripting">クロスサイトスクリプティング</a>攻撃が実証されています。</li> + <li><code>UTF-32</code> を使用すべきではありません。これは、 HTML5 のエンコーディングアルゴリズムで <code>UTF-16</code> と区別できないものがあるからです。</li> + </ul> + </div> + + <div class="note"><strong>メモ:</strong> + + <ul> + <li>文字化けやセキュリティホールの発生を避けるため、宣言した文字エンコーディングはページを保存した文字エンコーディングと一致しなければなりません。</li> + <li>エンコーディングを宣言する {{HTMLElement("meta")}} 要素は {{HTMLElement("head")}} 要素の内部かつ HTML の<strong>始めから 1024 バイト以内</strong>に配置しなければなりません。これは、ページの文字集合を選択するまでに始めの部分しか確認しないブラウザーがあるためです。</li> + <li>この {{HTMLElement("meta")}} 要素はブラウザーが提供する、ページの <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html#encoding-sniffing-algorithm" title="Algorithm charset page">ページの文字セットを判断するアルゴリズム</a> の一部でしかありません。特に、HTTP の {{HTTPHeader("Content-Type")}} ヘッダーや{{Glossary("Byte-Order Mark","バイトオーダーマーク")}}はこの要素より優先します。</li> + <li>この属性を使用して文字エンコーディングを定義することを強く推奨します。ページで文字エンコーディングを定義しない場合は <a class="external" href="https://code.google.com/p/doctype-mirror/wiki/ArticleUtf7"><code>UTF-7</code> fallback cross-scripting technique</a> のような、ページの利用者を攻撃するクロスサイトスクリプティング手法が実現する可能性があります。</li> + <li><code>charset</code> 属性を持つ {{HTMLElement("meta")}} 要素は、 HTML5 より前の <code><meta http-equiv="Content-Type" content="text/html; charset=<em>IANAcharset</em>"></code> (<em><code>IANAcharset</code></em> は、同様の {{htmlattrxref("charset", "meta")}} 属性の値に対応します) と同義です。この構文はまだ許容されていますが、今後は推奨されません。</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("content")}}</dt> + <dd>この属性は状況に応じて、{{htmlattrxref("http-equiv", "meta")}} 属性または {{htmlattrxref("name", "meta")}} 属性に関連付けられた値を持ちます。</dd> + <dt>{{htmlattrdef("http-equiv")}}</dt> + <dd>プラグマディレクティブを定義します。属性名が <code><strong>http-equiv</strong>(alent)</code> なのは、利用できる値のすべてが特定の HTTP ヘッダーの名前だからです。 + <ul> + <li><code>content-language</code> {{obsolete_inline}}<br> + ページの既定の言語を定義します。これはすべての要素の <a href="/ja/docs/Web/HTML/Global_attributes/lang">lang</a> 属性に置き換えられました。 + <div class="warning"> + <p><strong>警告:</strong> この値は廃止されたため、使用しないでください。 {{HTMLElement("html")}} 要素で <code>lang</code> 属性を使用することを推奨します。</p> + </div> + </li> + <li><code>content-security-policy</code><br> + この値により、ページ作者がページの<a href="/ja/docs/Web/Security/CSP/CSP_policy_directives">コンテンツポリシー</a>を定義できます。いくつかの例外を除き、ポリシーはサーバーオリジンやスクリプトのエンドポイントの指定に関与します。これは、クロスサイトスクリプティング攻撃の対策になります。</li> + <li><code>content-type</code> {{obsolete_inline}}<br> + 文書の <a href="/ja/docs/Glossary/MIME_type">MIME type</a> を定義するもので、後に文字エンコーディングの定義が続きます。これは HTTP の <code>content-type</code> エンティティヘッダーフィールドと同じ構文に従いますが、 HTML ページ内にあるため <code>text/html</code> を除くほとんどの値は使用できません。従って、この <code>content</code> として有効な構文は文字列 '<code>text/html</code>' に、 '<code>; charset=<em>IANAcharset</em></code> という構文による文字集合を続けたものになります。 <code>IANAcharset</code> は、<a class="external" href="https://www.iana.org/assignments/character-sets">IANA で定義</a> されている文字集合の <em>preferred MIME name</em> です。 + <div class="warning"> + <p><strong>警告:</strong> この値は廃止されたので使用しないでください。 {{HTMLElement("meta")}} 要素の {{htmlattrxref("charset", "meta")}} 属性を使用してください。</p> + </div> + + <div class="note"> + <p><strong>メモ:</strong> XHTML や HTML5 の XHTML シリアライズにおいて、 {{HTMLElement("meta")}} は文書の型を変更できないので、 <code><meta></code> の MIME 型に XHTML の MIME 型を設定しないでください。</p> + </div> + </li> + <li><code>refresh</code><br> + これは以下の指示をします。 + <ul> + <li>{{htmlattrxref("content", "meta")}} 属性に正の整数が1つだけ含まれている場合は、ページを再読み込みするまでの秒数。</li> + <li>{{htmlattrxref("content", "meta")}} 属性に正の整数と、その後に文字列 '<code>;url=</code>' と有効な URL がある場合は、別のページにリダイレクトするまでの秒数。</li> + </ul> + </li> + <li><code>set-cookie</code> {{non-standard_inline}} {{obsolete_inline}}<br> + ページの <a href="/ja/docs/cookie">Cookie</a> を定義します。属性の値は <a class="external" href="https://tools.ietf.org/html/draft-ietf-httpstate-cookie-14">IETF の HTTP Cookie 仕様書</a>で定義している構文に従わなければなりません。 + <div class="warning"> + <p><strong>警告:</strong> この方法は廃止されたため、使用しないでください。代わりに HTTP ヘッダーの {{HTTPHeader("Set-Cookie")}} を使用してください。すでに標準から削除され、すでに <a href="https://www.fxsitecompat.dev/en-CA/docs/2019/setting-cookies-with-meta-http-equiv-is-no-longer-allowed/">Firefox 68</a> および <a href="https://www.chromestatus.com/feature/6170540112871424">Chrome 65</a> のどちらも対応していません。</p> + </div> + </li> + </ul> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd> + <p>この属性は、文書レベルのメタデータの名前を定義します。 {{htmlattrxref("itemprop")}}, {{htmlattrxref("http-equiv", "meta")}}, {{htmlattrxref("charset", "meta")}} 属性のいずれかが設定されている場合は設定するべきではありません。</p> + + <p>このメタデータの名前は、 {{htmlattrxref("content", "meta")}} 属性が持つ値と関連づけられます。 name 属性で使用できる値には以下のものがあります。</p> + + <ul> + <li><code>application-name</code> は、ウェブページで実行するアプリケーションの名前を定義します。 + + <div class="note"><strong>メモ:</strong> + + <ul> + <li>ブラウザーは、これをアプリケーションの識別に使用することがあります。これは {{HTMLElement("title")}} 要素とは異なります。title 要素もアプリケーション名を持ちますが、文書の名前や状態といった特別な情報も含むことがあります。</li> + <li>単純なウェブページで application-name を定義するべきではありません。</li> + </ul> + </div> + </li> + <li><code>author</code> は、文書の作者名を定義します。</li> + <li><code>description</code> は、ページのコンテンツに関する簡潔で正確な概要を保持します。 Firefox や Opera など一部のブラウザーは、ページをブックマークに追加した際の既定の説明文として使用します。</li> + <li><code>generator</code> は、ページを生成したソフトウェアの識別名を定義します。</li> + <li><code>keywords</code> は、ページのコンテンツに関連する単語をカンマ区切りの文字列で保持します。</li> + <li><code>referrer</code> {{experimental_inline}} は、この文書からリクエストを送信する場合に HTTP の {{HTTPHeader("Referer")}} ヘッダーへ付加する内容を制御します。 + <table class="standard-table"> + <caption><code><meta name="referrer"></code> の <code>content</code> 属性の値</caption> + <tbody> + <tr> + <td><code>no-referrer</code></td> + <td>HTTP の <code>Referer</code> ヘッダーを送信しません。</td> + </tr> + <tr> + <td><code>origin</code></td> + <td>文書の<a href="/ja/docs/Glossary/Origin">オリジン</a>を送信します。</td> + </tr> + <tr> + <td><code>no-referrer-when-downgrade</code></td> + <td>現在のページと同等の安全性の URL (https→https) にはリファラーとして<a href="/ja/docs/Glossary/Origin">オリジン</a>を送信しますが、安全性が低い URL (https→http) には送信しません。これは既定の動作です。</td> + </tr> + <tr> + <td><code>origin-when-crossorigin</code></td> + <td>同一オリジンへのリクエストでは URL 全体（引数を除く）を送信しますが、他の場合は<a href="/ja/docs/Glossary/Origin">オリジン</a>のみ送信します。</td> + </tr> + <tr> + <td><code>same-origin</code></td> + <td><a href="https://developer.mozilla.org/ja/docs/Web/Security/Same-origin_policy">同一オリジン</a>にはリファラーを送信しますが、オリジン間リクエストにはリファラー情報を含めません。</td> + </tr> + <tr> + <td><code>strict-origin</code></td> + <td>安全性が同等とみられる宛先 (HTTPS->HTTPS) に対しては、リファラーとして文書のオリジンのみを送信しますが、安全性が劣る宛先 (HTTPS->HTTP) には送信しません。</td> + </tr> + <tr> + <td><code>strict-origin-when-cross-origin</code></td> + <td>文書と同一のオリジンへのリクエストを行う際には完全な URL を送信し、安全性が同等とみられる宛先 (HTTPS->HTTPS) に対しては、リファラーとして文書のオリジンのみを送信し、安全性が劣る宛先 (HTTPS->HTTP) にはヘッダーを送信しません。</td> + </tr> + <tr> + <td><code>unsafe-URL</code></td> + <td>同一オリジンおよびオリジン間のリクエストで URL 全体 (パラメーターは除く) を送信します。</td> + </tr> + </tbody> + </table> + + <div class="note"> + <p><strong>メモ:</strong></p> + + <ul> + <li>ブラウザーによっては、 referrer に非推奨の値である <code>always</code>, <code>default</code>, <code>never</code> に対応していることがあります。</li> + <li>(<a href="/ja/docs/Web/API/Document/write"><code>document.write</code></a> や <a href="/ja/docs/Web/API/Node/appendChild"><code>appendChild</code></a> により) 動的に <code><meta name="referrer"></code> を挿入すると、リファラーを送信するかの決定権を持たないものになります。</li> + <li>競合するポリシーをいくつか定義すると、No-referrer ポリシーが適用されます。</li> + </ul> + </div> + </li> + <li><code>theme-color</code> はページや周囲のユーザーインターフェイスの表示をカスタマイズするために、ユーザーエージェントが使用する推奨される色を示します。 <code>content</code> 属性は有効な CSS の <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> が入ります。</li> + <li><code>color-scheme</code>: + <p>文書が互換性を持つ1つ以上の色系統を指定します。ブラウザーはこの情報をユーザーのブラウザーや端末の設定と組み合わせて、背景・前景からフォームコントロールやスクロールバーまですべての色を作成するために使用します。 <code><meta name="color-scheme"></code> の主な使用法としては、明色モードや暖色モードの互換性と優先順位を示すというものがあります。</p> + + <p><code>color-scheme</code> の {{htmlattrxref("content", "meta")}} プロパティの値は以下のうちの一つになります。</p> + + <dl> + <dt><code>normal</code></dt> + <dd>文書が色系統を意識しておらず、単に既定のカラーパレットを使用して描画されます。</dd> + <dt>[<code>light</code> | <code>dark</code>]+</dt> + <dd>文書が対応している1つ以上の色系統です。同じ色系統を2回以上指定した場合は、1回だけ指定した場合と同じ効果になります。複数の色系統を指定すると、最初の色系統が文書で推奨されますが、ユーザーの好みによって2つ目の色系統を使用することができます。</dd> + <dt><code>only light</code></dt> + <dd>この文書が明色モード、つまり明色の背景色に暗色の前景色の組み合わせ<em>のみ</em>に対応していることを示します。仕様書によれば、 <code>only dark</code> は暗色モードに対応していない文書に強制すると、内容が読めなくなる可能性があるので<em>有効ではありません</em>。主要なブラウザーはすべて、設定がない限りは明色モードです。</dd> + </dl> + + <p>例えば、文書で暗色モードを推奨しているが、明色モードでも機能する場合は次のようにします。</p> + + <pre class="brush: html"><meta name="color-scheme" content="dark light"></pre> + + <p>これは CSS の {{cssxref("color-scheme")}} プロパティでそれぞれの要素に推奨または受付可能な色系統を指定するのと同じ方法で文書レベルに動作します。スタイルを現在の色系統に合わせるには、 CSS メディア特性の {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} を使用します。</p> + </li> + </ul> + + <p>この属性では、 <a class="external" href="https://wiki.whatwg.org/wiki/MetaExtensions">WHATWG Wiki の MetaExtensions ページ</a>で定義されている拡張リストの値も使用できます。まだ正式には承諾されていませんが、一般的に使用される名前があります。</p> + + <ul> + <li><code>creator</code> は、文書の制作者を定義します。これは組織名にできることに注意してください。複数の制作者がいる場合は、 {{HTMLElement("meta")}} 要素を複数使用すべきです。</li> + <li><code>googlebot</code> は <code>robots</code> と同義ですが、 Google のインデックス作成クローラーである Googlebot だけが従います。</li> + <li><code>publisher</code> は、文書の発行者の名前を定義します。</li> + <li><code>robots</code> は、協力的なクローラーあるいは "robot" がページ上で行うべき動作を定義します。これは、以下のリストにある値をコンマ区切りで並べます: + <table class="standard-table"> + <caption><code><meta name="robots"></code> の content の値</caption> + <thead> + <tr> + <th scope="col">値</th> + <th scope="col">説明</th> + <th scope="col">使用対象</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>index</code></td> + <td>robot にページのインデックス作成を許可する (既定値)</td> + <td>すべて</td> + </tr> + <tr> + <td><code>noindex</code></td> + <td>ページのインデック作成を行わないことを robot に要求する</td> + <td>すべて</td> + </tr> + <tr> + <td><code>follow</code></td> + <td>robot がページ上のリンクをたどることを許可する (既定値)</td> + <td>すべて</td> + </tr> + <tr> + <td><code>nofollow</code></td> + <td>ページ上のリンクをたどらないことを robot に要求する</td> + <td>すべて</td> + </tr> + <tr> + <td><code>none</code></td> + <td><code>noindex, nofollow</code> と同義</td> + <td><a class="external" href="https://support.google.com/webmasters/answer/79812">Google</a></td> + </tr> + <tr> + <td><code>noodp</code></td> + <td><a class="external" href="https://www.dmoz-odp.org/">Open Directory Project</a> に説明文がある場合、検索結果のページでその説明文をサイトの説明として使用しないようにする</td> + <td> + <p><a class="external" href="https://support.google.com/webmasters/answer/35624#nodmoz">Google</a>, <a class="external" href="https://help.yahoo.com/kb/search-for-desktop/meta-tags-robotstxt-yahoo-search-sln2213.html#cont5">Yahoo</a>, <a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></p> + </td> + </tr> + <tr> + <td><code>noarchive</code></td> + <td>ページのコンテンツをキャッシュしないことを検索エンジンに要求する。</td> + <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>, <a class="external" href="https://help.yahoo.com/kb/search-for-desktop/SLN2213.html">Yahoo</a>, <a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td> + </tr> + <tr> + <td><code>nosnippet</code></td> + <td>検索結果のページでページの説明を表示しないようにする。</td> + <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>, <a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td> + </tr> + <tr> + <td><code>noimageindex</code></td> + <td>インデックス登録された画像の参照元としてページを表示しないように要求する</td> + <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a></td> + </tr> + <tr> + <td><code>nocache</code></td> + <td><code>noarchive</code> と同義</td> + <td><a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td> + </tr> + </tbody> + </table> + + <div class="note"><strong>メモ:</strong> + + <ul> + <li>協力的なロボットしかこれらの規則には従いません。電子メールを収集するようなものを寄せつけないようにするとは考えないでください。</li> + <li>これらの規則を読み取るため、ロボットがページにアクセスする必要があります。ネットワーク帯域の消費を抑えたい場合は、 <em>{{Glossary("robots.txt")}}</em> ファイルを使用してください。</li> + <li>インデックスからページを削除したい場合は、meta を <code>noindex</code> に変更すれば実現できますが、robot が再びページを訪れたときになります。<code>robots.txt</code> ファイルが再訪問を妨げないようにしてください。一部の検索エンジンは、ページを早急に削除するための開発者ツールを用意しています。</li> + <li><code>index</code> と <code>noindex</code>、または <code>follow</code> と <code>nofollow</code> など、互いに排他的な値があります。同時使用した場合の robot の動作は未定義であり、robot により大きく異なるかもしれません。</li> + <li>Google、Yahoo、Bing など一部の検索エンジンのクローラー robot は、 HTTP の <code>X-Robots-Tag</code> ヘッダーで同じ値をサポートしています。これにより、画像など HTML 文書以外でも規則を使用できます。</li> + </ul> + </div> + </li> + <li><code>slurp</code> は <code>robots</code> と同義ですが、 Yahoo 検索のクローラーである Slurp のみが従います。</li> + <li><code>viewport</code> は、{{glossary("viewport", "ビューポート")}}の初期サイズに関する助言を与えます。モバイル端末のみで使用されます。 + <table class="fullwidth-table"> + <caption><code><meta name="viewport"></code> の content の値</caption> + <thead> + <tr> + <th scope="col">値</th> + <th scope="col">設定可能な値</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>width</code></td> + <td>正の整数または文字列 <code>device-width</code></td> + <td>ウェブサイトを描画したいビューポートの幅をピクセル数で定義します。</td> + </tr> + <tr> + <td><code>height</code></td> + <td>正の整数またはテキスト <code>device-height</code></td> + <td>ビューポートの高さを定義します。どのブラウザーでも使用されていません。</td> + </tr> + <tr> + <td><code>initial-scale</code></td> + <td><code>0.0</code> から <code>10.0</code> までの、正の数値</td> + <td>デバイスの幅 (ポートレートモードでの <code>device-width</code> またはランドスケープモードでの <code>device-height</code>) とビューポートの寸法との比率を定義します。</td> + </tr> + <tr> + <td><code>maximum-scale</code></td> + <td><code>0.0</code> から <code>10.0</code> までの、正の数値</td> + <td>ズームの最大値を定義します。この値は <code>minimum-scale</code> と同じまたはより大きくしなければなりません。そうではないときの動作は未定義です。ブラウザーの設定でこの規則を無視できます。また、iOS 10 以降は既定で無視します。</td> + </tr> + <tr> + <td><code>minimum-scale</code></td> + <td><code>0.0</code> から <code>10.0</code> までの、正の数値</td> + <td>ズームの最小値を定義します。この値は <code>maximum-scale</code> と同じまたはより小さくしなければなりません。そうではないときの動作は未定義です。ブラウザーの設定でこの規則を無視できます。また、iOS 10 以降は既定で無視します。</td> + </tr> + <tr> + <td><code>user-scalable</code></td> + <td><code>yes</code> または <code>no</code></td> + <td><code>no</code> を設定すると、ユーザーはページのズームができなくなります。既定値は <code>yes</code> です。ブラウザーの設定でこの規則を無視できます。また、iOS 10 以降は既定で無視します。</td> + </tr> + </tbody> + </table> + + <table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#viewport-meta', '<meta name="viewport">')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Viewport META 要素について、非規範的な説明を掲載</td> + </tr> + </tbody> + </table> + + <div>{{cssxref("@viewport")}} もご覧ください。</div> + + <div class="note"><strong>メモ:</strong> + + <ul> + <li>この属性は標準化されていませんが、事実上優勢であるためほとんどのモバイルブラウザーで使用されています。</li> + <li>既定値は端末やブラウザーにより異なる可能性があります。</li> + <li>モバイル版 Firefox におけるこの宣言について詳しく知るには、<a href="/ja/docs/Mobile/Viewport_meta_tag" title="Mobile/Viewport meta tag">こちらの記事</a>をご覧ください。</li> + </ul> + </div> + </li> + </ul> + </dd> + <dt>{{htmlattrdef("scheme")}} {{obsolete_inline}}</dt> + <dd>この属性は、メタデータを説明するスキーマを定義します。スキーマは、フォーマットなど {{htmlattrxref("content", "meta")}} の値を正しく解釈するように導くコンテキストです。 + <div class="warning"> + <p><strong>メモ:</strong> この属性は廃止されたため使用しないでください。実際の使用例がなかったため、代替策はありません。</p> + </div> + </dd> +</dl> + +<h2 id="Notes" name="Notes">メモ</h2> + +<p>属性の組み合わせに応じて、メタデータの種類は以下のいずれかになります。</p> + +<ul> + <li>{{htmlattrxref("name", "meta")}} を設定すると、<em>文書レベルのメタデータ</em>になり、ページ全体に適用されます。</li> + <li>{{htmlattrxref("http-equiv", "meta")}} を設定すると、<em>プラグマディレクティブ</em>になります。どのようにウェブページが提供されるかについて、通常ウェブサーバーから与えられる情報です。</li> + <li>{{htmlattrxref("charset", "meta")}} を設定すると、<em>文字集合宣言</em>になります。ウェブページで使用する文字エンコーディングです。</li> + <li>{{htmlattrxref("itemprop")}} を設定すると、<em>ユーザー定義メタデータ</em>になります。ユーザー固有のメタデータの意味付けとして、ユーザーエージェントからは透過的になります。{{experimental_inline}}</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html"><meta charset="utf-8"> + +<!-- 3秒後にページをリダイレクト --> +<meta http-equiv="refresh" content="3;url=https://www.mozilla.org"> +</pre> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> + +<h3 id="Refreshing_content" name="Refreshing_content">コンテンツの更新</h3> + +<p><code>refresh</code> の値が設定されたページには、時間が短すぎるというリスクがあります。読み上げソフトのような支援技術を使用して操作している人は、全文を読むことができず、自動的にリダイレクトされる前のページの内容を理解できない可能性があります。いきなりで予告なしのページコンテンツの更新は、弱視の人々を惑わせる可能性もあります。</p> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_—_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN "WCAG を理解する ― ガイドライン 2.1 の解説"</a></li> + <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">MDN "WCAG を理解する ― ガイドライン 3.1 の解説"</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html">Understanding Success Criterion 2.2.1 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-postponed.html">Understanding Success Criterion 2.2.4 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-no-extreme-changes-context.html">Understanding Success Criterion 3.2.5 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h3 id="Viewport_scaling" name="Viewport_scaling">ビューポートの拡大縮小</h3> + +<p><code>user-scalable</code> の値を <code>no</code> に設定してズーム機能を無効にすると、弱視の人々がページのコンテンツを読んだり理解したりすることを妨げます。</p> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-meta', '<meta name="referrer">')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td><code><meta name="referrer"></code> の値やセマンティクスを定義</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-meta-element', '<meta>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td><code>itemprop</code> 属性を追加</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-meta-element', '<meta>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td><code>charset</code> 属性を追加</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.4.2', '<meta>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p>以下の情報は MDN の Github (<a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>) から取得したものです。</p> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<div>{{Compat("html.elements.meta")}}</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>他のメタデータを持つ要素: {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("link")}}, {{HTMLElement("style")}},{{HTMLElement("title")}}</li> +</ul> diff --git a/files/ja/web/html/element/meta/name/index.html b/files/ja/web/html/element/meta/name/index.html new file mode 100644 index 0000000000..ba8b717ea7 --- /dev/null +++ b/files/ja/web/html/element/meta/name/index.html @@ -0,0 +1,312 @@ +--- +title: 標準メタデータ名 +slug: Web/HTML/Element/meta/name +tags: + - Attribute + - HTML + - HTML document metadata + - Reference + - metadata +translation_of: Web/HTML/Element/meta/name +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">{{htmlelement("meta")}} 要素を使用して、文書のメタデータを名前と値の組み合わせで提供することができ、 {{htmlattrxref("name", "meta")}} 属性はメタデータ名を指定し、 {{htmlattrxref("content", "meta")}} 属性は値を指定します。</span></p> + +<h3 id="Standard_metadata_names_defined_in_the_HTML_specification" name="Standard_metadata_names_defined_in_the_HTML_specification">HTML 仕様書で定義されている標準メタデータ名</h3> + +<p>HTML 仕様書は、以下の一連の標準メタデータ名を定義しています。</p> + +<ul> + <li> + <p><code>application-name</code>: ウェブページで動作しているアプリケーションの名前です。</p> + + <div class="note"><strong>注:</strong> + + <ul> + <li>ブラウザーはアプリケーションを識別するためにこれを使用することがあります。これはふつうアプリケーション名が含まれるものの、文書名や状態などの情報も含まれる {{HTMLElement("title")}} 要素とは異なります。</li> + <li>単なるウェブサイトにはアプリケーション名を定義するべきではありません。</li> + </ul> + </div> + </li> + <li><code>author</code>: この文書の著者です。</li> + <li><code>description</code>: ページの内容を短く正確に要約したものです。 Firefox や Opera など一部のブラウザーは、これをブックマークされたページの既定の説明として使用します。</li> + <li><code>generator</code>: このページを生成したソフトウェアの識別子です。</li> + <li><code>keywords</code>: ページのコンテンツに関連する語句で、カンマ区切りです。</li> + <li><code>referrer</code>: この文書からリクエストを送信するための HTTP の {{httpheader("Referer")}} ヘッダーの内容です。 + <table class="standard-table"> + <caption><code><meta name="referrer"></code> の <code>content</code> 属性の値</caption> + <tbody> + <tr> + <td><code>no-referrer</code></td> + <td>HTTP の {{httpheader("Referer")}} ヘッダーを送信しません。</td> + </tr> + <tr> + <td><code>origin</code></td> + <td>文書の{{glossary("origin", "オリジン")}}を送信します。</td> + </tr> + <tr> + <td><code>no-referrer-when-downgrade</code></td> + <td>現在のページと同等の安全性の URL (HTTP(S)→HTTPS) にはリファラーとして URL 全体を送信しますが、安全性が低い URL (HTTPS→HTTP) には送信しません。これは既定の動作です。</td> + </tr> + <tr> + <td><code>origin-when-cross-origin</code></td> + <td>同一オリジンへのリクエストでは URL 全体 (引数を除く) を送信しますが、他の場合はオリジンのみ送信します。</td> + </tr> + <tr> + <td><code>same-origin</code></td> + <td>同一オリジンにはリファラーを送信しますが、オリジン間リクエストにはリファラーを含めません。</td> + </tr> + <tr> + <td><code>strict-origin</code></td> + <td>安全性が同等とみられる宛先 (HTTP(S)→HTTPS) に対しては、リファラーとして文書のオリジンのみを送信しますが、安全性が劣る宛先 (HTTPS→HTTP) には送信しません。</td> + </tr> + <tr> + <td><code>strict-origin-when-cross-origin</code></td> + <td>同一オリジンへのリクエストでは、 URL 全体 (引数を除く) を送信します。現在のページと安全性が同等であると見られる宛先 (HTTP(S)→HTTPS) にはオリジンを送信します。それ以外は、リファラーを送信しません。</td> + </tr> + <tr> + <td><code>unsafe-URL</code></td> + <td>同一オリジンまたはオリジン間リクエストで、 URL 全体 (引数を除く) を送信します。</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>注:</strong> + + <ul> + <li>Dynamically inserting <code><meta name="referrer"></code> (with {{domxref("Document.write", "document.write()")}} or {{domxref("Node.appendChild", "appendChild()")}}) makes the referrer behaviour unpredictable.</li> + <li>When several conflicting policies are defined, the <code>no-referrer</code> policy is applied.</li> + </ul> + </div> + </li> + <li><code><a href="/ja/docs/Web/HTML/Element/meta/name/theme-color">theme-color</a></code>: indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface. The <code>content</code> attribute contains a valid CSS {{cssxref("<color>")}}.</li> +</ul> + +<h3 id="Standard_metadata_names_defined_in_other_specifications" name="Standard_metadata_names_defined_in_other_specifications">他の仕様書で定義されている標準メタデータ名</h3> + +<p>The CSS Color Adjustment specification defines the following metadata name:</p> + +<ul> + <li> + <p><code>color-scheme</code>: specifies one or more color schemes with which the document is compatible.</p> + + <p>The browser will use this information in tandem with the user's browser or device settings to determine what colors to use for everything from background and foregrounds to form controls and scrollbars. The primary use for <code><meta name="color-scheme"></code> is to indicate compatibility with—and order of preference for—light and dark color modes.</p> + + <p>The value of the {{htmlattrxref("content", "meta")}} property for <code>color-scheme</code> may be one of the following:</p> + + <dl> + <dt><code>normal</code></dt> + <dd>The document is unaware of color schemes and should simply be rendered using the default color palette.</dd> + <dt>[<code>light</code> | <code>dark</code>]+</dt> + <dd>One or more color schemes supported by the document. Specifying the same color scheme more than once has the same effect as specifying it only once. Indicating multiple color schemes indicates that the first scheme is preferred by the document, but that the second specified scheme is acceptable if the user prefers it.</dd> + <dt><code>only light</code></dt> + <dd>Indicates that the document <em>only</em> supports light mode, with a light background and dark foreground colors. By specification, <code>only dark</code> <em>is not valid</em>, because forcing a document to render in dark mode when it isn't truly compatible with it can result in unreadable content; all major browsers default to light mode if not otherwise configured.</dd> + </dl> + + <p>For example, to indicate that a document prefers dark mode but does render functionally in light mode as well:</p> + + <pre class="brush: html notranslate"><meta name="color-scheme" content="dark light"></pre> + + <p>This works at the document level in the same way that the CSS {{cssxref("color-scheme")}} property lets individual elements specify their preferred and accepted color schemes. Your styles can adapt to the current color scheme using the {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} CSS media feature.</p> + </li> +</ul> + +<p>The CSS Device Adaptation specification defines the following metadata name:</p> + +<ul> + <li> + <p><code>viewport</code>: gives hints about the size of the initial size of the {{glossary("viewport")}}. Used by mobile devices only.</p> + + <table class="fullwidth-table"> + <caption>Values for the content of <code><meta name="viewport"></code></caption> + <thead> + <tr> + <th scope="col">値</th> + <th scope="col">Possible subvalues</th> + <th scope="col">解説</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>width</code></td> + <td>A positive integer number, or the text <code>device-width</code></td> + <td>Defines the pixel width of the viewport that you want the web site to be rendered at.</td> + </tr> + <tr> + <td><code>height</code></td> + <td>A positive integer, or the text <code>device-height</code></td> + <td>Defines the height of the viewport. Not used by any browser.</td> + </tr> + <tr> + <td><code>initial-scale</code></td> + <td>A positive number between <code>0.0</code> and <code>10.0</code></td> + <td>Defines the ratio between the device width (<code>device-width</code> in portrait mode or <code>device-height</code> in landscape mode) and the viewport size.</td> + </tr> + <tr> + <td><code>maximum-scale</code></td> + <td>A positive number between <code>0.0</code> and <code>10.0</code></td> + <td>Defines the maximum amount to zoom in. It must be greater or equal to the <code>minimum-scale</code> or the behaviour is undefined. Browser settings can ignore this rule and iOS10+ ignores it by default.</td> + </tr> + <tr> + <td><code>minimum-scale</code></td> + <td>A positive number between <code>0.0</code> and <code>10.0</code></td> + <td>Defines the minimum zoom level. It must be smaller or equal to the <code>maximum-scale</code> or the behaviour is undefined. Browser settings can ignore this rule and iOS10+ ignores it by default.</td> + </tr> + <tr> + <td><code>user-scalable</code></td> + <td><code>yes</code> or <code>no</code></td> + <td>If set to <code>no</code>, the user is not able to zoom in the webpage. The default is <code>yes</code>. Browser settings can ignore this rule, and iOS10+ ignores it by default.</td> + </tr> + <tr> + <td><code>viewport-fit</code></td> + <td><code>auto</code>, <code>contain</code> or <code>cover</code></td> + <td> + <p>The <code>auto</code> value doesn’t affect the initial layout viewport, and the whole web page is viewable.</p> + + <p>The <code>contain</code> value means that the viewport is scaled to fit the largest rectangle inscribed within the display.</p> + + <p>The <code>cover</code> value means that the viewport is scaled to fill the device display. It is highly recommended to make use of the <a href="/ja/docs/Web/CSS/env">safe area inset</a> variables to ensure that important content doesn't end up outside the display.</p> + </td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Notes:</strong> + + <ul> + <li>Though unstandardized, this declaration is respected by most mobile browsers due to de-facto dominance.</li> + <li>The default values may vary between devices and browsers.</li> + <li>To learn about this declaration in Firefox for Mobile, see <a href="/ja/docs/Mobile/Viewport_meta_tag" title="Mobile/Viewport meta tag">this article</a>.</li> + </ul> + </div> + + <h5 id="Accessibility_concerns_with_viewport_scaling" name="Accessibility_concerns_with_viewport_scaling">ビューポートの拡大縮小についてのアクセシビリティの考慮</h5> + + <div>Disabling zooming capabilities by setting <code>user-scalable</code> to a value of <code>no</code> prevents people experiencing low vision conditions from being able to read and understand page content.</div> + + <ul> + <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li> + </ul> + + <h5 id="See_also" name="See_also">関連情報</h5> + + <p>The <a href="/ja/docs/Web/CSS/@viewport"><code>@viewport</code></a> CSS at-rule.</p> + </li> +</ul> + +<h3 id="Other_metadata_names" name="Other_metadata_names">その他のメタデータ名</h3> + +<p>The <a class="external" href="https://wiki.whatwg.org/wiki/MetaExtensions">WHATWG Wiki MetaExtensions page</a> contains a large set of non-standard metadata names that have not been formally accepted yet; however, some of the names included there are already used quite commonly in practice — including the following:</p> + +<ul> + <li><code>creator</code>: the name of the creator of the document, such as an organization or institution. If there are more than one, several {{HTMLElement("meta")}} elements should be used.</li> + <li><code>googlebot</code>, a synonym of <code>robots</code>, is only followed by Googlebot (the indexing crawler for Google).</li> + <li><code>publisher</code>: the name of the document's publisher.</li> + <li><code>robots</code>: the behaviour that cooperative crawlers, or "robots", should use with the page. It is a comma-separated list of the values below: + <table class="standard-table"> + <caption>Values for the content of <code><meta name="robots"></code></caption> + <thead> + <tr> + <th scope="col">値</th> + <th scope="col">解説</th> + <th scope="col">Used by</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>index</code></td> + <td>Allows the robot to index the page (default).</td> + <td>All</td> + </tr> + <tr> + <td><code>noindex</code></td> + <td>Requests the robot to not index the page.</td> + <td>All</td> + </tr> + <tr> + <td><code>follow</code></td> + <td>Allows the robot to follow the links on the page (default).</td> + <td>All</td> + </tr> + <tr> + <td><code>nofollow</code></td> + <td>Requests the robot to not follow the links on the page.</td> + <td>All</td> + </tr> + <tr> + <td><code>all</code></td> + <td>Equivalent to <code>index, follow</code></td> + <td><a class="external" href="https://support.google.com/webmasters/answer/79812">Google</a></td> + </tr> + <tr> + <td><code>none</code></td> + <td>Equivalent to <code>noindex, nofollow</code></td> + <td><a class="external" href="https://support.google.com/webmasters/answer/79812">Google</a></td> + </tr> + <tr> + <td><code>noarchive</code></td> + <td>Requests the search engine not to cache the page content.</td> + <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>, <a class="external" href="https://help.yahoo.com/kb/search-for-desktop/SLN2213.html">Yahoo</a>, <a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td> + </tr> + <tr> + <td><code>nosnippet</code></td> + <td>Prevents displaying any description of the page in search engine results.</td> + <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>, <a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td> + </tr> + <tr> + <td><code>noimageindex</code></td> + <td>Requests this page not to appear as the referring page of an indexed image.</td> + <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a></td> + </tr> + <tr> + <td><code>nocache</code></td> + <td>Synonym of <code>noarchive</code>.</td> + <td><a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td> + </tr> + </tbody> + </table> + + <div class="note"><strong>Notes:</strong> + + <ul> + <li>Only cooperative robots follow these rules. Do not expect to prevent e-mail harvesters with them.</li> + <li>The robot still needs to access the page in order to read these rules. To prevent bandwidth consumption, use a <em>{{Glossary("robots.txt")}}</em> file.</li> + <li>If you want to remove a page, <code>noindex</code> will work, but only after the robot visits the page again. Ensure that the <code>robots.txt</code> file is not preventing revisits.</li> + <li>Some values are mutually exclusive, like <code>index</code> and <code>noindex</code>, or <code>follow</code> and <code>nofollow</code>. In these cases the robot's behaviour is undefined and may vary between them.</li> + <li>Some crawler robots, like Google, Yahoo and Bing, support the same values for the HTTP header <code>X-Robots-Tag</code>; this allows non-HTML documents like images to use these rules.</li> + </ul> + </div> + </li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#standard-metadata-names', 'standard metadata names')}}</td> + </tr> + <tr> + <td>{{SpecName('CSS Color Adjust', '#color-scheme-meta', 'the "color-scheme" metadata name')}}</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Device', '#viewport-meta', 'the "viewport" metadata name')}}</td> + </tr> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-meta', 'the "referrer" metadata name')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.meta.name")}}</p> diff --git a/files/ja/web/html/element/meter/index.html b/files/ja/web/html/element/meter/index.html new file mode 100644 index 0000000000..40f64645b3 --- /dev/null +++ b/files/ja/web/html/element/meter/index.html @@ -0,0 +1,147 @@ +--- +title: '<meter>: HTML メーター要素' +slug: Web/HTML/Element/meter +tags: + - Element + - HTML + - HTML forms + - HTML5 + - Reference + - Web +translation_of: Web/HTML/Element/meter +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><meter></code> 要素</strong>は、既知の範囲内のスカラー値、または小数値を表します。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/meter.html", "tabbed-shorter")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, ラベル付け可能コンテンツ, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>。ただし他の <code><meter></code> 要素の子孫要素として配置してはならない。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>許可されている <code>role</code> なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLMeterElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>他のすべての要素と同様に、この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を持ちます。</p> + +<dl> + <dt>{{htmlattrdef("value")}}</dt> + <dd>現在の数値。<code>min</code> 属性と <code>max</code> 属性が指定されている場合、これらの表す範囲内に収まる値でなくてはなりません。この <code>value</code> 属性が未定義、あるいは不正な値であった場合は、その値は <code>0</code> となります。指定されている値が <code>min</code> 属性と <code>max</code> 属性が示す範囲の範囲外の値である場合、その範囲の内のもっとも近い値が適用されます。 + <div class="note"><strong>注意:</strong> <code>value</code> 属性の値が <code>0</code> を下限、<code>1</code> を上限とするものでない限り、<code>min</code> 属性および <code>max</code> 属性で <code>value</code> 属性の下限および上限を定義しなくてはなりません。</div> + </dd> + <dt>{{htmlattrdef("min")}}</dt> + <dd>範囲全体の下限。 <code>max</code> 属性により上限が設定されている場合は、それより小さい値でなくてはなりません。未設定の場合、下限値は <code>0</code> となります。</dd> + <dt>{{htmlattrdef("max")}}</dt> + <dd>範囲全体の上限。 <code>min</code> 属性により下限が設定されている場合は、それより大きい値でなくてはなりません。未設定の場合、上限値は <code>1</code> となります。</dd> + <dt>{{htmlattrdef("low")}}</dt> + <dd>「低」とされる範囲全体の上限値。属性値は、<code>min</code> 属性の値より大きく、かつ <code>high</code> 属性および <code>max</code> 属性の値より小さいものでなくてはなりません (※これらが定義されている場合)。<code>low</code> が未定義、もしくはその値が <code>min</code> 属性の値より小さい場合、<code>low</code> の値は最小値と同じです。</dd> + <dt>{{htmlattrdef("high")}}</dt> + <dd>「高」とされる範囲全体の下限値。属性値は、<code>max</code> 属性の値より小さく、かつ <code>low</code> 属性や <code>min</code> 属性の値より大きいものでなくてはなりません (※これらが定義されている場合)。<code>high</code> 属性が未定義、もしくはその値が <code>max</code> 属性の値より大きい場合、<code>high</code> の値は最大値と同じです。</dd> + <dt>{{htmlattrdef("optimum")}}</dt> + <dd><strong>最適な数値の範囲</strong>を表します。<code>min</code> 属性と <code>max</code> 属性によって定義される範囲内の値でなくてはなりません。 <code>low</code> 属性と <code>high</code> 属性が指定されている場合、この属性の値を含む範囲が最適な数値の範囲とみなされます。例えば、値が <code>min</code> 属性と <code>low</code> 属性の間のいずれかであった場合、「低」の範囲が最適な数値となります。ブラウザーは optimum の値以下であるかどうかでメーターのバーの色を変更することがあります。</dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd><code><meter></code> 要素と関連付ける {{HTMLElement("form")}} 要素 (<em>フォームオーナー</em>) です。この属性の値は同じ文書内の <code><form></code> の {{htmlattrxref("id")}} である必要があります。この属性が設定されていなかった場合、その <code><meter></code> の祖先に <code><form></code> 要素があれば、それに関連付けられます。この属性は <code><meter></code> 要素がフォーム関連要素として使用されている場合、例えば対応する <a href="/ja/docs/Web/HTML/Element/input/number"><code><input type="number"></code></a> の範囲を表示するようなものでのみ使用されます。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Simple_example" name="Simple_example">シンプルな例</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><p>オーブンの温度: <meter min="200" max="500" + value="350">350 degrees</meter></p> +</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample("Simple_example", 300, 60)}}</p> + +<p>Google Chrome での表示結果は以下のようになります。</p> + +<p><img alt="meter1.png" class="default internal" src="/@api/deki/files/4940/=meter1.png"></p> + +<h3 id="High_and_Low_range_example" name="High_and_Low_range_example">「高」の範囲と「低」の範囲の使用例</h3> + +<p>この例では {{htmlattrxref("min", "meter")}} 属性が省略されています。よって、下限値は <code>0</code> となっています。</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><p>He got a <meter low="69" high="80" max="100" + value="84">B</meter> on the exam.</p> +</pre> + +<h4 id="Result_2" name="Result_2">結果</h4> + +<p>{{EmbedLiveSample("High_and_Low_range_example", 300, 60)}}</p> + +<p>Google Chrome では、 meter の結果は次のように見えます。</p> + +<p><img alt="meter2.png" class="default internal" src="/@api/deki/files/4941/=meter2.png"></p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-meter-element', '<meter>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-meter-element', '<meter>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.meter")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("progress")}}</li> +</ul> diff --git a/files/ja/web/html/element/multicol/index.html b/files/ja/web/html/element/multicol/index.html new file mode 100644 index 0000000000..9f6b50d3e1 --- /dev/null +++ b/files/ja/web/html/element/multicol/index.html @@ -0,0 +1,36 @@ +--- +title: '<multicol>: HTML 段組みレイアウト要素（廃止）' +slug: Web/HTML/Element/multicol +tags: + - Element + - HTML + - Non-standard + - Obsolete + - Reference + - 段組み +translation_of: Web/HTML/Element/multicol +--- +<div>{{HTMLRef}}{{non-standard_header}}{{obsolete_header}}</div> + +<p><span class="seoSummary"><strong>HTML の段組みレイアウト要素</strong> (<strong><code><multicol></code></strong>) は段組みレイアウトを実現するために設計された実験的な要素でしたが、使用しないでください。</span>これは支持されたことがなく、ほとんどの主要ブラウザーでは実装されていません。ここでは他の文書で見かけたときに警告するだけの目的で説明しています。</p> + +<div class="warning"> +<p><strong>使用しないでください！</strong>段組みレイアウトを実装するためであれば、 {{HTMLElement("div")}} のような普通の HTML 要素と <a href="/ja/docs/Web/CSS/CSS_Columns">CSS 段組みレイアウト</a>との組み合わせを使用してください。</p> +</div> + +<h2 id="Specifications" name="Specifications">仕様策定状況</h2> + +<p>なし。</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.elements.multicol")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/CSS/CSS_Columns">CSS 段組みレイアウト</a>: 段組みレイアウトを使用するための正しい技術</li> + <li><a href="/ja/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">CSS 段組みレイアウトの使用</a></li> +</ul> diff --git a/files/ja/web/html/element/nav/index.html b/files/ja/web/html/element/nav/index.html new file mode 100644 index 0000000000..8a36fc18f9 --- /dev/null +++ b/files/ja/web/html/element/nav/index.html @@ -0,0 +1,121 @@ +--- +title: '<nav>: ナビゲーションセクション要素' +slug: Web/HTML/Element/nav +tags: + - Element + - HTML + - HTML セクション + - 'HTML:フローコンテンツ' + - 'HTML:区分コンテンツ' + - 'HTML:知覚可能コンテンツ' + - Reference + - Sections + - Web + - nav + - ウェブ + - セクション + - ナビゲーション + - リファレンス + - リンク + - 要素 +translation_of: Web/HTML/Element/nav +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><nav></code> 要素</strong>は、現在の文書内の他の部分や他の文書へのナビゲーションリンクを提供するためのセクションを表します。ナビゲーションセクションの一般的な例としてメニュー、目次、索引などがあります。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/nav.html", "tabbed-standard")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>、<a href="/ja/docs/Web/HTML/Content_categories#Sectioning_content">区分コンテンツ</a>、知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみがあります。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<ul> + <li>すべてのリンクを <code><nav></code> 要素に入れる必要はありません。 <code><nav></code> はナビゲーションリンクの主要なブロックのみに用います。 {{HTMLElement("footer")}} にもよくリンクのリストが設置されますが、 {{HTMLElement("nav")}} 要素の中に入れる必要はありません。</li> + <li>{{HTMLElement("nav")}} 要素は文書内に複数設定することができます。例えば、サイトナビゲーションを一つ、ページ内ナビゲーションを一つなどです。このような場合、アクセシビリティを強化するために、 <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> を使用することができます。<a href="/ja/docs/Web/HTML/Element/Heading_Elements#Labeling_section_content">例</a>をご覧ください。</li> + <li>スクリーンリーダーのような障碍者向けのユーザーエージェントは、この要素を使用してナビゲーション用のコンテンツを初期読み上げから省略するかを判断するために使用することがあります。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例では、リンクの番号なしリスト ({{HTMLElement("ul")}}) を包含するために <code><nav></code> ブロックを使用します。適切な CSS によってサイドバー、ナビゲーションバー、あるいはドロップダウンメニューにすることができます。</p> + +<pre class="brush: html"><nav class="menu"> + <ul> + <li><a href="#">Home</a></li> + <li><a href="#">About</a></li> + <li><a href="#">Contact</a></li> + </ul> +</nav> +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-nav-element', '<nav>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新の W3C スナップショットから変更なし</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-nav-element', '<nav>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.elements.nav")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>他のセクション関連要素: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li> + <li><a href="/ja/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">HTML5 文書のセクションとアウトライン</a></li> + <li class="last"><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Navigation_Role">ARIA: Navigation ロール</a></li> +</ul> diff --git a/files/ja/web/html/element/nobr/index.html b/files/ja/web/html/element/nobr/index.html new file mode 100644 index 0000000000..4507d79238 --- /dev/null +++ b/files/ja/web/html/element/nobr/index.html @@ -0,0 +1,35 @@ +--- +title: '<nobr>: 無改行文字列要素（廃止）' +slug: Web/HTML/Element/nobr +tags: + - Element + - HTML + - Non-standard + - Obsolete + - Reference + - Web + - nobr +translation_of: Web/HTML/Element/nobr +--- +<div>{{HTMLRef}}{{Non-standard_Header}}{{Obsolete_Header}}</div> + +<p>標準外かつ廃止された HTML の <code><nobr></code> 要素は、その内包する文字列の自動改行を無効化します。行内におさまらない文字列は、領域からはみ出てレンダリングされるか、スクロールバーを伴って表示されます。</p> + +<div class="blockIndicator warning"> +<p>この要素は標準の要素であったことは<em>なく</em>、広く実装されていませんので、使用するべきではありません。代わりに、 CSS プロパティの {{Cssxref("white-space")}} を次のように使用してください。</p> +</div> + +<pre class="brush: html notranslate"><span style="white-space: nowrap;">改行を伴わない長い行</span></pre> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<div>{{Compat("html.elements.nobr")}}</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{CSSxRef("white-space")}}</li> + <li>{{CSSxRef("overflow")}}</li> +</ul> diff --git a/files/ja/web/html/element/noembed/index.html b/files/ja/web/html/element/noembed/index.html new file mode 100644 index 0000000000..136edce10d --- /dev/null +++ b/files/ja/web/html/element/noembed/index.html @@ -0,0 +1,39 @@ +--- +title: '<noembed>: 埋め込みフォールバック要素（廃止）' +slug: Web/HTML/Element/noembed +tags: + - Element + - Embedded content + - Embedding + - HTML + - Non-standard + - Obsolete + - Reference + - noembed +translation_of: Web/HTML/Element/noembed +--- +<div>{{HTMLRef}}{{Non-standard_header}}{{obsolete_header}}</div> + +<p><span class="seoSummary"><code><strong><noembed></strong></code> 要素は廃止された、標準外の方法であり、 {{HTMLElement("embed")}} 要素に対応していないブラウザーや、ユーザーが仕様とした種類の<a href="/ja/docs/Web/Guide/HTML/Content_categories#Embedded_content">埋め込みコンテンツ</a>に対応していないブラウザーで代替または「フォールバック」コンテンツを提供するものです。</span>これは HTML 4.01 で非推奨となり、フォールバックコンテンツは {{HTMLElement("object")}} 要素の開始タグと終了タグの間に配置されるようになりました。</p> + +<div class="note"> +<p>現在のところ、この要素はまだ多くのブラウザーで動作しますが、廃止されており、使用するべきではありません。代わりに {{HTMLElement("object")}} 要素の開始タグと終了タグの間にフォールバックコンテンツを入れて使用して下さい。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code><noembed></code> 要素内のメッセージは、ブラウザーが <code><embed></code> 要素に対応していない場合にのみ表示されます。</p> + +<h3 id="Show_an_alternative_content" name="Show_an_alternative_content">代替コンテンツの表示</h3> + +<pre class="brush: html notranslate"><embed type="vide/webm" src="/media/examples/flower.mp4" width="200" height="200"> + <noembed> + <h1>代替コンテンツ</h1> + </noembed> +</embed></pre> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.noembed")}}</p> diff --git a/files/ja/web/html/element/noframes/index.html b/files/ja/web/html/element/noframes/index.html new file mode 100644 index 0000000000..77482a39e3 --- /dev/null +++ b/files/ja/web/html/element/noframes/index.html @@ -0,0 +1,79 @@ +--- +title: '<noframes>: フレームフォールバック要素' +slug: Web/HTML/Element/noframes +tags: + - HTML + - HTML フレーム + - Obsolete + - noframes + - ウェブ + - フレーム + - リファレンス + - 要素 +translation_of: Web/HTML/Element/noframes +--- +<div>{{obsolete_header}}</div> + +<p><span class="seoSummary"><strong><code><noframes></code></strong> は、古い HTML における <strong>No Frames</strong> または <strong>frame fallback</strong> 要素であり、 {{HTMLElement("frame")}} 要素に対応していない（または対応を無効化した）ブラウザーのためのコンテンツを提供します。</span>よく使われるほとんどのブラウザーがフレームに対応していますが、一部のモバイルブラウザーやテキストモードブラウザーなどの例外もあります。</p> + +<p><code><noframes></code> の中では HTML 文書の body 要素内で利用できる HTML 要素が使用できますが、フレームを使用するための {{HTMLElement("frameset")}} 要素および {{HTMLElement("frame")}} 要素は意味がないので例外です。</p> + +<p><code><noframes></code> は、ユーザーのブラウザーがフレームに対応していないことを説明するメッセージを表示するために利用することができますが、できればフレームを使わなくても同じ（または同等の）機能を提供するための別なフォームを表現するために使用するべきです。</p> + +<div class="note"> +<p>HTML 5 以降では、 {{HTMLElement("frame")}} 要素および {{HTMLElement("frameset")}} 要素が廃止されたため、 <code><noframes></code> も廃止されており使用するべきではありません。フレームがどうしても必要であれば、 {{HTMLElement("iframe")}} 要素を用いて表現するべきです。</p> +</div> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>他のすべての HTML 要素と同様に、この要素は<a href="/ja/docs/HTML/Global_attributes" title="HTML/Global attributes">グローバル属性</a>に対応しています。他の属性は利用できません。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例には、2つのフレームを持つフレームセットがあります。加えて、{{Glossary("user agent","ユーザーエージェント")}}がフレームに対応していない場合の説明メッセージを表示するために <code><noframes></code> が使われています。</p> + +<pre class="brush:html"><frameset cols="50%,50%"> + <frame src="https://developer.mozilla.org/en/HTML/Element/frameset" /> + <frame src="https://developer.mozilla.org/en/HTML/Element/frame" /> + <noframes><p>あなたのブラウザーはフレームに対応していないか、 + またはフレームが使用できるように設定されていません。</p></noframes> +</frameset></pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML5 W3C', '#noframes', 'noframes')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'frames.html#edef-NOFRAMES', '<noframes>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.elements.noframes")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("frameset")}}</li> + <li>{{HTMLElement("frame")}}</li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/ja/web/html/element/noscript/index.html b/files/ja/web/html/element/noscript/index.html new file mode 100644 index 0000000000..445863204c --- /dev/null +++ b/files/ja/web/html/element/noscript/index.html @@ -0,0 +1,107 @@ +--- +title: <noscript> +slug: Web/HTML/Element/noscript +tags: + - Element + - HTML + - HTML scripting + - Reference + - Web +translation_of: Web/HTML/Element/noscript +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><noscript></code> 要素</strong>は、このページ上のスクリプトの種類に対応していない場合や、スクリプトの実行がブラウザーで無効にされている場合に表示する HTML の部分を定義します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリー</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Metadata_content">メタデータコンテンツ</a>、<a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>、<a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>スクリプトの実行が無効かつ {{HTMLElement("head")}} 要素の子孫である場合: 任意の順序で、0個以上の {{HTMLElement("link")}} 要素、0個以上の{{HTMLElement("style")}} 要素、0個以上の {{HTMLElement("meta")}} 要素。<br> + スクリプトの実行が無効かつ {{HTMLElement("head")}} 要素の子孫ではない場合: 任意の<a href="/ja/docs/Web/Guide/HTML/Content_categories#Transparent_content_model">透過的コンテンツ</a>、ただし <code><noscript></code> 要素を入れ子にしてはならない。<br> + 上記以外の場合: フローコンテンツ、記述コンテンツ。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>祖先要素に <code><noscript></code> が存在しない場合に、<a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a> を受け入れるすべての要素。または、祖先要素に <code><noscript></code> が存在しない場合に、{{HTMLElement("head")}} 要素 (HTML 文書に限る)。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>許可されている <code>role</code> なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみがあります。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html notranslate"><noscript> + <!-- 外部ファイルにリンクするアンカー --> + <a href="https://www.mozilla.com/">外部リンク</a> +</noscript> +<p>ロック！！</p> +</pre> + +<h3 id="Result_with_scripting_enabled" name="Result_with_scripting_enabled">スクリプトが有効になっている場合の表示例</h3> + +<p>ロック！！</p> + +<h3 id="Result_with_scripting_disabled" name="Result_with_scripting_disabled">スクリプトが無効になっている場合の表示例</h3> + +<p><a href="https://www.mozilla.com/">外部リンク</a></p> + +<p>ロック！！</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'scripting.html#the-noscript-element', '<noscript>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics-scripting.html#the-noscript-element', '<noscript>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/scripts.html#h-18.3.1', '<noscript>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.noscript")}}</p> diff --git a/files/ja/web/html/element/object/index.html b/files/ja/web/html/element/object/index.html new file mode 100644 index 0000000000..ce74e22c5b --- /dev/null +++ b/files/ja/web/html/element/object/index.html @@ -0,0 +1,149 @@ +--- +title: <object> +slug: Web/HTML/Element/object +tags: + - Element + - HTML + - HTML embedded content + - Reference + - Web +translation_of: Web/HTML/Element/object +--- +<p>{{HTMLRef}}</p> + +<p><strong>HTML の <code><object></code> 要素</strong>は、画像、内部の閲覧コンテキスト、プラグインによって扱われるリソースなどのように扱われる外部リソースを表現します。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/object.html", "tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Embedded_content">埋め込みコンテンツ</a>, 知覚可能コンテンツ、要素が {{htmlattrxref("usemap","object")}} 属性を持つ場合は <a href="/ja/docs/Web/HTML/Content_categories#Interactive_content">対話型コンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Form_listed">リスト化</a>/<a href="/ja/docs/Web/HTML/Content_categories#Form_submittable">送信可能</a> な <a href="/ja/docs/Web/HTML/Content_categories#Form-associated_content">フォーム関連要素</a></td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>0個以上の {{HTMLElement("param")}} 要素とそれに続く <a href="/ja/docs/Web/HTML/Content_categories#Transparent_content_model">透過的コンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Embedded_content">埋め込みコンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("image")}}</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLObjectElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は、すべての HTML 要素で共通の<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>と、以下に列挙する属性を持ちます。</p> + +<dl> + <dt>{{HTMLAttrDef("archive")}}{{HTMLVersionInline(4)}} のみ。 {{Obsolete_Inline("HTML5")}}</dt> + <dd>オブジェクトのリソースの URI 群を、半角スペースで区切って指定。</dd> + <dt>{{HTMLAttrDef("border")}}{{Deprecated_Inline("HTML4.01")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>コントロールの境界線のピクセル幅。※指定時に px などの単位は不要。</dd> + <dt>{{HTMLAttrDef("classid")}}{{HTMLVersionInline(4)}} のみ。 {{Obsolete_Inline("HTML5")}}</dt> + <dd>オブジェクトの実装の URI。 <strong>data</strong> 属性とともに、または <strong>data</strong> 属性の代替として用いることができます。</dd> + <dt>{{HTMLAttrDef("codebase")}}{{HTMLVersionInline(4)}} のみ。 {{Obsolete_Inline("HTML5")}}</dt> + <dd><strong>classid</strong> 属性、<strong>data</strong> 属性、<strong>archive</strong> 属性で指定された相対 URI を解決するための基準パス。指定しない場合、既定値は現在の文書のベース URI となります。</dd> + <dt>{{HTMLAttrDef("codetype")}}{{HTMLVersionInline(4)}} のみ。 {{Obsolete_Inline("HTML5")}}</dt> + <dd><strong>classid</strong> によって指定されたデータの、コンテンツ・タイプ。</dd> + <dt>{{HTMLAttrDef("data")}}</dt> + <dd>リソースのアドレスを有効な URL で指定。<strong>data</strong> 属性と <strong>type</strong> 属性のうち、少なくとも1つは定義しておく必要があります。</dd> + <dt>{{HTMLAttrDef("declare")}}{{HTMLVersionInline(4)}} のみ。 {{Obsolete_Inline("HTML5")}}</dt> + <dd>この論理属性は属性名を指定するだけで有効になります。オブジェクトは、後続する <code><object></code> 要素でインスタンス化しなければなりません。HTML5 ではリソースを再利用するごとに、完全な形の <object> 要素を繰り返し配置します。</dd> + <dt>{{HTMLAttrDef("form")}}{{HTMLVersionInline(5)}}</dt> + <dd>オブジェクトがフォームに関連付けられている場合、そのフォーム（※フォームオーナー）の id を指定。属性値は、同一文書内の {{HTMLElement("form")}} 要素の id でなければなりません。</dd> + <dt>{{HTMLAttrDef("height")}}</dt> + <dd>表示されるリソースの高さを <a href="https://drafts.csswg.org/css-values/#px">CSS ピクセル値</a> で指定。(絶対値に限ります。<a href="https://html.spec.whatwg.org/multipage/embedded-content.html#dimension-attributes">パーセント値は不可</a>)</dd> + <dt>{{HTMLAttrDef("name")}}</dt> + <dd>有効な閲覧コンテキストの名前 (HTML5) またはコントロールの名前 (HTML 4)。</dd> + <dt>{{HTMLAttrDef("standby")}}{{HTMLVersionInline(4)}} のみ。 {{Obsolete_Inline("HTML5")}}</dt> + <dd>オブジェクトの実装とデータの読み込み中にブラウザーに表示することができるメッセージ。</dd> + <dt>{{HTMLAttrDef("tabindex")}}{{HTMLVersionInline(4)}} のみ。 {{Obsolete_Inline("HTML5")}}</dt> + <dd>現在の文書のタブナビゲーション順序におけるこの要素の位置。</dd> + <dt>{{HTMLAttrDef("type")}}</dt> + <dd><strong>data</strong> 属性によって指定されたリソースの <a href="/ja/docs/Glossary/Content_type">content type</a>。<strong>data</strong> 属性と <strong>type</strong> 属性のうち、少なくとも 1 つは定義しておく必要があります。</dd> + <dt>{{HTMLAttrDef("typemustmatch")}}{{HTMLVersionInline(5)}}</dt> + <dd>この論理属性は、リソースを使用するためには <strong>type</strong> 属性の値とリソースの実際の <a href="/ja/docs/Glossary/Content_type">content type</a> が一致していなければならないかを示します。</dd> + <dt>{{HTMLAttrDef("usemap")}}</dt> + <dd>{{HTMLElement("map")}} 要素を参照するハッシュ名。 '#' の後に map 要素の {{htmlattrxref("name", "map")}} 属性を繋げた文字列を属性値として記述します。</dd> + <dt>{{HTMLAttrDef("width")}}</dt> + <dd>表示されるリソースの幅を <a href="https://drafts.csswg.org/css-values/#px">CSS ピクセル値</a> で指定。(絶対値に限ります。<a href="https://html.spec.whatwg.org/multipage/embedded-content.html#dimension-attributes">パーセンテージは不可</a>)</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Embed_a_flash_movie" name="Embed_a_flash_movie">Flash 動画を埋め込む</h3> + +<pre class="brush: html notranslate"><!-- 埋め込み Flash 動画 --> +<object data="movie.swf" + type="application/x-shockwave-flash"></object> + +<!-- 引数付き埋め込み Flash 動画 --> +<object data="movie.swf" type="application/x-shockwave-flash"> + <param name="foo" value="bar"> +</object> +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "embedded-content.html#the-object-element", "<object>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "semantics-embedded-content.html#the-object-element", "<object>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "struct/objects.html#h-13.3", "<object>")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p>注: Google Chrome はテキストの検索 (<kbd>ctrl + F</kbd> のショートカットからアクセス) で <code><object></object></code> タグ内の検索に対応していません。</p> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.object")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("applet")}} {{Obsolete_Inline}}</li> + <li>{{HTMLElement("embed")}}</li> + <li>{{HTMLElement("param")}}</li> +</ul> diff --git a/files/ja/web/html/element/ol/index.html b/files/ja/web/html/element/ol/index.html new file mode 100644 index 0000000000..277a818ff9 --- /dev/null +++ b/files/ja/web/html/element/ol/index.html @@ -0,0 +1,224 @@ +--- +title: '<ol>: 順序付きリスト要素' +slug: Web/HTML/Element/ol +tags: + - Element + - HTML + - HTML grouping content + - 'HTML:Flow content' + - Reference +translation_of: Web/HTML/Element/ol +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><ol></code> 要素</strong>は、項目の順序付きリストを表します。ふつうは番号付きのリストとして表示されます。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/ol.html", "tabbed-shorter")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>。また、<code><ol></code> 要素の子に少なくとも 1 個の {{HTMLElement("li")}} 要素を包含する場合は、<a href="/en-US/docs/Web/Guide/HTML/Content_categories#Palpable_content">知覚可能コンテンツ</a>。</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>0個以上の {{HTMLElement("li")}}, {{HTMLElement("script")}}, {{HTMLElement("template")}} の各要素。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">Implicit ARIA role</th> + <td><code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/List_role">list</a></code></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>{{ARIARole("directory")}}, {{ARIARole("group")}}, {{ARIARole("listbox")}}, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}}, {{ARIARole("tree")}}</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{DOMxRef("HTMLOListElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>も受け付けます。</p> + +<dl> + <dt>{{HTMLAttrDef("reversed")}} {{HTMLVersionInline(5)}}</dt> + <dd>論理属性で、リストの項目が逆順で指定されていることを指定します。項目は大きい方から小さい方へ番号付けされます。</dd> + <dt>{{HTMLAttrDef("start")}} {{HTMLVersionInline(5)}}</dt> + <dd>整数値を持つ属性で、リスト項目の序数の開始値を指定します。この値は、番号付けの種類が文字やローマ数字であっても、常にアラビア数字 (1, 2, 3, など) で指定します。例えば、 "d" の文字や "iv" のローマ数字から始める場合は、 <code>start="4"</code> を使用してください。</dd> + <dt>{{HTMLAttrDef("type")}}</dt> + <dd>この属性は、番号付けの種類を設定します。 + <ul> + <li><code>a</code> は、英小文字を示します</li> + <li><code>A</code> は、英大文字を示します</li> + <li><code>i</code> は、小文字のローマ数字を示します</li> + <li><code>I</code> は、大文字のローマ数字を示します</li> + <li><code>1</code> は、数字を示します (既定値)</li> + </ul> + + <p>指定された種類は、内部の {{HTMLElement("li")}} 要素で異なる {{HTMLAttrxRef("type", "li")}} 属性が使用されない限り、リスト全体に使用されます。</p> + + <div class="blockIndicator note"> + <p><strong>注:</strong> (法律文書や技術文書の箇条書きなどのように) リスト番号の種類に重要性がない限り、代わりに CSS の {{CSSxRef("list-style-type")}} プロパティを使用してください。</p> + </div> + </dd> +</dl> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<p>ふつう、順序付きリストの項目は、先頭に数字や文字などの<a href="/ja/docs/Web/CSS/::marker">マーカー</a>が表示されます。</p> + +<p><code><ol></code> 要素と {{HTMLElement("ul")}} 要素は、必要なだけ深く入れ子にすることができ、 <code><ol></code> と <code><ul></code> を好きなだけ変更することもできます。</p> + +<p><code><ol></code> と {{HTMLElement("ul")}} は、どちらも項目のリストを表します。両者の違いは、 <code><ol></code> 要素では順序に意味があることです。例えば次のようなものです。</p> + +<ul> + <li>レシピの手順</li> + <li>道順</li> + <li>栄養成分表示ラベルにおける成分の降順の一覧</li> +</ul> + +<p>どちらのリストを使用するか判断するには、リスト項目の順序を変更してみてください。意味が変わるようであれば <code><ol></code> 要素を使用し、そうでない場合は、 {{HTMLElement("ul")}} 要素を使用することができます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Simple_example" name="Simple_example">単純な例</h3> + +<pre class="brush: html notranslate"><ol> + <li>Fee</li> + <li>Fi</li> + <li>Fo</li> + <li>Fum</li> +</ol> +</pre> + +<p>上記の HTML は次のように出力されます。</p> + +<p>{{EmbedLiveSample("Simple_example", 400, 100)}}</p> + +<h3 id="Using_Roman_Numeral_type" name="Using_Roman_Numeral_type">ローマ数字の使用</h3> + +<pre class="brush: html notranslate"><ol type="i"> + <li>Introduction</li> + <li>List of Greivances</li> + <li>Conclusion</li> +</ol> </pre> + +<p>上記の HTML は次のように出力されます。</p> + +<p>{{EmbedLiveSample("Using_Roman_Numeral_type", 400, 100)}}</p> + +<h3 id="Using_the_start_attribute" name="Using_the_start_attribute">start 属性の使用</h3> + +<pre class="brush: html notranslate"><p>Finishing places of contestants not in the winners’ circle:</p> + +<ol start="4"> + <li>Speedwalk Stu</li> + <li>Saunterin’ Sam</li> + <li>Slowpoke Rodriguez</li> +</ol> +</pre> + +<p>上記の HTML は次のように出力されます。</p> + +<p>{{EmbedLiveSample("Using_the_start_attribute", 400, 100)}}</p> + +<h3 id="Nesting_lists" name="Nesting_lists">入れ子のリスト</h3> + +<pre class="brush: html notranslate"><ol> + <li>first item</li> + <li>second item <!-- ここに終了タグ </li> はありません！ --> + <ol> + <li>second item first subitem</li> + <li>second item second subitem</li> + <li>second item third subitem</li> + </ol> + </li> <!-- 終了タグ </li> はここです --> + <li>third item</li> +</ol> +</pre> + +<p>上記の HTML は次のように出力されます。</p> + +<p>{{EmbedLiveSample("Nesting_lists", 400, 150)}}</p> + +<h3 id="Unordered_list_inside_ordered_list" name="Unordered_list_inside_ordered_list">順序付きリストの中の順序なしリスト</h3> + +<pre class="brush: html notranslate"><ol> + <li>first item</li> + <li>second item <!-- ここに終了タグ </li> はありません！ --> + <ul> + <li>second item first subitem</li> + <li>second item second subitem</li> + <li>second item third subitem</li> + </ul> + </li> <!-- 終了タグ </li> はここです --> + <li>third item</li> +</ol> +</pre> + +<p>上記の HTML は次のように出力されます。</p> + +<p>{{EmbedLiveSample("Unordered_list_inside_ordered_list", 400, 150)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-ol-element', '<ol>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新の W3C スナップショットである {{SpecName('HTML5 W3C')}} から変更なし</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "grouping-content.html#the-ol-element", "HTMLOListElement")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td><code>reversed</code> および <code>start</code> 属性を追加、<code>type</code> の非推奨を解除</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '<ol>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td><code>compact</code> および <code>type</code> を非推奨に指定</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.ol")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>他のリスト関連の HTML 要素: {{HTMLElement("ul")}}、 {{HTMLElement("li")}}、 {{HTMLElement("menu")}} および廃止された {{HTMLElement("dir")}}</li> + <li><code><ol></code> 要素のスタイル付けに役立つ CSS プロパティ: + <ul> + <li>{{CSSxRef("list-style")}} プロパティは、序数の表示方法を選ぶのに便利です。</li> + <li><a href="/ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS カウンター</a>は、複雑な入れ子のリストを扱うのに便利です。</li> + <li>{{CSSxRef("line-height")}} プロパティは、非推奨の {{HTMLAttrxRef("compact", "ol")}} 属性をシミュレートするのに役立ちます。</li> + <li>{{CSSxRef("margin")}} プロパティは、リストの字下げを制御するのに役立ちます。</li> + </ul> + </li> +</ul> diff --git a/files/ja/web/html/element/optgroup/index.html b/files/ja/web/html/element/optgroup/index.html new file mode 100644 index 0000000000..69e32d411c --- /dev/null +++ b/files/ja/web/html/element/optgroup/index.html @@ -0,0 +1,128 @@ +--- +title: <optgroup> +slug: Web/HTML/Element/optgroup +tags: + - Element + - Forms + - HTML + - HTML forms + - Reference + - Web +translation_of: Web/HTML/Element/optgroup +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><optgroup></code> 要素</strong>は、ウェブフォームにおいて {{HTMLElement("select")}} 要素内の、選択肢 ({{HTMLElement("option")}}) のグループを作成します。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/optgroup.html", "tabbed-standard")}}</div> + +<p class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td>なし</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>0 個以上の {{HTMLElement("option")}} 要素</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>開始タグは必須。要素の直後に他の <code><optgroup></code> 要素が接続する場合、または親要素が他の内容を持たない場合、終了タグが省略可能となる。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>{{HTMLElement("select")}} 要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td>{{ARIARole("group")}}</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>許可されている <code>role</code> なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLOptGroupElement")}}</td> + </tr> + </tbody> +</table> + +<p>{{Note("optgroup 要素を入れ子にすることはできません。")}}</p> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/HTML/Global_attributes" rel="internal">グローバル属性</a>があります。</p> + +<dl> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>この論理属性が指定された場合、このオプショングループ内の項目のいずれも選択不能となります。多くの場合、ブラウザーはそのコントロールをグレーアウトで表示し、マウスクリックやフォーカスなど、いかなるイベントも受け付けなくなります。</dd> + <dt>{{htmlattrdef("label")}}</dt> + <dd>ブラウザーがユーザーインターフェイス上の選択肢にラベル付けするのに使用できるオプションのグループの名前。この要素を使用する場合には、この属性は必須です。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html notranslate"><select> + <optgroup label="Group 1"> + <option>Option 1.1</option> + </optgroup> + <optgroup label="Group 2"> + <option>Option 2.1</option> + <option>Option 2.2</option> + </optgroup> + <optgroup label="Group 3" disabled> + <option>Option 3.1</option> + <option>Option 3.2</option> + <option>Option 3.3</option> + </optgroup> +</select> +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Examples")}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-optgroup-element', '<optgroup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-optgroup-element', '<optgroup>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<optgroup>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.optgroup")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>他のフォーム関連要素: {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("option")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("meter")}}</li> +</ul> diff --git a/files/ja/web/html/element/option/index.html b/files/ja/web/html/element/option/index.html new file mode 100644 index 0000000000..05e079a45d --- /dev/null +++ b/files/ja/web/html/element/option/index.html @@ -0,0 +1,112 @@ +--- +title: '<option>: HTML 選択肢要素' +slug: Web/HTML/Element/option +tags: + - Element + - Forms + - HTML + - HTML forms + - Reference + - Select +translation_of: Web/HTML/Element/option +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><option></code> 要素</strong>は、 {{HTMLElement("select")}} 要素、{{HTMLElement("optgroup")}} 要素、{{HTMLElement("datalist")}} 要素内で項目を定義するために使われます。したがって、<code><option></code> は HTML 文書でポップアップメニューのメニュー項目や、その他の項目の一覧を表すことができます。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/option.html", "tabbed-standard")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td>なし</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>エスケープされた文字 (例えば <code>&eacute;</code>) を含むテキスト</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>開始タグは必須。直後に他の <code><option></code> 要素または {{HTMLElement("optgroup")}} 要素がある場合、または親要素が他に内容を持たない場合は終了タグを省略可能。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>{{HTMLElement("select")}} 要素、{{HTMLElement("optgroup")}} 要素、{{HTMLElement("menu")}} 要素。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td>{{ARIARole("option")}}</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>許可されている <code>role</code> なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLOptionElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">グローバル属性</a>を持ちます。</p> + +<dl> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>この論理属性を設定すると、選択肢が選択不能になります。多くのブラウザーはそのようなコントロールをグレーアウトで表示し、マウスクリックやフォーカスなど、いかなるイベントも受け付けなくなります。この属性を設定していなくても、祖先のいずれかが無効状態の {{HTMLElement("optgroup")}} 要素である場合は無効化されます。</dd> + <dt>{{htmlattrdef("label")}}</dt> + <dd>この属性は、選択肢の意味を示すラベル文字列です。 <code>label</code> 属性を定義していない場合は、要素の文字列コンテンツが要素の値になります。</dd> + <dt>{{htmlattrdef("selected")}}</dt> + <dd>この論理属性を設定すると、その選択肢が初期状態で選択されます。<code><option></code> 要素が {{htmlattrxref("multiple", "select")}} を設定していない {{HTMLElement("select")}} 要素の子孫である場合、{{HTMLElement("select")}} 要素内で1個の <code><option></code> だけが <code>selected</code> 属性を持てます。</dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>この属性の内容は、フォームで送信する値を表します。値を送信するには、選択肢を選択しなければなりません。この属性を省略すると、 option 要素の中の文字列が値になります。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<p>{{HTMLElement("select")}} 要素の例をご覧ください。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'form-elements.html#the-option-element', '<option>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-option-element', '<option>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<option>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.option")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>他のフォーム関連要素: {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("meter")}}</li> +</ul> diff --git a/files/ja/web/html/element/output/index.html b/files/ja/web/html/element/output/index.html new file mode 100644 index 0000000000..657b6c9324 --- /dev/null +++ b/files/ja/web/html/element/output/index.html @@ -0,0 +1,113 @@ +--- +title: '<output>: 出力要素' +slug: Web/HTML/Element/output +tags: + - Element + - HTML + - HTML forms + - HTML5 + - 'HTML:Flow content' + - 'HTML:フローコンテンツ' + - Reference + - Web +translation_of: Web/HTML/Element/output +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の出力要素</strong> (<strong><code><output></code></strong>) は、サイトやアプリが計算結果やユーザー操作の結果を挿入することができるコンテナー要素です。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>、<a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>、<a href="/ja/docs/Web/HTML/Content_categories#Form-associated_content">フォーム関連要素</a> (<a href="/ja/docs/Web/HTML/Content_categories#Form_listed">リスト化</a>、<a href="/ja/docs/Web/HTML/Content_categories#Form_labelable">ラベル付け可能</a>、<a href="/ja/docs/Web/HTML/Content_categories#Form_resettable">リセット可能</a>)、知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可された内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可された親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td>{{ARIARole("status")}}</td> + </tr> + <tr> + <th scope="row">許可された ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLOutputElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{htmlattrdef("for")}}</dt> + <dd>他の要素の {{htmlattrxref("id")}} の空白区切りのリストで、入力値が計算に使用される (または何らかの影響を与える) 要素を示します。</dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd>この要素に関連付けられた (<em>フォームオーナー</em>である) {{HTMLElement("form")}} 要素を指定します。この値は、同じ文書内の <code><form></code> 要素の {{htmlattrxref("id")}} である必要があります。 (この属性が設定されていない場合、 <code><output></code> 要素は祖先の <code><form></code> があれば、その要素に関連づけられます。</dd> + <dd>この属性は <code><output></code> 要素を、包含する <code><form></code> に限らず文書中のどこにある <code><form></code> にも結び付けることができます。これは祖先の <code><form></code> 要素を上書きもします。</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>要素の名前です。 {{domxref("HTMLFormElement.elements", "form.elements")}} API で使用されます。</dd> +</dl> + +<p><code><output></code> の値、名前、内容はフォーム送信の過程で送信されません。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>以下の例では、フォームに <code>0</code> から <code>100</code> までの範囲の値を取るスライダーと、第2の値を入力できる {{HTMLElement("input")}} 要素があります。どちらかのコントロールの値が変更されるたびに、2つの値が合計された結果が <code><output></code> 要素の中に表示されます。</p> + +<pre class="brush: html notranslate"><form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> + <input type="range" id="b" name="b" value="50" /> + + <input type="number" id="a" name="a" value="10" /> = + <output name="result" for="a b">60</output> +</form> +</pre> + +<p>{{ EmbedLiveSample('Examples')}}</p> + +<h2 id="Accessibility_Concerns" name="Accessibility_Concerns">アクセシビリティの考慮</h2> + +<p>多くのブラウザーでは、この要素を <code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Live_Regions">aria-live</a></code> 領域として実装しています。これにより、支援技術は、その中に投稿された UI インタラクションの結果を発表しますが、その結果を生成するコントロールからフォーカスを外す必要はありません。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-output-element', '<output>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-output-element', '<output>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されます。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.elements.output")}}</p> diff --git a/files/ja/web/html/element/p/index.html b/files/ja/web/html/element/p/index.html new file mode 100644 index 0000000000..14e996d271 --- /dev/null +++ b/files/ja/web/html/element/p/index.html @@ -0,0 +1,188 @@ +--- +title: '<p>: 段落要素' +slug: Web/HTML/Element/p +tags: + - HTML + - HTML コンテンツグループ化 + - 'HTML:フローコンテンツ' + - 'HTML:知覚可能コンテンツ' + - Reference + - ウェブ + - 要素 +translation_of: Web/HTML/Element/p +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><p></code> 要素</strong>は、テキストの段落を表します。</span>視覚メディアにおいて、段落はふつう隣接するブロックと上下の空白や最初の行の字下げによって隔てられたテキストのブロックとして表現されますが、 HTML の段落は画像やフォーム欄などの関連するコンテンツを構造的にまとめることができます。</p> + +<p>段落は<a href="/ja/docs/Web/HTML/Block-level_elements">ブロックレベル要素</a>であり、特徴的なのは <code></p></code> で閉じる前に他のブロックレベル要素が見つかった場合は自動的に閉じることです。下記の「タグの省略」をご覧ください。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/p.html", "tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>、知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>開始タグは必須。後続する要素が {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hr")}}, {{HTMLElement("menu")}}, {{HTMLElement("nav")}}, {{HTMLElement("ol")}}, {{HTMLElement("pre")}}, {{HTMLElement("section")}}, {{HTMLElement("table")}}, {{HTMLElement("ul")}} または別の {{HTMLElement("p")}} 要素のいずれかである、または親要素内で他のコンテンツがなく親要素が {{HTMLElement("a")}} 要素ではない場合は終了タグを省略することが可能。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLParagraphElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes" title="HTML/Global_attributes">グローバル属性</a>があります。</p> + +<div class="note"> +<p><strong>メモ:</strong> <code><p></code> の <code>align</code> 属性は廃止済みであり、使用するべきではありません。</p> +</div> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p>これはテキストの最初の段落です。 + これはテキストの最初の段落です。 + これはテキストの最初の段落です。 + これはテキストの最初の段落です。</p> +<p>これはテキストの二番目の段落です。 + これはテキストの二番目の段落です。 + これはテキストの二番目の段落です。 + これはテキストの二番目の段落です。</p> +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample('Example')}}</p> + +<h2 id="Styling_paragraphs" name="Styling_paragraphs">段落のスタイル付け</h2> + +<p>既定で、ブラウザーは段落を単一の空行で分割します。例えば先頭行を字下げするなど、他の分割方法は {{glossary("CSS")}} で実現することができます。</p> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html"><p>Separating paragraphs with blank lines is easiest +for readers to scan, but they can also be separated +by indenting their first lines. This is often used +to take up less space, such as to save paper in print.</p> + +<p>Writing that is intended to be edited, such as school +papers and rough drafts, uses both blank lines and +indentation for separation. In finished works, combining +both is considered redundant and amateurish.</p> + +<p>In very old writing, paragraphs were separated with a +special character: ¶, the <i>pilcrow</i>. Nowadays, this +is considered claustrophobic and hard to read.</p> + +<p>How hard to read? See for yourself: + <button data-toggle-text="Oh no! Switch back!">Use pilcrow for paragraphs</button> +</p> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">p { + margin: 0; + text-indent: 3ch; +} + +p.pilcrow { + text-indent: 0; + display: inline; +} +p.pilcrow + p.pilcrow::before { + content: " ¶ "; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">document.querySelector('button').addEventListener('click', function (event) { + document.querySelectorAll('p').forEach(function (paragraph) { + paragraph.classList.toggle('pilcrow'); + }); + var newButtonText = event.target.dataset.toggleText; + var oldText = event.target.innerText; + event.target.innerText = newButtonText; + event.target.dataset.toggleText = oldText; +});</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample('Styling_paragraphs')}}</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> + +<p>コンテンツを段落に分割すると、ページのアクセシビリティを向上するのに役立ちます。読み上げソフトやその他の支援技術が、このようなユーザーに前後の段落に飛ぶショートカットを提供することができ、空行によって視覚ユーザーが飛ばし見をすることができるのと同様、コンテンツをざっと見ることができるようになります。</p> + +<p>段落間の間隔を広げるために空の <code><p></code> 要素を使用することは、読み上げ技術の支援の下で操作をしている人にとっては問題になります。読み上げソフトは要素が存在することをアナウンスするものの、その中にはコンテンツが何もないという状況になる可能性があります。これは読み上げソフトを使用している人の利用を混乱させ不満をためる可能性があります。</p> + +<p>追加の間隔をあける必要がある場合は、 {{cssxref("margin")}} のような {{glossary("CSS")}} プロパティを使用して効果を得るようにしてください。</p> + +<pre class="brush: css">p { + margin-bottom: 2em; // 段落の後の空白を増加させる +} +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-p-element', '<p>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新の {{glossary("W3C")}} スナップショットである {{SpecName("HTML5 W3C")}} から変更なし</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-p-element', '<p>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td><code>align</code> 属性を廃止</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.1', '<p>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.elements.p")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("hr")}}</li> + <li>{{HTMLElement("br")}}</li> +</ul> diff --git a/files/ja/web/html/element/param/index.html b/files/ja/web/html/element/param/index.html new file mode 100644 index 0000000000..5e367adc67 --- /dev/null +++ b/files/ja/web/html/element/param/index.html @@ -0,0 +1,114 @@ +--- +title: '<param>: オブジェクト引数要素' +slug: Web/HTML/Element/param +tags: + - Element + - HTML + - HTML 埋め込みコンテンツ + - Reference + - Web +translation_of: Web/HTML/Element/param +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><param></code> 要素</strong>は、{{HTMLElement("object")}} 要素の引数を定義します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td>なし</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>なし。これは {{Glossary("empty element", "空要素")}} です。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>空要素であるため開始タグは必須、また終了タグを置いてはなりません。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>{{HTMLElement("object")}} の子として、他の<a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>より前に配置可能。</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLParamElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{htmlattrdef("name")}}</dt> + <dd>引数の名称。</dd> + <dt>{{htmlattrdef("value")}}</dt> + <dd>引数の値</dd> +</dl> + +<h3 id="Deprecated_attributes" name="Deprecated_attributes">非推奨の属性</h3> + +<dl> + <dt>{{htmlattrdef("type")}} {{deprecated_inline}}</dt> + <dd><code>valuetype</code> が "ref" に設定されている場合にのみ指定可能。<code>value</code> の値で指定された URI に存在するオブジェクトの MIME タイプを指定します。</dd> + <dt>{{htmlattrdef("valuetype")}} {{deprecated_inline}}</dt> + <dd><code>value</code> 属性の型を指定します。指定可能な値は以下の通りです。 + <ul> + <li><code>data</code>: 初期値。値は文字列としてオブジェクトの実装に渡されます。</li> + <li><code>ref</code>: 値は、実行時の値が格納されているリソースへの URI です。</li> + <li><code>object</code>: 同一文書内の他の {{HTMLElement("object")}} 要素の ID</li> + </ul> + </dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code><param></code> の使用例については、{{HTMLElement("object")}} のページを参照してください。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'iframe-embed-object.html#the-param-element', '<param>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'semantics-embedded-content.html#the-param-element', '<param>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.3.2', '<param>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.param")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("object")}}</li> +</ul> diff --git a/files/ja/web/html/element/picture/index.html b/files/ja/web/html/element/picture/index.html new file mode 100644 index 0000000000..aa5e06a1f2 --- /dev/null +++ b/files/ja/web/html/element/picture/index.html @@ -0,0 +1,166 @@ +--- +title: '<picture>: 画像要素' +slug: Web/HTML/Element/picture +tags: + - Element + - Graphics + - HTML + - HTML embedded content + - Images + - Reference + - Web + - WebP + - picture +translation_of: Web/HTML/Element/picture +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><picture></code> 要素</strong>は、0個以上の {{HTMLElement("source")}} 要素と一つの {{HTMLElement("img")}} 要素を含み、様々な画面や端末の条件に応じた画像を提供します。</span></p> + +<p>ブラウザーは複数の <code><source></code> 子要素を検討し、その中から最も適切なものを選択します。適切なものがない場合や、ブラウザーが <code><picture></code> 要素に対応してない場合、 <code><img></code> 要素の {{htmlattrxref("src", "img")}} 属性で指定された URL が選択されます。選択された画像は <code><img></code> 要素が占有する領域に表示されます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/picture.html", "tabbed-standard")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<p>どの URL を読み込むかを選択するには、{{Glossary("user agent","ユーザーエージェント")}}はそれぞれの <code><source></code> 要素の {{htmlattrxref("srcset", "source")}}, {{htmlattrxref("media", "source")}}, {{htmlattrxref("type", "source")}} 属性を調べて、現在のページのレイアウトや表示機器の能力に最も合う画像を検討します。</p> + +<p><code><img></code> 要素は2つの役割を担います。</p> + +<ol> + <li>画像の寸法やその他の属性を記述します。</li> + <li><code><source></code> 要素で利用可能な画像を提供できなかった場合の代替策を提供します。</li> +</ol> + +<p><code><picture></code> をよく使う場面は以下の通りです。</p> + +<ul> + <li><strong>アートディレクション</strong> 様々な <code>media</code> の条件に合わせて画像を切り抜いたり変更したりする (例えば、小さな画面では、詳細すぎない、より簡単な版の画像を読み込むなど)。</li> + <li>特定の形式に対応していないブラウザーに対して、<strong>代替画像形式を提供する</strong>。</li> + <li>見る人の画面に最も適合する画像を読み込むことで、<strong>通信帯域を節約しページの読み込みをより速くする</strong>。</li> +</ul> + +<p>DPI の高い (高解像度の) ディスプレイのために高解像度版の画像を提供する場合は、代わりに {{htmlattrxref("srcset", "img")}} 属性を <code><img></code> に使用してください。これによってブラウザーはデータ節約モードでは低解像度版を選択することができ、 <code>media</code> 条件を明示的に書かなくてもよくなります。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, 記述コンテンツ, 埋め込みコンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>0個以上の {{HTMLElement("source")}} 要素、その後に1個の {{HTMLElement("img")}} 要素、任意でスクリプト対応要素と混在。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>埋め込みコンテンツを含むことができるすべての要素。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>許可されている <code>role</code> なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLPictureElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみを持ちます。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<p>{{cssxref("object-position")}} プロパティを使用して、要素の枠内で画像の位置を調整したり、 {{cssxref("object-fit")}} プロパティを使用して、枠内に合わせるための画像の寸法を変更する方法を制御したりすることができます。</p> + +<div class="note"> +<p><strong>注:</strong> これらのプロパティは子の <code><img></code> 要素に用い、 <code><picture></code> 要素には<strong>用いない</strong>でください。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<p>これらの例は、 {{HTMLElement("source")}} 要素の様々な属性がどのように <code><picture></code> 内の画像の選択を変更するかを示しています。</p> + +<h3 id="The_media_attribute" name="The_media_attribute">media 属性</h3> + +<p><code>media</code> 属性はユーザーエージェントがそれぞれの {{HTMLElement("source")}} 要素を評価するメディア条件を (メディアクエリと同様に) 指定します。</p> + +<p>メディア条件が <code>false</code> と評価された場合、 {{HTMLElement("source")}} 要素はスキップされ、 <code><picture></code> 内の次の要素が評価されます。</p> + +<pre class="brush: html notranslate"><picture> + <source srcset="mdn-logo-wide.png" media="(min-width: 600px)"> + <img src="mdn-logo-narrow.png" alt="MDN"> +</picture> +</pre> + +<h3 id="The_srcset_attribute" name="The_srcset_attribute">srcset 属性</h3> + +<p><a href="/ja/docs/Web/HTML/Element/source#attr-srcset">{{htmlattrdef("srcset")}}</a> 属性は、<em>寸法に基づいた</em>利用可能な画像のリストを提供するために使用します。</p> + +<p>これは画像記述子のカンマ区切りのリストで構成されます。それぞれの画像記述子は画像の URL と、次の<em>いずれか</em>で構成されます。</p> + +<ul> + <li><em>幅記述子</em> は <code>w</code> に続けて書きます (<code>300w</code> など)<br> + <em>または</em></li> + <li><em>ピクセル密度記述子</em> は <code>x</code> に続けて書き (<code>2x</code> など)、高 DPI 画面の高解像度画像を提供します。</li> +</ul> + +<pre class="brush: html notranslate"><picture> + <source srcset="logo-768.png 768w, logo-768-1.5x.png 1.5x"> + <source srcset="logo-480.png, logo-480-2x.png 2x"> + <img src="logo-320.png" alt="logo"> +</picture></pre> + +<h3 id="The_type_attribute" name="The_type_attribute">type 属性</h3> + +<p><code>type</code> 属性は、 {{HTMLElement("source")}} 要素の <code>srcset</code> 属性で与えられるリソース URL の <a href="/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME タイプ</a>を指定します。ユーザーエージェントが指定されたタイプに対応していない場合、その {{HTMLElement("source")}} 要素はスキップされます。</p> + +<pre class="brush: html notranslate"><picture> + <source srcset="logo.webp" type="image/webp"> + <img src="logo.png" alt="logo"> +</picture> +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-picture-element', '<picture>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されます。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.picture")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("img")}} 要素</li> + <li>{{HTMLElement("source")}} 要素</li> + <li>フレーム内の画像の位置や寸法の設定: {{cssxref("object-position")}} 及び {{cssxref("object-fit")}}</li> + <li><a href="/ja/docs/Web/Media/Formats/Image_types">画像ファイルのImage file type and format guide</a></li> +</ul> diff --git a/files/ja/web/html/element/plaintext/index.html b/files/ja/web/html/element/plaintext/index.html new file mode 100644 index 0000000000..6216284bed --- /dev/null +++ b/files/ja/web/html/element/plaintext/index.html @@ -0,0 +1,54 @@ +--- +title: '<plaintext>: プレーンテキスト要素 (非推奨)' +slug: Web/HTML/Element/plaintext +tags: + - Element + - HTML + - Obsolete + - Reference + - Web + - ウェブ + - 要素 +translation_of: Web/HTML/Element/plaintext +--- +<div>{{Obsolete_header}}</div> + +<p><span class="seoSummary"><em>プレーンテキスト要素</em> (<code><plaintext></code>) は、開始タグ以降のすべてを生のテキストとして表示し、それ以降の HTML を無視します。</span>開始タグ以降は全て生のテキスト扱いになるので、終了タグはありません。</p> + +<div class="note"><strong>メモ</strong>: この要素は使用しないで下さい。 + +<ul> + <li><code><plaintext></code> は HTML 2 より非推奨となっており、全てのブラウザーが実装しているわけではありません。実装しているブラウザーでも、一貫していません。</li> + <li><code><plaintext></code> は HTML 5 で廃止されています。この要素を受け付けるブラウザーは {{HTMLElement("pre")}} 要素と同様に扱い、内部の HTML を解釈する場合もあります。</li> + <li><code><plaintext></code> 要素が ({{HTMLElement("head")}} などの非表示の要素を除いて) ページの最初の要素になるのであれば、 HTML は使用しないでください。代わりに、テキストファイルを <code>text/plain</code> の <a href="/ja/docs/Properly_Configuring_Server_MIME_Types">MIME タイプ</a>で送信するようにしてください。</li> + <li>この要素を使用する代わりに、 {{HTMLElement("pre")}} 要素か、意味的に適切であれば (インラインテキスト向けの) {{HTMLElement("code")}} 要素を使用してください。その際、コンテンツの中身がうっかり HTML として解釈されないように、 <code><</code>, <code>></code>, <code>&</code> の各文字をエスケープしてください。</li> + <li>等幅フォントは、 HTML 要素に <a href="/ja/docs/Web/CSS">CSS</a> の {{cssxref("font-family")}} スタイルを <code>monospace</code> にすることで適用することができます。</li> +</ul> +</div> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は、全ての要素が持つ<a href="/ja/docs/Web/HTML/Global_attributes" rel="internal">グローバル属性</a>以外の属性を持ちません。</p> + +<h2 id="DOM_interface" name="DOM_interface">DOM インタフェース</h2> + +<p>この要素は {{domxref('HTMLElement')}} インタフェースを提供します。</p> + +<div class="note"> +<p><strong>実装メモ:</strong> Gecko 1.9.2 以前では、 Firefox はこの要素に {{domxref('HTMLSpanElement')}} インタフェースを実装しています。</p> +</div> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されます。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.elements.plaintext")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("pre")}} 及び {{HTMLElement("code")}} 要素を代わりに使用してください。</li> + <li>{{HTMLElement("plaintext")}} とほぼ同等の {{HTMLElement("listing")}} と {{HTMLElement("xmp")}} も廃止されています。</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ja/web/html/element/pre/index.html b/files/ja/web/html/element/pre/index.html new file mode 100644 index 0000000000..f5272db04a --- /dev/null +++ b/files/ja/web/html/element/pre/index.html @@ -0,0 +1,152 @@ +--- +title: '<pre>: 整形済みテキスト要素' +slug: Web/HTML/Element/pre +tags: + - HTML + - HTML コンテンツグループ化 + - 'HTML:フローコンテンツ' + - 'HTML:知覚可能コンテンツ' + - ウェブ + - リファレンス + - 要素 +translation_of: Web/HTML/Element/pre +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><pre></code> 要素</strong>は、整形済みテキスト (preformatted text) を表します。この要素内のテキストは一般的に、ファイル内でのレイアウトをそのまま反映して等幅 ("<a href="/ja/docs/XUL/Style/monospace">monospace</a>") フォントで表示されます。この要素内のホワイトスペース文字はそのまま表示します。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/pre.html", "tabbed-standard")}}</div> + +<p class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>、知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLPreElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみを持ちます。</p> + +<dl> + <dt>{{htmlattrdef("cols")}} {{non-standard_inline}}{{obsolete_inline}}</dt> + <dd>1行あたりの<em>望ましい</em>文字数を示します。これは {{htmlattrxref("width", "pre")}} の標準外の別名です。同様の効果を得るには、CSS の {{Cssxref("width")}} を使用してください。</dd> + <dt>{{htmlattrdef("width")}} {{obsolete_inline}}</dt> + <dd>1行あたりの<em>望ましい</em>文字数を示します。この属性は技術的には実装されていますが、視覚上の効果はありません。同様の効果を得るには、CSS の {{Cssxref("width")}} を使用してください。</dd> + <dt>{{htmlattrdef("wrap")}} {{non-standard_inline}}</dt> + <dd>テキストがはみ出た場合の処理に関する<em>ヒント</em>を示します。現行のブラウザーはこのヒントを無視して、視覚上の効果をもたらしません。同様の効果を得るには、CSS の {{Cssxref("white-space")}} を使用してください。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html"><!-- CSS コードを表示する例 --> +<pre> +body { + color:red; +} +</pre> +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<pre>body { + color:red; +} +</pre> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> + +<p>整形済みテキストを使用して作られた絵や図に対して、別な説明を提供することは重要です。この別な説明は、明確かつ簡潔に絵や図の中身を説明するものにしてください。</p> + +<p>弱視の人や、読み上げソフトのような支援技術を使用している人は、順番に読んだときに整形済みテキストで表現されているものが何か理解できないかもしれません。</p> + +<p>{{HTMLElement("figure")}} 及び {{HTMLElement("figcaption")}} 要素の組み合わせに、 {{htmlattrxref("id")}} 及び <a href="/ja/docs/Web/Accessibility/ARIA">ARIA</a> <code>role</code> 及び <code>aria-labelledby</code> 属性を補ったもので、整形済みテキストを図形として扱い、 <code>figcaption</code> を図形の別の説明として提供することができます。</p> + +<h3 id="Example" name="Example">例</h3> + +<pre><figure role="img" aria-labelledby="cow-caption"> + <pre> + __________________ +< 私は牧場の達人です。> + ------------------ + \ ^__^ + \ (oo)\_______ + (__)\ )\/\ + ||----w | + || || + </pre> + <figcaption id="cow-caption"> + 「私は牧場の達人です。」と言っている牛。牛は整形済みテキストで表現されている。 + </figcaption> +</figure> +</pre> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">MDN "WCAG を理解する ― ガイドライン 1.1 の解説"</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H86.html">H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-pre-element', '<pre>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>{{SpecName("HTML5 W3C")}} から重大な変更はない</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-pre-element', '<pre>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>{{SpecName("HTML4.01")}} から重大な変更はない</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.4', '<pre>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td><code>cols</code> 属性を非推奨に変更</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.elements.pre")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>CSS: {{Cssxref('white-space')}}, {{Cssxref('word-break')}}</li> +</ul> diff --git a/files/ja/web/html/element/progress/index.html b/files/ja/web/html/element/progress/index.html new file mode 100644 index 0000000000..b83a9e65a7 --- /dev/null +++ b/files/ja/web/html/element/progress/index.html @@ -0,0 +1,127 @@ +--- +title: '<progress>: 進捗表示要素' +slug: Web/HTML/Element/progress +tags: + - Element + - HTML + - HTML forms + - HTML5 + - Reference + - Web +translation_of: Web/HTML/Element/progress +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><progress></code> 要素</strong>は、タスクの進捗状況を表示します。プログレスバーとしてよく表示されます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/progress.html", "tabbed-standard")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>、<a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>、ラベル付け可能コンテンツ、知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>。ただし、子要素に <code><progress></code> 要素を含めてはならない。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a> を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td>{{ARIARole("progressbar")}}</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>許可されている <code>role</code> なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLProgressElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{ htmlattrdef("max") }}</dt> + <dd>この属性は、<code>progress</code> 要素で示すタスクで必要とする総作業量を設定します。<code>max</code> 属性を指定する場合は、値を <code>0</code> より大きい有効な浮動小数点数値にしなければなりません。既定値は <code>1</code> です。</dd> + <dt>{{ htmlattrdef("value") }}</dt> + <dd>この属性は、タスクの進捗状況を設定します。値は <code>0</code> から <code>max</code> までの間、または <code>max</code> を省略する場合は <code>0</code> から <code>1</code> までの間の、有効な浮動小数点数値であることが必要です。<code>value</code> 属性がない場合は、プログレスバーは不定、タスクは処理中であるものの完了までが予想できない状態になります。</dd> +</dl> + +<div class="note"> +<p><strong>注:</strong> {{htmlelement("meter")}} 要素とは異なり、最小値は常に 0 で、<code>min</code> 属性は <code><progress></code> 要素では許可されていません。</p> +</div> + +<div class="note"> +<p><strong>注:</strong> {{cssxref(":indeterminate")}} 擬似クラスは、不定状態のプログレスバーにマッチします。プログレスバーを値がある状態から不定の状態に変更するには、 {{domxref("Element.removeAttribute", "element.removeAttribute('value')")}}. で value 属性を削除しなければなりません。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html notranslate"><progress value="70" max="100">70 %</progress> +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{ EmbedLiveSample("Examples", 200, 50) }}</p> + +<p>Windows 7 では、 progress の表示結果は以下のようになります。</p> + +<p><img alt="progress-firefox.JPG" class="default internal" src="/@api/deki/files/6031/=progress-firefox.JPG"></p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-progress-element', '<progress>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-progress-element', '<progress>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.elements.progress")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{htmlelement("meter")}}</li> + <li>{{ cssxref(":indeterminate") }}</li> + <li>{{ cssxref("-moz-orient") }}</li> + <li>{{ cssxref("::-moz-progress-bar") }}</li> + <li>{{ cssxref("::-ms-fill") }}</li> + <li>{{ cssxref("::-webkit-progress-bar") }}</li> + <li>{{ cssxref("::-webkit-progress-value") }}</li> + <li>{{ cssxref("::-webkit-progress-inner-element") }}</li> +</ul> diff --git a/files/ja/web/html/element/q/index.html b/files/ja/web/html/element/q/index.html new file mode 100644 index 0000000000..e7ed497c2d --- /dev/null +++ b/files/ja/web/html/element/q/index.html @@ -0,0 +1,122 @@ +--- +title: '<q>: 行内引用要素' +slug: Web/HTML/Element/q +tags: + - Citation + - Cite + - Element + - HTML + - HTML text-level semantics + - Q + - Quotation + - Quotation Marks + - Reference + - Web + - quote +translation_of: Web/HTML/Element/q +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><q></code> 要素</strong> は、その内容が行内の引用であることを表します。最近の多くのブラウザーでは、文字列を引用符で囲むように実装しています。</span>この要素は、段落区切りをまたがない短い引用のためのものです。長文の引用には、 {{HTMLElement("blockquote")}} 要素を使用してください。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/q.html", "tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/Guide/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding role</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLQuoteElement")}}</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>注:</strong> 最近の多くのブラウザーは、<code><q></code> 要素内の文字列の周りに自動的に引用符を追加します。古いブラウザーでは引用符を追加するためにスタイル規則が必要な場合があります。</p> +</div> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を持ちます。</p> + +<dl> + <dt>{{htmlattrdef("cite")}}</dt> + <dd>この属性の値は、引用した情報の引用元文書やメッセージの URL です。この属性は、引用文の文脈や参照先を説明する情報を指すためのものです。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: html notranslate"><p>According to Mozilla's website, + <q + cite="https://www.mozilla.org/en-US/about/history/details/">Firefox 1.0 + was released in 2004 and became a big success.</q></p> +</pre> + +<p>{{EmbedLiveSample('Example')}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-q-element', '<q>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-q-element', '<q>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '<q>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.q")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("blockquote")}} 要素は長い引用のためのものです。</li> + <li>{{HTMLElement("cite")}} 要素は引用元のためのものです。</li> +</ul> diff --git a/files/ja/web/html/element/rb/index.html b/files/ja/web/html/element/rb/index.html new file mode 100644 index 0000000000..91a07ef691 --- /dev/null +++ b/files/ja/web/html/element/rb/index.html @@ -0,0 +1,149 @@ +--- +title: '<rb>: ルビベース要素' +slug: Web/HTML/Element/rb +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Ruby + - Text + - Web +translation_of: Web/HTML/Element/rb +--- +<div>{{HTMLRef}}{{Non-standard_Header}}</div> + +<p><span class="seoSummary"><strong>HTML ルビベース (<code><rb></code>) 要素</strong>は、 {{HTMLElement("ruby") }} 表記のベースとなるテキストの部分を区切るために使用されます。つまり、修飾される文字列です。</span>一つの <code><rb></code> 要素がベーステキストの不可分な区間を隔てるように囲みます。</p> + +<div class="hidden">\{{EmbedInteractiveExample("pages/tabbed/rb.html", "tabbed-standard")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td>なし</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>{{htmlelement("ruby")}} 要素の子と同様。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>終了タグを省略できるのは、要素に {{HTMLElement("rt")}}, {{HTMLElement("rtc")}}, {{HTMLElement("rp")}} 要素、または他の <code><rb></code> 要素が続く場合、または親要素に残りのコンテンツがない場合です。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>{{HTMLElement("ruby")}} 要素。</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes" rel="internal">グローバル属性</a>のみがあります。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<ul> + <li>ルビ表記は、日本語の振り仮名や台湾語の注音符号のように、東アジアの文字の発音を示すためのものです。 <code><rb></code> 要素はルビベース文字の区間を区切るために使用されます。</li> + <li><code><rb></code> 要素は空要素ではありませんが、ソースコード上ではそれぞれの要素の開始タグだけを含めるのが一般的で、その方がマークアップが複雑ではなく読みやすくなります。ブラウザーは表示する際に完全な要素に補完します。</li> + <li>修飾をしたいそれぞれのベース区間/<code><rb></code> 要素ごとに一つずつ {{htmlelement("rt")}} 要素を置く必要があります。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例では、元の文字に対して "Kanji" が等価であるという注釈を提供します。</p> + +<pre class="brush: html notranslate"><ruby> + <rb>漢<rb>字 + <rp>(</rp><rt>kan<rt>ji<rp>)</rp> +</ruby></pre> + +<p>ルビのベーステキストを二つの部分に区切るために二つの <code><rb></code> 要素を含めています。一方で、注釈も二つの {{htmlelement("rt")}} 要素で区切っています。</p> + +<p>なお、この例を完全に分割して注釈された二つのベーステキストの部分で書くこともできます。この場合は <code><rb></code> 要素を含める必要はありません。</p> + +<pre class="brush: html notranslate"><ruby> + 漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> + 字 <rp>(</rp><rt>ji</rt><rp>)</rp> +</ruby></pre> + +<div class="hidden"> +<div id="with-ruby"> +<pre class="brush: html notranslate"><ruby> <rb>漢<rb>字 <rp>(</rp><rt>kan<rt>ji<rp>)</rp> </ruby> +</pre> + +<pre class="brush: css notranslate">body { + font-size: 22px; +}</pre> +</div> +</div> + +<p>出力は以下のようになります。</p> + +<p>{{EmbedLiveSample("with-ruby", "100%", 60)}}</p> + +<p>上記の HTML はルビに対応して<em>いない</em>ブラウザーでは次のように表示されます。</p> + +<div id="without-ruby"> +<div class="hidden"> +<pre class="brush: html notranslate">漢字 (kan ji)</pre> + +<pre class="brush: css notranslate">body { + font-size: 22px; +} +</pre> +</div> +</div> + +<p>{{EmbedLiveSample("without-ruby", "100%", 60)}}</p> + +<div class="note"> +<p><strong>注</strong>: それ以外の例は、 {{HTMLElement("ruby")}} 要素についての記事を参照してください。</p> +</div> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-rb-element', '<rb>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.rb")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("ruby")}}</li> + <li>{{HTMLElement("rt")}}</li> + <li>{{HTMLElement("rp")}}</li> + <li> + <p>{{HTMLElement("rtc")}}</p> + </li> +</ul> diff --git a/files/ja/web/html/element/rp/index.html b/files/ja/web/html/element/rp/index.html new file mode 100644 index 0000000000..65c8e85bc1 --- /dev/null +++ b/files/ja/web/html/element/rp/index.html @@ -0,0 +1,144 @@ +--- +title: '<rp>: ルビのフォールバック用括弧要素' +slug: Web/HTML/Element/rp +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Ruby + - Text + - Web +translation_of: Web/HTML/Element/rp +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML のルビ代替表示用括弧 (<code><rp></code>) 要素</strong>は、 {{HTMLElement("ruby")}} 要素によるルビの表示に対応していないブラウザー向けの代替表示用括弧を提供するために使用します。</span> <code><rp></code> 要素は、注釈の文字列を {{HTMLElement("rt")}} 要素を囲む開き括弧と閉じ括弧をそれぞれ囲む必要があります。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/rp.html", "tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td>なし</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>テキスト</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>要素の直後に {{HTMLElement("rt")}} または他の <code><rp></code> 要素が続くとき、または親要素内にそれ以上のコンテンツがない場合は、終了タグを省略可。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>{{HTMLElement("ruby")}} 要素。 <code><rp></code> 要素は {{HTMLElement("rt")}} 要素の直前または直後に配置しなければなりません。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>以外の属性はありません。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<ul> + <li>ルビは日本語のふりがなや台湾語の注音符号など、東アジア言語で発音を示すものです。 <code><rp></code> 要素は {{HTMLElement("ruby")}} 要素に対応していない場合に使用されます。 <code><rp></code> 要素の内容物で、ルビの存在を示すために何を表示すべきか（通常は括弧）を指定します。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例はそれぞれの文字に等価な{{interwiki("wikipedia", "ローマ字")}}を表示するためのにルビを使用しています。</p> + +<div id="with-ruby"> +<pre class="brush: html notranslate"><ruby> + 漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> + 字 <rp>(</rp><rt>ji</rt><rp>)</rp> +</ruby></pre> + +<div class="hidden"> +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">body { + font-size: 22px; +}</pre> +</div> +</div> + +<p>このブラウザーでは次のように見えます。</p> + +<p>{{EmbedLiveSample("with-ruby", 600, 60)}}</p> + +<p>上記の HTML は、ルビの対応が<em>ない</em>ブラウザーで表示すると、このように見えるかもしれません。</p> + +<div id="without-ruby"> +<div class="hidden"> +<pre class="brush: html notranslate">漢 (Kan) 字 (ji)</pre> + +<pre class="brush: css notranslate">body { + font-size: 22px; +} +</pre> +</div> +</div> + +<p>{{EmbedLiveSample("without-ruby", 600, 60)}}</p> + +<p>それ以外の例は、 {{HTMLElement("ruby")}} 要素についての記事を参照してください。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-rp-element', '<rp>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-rp-element', '<rp>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.rp")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("ruby")}}</li> + <li>{{HTMLElement("rt")}}</li> + <li>{{HTMLElement("rb")}}</li> + <li> + <p>{{HTMLElement("rtc")}}</p> + </li> +</ul> diff --git a/files/ja/web/html/element/rt/index.html b/files/ja/web/html/element/rt/index.html new file mode 100644 index 0000000000..d45407e29d --- /dev/null +++ b/files/ja/web/html/element/rt/index.html @@ -0,0 +1,137 @@ +--- +title: '<rt>: ルビ文字列要素' +slug: Web/HTML/Element/rt +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Ruby + - Text + - Web +translation_of: Web/HTML/Element/rt +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML のルビ文字列 (<code><rt></code>) 要素</strong>は、ルビによる注釈（振り仮名）のルビ文字列の部分を定義し、東アジアの組版において発音、翻訳、音写などの情報を提供するために使用します。 <code><rt></code> 要素は常に {{HTMLElement("ruby")}} 要素の中で使用されます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/rt.html", "tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>より多くの例については {{HTMLElement("ruby")}} 要素についての記事を参照してください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td>なし</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{HTMLElement("rt")}} 要素の直後に {{HTMLElement("rt")}} 要素または {{HTMLElement("rp")}} 要素がある場合、または親要素内に他のコンテンツがない場合は終了タグを省略可能。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>{{HTMLElement("ruby")}} 要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">グローバル属性</a>のみがあります。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例では、 {{HTMLElement("ruby")}} 要素内の漢字にローマ字表記を提供します。</p> + +<div id="with-ruby"> +<pre class="brush: html notranslate"><ruby> + 漢 <rt>Kan</rt> + 字 <rt>ji</rt> +</ruby> +</pre> + +<div class="hidden"> +<pre class="brush: css notranslate">body { + font-size: 22px; +} +</pre> +</div> +</div> + +<p>このブラウザーの出力は次のように見えます。</p> + +<p>{{EmbedLiveSample("with-ruby", 600, 60)}}</p> + +<p>ルビに対応して<em>いない</em>ブラウザーでは、この例は次のように見えます。</p> + +<div id="without-ruby"> +<div class="hidden"> +<pre class="brush: html notranslate">漢 Kan 字 ji</pre> + +<pre class="brush: css notranslate">body { + font-size: 22px; +} +</pre> +</div> +</div> + +<p>{{EmbedLiveSample("without-ruby", 600, 60)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-rt-element', '<rt>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-rt-element', '<rt>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.rt")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("ruby")}}</li> + <li>{{HTMLElement("rp")}}</li> + <li>{{HTMLElement("rb")}}</li> + <li>{{HTMLElement("rtc")}}</li> + <li>{{CSSXRef("text-transform", "text-transform: full-size-kana")}}</li> +</ul> diff --git a/files/ja/web/html/element/rtc/index.html b/files/ja/web/html/element/rtc/index.html new file mode 100644 index 0000000000..4c64dbed6e --- /dev/null +++ b/files/ja/web/html/element/rtc/index.html @@ -0,0 +1,124 @@ +--- +title: '<rtc>: ルビ文字列コンテナー要素' +slug: Web/HTML/Element/rtc +tags: + - Element + - HTML + - HTML text-level semantics + - NeedsContent + - Reference + - Ruby Text + - Text + - Web + - rtc +translation_of: Web/HTML/Element/rtc +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML のルビ文字列コンテナー (<code><rtc></code>) 要素</strong>は、 {{HTMLElement("ruby")}} 要素内で使用する {{HTMLElement("rb")}} 要素にルビで与える文字列の、意味を表す注釈を包含します。{{HTMLElement("rb")}} 要素は発音の注釈 ({{HTMLElement("rt")}}) と意味の注釈 ({{HTMLElement("rtc")}}) の両方を持つことができます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/rtc.html", "tabbed-standard")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td>なし</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>または {{HTMLElement("rt")}} 要素</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>直後に {{HTMLElement("rb")}}, {{HTMLElement("rtc")}}, {{HTMLElement("rt")}} 要素の開始タグがある、または親要素の終了タグがある場合は、この要素の終了タグを省略可能。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>{{HTMLElement("ruby")}} 要素</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみがあります。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html highlight[8] notranslate"><div class="info"> + <ruby> + <rbc> + <rb>旧</rb><rt>jiù</rt> + <rb>金</rb><rt>jīn</rt> + <rb>山</rb><rt>shān</rt> + </rbc> + <rtc>San Francisco</rtc> + </ruby> +</div> +</pre> + +<div class="hidden"> +<pre class="brush: css notranslate">.info { + padding-top: 10px; + font-size: 36px; +} +</pre> +</div> + +<p>{{EmbedLiveSample("Example", 600, 120)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML5.2', 'textlevel-semantics.html#the-rtc-element', '<rtc>')}}</td> + <td>{{Spec2('HTML5.2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'textlevel-semantics.html#the-rtc-element', '<rtc>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rtc-element', '<rtc>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.rtc")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("ruby")}}</li> + <li>{{HTMLElement("rp")}}</li> + <li>{{HTMLElement("rb")}}</li> + <li>{{HTMLElement("rt")}}</li> + <li>{{HTMLElement("rbc")}}</li> +</ul> diff --git a/files/ja/web/html/element/ruby/index.html b/files/ja/web/html/element/ruby/index.html new file mode 100644 index 0000000000..6b60c68f58 --- /dev/null +++ b/files/ja/web/html/element/ruby/index.html @@ -0,0 +1,114 @@ +--- +title: <ruby> +slug: Web/HTML/Element/ruby +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web + - 日本語処理 +translation_of: Web/HTML/Element/ruby +--- +<div>{{HTMLRef}}</div> + +<p>The <strong>HTML <code><ruby></code> element</strong> はベーステキストの上、下、隣に描画される小さな注釈で、よく東アジアの文字の発音を表すのに使われます。他の種類の注釈にも使われることがありますが、この使い方はあまり一般的ではありません。</p> + +<p><em>ルビ</em>という言葉は<a href="https://en.wikipedia.org/wiki/Agate_(typography)">写植者が使用した長さの単位</a>に由来しており、読みやすい状態を保ったままテキストを新聞用紙に印刷できる最小のサイズを表します。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/ruby.html", "tabbed-shorter")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/Guide/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみがあります。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Example_1_Character" name="Example_1_Character">例1: 文字ごとのルビ</h3> + +<pre class="brush:html notranslate"><ruby> + 漢 <rp>(</rp><rt>かん</rt><rp>)</rp> + 字 <rp>(</rp><rt>じ</rt><rp>)</rp> +</ruby></pre> + +<h3 id="Example_2_Word" name="Example_2_Word">例2: 熟語のルビ</h3> + +<pre class="brush:html notranslate"><ruby> + 明日 <rp>(</rp><rt>あした</rt><rp>)</rp> +</ruby></pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-ruby-element', '<ruby>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-ruby-element', '<ruby>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.ruby")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("rt")}}</li> + <li>{{HTMLElement("rp")}}</li> + <li>{{HTMLElement("rb")}}</li> + <li>{{HTMLElement("rtc")}}</li> + <li>{{HTMLElement("rbc")}}</li> + <li>{{CSSxRef("text-transform")}}: full-size-kana</li> +</ul> diff --git a/files/ja/web/html/element/s/index.html b/files/ja/web/html/element/s/index.html new file mode 100644 index 0000000000..b47223c7b2 --- /dev/null +++ b/files/ja/web/html/element/s/index.html @@ -0,0 +1,135 @@ +--- +title: <s> +slug: Web/HTML/Element/s +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web + - text-decoration +translation_of: Web/HTML/Element/s +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><s></code> 要素</strong>は取り消し線を引いた文字列を表示します。 <code><s></code> 要素はすでに適切または正確ではなくなった事柄を表現します。しかし、文書の修正を示す場合、 <code><s></code> 要素は適切ではありません。この場合は {{HTMLElement("del")}} と {{HTMLElement("ins")}} の方が適しているので、こちらを使用してください。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/s.html", "tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a></td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみがあります。</p> + +<div class="note"><strong>実装におけるメモ:</strong> Gecko 1.9.2 以前はこの要素に {{domxref("HTMLSpanElement")}} インターフェイスを実装しています。</div> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html notranslate"><s>本日のおすすめ: サーモンカルパッチョ</s> 売り切れ<br> +<span style="text-decoration:line-through;">本日のおすすめ: + サーモンカルパッチョ</span> 売り切れ</pre> + +<p>{{EmbedLiveSample("Examples")}}</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> + +<p><code>s</code> 要素が存在することは、多くの読み上げ技術の既定の設定ではアナウンスされません。 CSS の {{cssxref("content")}} プロパティを、 {{cssxref("::before")}} および {{cssxref("::after")}} 擬似要素と共に使うことでアナウンスさせることができます。</p> + +<pre class="brush: css notranslate">s::before, +s::after { + clip-path: inset(100%); + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + +s::before { + content: " [取り消しテキスト開始] "; +} + +s::after { + content: " [取り消しテキスト終了] "; +} +</pre> + +<p>読み上げソフトを使用する人によっては、特に冗長になるコンテンツのアナウンスを意図的に無効にしていることがあります。このため、この手法を悪用しないようにすることは重要であり、コンテンツが取り消しされていることを知らないと理解に影響するような場面でのみ使用するようにしてください。</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">Short note on making your mark (more accessible) | The Paciello Group</a></li> + <li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html">Tweaking Text Level Styles | Adrian Roselli</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','semantics.html#the-s-element','s element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','textlevel-semantics.html#the-s-element','s element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.s")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("strike")}} 要素は、 {{HTMLElement("s")}} 要素の分身でしたが、廃止されており、もうウェブサイトで使用するべきではありません。</li> + <li>{{HTMLElement("del")}} 要素は、データが<em>削除された</em>場合に代わりに使用するべきものです。</li> + <li>CSS の {{cssxref("text-decoration-line")}} プロパティは、 {{HTMLElement("s")}} 要素の以前の視覚効果を実現します。</li> +</ul> diff --git a/files/ja/web/html/element/samp/index.html b/files/ja/web/html/element/samp/index.html new file mode 100644 index 0000000000..9f3b50130b --- /dev/null +++ b/files/ja/web/html/element/samp/index.html @@ -0,0 +1,166 @@ +--- +title: '<samp>: サンプル出力要素' +slug: Web/HTML/Element/samp +tags: + - Element + - HTML + - HTML text-level semantics + - Inline Sample + - Reference + - Sample Output + - Sample Text + - Web +translation_of: Web/HTML/Element/samp +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML のサンプル要素</strong> (<strong><code><samp></code></strong>) は、コンピュータープログラムからのサンプル出力を表す行内文字列を含めるために使用されます。</span>内容は普通、ブラウザーの既定の等幅フォント（{{interwiki("wikipedia", "en:Courier (typeface)", "Courier")}} や Lucida Console など）を使用して表示されます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/samp.html", "tabbed-shorter")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>以外の属性はありません。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<p>CSS 規則を定義して <code><samp></code> 要素におけるブラウザーの既定フォントを上書きすることができますが、ブラウザーの設定が指定した CSS よりも優先されることもあります。</p> + +<p>既定のフォントを上書きする CSS は次のようになります。</p> + +<pre class="brush: css notranslate">samp { + font-family: "Courier"; +}</pre> + +<div class="note"> +<p>ウェブサイトや JavaScript コードによって生成された出力を含めるコンテナーとして提供する要素が必要であれば、代わりに {{HTMLElement("output")}} 要素を使用してください。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Basic_example" name="Basic_example">基本的な例</h3> + +<p>この単純な例では、段落にプログラムの出力の例を含めます。</p> + +<pre class="brush: html notranslate"><p>When the process is complete, the utility will output the text +<samp>Scan complete. Found <em>N</em> results.</samp> You can then +proceed to the next step.</p></pre> + +<p>結果の出力は次のようになります。</p> + +<p>{{EmbedLiveSample("Basic_example", 650, 100)}}</p> + +<h3 id="Sample_output_including_user_input" name="Sample_output_including_user_input">ユーザー入力を含むサンプル出力</h3> + +<p><code><samp></code> ブロックの中で {{HTMLElement("kbd")}} 要素を使用することで、ユーザーが入力した文字列を含んだ例を表現することができます。例えば、 Linux （または macOS）のコンソールセッションを表現したこのテキストを考えてみてください。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><pre> +<samp><span class="prompt">mike@interwebz:~$</span> <kbd>md5 -s "Hello world"</kbd> +MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62 + +<span class="prompt">mike@interwebz:~$</span> <span class="cursor">█</span></samp></pre></pre> + +<p>なお、 {{HTMLElement("span")}} を使用して、シェルのプロンプトやカーソルのような、サンプル文字列の中にある特定の部分の表示ができるようにしています。また、 <code><kbd></code> を使用して、サンプル文字列の中のプロンプトでユーザーが入力したコマンドを表現しています。</p> + +<h4 id="CSS">CSS</h4> + +<p>実現したい表示を達成するための CSS は次の通りです。</p> + +<pre class="brush: css notranslate">.prompt { + color: #b00; +} + +samp > kbd { + font-weight: bold; +} + +.cursor { + color: #00b; +}</pre> + +<p>これはプロンプトとカーソルにわずかに着色し、サンプル文字列の中のキー入力を太字にしています。</p> + +<h4 id="Result" name="Result">結果</h4> + +<p>結果の出力は次のようになります。</p> + +<p>{{EmbedLiveSample("Sample_output_including_user_input", 650, 120)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-samp-element', '<samp>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-samp-element', '<samp>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<samp>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.samp")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>関連要素: {{HTMLElement("kbd")}}, {{HTMLElement("code")}}, {{HTMLElement("pre")}}</li> + <li>{{HTMLElement("output")}} 要素: スクリプトが生成した出力のためのコンテナー</li> +</ul> diff --git a/files/ja/web/html/element/script/index.html b/files/ja/web/html/element/script/index.html new file mode 100644 index 0000000000..09a6afe979 --- /dev/null +++ b/files/ja/web/html/element/script/index.html @@ -0,0 +1,233 @@ +--- +title: '<script>: スクリプト要素' +slug: Web/HTML/Element/script +tags: + - HTML + - HTML スクリプト + - 'HTML:スクリプト対応要素' + - 'HTML:フローコンテンツ' + - 'HTML:メタデータコンテンツ' + - 'HTML:記述コンテンツ' + - Reference + - Script + - Web + - ウェブ + - スクリプト + - 要素 +translation_of: Web/HTML/Element/script +--- +<p>{{HTMLRef}}</p> + +<p><span class="seoSummary"><strong>HTML の <code><script></code> 要素</strong>は、実行できるコードやデータを埋め込むために使用します。ふつうは JavaScript のコードの埋め込みや参照に使用されます。</span> <code><script></code> 要素は <a href="/ja/docs/Web/API/WebGL_API">WebGL</a> の GLSL shader プログラミング言語、 <a href="/ja/docs/Glossary/JSON">JSON</a> 等の他の言語にも使用することができます。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Metadata_content">メタデータコンテンツ</a>, <a href="/ja/docs/Web/Guide/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/Guide/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><code>text/javascript</code> などの動的スクリプト</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Metadata_content">メタデータコンテンツ</a>を受け入れるすべての要素、または<a href="/ja/docs/Web/Guide/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>許可されている <code>role</code> なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLScriptElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{htmlattrdef("async")}}{{HTMLVersionInline(5)}}</dt> + <dd> + <p>クラシックスクリプトでは、 <code>async</code> 属性があると、クラシックスクリプトが利用可能になったらすぐに並行して読み込み、解析と評価を行います。</p> + + <p><a href="/ja/docs/Web/JavaScript/Guide/Modules">モジュールスクリプト</a>では、 <code>async</code> 属性があると、スクリプトとその依存関係はすべて遅延キューで実行されるので、解析と並行して読み込まれ、利用可能になるとすぐに評価されます。</p> + + <p>この属性は、ブラウザーが解析を一時停止してスクリプトを読み込んで評価しなければならないような<strong>パーサーブロック JavaScript</strong> を排除することを可能にします。 <code>defer</code> はこの場合に同様の効果があります。</p> + + <p>これは論理属性です。論理属性が要素にあれば真の値を表し、属性がなければ偽の値を表します。</p> + + <p>ブラウザーの互換性の状況については{{anch("Browser compatibility", "ブラウザーの互換性")}}をご覧ください。 <a href="/ja/docs/Games/Techniques/Async_scripts">asm.js 向け非同期スクリプト</a>もご覧ください。</p> + </dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>通常の <code>script</code> 要素は標準の {{Glossary("CORS")}} チェックに通らないスクリプトに対して、 {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}} に最小限の情報しか渡しません。別のドメインを使用するサイトに静的メディアへのエラーログ出力ができるようにするためには、この属性を使用してください。有効な値について、詳しくは <a href="/ja/docs/Web/HTML/CORS_settings_attributes">CORS 設定属性</a>をご覧ください。</dd> + <dt>{{htmlattrdef("defer")}}</dt> + <dd> + <p>この論理属性は、スクリプトを文書の解析完了後かつ {{event("DOMContentLoaded")}} が発生する前に実行することをブラウザーに示します。</p> + + <p><code>defer</code> 属性の付いたスクリプトは、スクリプトが読み込まれて評価が完了するまで、 <code>DOMContentLoaded</code> イベントの発生が抑制されます。</p> + + <div class="warning"> + <p>この属性は、 <code>src</code> 属性がない場合 (すなわちインラインスクリプト) に使用してはいけません。そのような場合は効果がありません。</p> + + <p><code>defer</code> 属性は<a href="/ja/docs/Web/JavaScript/Guide/Modules">モジュールスクリプト</a>には効果がありません。 — 既定で延期が行われます。</p> + </div> + + <p><code>defer</code> 属性のあるスクリプトは、文書に現れた順に実行されます。</p> + + <p>この属性により、ブラウザーが解析を一時停止してスクリプトを読み込んで評価しなければならないような、<strong>パーサーブロッキング JavaScript</strong> を排除することができるようになります。 <code>async</code> はこの場合と似た効果があります。</p> + </dd> + <dt>{{htmlattrdef("integrity")}}</dt> + <dd>この属性は、取得したリソースが予期せぬ改ざんを受けずに提供されたかを、ユーザーエージェントが検証するために使用できるメタデータを含みます。 <a href="/ja/docs/Web/Security/Subresource_Integrity">Subresource Integrity</a> をご覧ください。</dd> + <dt>{{htmlattrdef("nomodule")}}</dt> + <dd>この論理属性は、 <a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES2015 モジュール</a>に対応するブラウザーでスクリプトを実行するべきではないことを示します。要するに、モジュール式の JavaScript コードをサポートしない古いブラウザー向けのフォールバックスクリプトを提供するために使用できます。</dd> + <dt>{{htmlattrdef("nonce")}}</dt> + <dd><a href="/ja/docs/Web/HTTP/Headers/Content-Security-Policy/script-src">script-src コンテンツセキュリティポリシー</a>内のスクリプトをホワイトリストに入れるための暗号ノンス (ワンタイム番号) です。サーバーはポリシーを送信するたびに一意のノンス値を生成する必要があります。それ以外の方法でリソースのポリシーのバイパスを推測できないノンスを提供することが重要です。</dd> + <dt id="attr-referrer">{{htmlattrdef("referrerpolicy")}}</dt> + <dd>スクリプトを読み込んだり、スクリプトがリソースを読み込んだりする際に、どの<a href="/ja/docs/Web/API/Document/referrer">リファラー</a>を送信するかを示します。 + <ul> + <li><code>no-referrer</code>: {{HTTPHeader("Referer")}} ヘッダーは送信しません。</li> + <li><code>no-referrer-when-downgrade</code> (既定値): {{HTTPHeader("Referer")}} ヘッダーは、{{Glossary("origin", "オリジン")}}に {{Glossary("TLS")}} ({{Glossary("HTTPS")}}) がない場合には送信しません。</li> + <li><code>origin</code>: 送信するリファラーを、参照しているページのオリジン ({{Glossary("protocol", "スキーム")}}、{{Glossary("host", "ホスト")}}、{{Glossary("port", "ポート番号")}}) のみに制限します。</li> + <li><code>origin-when-cross-origin</code>: 異なるオリジンへの移動ではリファラーをスキーム、ホスト、ポート番号に制限します。同一オリジンへの移動では、リファラーのパスも含めます。</li> + <li><code>same-origin</code>: リファラーは<a href="/en-US/docs/Web/Security/Same-origin_policy">同一オリジン</a>には送信しますが、オリジン間リクエストにはリファラー情報を含めません。</li> + <li><code>strict-origin</code>: プロトコルのセキュリティ水準が同等 (例えば HTTPS→HTTPS) である場合は文書のオリジンのみをリファラーとして送信しますが、宛先の安全性がより低い場合 (例えば HTTPS→HTTP) には送信しません。</li> + <li><code>strict-origin-when-cross-origin</code>: 同一オリジンのリクエストを行う際は URL 全体を送信しますが、プロトコルのセキュリティ水準が同等 (例えば HTTPS→HTTPS) である場合は文書のオリジンのみをリファラーとして送信し、宛先の安全性がより低い場合 (例えば HTTPS→HTTP) にはヘッダーを送信しません。</li> + <li><code>unsafe-url</code>: リファラーはオリジン<em>および</em>パスを含みます (ただし、<a href="/ja/docs/Web/API/HTMLHyperlinkElementUtils/hash">フラグメント</a>、<a href="/ja/docs/Web/API/HTMLHyperlinkElementUtils/password">パスワード</a>、<a href="/ja/docs/Web/API/HTMLHyperlinkElementUtils/username">ユーザー名</a>は含めません)。これはオリジンやパスの情報が TLS で保護されたリソースからセキュアでない生成元へ漏えいしますので、安全ではありません。</li> + </ul> + + <div class="blockIndicator note"> + <p><strong>注</strong>: 既定値および <code>referrerpolicy</code> に対応していない場合の代替値は空文字列 (<code>""</code>) です。 <code>referrerpolicy</code> が <code><script></code> 要素で明示的に指定されていない場合はより高次元、つまり文書全体やドメイン全体のリファラーポリシーに合わせられます。より高次元のポリシーが利用できない場合は、空文字列は <code>no-referrer-when-downgrade</code> と同等のものとして扱われます。</p> + </div> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd> + <p>この属性は外部スクリプトの <abbr>URI</abbr> を指定します。文書に直接スクリプトを埋め込む代わりに使用することができます。</p> + </dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd> + <p>スクリプトを表すタイプを指定します。この属性の値は、以下の種類のいずれかにします。</p> + + <ul> + <li><strong>省略または JavaScript の MIME タイプ:</strong> これはスクリプトが JavaScript であることを示します。 HTML5 仕様書では、冗長な MIME タイプを指定せずに属性を省略するよう主張しています。過去のブラウザーでは埋め込まれている、あるいは (<code>src</code> 属性で) インポートされたコードのスクリプト言語を指定していました。JavaScript の MIME タイプは<a href="/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types#JavaScript_types">仕様書に掲載されています</a>。</li> + <li><strong><code>module</code>:</strong> コードを JavaScript モジュールとして扱います。スクリプトの処理は、<code>charset</code> および <code>defer</code> 属性の影響を受けません。 <code>module</code> の利用についての情報は、 <a href="/ja/docs/Web/JavaScript/Guide/Modules">JavaScript モジュール</a>をご覧ください。クラシックスクリプトとは異なり、モジュールスクリプトはオリジン間のフェッチに CORS プロトコルの使用を必要とします。</li> + <li><strong>その他の値:</strong> このタグで埋め込んだコンテンツを、ブラウザーによって処理されないデータブロックとして扱います。開発者はデータブロックを記述するために、 JavaScript の MIME タイプではない有効な MIME タイプを使用しなければなりません。 <code>src</code> 属性は無視されます。</li> + </ul> + </dd> +</dl> + +<h3 id="Deprecated_attributes" name="Deprecated_attributes">非推奨属性</h3> + +<dl> + <dt>{{htmlattrdef("charset")}} {{Deprecated_inline}}</dt> + <dd>存在する場合、値は ASCII で大文字小文字を区別せずに "<code>utf-8</code>" と一致する文字列でなければなりません。 <code>charset</code> 属性は、文書が UTF-8 でなければならないこと、および <code>script</code> 要素が文書から文字エンコーディングを継承することから、指定する必要はありません。</dd> + <dt>{{htmlattrdef("language")}} {{Deprecated_inline}}</dt> + <dd><code>type</code> 属性と同じように、この属性は使われているスクリプト言語を指定する際に用いられます。しかし、 <code>type</code> 属性とは異なり、この属性に指定可能な値が標準化されませんでした。代わりに <code>type</code> 属性を使用してください。</dd> +</dl> + +<h2 id="Notes" name="Notes">注</h2> + +<p><code>async</code> 属性または <code>defer</code> 属性を持たないスクリプトは、インラインスクリプト同様に、ブラウザーがページの解析を続けるより先に、ただちに読み込みおよび実行されます。</p> + +<p>スクリプトは <code>text/javascript</code> の MIME タイプで提供するべきですが、ブラウザーは寛大であり、画像 (<code>image/*</code>)・動画 (<code>video/*</code>)・音声 (<code>audio/*</code>)・<code>text/csv</code> のタイプで提供されたスクリプトに限りブロックします。スクリプトがブロックされると、 {{event("load")}} イベントではなく {{event("error")}} イベントが発生します。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Basic_usage" name="Basic_usage">基本的な使い方</h3> + +<p>これらの例は <code><script></code> 要素を使用して (外部の) スクリプトをインポートする方法を紹介します。</p> + +<pre class="brush: html notranslate"><script src="javascript.js"></script> +</pre> + +<p>また、以下の例は <code><script></code> 要素内に (インライン) スクリプトを置く方法を示します。</p> + +<pre class="brush: html notranslate"><script> + alert("Hello World!"); +</script></pre> + +<h3 id="モジュールフォールバック">モジュールフォールバック</h3> + +<p>{{htmlattrxref("type", "script")}} 属性で <code>module</code> の値に対応しているブラウザーは、 <code>nomodule</code> 属性の付いたスクリプトを無視します。これによって、モジュールスクリプトを提供しつつ、非対応のブラウザーの場合は <code>nomodule</code> でマークされたフォールバックスクリプトを提供することもできます。</p> + +<pre class="brush: html notranslate"><script type="module" src="main.js"></script> +<script nomodule src="fallback.js"></script></pre> + +<h3 id="Embedding_data_in_HTML" name="Embedding_data_in_HTML">HTML へのデータの埋め込み</h3> + +<p>また、 <code><script></code> 要素を使用して、 <code>type</code> 属性に JavaScript 以外の有効な MIME タイプを指定することで、サーバー側で表現したデータを HTML に埋め込むこともできます。</p> + +<pre class="brush: html notranslate"><code><!-- Generated by the server --> +<script id="data" type="application/json">{"userId":1234,"userName":"John Doe","memberSince":"2000-01-01T00:00:00.000Z"}</script> + +<!-- Static --> +<script> + const userInfo = JSON.parse(document.getElementById("data").text); + console.log("User information: %o", userInfo); +</script></code> +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "scripting.html#the-script-element", "<script>")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>{{HTMLAttrxRef("charset", "script")}} 属性を削除</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "semantics-scripting.html#the-script-element", "<script>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "interact/scripts.html#h-18.2.1", "<script>")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<div>{{Compat("html.elements.script", 2)}}</div> + +<h3 id="Compatibility_notes" name="Compatibility_notes">互換性のメモ</h3> + +<p><code>async</code> 属性に対応していない古いブラウザーでは、パーサーによって挿入されたスクリプトはパーサーをブロックします。スクリプトによって挿入されたスクリプトは、 IE および WebKit では非同期的に実行されますが、 Opera およびバージョン4より前の Firefox では同期的に実行されます。 Firefox 4 では、スクリプトが生成したスクリプトの <code>async</code> DOM プロパティの既定値が <code>true</code> であるため、既定の動作が IE や WebKit の動作に一致します。</p> + +<p><code>document.createElement("script").async</code> が <code>true</code> と評価されるブラウザー (Firefox 4 など) で、スクリプトによって挿入された外部スクリプトを挿入順に実行することを要求するには、順序を制御したいスクリプトに対して <code>async="false"</code> を設定します。</p> + +<div class="warning"> +<p>非同期スクリプトから <code>document.write()</code> を呼び出さないでください。 Firefox 3.6 では <code>document.write()</code> を呼び出すと予期せぬ影響をもたらします。Firefox 4 では <code>async</code> スクリプトから <code>document.write()</code> を呼び出しても効果がありません (エラーコンソールに警告を出力することを除く)。</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("document.currentScript")}}</li> + <li><a href="https://pie.gd/test/script-link-events/">Ryan Grove's <code><script></code> and <code><link></code> node event compatibility chart</a></li> + <li><a href="https://flaviocopes.com/javascript-async-defer/">Flavio Copes' article on loading JavaScript efficiently and explaining the differences between <code>async</code> and <code>defer</code></a></li> + <li><a href="/ja/docs/Web/JavaScript/Guide/Modules">JavaScript モジュール</a>ガイド</li> +</ul> diff --git a/files/ja/web/html/element/section/index.html b/files/ja/web/html/element/section/index.html new file mode 100644 index 0000000000..6c8e43f38f --- /dev/null +++ b/files/ja/web/html/element/section/index.html @@ -0,0 +1,128 @@ +--- +title: '<section>: 汎用セクション要素' +slug: Web/HTML/Element/section +tags: + - HTML + - HTML セクション + - 'HTML:フローコンテンツ' + - 'HTML:区分コンテンツ' + - 'HTML:知覚可能コンテンツ' + - Reference + - ウェブ + - 要素 +translation_of: Web/HTML/Element/section +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><section></code> 要素</strong>は、 HTML 文書の中で単独のセクション (区間) を表します。セクションを表現するより意味的に具体的な要素がない場合に使用します。</span>必ずではありませんが、通常はセクションには見出しがあります。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/section.html", "tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただけるのであれば、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>例えば、ナビゲーションメニューは {{htmlelement("nav")}} 要素で表しますが、検索結果の一覧や地図の表示やコントロールには具体的な要素がないので、 <code><section></code> の中に入れることができます。</p> + +<div class="note"> +<p><strong>メモ:</strong> 要素の内容が個別の記事をまとめたものであれば、 {{HTMLElement("article")}} 要素がより適しているかもしれません。</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Sectioning_content">区分コンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Palpable_content">知覚可能コンテンツ</a></td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素。ただし、 <code><section></code> 要素は {{HTMLElement("address")}} 要素の子孫要素として配置してはならない。</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>{{ARIARole("alert")}}, {{ARIARole("alertdialog")}}, {{ARIARole("application")}}, {{ARIARole("banner")}}, {{ARIARole("complementary")}}, {{ARIARole("contentinfo")}}, {{ARIARole("dialog")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("log")}}, {{ARIARole("main")}}, {{ARIARole("marquee")}}, {{ARIARole("navigation")}}, {{ARIARole("search")}}, {{ARIARole("status")}}, {{ARIARole("tabpanel")}}</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes" rel="internal">グローバル属性</a>のみがあります。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<ul> + <li>それぞれの <code><section></code> は識別可能であるべき、特に <code><section></code> の子要素に見出し ({{HTMLElement('h1')}}-{{HTMLElement('h6')}} 要素) を含めるべきです。</li> + <li><code><section></code> 要素の内容が単独で配信して意味がある場合は、代わりに {{HTMLElement("article")}} 要素を使用してください。</li> + <li><code><section></code> 要素を単なる汎用コンテナーとして使用しないでください。このような場合、特にスタイル付けのみの目的で区切るのは {{HTMLElement("div")}} の役割です。大まかに言えば、 section は文書のアウトラインに論理的に現れるものに使用してください。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="Before" name="Before">導入前</h3> + +<pre class="brush: html"><div> + <h1>Heading</h1> + <p>Bunch of awesome content</p> +</div></pre> + +<h3 id="After" name="After">導入後</h3> + +<pre class="brush: html"><section> + <h1>Heading</h1> + <p>Bunch of awesome content</p> +</section> +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '<section>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.section")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>その他の区分化関連要素: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li> + <li><a href="/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">HTML のセクションとアウトラインの使用</a></li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Region_role">ARIA: Region ロール</a></li> +</ul> diff --git a/files/ja/web/html/element/select/index.html b/files/ja/web/html/element/select/index.html new file mode 100644 index 0000000000..85024c4642 --- /dev/null +++ b/files/ja/web/html/element/select/index.html @@ -0,0 +1,636 @@ +--- +title: '<select>: HTML 選択要素' +slug: Web/HTML/Element/select +tags: + - HTML + - HTML フォーム + - Reference + - events + - ウェブ + - フォーム + - リファレンス + - 要素 +translation_of: Web/HTML/Element/select +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><select></code> 要素</strong>は、選択式のメニューを提供するコントロールを表します。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/select.html", "tabbed-standard")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<p>上のデモは、典型的な <code><select></code> の利用方法を示しています。アクセシビリティのために、 {{htmlelement("label")}} と結び付けられるように <code>id</code> 属性が与えられています。それぞれのメニューの選択肢は、 <code><select></code> の中の {{htmlelement("option")}} 要素で定義されています。</p> + +<p><code><option></code> 要素は、選択肢が選択されたときにサーバーに送信するデータの値を含む {{htmlattrxref("value", "option")}} 属性を持ちます。 <code>value</code> 属性が含まれない場合、既定で要素の中に含まれるテキストの値が使用されます。 <code><option></code> 要素に {{htmlattrxref("selected")}} 属性を付けることで、ページが最初に読み込まれたときに既定で選択状態にすることができます。</p> + +<p><code><select></code> 要素は、複数の選択肢を選択することができるかどうかを定める <code>multiple</code>、同時にいくつの選択肢を表示することができるかを定める <code>size</code> など、制御のために利用することができる固有の属性がいくつかあります。 <code>required</code>, <code>disabled</code>, <code>autofocus</code>, などのような一般のフォーム入力属性の多くも受け付けます。</p> + +<p>さらに、 <code><option></code> 要素を {{htmlelement("optgroup")}} 要素の中に入れることで、ドロップダウンの中で選択肢をグループに分割することができます。</p> + +<p>その他の例は、<a href="/ja/docs/Learn/HTML/Forms/The_native_form_widgets#Drop-down_content">ネイティブフォームウィジェット: ドロップダウンコンテンツ</a>を参照してください。</p> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を持ちます。</p> + +<dl> + <dt>{{htmlattrdef("autocomplete")}}</dt> + <dd>{{domxref("DOMString")}} で、{{Glossary("user agent", "ユーザーエージェント")}}の自動補完機能のヒントを提供します。値の完全なリストや自動補完の使い方の詳細は、 <a href="/ja/docs/Web/HTML/Attributes/autocomplete">HTML の autocomplete 属性</a>を参照してください。</dd> + <dt>{{htmlattrdef("autofocus")}}</dt> + <dd>真偽値属性で、ページが読み込まれた時にこのフォームコントロールが入力フォーカスを持つべきであることを指定することができます。文書内で <code>autofocus</code> 属性を持つことができるフォーム要素は一つだけです。</dd> + <dt>{{htmlattrdef("disabled")}}</dt> + <dd>真偽値属性で、ユーザーがそのコントロールを利用することができないことを示します。もしこの属性が指定されていない場合、コントロールはその設定を親要素、例えば {{htmlelement("fieldset")}} 要素から継承します。もし親要素に <code>disabled</code> 属性を持つものがなければ、そのコントロールは利用可能です。</dd> + <dt>{{htmlattrdef("form")}}</dt> + <dd><code><select></code> を関連付ける {{HTMLElement("form")}} 要素 (<em>フォームオーナー</em>) です。この属性の値は、同じ文書内の <code>form</code> 要素の {{htmlattrxref("id")}} でなければなりません。 (この属性が設定されていない場合は、 <code><select></code> はその祖先である <code><form></code> が存在すればそれと関連付けられます。)</dd> + <dd>この属性によって、 <code><select></code> 要素は、 <code><form></code> 要素の子孫に限らず、文書内のどこの <code><form></code> と結び付けることもできます。これは祖先の <code><form></code> を上書きすることもできます。</dd> + <dt>{{htmlattrdef("multiple")}}</dt> + <dd>真偽値属性で、リストの複数の選択肢を選択することができることを示します。指定されていない場合は、一度に選択することができる選択肢は一つだけです。 <code>multiple</code> が指定されている場合、多くのブラウザーは単一行のドロップダウンの代わりに、スクロールするリストボックスを表示します。</dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd>この属性は、コントロールの名前を指定するために使用します。</dd> + <dt>{{htmlattrdef("required")}}</dt> + <dd>真偽値属性で、空ではない文字列の値の選択肢を選択しなければならないことを示します。</dd> + <dt>{{htmlattrdef("size")}}</dt> + <dd> + <p>コントロールがスクロールするリストボックスとして表示される場合 (つまり、 <code>multiple</code> が指定されている場合)、この属性は一度に見えるべきリストの行数を表します。ブラウザーは、 select 要素をスクロールリストボックスとして提供する必要はありません。既定値は <code>0</code> です。</p> + + <div class="note"><strong>注:</strong> HTML5 の仕様によると、 size 属性の初期値は <code>1</code> であるべきとされています。しかしながら、実際のところは、このことによっていくつかのウェブサイトを壊してしまうことがわかり、他のブラウザーでも現在そうしているものはなく、 Mozilla は当分の間、 Firefox でも <code>0</code> を返し続けることを選択しました。</div> + </dd> +</dl> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<h3 id="Selecting_multiple_options" name="Selecting_multiple_options">複数の項目の選択</h3> + +<p>デスクトップコンピューターでは、 <code><select></code> 要素に <code>multiple</code> 属性がついている場合に、複数の項目を選択する方法がいくつもあります。</p> + +<p>マウスを使用すると、 <kbd>Ctrl</kbd>, <kbd>Command</kbd>, <kbd>Shift</kbd> キー (オペレーティングシステムによって異なります) を押しながらクリックすることで、複数の項目を選択または解除することができます。</p> + +<div class="blockIndicator warning"> +<p><strong>警告</strong>: キーボードから連続していない複数の項目を選択する仕組みは、今のところ Firefox でしか動作しないようです。</p> + +<p><strong>注:</strong> macOS では、 <kbd>Ctrl</kbd> + <kbd>↑</kbd> および <kbd>Ctrl</kbd> + <kbd>↓</kbd> のショートカットが、 OS 既定の <em>Mission Control</em> および <em>Application windows</em> のショートカットと競合するため、動作させるためにはこれらをオフにしなければならないでしょう。</p> +</div> + +<p>キーボードを使用して、連続した複数の項目を選択するには以下のようにします。</p> + +<ul> + <li><code><select></code> 要素にフォーカスを移動します。 (例えば <kbd>Tab</kbd> を使用するなど)。</li> + <li><kbd>↑</kbd> および <kbd>↓</kbd> のカーソルキーを使用して、項目を上下に移動し、選択したい範囲の先頭または末尾の項目を選択する。</li> + <li><kbd>Shift</kbd> キーを押したまま <kbd>↑</kbd> および <kbd>↓</kbd> のカーソルキーを使用して、項目を選択する範囲を増加または減少させる。</li> +</ul> + +<p>キーボードを使用して、連続していない複数の項目を選択するには以下のようにします。</p> + +<ul> + <li><code><select></code> 要素にフォーカスを移動します。 (例えば <kbd>Tab</kbd> を使用するなど)。</li> + <li><kbd>Ctrl</kbd> キーを押したまま <kbd>↑</kbd> および <kbd>↓</kbd> のカーソルキーを使用して「フォーカスのある」選択肢を、選択したいものに移動します。「フォーカスのある」選択肢は、キーボードでリンクをフォーカスしたときと同様に、点線の輪郭線で強調されます。</li> + <li><kbd>スペース</kbd>を押して「フォーカスのある」選択肢を選択または解除します。</li> +</ul> + +<h2 id="Styling_with_CSS" name="Styling_with_CSS">CSS のスタイル付け</h2> + +<p><code><select></code> 要素は、 CSS を使って生産的にスタイル付けすることが困難です。他の要素のように、特定の側面で影響を与えることはできます。 — 例えば、<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Box_model">ボックスモデル</a>や<a href="/ja/docs/Web/CSS/CSS_Fonts">表示されるフォント</a>を操作する、 {{cssxref("appearance")}} プロパティを使用してシステムの既定の <code>appearance</code> を削除することができます。</p> + +<p>しかし、これらのプロパティはブラウザー間で一貫した結果が得られませんし、異なる種類のフォーム要素を互いに一列に並べたりするのは困難なことです。 <code><select></code> 要素の内部構造は複雑で、制御するのは困難です。完全に制御したいのであれば、スタイル付けをするのに優れた機能を備えたライブラリを使用するか、非意味的要素や JavaScript や <a href="/ja/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> をを使用して独自のドロップダウンメニューを実装することを検討してください。</p> + +<p><code><select></code> のスタイル付けについてのさらなる有益な情報は、以下を参照してください。</p> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">HTML フォームのスタイル付け</a></li> + <li><a href="/ja/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">HTML フォームの高度なスタイル付け</a></li> +</ul> + +<p>Also see the "Customizing select styles" example below for an example of you could attempt a simple <code><select></code> styling.</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Basic_select" name="Basic_select">基本的な select</h3> + +<p>以下の例では、とても簡単なドロップダウンメニューを生成し、既定で第二の選択肢を選択状態にしておきます。</p> + +<pre class="brush: html notranslate"><!-- 最初に Second Value が選択されます。 --> +<select name="choice"> + <option value="first">First Value</option> + <option value="second" selected>Second Value</option> + <option value="third">Third Value</option> +</select> +</pre> + +<p>{{EmbedLiveSample("Basic_select", "", "100")}}</p> + +<h3 id="Advanced_select_with_multiple_features" name="Advanced_select_with_multiple_features">高度な複数選択の機能</h3> + +<p>以下の例はもっと複雑で、 <code><select></code> 要素で使用できる機能をもっと示しています。</p> + +<pre class="brush: html notranslate"><label>Please choose one or more pets: + <select name="pets" multiple size="4"> + <optgroup label="4-legged pets"> + <option value="dog">Dog</option> + <option value="cat">Cat</option> + <option value="hamster" disabled>Hamster</option> + </optgroup> + <optgroup label="Flying pets"> + <option value="parrot">Parrot</option> + <option value="macaw">Macaw</option> + <option value="albatross">Albatross</option> + </optgroup> + </select> +</label> +</pre> + +<p>{{EmbedLiveSample("Advanced_select_with_multiple_features", "", "100")}}</p> + +<p>次のことが分かるでしょう。</p> + +<ul> + <li><code>multiple</code> 属性を入れてあるので、複数のオプションを選択することができます。</li> + <li><code>size</code> 属性は、同時に4行だけ表示できるようにします。スクロールしてすべての選択肢を表示することができます。</li> + <li>{{htmlelement("optgroup")}} を入れることで、選択肢を複数のグループに分割しています。これは純粋に視覚的なグループ化であり、視覚表現は通常、太字のグループ名と字下げした選択肢で構成されます。</li> + <li>"Hamster" の選択肢には <code>disabled</code> 属性が入っているので、選択することができません。</li> +</ul> + +<h3 id="Customizing_select_styles" name="Customizing_select_styles">select のスタイルのカスタマイズ</h3> + +<p>この例では、 CSS と JavaScript を使用して <code><select></code> ボックスに広範な独自スタイルを適用する方法を示しています。</p> + +<p>この例では基本的に以下のことを行います。</p> + +<ul> + <li>親ラッパーの <code><select></code> のコンテキスト ({{HTMLElement("option")}}}) を複製し、追加の HTML 要素と JavaScript を使用して標準の期待される動作を再実装します。これには、キーボードアクセシビリティを提供するための基本的なタブの動作が含まれます。</li> + <li>状態と CSS を管理するために、いくつかの標準ネイティブの <code>属性</code> を新しい要素の <code>data-attributes</code> に対応付けします。</li> +</ul> + +<div class="blockIndicator note"> +<p>すべてのネイティブ機能をサポートしているわけではありません。これは標準的な HTML から始まりますが、 JSON データ、カスタム HTML、または他のソリューションから始めても同じ結果を得ることができます。</p> +</div> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Select</title> + </head> + <body> + <form> + <fieldset> + <legend>Standard controls</legend> + <select + name=1A + id=select + autocomplete=off + required + > + <option>Carrots</option> + <option>Peas</option> + <option>Beans</option> + <option>Pneumonoultramicroscopicsilicovolcanoconiosis</option> + </select> + <label for="1B">1B</label> + <select name="1B" multiple size="4" required> + <optgroup label="4-legged pets"> + <option value="dog">Dog</option> + <option value="cat">Cat</option> + <option value="hamster" disabled>Hamster</option> + </optgroup> + <optgroup label="Flying pets"> + <option value="parrot">Parrot</option> + <option value="macaw">Macaw</option> + <option value="albatross">Albatross</option> + </optgroup> + <option value="albatross">Albatross</option> + </select> + <label for="1C">1C</label> + <select name="1C" required> + <option value="first">First Value</option> + <option value="second" selected>Second Value</option> + <option value="third">Third Value</option> + </select> + </fieldset> + <fieldset id=custom> + <legend>Custom controls</legend> + <select + name="2A" + id="select" + autocomplete="off" + required + > + <option>Carrots</option> + <option>Peas</option> + <option>Beans</option> + <option>Pneumonoultramicroscopicsilicovolcanoconiosis</option> + </select> + <label for=2B>2B</label> + <select id=2B name="2B" multiple size="4" required> + <optgroup label="4-legged pets"> + <option value="dog">Dog</option> + <option value="cat">Cat</option> + <option value="hamster" disabled>Hamster</option> + </optgroup> + <optgroup label="Flying pets"> + <option value="parrot">Parrot</option> + <option value="macaw">Macaw</option> + <option value="albatross">Albatross</option> + </optgroup> + </select> + <label for="2C">2C</label> + <select name="2C" required> + <option value="first">First Value</option> + <option value="second" selected>Second Value</option> + <option value="third">Third Value</option> + </select> + </fieldset> + <button type="reset">Reset</button> + <button type="submit">Submit</button> + </form> + <code id=submit></code> + <link rel=stylesheet href=style.css> + <script src="script.js"></script> + </body> +</html></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">body { + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif +} + +.select:focus { + border-color: blue; +} + +html body form fieldset#custom div.select[data-multiple] div.header { + display: none; +} + +html body form fieldset#custom div.select div.header { + content: '↓'; + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding: 0; + position: relative; +} + +html body form fieldset#custom div.select div.header::after { + content: '↓'; + align-self: stretch; + display: flex; + align-content: center; + justify-content: center; + justify-items: center; + align-items: center; + padding: .5em; +} + +html body form fieldset#custom div.select div.header:hover:after { + background-color: blue; +} + +.select .header select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + font-family: inherit; + font-size: inherit; + padding: 0; + border-width: 0; + width: 100%; + flex: 1; + display: none; +} + +.select .header select optgroup { + display: none; +} + +.select select div.option { + display: none; +} + +html body form fieldset#custom div.select { + user-select: none; + box-sizing: border-box; + position: relative; + border-radius: 4px; + border-style: solid; + border-width: 0; + border-color: gray; + width: auto; + display: inline-block; +} + +html body form fieldset#custom div.select:focus { + border-color: blue; +} + +html body form fieldset#custom div.select:hover { + border-color: blue; +} + +html body form fieldset#custom div.select[data-open] { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +html body form fieldset#custom div.select[data-open] datalist { + display: initial; +} + +html body form fieldset#custom div.select datalist { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + position: absolute; + border-style: solid; + border-width: 1px; + border-color: gray; + left: 0; + display: none; + width: 100%; + box-sizing: border-box; + z-index: 2; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; +} + +html body form fieldset#custom div.select datalist div.option { + background-color: white; + margin-bottom: 1px; + cursor: pointer; + padding: 0.5em; + border-width: 0; +} + +html body form fieldset#custom div.select datalist div.option:hover { + background-color: blue; + color: white; +} + +html body form fieldset#custom div.select datalist div.option:focus { + background-color: blue; + color: white; +} + +html body form fieldset#custom div.select datalist div.option:checked { + background-color: blue; + color: white; +} + +html body form fieldset#custom div.select div.optgroup div.option[data-disabled] { + color: gray; +} + +html body form fieldset#custom div.select div.optgroup div.option[data-checked] { + background-color: blue; + color: white; +} + +html body form fieldset#custom div.select div.optgroup div.label { + font-weight: bold; +} + +html body form fieldset#custom div.select div.optgroup div.option div.label { + font-weight: normal; + padding: .25em; +} + +html body form fieldset#custom div.select div.header { + flex: 1; + display: flex; + width: auto; + box-sizing: border-box; + border-width: 1px; + border-style: inherit; + border-color: inherit; + border-radius: inherit; +} + +html body form fieldset#custom div.select div.header span { + flex: 1; + padding: .5em; +} +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js notranslate">const selects = custom.querySelectorAll('select'); +for (const select of selects) { + const div = document.createElement('div'); + const header = document.createElement('div'); + const datalist = document.createElement('datalist'); + const optgroups = select.querySelectorAll('optgroup'); + const span = document.createElement('span'); + const options = select.options; + const parent = select.parentElement; + const multiple = select.hasAttribute('multiple'); + const onclick = function(e) { + const disabled = this.hasAttribute('data-disabled'); + select.value = this.dataset.value; + span.innerText = this.dataset.label; + if (disabled) return; + if (multiple) { + if (e.shiftKey) { + const checked = this.hasAttribute("data-checked"); + if (checked) { + this.removeAttribute("data-checked"); + } else { + this.setAttribute("data-checked", ""); + }; + } else { + const options = div.querySelectorAll('.option'); + for (i = 0; i < options.length; i++) { + const option = options[i]; + option.removeAttribute("data-checked"); + }; + this.setAttribute("data-checked", ""); + }; + }; + }; + const onkeyup = function(e) { + e.preventDefault(); + e.stopPropagation(); + if (e.keyCode === 13) { + this.click(); + } + }; + div.classList.add('select'); + header.classList.add('header'); + div.tabIndex = 1; + select.tabIndex = -1; + span.innerText = select.label; + header.appendChild(span); + for (attribute of select.attributes) div.dataset[attribute.name] = attribute.value; + for (i = 0; i < options.length; i++) { + const option = document.createElement('div'); + const label = document.createElement('div'); + const o = options[i]; + for (attribute of o.attributes) option.dataset[attribute.name] = attribute.value; + option.classList.add('option'); + label.classList.add('label'); + label.innerText = o.label; + option.dataset.value = o.value; + option.dataset.label = o.label; + option.onclick = onclick; + option.onkeyup = onkeyup; + option.tabIndex = i + 1; + option.appendChild(label); + datalist.appendChild(option); + } + div.appendChild(header); + for (o of optgroups) { + const optgroup = document.createElement('div'); + const label = document.createElement('div'); + const options = o.querySelectorAll('option'); + Object.assign(optgroup, o); + optgroup.classList.add('optgroup'); + label.classList.add('label'); + label.innerText = o.label; + optgroup.appendChild(label); + div.appendChild(optgroup); + for (o of options) { + const option = document.createElement('div'); + const label = document.createElement('div'); + for (attribute of o.attributes) option.dataset[attribute.name] = attribute.value; + option.classList.add('option'); + label.classList.add('label'); + label.innerText = o.label; + option.tabIndex = i + 1; + option.dataset.value = o.value; + option.dataset.label = o.label; + option.onclick = onclick; + option.onkeyup = onkeyup; + option.tabIndex = i + 1; + option.appendChild(label); + optgroup.appendChild(option); + }; + }; + div.onclick = function(e) { + e.preventDefault(); + } + parent.insertBefore(div, select); + header.appendChild(select); + div.appendChild(datalist); + datalist.style.top = header.offsetTop + header.offsetHeight + 'px'; + div.onclick = function(e) { + if (multiple) { + + } else { + const open = this.hasAttribute("data-open"); + e.stopPropagation(); + if (open) { + this.removeAttribute("data-open"); + } else { + this.setAttribute("data-open", ""); + } + } + }; + div.onkeyup = function(event) { + event.preventDefault(); + if (event.keyCode === 13) { + this.click(); + } + }; + document.addEventListener('click', function(e) { + if (div.hasAttribute("data-open")) div.removeAttribute("data-open"); + }); + const width = Math.max(...Array.from(options).map(function(e) { + span.innerText = e.label; + return div.offsetWidth; + })); + console.log(width) + div.style.width = width + 'px'; +} +document.forms[0].onsubmit = function(e) { + const data = new FormData(this); + e.preventDefault(); + submit.innerText = JSON.stringify([...data.entries()]); +}</pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample('Customizing_select_styles', '100%', 300)}}</p> + +<h2 id="Technical_summary" name="Technical_summary">技術的概要</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>、<a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>、<a href="/ja/docs/Web/HTML/Content_categories#Interactive_content">対話型コンテンツ</a>、<a href="/ja/docs/Web/HTML/Content_categories#Form_listed">リスト化</a>、<a href="/ja/docs/Web/HTML/Content_categories#Form_labelable">ラベル付け可能</a>、<a href="/ja/docs/Web/HTML/Content_categories#Form_resettable">リセット可能</a>、及び<a href="/ja/docs/Web/HTML/Content_categories#Form_submittable">サブミット可能</a>な<a href="/ja/docs/Web/HTML/Content_categories#Form-associated_">フォーム関連コンテンツ</a>要素</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>0 個以上の {{HTMLElement("option")}} 要素または {{HTMLElement("optgroup")}} 要素</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><code>multiple</code> 属性が<strong>なく</strong>、 1 よりも大きい <code>size</code> 属性が<strong>ない</strong>ならば {{ARIARole("combobox")}}、それ以外の場合は {{ARIARole("listbox")}}</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td><code>multiple</code> 属性が<strong>なく</strong>、 1 よりも大きい <code>size</code> 属性が<strong>ない</strong>ならば {{ARIARole("menu")}}、それ以外の場合は許可されている <code>role</code> はなし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLSelectElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-select-element', '<select>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-select-element', '<select>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<select>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.select")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><code><select></code> で発生するイベント: {{domxref("HTMLElement/change_event", "change")}}, {{domxref("HTMLElement/input_event", "input")}}</li> + <li>{{HTMLElement("option")}} 要素</li> + <li>{{HTMLElement("optgroup")}} 要素</li> +</ul> diff --git a/files/ja/web/html/element/shadow/index.html b/files/ja/web/html/element/shadow/index.html new file mode 100644 index 0000000000..3eb592b41c --- /dev/null +++ b/files/ja/web/html/element/shadow/index.html @@ -0,0 +1,111 @@ +--- +title: '<shadow>: 廃止されたシャドウルート要素' +slug: Web/HTML/Element/Shadow +tags: + - Deprecated + - HTML + - Web Components + - リファレンス + - 要素 +translation_of: Web/HTML/Element/shadow +--- +<p>{{deprecated_header}}</p> + +<p><span class="seoSummary"><strong>HTML <code><shadow></code></strong> 要素 (<a href="/ja/docs/Web/Web_Components">Web Components</a> 技術スイートの廃止された部分) は shadow DOM の {{glossary("insertion point")}} として使用するものでした。</span> shadow ホスト配下に複数の shadow ルートを生成する場合に使用しました。これは通常の HTML としては役立ちません。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories" title="HTML/Content_categories">コンテンツカテゴリー</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Transparent_content_model" title="HTML/Content_categories#Transparent_content_model">透過的コンテンツ</a></td> + </tr> + <tr> + <th scope="row">許可されているコンテンツ</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親コンテンツ</th> + <td>フローコンテンツを受け入れる要素。</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLShadowElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を含みます。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>これは <code><shadow></code> 要素を使用したシンプルな例です。必要な要素がすべて 1 つの HTML ファイルに含まれています。</p> + +<div class="note"> +<p><strong>メモ:</strong> これは実験的な機能です。このコードを実行するには、これを表示するブラウザーが Web Components をサポートしている必要があります。<a href="/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">Enabling Web Components in Firefox</a> を参照してください。</p> +</div> + +<pre class="brush: html"><html> + <head></head> + <body> + + <!-- この <div> は shadow ルートを含みます --> + <div> + <!-- この見出しは表示されません --> + <h4>My Original Heading</h4> + </div> + + <script> + // 上記の <div> コンテンツを取得 + var origContent = document.querySelector('div'); + // 1 つ目の shadow ルートを生成 + var shadowroot1 = origContent.createShadowRoot(); + // 2 つ目の shadow ルートを生成 + var shadowroot2 = origContent.createShadowRoot(); + + // 1 つ目の shadow ルートに要素を挿入 + shadowroot1.innerHTML = + '<p>Older shadow root inserted by + &lt;shadow&gt;</p>'; + // 2 つ目の shadow ルートに <shadow> を含めて挿入。 + // 前のマークアップは <shadow> が使われるまで + // 表示されません + shadowroot2.innerHTML = + '<shadow></shadow> <p>Younger shadow root, displayed because it is the youngest.</p>'; + </script> + + </body> +</html> +</pre> + +<p>ブラウザーで表示した場合、次のように見えるはずです。</p> + +<p><img alt="shadow example" src="https://mdn.mozillademos.org/files/10083/shadow-example.png" style="height: 343px; width: 641px;"></p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<p>この要素はどの仕様書でも定義されていません。</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.elements.shadow")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Web_Components">Web Components</a></li> + <li>{{HTMLElement("content")}}、{{HTMLElement("slot")}}、{{HTMLElement("template")}}、{{HTMLElement("element")}}</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ja/web/html/element/slot/index.html b/files/ja/web/html/element/slot/index.html new file mode 100644 index 0000000000..7c3306b0b7 --- /dev/null +++ b/files/ja/web/html/element/slot/index.html @@ -0,0 +1,122 @@ +--- +title: <slot> +slug: Web/HTML/Element/slot +tags: + - HTML + - HTML ウェブコンポーネント + - Reference + - ウェブコンポーネント + - シャドウ DOM + - 要素 +translation_of: Web/HTML/Element/slot +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><slot></code> 要素</strong> — <a href="/ja/docs/Web/Web_Components">ウェブコンポーネント</a>技術の一部 — は、ウェブコンポーネント内で別な DOM ツリーを構築し、いっしょに表示することができる独自のマークアップを入れることができるプレイスホルダーです。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Transparent_content_model">透過的コンテンツ</a></td> + </tr> + <tr> + <th scope="row">イベント</th> + <td>{{event("slotchange")}}</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>Any element that accepts <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLSlotElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{htmlattrdef("name")}}</dt> + <dd>スロットの名前です。</dd> + <dd><strong><dfn>名前付きスロット</dfn></strong>は、 <code><slot></code> 要素に <code>name</code> 属性が付きます。</dd> +</dl> + +<h2 id="例">例</h2> + +<pre class="brush: html"><template id="element-details-template"> + <style> + details {font-family: "Open Sans Light", Helvetica, Arial, sans-serif } + .name {font-weight: bold; color: #217ac0; font-size: 120% } + h4 { + margin: 10px 0 -8px 0; + background: #217ac0; + color: white; + padding: 2px 6px; + border: 1px solid #cee9f9; + border-radius: 4px; + } + .attributes { margin-left: 22px; font-size: 90% } + .attributes p { margin-left: 16px; font-style: italic } + </style> + <details> + <summary> + <code class="name">&lt;<slot name="element-name">NEED NAME</slot>&gt;</code> + <i class="desc"><slot name="description">NEED DESCRIPTION</slot></i> + </summary> + <div class="attributes"> + <h4>Attributes</h4> + <slot name="attributes"><p>None</p></slot> + </div> + </details> + <hr> +</template></pre> + +<div class="note"> +<p><strong>メモ</strong>: この完全な例は、<a class="external external-icon" href="https://github.com/mdn/web-components-examples/tree/master/element-details" rel="noopener">要素の詳細</a>で実際に動作しています (<a class="external external-icon" href="https://mdn.github.io/web-components-examples/element-details/" rel="noopener">running live</a>ライブ実行もご覧ください)。また、<a href="/ja/docs/Web/Web_Components/Using_templates_and_slots">テンプレートとスロットの利用</a>にも説明があります。</p> +</div> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','scripting.html#the-slot-element','<slot>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#shadow-tree-slots','Slots')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性表は構造化データから作成されています。データに協力したい場合は、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送ってください。</div> + +<p>{{Compat("html.elements.slot")}}</p> diff --git a/files/ja/web/html/element/small/index.html b/files/ja/web/html/element/small/index.html new file mode 100644 index 0000000000..4354502df1 --- /dev/null +++ b/files/ja/web/html/element/small/index.html @@ -0,0 +1,126 @@ +--- +title: '<small>: 附随コメント要素' +slug: Web/HTML/Element/small +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web + - font-size +translation_of: Web/HTML/Element/small +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><small></code> 要素</strong>は、表示上のスタイルとは関係なく、著作権表示や法的表記のような、注釈や小さく表示される文を表します。既定では、 <code>small</code> から <code>x-small</code> のように、一段階小さいフォントでテキストが表示されます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/small.html", "tabbed-shorter")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">コンテンツカテゴリ</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>不可。開始タグと終了タグの両方が必要です。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素、または<a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみがあります。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Basic_usage" name="Basic_usage">基本的な使用</h3> + +<pre class="brush: html notranslate"><p>これは最初の文です。 + <small>この文は小さい文字で表記されています。</small> +</p> +</pre> + +<p>{{EmbedLiveSample("Basic_usage")}}</p> + +<h3 id="CSS_alternative" name="CSS_alternative">CSS による代替</h3> + +<pre class="brush: html notranslate"><p>これは最初の文です。 + <span style="font-size:0.8em">この文は小さい文字で表記されています。 + </span> +</p> +</pre> + +<p>{{EmbedLiveSample("CSS_alternative")}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-small-element', '<small>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-small-element', '<small>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#edef-SMALL', '<small>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Notes" name="Notes">注</h2> + +<p><code><small></code> 要素は {{htmlelement("b")}} 要素や {{htmlelement("i")}} 要素と同様に、構造と表現の分離の原則に反しますが、これら3つの要素は HTML5 で有効です。作者は <code><small></code> を使用するか CSS を使用するかを決める際に最良の判断を行うよう求められます。</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.small")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("b")}}</li> + <li>{{HTMLElement("sub")}} と {{HTMLElement("sup")}}</li> + <li>{{HTMLElement("font")}}</li> + <li>{{HTMLElement("style")}}</li> + <li>HTML 4.01 仕様書: <a class="external" href="https://www.w3.org/TR/html4/present/graphics.html#h-15.2">Font Styles</a></li> +</ul> diff --git a/files/ja/web/html/element/source/index.html b/files/ja/web/html/element/source/index.html new file mode 100644 index 0000000000..bb655588d7 --- /dev/null +++ b/files/ja/web/html/element/source/index.html @@ -0,0 +1,165 @@ +--- +title: '<source>: メディアまたは画像のソース要素' +slug: Web/HTML/Element/source +tags: + - Element + - HTML + - HTML embedded content + - Media + - Reference + - Web + - Web Performance +translation_of: Web/HTML/Element/source +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><source></code> 要素</strong>は、 {{HTMLElement("picture")}} 要素、 {{HTMLElement("audio")}} 要素、 {{HTMLElement("video")}} 要素に対し、複数のメディアリソースを指定します。</span>この要素は空要素であり、つまり中身も閉じタグもありません。<a href="/ja/docs/Web/Media/Formats/Image_types">画像ファイル形式</a>や<a href="/ja/docs/Web/Media/Formats">メディアファイル形式</a>の対応状況が様々であるブラウザーの幅広い互換性を確保するために、同じメディアコンテンツを複数のファイル形式で提供することはよくあることです。</p> + +<p>{{EmbedInteractiveExample("pages/tabbed/source.html", "tabbed-standard")}}</p> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td>なし</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>なし。この要素は{{Glossary("empty element", "空要素")}}です。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>開始タグは必須。終了タグを記述してはならない。</td> + </tr> + <tr> + <th scope="row"><dfn>許可されている親要素</dfn></th> + <td> + <div>メディア要素（{{HTMLElement("audio")}} または {{HTMLelement("video")}}）の場合、どの <a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>または {{HTMLElement("track")}} 要素よりも前に配置する。</div> + + <div>{{HTMLElement("picture")}} 要素の場合、 {{HTMLElement("img")}} 要素より前に配置する。</div> + </td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLSourceElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{htmlattrdef("media")}}</dt> + <dd>リソースの志向するメディアの<a class="internal" href="/ja/docs/Web/CSS/Media_queries">メディアクエリ</a>。この属性は {{HTMLElement("picture")}} 要素の内部でのみ使用します。</dd> + <dt>{{htmlattrdef("sizes")}}</dt> + <dd> + <p>ソースの寸法のリストで、そのソースが表す画像が最終的に表示される幅を表します。それぞれのソースの寸法、条件と長さの組をカンマ区切りで並べたものです。この情報は {{htmlattrxref("srcset", "source")}} で指定された画像を使用する際に、ページのレイアウトを行う前にブラウザーが使用します。なお、 <code>sizes</code> は <code>srcset</code> でピクセル倍率ではなく幅指定子が提供された時 (例えば 2x ではなく 200w の場合) のみ、効果があることに注意してください。</p> + + <p><code>sizes</code> 属性は、 {{HTMLElement("source")}} 要素が {{HTMLElement("picture")}} 要素の子要素である場合にのみ効果があります。</p> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>メディアのリソースの場所であり、 {{HTMLElement("audio")}} および {{HTMLElement("video")}} では必須です。 {{HTMLElement("picture")}} 要素の内部にある <code><source></code> 要素では、この値は無視されます。</dd> + <dt>{{htmlattrdef("srcset")}}</dt> + <dd> + <p>1つ以上の文字列をカンマ区切りで並べたリストであり、ブラウザーが使用できる画像のセットを示します。それぞれの文字列の構成は以下のとおりです。</p> + + <ol> + <li>画像を指定する URL を1つ</li> + <li>幅記述子。これは正の整数に <code>"w"</code> を付加した文字列で、例えば <code>300w</code> のようになります。指定しない場合の既定値は無限大です。</li> + <li>画素密度記述子。これは直後に <code>"x"</code> を付加した正の浮動小数点数です。指定しない場合の既定値は <code>1x</code> です。</li> + </ol> + + <p>リスト内の各々の文字列は、少なくとも幅記述子か画素密度記述子がなければ不正な値になります。リスト内には、幅記述子と画素密度記述子の組が同じ値である文字列を複数置いてはなりません。ブラウザーは、表示する時点でもっとも適切な画像を選択します。</p> + + <p><code>srcset</code> 属性は、 {{HTMLElement("source")}} 要素が {{HTMLElement("picture")}} 要素の子要素である場合にのみ効果があります。</p> + </dd> + <dt>{{htmlattrdef("type")}}</dt> + <dd><a href="/ja/docs/Web/Media/Formats/Image_types">リソースの MIME メディアタイプ</a> で、オプションで <a href="/ja/docs/Web/Media/Formats/codecs_parameter"><code>codecs</code> 引数</a> を伴います。</dd> +</dl> + +<p><code>type</code> 属性が指定されていない場合は、サーバーからメディア形式を取得して、ユーザーエージェントが扱うことができるものであるかどうかを確認します。表示ができない場合は、次の <code><source></code> をチェックします。 <code>type</code> 属性が指定された場合、ユーザーエージェントが表示できる形式と比較し、扱えないものであれば、サーバーはクエリーさえ行わず、次の <code><source></code> 要素をチェックします。</p> + +<p><code><picture></code> コンテキストで使用された場合、ブラウザーは <code><picture></code> 要素の {{HTMLElement("img")}} 子要素で指定された画像は、それぞれの <code><source></code> を評価した後で合う画像がなかった場合に使用されます。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<p><code><source></code> 要素は<strong>空要素</strong>、すなわち内容がないだけでなく、終了タグもありません。すなわち、 "<code></source></code>" は HTML の中で決して使われません。</p> + +<p>ウェブブラウザーが対応している画像形式の詳細と、使用する適切な形式を選択するためのガイダンスについては、ウェブ上で使用する<a href="/ja/docs/Web/Media/Formats/Image_types">画像ファイルの種類と画像のガイド</a>を参照してください。使用できる動画・音声メディアの種類については、<a href="/ja/docs/Web/Media/Formats">ウェブ上で使用するメディアの種類と形式のガイド</a>を参照してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Video_example" name="Video_example">動画の例</h3> + +<p>次の例は、 Ogg 形式に対応したブラウザーと QuickTime 動画形式を再生可能な環境を想定した記述例です。 <code>audio</code> 要素や <code>video</code> 要素に対応していない場合、代わりにメッセージが表示されます。 audio 要素や video 要素には対応していても指定した形式のすべてが再生不可である場合は、 <code>error</code> イベントが発生し、（もしあれば）既定のメディアコントロールがエラーを示します。使用できるメディアファイル形式や、ブラウザーが対応しているメディアファイル形式の詳細については、<a href="/ja/docs/Web/Media/Formats">ウェブ上のメディアの種類と形式についてのガイド</a>を参照してください。</p> + +<pre class="brush: html notranslate"><video controls> + <source src="foo.webm" type="video/webm"> + <source src="foo.ogg" type="video/ogg"> + <source src="foo.mov" type="video/quicktime"> + I'm sorry; your browser doesn't support HTML5 video. +</video> +</pre> + +<p>その他の例については、学習エリアの記事<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">動画と音声のコンテンツ</a>にすばらしいリソースがあります。</p> + +<h3 id="Picture_example" name="Picture_example">図形の例</h3> + +<p>この例では、2つの <code><source></code> 要素が {{HTMLElement("picture")}} 内に含まれており、利用可能な空間の大きさがある幅を超えた時に使用する画像のバージョンを提供します。利用可能な幅がこれらの幅よりも小さい場合、ユーザーエージェントは {{HTMLElement("img")}} 要素で指定された代替画像を表示します。</p> + +<pre class="brush: html notranslate"><picture> + <source srcset="mdn-logo-wide.png" media="(min-width: 800px)"> + <source srcset="mdn-logo-medium.png" media="(min-width: 600px)"> + <img src="mdn-logo-narrow.png" alt="MDN Web Docs"> +</picture> +</pre> + +<p><code><picture></code> 要素では、常に一つの <code><<a href="/ja/docs/Web/HTML/Element/img">img</a>></code> 要素をフォールバック画像として、 <code>alt</code> 属性をアクセシビリティのためにつける必要があります。 (画像が関係のない背景の装飾的な画像でない限り)。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-source-element', '<source>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.source")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Media/Formats">ウェブ上のメディアの種類と形式のガイド</a></li> + <li><a href="/ja/docs/Web/Media/Formats/Image_types">画像ファイルの型と形式のガイド</a></li> + <li>{{HTMLElement("picture")}} 要素</li> + <li>{{HTMLElement("audio")}} 要素</li> + <li>{{HTMLElement("video")}} 要素</li> + <li><a href="/ja/docs/Learn/Performance">ウェブパフォーマンス</a></li> +</ul> diff --git a/files/ja/web/html/element/spacer/index.html b/files/ja/web/html/element/spacer/index.html new file mode 100644 index 0000000000..b22e5804fe --- /dev/null +++ b/files/ja/web/html/element/spacer/index.html @@ -0,0 +1,53 @@ +--- +title: <spacer> +slug: Web/HTML/Element/spacer +tags: + - HTML + - Obsolete + - ウェブ + - リファレンス + - 要素 +translation_of: Web/HTML/Element/spacer +--- +<div>{{non-standard_header}}{{ obsolete_header }}</div> + +<p><span class="seoSummary"><strong><code><spacer></code></strong> は、ウェブページにホワイトスペースを挿入するための廃止された HTML 要素です。ウェブデザイナーによって用いられていた 1px の透過 GIF 画像 (いわゆる<strong>スペーサー GIF</strong>) の挿入と同様の効果を実現するために Netscape 社が実装したものです。しかし <code><spacer></code> はほとんどの主要ブラウザーで対応されず、また、同様の効果は CSS を用いて実現可能です。</span></p> + +<p>Netscape のブラウザーの子孫である Firefox は、バージョン 4 で <code><spacer></code> の対応を廃止しました。</p> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>すべての要素が持つ <a href="/ja/docs/HTML/Global_attributes" title="HTML/Global attributes">グローバル属性</a> と、以下の属性をサポートしていました。</p> + +<dl> + <dt>{{ htmlattrdef("type") }}</dt> + <dd>スペーサーの種類を設定。 <code>horizontal</code>, <code>vertical</code>, <code>block</code> の内のいずれかのキーワードを指定可能。</dd> + <dt>{{ htmlattrdef("size") }}</dt> + <dd><code>type</code> 属性の値が <code>horizontal</code> または <code>vertical</code> である場合の、スペーサーのピクセルサイズ</dd> + <dt>{{ htmlattrdef("width") }}</dt> + <dd><code>type</code> 属性の値が <code>block</code> である場合、スペーサーのピクセル幅を設定</dd> + <dt>{{ htmlattrdef("height") }}</dt> + <dd><code>type</code> 属性の値が <code>block</code> である場合、スペーサーのピクセル高を設定</dd> + <dt>{{ htmlattrdef("align") }}</dt> + <dd>スペーサーの配置を設定。<code>left</code>、 <code>right</code>、 <code>center</code> の内のいずれかのキーワードを指定可能。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:html"><span>テキストノード</span> +<spacer type="horizontal" size="10"></spacer> +<span>別のテキストノード</span> +<spacer type="block" width="10" height="10"></spacer> +</pre> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<p>どの仕様書にも含まれていません。</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されます。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.elements.spacer")}}</p> + +<p>{{ HTMLRef }}</p> diff --git a/files/ja/web/html/element/span/index.html b/files/ja/web/html/element/span/index.html new file mode 100644 index 0000000000..4d6b3b01cc --- /dev/null +++ b/files/ja/web/html/element/span/index.html @@ -0,0 +1,129 @@ +--- +title: <span> +slug: Web/HTML/Element/span +tags: + - Element + - HTML + - HTML text-level semantics + - 'HTML:Flow content' + - Reference + - Web +translation_of: Web/HTML/Element/span +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><span></code> 要素</strong>は、記述コンテンツの汎用的な行内コンテナーであり、何かを表すものではありません。スタイル付けのため ({{htmlattrxref("class")}} または {{htmlattrxref("id")}} 属性を使用して)、または {{htmlattrxref("lang")}} のような属性値を共有したりするために要素をグループ化する用途で使用することができます。</span>他に適切な意味的要素がない時にのみ使用してください。 <code><span></code> は {{HTMLElement("div")}} 要素ととても似ていますが、 {{HTMLElement("div")}} が<a href="/ja/docs/Web/HTML/Block-level_elements">ブロックレベル要素</a>であるのに対し、 <code><span></code> は<a href="/ja/docs/Web/HTML/Inline_elements">インライン要素</a>です。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/span.html", "tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素、または<a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLSpanElement")}} ({{glossary("HTML5")}} より前は {{domxref("HTMLElement")}})</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみがあります。</p> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="Example_1" name="Example_1">例 1</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush:html gutter:false notranslate"><p><span>Some text</span></p></pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample('Example_1')}}</p> + +<h3 id="Example_2" name="Example_2">例 2</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush:html gutter:false notranslate"><li><span> + <a href="portfolio.html" target="_blank">See my portfolio</a> +</span></li> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">li span { + background: gold; + } +</pre> + +<h4 id="Result_2" name="Result_2">結果</h4> + +<p>{{EmbedLiveSample('Example_2')}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-span-element', '<span>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-span-element', '<span>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>{{glossary("DOM")}} インターフェイスを {{domxref("HTMLSpanElement")}} に変更</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#edef-SPAN', '<span>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.span")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>HTML の {{HTMLElement("div")}} 要素</li> +</ul> diff --git a/files/ja/web/html/element/strike/index.html b/files/ja/web/html/element/strike/index.html new file mode 100644 index 0000000000..b76db908ce --- /dev/null +++ b/files/ja/web/html/element/strike/index.html @@ -0,0 +1,79 @@ +--- +title: <strike> +slug: Web/HTML/Element/strike +tags: + - Element + - HTML + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/strike +--- +<p>{{HTMLRef}}{{Obsolete_header("HTML5")}}</p> + +<p><strong>HTML の <code><strike></code> 要素</strong> (または <em>HTML 取り消し線要素</em>) は、テキストの上に取り消し線 (水平線) を配置します。</p> + +<div class="blockIndicator note"> +<p><strong>使用上のメモ:</strong> この要素は HTML 4 および XHTML 1 で非推奨になり、 HTML5 で廃止されました。意味的に適切であれば、すなわち、<em>削除された</em>コンテンツを表すのであれば、代わりに {{HTMLElement("del")}} を使用してください。それ以外の場合は {{HTMLElement("s")}} を使用してください。</p> +</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{DOMxRef("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:html notranslate">&lt;strike&gt;: <strike>今日のおすすめ: サーモン</strike> 売り切れ<br /> +&lt;s&gt;: <s>今日のおすすめ: サーモン</s> 売り切れ +</pre> + +<p id="Result">このコードの表示結果は次の通りです。</p> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML5 W3C", "obsolete.html#strike", "<strike>")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>{{HTMLElement("del")}} および {{HTMLElement("s")}} に置き換えて廃止。</td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "/present/graphics.html#edef-STRIKE", "<strike>")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td>{{HTMLElement("del")}} および {{HTMLElement("s")}} に置き換えて非推奨化。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.strike")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("s")}} 要素</li> + <li>{{HTMLElement("del")}} 要素 (データが<em>削除された</em>場合に使用)</li> + <li>CSS の {{cssxref("text-decoration")}} プロパティ (打消し線のスタイルを実現するために用いることができる)</li> +</ul> diff --git a/files/ja/web/html/element/strong/index.html b/files/ja/web/html/element/strong/index.html new file mode 100644 index 0000000000..b5c3eaa660 --- /dev/null +++ b/files/ja/web/html/element/strong/index.html @@ -0,0 +1,146 @@ +--- +title: '<strong>: 強い重要性要素' +slug: Web/HTML/Element/strong +tags: + - Element + - HTML + - HTML text-level semantics + - 'HTML:Flow content' + - 'HTML:Palpable Content' + - 'HTML:Phrasing content' + - Reference + - Strong Importance + - Urgency + - Web + - strong +translation_of: Web/HTML/Element/strong +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">HTML の<strong>強い重要性要素</strong> (<strong><code><strong></code></strong>) は、内容の重要性、重大性、または緊急性が高いテキストを表します。ブラウザーは一般的に太字で描画します。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/strong.html", "tabbed-shorter")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>なし、開始タグと終了タグの両方が必要。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素、または<a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみがあります。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<p><code><strong></code> 要素は「強い重要性」のある内容、つまり (警告など) 高い重大性や緊急性のある物事のためのものです。これは、ページ全体にとって非常に重要な文である可能性があります。または、いくつかの単語が周囲のコンテンツと比較して重要であると指摘することができます。</p> + +<p>通常、この要素は既定で太字で表示されます。しかし、単に太字にするために使用<em>しない</em>でください。そのような用途には CSS の {{cssxref("font-weight")}} プロパティを使用してください。高い水準の重要性を示すことなく、あるテキストに注意を引かせたい場合は {{HTMLElement("b")}} 要素を使用してください。強調する文字列をマークしたい場合は {{HTMLElement("em")}} 要素を使用してください。</p> + +<p>他に、ページのテキストの中でメモや警告を表す段落のラベルを記述することも <code><strong></code> の許容される使い方です。</p> + +<h3 id="<b>_vs._<strong>" name="<b>_vs._<strong>"><b> と <strong></h3> + +<p>新しい開発者をよく悩ませることが、ウェブサイトの表示において同じことを表現するために、なぜたくさんの方法があるかということです。 {{HTMLElement("b")}} と <code><strong></code> はもっともよくある混乱の源で、開発者に「<code><b></code> と <code><strong></code> のどちらを使えばいいんですか？どちらも同じことをするんでしょう？」という疑問を起こします。</p> + +<p>それは正しくありません。 <code><strong></code> 要素はより高い重要性を持つコンテンツのためのものであるのに対し、 <code><b></code> 要素はより重要であるという意味なしに、テキストに注意を引かせるために使用します。</p> + +<p>HTML5 ではどちらも有効で意味のある要素であり、ほとんどのブラウザーでは、同じ既定のスタイル (太字) が使用されていることは間違いありません (ただし、古いブラウザーの中には <code><strong></code> に下線を引くものもあります)。それぞれの要素は特定の種類のシナリオで使用するためのものです。単に装飾のために太字のテキストを使用する場合は、代わりに CSS の {{cssxref("font-weight")}} プロパティを使用してください。</p> + +<p>囲まれたテキストの意図された意味または目的によって、使用する要素を決定してください。伝えられる意味がどのような意味であるかがすべてです。</p> + +<h3 id="<em>_vs._<strong>" name="<em>_vs._<strong>"><em> と <strong></h3> + +<p>この混乱に加えて、 HTML 4 では <code><strong></code> を単により強い強調としていましたが、 HTML 5 では <code><strong></code> を「内容の強い重要性」を表すもの定義しています。これは重要な違いです。</p> + +<p><code><em></code> が (「私はにんじんが<em>好きです<em>」と「私は<em>にんじんが<em>好きです」のように) 発音の強調によって文の意味が変わる場合に使用するのに対し、 <code><strong></code> は (例えば「<strong>警告！</strong>これは<strong>とても危険です</strong>」のように) 文の一部に重要性を加えるために使用します。 <code><strong></code> と <code><em></code> のどちらも入れ子にして、それぞれ相対的な重要度や強調度を高めるためことができます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Basic_example" name="Basic_example">基本的な例</h3> + +<pre class="brush: html notranslate"><p>Before proceeding, <strong>make sure you put on your safety goggles</strong>.</p></pre> + +<p>結果は次のようになります。</p> + +<p>{{EmbedLiveSample("Basic_example", 650, 80)}}</p> + +<h3 id="Labeling_warnings" name="Labeling_warnings">警告のラベル表示</h3> + +<pre class="brush: html notranslate"><p><strong>Important:</strong> Before proceeding, make sure you add plenty of butter.</p></pre> + +<p>結果は次のようになります。</p> + +<p>{{EmbedLiveSample("Labeling_warnings", 650, 80)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-strong-element', '<strong>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-strong-element', '<strong>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#edef-STRONG', '<strong>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.strong")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("b")}} 要素</li> + <li>{{HTMLElement("em")}} 要素</li> + <li>{{cssxref("font-weight")}} プロパティ</li> +</ul> diff --git a/files/ja/web/html/element/style/index.html b/files/ja/web/html/element/style/index.html new file mode 100644 index 0000000000..57bd7bc7ba --- /dev/null +++ b/files/ja/web/html/element/style/index.html @@ -0,0 +1,209 @@ +--- +title: '<style>: スタイル情報要素' +slug: Web/HTML/Element/style +tags: + - CSS + - Element + - HTML + - HTML document metadata + - Reference + - Style + - Web +translation_of: Web/HTML/Element/style +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><style></code> 要素</strong>は、文書あるいは文書の一部分のスタイル情報を含みます。</span> <code><style></code> 要素を含んでいる文書のコンテンツに適用される CSS を含みます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/style.html", "tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p><code><style></code> 要素は文書の {{htmlelement("head")}} 要素の中に入れる必要があります。一般に、スタイルを外部スタイルシートに入れて {{htmlelement("link")}} 要素を使用することをより推奨します。</p> + +<p>文書に複数の <code><style></code> 及び <code><link></code> が含まれている場合、これらは含まれている文書の DOM 上の順序で適用されます。 — 予期しないカスケード問題を防ぐために、含まれている順序が正しいことを確認してください。</p> + +<p><code><link></code> 要素と同じ方法で、 <code><style></code> 要素に <code>media</code> 属性を付けて<a href="/ja/docs/Web/CSS/Media_Queries">メディアクエリ</a>を含めると、ビューポートの幅などのメディア特性に依存して内部スタイルシートを選択的に適用することができます。</p> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/HTML/Global_attributes" title="HTML/Global attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{htmlattrdef("type")}}</dt> + <dd>この属性は、スタイル言語を MIME タイプで定義します (文字セットは指定すべきではありません)。この属性は省略可能であり、省略した場合の既定値は <code>text/css</code> です。空文字列と <code>text/css</code> 以外の値は使用されません。 <strong>注:</strong> 現代のウェブ文書では、この属性を含める理由はほとんどありません。</dd> + <dt>{{htmlattrdef("media")}}</dt> + <dd>この属性はスタイルを適用するメディアを定義します。値は<a href="/ja/docs/Web/Guide/CSS/Media_queries">メディアクエリ</a>であり、省略した場合の既定値は <code>all</code> です。</dd> + <dt>{{htmlattrdef("nonce")}}</dt> + <dd><a href="/ja/docs/Web/HTTP/Headers/Content-Security-Policy/script-src">script-src コンテンツセキュリティポリシー</a>内の行内スクリプトをホワイトリストに入れるために使われる暗号ノンス (ワンタイム番号) です。サーバーはポリシーを送信するたびに一意のノンス値を生成する必要があります。それ以外の方法でリソースのポリシーのバイパスとして推測できないノンスを提供することが重要です。</dd> + <dt>{{htmlattrdef("title")}}</dt> + <dd>この属性は<a href="/ja/docs/Web/CSS/Alternative_style_sheets">代替スタイルシート</a>のセットを指定します。</dd> +</dl> + +<h3 id="Deprecated_attributes" name="Deprecated_attributes">非推奨の属性</h3> + +<dl> + <dt>{{htmlattrdef("scoped")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd> + <p>この属性が指定された場合、スタイルは、その親要素および親要素の子要素にのみ適用されます。</p> + + <div class="note"> + <p>この属性は、 <a href="https://github.com/w3c/csswg-drafts/issues/3547">https://github.com/w3c/csswg-drafts/issues/3547</a> により、将来再導入されるかもしれません。今この属性を使用したい場合は、<a href="https://github.com/samthor/scoped">ポリフィル</a>を利用することができます。</p> + </div> + </dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="A_simple_stylesheet" name="A_simple_stylesheet">単純なスタイルシート</h3> + +<p>以下の例では、文書にとても単純なスタイルシートを適用します。</p> + +<pre class="brush:html notranslate"><!doctype html> +<html> +<head> + <style> + p { + color: red; + } + </style> +</head> +<body> + <p>This is my paragraph.</p> +</body> +</html></pre> + +<p>{{EmbedLiveSample('A_simple_stylesheet', '100%', '60')}}</p> + +<h3 id="Multiple_style_elements" name="Multiple_style_elements">複数の style 要素</h3> + +<p>この例には、二つの <code><style></code> 要素が含まれています。 — 競合する宣言は、<a href="/ja/docs/Web/CSS/Specificity">詳細度</a>が同じであれば、後の <code><style></code> 要素が優先されることに注意してください。</p> + +<pre class="brush:html notranslate"><!doctype html> +<html> +<head> + <style> + p { + color: white; + background-color: blue; + padding: 5px; + border: 1px solid black; + } + </style> + <style> + p { + color: blue; + background-color: yellow; + } + </style> +</head> +<body> + <p>This is my paragraph.</p> +</body> +</html></pre> + +<p>{{EmbedLiveSample('Multiple_style_elements', '100%', '60')}}</p> + +<h3 id="Including_a_media_query" name="Including_a_media_query">メディアクエリが含まれるもの</h3> + +<p>この例では一つ前に作ったものに対して、二番目の <code><style></code> 要素に <code>media</code> 属性を設定してあるので、ビューポートが 500px 未満の場合のみ適用されるようにします。</p> + +<pre class="brush:html notranslate"><!doctype html> +<html> +<head> + <style> + p { + color: white; + background-color: blue; + padding: 5px; + border: 1px solid black; + } + </style> + <style media="all and (max-width: 500px)"> + p { + color: blue; + background-color: yellow; + } + </style> +</head> +<body> + <p>This is my paragraph.</p> +</body> +</html></pre> + +<p>{{EmbedLiveSample('Including_a_media_query', '100%', '60')}}</p> + +<h2 id="Technical_summary" name="Technical_summary">技術的概要</h2> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Metadata_content">メタデータコンテンツ</a>、 <code>scoped</code> 属性が提供された場合: <a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a></td> + </tr> + <tr> + <th>許可されている内容</th> + <td><code>type</code> 属性に合致するテキストコンテンツ、すなわち <code>text/css</code>。</td> + </tr> + <tr> + <th>タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th>許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Metadata_content">メタデータコンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>許可されている <code>role</code> なし</td> + </tr> + <tr> + <th>DOM インターフェイス</th> + <td>{{domxref("HTMLStyleElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{ SpecName('HTML WHATWG', 'semantics.html#the-style-element', 'style') }}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td></td> + </tr> + <tr> + <td>{{ SpecName('HTML5 W3C', 'document-metadata.html#the-style-element', 'style') }}</td> + <td>{{ Spec2('HTML5 W3C') }}</td> + <td><code>type</code> 属性が省略可能になった。</td> + </tr> + <tr> + <td>{{ SpecName('HTML4.01', 'present/styles.html#h-14.2.3', 'style') }}</td> + <td>{{ Spec2('HTML4.01') }}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.style")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>文書に外部スタイルシートを適用することができる {{HTMLElement("link")}} 要素</li> + <li><a href="/ja/docs/Web/CSS/Alternative_style_sheets">代替スタイルシート</a></li> +</ul> diff --git a/files/ja/web/html/element/sub/index.html b/files/ja/web/html/element/sub/index.html new file mode 100644 index 0000000000..d4b97da114 --- /dev/null +++ b/files/ja/web/html/element/sub/index.html @@ -0,0 +1,153 @@ +--- +title: '<sub>: 下付き文字要素' +slug: Web/HTML/Element/sub +tags: + - Baseline + - Element + - Footnotes + - HTML + - HTML text-level semantics + - 'HTML:Flow content' + - 'HTML:Palpable Content' + - 'HTML:Phrasing content' + - Reference + - Subscript + - Web + - sub +translation_of: Web/HTML/Element/sub +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">HTML の <strong>下付き文字要素</strong> (<strong><code><sub></code></strong>) は、表記上の理由で下付き文字として表示するべき行内文字列を指定します。</span>下付き文字は普通、小さめのテキストを使用してベースラインよりも低く表示されます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/sub.html", "tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>以外の属性はありません。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<p><code><sub></code> 要素は、単純に表現や表示の結果を得るためではなく、表記規則上の理由、つまり、表記上の習慣や規則でテキストの位置を変更する必要がある場合にのみ使用してください。</p> + +<p>例えば、変更したベースラインを{{interwiki("wikipedia", "ワードマーク")}}の中で使用している企業名にスタイル付けするために <code><sub></code> を使用することは適切ではありません。このような場合には CSS を使用してください (例えば {{cssxref("vertical-align")}} プロパティを、 <code>vertical-align: sub</code> または、もっと詳細にベースラインの位置を制御するために、 <code>vertical-align: -25%</code> など)。</p> + +<p><code><sub></code> の適切な利用場面には次のようなものがあります (これに限定されるものでありません)。</p> + +<ul> + <li>脚注番号のマークアップ。例については {{anch("Footnote numbers")}} を参照してください。</li> + <li>数学における下付き文字の変数値のマークアップ（ただし、 <a href="/ja/docs/Web/MathML">MathML</a> の数式を使うことも検討してください）。 {{anch("Variable subscripts")}} を参照してください。</li> + <li>化学式における原子数の記述 (例えば、すべての開発者のお友達、 C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub> 別名「カフェイン」)。 {{anch("Chemical formulas")}} を参照してください。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Footnote_numbers" name="Footnote_numbers">脚注番号</h3> + +<p>伝統的な脚注は下付き文字で表示される番号を使って記述されます。これは <code><sub></code> のよくある使い方です。</p> + +<pre class="brush: html notranslate"><p>According to the computations by Nakamura, Johnson, and +Mason<sub>1</sub> this will result in the complete annihilation +of both particles.</p></pre> + +<p>結果は次のようになります。</p> + +<p>{{EmbedLiveSample("Footnote_numbers", 650, 80)}}</p> + +<h3 id="Variable_subscripts" name="Variable_subscripts">変数の下付き文字</h3> + +<p>数学では、同じ概念に関連する一連の変数 (例えば同じ軸の距離) を、同じ変数名と下付き文字を使用して表現します。例えば以下のようになります。</p> + +<pre class="brush: html notranslate"><p>The horizontal coordinates' positions along the X-axis are +represented as <var>x<sub>1</sub></var> ... <var>x<sub>n</sub></var>.</p></pre> + +<p>出力は次の通りです。</p> + +<p>{{EmbedLiveSample("Variable_subscripts", 650, 80)}}</p> + +<h3 id="Chemical_formulas" name="Chemical_formulas">化学式</h3> + +<p>化学式を書くときは、 H<sub>2</sub>0 のように、分子の記述の中で原子の数を下付き数字で記述します。水の場合、下付きの "2" は、水分子の中に2つの水素原子があることを表します。</p> + +<p>他の例です。</p> + +<pre class="brush: html notranslate"><p>ほぼすべての開発者が大好きな分子は +C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>、 +「カフェイン」としてよく知られています。</p></pre> + +<p>出力は次の通りです。</p> + +<p>{{EmbedLiveSample("Chemical_formulas", 650, 120)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-sub-and-sup-elements', '<sub> and <sup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-sub-and-sup-elements', '<sub> and <sup>;')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.sub")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>上付き文字を表現する HTML の {{HTMLElement("sup")}} 要素。sub 要素と同時に使用することはできません。化学式で上付き文字と下付き文字の両方が必要な場合には、<a href="/ja/docs/MathML">MathML</a> を用いる必要があります。</li> + <li>MathML 要素: <a href="/ja/docs/Web/MathML/Element/msub"><code><msub></code></a>, <a href="/ja/docs/Web/MathML/Element/msup"><code><msup></code></a>, <a href="/ja/docs/Web/MathML/Element/msubsup"><code><msubsup></code></a></li> + <li>CSS の {{cssxref("vertical-align")}} プロパティ</li> +</ul> diff --git a/files/ja/web/html/element/summary/index.html b/files/ja/web/html/element/summary/index.html new file mode 100644 index 0000000000..d89d19b986 --- /dev/null +++ b/files/ja/web/html/element/summary/index.html @@ -0,0 +1,164 @@ +--- +title: '<summary>: 概要明示要素' +slug: Web/HTML/Element/summary +tags: + - Disclosure Box + - Disclosure Control + - Disclosure Summary + - Element + - HTML + - HTML interactive elements + - Reference + - Summary + - Web +translation_of: Web/HTML/Element/summary +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の概要明示要素</strong> (<strong><code><summary></code></strong>) は、 {{HTMLElement("details")}} 要素の内容の要約、キャプション、説明、凡例を表します。</span> <code><summary></code> 要素をクリックすると、親の <code><details></code> 要素の開閉状態を切り替えることができます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/summary.html","tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>。または <a href="/ja/docs/Web/Guide/HTML/Content_categories#Heading_content">見出しコンテンツ</a> のうちひとつの要素</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>不可。開始タグと終了タグの両方が必要。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>{{HTMLElement("details")}} 要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>許可されている <code>role</code> なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみを持ちます。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<p><code><summary></code> 要素の中身には、見出しコンテンツ、プレーンテキスト、段落内で使用できる HTML が入れられます。</p> + +<p><code><summary></code> 要素は、 <code><details></code> 要素の最初の子として<em>のみ</em>使用できます。ユーザーが概要をクリックすると、親の <code><details></code> 要素が開閉し、 <code><details></code> 要素に {{event("toggle")}} イベントが送信され、状態が変化したことを知るために使用することができます。</p> + +<h3 id="Default_label_text" name="Default_label_text">既定のラベルテキスト</h3> + +<p><code><details></code> 要素の最初の子が <code><summary></code> 要素でない場合、{{Glossary("user agent", "ユーザーエージェント")}}は既定の文字列 (ふつうは「詳細」) を折りたたみボックスのラベルとして使用します。</p> + +<h3 id="Default_style" name="Default_style">既定のスタイル</h3> + +<p>HTML 標準では、<code><summary></code> の既定のスタイルに <code>display:list-item</code> が含まれています。これで、ラベルの隣に既定で (多くは三角形で) 表示される折りたたみウィジェットのとして表示さえるアイコンを変更したり削除したりすることができます。</p> + +<p>スタイルを <code>display:block</code> に変更すると、展開用の三角印を削除することができます。</p> + +<p>詳しくは{{anch("Browser compatibility", "ブラウザーの互換性")}}の節をご覧ください。すべてのブラウザーがこの要素の機能すべてに対応しているわけではありません。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>以下に <code><summary></code> を使用している例をいくつか示します。 {{HTMLElement("details")}} 要素のドキュメントにもいくつか例があります。</p> + +<h3 id="Basic_example" name="Basic_example">基本的な例</h3> + +<p>{{HTMLElement("details")}} 要素の中で <code><summary></code> の使用を示す簡単な例です。</p> + +<pre class="brush: html notranslate"><details open> + <summary>Overview</summary> + <ol> + <li>Cash on hand: $500.00</li> + <li>Current invoice: $75.30</li> + <li>Due date: 5/6/19</li> + </ol> +</details></pre> + +<p>{{EmbedLiveSample("Basic_example", 650, 120)}}</p> + +<h3 id="Summaries_as_headings" name="Summaries_as_headings">見出しとしての概要</h3> + +<p>次のように、 <code><summary></code> の中で見出し要素を使用することができます。</p> + +<pre class="brush: html notranslate"><details open> + <summary><h4>Overview</h4></summary> + <ol> + <li>Cash on hand: $500.00</li> + <li>Current invoice: $75.30</li> + <li>Due date: 5/6/19</li> + </ol> +</details></pre> + +<p>{{EmbedLiveSample("Summaries_as_headings", 650, 120)}}</p> + +<p>これは現在のところ、間隔の問題をいくつか抱えており、 CSS を使用して修正することができます。</p> + +<div class="blockIndicator warning"> +<p><strong>警告:</strong> <code><summary></code> 要素の既定のロールは <a href="/ja/docs/Web/Accessibility/ARIA/Roles/button_role">button</a> (子要素からはすべてのロールを外す) ですので、この例は読み上げソフトのような支援技術のユーザーには動作しません。 <code><h4></code> のロールが削除されますので、これらのユーザーからは見出しとして扱われなくなります。</p> +</div> + +<h3 id="HTML_in_summaries" name="HTML_in_summaries">概要の中の HTML</h3> + +<p>この例は、 <code><summary></code> 要素にいくらか意味をを追加して、ラベルを重要であると示します。</p> + +<pre class="brush: html notranslate"><details open> + <summary><strong>Overview</strong></summary> + <ol> + <li>Cash on hand: $500.00</li> + <li>Current invoice: $75.30</li> + <li>Due date: 5/6/19</li> + </ol> +</details></pre> + +<p>{{EmbedLiveSample("HTML_in_summaries", 650, 120)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-summary-element', '<summary>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-summary-element', '<summary>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.summary")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("details")}}</li> +</ul> diff --git a/files/ja/web/html/element/sup/index.html b/files/ja/web/html/element/sup/index.html new file mode 100644 index 0000000000..e1d70562d5 --- /dev/null +++ b/files/ja/web/html/element/sup/index.html @@ -0,0 +1,148 @@ +--- +title: '<sup>: 上付き文字要素' +slug: Web/HTML/Element/sup +tags: + - Element + - HTML + - HTML text-level semantics + - 'HTML:Flow content' + - 'HTML:Palpable Content' + - 'HTML:Phrasing content' + - Reference + - Web +translation_of: Web/HTML/Element/sup +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">HTML の <strong>上付き文字要素</strong> (<strong><code><sup></code></strong>) は、表記上の理由で上付き文字として表示するべき行内文字列を指定します。</span>上付き文字は普通、小さめのテキストを使用して高いベースラインで表示されます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/sup.html", "tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみがあります。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<p><code><sup></code> 要素は、単純に表現や表示の結果を得るためではなく、表記規則上の理由、つまり、表記上の習慣や規則でテキストの位置を変更する必要がある場合にのみ使用してください。</p> + +<p>例えば、高いベースラインを使用しているビジネスや製品の{{interwiki("wikipedia", "ワードマーク")}}をスタイル付けするには、 <code><sup></code> ではなく CSS を使用してください (例えば {{cssxref("vertical-align")}})。例えば、 <code>vertical-align: super</code> とするか、ベースラインを50%上げるのであれば、 <code>vertical-align: 50%</code> とするかしてください。</p> + +<p><code><sup></code> の適切な使用例には次のようなものがあります (但し、制約するものではありません)。</p> + +<ul> + <li>べき乗の表示、例えば "x<sup>3</sup>"。これには、特に複雑な場合には、 <a href="/ja/docs/Web/MathML">MathML</a> の使用を検討する価値があるかもしれません。以下の{{anch("Examples", "例")}}の{{anch("Exponents", "べき乗")}}を参照してください</li> + <li>一部の言語で特定の略語を表示する際の {{interwiki("wikipedia", "superior letter", "superior lettering")}}。例えば、フランス語では、 "mademoiselle" は "M<sup>lle</sup>" のように略すことができます。例は {{anch("Superior lettering")}} を参照してください。</li> + <li>序数の表現、たとえば "fourth." を "4<sup>th</sup>" と表現すること。例は {{anch("Ordinal numbers")}} を参照してください。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Exponents" name="Exponents">べき乗</h3> + +<p>以下のようにべき乗は、上付き文字のもっとも一般的な使い方です。</p> + +<pre class="brush: html notranslate"><p>物理学の中でもっとも有名な等式の一つが、 +<var>E</var>=<var>m</var><var>c</var><sup>2</sup>.<p></pre> + +<p>結果の出力は次のようになります。</p> + +<p>{{EmbedLiveSample("Exponents", 650, 80)}}</p> + +<h3 id="Superior_lettering" name="Superior_lettering">Superior lettering</h3> + +<p>Superior lettering は、厳密には上付き文字と同じではありません。しかし、 HTML で superior lettering を表現することは <code><sup></code> の一般的な利用方法です。最も多い superior lettering の使用例はフランス語の略語の表現です。</p> + +<pre class="brush: html notranslate"><p>Robert a présenté son rapport à M<sup>lle</sup> Bernard.</p></pre> + +<p>結果の出力は次の通りです。</p> + +<p>{{EmbedLiveSample("Superior_lettering", 650, 80)}}</p> + +<h3 id="Ordinal_numbers" name="Ordinal_numbers">序数</h3> + +<p>英語の "fourth" やスペイン語の "quinto" などの序数は、数字と上付き文字で表示される言語に依存したテキストを使用して略されることがあります。</p> + +<pre class="brush: html notranslate"><p>The ordinal number "fifth" can be abbreviated in various +languages as follows:</p> +<ul> + <li>English: 5<sup>th</sup></li> + <li>French: 5<sup>ème</sup></li> +</ul></pre> + +<p>出力は以下の通りです。</p> + +<p>{{EmbedLiveSample("Ordinal_numbers", 650, 160)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-sub-and-sup-elements', '<sub> and <sup>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-sub-and-sup-elements', '<sub> and <sup>;')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.sup")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>下付き文字を表現する HTML の {{HTMLElement("sub")}} 要素。sup 要素と同時に使用することはできません。化学式で上付き文字と下付き文字の両方が必要な場合には、<a href="/ja/docs/MathML">MathML</a> を用いる必要があります。</li> + <li>MathML 要素: <a href="/ja/docs/Web/MathML/Element/msub"><code><msub></code></a>, <a href="/ja/docs/Web/MathML/Element/msup"><code><msup></code></a>, <a href="/ja/docs/Web/MathML/Element/msubsup"><code><msubsup></code></a></li> + <li>CSS の {{cssxref("vertical-align")}} プロパティ</li> +</ul> diff --git a/files/ja/web/html/element/table/index.html b/files/ja/web/html/element/table/index.html new file mode 100644 index 0000000000..b49b9dbba7 --- /dev/null +++ b/files/ja/web/html/element/table/index.html @@ -0,0 +1,715 @@ +--- +title: '<table>: 表要素' +slug: Web/HTML/Element/table +tags: + - Element + - HTML + - HTML tabular data + - NeedsLiveSample + - Reference + - Sorting + - Tables + - Web +translation_of: Web/HTML/Element/table +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><table></code> 要素</strong>は表形式のデータ、つまり、行と列の組み合わせによるセルに含まれたデータによる二次元の表で表現される情報です。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/table.html","tabbed-standard")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a></td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td> + <div class="content-models"> + <div id="table-mdls">以下の順となる。 + <ol> + <li>任意の 1 個の {{HTMLElement("caption")}} 要素</li> + <li>0 個以上の {{HTMLElement("colgroup")}} 要素</li> + <li>任意の 1 個の {{HTMLElement("thead")}} 要素</li> + <li>次の 2 つの選択肢から 1 つ: + <ul> + <li>0 個以上の {{HTMLElement("tbody")}} 要素</li> + <li>1 個以上の {{HTMLElement("tr")}} 要素</li> + </ul> + </li> + <li>任意の 1 個の {{HTMLElement("tfoot")}} 要素</li> + </ol> + </div> + </div> + </td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>フローコンテンツを受け入れるすべての要素。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Table_Role">table</a></code></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLTableElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<h3 id="Deprecated_attributes" name="Deprecated_attributes">非推奨の属性</h3> + +<dl> + <dt>{{htmlattrdef("align")}} {{Deprecated_inline}}</dt> + <dd> + <p>この列挙属性は、表がそれを包含する文書の中でどのように整列されなければならないかを示します。以下の値を取ります。</p> + + <ul> + <li><code>left</code>: 表が文書の左端に表示される</li> + <li><code>center</code>: 表が文書の中央に表示される</li> + <li><code>right</code>: 表が文書の右端に表示される</li> + </ul> + + <p> {{cssxref("margin-left")}} および {{cssxref("margin-right")}} に <code>auto</code> を指定したり、 {{cssxref("margin")}} に <code>0 auto</code> を指定したりすると、 <code>align</code> 属性と同様の効果を得ることができます。</p> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt> + <dd> + <p>表の背景色です。値は<a href="/ja/docs/Web/CSS/color_value#RGB_colors">6桁の16進 RGB コード</a>で、その前に「<code>#</code>」が付きます。定義済みの<a href="/en-US/docs/Web/CSS/color_value#Color_keywords">色キーワード</a>のうちの1つを使用することもできます。 + + </p><p>同様の効果を得るには、 CSS の {{cssxref("background-color")}} プロパティを使用してください。 + </p></dd> + <dt>{{htmlattrdef("border")}} {{Deprecated_inline}}</dt> + <dd> + <p>この整数値属性は、ピクセル値で、表を囲む枠の大きさを定義します。もし 0 が設定された場合、それは {{htmlattrxref("frame", "table")}} 属性が void に設定されることを意味します。</p> + + <p>同様の効果を得るには、 {{cssxref("border")}} 一括指定プロパティを使用してください。 + </p></dd> + <dt>{{htmlattrdef("cellpadding")}} {{Deprecated_inline}}</dt> + <dd> + <p>この属性は、セルの内容と境界線の間の空間を、表示・非表示を問わず定義します。 cellpadding の長さがピクセル数で定義されたのであれば、このピクセルの大きさの余白が、4 方向全てに適用されるでしょう。長さがパーセント値を用いて定義された場合は、内容は中央に配置され、垂直方向 (上下) の余白の合計値がこの値で表されます。水平方向 (左右) の余白の合計も同じことが言えます。</p> + + <p>同様の効果を得るには、 {{cssxref("border-collapse")}} プロパティを <code><table></code> 要素に適用し、値を collapse に設定した上で、 {{cssxref("padding")}} プロパティを {{HTMLElement("td")}} 要素に使用してください。 + </p></dd> + <dt>{{htmlattrdef("cellspacing")}} {{Deprecated_inline}}</dt> + <dd> + <p>この属性は、2つのセルの間の四悪の寸法を、パーセント値またはピクセル値で定義します。この属性は水平方向と垂直方向の両方に適用され、表の上端と最初の行におけるセルの間、表の左端と最初の列の間、表の右端と最後の列の間、表の荷担と最後の行の間に適用されます。</p> + + <p>同様の効果を得るには、 {{cssxref("border-spacing")}} プロパティを <code><table></code> 要素に適用してください。 <code>border-spacing</code> は、 {{cssxref("border-collapse")}} が collapse に設定されていると何の効果もありません。 + </p></dd> + <dt>{{htmlattrdef("frame")}} {{Deprecated_inline}}</dt> + <dd> + <p>これは列挙型の属性で、表を囲む枠線のどの方向が表示されなければならないかを定義します。</p> + + <p>同様の効果を得るには、 {{cssxref("border-style")}} および {{cssxref("border-width")}} プロパティを使用してください。 + </p></dd> + <dt>{{htmlattrdef("rules")}} {{Deprecated_inline}}</dt> + <dd> + <p>これは列挙型の属性で、表内のどこに罫線が引かれるべきかを定義します。以下の値を持つことができます。</p> + + <ul> + <li><span>none</span> は、罫線を表示しないことを示します。既定値です。</li> + <li><code>groups</code> は、 {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}} の各要素によって定義される行グループと、 {{HTMLElement("col")}} や {{HTMLElement("colgroup")}} 要素によって定義される列グループの間にのみ、罫線を表示します。</li> + <li><code>rows</code> は、行の間の罫線を表示します。</li> + <li><code>columns</code> は、列の間の罫線を表示します。</li> + <li><code>all</code> は、行と列の間の罫線が表示されます。</li> + </ul> + + <p>同様の効果を得るには、 {{cssxref("border")}} プロパティを {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}} のうち適切な要素に適用してください。</p> + </dd> + <dt>{{htmlattrdef("summary")}} {{Deprecated_inline}}</dt> + <dd>この属性は、表の内容の概要を示す代替テキストを定義します。代わりに {{HTMLElement("caption")}} 要素を使用してください。</dd> + <dt>{{htmlattrdef("width")}} {{Deprecated_inline}}</dt> + <dd> + <p>この属性は表の幅を定義します。代わりに CSS の {{cssxref("width")}} プロパティを使用してください。 + </p></dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Simple_table" name="Simple_table">シンプルな表</h3> + +<pre class="brush: html notranslate"><table> + <tr> + <td>John</td> + <td>Doe</td> + </tr> + <tr> + <td>Jane</td> + <td>Doe</td> + </tr> +</table> +</pre> + +<p>{{EmbedLiveSample('Simple_table', '100%', '100')}}</p> + +<h3 id="Further_simple_examples" name="Further_simple_examples">さまざまな表</h3> + +<pre class="brush: html notranslate"><p>ヘッダーのあるシンプルな表</p> +<table> + <tr> + <th>名</th> + <th>姓</th> + </tr> + <tr> + <td>John</td> + <td>Doe</td> + </tr> + <tr> + <td>Jane</td> + <td>Doe</td> + </tr> +</table> + +<p>thead、tfoot、tbody のある表</p> +<table> + <thead> + <tr> + <th>ヘッダー 1</th> + <th>ヘッダー 2</th> + </tr> + </thead> + <tbody> + <tr> + <td>本体 1</td> + <td>本体 2</td> + </tr> + </tbody> + <tfoot> + <tr> + <td>フッター 1</td> + <td>フッター 2</td> + </tr> + </tfoot> +</table> + +<p>colgroup のある表</p> +<table> + <colgroup span="4"></colgroup> + <tr> + <th>国</th> + <th>首都</th> + <th>人口</th> + <th>言語</th> + </tr> + <tr> + <td>アメリカ合衆国</td> + <td>ワシントン D.C.</td> + <td>3 億 9 百万人</td> + <td>英語</td> + </tr> + <tr> + <td>スウェーデン</td> + <td>ストックホルム</td> + <td>9 百万人</td> + <td>スウェーデン語</td> + </tr> +</table> + +<p>colgroup と col のある表</p> +<table> + <colgroup> + <col style="background-color: #0f0"> + <col span="2"> + </colgroup> + <tr> + <th>Lime</th> + <th>Lemon</th> + <th>Orange</th> + </tr> + <tr> + <td>Green</td> + <td>Yellow</td> + <td>Orange</td> + </tr> +</table> + +<p>caption のあるシンプルな表</p> +<table> + <caption>素晴らしいキャプション</caption> + <tr> + <td>素晴らしいデータ</td> + </tr> +</table> +</pre> + +<div class="hidden"> +<pre class="brush: css notranslate">table +{ +border-collapse: collapse; +border-spacing: 0px; +} +table, th, td +{ +padding: 5px; +border: 1px solid black; +}</pre> +</div> + +<p>{{EmbedLiveSample('Further_simple_examples', '100%', '700')}}</p> + +<h3 id="Table_sorting" name="Table_sorting">表のソート</h3> + +<h4 id="Sorting_table_rows" name="Sorting_table_rows">表の行のソート</h4> + +<p>HTML の表の行 ({{HTMLElement("tr")}} 要素) をソートするネイティブの方法はありません。しかし、 {{jsxref("Array/slice", "Array.prototype.slice()")}}, {{jsxref("Array/sort", "Array.prototype.sort()")}}, {{domxref("Node/removeChild", "Node.removeChild()")}}, {{domxref("Node/appendChild", "Node.appendChild()")}} を使用して、独自の <code>sort()</code> 関数を実装し、 <code><tr></code> 要素の {{domxref("HTMLCollection")}} をソートすることができます。</p> + +<p>次の例では、このような例を見ることができます。これを <tbody> 要素に実装し、表のセルを値の昇順にソートし、それに合わせて表示を更新します。</p> + +<h5 id="HTML">HTML</h5> + +<pre class="brush: html notranslate"><table> + <tbody> + <tr> + <td>3</td> + </tr> + <tr> + <td>2</td> + </tr> + <tr> + <td>1</td> + </tr> + </tbody> +</table> +</pre> + +<h5 id="JavaScript">JavaScript</h5> + +<pre class="brush: js notranslate">HTMLTableSectionElement.prototype.sort = function(cb){ + Array + .prototype + .slice + .call(this.rows) + .sort(cb) + .forEach((e,i,a)=>{ + this.appendChild(this.removeChild(e)); + },this); +} + +document.querySelector('table').tBodies[0].sort(function(a, b){ + return a.textContent.localeCompare(b.textContent); +}); +</pre> + +<h5 id="Result" name="Result">結果</h5> + +<p>{{EmbedLiveSample('Sorting_table_rows', '100%', '100')}}</p> + +<h4 id="Sorting_rows_with_a_click_on_the_th_element" name="Sorting_rows_with_a_click_on_the_th_element">th 要素をクリックすることによるソート</h4> + +<p>次の例では、 <code>document</code> にあるすべての <code><table></code> 要素のすべての <code><th></code> 要素にイベントハンドラーを追加しています。 <code><tbody></code> のすべての行を、行に含まれる <code>td</code> セルに基づいてソートします。</p> + +<div class="blockIndicator note"> +<p><strong>注</strong>: この方法では、 <code><td></code> 要素が子孫要素のない生のテキストで作成されていることを想定しています。</p> +</div> + +<h5 id="HTML_2">HTML</h5> + +<pre class="brush: html notranslate"><table> + <thead> + <tr> + <th>Numbers</th> + <th>Letters</th> + </tr> + </thead> + <tbody> + <tr> + <td>3</td> + <td>A</td> + </tr> + <tr> + <td>2</td> + <td>B</td> + </tr> + <tr> + <td>1</td> + <td>C</td> + </tr> + </tbody> +</table></pre> + +<h5 id="JavaScript_2">JavaScript</h5> + +<pre class="brush: js notranslate">for (let table of document.querySelectorAll('table')) { + for (let th of table.tHead.rows[0].cells) { + th.onclick = function(){ + const tBody = table.tBodies[0]; + const rows = tBody.rows; + for (let tr of rows) { + Array.prototype.slice.call(rows) + .sort(function(tr1, tr2){ + const cellIndex = th.cellIndex; + return tr1.cells[cellIndex].textContent.localeCompare(tr2.cells[cellIndex].textContent); + }) + .forEach(function(tr){ + this.appendChild(this.removeChild(tr)); + }, tBody); + } + } + } +}</pre> + +<h5 id="Result_2" name="Result_2">結果</h5> + +<p>{{EmbedLiveSample('Sorting_rows_with_a_click_on_the_th_element', '100%', '100')}}</p> + +<h3 id="Displaying_large_tables_in_small_spaces" name="Displaying_large_tables_in_small_spaces">巨大な表を小さな空間に表示</h3> + +<p>ウェブ上の表でよくある問題は、コンテンツの量が多い場合、小さな画面ではネイティブにはあまりうまく動作しないこと、スクロール可能にする方法が明らかではないことです。特にマークアップが CDN からくると、ラッパーを持つように変更することができません。</p> + +<p>この例では、小さな空間に表を表示する方法の一つを紹介しています。 HTML の内容は非常に大きいので非表示にしていますが、特に目立ったものはありません。この例では CSS の方が検査に便利です。</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><table> + <thead> + <tr> + <th>1<sup>3</sup> equals: + <th>2<sup>3</sup> equals: + <th>3<sup>3</sup> equals: + <th>4<sup>3</sup> equals: + <th>5<sup>3</sup> equals: + <th>6<sup>3</sup> equals: + <th>7<sup>3</sup> equals: + <tbody> + <tr> + <td>row 1: 1 + <td>row 1: 8 + <td>row 1: 27 + <td>row 1: 64 + <td>row 1: 125 + <td>row 1: 216 + <td>row 1: 343 + <tr> + <td>row 2: 1 + <td>row 2: 8 + <td>row 2: 27 + <td>row 2: 64 + <td>row 2: 125 + <td>row 2: 216 + <td>row 2: 343 + <tr> + <td>row 3: 1 + <td>row 3: 8 + <td>row 3: 27 + <td>row 3: 64 + <td>row 3: 125 + <td>row 3: 216 + <td>row 3: 343 + <tr> + <td>row 4: 1 + <td>row 4: 8 + <td>row 4: 27 + <td>row 4: 64 + <td>row 4: 125 + <td>row 4: 216 + <td>row 4: 343 + <tr> + <td>row 5: 1 + <td>row 5: 8 + <td>row 5: 27 + <td>row 5: 64 + <td>row 5: 125 + <td>row 5: 216 + <td>row 5: 343 + <tr> + <td>row 6: 1 + <td>row 6: 8 + <td>row 6: 27 + <td>row 6: 64 + <td>row 6: 125 + <td>row 6: 216 + <td>row 6: 343 + <tr> + <td>row 7: 1 + <td>row 7: 8 + <td>row 7: 27 + <td>row 7: 64 + <td>row 7: 125 + <td>row 7: 216 + <td>row 7: 343 + <tr> + <td>row 8: 1 + <td>row 8: 8 + <td>row 8: 27 + <td>row 8: 64 + <td>row 8: 125 + <td>row 8: 216 + <td>row 8: 343 + <tr> + <td>row 9: 1 + <td>row 9: 8 + <td>row 9: 27 + <td>row 9: 64 + <td>row 9: 125 + <td>row 9: 216 + <td>row 9: 343 + <tr> + <td>row 10: 1 + <td>row 10: 8 + <td>row 10: 27 + <td>row 10: 64 + <td>row 10: 125 + <td>row 10: 216 + <td>row 10: 343 + <tr> + <td>row 11: 1 + <td>row 11: 8 + <td>row 11: 27 + <td>row 11: 64 + <td>row 11: 125 + <td>row 11: 216 + <td>row 11: 343 + <tr> + <td>row 12: 1 + <td>row 12: 8 + <td>row 12: 27 + <td>row 12: 64 + <td>row 12: 125 + <td>row 12: 216 + <td>row 12: 343 + <tr> + <td>row 13: 1 + <td>row 13: 8 + <td>row 13: 27 + <td>row 13: 64 + <td>row 13: 125 + <td>row 13: 216 + <td>row 13: 343 + <tr> + <td>row 14: 1 + <td>row 14: 8 + <td>row 14: 27 + <td>row 14: 64 + <td>row 14: 125 + <td>row 14: 216 + <td>row 14: 343 + <tr> + <td>row 15: 1 + <td>row 15: 8 + <td>row 15: 27 + <td>row 15: 64 + <td>row 15: 125 + <td>row 15: 216 + <td>row 15: 343 + <tr> + <td>row 16: 1 + <td>row 16: 8 + <td>row 16: 27 + <td>row 16: 64 + <td>row 16: 125 + <td>row 16: 216 + <td>row 16: 343 + <tr> + <td>row 17: 1 + <td>row 17: 8 + <td>row 17: 27 + <td>row 17: 64 + <td>row 17: 125 + <td>row 17: 216 + <td>row 17: 343 + <tr> + <td>row 18: 1 + <td>row 18: 8 + <td>row 18: 27 + <td>row 18: 64 + <td>row 18: 125 + <td>row 18: 216 + <td>row 18: 343 + <tr> + <td>row 19: 1 + <td>row 19: 8 + <td>row 19: 27 + <td>row 19: 64 + <td>row 19: 125 + <td>row 19: 216 + <td>row 19: 343 + <tr> + <td>row 20: 1 + <td>row 20: 8 + <td>row 20: 27 + <td>row 20: 64 + <td>row 20: 125 + <td>row 20: 216 + <td>row 20: 343 +</table> +</pre> +</div> + +<p>これらのスタイルを見ると、表の {{cssxref("display")}} プロパティが <code>block</code> に設定されていることに気づくでしょう。これによりスクロールが可能になりますが、テーブルはその完全性の一部を失い、テーブルのセルが可能な限り小さくなろうとします。この問題を軽減するために、<code><tbody></code> の {{cssxref("white-space")}} を <code>nowrap</code>に設定しました。しかし、 <code><thead></code> ではこれを行わないようにしています。これは、長いタイトルで列がデータを表示するために必要以上に広くなるのを避けるためです。</p> + +<p>下にスクロールしている間、表のヘッダーをページ上に保持するために、 {{cssxref("position")}} を <code><th></code> 要素の上で粘着するように設定しました。 {{cssxref("border-collapse")}}} を <code>collapse</code> に設定して <strong>いない</strong>ことに注意してください。</p> + +<pre class="brush: css notranslate">table, +th, +td { + border: 1px solid; +} + +table { + width: 100%; + max-width: 400px; + height: 240px; + margin: 0 auto; + display: block; + overflow-x: auto; + border-spacing: 0; +} + +tbody { + white-space: nowrap; +} + +th, +td { + padding: 5px 10px; + border-top-width: 0; + border-left-width: 0; +} + +th { + position: sticky; + top: 0; + background: #fff; + vertical-align: bottom; +} + +th:last-child, +td:last-child { + border-right-width: 0; +} + +tr:last-child td { + border-bottom-width: 0; +} +</pre> + +<h4 id="Result_3" name="Result_3">結果</h4> + +<p>{{EmbedLiveSample('Displaying_large_tables_in_small_spaces', '100%', 240)}}</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> + +<h3 id="Captions" name="Captions">キャプション</h3> + +<p> {{HTMLElement("caption")}} 要素は明確かつ簡潔に表の目的を示すことに価値があるため、これを提供することで、表の残りの部分を読む必要があるか、飛ばすかを判断するのに役立ちます。</p> + +<p>これは読み上げソフトのような支援技術を利用して操作している人、弱視の人、認知問題を抱えた人にとって役立ちます。</p> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Tables/Advanced#Adding_a_caption_to_your_table_with_<caption>">MDN <caption> を用いて表にタイトルをつける</a> </li> + <li><a href="https://www.w3.org/WAI/tutorials/tables/caption-summary/">Caption & Summary • Tables • W3C WAI Web Accessibility Tutorials</a></li> +</ul> + +<h3 id="Scoping_rows_and_columns" name="Scoping_rows_and_columns">行と列のスコープ付け</h3> + +<p>ヘッダー要素の {{htmlattrxref("scope", "th")}} 属性は、単純な内容の場合はスコープが推測できるので冗長になります。しかし、支援技術によっては正しく推測することに失敗する事があるため、ヘッダーにスコープを設定すると使い勝手が向上する可能性ことがあります。複雑な表では、スコープを指定するとセルとヘッダーの関係に関する必要な情報を提供することができます。</p> + +<h4 id="Example" name="Example">例</h4> + +<pre class="brush: html notranslate"><table> + <caption>Color names and values</caption> + <tbody> + <tr> + <th scope="col">Name</th> + <th scope="col">HEX</th> + <th scope="col">HSLa</th> + <th scope="col">RGBa</th> + </tr> + <tr> + <th scope="row">Teal</th> + <td><code>#51F6F6</code></td> + <td><code>hsla(180, 90%, 64%, 1)</code></td> + <td><code>rgba(81, 246, 246, 1)</code></td> + </tr> + <tr> + <th scope="row">Goldenrod</th> + <td><code>#F6BC57</code></td> + <td><code>hsla(38, 90%, 65%, 1)</code></td> + <td><code>rgba(246, 188, 87, 1)</code></td> + </tr> + </tbody> +</table> +</pre> + +<p> {{HTMLElement("th")}} 要素に <code>scope="col"</code> を宣言すると、セルが列の一番上にあることを記述するのに役立ちます。 {{HTMLElement("th")}} 要素に <code>scope="row"</code> を宣言すると、セルが行の最初の列であることを記述するのに役立ちます。</p> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Tables/Advanced#Tables_for_visually_impaired_users">MDN 視覚障碍者向けの表</a></li> + <li><a href="https://www.w3.org/WAI/tutorials/tables/two-headers/">Tables with two headers • Tables • W3C WAI Web Accessibility Tutorials</a></li> + <li><a href="https://www.w3.org/WAI/tutorials/tables/irregular/">Tables with irregular headers • Tables • W3C WAI Web Accessibility Tutorials</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H63.html">H63: Using the scope attribute to associate header cells and data cells in data tables | W3C Techniques for WCAG 2.0</a></li> +</ul> + +<h3 id="Complicated_tables" name="Complicated_tables">複雑な表</h3> + +<p>読み上げソフトのような支援技術は、ヘッダーのセルを厳密に水平又は垂直濃厚に関連付けすることができない表を解析するのが困難な場合があります。これはつまり、 {{htmlattrxref("colspan", "td")}} に {{htmlattrxref("rowspan", "td")}} 属性がある場合のことです。</p> + +<p>できれば、テーブルの内容を表現するための別な方法、例えばより小さい表の集合に分解するなどで、 <code>colspan</code> 及び <code>rowspan</code> 属性に依存する必要がないようにすることを考慮してください。これは支援技術を使用している人が表の内容を理解しやすくするのに加えて、表のレイアウトの関連を理解することが難しい認識障碍を持った人にも利益になります。</p> + +<p>表を分割することができないのであれば、 {{htmlattrxref("id")}} 及び {{htmlattrxref("headers", "td")}} 属性の組み合わせを用いて、表のセルとそのセルに関連したヘッダーをプログラム的に結び付けてください。</p> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Tables/Advanced#Tables_for_visually_impaired_users">MDN 視覚障碍者向けの表</a></li> + <li><a href="https://www.w3.org/WAI/tutorials/tables/multi-level/">Tables with multi-level headers • Tables • W3C WAI Web Accessibility Tutorials</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H43.html">H43: Using id and headers attributes to associate data cells with header cells in data tables | Techniques for W3C WCAG 2.0</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','tables.html#the-table-element','table 要素')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-table-element','table 要素')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.table")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><code><table></code> 要素をスタイルするのに特に役に立つであろう CSS の プロパティ: + + <ul> + <li>{{cssxref("width")}}: 表の幅を定義</li> + <li>{{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-collapse")}}, {{cssxref("border-spacing")}}: セルの境界線、罫線、枠線の外観を制御</li> + <li>{{cssxref("margin")}} 及び {{cssxref("padding")}}: 個別のセルの内容を整形</li> + <li>{{cssxref("text-align")}} 及び {{cssxref("vertical-align")}}: 文字列やセルの内容の配置</li> + </ul> + </li> +</ul> diff --git a/files/ja/web/html/element/tbody/index.html b/files/ja/web/html/element/tbody/index.html new file mode 100644 index 0000000000..5befbc12c6 --- /dev/null +++ b/files/ja/web/html/element/tbody/index.html @@ -0,0 +1,328 @@ +--- +title: '<tbody>: テーブル本体要素' +slug: Web/HTML/Element/tbody +tags: + - Element + - HTML + - HTML tabular data + - Reference + - Table Body + - Table Contents + - Tables + - Web + - tbody +translation_of: Web/HTML/Element/tbody +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の表本体要素</strong> (<strong><code><tbody></code></strong>) は、表の一連の行 ({{HTMLElement("tr")}} 要素) を内包し、その部分が表 ({{HTMLELement("table")}}) の本体部分を構成することを表します。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/tbody.html","tabbed-taller")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p><code><tbody></code> 要素は、親戚である {{HTMLElement("thead")}} や {{HTMLElement("tfoot")}} と共に有用な意味的情報を提供し、画面への表示や印刷ばかりでなく、{{Glossary("accessibility", "アクセシビリティ")}}目的にも利用できます。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td>なし</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>0 個以上の {{HTMLElement("tr")}} 要素</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td><code><tbody></code> 要素は、 {{HTMLElement("table")}} 要素をグラフィカルに表示するにあたって必須ではない子要素です。ただし、 {{HTMLElement("table")}} 要素の子要素として {{HTMLElement("tr")}} 要素が存在する場合は配置してはいけません。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>{{HTMLElement("table")}} 要素。 <code><tbody></code> 要素は {{HTMLElement("caption")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("thead")}}, {{HTMLElement("tfoot")}} の各要素の後に配置することができます。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">rowgroup</a></code></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLTableSectionElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<h3 id="Deprecated_attributes" name="Deprecated_attributes">非推奨の属性</h3> + +<dl> + <dt>{{ htmlattrdef("align") }} {{deprecated_inline}}</dt> + <dd>この列挙属性は各セルの中身について、水平方向の配置方法を制御します。以下の値が指定可能です。 + <ul> + <li><code>left</code>: 中身をセルの左側に揃えます。</li> + <li><code>center</code>: 中身をセル内で中央揃えにします。</li> + <li><code>right</code>: 中身をセルの右側に揃えます。</li> + <li><code>justify</code>: 中身がセル内で両端揃えになるように、テキストコンテンツに空白を挿入します。</li> + <li><code>char</code>: テキストコンテンツを特定の文字に対して、最小のオフセットで揃えます。特定の文字は {{htmlattrxref("char", "tbody")}} 属性および {{htmlattrxref("charoff", "tbody")}} 属性で定義します。</li> + </ul> + + <p>この属性を設定しない場合は、値が <code>left</code> であるとみなされます。</p> + + <p>この属性は非推奨であるため、代わりに CSS の {{cssxref("text-align")}} プロパティを使用してください。</p> + + <div class="note"><strong>注: </strong><code>text-align</code> プロパティには、 <code>align="char"</code> と同等の機能がどのブラウザーでも実装されていません。 <a href="/ja/docs/Web/CSS/text-align#Browser_compatibility"><code>text-align</code> のブラウザーの互換性の節</a> で <code><string></code> の値を確認してください。</div> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt> + <dd> + <p>表の背景色です。 <a href="/ja/docs/Web/CSS/color_value#RGB_colors">6桁の16進 RGB コード</a>の先頭に '<code>#</code>' をつけたものです。定義済みの<a href="/ja/docs/Web/CSS/color_value#Color_keywords">色キーワード</a>のうちの一つを利用することもできます。</p> + + <p>この属性は非推奨であり、代わりに CSS の {{cssxref("background-color")}} プロパティを使用してください。</p> + </dd> + <dt>{{ htmlattrdef("char") }} {{deprecated_inline}}</dt> + <dd> + <p>この属性は、列内のセルで揃える文字を設定します。よくある値としては、数値や金額を揃えようとするときのピリオド (.) があります。{{htmlattrxref("align", "tbody")}} 属性を <code>char</code> に設定していない場合は、この属性は無視されます。</p> + </dd> + <dt>{{ htmlattrdef("charoff") }} {{deprecated_inline}}</dt> + <dd>この属性は、 <code>char</code> 属性で指定した揃え文字から列のデータをオフセットする文字数を示します。</dd> + <dt>{{ htmlattrdef("valign") }} {{deprecated_inline}}</dt> + <dd>この属性は、表本体の各行のセルにおける垂直方向のテキスト配置方法を指定します。以下の値が指定可能です。 + <ul> + <li><code>baseline</code>: テキストを可能な限りセルの下端に近づけますが、下端ではなく文字の<a href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">ベースライン</a>に揃えます。文字がサイズ全体に渡る場合は、 <code>bottom</code> と同じ効果になります。</li> + <li><code>bottom</code>: テキストを可能な限りセルの下端に近づけて配置します。</li> + <li><code>middle</code>: テキストをセル内の中央に置きます。</li> + <li><code>top</code>: テキストを可能な限りセルの上端に近づけて配置します。</li> + </ul> + + <p>この属性は非推奨であり、代わりに CSS の {{cssxref("vertical-align")}} プロパティを使用してください。</p> + </dd> +</dl> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<ul> + <li>表に (意味的なヘッダー行を識別するために) {{HTMLElement("thead")}} ブロックがある場合、 <code><tbody></code> ブロックはその後に置く<em>必要があります</em>。</li> + <li><code><tbody></code> を使用する場合、表の行 ({{HTMLElement("tr")}} 要素) を {{HTMLElement("table")}} の直接の子として置くことはできませんが、 <code><tbody></code> の中には置くことができます。 <code><tbody></code> を使用する場合は、ヘッダーでもフッターでもない行をすべてその中に入れる必要があります。</li> + <li>文書を印刷するとき、複数のページにまたがる表では、 <code><thead></code> および {{htmlelement("tfoot")}} 要素が各ページで共通の（またはよく似た）情報を指定するのに対し、 <code><tbody></code> 要素の中身は一般に、ページごとに異なります。</li> + <li>表が (ウィンドウのような) 画面に表示される場合で、表全体を表示するのに十分な大きさがないとき、{{Glossary("user agent", "ユーザーエージェント")}}は <code><thead></code>, <code><tbody></code>, <code><tfoot></code>, {{HTMLElement("caption")}} ブロックを親である表から独立してユーザーがスクロールさせることができるようにするかもしれません。</li> + <li>連続していれば、1つの表の中に複数の <code><tbody></code> を使用することが<em>できます</em>。これにより必要に応じて、巨大な表の行を複数のセクションに分割し、個別に整形することができます。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<p>以下の例では、 <code><tbody></code> 要素の使用例を示します。このタグが使われているその他の例は、 {{ HTMLElement("table", "", "#Examples") }} の例を参照してください。</p> + +<h3 id="Basic_example" name="Basic_example">基本的な例</h3> + +<p>これは比較的単純な例で、学生のグループについて情報を一覧する表を {{HTMLElement("thead")}} および {{HTMLElement("tbody")}} で作成し、本体内に行番号を表示します。</p> + +<h4 id="HTML">HTML</h4> + +<p>表の HTML は下記のとおりです。なお、学生に関する情報を含む本体のセルはすべて、単一の <code><tbody></code> 要素の中に入っています。</p> + +<pre class="brush: html notranslate"><table> + <thead> + <tr> + <th>Student ID</th> + <th>Name</th> + <th>Major</th> + </tr> + </thead> + <tbody> + <tr> + <td>3741255</td> + <td>Jones, Martha</td> + <td>コンピューター科学</td> + </tr> + <tr> + <td>3971244</td> + <td>Nim, Victor</td> + <td>ロシア文学</td> + </tr> + <tr> + <td>4100332</td> + <td>Petrov, Alexandra</td> + <td>天体物理学</td> + </tr> + </tbody> +</table></pre> + +<h4 id="CSS">CSS</h4> + +<p>表を整形する CSS を次に示します。</p> + +<pre class="brush: css notranslate">table { + border: 2px solid #555; + border-collapse: collapse; + font: 16px "Lucida Grande", "Helvetica", "Arial", sans-serif; +}</pre> + +<p>まず、表の全体的なスタイル属性を設定し、表の外枠の太さ、スタイル、色を設定し、 {{cssxref("border-collapse")}} を使用して、セル間に間隔と独自の境界線を置くのではなく、境界線が隣接セル間で共有されるようにします。 {{cssxref("font")}} は、表の初期フォントを設定するために使用されます。</p> + +<pre class="brush: css notranslate">th, td { + border: 1px solid #bbb; + padding: 2px 8px 0; + text-align: left; +}</pre> + +<p>それから、すべてのデータセルだけでなく、 {{HTMLElement("td")}} および {{HTMLElement("th")}} のセルの間で共有されるスタイルを含む、テーブル内の大部分のセルに設定されるスタイルです。セルに対して、1ピクセルの太さで薄い灰色の輪郭、パディングの調整、すべてのセルを {{cssxref("text-align")}} を使用して左揃えにします。</p> + +<pre class="brush: css notranslate">thead > tr > th { + background-color: #cce; + font-size: 18px; + border-bottom: 2px solid #999; +}</pre> + +<p>最後に、 {{HTMLElement("thead")}} ブロックに含まれるヘッダーのセルには追加の整形を行います。より暗い {{cssxref("background-color")}} にし、大きなフォントサイズにして、下の境界線に他のセルの境界線よりも太く暗い線を引きます。</p> + +<h4 id="Result" name="Result">結果</h4> + +<p>結果の表は次のようになります。</p> + +<p>{{EmbedLiveSample("Basic_example", 650, 150)}}</p> + +<h3 id="Multiple_bodies" name="Multiple_bodies">複数の本体</h3> + +<p>複数の <code><tbody></code> 要素を使用することで、表内の複数のセクションを作成することができます。それぞれに独自のヘッダー行がある場合もありますが、 <em>{{HTMLElement("thead")}} は表1つあたり1つしか置けません！</em>そのため、それぞれの <code><tbody></code> にヘッダーを作成するには、 {{HTMLElement("th")}} 要素で埋められた {{HTMLElement("tr")}} を使用する必要があります。どのようにするかを見てみましょう。</p> + +<p>前回の例から、リストに数人の学生を追加し、各行に学生の専攻を書く代わりに、学生を選考でグループ化し、ヘッダー行で選考を表すように更新しましょう。</p> + +<h4 id="Result_2" name="Result_2">結果</h4> + +<p>最初に、結果の表を見て、作ろうとしているものを知っておきましょう。</p> + +<p>{{EmbedLiveSample("Multiple_bodies", 650, 250)}}</p> + +<h4 id="HTML_2">HTML</h4> + +<p>修正した HTML はこのようになります。</p> + +<pre class="brush: html notranslate"><table> + <thead> + <tr> + <th>Student ID</th> + <th>Name</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="2">コンピューター科学</th> + </tr> + <tr> + <td>3741255</td> + <td>Jones, Martha</td> + </tr> + <tr> + <td>4077830</td> + <td>Pierce, Benjamin</td> + </tr> + <tr> + <td>5151701</td> + <td>Kirk, James</td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="2">ロシア文学</th> + </tr> + <tr> + <td>3971244</td> + <td>Nim, Victor</td> + </tr> + </tbody> + <tbody> + <tr> + <th colspan="2">天体物理学</th> + </tr> + <tr> + <td>4100332</td> + <td>Petrov, Alexandra</td> + </tr> + <tr> + <td>8892377</td> + <td>Toyota, Hiroko</td> + </tr> + </tbody> +</table></pre> + +<p>なお、各専攻は個別の <code><tbody></code> ブロックに配置され、最初の行に単一の {{HTMLElement("th")}} 要素に {{htmlattrxref("colspan", "th")}} 属性を付けて表の幅全体に広がるようにしています。このヘッダーが <code><tbody></code> 内の専攻の名前を示します。</p> + +<p>そして、それぞれの専攻の <code><tbody></code> で残りの行は2つのセルから成り、最初の行は学生番号で、2つ目の行は名前です。</p> + +<h4 id="CSS_2">CSS</h4> + +<div class="hidden"> +<pre class="brush: css notranslate">table { + border: 2px solid #555; + border-collapse: collapse; + font: 16px "Lucida Grande", "Helvetica", "Arial", sans-serif; +} + +th, td { + border: 1px solid #bbb; + padding: 2px 8px 0; + text-align: left; +} + +thead > tr > th { + background-color: #cce; + font-size: 18px; + border-bottom: 2px solid #999; +}</pre> +</div> + +<p>CSS のほとんどは変更ありません。しかし、（{{HTMLElement("thead")}} に含まれるものではなく） <code><tbody></code> に直接含まれるヘッダーセルに対して、若干のスタイルを追加しましょう。これはそれぞれの専攻を示すヘッダーに使われます。</p> + +<pre class="brush: css notranslate">tbody > tr > th { + background-color: #dde; + border-bottom: 1.5px solid #bbb; + font-weight: normal; +}</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','tables.html#the-tbody-element','tbody 要素')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-tbody-element','tbody 要素')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.tbody")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><code><tbody></code> 要素のスタイル設定に役立つであろう CSS プロパティと<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>: + + <ul> + <li>{{ cssxref(":nth-child") }} 擬似クラス: 列内のセルの配置を設定するため</li> + <li>{{ cssxref("text-align") }} プロパティ: すべてのセル内コンテンツを '.' などの同一文字で揃えるための</li> + </ul> + </li> +</ul> diff --git a/files/ja/web/html/element/td/index.html b/files/ja/web/html/element/td/index.html new file mode 100644 index 0000000000..a6772ec15a --- /dev/null +++ b/files/ja/web/html/element/td/index.html @@ -0,0 +1,233 @@ +--- +title: '<td>: 表データセル要素' +slug: Web/HTML/Element/td +tags: + - HTML + - HTML 表形式データ + - Reference + - Web + - ウェブ + - セル + - テーブル + - データセル + - 要素 +translation_of: Web/HTML/Element/td +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><td></code> 要素</strong>は、表でデータを包含するセルを定義します。これは<em>表モデル</em>に関与します。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/td.html","tabbed-taller")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td>区分化ルート</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>開始タグは必須です。<br> + 直後に {{HTMLElement("th")}} 要素または {{HTMLElement("td")}} 要素がある場合、または親要素内で以降のデータがない場合は終了タグを省略可能。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>{{HTMLElement("tr")}} 要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Cell_Role">cell</a></code> ({{HTMLElement("table")}} 要素の子孫である場合)</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLTableDataCellElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{htmlattrdef("colspan")}}</dt> + <dd>この属性はセルをいくつの列に広げるかを示す、負でない整数を持ちます。既定値は <code>1</code> です。1000 を超える値は正しくないとみなされ、既定値 (1) が設定されるでしょう。</dd> + <dt>{{htmlattrdef("headers")}}</dt> + <dd>この属性は、空白文字で区切られた文字列のリストを持ちます。各々の文字列は、この要素に当てはめる {{HTMLElement("th")}} 要素の <strong>id</strong> 属性と対応します。</dd> + <dt>{{htmlattrdef("rowspan")}}</dt> + <dd>この属性はセルをいくつの行に広げるかを示す、負でない整数を持ちます。デフォルト値は <code>1</code> です。<code>0</code> を設定した場合は、セルが属する表セクション ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}) の終端 (暗黙的に定義されるものであっても) まで拡張します。65534 より大きな値は、65534 に切り詰めます。</dd> +</dl> + +<h3 id="Deprecated_attributes" name="Deprecated_attributes">非推奨の属性</h3> + +<dl> + <dt>{{htmlattrdef("abbr")}} {{obsolete_inline("html5")}}</dt> + <dd>この属性は、セルの内容の簡潔な説明を持ちます。読み上げソフトなど一部のユーザーエージェントは、内容自体の前にこの説明を提供することがあります。 + <div class="note"><strong>注:</strong> この属性は最新の標準で廃止されているため、使用しないでください。代わりに、セルの内容を独立した短縮コンテンツそのもので始めることを検討するか、セルの内容として短縮コンテンツを使用して長いコンテンツはセルの説明として <strong>title</strong> 属性に追加してください。</div> + </dd> + <dt>{{htmlattrdef("align")}} {{obsolete_inline("html5")}}</dt> + <dd>この列挙属性は各セルの中身について、水平方向の配置方法を制御します。以下の値を指定可能です。 + <ul> + <li><code>left</code>: 中身をセルの左側に揃えます。</li> + <li><code>center</code>: 中身をセル内で中央揃えにします。</li> + <li><code>right</code>: 中身をセルの右側に揃えます。</li> + <li><code>justify</code>: 中身がセル内で両端揃えになるように、テキストコンテンツに空白を挿入します。</li> + <li><code>char</code>: テキストコンテンツを特定の文字に対して、最小のオフセットで揃えます。特定の文字は {{htmlattrxref("char", "td")}} 属性および {{htmlattrxref("charoff", "td")}} 属性で定義します。{{unimplemented_inline(2212)}}</li> + </ul> + + <p>この属性を設定しない場合は、値が <code>left</code> であるとみなされます。</p> + + <div class="note"><strong>注:</strong> この属性は最新の標準仕様で廃止された (サポートされていない) ため、使用しないでください。 + + <ul> + <li><code>left</code>, <code>center</code>, <code>right</code>, <code>justify</code> の値と同様の効果を得るには、 CSS の {{cssxref("text-align")}} プロパティを使用してください。</li> + <li>CSS3 で <code>char</code> の値と同様の効果を得るには、 {{cssxref("text-align")}} プロパティの値 {{htmlattrxref("char", "td")}} を使用できます {{unimplemented_inline}}。</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("axis")}} {{obsolete_inline("html5")}}</dt> + <dd>この属性は、空白文字で区切られた文字列のリストを持ちます。各文字列は、このヘッダーを適用するセルグループの <code>id</code> です。 + <div class="note"><strong>注:</strong> この属性は最新の標準で廃止されているため、使用しないでください。</div> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd>この属性は、列の各セルの背景色を定義します。値は <a href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a> で定義された6桁の16進数値のいずれかで、先頭に '#' を付加します。16個のあらかじめ定義された色文字列から、1つを使用することができます。 + <table> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>black</code> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>green</code> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>silver</code> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>lime</code> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>gray</code> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>olive</code> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>white</code> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>yellow</code> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>maroon</code> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>navy</code> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>red</code> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>blue</code> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>purple</code> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>teal</code> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>fuchsia</code> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>aqua</code> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>使用上のメモ:</strong> この属性は標準外であり Internet Explorer の一部バージョンしか実装していませんので、使用しないでください。 {{ HTMLElement("td") }} 要素は <a href="/ja/docs/Web/CSS">CSS</a> を使用してスタイル付けをしてください。 <strong>bgcolor</strong> 属性と同様の効果を与えるには、 <a href="/ja/docs/Web/CSS">CSS</a> の {{ cssxref("background-color") }} プロパティを適切な {{ HTMLElement("td") }} 又は {{ HTMLElement("th") }} 要素で使用してください。</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{obsolete_inline("html5")}}</dt> + <dd>この属性は、列内のセルで揃える文字を設定します。典型的な値に、数値や金額を揃えようとするときのピリオド (.) があります。{{ htmlattrxref("align", "td") }} 属性を <code>char</code> に設定していない場合は、この属性を無視します。 + <div class="note"><strong>注:</strong> この属性は最新の標準で廃止されているため、使用しないでください。 CSS3 で {{ htmlattrxref("char", "td") }} と同じ効果を得るには、 {{cssxref("text-align")}} プロパティの最初の値としてその文字を設定することができます。 CSS3 では{{unimplemented_inline}}</div> + </dd> + <dt>{{htmlattrdef("charoff")}} {{obsolete_inline("html5")}}</dt> + <dd>この属性は、 <strong>char</strong> 属性で指定した揃え文字から列のデータをオフセットする文字数を示します。 + <div class="note"><strong>注:</strong> この属性は最新の標準で廃止されているため、使用しないでください。</div> + </dd> + <dt>{{htmlattrdef("height")}} {{Deprecated_inline("html 4")}}, {{obsolete_inline("html5")}}</dt> + <dd>この属性はセルの高さの推奨値を定義するために使用されます。 + <div class="note"><strong>注:</strong> この属性は最新の標準で廃止されているため、使用しないでください。代わりに CSS の {{cssxref("height")}} プロパティを使用してください。</div> + </dd> + <dt>{{htmlattrdef("scope")}} {{obsolete_inline("html5")}}</dt> + <dd>これは列挙型の属性で、この ({{HTMLElement("th")}} で定義されている) 見出し要素が関連するセルを定義します。次の値を取ることができます。 + <div class="note"><strong>注:</strong> この属性を表のセル要素に使用することは、最新の仕様書で廃止されました。この属性は {{HTMLElement("th")}} 要素のみに、行と列のどちらの見出しであるかを定義するために使用してください。</div> + </dd> + <dt>{{htmlattrdef("valign")}} {{obsolete_inline("html5")}}</dt> + <dd>この属性は、表本体の各行のセルにおける垂直方向のテキスト配置方法を指定します。以下の値が指定可能です。 + <ul> + <li><code>baseline</code>: テキストを可能な限りセルの下端に近づけますが、下端ではなく文字の<a href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">ベースライン</a>に揃えます。文字がサイズ全体に渡る場合は、 <code>bottom</code> と同じ効果になります。</li> + <li><code>bottom</code>: テキストを可能な限りセルの下端に近づけて配置します。</li> + <li><code>middle</code>: テキストをセル内の中央に置きます。</li> + <li><code>top</code>: テキストを可能な限りセルの上端に近づけて配置します。</li> + </ul> + + <div class="note"><strong>注:</strong> この属性は最新の標準で廃止されているため、使用しないでください。代わりに CSS の {{cssxref("vertical-align")}} プロパティを使用してください。</div> + </dd> + <dt>{{htmlattrdef("width")}} {{Deprecated_inline("html 4")}}, {{obsolete_inline("html5")}}</dt> + <dd>この属性は、セルの推奨する幅を定義します。<a href="/ja/docs/Web/API/HTMLTableElement/cellSpacing">cellspacing</a> 及び <a href="/ja/docs/Web/API/HTMLTableElement/cellPadding">cellpadding</a> がスペースを追加し、また {{HTMLElement("col")}} の幅も影響を与えます。通常、列の幅が特定のセルを正常に表示できないほど狭く、またそのようなセルが存在する場合は、表示する際に幅を広げるでしょう。 + <div class="note"><strong>注:</strong> この属性は最新の標準で廃止されているため、使用しないでください。代わりに CSS の {{cssxref("width")}} プロパティを使用してください。</div> + </dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code><td></code> 要素の使用例については、 {{HTMLElement("table")}} を参照してください。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','tables.html#the-td-element','td element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-td-element','td element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.td")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>他の表関連 HTML 要素: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}</li> +</ul> diff --git a/files/ja/web/html/element/template/index.html b/files/ja/web/html/element/template/index.html new file mode 100644 index 0000000000..efb5e90b05 --- /dev/null +++ b/files/ja/web/html/element/template/index.html @@ -0,0 +1,207 @@ +--- +title: '<template>: コンテンツテンプレート要素' +slug: Web/HTML/Element/template +tags: + - Element + - HTML + - HTML Web Components + - 'HTML:Flow content' + - 'HTML:Metadata content' + - 'HTML:Phrasing content' + - 'HTML:Script-supporting element' + - Reference + - Template + - Web + - Web Components +translation_of: Web/HTML/Element/template +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML のコンテンツテンプレート (<code><template></code>) 要素</strong> は、すなわちページの読み込み時にすぐには描画されないものの、後で JavaScript を使用してインスタンスを生成できる {{Glossary("HTML")}} を保持するメカニズムです。</span></p> + +<p>テンプレートは、文書内に格納されたコンテンツの断片として考えてください。ページの読み込み時にパーサーが <strong><code><template></code></strong> 要素の内容を処理している間、その内容の有効性のみが検証されます。しかし、要素の内容は描画されません。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Metadata_content">メタデータコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/Guide/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, <a href="/ja/docs/Web/Guide/HTML/Content_categories#Script-supporting_elements">スクリプト対応要素</a></td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>制限なし</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Metadata_content">メタデータコンテンツ</a>, <a href="/ja/docs/Web/Guide/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, <a href="/ja/docs/Web/Guide/HTML/Content_categories#Script-supporting_elements">スクリプト対応要素</a> を受け付けるすべての要素。また、 {{htmlattrxref("span", "colgroup")}} 属性を持たない {{HTMLElement("colgroup")}} 要素の子になることもできます。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>許可されている <code>role</code> なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLTemplateElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には、<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみがあります。</p> + +<p>ただし、 {{domxref("HTMLTemplateElement")}} の {{domxref("HTMLTemplateElement.content", "content")}} プロパティは、読み取り専用の {{domxref("DocumentFragment")}} で、テンプレートが表現する DOM サブツリーを保持しています。なお、 {{domxref("HTMLTemplateElement.content", "content")}} の値を直接使用すると予想外の動作につながる可能性があります。下記の <a href="#Avoiding_DocumentFragment_pitfall">DocumentFragment の落とし穴の回避</a>の節を参照してください。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>まず、HTML 部分の例から始めましょう。</p> + +<pre class="brush: html notranslate"><table id="producttable"> + <thead> + <tr> + <td>UPC_Code</td> + <td>Product_Name</td> + </tr> + </thead> + <tbody> + <!-- 必要に応じて既存のデータをここに含められます。 --> + </tbody> +</table> + +<template id="productrow"> + <tr> + <td class="record"></td> + <td></td> + </tr> +</template> +</pre> + +<p>まず、JavaScript コードを使用して後からコンテンツを挿入するための table を作ります。次に、1 行分を表す HTML 断片の構造が書かれた template が続きます。</p> + +<p>table が生成され、 template が定義されました。 JavaScript を使って、 template を基に構築される各行を table に挿入します。</p> + +<pre class="brush:js; notranslate">// templete 要素の content 属性の有無を確認することで、 +// ブラウザーが HTML template 要素に対応しているかテストします。 +if ('content' in document.createElement('template')) { + + // 既存の HTML tbody と template の行を使って + // table をインスタンス生成します。 + var tbody = document.querySelector("tbody"); + var template = document.querySelector('#productrow'); + + // 新しい行を複製して表に挿入します。 + var clone = template.content.cloneNode(true); + var td = clone.querySelectorAll("td"); + td[0].textContent = "1235646565"; + td[1].textContent = "Stuff"; + + tbody.appendChild(clone); + + // 新しい行を複製して表に挿入します。 + var clone2 = template.content.cloneNode(true); + td = clone2.querySelectorAll("td"); + td[0].textContent = "0384928528"; + td[1].textContent = "Acme Kidney Beans 2"; + + tbody.appendChild(clone2); + +} else { + // HTML template 要素に対応していないので + // 表に行を追加するほかの方法を探します。 +} +</pre> + +<p>結果として、 JavaScript を通して、新しい行が追加された HTML の表ができます。</p> + +<div class="hidden"> +<pre class="brush: css notranslate">table { + background: #000; +} +table td { + background: #fff; +}</pre> +</div> + +<p>{{EmbedLiveSample("Examples", 500, 120)}}</p> + +<h2 id="Avoiding_DocumentFragment_pitfall" name="Avoiding_DocumentFragment_pitfall">DocumentFragment の落とし穴の回避</h2> + +<p>{{domxref("DocumentFragment")}} は様々なイベントのために有効なターゲットではないので、その中の要素を複製したり、参照したりすることが好ましいことがよくあります。</p> + +<p>以下の HTML および JavaScript を考えてみてください。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div id="container"></div> + +<template id="template"> + <div>Click me</div> +</template></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">const container = document.getElementById("container"); +const template = document.getElementById("template"); + +function clickHandler(event) { + alert("Clicked a div"); +} + +const firstClone = template.content.cloneNode(true); +firstClone.addEventListener("click", clickHandler); +container.appendChild(firstClone); + +const secondClone = template.content.firstElementChild.cloneNode(true); +secondClone.addEventListener("click", clickHandler); +container.appendChild(secondClone);</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p><code>firstClone</code> は DocumentFragment のインスタンスなので、期待通りにコンテナー内に追加されますが、クリックしてもクリックイベントは発生しません。 <code>secondClone</code> は {{domxref("HTMLDivElement")}} のインスタンスなので、クリックすると期待通りに動作します。</p> + +<p>{{EmbedLiveSample('Avoiding_DocumentFragment_pitfall')}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','scripting.html#the-template-element','template element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','semantics-scripting.html#the-template-element','template element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されます。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.template")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>ウェブコンポーネント: {{HTMLElement("slot")}} (および過去の {{HTMLElement("shadow")}})</li> + <li><a href="/ja/docs/Web/Web_Components/Using_templates_and_slots">テンプレートとスロットの利用</a></li> +</ul> diff --git a/files/ja/web/html/element/textarea/index.html b/files/ja/web/html/element/textarea/index.html new file mode 100644 index 0000000000..8a287c2be9 --- /dev/null +++ b/files/ja/web/html/element/textarea/index.html @@ -0,0 +1,277 @@ +--- +title: <textarea> +slug: Web/HTML/Element/textarea +tags: + - Element + - Forms + - HTML + - HTML forms + - Reference + - Web + - textarea +translation_of: Web/HTML/Element/textarea +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><textarea></code> 要素</strong>は、複数行のプレーンテキスト編集コントロールを表し、レビューのコメントやお問い合わせフォーム等のように、ユーザーが大量の自由記述テキストを入力できるようにするときに便利です。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/textarea.html", "tabbed-standard")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<p>上記の例では <code><textarea></code> の様々な機能を紹介しています。</p> + +<ul> + <li><code>id</code> 属性により、アクセシビリティのために <code><textarea></code> を {{htmlelement("label")}} 要素に結びつけることができる</li> + <li><code>name</code> 属性により、フォームが送信されたときにデータポイントに関連付けられた名前を設定している</li> + <li><code>rows</code> 属性と <code>cols</code> 属性により、 <code><textarea></code> が占める実際の大きさを指定することができます。ブラウザーの既定値が様々である可能性があるため、一貫性のためにこれらの値を設定することはよいことでしょう。</li> + <li>既定のコンテンツが開始タグと終了タグの間に入っています。 <code><textarea></code> は <code>value</code> 属性に対応していません。</li> +</ul> + +<p><code><textarea></code> 要素は他にも、フォームの <code><input></code> と共通の属性のいくつか、例えば <code>autocomplete</code>, <code>autofocus</code>, <code>disabled</code>, <code>placeholder</code>, <code>readonly</code>, <code>required</code> などを受け付けます。</p> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>を持ちます。</p> + +<dl> + <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt> + <dd>これは標準外の属性で、 iOS の WebKit (従って Safari、Firefox、Chrome を含む、iOS で動作するほぼすべてのブラウザー) が対応しており、ユーザーが入力または編集したテキスト値を自動的に大文字に変換するか否か、またどのように変換するかを制御します。非推奨とされていない値は、 iOS 5 以降で使用できます。以下の値を指定できます。 + <ul> + <li><code>none</code>: 自動大文字化機能を無効にします。</li> + <li><code>sentences</code>: 文の先頭文字を自動的に大文字化します。</li> + <li><code>words</code>: 単語の先頭文字を自動的に大文字化します。</li> + <li><code>characters</code>: すべての文字を自動的に大文字化します。</li> + <li><code>on</code>: {{deprecated_inline}} iOS 5 から非推奨です。</li> + <li><code>off</code>: {{deprecated_inline}} iOS 5 から非推奨です。</li> + </ul> + </dd> + <dt>{{htmlattrdef("autocomplete")}}</dt> + <dd>この属性は、コントロールの値をブラウザーが自動的に補完してよいかを示します。以下の値を指定できます。 + <ul> + <li><code>off</code>: ユーザーはフォームを使用するたびにフィールドへ値を明示的に入力しなければならないか、ドキュメントが独自の自動補完を提供します。ブラウザーは入力内容の自動補完を行いません。</li> + <li><code>on</code>: ブラウザーはユーザーが以前入力した値を元に、値の自動補完を行うことができます。</li> + </ul> + + <p><code><textarea></code> 要素で <strong>autocomplete</strong> 属性を指定していない場合は、ブラウザーは <code><textarea></code> 要素のフォームオーナーの <strong>autocomplete</strong> 属性の値を使用します。フォームオーナーは当該 <code><textarea></code> 要素が子孫になっている {{HTMLElement("form")}} 要素か、textarea 要素の <strong>form</strong> 属性で <strong>id</strong> を指定されている form 要素です。詳しくは、{{HTMLElement("form")}} 要素の {{htmlattrxref("autocomplete", "form")}} 属性をご覧ください。</p> + </dd> + <dt>{{ htmlattrdef("autofocus") }}</dt> + <dd>この論理属性で、ユーザーが別のコントロールに入力するなどして変更しない限り、ページ読み込み時にフォームコントロールがフォーカスを持つべきであることを指定できます。文書中のフォーム関連要素のうちのひとつだけに、この属性を指定することができます。値は、属性名と同じ <code>autofocus</code> のみ指定可能です。</dd> + <dt>{{ htmlattrdef("cols") }}</dt> + <dd>平均的な文字幅による、テキストコントロールの外見上の幅です。この属性を指定する場合は、正の整数を与えなければなりません。指定しない場合のデフォルト値は <code>20</code> です (HTML5)。</dd> + <dt>{{ htmlattrdef("disabled") }}</dt> + <dd>この真偽値属性は、ユーザーがそのコントロールを利用できないことを示します。(もしこの属性が指定されていない場合、コントロールはその設定を親要素、例えば <code>fieldset</code> 要素から継承します。もし親要素に <code>disabled</code> 属性を持つものがなければ、そのコントロールは利用可能です。)</dd> + <dt>{{ htmlattrdef("form") }}</dt> + <dd><code><textarea></code> 要素が関連づけられた form 要素 (フォームオーナー) です。属性値は、同じドキュメント内の form 要素の id としなければなりません。この属性を指定しない場合は、<code><textarea></code> 要素を form 要素の子要素として配置しなければなりません。この属性により、<code><textarea></code> 要素を form 要素の子孫としてだけではなく、同一文書のどこにでも配置できるようになりました。</dd> + <dt>{{ htmlattrdef("maxlength") }}</dt> + <dd>ユーザーが入力可能な文字 (UTF-16 コード単位) の最大数です。この属性を指定しない場合、ユーザーは無制限に文字を入力可能です。</dd> + <dt>{{ htmlattrdef("minlength") }}</dt> + <dd>ユーザーが入力しなければならない最小文字数 (UTF-16 コード単位) です。</dd> + <dt>{{ htmlattrdef("name") }}</dt> + <dd>コントロールの名前です。</dd> + <dt>{{ htmlattrdef("placeholder") }}</dt> + <dd>コントロールに何を入力できるかに関する、ユーザーへの助言です。プレイスホルダーのテキスト内にあるキャリッジリターンやラインフィードは、ヒントを表示する際に改行として扱わなければなりません。 + <div class="note"><strong>注:</strong> プレイスホルダーはフォームに入力されるべきデータの種類の例を示すためだけに使用してください。入力欄に関連付けられた {{HTMLElement("label")}} 要素の代わりとして使用<em>しない</em>でください。全体的な説明は、{{SectionOnPage("/ja/docs/Web/HTML/Element/input", "ラベルとプレイスホルダー")}}を参照してください。</div> + </dd> + <dt>{{ htmlattrdef("readonly") }}</dt> + <dd>この論理属性は、ユーザーがコントロールの値を変更できないことを示します。<code>disabled</code> 属性とは異なり、<code>readonly</code> 属性はユーザーがコントロールをクリックしたり選択することを妨げません。読み取り専用のコントロールの値は、フォームとともに送信可能です。</dd> + <dt>{{ htmlattrdef("required") }}</dt> + <dd>この属性は、フォームを送信する前に値を入力しなければならないことを示します。</dd> + <dt>{{ htmlattrdef("rows") }}</dt> + <dd>コントロールで見ることが可能なテキストの行数です。</dd> + <dt>{{ htmlattrdef("spellcheck") }}</dt> + <dd><code><textarea></code> がブラウザーや OS に依存したスペルチェックを行うかどうかを指定します。以下の値が使用できます。 + <ul> + <li><code>true</code>: 要素でスペルや文法チェックを行う必要があることを示します。</li> + <li><code>default</code> : 要素は既定の動作、おそらく親要素の <code>spellcheck</code> 値によって動作することを示します。</li> + <li><code>false</code> : 要素でスペルチェックを行うべきではないことを示します。</li> + </ul> + </dd> + <dt>{{ htmlattrdef("wrap") }}</dt> + <dd>テキストの折り返しの制御法を示します。以下の値を指定可能です。 + <ul> + <li><code>hard</code> : 各行の長さがコントロールの幅を超えないように、ブラウザーが自動的に改行 (CR+LF) を挿入します。<code>cols</code> 属性を指定しなければなりません。</li> + <li><code>soft</code> : ブラウザーは値に含まれる改行 (CR+LF のペア) をすべて維持しますが、改行の付加は行いません。</li> + <li><code>off</code> {{non-standard_inline}}: <code>soft</code> に似ていますが外観を <code>white-space: pre</code> に変更しますので、<code>cols</code> を超えた部分は折り返されず、水平方向にスクロール可能になります。</li> + </ul> + + <p>この属性を指定しない場合の既定値は <code>soft</code> です。</p> + </dd> +</dl> + +<h2 id="Styling_with_CSS" name="Styling_with_CSS">CSS でのスタイル付け</h2> + +<p><code><textarea></code> は<a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a>です。 — ラスタ画像のように固有の寸法を持ちます。既定では、 {{cssxref("display")}} の値は block です。ボックスモデル、フォント、カラースキーム等のスタイル付けが普通の CSS を使用して操作しやすいので、他のフォーム要素と比較して、スタイル付けは比較的容易です。</p> + +<p><a href="/ja/docs/Learn/HTML/Forms/Styling_HTML_forms">HTML フォームへのスタイル設定</a>に、 <code><textarea></code> にスタイル付けするためのいくつかの有益なコツがあります。</p> + +<h3 id="Baseline_inconsistency" name="Baseline_inconsistency">ベースラインの不整合</h3> + +<p>HTML 仕様書では、 <code><textarea></code> のベースラインがどこであるかを定義していません。よって、ブラウザーによりその位置は異なります。 Gecko では <code><textarea></code> のベースラインを textarea の最初の行のベースラインに設定しています。他のブラウザーは、<code><textarea></code> のボックスの下端に設定していることもあります。動作を予測できないため、textarea で {{cssxref("vertical-align")}}<code>: baseline</code> を使用しないようにしてください。</p> + +<h3 id="Controlling_whether_a_textarea_is_resizable" name="Controlling_whether_a_textarea_is_resizable">textarea の大きさの変更が可能かどうかの制御</h3> + +<p>多くのブラウザーでは、 <code><textarea></code> は大きさの変更が可能です。 — 右端の隅にドラッグのためのハンドルがあり、ページ内の要素の大きさを変更するための使用できることが分かるでしょう。これは CSS の {{ cssxref("resize") }} プロパティで制御されます。 — 既定では大きさの変更が有効ですが、 <code>resize</code> の値に <code>none</code> を使用することで明示的に無効にすることができます。</p> + +<pre class="brush: html notranslate">textarea { + resize: none; +} +</pre> + +<h3 id="Styling_valid_and_invalid_values" name="Styling_valid_and_invalid_values">有効・無効な値のスタイル付け</h3> + +<p>{{cssxref(":valid")}} 及び {{cssxref(":invalid")}} 擬似クラスを使用すると、 <code><textarea></code> で有効又は無効な値 (例えば <code>minlength</code> と <code>maxlength</code> の範囲の中に収まっているか外れているか、又は <code>required</code>) を強調表示できます。例えば以下のように、中の値が有効か無効かでテキストエリアの境界を異なる表示にすることができます。</p> + +<pre class="brush: css notranslate">textarea:invalid { + border: 2px dashed red; +} + +textarea:valid { + border: 2px solid lime; +}</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Basic_example" name="Basic_example">基本的な例</h3> + +<p>以下の例は、行数と列数と既定の内容だけを設定した、とても単純なテキストエリアを表示します。</p> + +<pre class="brush: html notranslate"><textarea name="textarea" + rows="10" cols="50">ここに何か書いてください</textarea></pre> + +<p>{{ EmbedLiveSample('Basic_example','600','150') }}</p> + +<h3 id="Min_and_max_length" name="Min_and_max_length">最小・最大長</h3> + +<p>この例は文字数の最小・最大値を、それぞれ 10 と 20 に設定しています。見てみましょう。</p> + +<pre class="brush: html notranslate"><textarea name="textarea" + rows="5" cols="30" + minlength="10" maxlength="20">ここに何か書いてください</textarea></pre> + +<p>{{ EmbedLiveSample('Min_and_max_length','600','80') }}</p> + +<p>なお、 <code>minlength</code> は最小値を越えて入力された文字をユーザーが削除することを阻止しませんので、入力された値により <code><textarea></code> が無効になることがあります。また、 <code>minlength</code> の値が (例えば 3 に) 設定されていた場合であっても、 <code><textarea></code> が空欄である場合は <code>required</code> 属性が設定されていない限り有効として扱われます。</p> + +<h3 id="Placeholder" name="Placeholder">プレイスホルダー</h3> + +<p>この例はプレイスホルダーを設定します。ボックスに入力を開始した時に消えることを確認して下さい。</p> + +<pre class="brush: html notranslate"><textarea name="textarea" + rows="5" cols="30" + placeholder="コメントの文字列"></textarea></pre> + +<p>{{ EmbedLiveSample('Placeholder','600','80') }}</p> + +<div class="note"> +<p><strong>注:</strong> プレイスホルダーはフォームに入力されるべきデータの種類の例を示すためだけに使用してください。入力欄に関連付けられた {{HTMLElement("label")}} 要素の代わりとして使用<em>しない</em>でください。全体的な説明は、{{SectionOnPage("/ja/docs/Web/HTML/Element/input", "ラベルとプレイスホルダー")}}を参照してください。</p> +</div> + +<h3 id="Disabled_and_readonly" name="Disabled_and_readonly">無効と読み取り専用</h3> + +<p>この例は二つの <code><textarea></code> を示しています。 — 一つは <code>disabled</code> であり、もう一方は <code>readonly</code> です。両方を試してみて動作の違いを確認してください。 — <code>disabled</code> の要素はどのような方法でも選択できず (値の送信もされません)、 <code>readonly</code> の要素は選択可能で内容をコピーできます (そして値は送信されます)。内容が編集できないだけです。</p> + +<div class="note"> +<p><strong>注:</strong> Chrome など、 Firefox 以外のブラウザーでは、 <code>disabled</code> のテキストエリアのコンテンツが選択可能でコピー可能である場合もあります</p> +</div> + +<pre class="brush: html notranslate"><textarea name="textarea" + rows="5" cols="30" + disabled>I am a disabled textarea</textarea> +<textarea name="textarea" + rows="5" cols="30" + readonly>I am a readonly textarea</textarea> +</pre> + +<p>{{ EmbedLiveSample('Disabled_and_readonly','600','80') }}</p> + +<h2 id="Technical_summary" name="Technical_summary">技術的概要</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Interactive_content">対話型コンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Form_listed">リスト化</a>, <a href="/ja/docs/Web/HTML/Content_categories#Form_labelable">ラベル付け可能</a>, <a href="/ja/docs/Web/HTML/Content_categories#form_resettable">リセット可能</a>, <a href="/ja/docs/Web/HTML/Content_categories#Form_submittable">サブミット可能</a>, <a href="/ja/docs/Web/HTML/Content_categories#Form-associated_">フォーム関連</a> 要素</td> + </tr> + <tr> + <th scope="row">許可された内容</th> + <td>テキストのみ</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可された親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></code></td> + </tr> + <tr> + <th scope="row">許可された ARIA ロール</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLTextAreaElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#the-textarea-element', '<textarea>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-textarea-element', '<textarea>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.7', '<textarea>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.textarea")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<p>他のフォーム関連要素:</p> + +<ul> + <li>{{ HTMLElement("form") }}</li> + <li>{{ HTMLElement("button") }}</li> + <li>{{ HTMLElement("datalist") }}</li> + <li>{{ HTMLElement("legend") }}</li> + <li>{{ HTMLElement("label") }}</li> + <li>{{ HTMLElement("select") }}</li> + <li>{{ HTMLElement("optgroup") }}</li> + <li>{{ HTMLElement("option") }}</li> + <li>{{ HTMLElement("input") }}</li> + <li>{{ HTMLElement("keygen") }}</li> + <li>{{ HTMLElement("fieldset") }}</li> + <li>{{ HTMLElement("output") }}</li> + <li>{{ HTMLElement("progress") }}</li> + <li>{{ HTMLElement("meter") }}</li> +</ul> diff --git a/files/ja/web/html/element/tfoot/index.html b/files/ja/web/html/element/tfoot/index.html new file mode 100644 index 0000000000..b00be09dd5 --- /dev/null +++ b/files/ja/web/html/element/tfoot/index.html @@ -0,0 +1,151 @@ +--- +title: '<tfoot>: 表フッター要素' +slug: Web/HTML/Element/tfoot +tags: + - Element + - HTML + - HTML tabular data + - Reference + - Tables + - Web +translation_of: Web/HTML/Element/tfoot +--- +<div>{{HTMLRef}}</div> + +<p id="Summary"><strong>HTML の <code><tfoot></code> 要素</strong>は、表の一連の列を総括する行のセットを定義します。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/tfoot.html","tabbed-taller")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td>なし</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>0 個以上の {{HTMLElement("tr")}} 要素</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>開始タグは必須。親 {{HTMLElement("table")}} 要素内に以降のコンテンツがない場合は終了タグを省略可能。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>{{HTMLElement("table")}} 要素。{{HTMLElement("tfoot")}} は {{HTMLElement("caption")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tr")}} の各要素の後方に配置しなければなりません。これは HTML5 の要件です。<br> + {{HTMLVersionInline("4")}} {{HTMLElement("tfoot")}} 要素は {{HTMLElement("tbody")}} 要素および {{HTMLElement("tr")}} 要素の後方に配置してはなりません。これは HTML5 の規範的要件とまさに矛盾することに注意してください。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">rowgroup</a></code></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLTableSectionElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<h3 id="Deprecated_attributes" name="Deprecated_attributes">非推奨の属性</h3> + +<p>以下の属性は非推奨であり、使用すべきではありません。これらの属性は、既存のコードを更新する際の参考として、また歴史的な興味のためだけに、以下に文書化されています。</p> + +<dl> + <dt>{{htmlattrdef("align")}} {{deprecated_inline}}</dt> + <dd>この列挙属性は、各セルの内容物について、水平方向の配置方法を制御します。以下の値が指定可能です。 + <ul> + <li><code>left</code>: 内容物をセルの左側に揃えます。</li> + <li><code>center</code>: 内容物をセル内で中央揃えにします。</li> + <li><code>right</code>: 内容物をセルの右側に揃えます。</li> + <li><code>justify</code>: 内容物がセル内で両端揃えになるように、テキストコンテンツに空白を挿入します。</li> + <li><code>char</code>: テキストコンテンツを特定の文字に対して、最小のオフセットで揃えます。特定の文字は {{htmlattrxref("char", "tfoot")}} 属性および {{htmlattrxref("charoff", "tfoot")}} 属性で定義します。</li> + </ul> + + <p>この属性が設定されていない場合は、<code>left</code> 値であるものとします。</p> + + <div class="note"><strong>注:</strong> + + <ul> + <li><code>left</code>, <code>center</code>, <code>right</code>, <code>justify</code> の値と同様の効果を得るには、 CSS の {{cssxref("text-align")}} プロパティを使用してください。</li> + <li>CSS3 で <code>char</code> の値と同様の効果を得るには、 {{htmlattrxref("char", "tfoot")}} の値を {{cssxref("text-align")}} プロパティの値として使用することができます。 {{unimplemented_inline}}</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt> + <dd> + <p>表の背景色です。この属性は、列の各セルの背景色を定義します。 <a href="/ja/docs/Web/CSS/color_value#RGB_colors">6桁の16進数の RGB コード</a>の前に '<code>#</code>' が付いた形です。定義済みの<a href="/ja/docs/Web/CSS/color_value#Color_keywords">色キーワード</a>の一つも使用できます。</p> + + <p>同様の効果を得るには、 CSS の {{cssxref("background-color")}} プロパティを使用してください。</p> + </dd> + <dt>{{htmlattrdef("char")}} {{deprecated_inline}}</dt> + <dd>この属性は、列内のセルの内容をある文字へ整列することを指定します。典型的な値としては、数字や金額を整列させようとするときのピリオド (.) があります。 {{htmlattrxref("align", "tfoot")}} が <code>char</code> に設定されていない場合、この属性は無視されます。</dd> + <dt>{{htmlattrdef("charoff")}} {{deprecated_inline}}</dt> + <dd>この属性は、<code>char</code> 属性で指定した揃え文字から列のデータをオフセットする文字数を示します。</dd> + <dt>{{htmlattrdef("valign")}} {{deprecated_inline}}</dt> + <dd>この属性は、表本体の各行のセルにおける垂直方向のテキスト配置方法を指定します。以下の値が指定可能です。 + <ul> + <li><code>baseline</code>: テキストを可能な限りセルの下端に近づけますが、下端ではなく文字の<a class="external" href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">ベースライン</a>に揃えます。文字がサイズ全体に渡る場合は、 <code>bottom</code> と同じ効果になります。</li> + <li><code>bottom</code>: テキストを可能な限りセルの下端に近づけて配置します。</li> + <li><code>middle</code>: テキストをセル内の中央に置きます。</li> + <li><code>top</code>: テキストを可能な限りセルの上端に近づけて配置します。</li> + </ul> + + <div class="note"><strong>注:</strong> この属性は最新の標準仕様で廃止された (対応していない) ため、使用しないでください。代わりに CSS の {{cssxref("vertical-align")}} プロパティを使用してください。</div> + </dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code><tfoot></code> の例については、 {{HTMLElement("table")}} を参照してください。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','tables.html#the-tfoot-element','tfoot element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-tfoot-element','tfoot element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.tfoot")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>他の表関連要素: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}</li> + <li><code><tfoot></code> 要素のスタイル設定に役立つであろう CSS プロパティと擬似クラス: + <ul> + <li>{{cssxref(":nth-child")}} 擬似クラス: 列内のセルの配置を設定するため</li> + <li>{{cssxref("text-align")}} プロパティ: すべてのセル内コンテンツを '.' などの同一文字で揃えるための</li> + </ul> + </li> +</ul> diff --git a/files/ja/web/html/element/th/index.html b/files/ja/web/html/element/th/index.html new file mode 100644 index 0000000000..db57dca8d1 --- /dev/null +++ b/files/ja/web/html/element/th/index.html @@ -0,0 +1,239 @@ +--- +title: <th> +slug: Web/HTML/Element/th +tags: + - HTML + - HTML 表形式データ + - Reference + - ウェブ + - テーブル + - 表 + - 表見出し + - 表見出しセル + - 要素 +translation_of: Web/HTML/Element/th +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><th></code> 要素</strong>は、表のセルのグループ用のヘッダーであるセルを定義します。このグループの性質は、{{htmlattrxref("scope", "th")}} 属性と {{htmlattrxref("headers", "th")}} 属性で定義します。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/th.html","tabbed-taller")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td>なし</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Flow_content">フローコンテンツ</a>、ただしヘッダー、フッター、区分コンテンツ、見出しコンテンツを除く。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>開始タグは必須です。<br> + 直後に {{HTMLElement("th")}} 要素または {{HTMLElement("td")}} 要素がある場合、または親要素内で以降のデータがない場合は終了タグを省略可能。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>{{HTMLElement("tr")}} 要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td>{{ARIARole("columnheader")}} or {{ARIARole("rowheader")}}</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLTableHeaderCellElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{htmlattrdef("abbr")}}</dt> + <dd>この属性は、セルの内容の簡潔な説明を持ちます。読み上げソフトなど一部のユーザーエージェントは、内容自体の前にこの説明を提供することがあります。</dd> + <dt>{{htmlattrdef("colspan")}}</dt> + <dd>この属性はセルをいくつの列に広げるかを示す、負でない整数を持ちます。既定値は <code>1</code> です。1000 を超える値は正しくないとみなされ、既定値 (1) が設定されるでしょう。</dd> + <dt>{{htmlattrdef("headers")}}</dt> + <dd>この属性は、空白文字で区切られた文字列のリストを持ちます。各々の文字列は、この要素に当てはめる {{HTMLElement("th")}} 要素の <strong>id</strong> 属性と対応します。</dd> + <dt>{{htmlattrdef("rowspan")}}</dt> + <dd>この属性はセルをいくつの行に広げるかを示す、負でない整数を持ちます。既定値は <code>1</code> です。<code>0</code> を設定した場合は、セルが属する表セクション ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, 暗黙的に定義されたものも含む) の終端まで拡張します。 65534 より大きな値は、 65534 に切り詰めます。</dd> + <dt>{{htmlattrdef("scope")}}</dt> + <dd>これは列挙型の属性で、この ({{HTMLElement("th")}} で定義されている) 見出し要素が関連するセルを定義します。次の値を取ることができます。 + <ul> + <li><code>row</code>: この見出しはその行に属するすべてのセルに関連します。</li> + <li><code>col</code>: この見出しはその列に属するすべてのセルに関連します。</li> + <li><code>rowgroup</code>: この見出しは行グループに属し、その中のすべてのセルに関連します。これらのセルは {{HTMLElement("table")}} 要素の <code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code> 属性の値によって、見出しの右又は左に配置されます。</li> + <li><code>colgroup</code>: この見出しは列グループに属し、その中のすべてのセルに関連します。.</li> + <li><code>auto</code></li> + </ul> + + <p>この属性が指定されなかった場合の既定値は <code>auto</code> です。</p> + </dd> +</dl> + +<h3 id="Deprecated_attributes" name="Deprecated_attributes">非推奨の属性</h3> + +<dl> + <dt>{{htmlattrdef("align")}} {{obsolete_inline("html5")}}</dt> + <dd>この列挙属性は各セルの中身について、水平方向の配置方法を制御します。以下の値を指定可能です。 + <ul> + <li><code>left</code>: 中身をセルの左側に揃えます。</li> + <li><code>center</code>: 中身をセル内で中央揃えにします。</li> + <li><code>right</code>: 中身をセルの右側に揃えます。</li> + <li><code>justify</code> (テキストのみ): セルの中で幅が全体にわたるように、中身が引き延ばされます。</li> + <li><code>char</code> (テキストのみ): テキストコンテンツを特定の文字に対して、最小のオフセットで揃えます。特定の文字は {{htmlattrxref("char", "th")}} 属性および {{htmlattrxref("charoff", "th")}} 属性で定義します。{{unimplemented_inline(2212)}}</li> + </ul> + + <p>この属性を設定しない場合は、値が <code>left</code> であるとみなされます。</p> + + <div class="note"><strong>注:</strong> この属性は最新の標準仕様で廃止された (サポートされていない) ため、使用しないでください。 + + <ul> + <li><code>left</code>, <code>center</code>, <code>right</code>, <code>justify</code> の値と同様の効果を得るには、 CSS の {{cssxref("text-align")}} プロパティを使用してください。</li> + <li>CSS3 で <code>char</code> の値と同様の効果を得るには、 {{cssxref("text-align")}} プロパティに {{htmlattrxref("char", "th")}} で使用する値と同じものを指定してください。 CSS3 では {{unimplemented_inline}}</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("axis")}} {{obsolete_inline("html5")}}</dt> + <dd>この属性は、空白文字で区切られた文字列のリストを持ちます。各文字列は、このヘッダーを適用するセルグループの <code>id</code> です。 + <div class="note"><strong>注:</strong> この属性は最新の標準で廃止されているため、使用しないでください。代わりに {{htmlattrxref("scope", "th")}} 属性を使用してください。</div> + </dd> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd>この属性は、列の各セルの背景色を定義します。値は <a href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a> で定義された6桁の16進数値のいずれかで、先頭に '#' を付加します。16個のあらかじめ定義された色文字列から、1つを使用することができます。 + <table> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>black</code> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>green</code> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>silver</code> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>lime</code> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>gray</code> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>olive</code> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>white</code> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>yellow</code> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>maroon</code> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>navy</code> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>red</code> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>blue</code> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>purple</code> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>teal</code> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>fuchsia</code> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border: 1px solid black;"></td> + <td><code>aqua</code> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>注:</strong> この属性は標準外であり Internet Explorer の一部バージョンしか実装していませんので、使用しないでください。 {{HTMLElement("th")}} 要素は <a href="/ja/docs/Web/CSS">CSS</a> を使用してスタイル付けをしてください。 <strong>bgcolor</strong> 属性と同様の効果を与えるには、 <a href="/ja/docs/Web/CSS">CSS</a> の {{cssxref("background-color")}} プロパティを適切な {{HTMLElement("td")}} または {{HTMLElement("th")}} 要素で使用してください。</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{obsolete_inline("html5")}}</dt> + <dd>この属性は、列内のセルで揃える文字を設定します。典型的な値に、数値や金額を揃えようとするときのピリオド (.) があります。 {{htmlattrxref("align", "th")}} 属性を <code>char</code> に設定していない場合は、この属性を無視します。 + <div class="note"><strong>注:</strong> この属性は最新の標準で廃止されているため、使用しないでください。 CSS3 で同じ効果を得るには、 {{cssxref("text-align")}} プロパティの最初の値としてその文字を設定することができます。 CSS3 では{{unimplemented_inline}}</div> + </dd> + <dt>{{htmlattrdef("charoff")}} {{obsolete_inline("html5")}}</dt> + <dd>この属性は、 <strong>char</strong> 属性で指定した揃え文字から列のデータをオフセットする文字数を示します。 + <div class="note"><strong>注:</strong> この属性は最新の標準で廃止されているため、使用しないでください。</div> + </dd> + <dt>{{htmlattrdef("height")}} {{Deprecated_inline("html 4")}}, {{obsolete_inline("html5")}}</dt> + <dd>この属性はセルの高さの推奨値を定義するために使用されます。 + <div class="note"><strong>注:</strong> この属性は最新の標準で廃止されているため、使用しないでください。代わりに CSS の {{cssxref("height")}} プロパティを使用してください。</div> + </dd> + <dt>{{htmlattrdef("valign")}} {{obsolete_inline("html5")}}</dt> + <dd>この属性は、表本体の各行のセルにおける垂直方向のテキスト配置方法を指定します。以下の値が指定可能です。 + <ul> + <li><code>baseline</code>: テキストを可能な限りセルの下端に近づけますが、下端ではなく文字の<a href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">ベースライン</a>に揃えます。文字がサイズ全体に渡る場合は、 <code>bottom</code> と同じ効果になります。</li> + <li><code>bottom</code>: テキストを可能な限りセルの下端に近づけて配置します。</li> + <li><code>middle</code>: テキストをセル内の中央に置きます。</li> + <li><code>top</code>: テキストを可能な限りセルの上端に近づけて配置します。</li> + </ul> + + <div class="note"><strong>注:</strong> この属性は最新の標準で廃止されているため、使用しないでください。代わりに CSS の {{cssxref("vertical-align")}} プロパティを使用してください。</div> + </dd> + <dt>{{htmlattrdef("width")}} {{Deprecated_inline("html 4")}}, {{obsolete_inline("html5")}}</dt> + <dd>この属性は、セルの推奨する幅を定義します。 {{domxref("HTMLTableElement.cellSpacing", "cellspacing")}} および {{domxref("HTMLTableElement.cellPadding", "cellpadding")}} プロパティで追加のスペースを追加し、また {{HTMLElement("col")}} の幅も影響を与えます。通常、列の幅が特定のセルを正常に表示できないほど狭く、またそのようなセルが存在する場合は、表示する際に幅を広げるでしょう。 + <div class="note"><strong>注:</strong> この属性は最新の標準で廃止されているため、使用しないでください。代わりに CSS の {{cssxref("width")}} プロパティを使用してください。</div> + </dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code><th></code> 要素の使用例については、 {{HTMLElement("table")}} を参照してください。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','tables.html#the-th-element','th element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-th-element','th element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.th")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>他の表関連 HTML 要素: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}</li> +</ul> diff --git a/files/ja/web/html/element/thead/index.html b/files/ja/web/html/element/thead/index.html new file mode 100644 index 0000000000..70af0d5419 --- /dev/null +++ b/files/ja/web/html/element/thead/index.html @@ -0,0 +1,215 @@ +--- +title: '<thead>: 表ヘッダー要素' +slug: Web/HTML/Element/thead +tags: + - HTML + - HTML 表形式データ + - Reference + - ウェブ + - テーブル + - 要素 +translation_of: Web/HTML/Element/thead +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><thead></code> 要素</strong>は、表の列の見出しを定義する行のセットを定義します。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/thead.html","tabbed-taller")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td>なし</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>0 個以上の {{HTMLElement("tr")}} 要素</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>開始タグは必須。 {{HTMLElement("thead")}} 要素の直後に {{HTMLElement("tbody")}} 要素または {{HTMLElement("tfoot")}} 要素がある場合は終了タグを省略可能。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>{{HTMLElement("table")}} 要素。 {{HTMLElement("thead")}} は (暗黙的に定義されるものであっても) {{HTMLElement("caption")}} 要素や {{HTMLElement("colgroup")}} 要素の後方かつ {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("tr")}} の各要素の前方に配置しなければなりません。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">rowgroup</a></code></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLTableSectionElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<h3 id="Deprecated_attributes" name="Deprecated_attributes">非推奨の属性</h3> + +<dl> + <dt>{{htmlattrdef("align")}} {{HTMLVersionInline("4")}} では {{Deprecated_inline}}, {{HTMLVersionInline("5")}} では {{obsolete_inline}}</dt> + <dd>この列挙属性は各セルの中身について、水平方向の配置方法を制御します。以下の値を指定可能です。 + <ul> + <li><code>left</code>: 中身をセルの左側に揃えます。</li> + <li><code>center</code>: 中身をセル内で中央揃えにします。</li> + <li><code>right</code>: 中身をセルの右側に揃えます。</li> + <li><code>justify</code>: 中身がセル内で両端揃えになるように、テキストコンテンツに空白を挿入します。</li> + <li><code>char</code>: テキストコンテンツを特定の文字に対して、最小のオフセットで揃えます。特定の文字は {{htmlattrxref("char", "thead")}} 属性および {{htmlattrxref("charoff", "thead")}} 属性で定義します。 {{unimplemented_inline("2212")}}</li> + </ul> + + <p>この属性を設定しない場合は、値が <code>left</code> であるとみなされます。</p> + + <div class="note"><strong>注:</strong> この属性は最新の標準仕様で廃止された (対応していない) ため、使用しないでください。 + + <ul> + <li><code>left</code>, <code>center</code>, <code>right</code>, <code>justify</code> の値と同様の効果を得るには、 CSS の {{cssxref("text-align")}} プロパティを使用してください。</li> + <li>CSS3 で <code>char</code> の値と同様の効果を得るには、 {{htmlattrxref("char", "thead")}} の値を {{cssxref("text-align")}} プロパティの値として使用することができます。 {{unimplemented_inline}}</li> + </ul> + </div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> + <dd>この属性は、列の各セルの背景色を定義します。値は <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a> で定義された6桁の16進数値のいずれかで、先頭に '#' を付加します。16個のあらかじめ定義された色文字列から、1つを使用することができます。 + <table style="width: 80%;"> + <tbody> + <tr> + <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>black</code> = "#000000"</td> + <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>green</code> = "#008000"</td> + </tr> + <tr> + <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>silver</code> = "#C0C0C0"</td> + <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>lime</code> = "#00FF00"</td> + </tr> + <tr> + <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>gray</code> = "#808080"</td> + <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>olive</code> = "#808000"</td> + </tr> + <tr> + <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>white</code> = "#FFFFFF"</td> + <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>yellow</code> = "#FFFF00"</td> + </tr> + <tr> + <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>maroon</code> = "#800000"</td> + <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>navy</code> = "#000080"</td> + </tr> + <tr> + <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>red</code> = "#FF0000"</td> + <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>blue</code> = "#0000FF"</td> + </tr> + <tr> + <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>purple</code> = "#800080"</td> + <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>teal</code> = "#008080"</td> + </tr> + <tr> + <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>fuchsia</code> = "#FF00FF"</td> + <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"></td> + <td><code>aqua</code> = "#00FFFF"</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>使用上のメモ:</strong> この属性は標準外であり Internet Explorer の一部バージョンしか実装していませんので、使用しないでください。 {{HTMLElement("thead")}} 要素は <a href="/ja/docs/Web/CSS">CSS</a> を使用してスタイル付けをしてください。 <strong>bgcolor</strong> 属性と同様の効果を与えるには、 <a href="/ja/docs/Web/CSS">CSS</a> の {{cssxref("background-color")}} プロパティを適切な {{HTMLElement("td")}} または {{HTMLElement("th")}} 要素で使用してください。</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("char")}} {{HTMLVersionInline("4")}} では {{Deprecated_inline}}, {{HTMLVersionInline("5")}} では {{obsolete_inline}}</dt> + <dd>この属性は、列内のセルで揃える文字を設定します。典型的な値に、数値や金額を揃えようとするときのピリオド (.) があります。{{htmlattrxref("align", "thead")}} 属性を <code>char</code> に設定していない場合は、この属性を無視します。 + <div class="note"><strong>注:</strong> この属性は最新の標準仕様で廃止された (サポートされていない) ため、使用しないでください。CSS3 で {{htmlattrxref("char", "thead")}} と同じ効果を得るには、 {{htmlattrxref("char", "thead")}} 属性で使用する文字のセットを {{cssxref("text-align")}} プロパティの値として使用することができます。{{unimplemented_inline}}</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("charoff")}} {{HTMLVersionInline("4")}} では {{Deprecated_inline}}, {{HTMLVersionInline("5")}} では {{obsolete_inline}}</dt> + <dd>この属性は、 <strong>char</strong> 属性で指定した揃え文字から列のデータをオフセットする文字数を示します。 + <div class="note"><strong>注:</strong> この属性は最新の標準仕様で廃止された (サポートされていない) ため、使用しないでください。</div> + </dd> +</dl> + +<dl> + <dt>{{htmlattrdef("valign")}} {{HTMLVersionInline("4")}} では {{Deprecated_inline}}, {{HTMLVersionInline("5")}} では {{obsolete_inline}}</dt> + <dd>この属性は、表本体の各行のセルにおける垂直方向のテキスト配置方法を指定します。以下の値が指定可能です: + <ul> + <li><code>baseline</code>: テキストを可能な限りセルの下端に近づけますが、下端ではなく文字の<a class="external" href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">ベースライン</a>に揃えます。文字がサイズ全体に渡る場合は、 <code>bottom</code> と同じ効果になります。</li> + <li><code>bottom</code>: テキストを可能な限りセルの下端に近づけて配置します。</li> + <li><code>middle</code>: テキストをセル内の中央に置きます。</li> + <li><code>top</code>: テキストを可能な限りセルの上端に近づけて配置します。</li> + </ul> + + <div class="note"><strong>注:</strong> この属性は最新の標準仕様で廃止された (対応していない) ため、使用しないでください。代わりに CSS の {{cssxref("vertical-align")}} プロパティを使用してください。</div> + </dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code><thead></code> の例については、 {{HTMLElement("table")}} を参照してください。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','tables.html#the-thead-element','thead element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-thead-element','thead element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.thead")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>他の表関連 HTML 要素: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("tr")}}</li> + <li><code><thead></code> 要素のスタイル設定に役立つであろう CSS プロパティと擬似クラス: + <ul> + <li>{{cssxref(":nth-child")}} 擬似クラス: 列内のセルの配置を設定するため</li> + <li>{{cssxref("text-align")}} プロパティ: すべてのセル内コンテンツを '.' などの同一文字で揃えるための</li> + </ul> + </li> +</ul> diff --git a/files/ja/web/html/element/time/index.html b/files/ja/web/html/element/time/index.html new file mode 100644 index 0000000000..6fd1f7405c --- /dev/null +++ b/files/ja/web/html/element/time/index.html @@ -0,0 +1,177 @@ +--- +title: <time> +slug: Web/HTML/Element/time +tags: + - Element + - HTML + - HTML text-level semantics + - HTML5 + - 'HTML:Flow content' + - 'HTML:Palpable Content' + - 'HTML:Phrasing content' + - Reference + - Web +translation_of: Web/HTML/Element/time +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">HTML の <strong><code><time></code> 要素</strong>は、特定の時の区間を表します。</span> <code>datetime</code> 属性を使用して、機械可読な形式の日付を記述することができ、検索エンジンの結果を改善したりリマインダーなどの独自機能に使用したりすることができます。</p> + +<p>次のうちの一つを表します。</p> + +<ul> + <li>24時間制の時刻</li> + <li>{{interwiki("wikipedia", "グレゴリオ暦")}}の正確な日付 (時刻やタイムゾーンを伴うことも可能)</li> + <li><a href="https://www.w3.org/TR/2014/REC-html5-20141028/infrastructure.html#valid-duration-string">妥当な期間</a></li> +</ul> + +<div>{{EmbedInteractiveExample("pages/tabbed/time.html", "tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLTimeElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>他のすべての HTML 要素と同様に、この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>に対応しています。</p> + +<dl> + <dt>{{htmlattrdef("datetime")}}</dt> + <dd>この属性は要素の日付や時刻を表し、下記に示す書式のうちの一つでなければなりません。</dd> +</dl> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<p>この要素は、機械可読な形式で日付や時刻を表現するためのものです。例えばユーザーエージェントが、ユーザーのカレンダーにイベントの予定情報を提供することに役立てることができます。</p> + +<p>この要素はグレゴリオ暦導入前の日付に対して使用するべきではありません (日付の計算で混乱するため)。</p> + +<p><dfn>datetime 値</dfn> (機械可読な日時の値) は要素の <code>datetime</code> 属性の値であり、正しい書式 (下記参照) でなければなりません。要素に <code>datetime</code> 属性がない場合、<strong>子孫要素を持ってはならず</strong>、 <dfn>datetime 値</dfn>が要素のテキストの内容になります。</p> + +<h3 id="Valid_datetime_Values" name="Valid_datetime_Values">妥当な datetime 値</h3> + +<dl> + <dt>妥当な年の文字列</dt> + <dd><code>2011</code></dd> + <dt>妥当な月の文字列</dt> + <dd><code>2011-11</code></dd> + <dt>妥当な日付の文字列</dt> + <dd><code>2011-11-18</code></dd> + <dt>年のない妥当な日付の文字列</dt> + <dd><code>11-18</code></dd> + <dt>妥当な週の文字列</dt> + <dd><code>2011-W47</code></dd> + <dt>妥当な時刻の文字列</dt> + <dd><code>14:54</code></dd> + <dd><code>14:54:39</code></dd> + <dd><code>14:54:39.929</code></dd> + <dt>妥当なローカル日時の文字列</dt> + <dd><code>2011-11-18T14:54:39.929</code></dd> + <dd><code>2011-11-18 14:54:39.929</code></dd> + <dt>妥当なグローバル日時の文字列</dt> + <dd><code>2011-11-18T14:54:39.929Z</code></dd> + <dd><code>2011-11-18T14:54:39.929-0400</code></dd> + <dd><code>2011-11-18T14:54:39.929-04:00</code></dd> + <dd><code>2011-11-18 14:54:39.929Z</code></dd> + <dd><code>2011-11-18 14:54:39.929-0400</code></dd> + <dd><code>2011-11-18 14:54:39.929-04:00</code></dd> + <dt>妥当な期間の文字列</dt> + <dd><code>PT4H18M3S</code></dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Simple_example" name="Simple_example">単純な例</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><p>コンサートは<time datetime="2018-07-07T20:00:00">20:00</time>に始まります。</p> +</pre> + +<h4 id="Output" name="Output">結果</h4> + +<p>{{EmbedLiveSample('Simple_example', 250, 60)}}</p> + +<h3 id="Datetime_example" name="Datetime_example"><code>datetime</code> の例</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><p>コンサートは<time + datetime="2001-05-15T19:00">5月15日</time>に開催されます。</p> +</pre> + +<h4 id="Output_2" name="Output_2">結果</h4> + +<p>{{EmbedLiveSample('Datetime_example', 250, 60)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-time-element', '<time>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>{{SpecName('HTML5.1')}} から変更なし</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', 'textlevel-semantics.html#the-time-element', '<time>')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML5 W3C')}} から変更なし</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-time-element', '<time>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.time")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{HTMLElement("data")}} 要素では、他の種類の値を示すことが可能です。</li> +</ul> diff --git a/files/ja/web/html/element/title/index.html b/files/ja/web/html/element/title/index.html new file mode 100644 index 0000000000..d4799921f0 --- /dev/null +++ b/files/ja/web/html/element/title/index.html @@ -0,0 +1,143 @@ +--- +title: '<title>: 文書題名要素' +slug: Web/HTML/Element/title +tags: + - Element + - HTML + - HTML document metadata + - 'HTML:Metadata content' + - Page Name + - Page Title + - Reference + - Tab Name + - Tab Title + - Title + - Web + - Window Name + - Window Title +translation_of: Web/HTML/Element/title +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML 題名要素</strong> (<strong><code><title></code></strong>) は、{{glossary("Browser", "ブラウザー")}}のタイトルバーやページのタブに表示される文書の題名を定義します。</span>テキストのみを含めることができ、要素内のタグはすべて無視されます。</p> + +<pre class="brush: html notranslate"><title>Grandma's Heavy Metal Festival Journal</title></pre> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Metadata_content">メタデータコンテンツ</a></td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>要素間の{{glossary("whitespace", "ホワイトスペース")}}ではないテキスト。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>開始タグと終了タグの両方が必要。なお、 <code></title></code> を忘れると、ブラウザーがページの残りの部分を無視することがある。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>他に {{HTMLElement("title")}} 要素を含まない {{HTMLElement("head")}} 要素。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>許可されている <code>role</code> なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLTitleElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみがあります。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<p><code><title></code> 要素は常にページの {{HTMLElement("head")}} ブロックの中で使われます。</p> + +<h3 id="Page_titles_and_SEO" name="Page_titles_and_SEO">ページの題名と SEO</h3> + +<p>ページの題名の内容は、検索エンジン最適化 ({{glossary("SEO")}}) に著しい影響を与えることがあります。一般的に、長く、説明的な題名は、短く、一般的な題名よりも効果があります。題名の内容は、検索エンジンのアルゴリズムが検索結果にページを列挙する順序を決定するために使用する材料の一つです。また、題名は検索結果ページを眺めている読者の注意を引く最初の「フック」となります。</p> + +<p>良い題名を作成するためのガイドラインやコツを示します。</p> + +<ul> + <li>1～2語の題名は避けましょう。説明的な文言を使用したり、用語集や参照スタイルのページでは用語と定義の組を使用したりしましょう。</li> + <li>検索エンジンは通常、ページの題名は最初のおよそ55–60文字を表示します。それを超えるテキストは失われることがあるので、それよりも長くはしないようにしてください。もっと長い題名を使う必要があるのであれば、重要な部分を前にもってくると、題名の中の重要な部分が落とされにくくなります。</li> + <li>「キーワード BLOB」を使用しないでください。タイトルが単なるキーワードの羅列であると、アルゴリズムはそのページの検索結果内の順位を落とすことがあります。</li> + <li>題名はできるだけサイト内で固有のものにするようにしてください。複写や複写に近いものは検索結果を不正確にすることがあります。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: html notranslate"><title>素敵で面白いこと</title> +</pre> + +<p>この例ではページの題名全体 (ウィンドウの最上部またはウィンドウのタブに表示されるもの) を「素敵で面白いこと」にします。</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> + +<p>重要なことは、ページの目的を記述した <code>title</code> の値を設定することです。</p> + +<p>支援技術を使用するユーザーのためのナビゲーション技術として、ページの題名を読んで、どのようなコンテンツが含まれるかを知るというものが良く使われます。これはコンテンツを特定するためにページ間を移動すると、時間を消費したり手順を間違える可能性があったりするからです。</p> + +<h3 id="Example_2" name="Example_2">例</h3> + +<pre class="notranslate"><title>Menu - Blue House Chinese Food - FoodYum: Online takeout today!</title> +</pre> + +<p>ページの状態が大きく変わったことを示すために (フォーム検証の問題など)、ユーザーを支援するために、ページの <code>title</code> の値を更新してください。</p> + +<h3 id="Example_3" name="Example_3">例</h3> + +<pre class="notranslate"><title>2 errors - Your order - Blue House Chinese Food - FoodYum: Online takeout today!</title> +</pre> + +<ul> + <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN WCAG を理解する ― ガイドライン 2.4 の解説</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html">Understanding Success Criterion 2.4.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-title-element', '<title>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-title-element', '<title>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.2', '<title>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.title")}}</p> diff --git a/files/ja/web/html/element/tr/index.html b/files/ja/web/html/element/tr/index.html new file mode 100644 index 0000000000..83a560920d --- /dev/null +++ b/files/ja/web/html/element/tr/index.html @@ -0,0 +1,594 @@ +--- +title: '<tr>: 表の行要素' +slug: Web/HTML/Element/tr +tags: + - HTML + - HTML 表形式データ + - Web + - tr + - tr tag + - タグ + - テーブル + - リファレンス + - 表 + - 要素 +translation_of: Web/HTML/Element/tr +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><tr></code> 要素</strong>は、表内でセルの行を定義します。行のセルは {{HTMLElement("td")}} (データセル) および {{HTMLElement("th")}} (見出しセル) 要素をを混在させることができます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/tr.html","tabbed-taller")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<p>セルをどのように列に収める (または列にまたがる) かを制御できるようにするため、<code><th></code> および <code><td></code> で {{htmlattrxref("colspan", "td")}} 属性をサポートします。これはセルの幅をいくつの列にするかを指定でき、既定値は 1 です。同様に、セルが複数の行にまたがることを示す {{htmlattrxref("rowspan", "td")}} 属性も使用できます。</p> + +<p>表を作成するとき、正しい表にするために少し経験が必要かもしれません。以下にいくつか{{anch("Examples", "例")}}がありますが、さらに多くの例や詳しいチュートリアルは、<a href="/ja/docs/Learn">ウェブ開発を学ぶ</a>エリアの <a href="/ja/docs/Learn/HTML/Tables">HTML tables</a> シリーズをご覧ください。表形式のデータを正しいレイアウトに整形するため、 table 要素やその属性の使い方を学ぶことができます。</p> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。使用を避けるべき{{anch("deprecated attributes", "非推奨の属性")}}もいくつかありますが、古いコードを読む際は知っている必要があるでしょう。</p> + +<h3 id="Deprecated_attributes" name="Deprecated_attributes">非推奨の属性</h3> + +<p>以下の属性は依然としてブラウザーが実装していますが、すでに HTML 仕様に含まれていませんのでまったく動作しない、あるいは期待どおりに動作しない可能性があります。使用は避けるべきです。</p> + +<dl> + <dt>{{HTMLAttrDef("align")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd>行の各セルの中身について、水平方向の配置方法を制御する {{DOMxRef("DOMString")}} です。これは行内の全セルで個別に <code>align</code> を使用することに対する一括指定です。以下の値を指定可能です。 + <dl> + <dt><code>left</code></dt> + <dd>各セルの中身を左側に揃えます。</dd> + <dt><code>center</code></dt> + <dd>中身をセルの左端と右端の間で中央揃えにします。</dd> + <dt><code>right</code></dt> + <dd>各セルの中身を右側に揃えます。</dd> + <dt><code>justify</code></dt> + <dd>テキストが各セルの幅全体を満たす (両端揃え) ように、テキスト内のホワイトスペースを広げます。</dd> + <dt><code>char</code></dt> + <dd>行内の各セルを、特定の文字に対して揃えます (この方法で設定された列内の各行は、その文字に対して揃えます)。これは {{htmlattrxref("char", "tr")}} および {{htmlattrxref("charoff", "tr")}} を使用して、揃える文字 (数値データを揃える際の "." や "," が一般的です) および揃える文字に続く文字の数を指定します。この配置方法は、広くは対応されていませんでした。</dd> + </dl> + + <p><code>align</code> の値が明示的に設定されていない場合は、親ノードの値を継承します。</p> + + <div class="note"> + <p>行内のセルで配置方法を指定するには、廃止された <code>align</code> 属性の代わりに CSS の {{CSSxRef("text-align")}} プロパティで <code>left</code>, <code>center</code>, <code>right</code>, <code>justify</code> を指定してください。文字ベースの配置方法を適用するには、 CSS の {{CSSxRef("text-align")}} プロパティに揃える文字 (<code>"."</code> や <code>","</code> など) を設定してください。</p> + </div> + </dd> +</dl> + +<dl> + <dt>{{HTMLAttrDef("bgcolor")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd> + <p>行の各セルの背景色を定義する {{DOMxRef("DOMString")}} です。値は <a href="/ja/docs/Web/CSS/color_value#rgb()">16進 <code>#RRGGBB</code> または <code>#RGB</code> 値</a>、あるいは<a href="/ja/docs/Web/CSS/color_value#Color_keywords">色キーワード</a>を使用できます。属性を省略するか JavaScript で <code>null</code> を設定すると、行のセルは親要素の背景色を継承します。</p> + + <div class="note"> + <p>{{HTMLElement("tr")}} 要素は <a href="/ja/docs/Web/CSS">CSS</a> を使用してスタイルを設定するべきです。 <code>bgcolor</code> 属性と同様の効果を与えるには、<a href="/ja/docs/Web/CSS">CSS</a> の {{CSSxRef("background-color")}} プロパティを使用してください。</p> + </div> + </dd> +</dl> + +<dl> + <dt>{{HTMLAttrDef("char")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd> + <p>{{DOMxRef("DOMString")}} で、行のそれぞれの列のセルで揃える文字を設定します (同一の文字を使用して、それぞれの行の中心がほかの行と揃えられます)。典型的な値に、数値や金額を揃えようとするときのピリオド (<code>"."</code>) やカンマ (<code>","</code>) があります。 {{htmlattrxref("align", "tr")}} 属性が <code>char</code> ではない場合は、この属性は無視されます</p> + + <div class="note"> + <p>この属性は廃止されただけでなく、ほとんど実装されていませんでした。 {{htmlattrxref("char", "tr")}} と同様の効果を得るには、 CSS の {{CSSxRef("text-align")}} プロパティの値として <code>char</code> の値を使用します (例えば <code>text-align: "."</code>)。</p> + </div> + </dd> +</dl> + +<dl> + <dt>{{HTMLAttrDef("charoff")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd> + <p><code>char</code> 属性で指定した揃え文字から行のデータをオフセットする文字数を示す {{DOMxRef("DOMString")}} です。例えば通貨単位の 100 分の 1 の値を使用する通貨 (例えばドルであり、100 セントに分割されます) の金額を表示するときは、一般的に値 2 を指定するでしょう。 <code>char</code> に <code>"."</code> を設定することと組み合わせると、列内の値が小数点できれいに揃い、セントの数値が小数点の右側へ適切に表示されます。</p> + + <div class="note"> + <p>この属性は廃止されただけでなく、ほとんど実装されていませんでした。</p> + </div> + </dd> +</dl> + +<dl> + <dt>{{HTMLAttrDef("valign")}}{{Obsolete_Inline("HTML5")}}</dt> + <dd> + <p>行の各セルにおける垂直方向のテキスト配置方法を指定する {{DOMxRef("DOMString")}} です。以下の値が指定可能です。</p> + + <dl> + <dt><code>baseline</code></dt> + <dd>テキストを可能な限りセルの下端に近づけますが、下端ではなく文字で使用するフォントの {{interwiki("wikipedia", "baseline")}} に揃えます。文字がサイズ全体に渡る場合は、<code>bottom</code> と同じ効果になります。</dd> + <dt><code>bottom</code></dt> + <dd>テキストを可能な限りセルの下端に近づけて配置します。</dd> + <dt><code>middle</code></dt> + <dd>テキストをセルの中央部に置きます。</dd> + <dt><code>top</code></dt> + <dd>テキストを可能な限りセルの上端に近づけて配置します。</dd> + </dl> + + <div class="note"> + <p><code>valign</code> 属性は廃止されたため、使用しないでください。代わりに CSS の {{CSSxRef("vertical-align")}} プロパティを使用してください。</p> + </div> + </dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<p><code><tr></code> 要素の使用例については、 {{HTMLElement("table")}} を参照してください。</p> + +<h3 id="Basic_example" name="Basic_example">基本的な例</h3> + +<p>これは、人名とクラブまたはサービスのさまざまな会員情報を載せる表を表示する簡単な例です。</p> + +<h4 id="HTML">HTML</h4> + +<p>この HTML は、表のもっとも基本的な構造を示します。グループ、複数の行や列にまたがるセル、タイトルはなく、明確にに似ているもののために表の構成要素の周りに線を生成する、もっとも基本的なスタイルだけがあります。</p> + +<p>表には4列（1列の見出しを含む）があるの行が4行（1行の見出しを含む）があります。表セクション要素は使用していません。代わりに、ブラウザーはそれらを自動的に定義できます。この次の例では {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}} を追加します。</p> + +<pre class="brush: html notranslate"><table> + <tr> + <th>Name</th> + <th>ID</th> + <th>Member Since</th> + <th>Balance</th> + </tr> + <tr> + <td>Margaret Nguyen</td> + <td>427311</td> + <td><time datetime="2010-06-03">June 3, 2010</time></td> + <td>0.00</td> + </tr> + <tr> + <td>Edvard Galinski</td> + <td>533175</td> + <td><time datetime="2011-01-13">January 13, 2011</time></td> + <td>37.00</td> + </tr> + <tr> + <td>Hoshi Nakamura</td> + <td>601942</td> + <td><time datetime="2012-07-23">July 23, 2012</time></td> + <td>15.00</td> + </tr> +</table></pre> + +<h4 id="CSS">CSS</h4> + +<p>このシンプルな CSS は表とセルの周りに黒い実線の境界線を追加するものであり、セルは {{HTMLElement("th")}} と {{HTMLElement("td")}} の両方を使用して指定します。このようにして、見出しセルとデータセルが簡単に区別できます。</p> + +<pre class="brush: css notranslate">table { + border: 1px solid black; +} + +th, td { + border: 1px solid black; +}</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample("Basic_example", 500, 125)}}</p> + +<h3 id="Row_and_column_spanning" name="Row_and_column_spanning">行や列をつなげる</h3> + +<p>次に、ユーザーの有効期限のデータを表示する列を追加しましょう。また、 "joined" と "canceled" のデータの上に、 "Membership Dates" という大見出しも追加します。これは行や列をまたぐセルを表に追加するということであり、見出しのセルを正しい位置に置くことができます。</p> + +<h4 id="Result_2" name="Result_2">結果</h4> + +<p>始めに、実際の表示結果を見ましょう。</p> + +<p>{{EmbedLiveSample("Row_and_column_spanning", 500, 150)}}</p> + +<p>見出し領域が実際は2行あることに注目してください。ひとつは "Name", "ID", "Membership Dates", "Balance" の見出し、もうひとつは "Joined" と "Canceled" であり、これは "Membership Dates" の小見出しです。これは以下のようにして実現します。</p> + +<ul> + <li>1 行目の "Name", "ID", "Balance" の見出しセルは、{{htmlattrxref("rowspan")}} 属性を使用して 2 行にまたがっており、それぞれのセルの高さが 2 行分になります。</li> + <li>1 行目の "Membership Dates" の見出しセルは、{{htmlattrxref("colspan")}} 属性を使用して 2 列にまたがっており、実際に見出しの幅が 2 列分になります。</li> + <li>2 行目の {{HTMLElement("th")}} 要素は、"Joined" と "Canceled" しか持っていません。ほかの列は 2 行目にまたがっている 1 行目のセルがすでに占有しているためであり、2行目のセルは "Membership Dates" の下へ適切に配置されます。</li> +</ul> + +<h4 id="HTML_2" name="HTML_2">HTML</h4> + +<p>HTML は前の例に似ていますが、それぞれのデータ行に新しい列を追加したことと、見出しを変更したことが異なります。変更した HTML は以下のようになります:</p> + +<pre class="brush: html notranslate"><table> + <tr> + <th rowspan="2">Name</th> + <th rowspan="2">ID</th> + <th colspan="2">Membership Dates</th> + <th rowspan="2">Balance</th> + </tr> + <tr> + <th>Joined</th> + <th>Canceled</th> + </tr> + <tr> + <th>Margaret Nguyen</td> + <td>427311</td> + <td><time datetime="2010-06-03">June 3, 2010</time></td> + <td>n/a</td> + <td>0.00</td> + </tr> + <tr> + <th>Edvard Galinski</td> + <td>533175</td> + <td><time datetime="2011-01013">January 13, 2011</time></td> + <td><time datetime="2017-04008">April 8, 2017</time></td> + <td>37.00</td> + </tr> + <tr> + <th>Hoshi Nakamura</td> + <td>601942</td> + <td><time datetime="2012-07-23">July 23, 2012</time></td> + <td>n/a</td> + <td>15.00</td> + </tr> +</table></pre> + +<p>(行や列をまたぐことを論じるために) ここで重要な部分は、コードの最初の数行です。 "Name", "ID", "Balance" の見出しで <code>rowspan</code> を使用して 2 行を占めていることと、 "Membership Dates" の見出しで <code>colspan</code> を使用して 2 列を占めていることに注意してください。</p> + +<p>CSS は変更していません。</p> + +<div class="hidden"> +<pre class="brush: css notranslate">table { + border: 1px solid black; +} + +th, td { + border: 1px solid black; +}</pre> +</div> + +<h3 id="Explicitly_specifying_table_content_groups" name="Explicitly_specifying_table_content_groups">表の内容のグループを明示する</h3> + +<p>この表にスタイルを設定する前に、 CSS を簡単にするために行や列のグループを追加する時間をとりましょう。</p> + +<h4 id="HTML_3" name="HTML_3">HTML</h4> + +<p>この作業を行う場所は HTML であり、また作業はとても単純です。</p> + +<pre class="brush: html notranslate"><table> + <thead> + <tr> + <th rowspan="2">Name</th> + <th rowspan="2">ID</th> + <th colspan="2">Membership Dates</th> + <th rowspan="2">Balance</th> + </tr> + <tr> + <th>Joined</th> + <th>Canceled</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Margaret Nguyen</td> + <td>427311</td> + <td><time datetime="2010-06-03">June 3, 2010</time></td> + <td>n/a</td> + <td>0.00</td> + </tr> + <tr> + <th scope="row">Edvard Galinski</td> + <td>533175</td> + <td><time datetime="2011-01013">January 13, 2011</time></td> + <td><time datetime="2017-04008">April 8, 2017</time></td> + <td>37.00</td> + </tr> + <tr> + <th scope="row">Hoshi Nakamura</td> + <td>601942</td> + <td><time datetime="2012-07-23">July 23, 2012</time></td> + <td>n/a</td> + <td>15.00</td> + </tr> + </tbody> +</table></pre> + +<p>(行や列をまたぐことを論じるために) ここで重要な部分は、コードの最初の数行です。 "Name", "ID", "Balance" の見出しで <code>rowspan</code> を使用して 2 行を占めていることと、 "Membership Dates" の見出しで <code>colspan</code> を使用して 2 列を占めていることに注意してください。</p> + +<p>繰り返しますが、 CSS は変更しません。</p> + +<div class="hidden"> +<pre class="brush: css notranslate">table { + border: 1px solid black; +} + +th, td { + border: 1px solid black; +}</pre> +</div> + +<h4 id="Result_3" name="Result_3">結果</h4> + +<p>内部では役に立つ文脈情報を追加したにもかかわらず、表示結果はまったく変わっていません。</p> + +<p>{{EmbedLiveSample("Explicitly_specifying_table_content_groups", 500, 150)}}</p> + +<h3 id="Basic_styling" name="Basic_styling">基本的な整形</h3> + +<p>表のすべての部分の場合と同じく、 CSS を使用して表の行やその中身の外観を変更できます。 <code><tr></code> 要素に適用したスタイルは、セルに適用したセルで上書きされない限り、行内のすべてのセルに影響を与えます。</p> + +<p>使用する書体の調節するスタイルと、見出し行に背景色を追加するスタイルを適用しましょう。</p> + +<h4 id="Result_4" name="Result_4">結果</h4> + +<p>再び、始めに表示結果を見ましょう。</p> + +<p>{{EmbedLiveSample("Basic_styling", 500, 200)}}</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><table> + <thead> + <tr> + <th rowspan="2">Name</th> + <th rowspan="2">ID</th> + <th colspan="2">Membership Dates</th> + <th rowspan="2">Balance</th> + </tr> + <tr> + <th>Joined</th> + <th>Canceled</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Margaret Nguyen</td> + <td>427311</td> + <td><time datetime="2010-06-03">June 3, 2010</time></td> + <td>n/a</td> + <td>0.00</td> + </tr> + <tr> + <th scope="row">Edvard Galinski</td> + <td>533175</td> + <td><time datetime="2011-01013">January 13, 2011</time></td> + <td><time datetime="2017-04008">April 8, 2017</time></td> + <td>37.00</td> + </tr> + <tr> + <th scope="row">Hoshi Nakamura</td> + <td>601942</td> + <td><time datetime="2012-07-23">July 23, 2012</time></td> + <td>n/a</td> + <td>15.00</td> + </tr> + </tbody> +</table></pre> +</div> + +<h4 id="CSS_2" name="CSS_2">CSS</h4> + +<p>ここでは HTML を変更せず、CSS に手を加えます。</p> + +<pre class="brush: css notranslate">table { + border: 1px solid black; + font: 16px "Open Sans", Helvetica, Arial, sans-serif; +} + +thead > tr { + background-color: rgb(228, 240, 245); +} + +th, td { + border: 1px solid black; + padding:4px 6px; +} +</pre> + +<p>ここで {{CSSxRef("font")}} プロパティを {{HTMLElement("table")}} 要素に追加して、視覚的に目立つ書体 (または人の意見によっては忌まわしい sans-serif 書体) を設定する一方、興味深いところは 2 番目のスタイルで、 <code><tr></code> 要素のうち {{HTMLElement("thead")}} の中にあるものの背景色がライトブルーになります。これは、見出し領域内にあるすべてのセルへ一斉に背景色を適用するためのてっとり早い方法です。</p> + +<p>1 列目の {{HTMLElement("th")}} 要素の会員名は行の見出しとして扱っていますが、このスタイルは<em>影響を与えません</em>。</p> + +<h3 id="Advanced_styling" name="Advanced_styling">高度なスタイル設定</h3> + +<p>次は全力を尽くして、行の色を交互に設定する、行内の位置に応じてさまざまな色を設定するなど、見出しや本体の行にスタイルを設定します。</p> + +<h4 id="Result_5" name="Result_5">結果</h4> + +<p>表は最終的に以下のようになります:</p> + +<p>{{EmbedLiveSample("Advanced_styling", 500, 200)}}</p> + +<p>ここでも HTML は変更しません。 HTML を適切に準備することがどのようなことか分かりましたか？</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><table> + <thead> + <tr> + <th rowspan="2">Name</th> + <th rowspan="2">ID</th> + <th colspan="2">Membership Dates</th> + <th rowspan="2">Balance</th> + </tr> + <tr> + <th>Joined</th> + <th>Canceled</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Margaret Nguyen</td> + <td>427311</td> + <td><time datetime="2010-06-03">June 3, 2010</time></td> + <td>n/a</td> + <td>0.00</td> + </tr> + <tr> + <th scope="row">Edvard Galinski</td> + <td>533175</td> + <td><time datetime="2011-01013">January 13, 2011</time></td> + <td><time datetime="2017-04008">April 8, 2017</time></td> + <td>37.00</td> + </tr> + <tr> + <th scope="row">Hoshi Nakamura</td> + <td>601942</td> + <td><time datetime="2012-07-23">July 23, 2012</time></td> + <td>n/a</td> + <td>15.00</td> + </tr> + </tbody> +</table></pre> +</div> + +<h4 id="CSS_3" name="CSS_3">CSS</h4> + +<p>ここでは CSS をさらに変更します。複雑ではありませんが、多くのことを行います。詳しく説明しましょう。</p> + +<h5 id="The_table_and_base_styles" name="The_table_and_base_styles">表と基本的なスタイル</h5> + +<pre class="brush: css notranslate">table { + border: 1px solid black; + font: 16px "Open Sans", Helvetica, Arial, sans-serif; + border-spacing: 0; + border-collapse: collapse; +}</pre> + +<p>ここでは {{CSSxRef("border-spacing")}} および {{CSSxRef("border-collapse")}} を追加して、セル間の間隔を取り除き、2本の境界線を互いに接する1本の境界線にまとめます。</p> + +<pre class="brush: css notranslate">th, td { + border: 1px solid black; + padding:4px 6px; +} + +th { + vertical-align: bottom; +}</pre> + +<p>ここには、表のすべてのセルに既定のスタイルがあります。次に、カスタマイズしましょう!</p> + +<h5 id="The_top_header_overall" name="The_top_header_overall">上部の見出し全体</h5> + +<p>上部の見出し2つに分けて見ていきます。始めに、見出し全体のスタイルです。</p> + +<pre class="brush: css notranslate">thead > tr { + background-color: rgb(228, 240, 245); +} + +thead > tr:nth-of-type(2) { + border-bottom: 2px solid black; +}</pre> + +<p>これは、表の見出し ({{HTMLElement("thead")}} を使用して指定します) 内にあるすべての <code><tr></code> 要素の背景色を設定します。そして上部の見出しの下ボーダーを、幅が 2 ピクセルの線に設定します。ただし、見出しの <em>2行目</em>に {{CSSxRef("border-bottom")}} を適用するために {{cssxref(":nth-of-type")}} セレクターを使用していることに注目してください。なぜでしょう? これは、いくつかのセルがまたがっている2つの行で見出しが構成されているためです。実際は見出しが2行あるということであり、1行目にスタイルを適用すると意図しない結果になります。</p> + +<h5 id="The_Joined_and_Canceled_headers" name="The_Joined_and_Canceled_headers">"Joined" および "Canceled" の見出し</h5> + +<p>新しい会員を「良く」、退会した会員を「悪く」表すために、これら2つの見出しを緑と赤の色合いでスタイリングしましょう。</p> + +<pre class="brush: css notranslate">thead > tr:last-of-type > th:nth-of-type(1) { + background-color: rgb(225, 255, 225); +} + +thead > tr:last-of-type > th:nth-of-type(2) { + background-color: rgb(255, 225, 225); +}</pre> + +<p>ここでは表の見出しブロックの最後の行に注目して、最初の見出しセル ("Joined") を緑系統の色、2番目の見出しセル ("Canceled") を赤系統の色に設定します。</p> + +<h5 id="Color_every_body_other_row_differently" name="Color_every_body_other_row_differently">本体で行ごとに色を変える</h5> + +<p>行の色を交互に設定することは、表の可読性を高めるためによく使用されます。偶数番目の行に、少し色をつけましょう。</p> + +<pre class="brush: css notranslate">tbody > tr:nth-of-type(even) { + background-color: rgb(237, 238, 242); +}</pre> + +<h5 id="Give_the_left-side_header_some_style" name="Give_the_left-side_header_some_style">左側の見出しにスタイルを設定</h5> + +<p>最初の列も目立たせたいので、ここにもスタイルを設定します。</p> + +<pre class="brush: css notranslate">tbody > tr > th:first-of-type { + text-align: left; + background-color: rgb(225, 229, 244); +}</pre> + +<p>表の本体のそれぞれの行で最初の見出しセルに、会員名を左揃えにする {{CSSxRef("text-align")}} と、いくぶん異なる背景色を設定します。</p> + +<h5 id="Justify_the_balances" name="Justify_the_balances">バランスを整える</h5> + +<p>最後に、表内の金額の値は右揃えが一般的ですので、ここで行いましょう。</p> + +<pre class="brush: css notranslate">tbody > tr > td:last-of-type { + text-align:right; +}</pre> + +<p>本体のそれぞれの行で最後の {{HTMLElement("td")}} に対して、CSS の {{CSSxRef("text-align")}} プロパティに <code>"right"</code> を設定します。</p> + +<h2 id="Technical_summary" name="Technical_summary">技術的概要</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td>なし</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>0 個以上の {{HTMLElement("td")}} 要素または {{HTMLElement("th")}} 要素。 {{Glossary("script-supporting element", "スクリプト対応要素")}} ({{HTMLElement("script")}} および {{HTMLElement("template")}}) も許可されています。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>開始タグは必須。 {{HTMLElement("tr")}} 要素の直後に {{HTMLElement("tr")}} 要素がある場合、または親の表グループ要素 ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}) 内で最後の要素である場合は終了タグを省略可能。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>{{HTMLElement("table")}} 要素 (子の {{HTMLElement("tbody")}} を持たない場合で、 {{HTMLElement("caption")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("thead")}} の各要素より後に限る)、 {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}} の各要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Row_Role">row</a></code></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{DOMxRef("HTMLTableRowElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','tables.html#the-tr-element','tr element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>The WHATWG Living Standard</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C','tabular-data.html#the-tr-element','tr element')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>W3C HTML5</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.tr")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Learn/HTML/Tables">学習エリア: HTML の表</a> <code><tr></code> を含む、表の使用について説明します。</li> + <li>{{DOMxRef("HTMLTableRowElement")}}: <code><tr></code> が準拠するインターフェイスです。</li> + <li>他の表関連要素: + <ul> + <li>{{HTMLElement("table")}}, {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("td")}}, {{HTMLElement("th")}},{{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}</li> + </ul> + </li> +</ul> diff --git a/files/ja/web/html/element/track/index.html b/files/ja/web/html/element/track/index.html new file mode 100644 index 0000000000..0ba661085e --- /dev/null +++ b/files/ja/web/html/element/track/index.html @@ -0,0 +1,182 @@ +--- +title: '<track>: 埋め込みテキストトラック要素' +slug: Web/HTML/Element/track +tags: + - Accessibility + - Cues + - Element + - HTML + - HTML embedded content + - HTML5 + - Multimedia + - Reference + - TextTrack + - Web + - a11y + - track +translation_of: Web/HTML/Element/track +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML の <code><track></code> 要素</strong>はメディア要素 ({{HTMLElement("audio")}} および {{HTMLElement("video")}}) の子として使用します。この要素は自動的に処理される字幕など、時間指定されたテキストトラック (または時系列データ) を指定することができます。</span>トラックは <a href="/ja/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT (Web Video Text Tracks) 形式</a> (<code>.vtt</code> ファイル) を用います。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/track.html", "tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td>なし</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>なし。この要素は{{Glossary("empty element", "空要素")}}です。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>空要素であるため開始タグは必須、また終了タグを置いてはなりません。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td> + <p>メディア要素、 {{HTMLElement("audio")}} または {{HTMLElement("video")}}</p> + </td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>許可されている <code>role</code> なし</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLTrackElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{htmlattrdef("default")}}</dt> + <dd>この属性は、別の track が適切であるとユーザーの設定が示さない限り有効にすべき track であることを表します。この属性はメディア要素ごとに 1 つの <code>track</code> 要素のみで使用できます。</dd> + <dt>{{htmlattrdef("kind")}}</dt> + <dd>どのように使用するトラックであるかをを表します。省略した場合、デフォルトの種類は <code>subtitles</code> です。属性に無効な値が含まれている場合は <code>metadata</code> を使用します (バージョン 52 より前の Chrome は、無効な値を <code>subtitles</code> として扱っていました)。以下のキーワードが利用できます。 + <ul> + <li><code>subtitles</code> + <ul> + <li>字幕は、視聴者が理解できないコンテンツの翻訳を提供します。例えば、英語の映画における英語以外の言語による会話やテキストです。</li> + <li>字幕には追加コンテンツ、一般的には付加的な背景情報を含む場合があります。例えばスターウォーズの冒頭のテキストや、シーンの日時および場所です。</li> + </ul> + </li> + <li><code>captions</code> + <ul> + <li>クローズドキャプションは書写、あるいは音声の翻訳を提供します。</li> + <li>これは音楽のキューやサウンドエフェクトといった重要な非言語情報を含む場合があります。これはキューのソース (例: 音楽、テキスト、キャラクター) を示すでしょう。</li> + <li>耳が不自由なユーザーや音声をミュートしている場合に適しています。</li> + </ul> + </li> + <li><code>descriptions</code> + <ul> + <li>テキストによる動画コンテンツの説明です。</li> + <li>目が不自由なユーザーや動画を視聴できない場合に適しています。</li> + </ul> + </li> + <li><code>chapters</code> + <ul> + <li>チャプタータイトルは、ユーザーがメディアリソースの操作を行う際に使用することを意図しています。</li> + </ul> + </li> + <li><code>metadata</code> + <ul> + <li>スクリプトが使用するトラック情報です。ユーザーには見えません。</li> + </ul> + </li> + </ul> + </dd> + <dt>{{htmlattrdef("label")}}</dt> + <dd>使用可能なテキストトラックを一覧表示する際にブラウザーが使用する、ユーザーに見せるテキストトラックのタイトルです。</dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>トラック (<code>.vtt</code> ファイル) のアドレスです。有効な URL であることが必要です。この属性は定義する必要があり、 URL の値は文書として — <code>track</code> 要素の親要素である {{HTMLElement("audio")}} または {{HTMLElement("video")}} が <code><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">crossorigin</a></code> 属性を持たない限り — 同じオリジンを持たなければなりません。</dd> + <dt>{{htmlattrdef("srclang")}}</dt> + <dd>テキストデータの言語です。有効な <a href="https://r12a.github.io/app-subtags/">BCP 47</a> 言語タグであることが必要です。<code>kind</code> 属性に <code>subtitles</code> を設定した場合は、<code>srclang</code> 属性を定義しなければなりません。</dd> +</dl> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<h3 id="Track_data_types" name="Track_data_types">トラックのデータの種類</h3> + +<p><code>track</code> 要素でメディアに付加するデータの種類は <code>kind</code> 属性で設定します。使用できる値は <code>subtitles</code>, <code>captions</code>, <code>descriptions</code>, <code>chapters</code>, <code>metadata</code> です。この要素は、ユーザーが付加データを要求した際にブラウザーが提供する、時間指定テキストを含むソースファイルを指示します。</p> + +<p>メディア要素は <code>kind</code>、<code>srclang</code> および <code>label</code> が同一の <code>track</code> を複数持つことができません。</p> + +<h3 id="Detecting_cue_changes" name="Detecting_cue_changes">キューの変更の検出</h3> + +<p>{{page("/ja/docs/Web/API/TextTrack/cuechange_event", "On the track element")}}</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: html notranslate"><video controls poster="/images/sample.gif"> + <source src="sample.mp4" type="video/mp4"> + <source src="sample.ogv" type="video/ogv"> + <track kind="captions" src="sampleCaptions.vtt" srclang="en"> + <track kind="descriptions" + src="sampleDescriptions.vtt" srclang="en"> + <track kind="chapters" src="sampleChapters.vtt" srclang="en"> + <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de"> + <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en"> + <track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja"> + <track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz"> + <track kind="metadata" src="keyStage1.vtt" srclang="en" + label="Key Stage 1"> + <track kind="metadata" src="keyStage2.vtt" srclang="en" + label="Key Stage 2"> + <track kind="metadata" src="keyStage3.vtt" srclang="en" + label="Key Stage 3"> + <!-- Fallback --> + ... +</video> +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','embedded-content.html#the-track-element','track element')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "semantics-embedded-content.html#the-track-element", "track element")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.track")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/WebVTT">WebVTT text track format</a></li> + <li>{{domxref("HTMLMediaElement.textTracks")}}</li> +</ul> diff --git a/files/ja/web/html/element/tt/index.html b/files/ja/web/html/element/tt/index.html new file mode 100644 index 0000000000..230812f8f9 --- /dev/null +++ b/files/ja/web/html/element/tt/index.html @@ -0,0 +1,143 @@ +--- +title: '<tt>: テレタイプテキスト要素 (廃止)' +slug: Web/HTML/Element/tt +tags: + - Element + - HTML + - Monospace + - Monotype + - Non-proportional Type + - Obsolete + - Reference + - Teletype + - Teletype Text + - Web + - font-family + - tt +translation_of: Web/HTML/Element/tt +--- +<div>{{HTMLRef}}{{obsolete_header}}</div> + +<p><span class="seoSummary">廃止された <strong>HTML テレタイプテキスト要素</strong> (<strong><code><tt></code></strong>) は、{{Glossary("user agent", "ユーザーエージェント")}}の既定の等幅フォントで表示される行内文字列を生成します。</span>この要素は、テレタイプ、テキスト専用画面、ラインプリンターのような等幅の表示装置で表示されるテキストとしてスタイルを設定しようとするものです。</p> + +<p><strong>等幅フォント</strong> や <strong>モノスペースフォント</strong> は交換可能で同じ意味を持っています。これらは文字の幅がすべて同じピクセル数のフォントを説明する言葉です。</p> + +<p>しかし、この要素は廃止されました。等幅フォントで表現する必要がある行内テキストには、より意味的に役立つ {{HTMLElement("code")}}, {{HTMLElement("kbd")}}, {{HTMLElement("samp")}}, {{HTMLElement("var")}} 要素を使用するか、中身を独自のブロックとして表現する場合は {{HTMLElement("pre")}} タグを使用してください。</p> + +<div class="note">使用する場面に適切な意味的要素がない場合（例えば、一部のコンテンツを等幅フォントで表示する必要がある場合）は、 {{ HTMLElement("span") }} 要素を使用し、 CSS を使用して好きに整形することを検討してください。 {{cssxref("font-family")}} プロパティは始めるのにいいところです。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみがあります。</p> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="Basic_example" name="Basic_example">基本的な例</h3> + +<p>この例では、 <code><tt></code> を使ってターミナルアプリケーションに入力したり出力したりしたテキストを表示します。</p> + +<pre class="brush:html notranslate"><p>Enter the following at the telnet command prompt: <code>set localecho</code><br /> + +The telnet client should display: <tt>Local Echo is on</tt></p> +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Basic_example", 650, 80)}}</p> + +<h3 id="Overriding_the_default_font" name="Overriding_the_default_font">既定のフォントの上書き</h3> + +<p>行う必要はありませんが、ブラウザーが許可していれば、ブラウザーの既定のフォントを上書きすることができます。 CSS を使用します。</p> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">tt { + font-family: "Lucida Console", "Menlo", "Monaco", "Courier", + monospace; +}</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><p>Enter the following at the telnet command prompt: <code>set localecho</code><br /> + +The telnet client should display: <tt>Local Echo is on</tt></p></pre> + +<h4 id="Result_2" name="Result_2">結果</h4> + +<p>{{EmbedLiveSample("Overriding_the_default_font", 650, 80)}}</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<p>既定では <code><tt></code> 要素はブラウザーの既定の等幅フォントを使って表示されます。前述の {{anch("Overriding the default font")}} にある通り、 CSS で <code>tt</code> セレクターを使用した規則を作成することで、これを上書きすることができます。</p> + +<div class="note"> +<p>既定の等幅フォントの設定を変更するユーザー設定が CSS よりも優先することがあります。</p> +</div> + +<p>この要素は HTML 4.01 では公式には非推奨にされませんでしたが、使用は避けて意味的要素や CSS を使用するとされていました。 <code><tt></code> 要素は HTML 5 で廃止されました。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML5 W3C', 'obsolete.html#elementdef-tt', '<tt>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<tt>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.tt")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>意味的な {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("kbd")}}, {{HTMLElement("samp")}} 要素</li> + <li>{{HTMLElement("pre")}} 要素: 整形済みテキストブロックを表示する要素</li> +</ul> diff --git a/files/ja/web/html/element/u/index.html b/files/ja/web/html/element/u/index.html new file mode 100644 index 0000000000..2a5e0c70a4 --- /dev/null +++ b/files/ja/web/html/element/u/index.html @@ -0,0 +1,216 @@ +--- +title: '<u>: 非言語的注釈 (下線) 要素' +slug: Web/HTML/Element/u +tags: + - Annotation + - Element + - HTML + - HTML text-level semantics + - 'HTML:Flow content' + - 'HTML:Palpable Content' + - 'HTML:Phrasing content' + - Reference + - Unarticulated Annotation + - Underline + - Web +translation_of: Web/HTML/Element/u +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary"><strong>HTML</strong> の<strong>非言語的注釈要素</strong> (<strong><code><u></code></strong>) は、非言語的に注釈があることを示す方法で表示する行内テキストの区間を示します。</span>これは既定で単純な実線の下線として表示されますが、 CSS を使用して変更することもできます。</p> + +<div class="warning"> +<p>この要素は古いバージョンの HTML で "Underline" (下線) 要素と呼ばれる傾向があり、現在でもそのように誤用されることがあります。テキストに下線を引くのであれば、代わりに CSS の {{cssxref("text-decoration")}} プロパティを <code>underline</code> に設定したスタイルを適用してください。</p> +</div> + +<div>{{EmbedInteractiveExample("pages/tabbed/u.html", "tabbed-shorter")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<p><code><u></code> を使用するのがどのような場合に適切で、どのような場合に適切でないのかについての詳細は、{{anch("Usage notes", "使用上の注意")}}を参照してください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみがあります。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<p>他の純粋な整形要素と同様に、以前の HTML の下線 (<code><u></code>) 要素は HTML 4 で非推奨になりました。しかし <code><u></code> は、 HTML 5 で新しい意味論的な、何らかの曖昧な注釈が適用されるテキストをマークするという意味で復活しました。</p> + +<div class="note"> +<p>(既定で下線が引かれる) ハイパーリンクと誤認されるような方法で、 (これも既定で下線が引かれる) <code><u></code> 要素を使用することは避けるように注意してください。</p> +</div> + +<h3 id="Use_cases" name="Use_cases">使用例</h3> + +<p><code><u></code> 要素の有効な使用例としては、綴りエラーの通知、中国語の文字列の{{interwiki("wikipedia", "proper name mark", "固有名詞記号")}}の記述、その他の形の注釈などがあります。</p> + +<p>単に表現の目的で下線を引いたり、本の題名を記述したりするために <code><u></code> を使用するべきでは<em>ありません</em>。</p> + +<h3 id="Other_elements_to_consider_using" name="Other_elements_to_consider_using">仕様を考慮するべきその他の要素</h3> + +<p>多くの場合、次のような場合は <code><u></code> よりも他の要素を使用するべきです。</p> + +<ul> + <li>{{HTMLElement("em")}}: 強調の記述</li> + <li>{{HTMLElement("b")}}: テキストに注意を引かせる</li> + <li>{{HTMLElement("mark")}}: キーワードや句をマーク</li> + <li>{{HTMLElement("strong")}}: 強い重要性のあるテキストを示す</li> + <li>{{HTMLElement("cite")}}: 書籍やその他の出版物の題名をマーク</li> + <li>{{HTMLElement("i")}}: 西洋言語のテキストで技術用語、音訳、考え、船名などを記述</li> +</ul> + +<p>(<code><u></code> で作成された非言語的な注釈に対して) 言語的な注釈を提供する場合は、 {{HTMLElement("ruby")}} 要素を使用してください。</p> + +<p>意味論的な意味なしで下線を引きたい場合は、 {{cssxref("text-decoration")}} プロパティの値 <code>underline</code> を使用してください。</p> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="Indicating_a_spelling_error" name="Indicating_a_spelling_error">綴りエラーを表示</h3> + +<p>この例は、 <code><u></code> 要素と CSS を使用して、綴り間違いのエラーを含む段落を表示し、エラー箇所をこの目的でよく使用される、赤い波線の下線スタイルで示します。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><p>This paragraph includes a <u class="spelling">wrnogly</u> +spelled word.</p></pre> + +<p>この HTML では、 <code><u></code> にクラス <code>spelling</code> を付けて、 "wrongly" という語の綴りミスを示すために使用しているのが分かります。</p> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">u.spelling { + text-decoration: red wavy underline; +}</pre> + +<p>この CSS は <code><u></code> 要素にクラス <code>spelling</code> がついてスタイル付けされるとき、テキストすぐ下に赤い波線の下線を引くことを示しています。これはスペルミスをスタイル付けするときに一般的なスタイル付けです。 <code>red dashed underline</code> を使って表現できるスタイルもよく使われます。</p> + +<h4 id="Result" name="Result">結果</h4> + +<p>結果は現在利用可能なもっと有名なワープロを使ってきた人になじみがあるものでしょう。</p> + +<p>{{EmbedLiveSample("Indicating_a_spelling_error", 650, 80)}}</p> + +<h3 id="Avoiding_<u>" name="Avoiding_<u>"><u> の回避</h3> + +<p>多くの場合、実際には <code><u></code> を使用したいと思わないでしょう。いくつかの場面で代わりに何をするべきかを示す例を挙げましょう。</p> + +<h4 id="Non-semantic_underlines" name="Non-semantic_underlines">意味を伴わない下線</h4> + +<p>意味を含むことがないテキストに下線を引くには、次のように、 {{HTMLElement("span")}} 要素と {{cssxref("text-decoration")}} プロパティに <code>"underline"</code> を設定したものを使用してください。</p> + +<h5 id="HTML_2">HTML</h5> + +<pre class="brush: html notranslate"><span class="underline">Today's Special</span> +<br> +Chicken Noodle Soup With Carrots</pre> + +<h5 id="CSS_2">CSS</h5> + +<pre class="brush: css notranslate">.underline { + text-decoration: underline; +}</pre> + +<h5 id="Result_2" name="Result_2">結果</h5> + +<p>{{EmbedLiveSample("Non-semantic_underlines", 650, 80)}}</p> + +<h4 id="Presenting_a_book_title" name="Presenting_a_book_title">書籍の題名の表現</h4> + +<div id="example-unstyled-cite"> +<p>書籍の題名は <code><u></code> や <code><i></code> でもなく、 {{HTMLElement("cite")}} 要素を使用して表現してください。</p> + +<h5 id="HTML_3">HTML</h5> + +<pre class="brush: html notranslate"><p>The class read <cite>Moby Dick</cite> in the first term.</p></pre> + +<h5 id="Result_with_default_style" name="Result_with_default_style">既定のスタイルでの結果</h5> + +<p>{{EmbedLiveSample("example-unstyled-cite", 650, 80)}}</p> +</div> + +<p>なお、 <code><cite></code> 要素の既定のスタイルではテキストを斜体で表示します。ご希望であれば、 CSS を使用して上書きすることができます。</p> + +<pre class="brush: css notranslate">cite { + font-style: normal; + text-decoration: underline; +}</pre> + +<h5 id="Result_with_custom_style" name="Result_with_custom_style">カスタムスタイルでの結果</h5> + +<p>{{EmbedLiveSample("Presenting_a_book_title", 650, 80)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-u-element', '<u>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-u-element', '<u>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.u")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>ふつう、 {{HTMLElement("span")}}, {{HTMLElement("i")}}, {{HTMLElement("em")}}, {{HTMLElement("b")}}, {{HTMLElement("cite")}} 要素が代わりに使用されます。</li> + <li>意味論的なものではない下線には、 CSS の {{cssxref("text-decoration")}} プロパティを使用してください。</li> +</ul> diff --git a/files/ja/web/html/element/ul/index.html b/files/ja/web/html/element/ul/index.html new file mode 100644 index 0000000000..b8fee6133a --- /dev/null +++ b/files/ja/web/html/element/ul/index.html @@ -0,0 +1,195 @@ +--- +title: '<ul>: 順序なしリスト要素' +slug: Web/HTML/Element/ul +tags: + - Element + - HTML + - HTML grouping content + - Reference +translation_of: Web/HTML/Element/ul +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><ul></code> 要素</strong>は、項目の順序なしリストを表します。一般的に、行頭記号を伴うリストとして描画されます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/ul.html", "tabbed-standard")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>。また、 <code><ul></code> 要素の子に少なくとも 1 個 {{HTMLElement("li")}} 要素を包含する場合は、<a href="/ja/docs/Web/Guide/HTML/Content_categories#Palpable_content">知覚可能コンテンツ</a>。</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>0個以上の {{HTMLElement("li")}}, {{HTMLElement("script")}}, {{HTMLElement("template")}} 要素。</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/List_role">list</a></code></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>{{ARIARole("directory")}}, {{ARIARole("group")}}, {{ARIARole("listbox")}}, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}}, {{ARIARole("tree")}}</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLUListElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{ htmlattrdef("compact") }} {{Deprecated_inline}}</dt> + <dd>この論理属性は、コンパクトなスタイルでリストを秒がするようブラウザーに指示するものです。この属性の解釈は{{glossary("user agent", "ユーザーエージェント")}}に委ねられ、またすべてのブラウザーで動作するものでもありません。</dd> + <dd> + <div class="warning"><strong>警告:</strong> この属性は非推奨になっているため、使用しないでください。代わりに <a href="/ja/docs/Web/CSS">CSS</a> を使用してください。 <code>compact</code> 属性と同様の効果を得るには、 CSS の {{cssxref("line-height")}} プロパティを用い、その値として <code>80%</code> を指定します。</div> + </dd> +</dl> + +<dl> + <dt>{{ htmlattrdef("type") }} {{Deprecated_inline}}</dt> + <dd>リストの行頭記号の形状を指定するために用います。 HTML3.2 および HTML 4.0/4.01 tranditional で定義されていた値は以下の通りです。 + <ul> + <li><code>circle</code></li> + <li><code>disc</code></li> + <li><code>square</code></li> + </ul> + + <p>4 つ目の行頭記号の形状として、 WebTV インターフェイスで <code>triangle</code> が定義されていますが、すべてのブラウザーが対応しているわけではありません。</p> + + <p>この属性が存在せず、 <a href="/ja/docs/Web/CSS">CSS</a> の {{ cssxref("list-style-type") }} プロパティがその要素に適用されていない場合は、ユーザーエージェントが行頭記号の種類を、リストの入れ子階層に応じて選択します。</p> + + <div class="warning"><strong>警告:</strong> この属性は非推奨なので使用しないでください。代替として <a href="/ja/docs/Web/CSS">CSS</a> の {{ cssxref("list-style-type") }} プロパティを使用してください。</div> + </dd> +</dl> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<ul> + <li><code><ul></code> 要素は、数的な順序がなく、その配置順に意味を持たない項目を持つリストを表します。通常、順序なしリストの項目はドット、円形、四角形などいくつかの形式による行頭記号を伴って描画されます。行頭記号のスタイルは HTML 仕様書のページでは定義されていませんが、 CSS の {{ cssxref("list-style-type") }} プロパティを用いて変更することが可能です。</li> + <li><code><ul></code> 要素と {{HTMLElement("ol")}} 要素は、必要なだけ深く入れ子にすることができます。さらに言えば、入れ子になったリストが <code><ol></code> と <code><ul></code> の間で変化することにで制限はありません。</li> + <li>{{ HTMLElement("ol") }} と <code><ul></code> は、どちらも項目のリストを表します。両者の違いは、 {{ HTMLElement("ol") }} 要素では順序に意味があることです。使い分けの目安としては、項目の順序を変更してみてください。意味が変わるようであれば {{ HTMLElement("ol") }} 要素を使用し、そうでない場合は <code><ul></code> 要素を使用することができます。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Simple_example" name="Simple_example">シンプルな例</h3> + +<pre class="brush: html notranslate"><ul> + <li>first item</li> + <li>second item</li> + <li>third item</li> +</ul> +</pre> + +<p>次のように出力されます。</p> + +<p>{{EmbedLiveSample("Simple_example", 400, 100)}}</p> + +<h3 id="Nesting_a_list" name="Nesting_a_list">入れ子になったリスト</h3> + +<pre class="brush: html notranslate"><ul> + <li>first item</li> + <li>second item + <!-- 閉じタグの </li> がここにはありません。 --> + <ul> + <li>second item first subitem</li> + <li>second item second subitem + <!-- 入れ子になった第二の順序なしリストでも同じです。 --> + <ul> + <li>second item second subitem first sub-subitem</li> + <li>second item second subitem second sub-subitem</li> + <li>second item second subitem third sub-subitem</li> + </ul> + </li> <!-- 三番目の順序なしリストを含む li の + 閉じタグ </li> です --> + <li>second item third subitem</li> + </ul> + <!-- Here is the closing </li> tag --> + </li> + <li>third item</li> +</ul></pre> + +<p>次のように出力されます。</p> + +<p>{{EmbedLiveSample("Nesting_a_list", 400, 220)}}</p> + +<h3 id="Nested_ul_and_ol" name="Nested_ul_and_ol"><ul> と <ol> のネスト</h3> + +<pre class="brush: html notranslate"><ul> + <li>first item</li> + <li>second item + <!-- ここには <li> の閉じタグはない --> + <ol> + <li>second item first subitem</li> + <li>second item second subitem</li> + <li>second item third subitem</li> + </ol> + <!-- ここに </li> を記述し、要素を閉じている --> + </li> + <li>third item</li> +</ul> +</pre> + +<p>次のように出力されます。</p> + +<p>{{EmbedLiveSample("Ordered_list_inside_unordered_list", 400, 150)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-ul-element', '<ul>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-ul-element', '<ul>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.ul")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>その他のリスト関連要素: {{HTMLElement("ol")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}}</li> + <li><code><ul></code> 要素の整形に有益な CSS プロパティ: + <ul> + <li>{{CSSxRef("list-style")}} プロパティ: 行頭記号の表示方法の変更</li> + <li><a href="/ja/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS カウンター</a>: 複雑に入れ子になったリストの扱い</li> + <li>{{CSSxRef("line-height")}} プロパティ: 非推奨の {{htmlattrxref("compact", "ul")}} 属性のシミュレート</li> + <li>{{CSSxRef("margin")}} プロパティ: リストのインデントの制御</li> + </ul> + </li> +</ul> diff --git a/files/ja/web/html/element/var/index.html b/files/ja/web/html/element/var/index.html new file mode 100644 index 0000000000..5c49c8f316 --- /dev/null +++ b/files/ja/web/html/element/var/index.html @@ -0,0 +1,154 @@ +--- +title: '<var>: 変数要素' +slug: Web/HTML/Element/var +tags: + - Element + - HTML + - HTML text-level semantics + - 'HTML:Flow content' + - 'HTML:Palpable Content' + - 'HTML:Phrasing content' + - Reference + - Web + - var + - variable +translation_of: Web/HTML/Element/var +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">HTML の<strong>変数要素</strong> (<strong><code><var></code></strong>) は、数式やプログラムコード内の変数の名前を表します。</span>挙動はブラウザーに依存しますが、通常は現在のフォントのイタリック体を使って表示されます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/var.html", "tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>, 知覚可能コンテンツ</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみがあります。</p> + +<h2 id="Usage_notes" name="Usage_notes">使用上のメモ</h2> + +<h3 id="Related_elements" name="Related_elements">関連する要素</h3> + +<p><code><var></code> がよく使われる文脈でよく使われる他の要素には、次のようなものがあります。</p> + +<ul> + <li>{{HTMLElement("code")}}: HTML コード要素</li> + <li>{{HTMLElement("kbd")}}: HTML キーボード入力要素</li> + <li>{{HTMLElement("samp")}}: HTML サンプル出力要素</li> +</ul> + +<p>もし、意味的な目的ではなくスタイル付けの目的で <code><var></code> が誤って使用されているのを見かけた場合は、 {{HTMLElement("span")}} と適切な CSS を使用するか、次のような適切な意味の要素を使用するかしてください。</p> + +<ul> + <li>{{HTMLElement("em")}}</li> + <li>{{HTMLElement("i")}}</li> + <li>{{HTMLElement("q")}}</li> +</ul> + +<h3 id="Default_style" name="Default_style">既定のスタイル</h3> + +<p>多くのブラウザーは <code><var></code> の表示時に {{cssxref("font-style")}} に <code>italic</code> を適用します。これは次のように CSS で上書きできます。</p> + +<pre class="brush: css notranslate">var { + font: bold 15px "Courier", "Courier New", monospace; +}</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Basic_example" name="Basic_example">基本的な例</h3> + +<p>これは、 <code><var></code> を使用して数式の変数名を記述した単純な例です。</p> + +<pre class="brush:html notranslate"><p>単純な数式: + <var>x</var> = <var>y</var> + 2 </p> +</pre> + +<p>出力結果は次の通りです。</p> + +<p>{{EmbedLiveSample("Basic_example", 650,80)}}</p> + +<h3 id="Overriding_the_default_style" name="Overriding_the_default_style">既定のスタイルの上書き</h3> + +<p>CSS を使用して、 <code><var></code> 要素の既定のスタイルを上書きすることができます。この例では、変数名は太字の Courier フォントがあれば、それを使って表示し、なければ既定の等幅フォントにフォールバックされます。</p> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">var { + font: bold 15px "Courier", "Courier New", monospace; +}</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><p><var>minSpeed</var> と <var>maxSpeed</var> 変数は、 + 端末の最低速度と最高速度を分当たりの回転数 (RPM) で + 制御します。</p></pre> + +<p>この HTML では、2つの変数名を <code><var></code> を使用して囲んでいます。</p> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample("Overriding_the_default_style", 650, 120)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-var-element', '<var>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-var-element', '<var>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.var")}}</p> diff --git a/files/ja/web/html/element/video/index.html b/files/ja/web/html/element/video/index.html new file mode 100644 index 0000000000..9f5107c868 --- /dev/null +++ b/files/ja/web/html/element/video/index.html @@ -0,0 +1,465 @@ +--- +title: '<video>: 動画埋め込み要素' +slug: Web/HTML/Element/video +tags: + - Element + - HTML + - HTML Video + - HTML Video Player + - HTML embedded content + - HTML5 + - Media + - Movie Playback + - Movies + - Multimedia + - Playing Movies + - Playing Video + - Reference + - Showing Video + - Video + - Web +translation_of: Web/HTML/Element/video +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の映像要素</strong> (<strong><code><video></code></strong>) は、文書中に映像再生に対応するメディアプレイヤーを埋め込みます。 <code><video></code> を音声コンテンツのために使用することもできますが、 {{HTMLElement("audio")}} 要素の方がユーザーに取って使い勝手が良いかもしれません。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/video.html", "tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>上記の例は <code><video></code> 要素のシンプルな使い方を示しています。 {{htmlelement("img")}} 要素の方法と同様に、 <code>src</code> 属性の中に表示したいメディアへのパスを含めます。他の属性を含めて、映像の幅や高さ、自動再生やループをするかどうか、ブラウザーの標準の映像コントロールを表示するかなどの情報を指定することができます。</p> + +<p>開始・終了タグである <code><video></video></code> タグの間の内容は、この要素に対応していないブラウザーで代替として表示されます。</p> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>があります。</p> + +<dl> + <dt>{{htmlattrdef("autoplay")}}</dt> + <dd>論理型の属性です。この属性が指定された場合、データの読み込みが完了し、再生可能な状態になった時点で即座にコンテンツの再生が始まります。 + <div class="note"><strong>メモ</strong>: 自動的に音声 (あるいは音声トラックを含む映像) を再生するサイトはユーザーにとって不快な体験になる可能性がありますので、可能な限り避けるべきです。自動再生機能が必須である場合は、オプトイン (ユーザーが明示的に有効化することを求める) にするべきです。ただし、ユーザーの制御下で後からソースを設定するメディア要素を作成するときは、この方法が役に立つでしょう。正しい自動再生の使い方についての追加情報は <a href="/ja/docs/Web/Media/Autoplay_guide">autoplay ガイド</a>を参照してください。</div> + + <p>映像の自動再生を無効にするために <code>autoplay="false"</code> を指定しても機能しません。 <code><video></code> タグにこの属性があれば、映像が自動的に再生されます。自動再生を無効にするには、属性を完全に取り除くことが必要です。</p> + + <p>一部のブラウザー (Chrome 70.0 など) では、 <code>muted</code> 属性がないと autoplay は動作しません。</p> + </dd> + <dt>{{htmlattrdef("autoPictureInPicture")}} {{experimental_inline}}</dt> + <dd>論理属性で、 <code>true</code> であれば、ユーザーがこの文書と他の文書やアプリケーションとの間を行き来したときに、自動的にピクチャインピクチャモードに切り替わるようにすることを示します。</dd> + <dt>{{htmlattrdef("buffered")}}</dt> + <dd>メディアがどれだけの時間分バッファリングされたかを判断するために、読み取ることが可能な属性です。この属性は {{domxref("TimeRanges")}} オブジェクトを持ちます。</dd> + <dt>{{htmlattrdef("controls")}}</dt> + <dd>この属性が指定された場合、再生、音量、シーク、ポーズの各機能を制御するコントロールを表示します。</dd> + <dt>{{htmlattrdef("controlslist")}} {{experimental_inline}}</dt> + <dd><code><a href="https://wicg.github.io/controls-list/html-output/multipage/embedded-content.html#attr-media-controlslist">controlslist</a></code> 属性が指定されていると、ブラウザー自身のコントロールのセットを表示する場合 (例えば <code>controls</code> 属性が設定されている場合)、メディア要素に表示するコントロールを選択するのを補助します。</dd> + <dd> + <p>指定できる値は <code>nodownload</code>, <code>nofullscreen</code>, <code>noremoteplayback</code> です。</p> + + <p><a href="#disable_pip"><code>disablePictureInPicture</code></a> 属性を使用すると、ピクチャインピクチャモード (およびコントロール) を無効にすることができます。</p> + </dd> + <dt>{{htmlattrdef("crossorigin")}}</dt> + <dd>この列挙型の属性は、関連画像を取得する際に CORS を使用するかを示します。<a href="/ja/docs/CORS_Enabled_Image">CORS が有効なリソース</a> は、<em>汚染</em>されることなく {{HTMLElement("canvas")}} 要素で再利用できます。次の値が使用できます: + <dl> + <dt><code>anonymous</code></dt> + <dd>資格情報を伴わずにオリジン間リクエストを実行します。すなわち、Cookie や X.509 証明書がない <code>Origin:</code> HTTP ヘッダーを送信する、あるいは HTTP ベーシック認証を行いません。サーバーが元のサイトに信用情報を付与しない場合 (<code>Access-Control-Allow-Origin:</code> HTTP ヘッダーの設定なし)、画像が<em>汚染</em>され、その使用も制限されます。</dd> + <dt><code>use-credentials</code></dt> + <dd>クレデンシャルを伴ってオリジン間要求を実行します。すなわち、Cookie や X.509 証明書を伴う <code>Origin:</code> HTTP ヘッダーを送信する、あるいは HTTP ベーシック認証を行います。サーバーが元のサイトに信用情報を付与しない場合 (<code>Access-Control-Allow-Credentials:</code> HTTP ヘッダーに関わらず)、画像が<em>汚染</em>され、その使用も制限されます。</dd> + </dl> + この属性が提供されない場合、リソースは CORS 要求なしで取得され (<code>Origin:</code> HTTP ヘッダーを送信せずに取得)、{{HTMLElement('canvas')}} 要素での汚染されない使用が妨げられます。これが無効な場合、列挙型のキーワードに <code>anonymous</code> が指定されたものとして扱われます。追加の情報は <a href="/ja/docs/Web/HTML/CORS_settings_attributes">CORS 設定属性</a> を参照してください。</dd> + <dt>{{htmlattrdef("currentTime")}}</dt> + <dd> + <p><code>currentTime</code> を読み込むと、秒単位で指定されたメディアの現在の再生位置を示す倍精度の浮動小数点値を返します。メディアがまだ再生を開始していない場合は、再生を開始する時間オフセットを返します。 <code>currentTime</code> を設定すると、現在の再生位置を指定された時間に設定し、メディアがすでに読み込まれている場合には、その位置までメディアをシークします。</p> + + <p>メディアがストリーミングされている場合、そのデータがメディアバッファ上で期限切れになっていると、{{Glossary("user agent", "ユーザエージェント")}}がリソースの一部を取得できない可能性があります。メディアによっては、0秒から開始しないメディアのタイムラインがある場合もあり、 <code>currentTime</code> をそれ以前の時間に設定すると失敗します。メディアタイムラインの参照フレームの開始点を決定するには、 {{domxref("HTMLMediaElement.getStartDate", "getStartDate()")}} メソッドを使用することができます。</p> + </dd> + <dt id="disable_pip"><a href="https://wicg.github.io/picture-in-picture/#disable-pip">{{htmlattrdef("disablePictureInPicture")}}</a> {{experimental_inline}}</dt> + <dd>ブラウザーにピクチャインピクチャのコンテキストメニューを表示させないようにしたり、場合によっては自動的にピクチャインピクチャを要求しないようにします。</dd> + <dt><a href="https://www.w3.org/TR/remote-playback/#the-disableremoteplayback-attribute">{{htmlattrdef("disableRemotePlayback")}}</a> {{experimental_inline}}</dt> + <dd>論理属性で、有線 (HDMI, DVI など) や無線 (Miracast, Chromecast, DLNA, AirPlay など) を使用して接続された端末のリモート再生機能を無効にするために使用されます。 + <p>Safari では、代替として <a href="https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/AirPlayGuide/OptingInorOutofAirPlay/OptingInorOutofAirPlay.html"><code>x-webkit-airplay="deny"</code></a> を使用することができます。</p> + </dd> + <dt>{{htmlattrdef("duration")}} {{ReadOnlyInline}}</dt> + <dd>倍精度浮動小数点値で、メディアのタイムライン上でのメディアの再生時間 (全長) を秒単位で示します。要素にメディアが存在しない場合、またはメディアが有効でない場合は <code>NaN</code> が返されます。メディアの終了時刻が不明な場合 (持続時間不明のライブストリーム、ウェブラジオ、 WebRTC からのメディア受信など)、この値は <code>+Infinity</code> になります。</dd> + <dt>{{htmlattrdef("height")}}</dt> + <dd>映像の表示領域の高さを、 <a href="https://drafts.csswg.org/css-values/#px">CSS ピクセル値</a>で指定します。 (絶対値に限ります。<a href="https://html.spec.whatwg.org/multipage/embedded-content.html#dimension-attributes">パーセント値は不可</a>。)</dd> + <dt>{{htmlattrdef("intrinsicsize")}} {{experimental_inline}}</dt> + <dd>この属性はブラウザーに、画像の固有の寸法を無視し、この属性で指定された寸法であると見せかけるよう指示します。特に、画像がこれらの次元のラスターであって、画像の <code>naturalWidth</code>/<code>naturalHeight</code> はこの属性で指定された値が返されます。<a href="https://github.com/ojanvafai/intrinsicsize-attribute">説明</a>と<a href="https://googlechrome.github.io/samples/intrinsic-size/index.html">例</a></dd> + <dt>{{htmlattrdef("loop")}}</dt> + <dd>論理型の属性です。指定された場合、ブラウザーは映像の末尾に達すると、自動的に先頭に戻ります。</dd> + <dt>{{htmlattrdef("muted")}}</dt> + <dd>論理型の属性で、映像に含まれる音声の既定の設定を示します。この属性を設定すると、初期状態が消音になります。既定値は <code>false</code> であり、映像再生時に音声も再生することを表します。</dd> + <dt>{{htmlattrdef("playsinline")}}</dt> + <dd>論理属性で、映像を「インライン」で再生する、すなわち要素の再生領域内で再生するかを指定します。この属性がないことが、映像を常に全画面で再生するという意味<em>ではない</em>ことに注意してください。</dd> + <dt>{{htmlattrdef("poster")}}</dt> + <dd>映像のダウンロード中に表示される画像の URL です。この属性が指定されない場合、最初のフレームが利用可能になるまで何も表示されず、その後、最初のフレームをポスターフレームとして表示します。</dd> + <dt>{{htmlattrdef("preload")}}</dt> + <dd>列挙型の属性で、映像が再生される前に、どのコンテンツを読み込むとユーザーに最高の使い勝手をもたらすかについての作者の考えを、ブラウザーに対するヒントとしてを提供するためのものです。以下の値のうちひとつを持つことができます。 + <ul> + <li><code>none</code>: 映像を事前に読み込むべきではないことを示します。</li> + <li><code>metadata</code>: 映像のメタデータ (例えば、長さ) を読み込みます。</li> + <li><code>auto</code>: ユーザーが映像ファイルを使用しないと思われる場合でも、ファイル全体をダウンロードしてよいことを示します。</li> + <li><em>空文字列</em>: これは <code>auto</code> 値と同義です。</li> + </ul> + + <p>既定値はブラウザーごとに異なります。仕様書では <code>metadata</code> を設定するよう助言しています。</p> + + <div class="blockIndicator note"><strong>注:</strong> + + <ul> + <li><code>autoplay</code> 属性は <code>preload</code> より優先します。<code>autoplay</code> を指定すると、言うまでもなくブラウザーは映像を再生するためにダウンロードを始めなければなりません。</li> + <li>仕様書は、ブラウザーがこの属性の値に従うことを強制していません。これは単なるヒントです。</li> + </ul> + </div> + </dd> + <dt>{{htmlattrdef("src")}}</dt> + <dd>埋め込む映像コンテンツへの URL を指定します。この属性は省略可能です。埋め込む映像の指定には、video 要素のブロック内で {{HTMLElement("source")}} を使用することもできます。</dd> + <dt>{{htmlattrdef("width")}}</dt> + <dd>映像の表示領域の幅を、 <a href="https://drafts.csswg.org/css-values/#px">CSS ピクセル値</a>で指定します。 (絶対値に限ります。<a href="https://html.spec.whatwg.org/multipage/embedded-content.html#dimension-attributes">パーセント値は不可</a>)。</dd> +</dl> + +<h2 id="Events" name="Events">イベント</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">イベント名</th> + <th scope="col">発生する時</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{domxref("ScriptProcessorNode.audioprocess_event","audioprocess")}}{{Deprecated_Inline}}</td> + <td>{{DOMxRef("ScriptProcessorNode")}} の入力バッファが処理可能になった。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.canplay_event", 'canplay')}}</td> + <td>ブラウザーがメディアを再生できるようになったものの、追加のバッファリングのために停止することなくメディアの最後まで再生するには、充分なデータが読み込まれていないとみられる。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.canplaythrough_event", 'canplaythrough')}}</td> + <td>ブラウザーがコンテンツのバッファリングのために停止することなく最後までメディアを再生することができるとみられる。</td> + </tr> + <tr> + <td>{{domxref("OfflineAudioContext.complete_event", "complete")}}</td> + <td>{{DOMxRef("OfflineAudioContext")}} のレンダリングが終了した。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.durationchange_event", 'durationchange')}}</td> + <td><code>duration</code> 属性が更新された。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.emptied_event", 'emptied')}}</td> + <td>メディアが空になった。例えば、このイベントはメディアがすでに読み込まれた (または部分的に読み込まれた) 状態で、再読み込みのために <a href="/ja/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal"><code>load()</code></a> メソッドが呼び出された場合など。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.ended_event", 'ended')}}</td> + <td>メディアの末尾に達したために再生が停止した。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.loadeddata_event", 'loadeddata')}}</td> + <td>メディアの最初のフレームが読み込み終わった。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.loadedmetadata_event", 'loadedmetadata')}}</td> + <td>メタデータを読み込んだ。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.pause_event", 'pause')}}</td> + <td>再生が一時停止した。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.play_event", 'play')}}</td> + <td>再生が始まった。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.playing_event", 'playing ')}}</td> + <td>データがなくなったために一時停止または遅延した後で、再生の再開の準備ができた。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.progress_event", 'progress')}}</td> + <td>ブラウザーがリソースを読み込んでいる間に定期的に発生します。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.ratechange_event", 'ratechange')}}</td> + <td>再生レートが変更された。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.seeked_event", 'seeked')}}</td> + <td><em>シーク</em>操作が完了した。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.seeking_event", 'seeking')}}</td> + <td><em>シーク</em>捜査が始まった。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.stalled_event", 'stalled')}}</td> + <td>ユーザーエージェントがメディアを読み込もうとしているが、データが予期せずに入ってこない。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.suspend_event", 'suspend')}}</td> + <td>メディアデータの読み込みが停止した。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.timeupdate_event", 'timeupdate')}}</td> + <td><code>currentTime</code> 属性で示されている時刻が更新された。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.volumechange_event", 'volumechange')}}</td> + <td>音量が変更された。</td> + </tr> + <tr> + <td>{{domxref("HTMLMediaElement.waiting_event", 'waiting')}}</td> + <td>一時的なデータの不足により、再生が停止した。</td> + </tr> + </tbody> +</table> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<p>ブラウザーは同じ<a href="/ja/docs/Web/HTML/Supported_media_formats">映像形式</a>にすべて対応しているとは限りません。内部の {{htmlelement("source")}} 要素で複数のソースを提供することができ、ブラウザーは理解できる最初のものを使用します。</p> + +<pre class="brush: html notranslate"><video controls> + <source src="myVideo.mp4" type="video/mp4"> + <source src="myVideo.webm" type="video/webm"> + <p>Your browser doesn't support HTML5 video. Here is + a <a href="myVideo.mp4">link to the video</a> instead.</p> +</video></pre> + +<p><a href="/ja/docs/Web/Media/Formats">メディアファイル形式</a>や、<a href="/ja/docs/Web/Media/Formats/Video_codecs">動画で対応しているコーデック</a>など、実質的かつ徹底したガイドを提供しています。また、<a href="/ja/docs/Web/Media/Formats/Audio_codecs">一緒に利用することができる音声コーデック</a>のガイドもあります。</p> + +<p>その他の利用上の注意:</p> + +<ul> + <li><code>controls</code> 属性を指定しないと、 video はブラウザーの標準のコントロールを含めません。 JavaScript と {{domxref("HTMLMediaElement")}} を使用して、独自のコントロールを作成することもできます。詳しくは<a href="/ja/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">クロスブラウザーの映像プレイヤーの作成</a>を参照してください。</li> + <li>映像 (および音声) コンテンツを詳細に制御できるよう、 <code>HTMLMediaElement</code> はたくさんの種類の<a href="/ja/docs/Web/Guide/Events/Media_events">イベント</a>を発生します。これらのイベントは、制御性を提供するだけでなく、メディアのダウンロードと再生の両方の進行状況や再生状態、再生位置を監視することができます。</li> + <li>{{cssxref("object-position")}} プロパティを用いて、要素の枠内での映像の位置を調整することができ、 {{cssxref("object-fit")}} プロパティを用いて映像の寸法がどのように枠内に合わせられるかを制御することができます。</li> + <li>映像と同時に字幕を表示するには、 JavaScript と共に {{htmlelement("track")}} 要素と <a href="/ja/docs/Web/API/WebVTT_API">WebVTT</a> を使用します。詳しくは、 <a href="/ja/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">HTML5 映像への字幕の追加</a>をご覧ください。</li> + <li><code><video></code> 要素を使って音声ファイルを再生することができます。例えば <a href="/ja/docs/Web/API/WebVTT_API">WebVTT</a> の代替表記を伴う音声を再生したい場合などに、 {{HTMLElement("audio")}} 要素は WebVTT を使った字幕を許可していないため便利です。</li> + <li>要素に対応しているブラウザーで代替コンテンツをテストするには、 <code><video></code> を <code><notavideo></code> のような存在しないタグに置き換えてください。</li> +</ul> + +<p>HTML の <code><video></code> の使用について一般的な良い情報源として、<a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">映像および音声コンテンツ</a>の初心者向けチュートリアルがあります。</p> + +<h3 id="Styling_with_CSS" name="Styling_with_CSS">CSS でのスタイル付け</h3> + +<p><code><video></code> 要素は置換要素です。 — {{cssxref("display")}} の値は既定で <code>inline</code> ですが、ビューポートの既定の幅と高さは埋め込まれる映像で定義されます。</p> + +<p><code><video></code> のスタイル付けについて、特別な考慮事項はありません。よくある戦略は、位置や寸法を設定しやすくして、必要に応じてスタイルやレイアウト情報を提供するために <code>display</code> の値を <code>block</code> に設定することす。<a href="/ja/docs/Web/Guide/Audio_and_video_delivery/Video_player_styling_basics">動画プレイヤーのスタイル付けの基本</a>は、便利なスタイル付けテクニックをいくつか紹介しています。</p> + +<h3 id="トラックの追加と削除の検出">トラックの追加と削除の検出</h3> + +<p>{{event("addtrack")}} および {{event("removetrack")}} イベントを用いると、 <code><video></code> 要素でトラックが追加されたり削除されたりしたことを検出することができます。しかし、これらのイベントは <code><video></code> 要素自身に直接送信されるわけではありません。代わりに、 <code><video></code> の {{domxref("HTMLMediaElement")}} 内にある、要素に追加されたトラックの種類に対応するトラックリストオブジェクトに送信されます。</p> + +<dl> + <dt>{{domxref("HTMLMediaElement.audioTracks")}}</dt> + <dd>メディア要素のオーディオトラックのすべてを含む {{domxref("AudioTrackList")}} です。 <code>addtrack</code> のリスナーをこのオブジェクトに追加すると、新しいオーディオトラックが要素に追加された時に通知を受け取ることができます。</dd> + <dt>{{domxref("HTMLMediaElement.videoTracks")}}</dt> + <dd>この {{domxref("VideoTrackList")}} オブジェクトに <code>addtrack</code> リスナーを追加することで、要素に動画トラックが追加されたときに通知を受け取るkとができます。</dd> + <dt>{{domxref("HTMLMediaElement.textTracks")}}</dt> + <dd>この {{domxref("TextTrackList")}} オブジェクトに <code>addtrack</code> リスナーを追加することで、要素にテキストトラックが追加されたときに通知を受け取るkとができます。</dd> +</dl> + +<p>例えば、次のようなコードで <code><video></code> 要素でオーディオトラックが追加されたり削除されたりしたときを検出することができます。</p> + +<pre class="brush: js notranslate">var elem = document.querySelector("video"); + +elem.audioTrackList.onaddtrack = function(event) { + trackEditor.addTrack(event.track); +}; + +elem.audioTrackList.onremovetrack = function(event) { + trackEditor.removeTrack(event.track); +}; +</pre> + +<p>このコードはオーディオトラックが要素で追加および削除されることを監視し、トラックエディターの論理関数を呼び出すことで、エディターにおける利用できるトラックの一覧でトラックを登録や削除を行います。</p> + +<p>{{event("addtrack")}} および {{event("removetrack")}} イベントを監視するには、 {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使用することもできます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Simple_video_example" name="Simple_video_example">単純な映像の例</h3> + +<p>この例では、アクティブ化されたときに映像を再生し、再生を制御するためにブラウザーの既定の動画コントロールをユーザーに提供します。</p> + +<pre class="brush: html notranslate"><!-- Simple video example --> +<!-- 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org --> +<!-- Poster from peach.blender.org --> +<video controls + src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" + poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217" + width="620"> + +すみませんが、このブラウザーは埋め込み映像に対応していません。 +しかし、<a href="https://archive.org/details/BigBuckBunny_124">ダウンロード</a> +してお好きな映像プレイヤーで見ることはできます。 + +</video></pre> + +<p>{{EmbedLiveSample('Simple_video_example', '640', '370', '', 'Web/HTML/Element/video')}}</p> + +<p>映像の再生が始まるまで、 <code>poster</code> 属性で指定された画像がその場所に表示されます。ブラウザーが映像の再生に対応していない場合は、代替テキストが表示されます。</p> + +<h3 id="Multiple_sources_example" name="Multiple_sources_example">複数のソースの例</h3> + +<p>この例は、メディアの3つの異なるソースを提供する最後のものをベースにしています。これにより、ブラウザーで対応している映像コーデックに関係なく、映像を見ることができます。</p> + +<pre class="brush: html notranslate"><!-- Using multiple sources as fallbacks for a video tag --> +<!-- 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org --> +<!-- Poster hosted by Wikimedia --> +<video width="620" controls + poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg" > + <source + src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4" + type="video/mp4"> + <source + src="https://archive.org/download/ElephantsDream/ed_hd.ogv" + type="video/ogg"> + <source + src="https://archive.org/download/ElephantsDream/ed_hd.avi" + type="video/avi"> + Your browser doesn't support HTML5 video tag. +</video></pre> + +<p>{{EmbedLiveSample('Multiple_sources_example', '640', '370')}}</p> + +<p>はじめに <a href="/ja/docs/Web/Media/Formats/Containers#WebM">WebM</a> を試します。再生できない場合は、 <a href="/ja/docs/Web/Media/Formats/Containers#MP4">MP4</a> を試します。最後に <a href="/ja/docs/Web/Media/Formats/Containers#Ogg">Ogg</a> を試します。 video 要素に対応していない場合は代替メッセージを表示しますが、すべてのソースに失敗した場合は表示しません。</p> + +<p>メディアファイル形式によっては、ファイル形式文字列の一部として <code><a href="/ja/docs/Web/Media/Formats/codecs_parameter">codecs</a></code> 引数を使用して、より具体的な情報を提供することができます。比較的簡単な例は <code>video/webm; codecs="vp8, vorbis"</code> であり、 <a href="/ja/docs/Web/Media/Formats/Containers#WebM">WebM</a> ビデオであり、動画に <a href="/ja/docs/Web/Media/Formats/Video_codecs#VP8">VP8</a>、音声にに <a href="/ja/docs/Web/Media/Formats/Audio_codecs#Vorbis">Vorbis</a> を使用したあることを示しています。</p> + +<h3 id="Server_support_for_video" name="Server_support_for_video">映像へのサーバーの対応</h3> + +<p>サーバーで映像の MIME タイプが適切に設定されていないと、映像が表示されないか X 印がついた灰色のボックスが表示される (JavaScript が有効である場合) 可能性があります。</p> + +<p>Ogg Theora 形式で映像を提供する場合、 Apache Web Server では "video/ogg" MIME タイプに映像ファイルの拡張子を追加すると問題が解決します。もっとも一般的な映像ファイルの拡張子は ".ogm", ".ogv", ".ogg" です。"/etc/apache" の "mime.types" ファイルを編集するか、 <code>httpd.conf</code> で <code>"AddType"</code> の設定ディレクティブを使用してください。</p> + +<pre class="notranslate">AddType video/ogg .ogm +AddType video/ogg .ogv +AddType video/ogg .ogg +</pre> + +<p>WebM 形式で映像を提供する場合、 Apache Web Server では "/etc/apache" の "mime.types" ファイルまたは <code>httpd.conf</code> の "AddType" ディレクティブで映像ファイルの拡張子 (一般的には ".webm") を MIME type "video/webm" に追加することで問題が解決します。</p> + +<pre class="notranslate">AddType video/webm .webm +</pre> + +<p>ウェブホスティングサービスでは、全体の更新が行われるまでの間、新技術向けに MIME タイプの設定を変更するための簡単なインターフェイスを提供しているかもしれません。</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> + +<p>映像には、実際にコンテンツを説明する字幕と<ruby>文字化情報<rp> (</rp><rt>transcript</rt><rp>) </rp></ruby>を提供するべきです (実装方法について詳しくは <a href="/ja/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">HTML5 映像への字幕の追加</a> を参照してください) 。字幕によって、聴力を失った人が映像の再生時に音声の内容を理解する事ができるようになるのに対し、文字化情報を使用すると、音声コンテンツを理解するのに時間が掛かる人が、自分に合ったペースと書式で内容を確認できるようになります。</p> + +<p>注目すべき点は、音声のみのメディアにキャプションを付けることはできますが、キャプションを表示するために要素の video 領域が使用されるため、 {{HTMLElement("video")}} 要素で音声を再生しないとキャプションを付けることができないということです。これは、 video 要素で音声を再生するのに便利な特別なシナリオの 1 つです。</p> + +<p>自動字幕サービスが使用されている場合は、生成されたコンテンツが元の映像を正しく表現しているかを確認することが重要です。</p> + +<p>字幕や文字化情報では、話されるセリフに加えて、重要な情報を伝える音楽や音響効果も識別できるようにしてください。これには感情や口調も含みます。</p> + +<pre class="notranslate">14 +00:03:14 --> 00:03:18 +[ドラマチックなロック音楽] + +15 +00:03:19 --> 00:03:21 +[ささやき] 遠くにあるものは何ですか？ + +16 +00:03:22 --> 00:03:24 +それは……それは…… + +16 00:03:25 --> 00:03:32 +[ぶつかる大きな音] +[皿の割れる音] +</pre> + +<p>字幕は映像の主題を邪魔しないようにしてください。これは <a href="/ja/docs/Web/API/WebVTT_API#Cue_settings"><code>align</code> VTT キュー設定</a>を使用して位置を決めることができます。</p> + +<ul> + <li><a href="/ja/docs/Plugins/Flash_to_HTML5/Video/Subtitles_captions">MDN 字幕とクローズドキャプション — プラグイン</a></li> + <li><a href="/ja/docs/Web/API/WebVTT_API">Web Video Text Tracks Format (WebVTT)</a></li> + <li><a href="https://webaim.org/techniques/captions/">WebAIM: Captions, Transcripts, and Audio Descriptions</a></li> + <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.2_—_Providing_text_alternatives_for_time-based_media">MDN WCAG を理解する ― ガイドライン 1.2 の解説</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html">Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html">Understanding Success Criterion 1.2.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Technical_summary" name="Technical_summary">技術的概要</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>, 記述コンテンツ, 埋め込みコンテンツ。 {{htmlattrxref("controls", "video")}} 属性を持つ場合は、対話的コンテンツおよび知覚可能コンテンツ。</td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td> + <p>要素が {{htmlattrxref("src", "video")}} 属性を持つ場合: 0 個以上の {{HTMLElement("track")}} 要素とそれに続く、メディア要素を含まない透過的コンテンツ。すなわち {{HTMLElement("audio")}} 要素や {{HTMLElement("video")}} 要素を子要素として配置してはなりません。</p> + + <p>その他の場合: 0 個以上の {{HTMLElement("source")}} 要素、0 個以上の {{HTMLElement("track")}} 要素、メディア要素を含まない透過的コンテンツ。すなわち {{HTMLElement("audio")}} 要素や {{HTMLElement("video")}} 要素を子要素として配置してはなりません。</p> + </td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td>埋め込みコンテンツを受け入れるすべての要素。</td> + </tr> + <tr> + <th scope="row">暗黙の ARIA ロール</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">対応するロールなし</a></td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>{{ARIARole("application")}}</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLVideoElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">フィードバック</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'media.html#the-video-element', '<video>')}}</td> + <td><a href="https://github.com/whatwg/html/issues">WHATWG HTML GitHub issues</a></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<div>{{Compat("html.elements.video")}}</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Media/Formats">ウェブ上のメディア種別と形式のガイド</a> + + <ul> + <li><a href="/ja/docs/Web/Media/Formats/Containers">メディアコンテナー形式 (ファイル形式)</a></li> + <li><a href="/ja/docs/Web/Media/Formats/Video_codecs">ウェブの動画コーデックガイド</a></li> + <li><a href="/ja/docs/Web/Media/Formats/Audio_codecs">ウェブの音声コーデックガイド</a></li> + </ul> + </li> + <li>フレーム内における画像の位置と寸法の設定: {{cssxref("object-position")}} および {{cssxref("object-fit")}}</li> + <li>{{htmlelement("audio")}}</li> + <li><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">HTML5 での映像や音声の使用</a></li> + <li><a href="/ja/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">canvas を用いた映像の操作</a></li> + <li><a href="/ja/docs/Web/HTTP/Configuring_servers_for_Ogg_media">Ogg メディアのサーバーの構成</a></li> +</ul> diff --git a/files/ja/web/html/element/wbr/index.html b/files/ja/web/html/element/wbr/index.html new file mode 100644 index 0000000000..b12f4ccbca --- /dev/null +++ b/files/ja/web/html/element/wbr/index.html @@ -0,0 +1,106 @@ +--- +title: <wbr> +slug: Web/HTML/Element/wbr +tags: + - Element + - HTML + - HTML text-level semantics + - Reference + - Web +translation_of: Web/HTML/Element/wbr +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML の <code><wbr></code> 要素</strong>は、改行可能位置 — テキスト内でブラウザーが任意で改行してよい位置を表しますが、この改行規則は必要のない場合は改行を行いません。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/wbr.html", "tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリ</a></th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/Guide/HTML/Content_categories#Phrasing_content">記述コンテンツ</a></td> + </tr> + <tr> + <th scope="row">許可されている内容</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">タグの省略</th> + <td>この要素は{{Glossary("empty element", "空要素")}}です。開始タグは必須であり、終了タグを記述してはなりません。</td> + </tr> + <tr> + <th scope="row">許可されている親要素</th> + <td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>を受け入れるすべての要素</td> + </tr> + <tr> + <th scope="row">許可されている ARIA ロール</th> + <td>すべて</td> + </tr> + <tr> + <th scope="row">DOM インターフェイス</th> + <td>{{domxref("HTMLElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみがあります。</p> + +<h2 id="Notes" name="Notes">メモ</h2> + +<p>UTF-8 エンコードを使用するページでは、 <code><wbr></code> 要素は <code>U+200B</code> <code>ZERO-WIDTH SPACE</code> コードポイントのように作用します。特に、この要素は Unicode bidi BN コードポイントのように作用するため、{{Glossary("bidi", "双方向性")}}には影響を与えません。 <code><div dir=rtl>123,<wbr>456</div></code> が 2 行に分かれないときは <code>456,123</code> ではなく <code>123,456</code> と表示されます。</p> + +<p>同じ理由で、 <code><wbr></code> 要素は改行位置でハイフンを生成しません。行末にのみハイフンを表示させるには、代わりにソフトハイフンの文字実体参照 (<code>&shy;</code>) を使用してください。</p> + +<p>この要素は Internet Explorer 5.5 で最初に実装され、 HTML5 で公式に定義されました。</p> + +<h2 id="Example" name="Example">例</h2> + +<p><em><a class="external" href="https://web.archive.org/web/20121105171040/http://styleguide.yahoo.com/">The Yahoo Style Guide</a></em> では、句読点などの区切り文字が行末に置かれることを避けるため <a class="external" href="https://web.archive.org/web/20121105171040/http://styleguide.yahoo.com/editing/treat-abbreviations-capitalization-and-titles-consistently/website-names-and-addresses">URL を句読点の<em>前</em>で改行する</a>ことを推奨しています。区切り文字が行末にあると、読者が URL の末尾を誤解する可能性があります。</p> + +<pre class="brush: html notranslate"><p>http://this<wbr>.is<wbr>.a<wbr>.really<wbr>.long<wbr>.example<wbr>.com/With<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages</p> +</pre> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-wbr-element', '<wbr>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-wbr-element', '<wbr>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.wbr")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{cssxref("overflow-wrap")}}</li> + <li>{{cssxref("word-break")}}</li> + <li>{{cssxref("hyphens")}}</li> +</ul> diff --git a/files/ja/web/html/element/xmp/index.html b/files/ja/web/html/element/xmp/index.html new file mode 100644 index 0000000000..639da9a3c8 --- /dev/null +++ b/files/ja/web/html/element/xmp/index.html @@ -0,0 +1,52 @@ +--- +title: <xmp> +slug: Web/HTML/Element/xmp +tags: + - Element + - HTML + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/xmp +--- +<div>{{ Obsolete_header() }}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p><em>xmp (Example) 要素</em> (<code><xmp></code>) は、その開始タグから終了タグまでの間の HTML タグを HTML として解釈せず、等幅フォントでレンダリングします。HTML2 はこれが 1 行当たり 80 文字を表示するのに充分な幅でレンダリングするよう推奨しています。</p> + +<div class="note"><strong>注意:</strong>この要素は使用しないで下さい + +<ul> + <li>HTML3.2 から非推奨要素となっており、また一貫した実装も存在しません。そして HTML5 仕様からは完全に削除されています。</li> + <li>改行コードの反映など、同等のレンダリングのためには {{ HTMLElement("pre") }} 要素、「コードの表示」というセマンティクスを表す意図であれば {{ HTMLElement("code") }} 要素で実現可能です。それらを使用する場合、HTML タグとして解釈されないように 「<code><</code>」は「<code>&lt;</code>」、「<code>></code>」は「<code>&gt;</code>」というようにエスケープして記述する必要があります。</li> + <li>等幅フォントでの表示は <a href="/ja/docs/CSS" title="CSS">CSS</a> の {{ cssxref("font-family") }} プロパティを使用し、値として <code>monospace</code> を指定することで実現可能です。</li> +</ul> +</div> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<p>この要素は、すべての要素が持つ <a href="/ja/docs/HTML/global_attributes" rel="internal" title="ja/docs/HTML/global attributes">グローバル属性</a> 以外の属性を持ちません。</p> + +<h2 id="DOM_interface" name="DOM_interface">DOM インターフェイス</h2> + +<p>この要素は {{domxref('HTMLElement')}} インターフェイスを実装しています。</p> + +<div class="note"> +<p><strong>実装メモ: </strong> Gecko 1.9.2 まで（Firefox）はこの要素に対し{{domxref('HTMLSpanElement')}} を実装しています。</p> +</div> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + + + +<p>{{Compat("html.elements.xmp")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>代替となり得る要素: {{ HTMLElement("pre") }} 要素、 {{ HTMLElement("code") }} 要素</li> + <li>{{ HTMLElement("xmp") }} とほぼ同等の {{ HTMLElement("plaintext") }} 要素と {{ HTMLElement("listing") }} 要素も廃止となっています。</li> +</ul> + +<div>{{HTMLRef}}</div> diff --git a/files/ja/web/html/forms_in_html/index.html b/files/ja/web/html/forms_in_html/index.html new file mode 100644 index 0000000000..abf99e2af7 --- /dev/null +++ b/files/ja/web/html/forms_in_html/index.html @@ -0,0 +1,46 @@ +--- +title: Forms in HTML5 +slug: Web/HTML/Forms_in_HTML +translation_of: Learn/HTML/Forms/HTML5_updates +--- +<p>{{ gecko_minversion_header("2") }}</p> +<p>HTML5 のフォーム関連要素/属性は HTML4 よりも幅広いマークアップを提供し、また HTML4 時代に必要とされた長たらしいスクリプトやスタイルシートを書く手間を省いてくれます。HTML5 のフォーム機能は、Web サイトごとに異なっている入力へのフィードバックに今より優れた一貫性をもたらし、より良いユーザエクスペリエンスを提供します。また、スクリプトを無効化したブラウザでも同様の体験を提供します。</p> +<p>このページでは、Gecko/Firefox がサポートするフォーム機能のうち、新しいもの、もしくは変更されたものについて紹介します。</p> +<h3 id="The_input_element" name="The_input_element"><code><input></code> 要素</h3> +<p><code>{{ HTMLElement("input") }}</code> 要素の {{ htmlattrxref("type", "input") }} 属性に新しい値が追加されました。</p> +<ul> <li><code>search</code>: 検索フィールドを表します。改行が入力されても自動的に取り除かれますが、それ以外に値の制約はありません。</li> <li><code>tel</code>: 電話番号を入力します。改行が入力されても自動的に取り除かれますが、それ以外に値の制約はありません。これは電話番号の表記が国によって異なることにあります。ユーザーが入力する値に制約を与えたい場合は {{ htmlattrxref("pattern", "input") }} 属性や {{ htmlattrxref("maxlength", "input") }} 属性を利用できます。</li> <li><code>url</code>: <a class=" external" href="http://ja.wikipedia.org/wiki/URL">URL</a> を入力します。改行や値の最初と最後に空白が入力されると自動的に取り除かれます。</li> <li> <p><code>email</code>: メールアドレスを入力します。改行が入力されても自動的に取り除かれます。非妥当なメールアドレスが入力されるとフォームは送信されません。メールアドレスの形式は、次の ABNF 記法 <code>1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )</code> を満たさなければなりません（<code>atext</code> は RFC 5322 の section 3.2.3 で、<code>ldh-str</code> は RFC 1034 の section 3.5 で定義されています）。</p> <div class="note"><strong>Note:</strong> {{ htmlattrxref("multiple", "input") }} 属性がこの {{ HTMLElement("input") }} 要素に指定された場合、複数のメールアドレスをカンマで区切り入力することができます。しかし、この機能はまだ Firefox に実装されていません。</div> </li> +</ul> +<p>{{ HTMLElement("input") }} 要素には新しい属性も追加されています。</p> +<ul> <li>{{ htmlattrxref("list", "input") }}: {{ HTMLElement("datalist") }} 要素の ID を指定します。<code>datalist</code> 要素の内容は {{ HTMLElement("option") }} 要素で、この内容がフィールドのサジェスト領域にヒントとして表示されます。</li> <li>{{ htmlattrxref("pattern", "input") }}: フィールドがとりうる値の入力形式を正規表現で記述します。この属性は {{ htmlattrxref("type", "input") }} 属性が <code>text</code>, <code>tel</code>, <code>search</code>, <code>url</code>, <code>email</code> のいずれかである場合に利用可能です。</li> <li>{{ htmlattrxref("formmethod", "input") }}: 送信時の HTTP メソッド (GET もしくは POST) を指定します。この属性は {{ HTMLElement("form") }} 要素の {{ htmlattrxref("method", "form") }} 属性を上書きします。{{ htmlattrxref("formmethod", "input") }} 属性は {{ htmlattrxref("type", "input") }} 属性が <code>image</code> もしくは <code>submit</code> の場合に利用可能です。</li> <li>{{ htmlattrxref("x-moz-errormessage", "input") }} {{ non-standard_inline() }}: 検証を通らなかった際に表示されるテキストを指定します。この属性は Mozilla の固有拡張であり、非標準なものです。</li> +</ul><h3 id="The_form_element" name="The_form_element"><code><form></code> 要素</h3> +<p>{{ HTMLElement("form") }} 要素に新しい属性が追加されました。</p> +<ul> <li>{{ htmlattrxref("novalidate", "form") }}: フォーム送信時に実行される検証機能を無効化します。</li> +</ul> +<h3 id="The_datalist_element" name="The_datalist_element"><code><datalist></code> 要素</h3> +<p>{{ HTMLElement("datalist") }} 要素は {{ HTMLElement("option") }} 要素を内容に持つ、{{ HTMLElement("input") }} フィールドのサジェストを定義します。</p> +<p>{{ HTMLElement("input") }} 要素の {{ htmlattrxref("list", "input") }} 属性から、特定の {{ HTMLElement("datalist") }} 要素を指定します。</p> +<h3 id="The_output_element" name="The_output_element"><code><output></code> 要素</h3> +<p><code>{{ HTMLElement("output") }}</code> 要素は計算結果を表示します。</p> +<p>{{ htmlattrxref("for", "output") }} 属性を使って、<code>output</code> 要素と計算に利用する文書内の他の要素 (入力や変数など) とを関連づけることができます。{{ htmlattrxref("for", "output") }} 属性の値は計算に利用する要素の ID を空白で区切り入力します。</p> +<p>{{ non-standard_inline() }} Gecko 2.0 では {{ HTMLElement("output") }} 要素に任意のフォーム検証とエラーメッセージを定義でき、また {{ Cssxref(":invalid") }}, {{ Cssxref(":valid") }}, {{ Cssxref(":-moz-ui-invalid") }}, {{ Cssxref(":-moz-ui-valid") }} といった CSS 擬似クラスを適用することができます。これにより、特定の入力値ではないがビジネスルールに抵触するような計算結果の制約 (例: 「パーセンテージの合計が 100 を超えてはいけない」) を検証することができます。</p> +<h3 id="The_placeholder_attribute" name="The_placeholder_attribute"><code>placeholder</code> 属性</h3> +<p><code>{{ HTMLElement("input") }}</code>, <code>{{ HTMLElement("textarea") }}</code> 要素の {{ htmlattrxref("placeholder", "input") }} 属性は、フィールドに入力できる値のヒントを提示します。プレースホルダに指定するテキストには CR や LF を記述することはできません。</p> +<h3 id="The_autofocus_attribute" name="The_autofocus_attribute"><code>autofocus</code> 属性</h3> +<p>{{ htmlattrxref("autofocus", "input") }} 属性はページのロード時に自動的にフォーカスのあたるべきフォームコントロールを指定します。ユーザーの行動が優先されるため、すでに別のコントロールに入力している場合などには自動的にフォーカスされません。<code>autofocus</code> 属性を与えられる要素は文書中でただ 1 つです。この属性は真偽値属性であり、<code>{{ HTMLElement("input") }}</code>, <code>{{ HTMLElement("button") }}</code>, <code>{{ HTMLElement("select") }}</code>, <code>{{ HTMLElement("textarea") }}</code> 要素に指定可能です。ただし、{{ htmlattrxref("autofocus", "input") }} 要素の {{ htmlattrxref("type", "input") }} 属性が <code>hidden</code> を値にもつ場合、この属性を利用することができません (つまり、隠れたコントロールへ自動的にフォーカスさせることはできません)。</p> +<h3 id="The_label.control_DOM_property" name="The_label.control_DOM_property">label.control DOM プロパティ</h3> +<p><code><a href="/ja/DOM/HTMLLabelElement" title="ja/DOM/HTMLLabelElement">HTMLLabelElement</a></code> DOM インターフェースは HTML の <code>{{ HTMLElement("label") }}</code> 要素が持つ属性に加えて、新しいプロパティを備えています。<strong><code>control</code></strong> プロパティは、ラベルに結びついたコントロールを返します。つまり、このラベルがどの要素のコントロールなのかを知ることができます。コントロールは要素の {{ htmlattrxref("for", "label") }} 属性もしくは要素の最初の子孫コントロール要素から決定されます。</p> +<h3 id="Constraint_Validation" name="Constraint_Validation">フォーム検証</h3> +<p>HTML5 はフォームに入力された値をクライアントサイドで検証するための構文及び API を提供しています。この検証機能はサーバーサイドの検証を置き換えるものではありません。セキュリティやデータの整合性といった点からサーバーサイドの検証は必要です。しかし、入力したデータについてユーザーにすぐフィードバックできるため、クライアントサイドの検証はより良いユーザーエクスペリエンスを提供します。</p> +<p>{{ HTMLElement("input") }} 要素に <code>title</code> 属性が指定されている場合、その内容が検証に失敗した際のエラーメッセージとして表示されます。属性値が空の場合、ツールチップは表示されません。属性が指定されていない場合は、標準の検証メッセージ ({{ htmlattrxref("x-moz-errormessage") }} 属性もしくは <code>setCustomValidity()</code> メソッドで指定) が使用されます。</p> +<div class="note"><strong>Note:</strong> フォームの検証はフォーム中の {{ HTMLElement("button") }} 要素ではサポートされていません。フォームの妥当状態と連動するスタイルをボタンに与えたい場合は {{ cssxref(":-moz-submit-invalid") }} 擬似クラスを利用してください。</div> +<h4 id="HTML_Syntax_for_Constraint_Validation" name="HTML_Syntax_for_Constraint_Validation">フォーム検証の HTML 構文</h4> +<p>次の HTML5 構文によって、フォームに入力する内容に制約をかけることができます。</p> +<ul> <li>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }} 要素の {{ htmlattrxref("required", "input") }} 属性は、その要素が入力必須なことを示します。({{ HTMLElement("input") }} 要素の場合、{{ htmlattrxref("type", "input") }} 属性の値によって適用可能かどうかが異なります。)</li> <li>{{ HTMLElement("input") }} 要素の {{ htmlattrxref("pattern", "input") }} 属性は、入力された値がとりうるべき値の形式を正規表現で指定します。</li> <li>{{ HTMLElement("input") }} 要素の {{ htmlattrxref("min", "input") }}, {{ htmlattrxref("max", "input") }} 属性は、要素に入力可能な値の最小値/最大値を指定します。</li> <li>{{ HTMLElement("input") }} 要素の {{ htmlattrxref("step", "input") }} 属性は、({{ htmlattrxref("min", "input") }}, {{ htmlattrxref("max", "input") }} 属性と使うことで) 入力可能な値の粒度に制約を設けます。指定可能な値にそぐわない値が入力された場合、その値は検証を通りません。</li> <li>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 要素の {{ htmlattrxref("maxlength", "input") }} 属性は、ユーザーがそのフィールドに入力できる最大文字数 (Unicode のコードポイント) を指定します。</li> <li>{{ htmlattrxref("type", "input") }} 属性の値 <code>url</code>, <code>email</code> は、入力された値がそれぞれ妥当な URL、もしくはメールアドレスなのかを検証します。</li> +</ul> +<p>{{ HTMLElement("form") }} 要素の {{ htmlattrxref("novalidate", "form") }} 属性、{{ HTMLElement("button") }} 要素の {{ htmlattrxref("formnovalidate", "button") }} 属性、{{ htmlattrxref("type", "input") }} に <code>submit</code> もしくは <code>image</code> を持つ {{ HTMLElement("input") }} 要素の {{ htmlattrxref("formnovalidate", "input") }} 属性を使用すれば、検証を行わないようにすることも可能です。これらの属性は、フォーム送信時に検証を行わないことを示します。</p> +<h4 id="Constraint_Validation_API" name="Constraint_Validation_API">フォーム検証 API</h4> +<p>次の DOM プロパティとメソッドにより、クライアントサイドのスクリプトから検証をかけることが可能です。</p> +<ul> <li><code><a href="/ja/DOM/HTMLFormElement" title="ja/DOM/HTMLFormElement">HTMLFormElement</a></code> オブジェクトの <code>checkValidity()</code> メソッドは、フォームが検証を通ったかそうでないかを返します。フォームに関連づけられた要素すべてが制約を満たす場合に <code>true</code> を、そうでない場合は <code>false</code> を返します。</li> <li><a href="/ja/HTML/Content_categories#form-associated" title="ja/HTML/Content_categories#form-associated">フォーム連携要素</a>に、次のプロパティとメソッドが用意されています。 <ul> <li><code>willValidate</code> プロパティは、要素が制約の設定対象ではない場合に <code>false</code> を返します。</li> <li><code>validity</code> プロパティは、要素の妥当性状態を表す <code><a href="/ja/DOM/ValidityState" title="ja/DOM/ValidityState">ValidityState</a></code> オブジェクトを返します。</li> <li><code>validationMessage</code> プロパティは、制約を満たせない場合その要素に関連するメッセージを返します。</li> <li><code>checkValidity()</code> メソッドは、その要素が制約を満たせない場合に <code>false</code> を、そうでない場合は <code>true</code> を返します。</li> <li><code>setCustomValidity()</code> メソッドは、独自の検証メッセージを設定します。このメソッドにより、定義済みのメッセージよりもさらに細かく制約について説明できます。</li> </ul> </li> +</ul> +<p>{{ languages({"en": "en/HTML/HTML5/Forms_in_HTML5"}) }}</p> +<p>{{ HTML5ArticleTOC() }}</p> diff --git a/files/ja/web/html/global_attributes/accesskey/index.html b/files/ja/web/html/global_attributes/accesskey/index.html new file mode 100644 index 0000000000..82a0381c30 --- /dev/null +++ b/files/ja/web/html/global_attributes/accesskey/index.html @@ -0,0 +1,142 @@ +--- +title: accesskey +slug: Web/HTML/Global_attributes/accesskey +tags: + - Global attributes + - HTML + - Reference + - accesskey + - グローバル属性 +translation_of: Web/HTML/Global_attributes/accesskey +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><code><strong>accesskey</strong></code> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>は、現在の要素のショートカットキーを生成するためのヒントを与えます。この属性は空白で区切った表示可能な文字 (キーボードから生成できるアクセント付き文字やその他の文字を含む) から成ります。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-accesskey.html","tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<div class="note"> +<p><strong>注</strong>: WHATWG の仕様書では、空白区切りの複数の文字を指定することができ、ブラウザーは対応する最初の一つを使用するとしています。しかし、これは多くのブラウザーでは動作しません。 IE や Edge は、他のコマンドと競合がない問題なく使用することができる最初の1つを使用します。</p> +</div> + +<p>アクセスキーを有効にする方法は、ブラウザーやプラットフォームによって異なります。</p> + +<table class="standard-table"> + <tbody> + <tr> + <th></th> + <th>Windows</th> + <th>Linux</th> + <th>Mac</th> + </tr> + <tr> + <th>Firefox</th> + <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd></td> + <td>Firefox 57 以降では <kbd>Control</kbd> + <kbd>Option</kbd> + <kbd><em>key</em></kbd> または <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd><br> + Firefox 14 以降では <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd><br> + Firefox 13 以前では <kbd>Control</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Internet Explorer</th> + <td rowspan="3" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>key</em></kbd><br> + <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd></td> + <td colspan="2" rowspan="1" style="text-align: center;">N/A</td> + </tr> + <tr> + <th>Edge</th> + <td style="text-align: center;">N/A</td> + <td rowspan="3" style="text-align: center;"><kbd>Control</kbd> + <kbd>Option</kbd> + <kbd><em>key</em></kbd><br> + <kbd>Control</kbd> + <kbd>Option</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Google Chrome</th> + <td style="text-align: center;"><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Safari</th> + <td colspan="2" style="text-align: center;">N/A</td> + </tr> + <tr> + <th>Opera 15+</th> + <td colspan="2" rowspan="1" style="text-align: center;"><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + <td style="text-align: center;"><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd></td> + </tr> + <tr> + <th>Opera 12</th> + <td colspan="3" rowspan="1"><kbd>Shift</kbd> + <kbd>Esc</kbd> で、accesskey でアクセスできるコンテンツの一覧を開きます。そして <kbd><em>key</em></kbd> を押すと、該当項目を選択できます。</td> + </tr> + </tbody> +</table> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> + +<p><code>accesskey</code> 属性は、ブラウザーの対応が貧弱であることに加え、数々の考慮事項があります。</p> + +<ul> + <li><code>accesskey</code> の値はシステムやブラウザーのショートカットキーや支援技術の機能と競合する可能性があります。あるオペレーティングシステム、支援技術、ブラウザーの組み合わせで動作しても、他の組み合わせでは動作しない可能性があります。</li> + <li>特に国際化を考慮している場合、特定の <code>accesskey</code> の値が特定のキーボードに存在しないことがあります。そのため、特定の言語において更なる問題が発生する可能性があります。</li> + <li>数字に依存した <code>accesskey</code> の値は、認知障碍を持つ人に混乱を招く可能性があります。数字には、起動する機能と論理的な関連性がありません。</li> + <li><code>accesskey</code> が存在することをユーザーに通知することで、ユーザーはその機能を認識します。システムがその機能について知らされる方法がない場合は、 <code>accesskey</code> が誤って有効になる可能性があります。</li> +</ul> + +<p>これらの問題のため、一般用途のウェブサイトやウェブアプリの多くでは、 <code>accesskey</code> を使用しないよう一般的にアドバイスされています。</p> + +<ul> + <li><a href="https://webaim.org/techniques/keyboard/accesskey#spec">WebAIM: Keyboard Accessibility - Accesskey</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML5.2', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5.2')}}</td> + <td>現実の実装のためにもっと現実的な振る舞いを記述。</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新の W3C の {{SpecName('HTML5.1')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML5 W3C')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>{{SpecName('HTML4.01')}} から <code>accesskey</code> に設定できる文字が増えました。また、任意の要素に設定できるようになりました。</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} and {{ HTMLElement("textarea") }} 要素のみ対応。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.accesskey")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Element.accessKey")}}</li> + <li>{{domxref("HTMLElement.accessKeyLabel")}}</li> + <li>すべての<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>。</li> + <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-keyshortcuts">aria-keyshortcuts</a></code></li> +</ul> diff --git a/files/ja/web/html/global_attributes/autocapitalize/index.html b/files/ja/web/html/global_attributes/autocapitalize/index.html new file mode 100644 index 0000000000..8085ba917c --- /dev/null +++ b/files/ja/web/html/global_attributes/autocapitalize/index.html @@ -0,0 +1,50 @@ +--- +title: autocapitalize +slug: Web/HTML/Global_attributes/autocapitalize +tags: + - Autocapitalize + - HTML + - Reference + - ウェブ + - グローバル属性 +translation_of: Web/HTML/Global_attributes/autocapitalize +--- +<p>{{HTMLSidebar("Global_attributes")}}</p> + +<p><span class="seoSummary"><strong><code>autocapitalize</code></strong> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>は列挙型の属性で、ユーザーによって入力／編集されたとき、入力文字列の先頭大文字化が自動的に行われるかどうか、どのように行われるかを制御します。</span>以下の値を指定することができます。</p> + +<ul> + <li><code>off</code> または <code>none</code>: 自動的な大文字化は適用されません (すべての文字は既定で小文字です)。</li> + <li><code>on</code> または <code>sentences</code>: 各文の最初の文字を既定で大文字にします。それ以外の文字は既定で小文字です。</li> + <li><code>words</code>: 各語の最初の文字を既定で大文字にします。それ以外の文字は既定で小文字です。</li> + <li><code>characters</code>: すべての文字は既定で大文字になります。</li> +</ul> + +<p><code>autocapitalize</code> 属性は、物理キーボードからの入力時の挙動には影響しません。モバイル端末の仮想キーボードや音声入力など、他の入力方式の挙動に影響します。その様な方式では、文の最初の文字を自動的に大文字化することでユーザーを補助することがよくあります。 <code>autocapitalize</code> 属性は要素単位の挙動を上書きすることができます。</p> + +<p><code>autocapitalize</code> 属性では、 {{HTMLElement("input")}} 要素の {{htmlattrxref("type", "input")}} の値が <code>url</code>, <code>email</code>, <code>password</code> の場合は自動大文字化が有効になりません。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#autocapitalization", "autocapitalize")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.autocapitalize")}}</p> diff --git a/files/ja/web/html/global_attributes/class/index.html b/files/ja/web/html/global_attributes/class/index.html new file mode 100644 index 0000000000..7700214254 --- /dev/null +++ b/files/ja/web/html/global_attributes/class/index.html @@ -0,0 +1,65 @@ +--- +title: class +slug: Web/HTML/Global_attributes/class +tags: + - HTML + - グローバル属性 + - リファレンス +translation_of: Web/HTML/Global_attributes/class +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><code><strong>class</strong></code> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a> は、要素のクラスを空白区切りで並べたリストで、大文字小文字を区別します。クラスは CSS の <a href="/ja/docs/Web/CSS/Class_selectors">クラスセレクター</a> や JavaScript の DOM メソッド {{domxref("document.getElementsByClassName")}} といった関数により、特定の要素を選択したり特定の要素にアクセスしたりすることを可能にします。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-class.html","tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>仕様書ではクラス名の要件を示していませんが、ウェブ開発者は要素の外見ではなく、意味論的な目的を表す名前を使用することが推奨されます。例えば、あるクラスの要素が<em>斜体</em>で表示されるとしても、クラス名は<em>斜体</em>であることではなく<em>特性</em>を表すようにします。意味論的な名前は、ページの外見を変更した場合でも論理的であり続けます。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "elements.html#classes", "class")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "elements.html#classes", "class")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショットであり、{{SpecName('HTML5 W3C')}} から変更はありません。</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "elements.html#classes", "class")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショット。<code>class</code> 属性は、{{SpecName('HTML4.01')}} よりも真にグローバルな属性になりました。</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>{{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, {{HTMLElement("title")}} 以外の要素で対応</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.class")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></li> + <li>{{domxref('element.className')}}</li> + <li>{{domxref('element.classList')}}</li> + <li><a href="/ja/docs/Learn/CSS/">CSS 入門</a></li> +</ul> diff --git a/files/ja/web/html/global_attributes/contenteditable/index.html b/files/ja/web/html/global_attributes/contenteditable/index.html new file mode 100644 index 0000000000..2159932d5a --- /dev/null +++ b/files/ja/web/html/global_attributes/contenteditable/index.html @@ -0,0 +1,83 @@ +--- +title: contenteditable +slug: Web/HTML/Global_attributes/contenteditable +tags: + - HTML + - contenteditable + - グローバル属性 + - テキスト編集 + - リファレンス +translation_of: Web/HTML/Global_attributes/contenteditable +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><strong><code>contenteditable</code></strong> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>は、ユーザーによる要素の編集が可能かを示す列挙型属性です。可能である場合、ブラウザーは要素のウィジェットを編集可能なものに変更します。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-contenteditable.html","tabbed-shorter")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<p>この属性は、以下の値のうち一つを取る必要があります。</p> + +<ul> + <li><code>true</code> または <em>空文字列</em>: 要素が編集可能であることを示す</li> + <li><code>false</code>: 要素が編集不可であることを示す</li> +</ul> + +<p>この属性が値なしで指定された場合、たとえば <code><label contenteditable>Example Label</label></code> のような場合、値は空文字列として扱われます。</p> + +<p>この属性が存在しないか、値が無効であった場合、値は親要素から<em>継承</em>されます。したがって、親が編集可能であればこの要素は編集可能になります。</p> + +<p>なお、許可されている値は <code>true</code> と <code>false</code> ですが、この属性は<em>列挙型</em>であり、<em>論理型</em>ではありません。</p> + +<p>{{Glossary("caret", "キャレット")}}の挿入文字列を描画するのに使用される色は、 {{cssxref("caret-color")}} プロパティで設定できます。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>最新のスナップショットである {{SpecName("HTML5.2")}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>{{SpecName("HTML WHATWG")}} のスナップショット、 {{SpecName("HTML5.1")}} から変更なし</td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>{{SpecName("HTML WHATWG")}} のスナップショット、 {{SpecName("HTML5 W3C")}} から変更なし</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "editing.html#attr-contenteditable", "contenteditable")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>{{SpecName("HTML WHATWG")}} のスナップショット、初回定義。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.contenteditable")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Guide/HTML/Editable_content">コンテンツを編集可能にする</a></li> + <li>すべての<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></li> + <li>{{domxref("HTMLElement.contentEditable")}} および {{domxref("HTMLElement.isContentEditable")}}</li> + <li>CSS の {{cssxref("caret-color")}} プロパティ</li> + <li><a href="/ja/docs/Web/API/HTMLElement/input_event"><code>HTMLElement</code> <code>input</code> イベント</a></li> +</ul> diff --git a/files/ja/web/html/global_attributes/contextmenu/index.html b/files/ja/web/html/global_attributes/contextmenu/index.html new file mode 100644 index 0000000000..a115fabfdf --- /dev/null +++ b/files/ja/web/html/global_attributes/contextmenu/index.html @@ -0,0 +1,122 @@ +--- +title: contextmenu +slug: Web/HTML/Global_attributes/contextmenu +tags: + - Deprecated + - Global attributes + - HTML + - Reference + - contextmenu +translation_of: Web/HTML/Global_attributes/contextmenu +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<div class="warning"> +<p><a href="https://html.spec.whatwg.org/multipage/obsolete.html#attr-contextmenu">contextmenu 属性は廃止</a>されており、今後、すべてのブラウザーから削除される予定です。</p> +</div> + +<p><code><strong>contextmenu</strong></code> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a> は、当該要素のコンテキストメニューとして使用する {{HTMLElement("menu")}} 要素の <a href="/ja/docs/Web/HTML/Global_attributes/id"><strong>id</strong></a> です。</p> + +<p><em>コンテキストメニュー</em>は、右クリックなどユーザーの操作によって現れます。 HTML5 ではこのメニューをカスタマイズできます。以下は入れ子のメニューを含む実装例です。</p> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="HTML" name="HTML">HTML</h3> + +<pre class="brush: html highlight:[1,10,15] notranslate"><body contextmenu="share"> + <menu type="context" id="share"> + <menu label="share"> + <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem> + <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem> + </menu> + </menu> + <ol> + <li> + この例のどこででも、コンテキストメニューの "share" メニューを使用して + Twitter や Facebook に、このページを共有できます。 + </li> + <li contextmenu="changeFont" id="fontSizing"> + このリスト項目で、コンテキストメニューの + "Increase/Decrease font" を使用してテキストのサイズを変更できます。 + </li> + <menu type="context" id="changeFont"> + <menuitem label="Increase Font" onclick="incFont()"></menuitem> + <menuitem label="Decrease Font" onclick="decFont()"></menuitem> + </menu> + <li contextmenu="ChangeImage" id="changeImage"> + 以下の画像で、コンテキストメニューから "Change Image" の + アクションを実行できます。<br /> + <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" + contextmenu="ChangeImage" id="promoButton" /> + <menu type="context" id="ChangeImage"> + <menuitem label="Change Image" onclick="changeImage()"></menuitem> + </menu> + </li> + </ol> +</body> +</pre> + +<h3 id="JavaScript" name="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">function shareViaTwitter() { + window.open("https://twitter.com/intent/tweet?text=" + + "Hurray! I am learning ContextMenu from MDN via Mozilla"); +} + +function shareViaFacebook() { + window.open("https://facebook.com/sharer/sharer.php?u=" + + "https://developer.mozilla.org/en/HTML/Element/Using_HTML_context_menus"); +} + +function incFont() { + document.getElementById("fontSizing").style.fontSize = "larger"; +} + +function decFont() { + document.getElementById("fontSizing").style.fontSize = "smaller"; +} + +function changeImage() { + var index = Math.ceil(Math.random() * 39 + 1); + document.images[0].src = + "https://developer.mozilla.org/media/img/promote/promobutton_mdn" + + index + ".png"; +}</pre> + +<h3 id="Result" name="Result">表示結果</h3> + +<p>{{EmbedLiveSample("Example", "100%", 400)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "interactive-elements.html#context-menus", "contextmenu")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>{{SpecName("HTML WHATWG")}} のスナップショットであり、初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.contextmenu")}}</p> + +<p>[1] コマンドラインオプション <code>--enable-blink-features=ContextMenu</code> を使用して、実験的な実装を使用できます。 Chrome 52 および Opera 39 までは<em>試験運用版のウェブプラットフォームの機能</em>フラグでも有効化できましたが、<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=412945">ウェブ互換性の問題</a> のために削除されました。この機能の対応は <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=87553">Chrome bug 87553</a> で要望されています。</p> + +<p>[2] Firefox モバイルから <code>contextmenu</code> 属性の対応が削除されました ({{bug(1424252)}})。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>。</li> + <li>{{domxref("HTMLElement.contextMenu")}}</li> +</ul> diff --git a/files/ja/web/html/global_attributes/data-_star_/index.html b/files/ja/web/html/global_attributes/data-_star_/index.html new file mode 100644 index 0000000000..93fbea85f6 --- /dev/null +++ b/files/ja/web/html/global_attributes/data-_star_/index.html @@ -0,0 +1,82 @@ +--- +title: data-* +slug: Web/HTML/Global_attributes/data-* +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/data-* +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><strong><code>data-*</code></strong> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a> は<strong>カスタムデータ属性</strong>と呼ばれる属性の組を作り、<a href="/ja/docs/Web/HTML" title="HTML">HTML</a> と、スクリプトによる <a href="/ja/docs/Web/API/Document_Object_Model" title="DOM">DOM</a> 表現との間で、固有の情報を交換できるようにします。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-data.html","tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>すべてのカスタムデータは、属性を設定した要素の {{domxref("HTMLElement")}} インターフェイスを通して使用できます。 {{domxref("HTMLElement.dataset")}} プロパティがそれらへのアクセス手段を提供します。<br> + <code>*</code> は、 <a href="http://www.w3.org/TR/REC-xml/#NT-Name" title="http://www.w3.org/TR/REC-xml/#NT-Name">XML 名の作成規則</a>に加えて以下の制約に従う名前に置き換えることができます。</p> + +<ul> + <li>大文字小文字にかかわらず、名前を <code>xml</code> で始めてはならない。</li> + <li>名前にセミコロン (<code>U+003A</code>) を含めてはならない。</li> + <li>名前に大文字を含めてはならない。</li> +</ul> + +<p>なお、 {{domxref("HTMLElement.dataset")}} プロパティは {{domxref("DOMStringMap")}} であり、またカスタムデータ属性名のハイフン (<code>U+002D</code>) はその次の文字を大文字化したもの (キャメルケース) に変換されるので、 <em>data-test-value</em> は <code>HTMLElement.dataset.testValue</code> (または <code>HTMLElement.dataset["<em>testValue</em>"]</code>) としてアクセスできます。</p> + +<h3 id="Usage" name="Usage">使用方法</h3> + +<p><code>data-*</code> 属性を追加すると通常の HTML 要素でも、より複雑で強力なプログラムオブジェクトになります。例えばゲームで宇宙船の "<a href="https://ja.wikipedia.org/wiki/%E3%82%B9%E3%83%97%E3%83%A9%E3%82%A4%E3%83%88_(%E6%98%A0%E5%83%8F%E6%8A%80%E8%A1%93)">スプライト</a><em>"</em> を、単純な {{HTMLElement("img")}} 要素に <a href="/ja/docs/Web/HTML/Global_attributes/class"><code>class</code></a> 属性といくつかの <code>data-*</code> 属性を設定したもので表すことができるでしょう。</p> + +<pre class="brush: html notranslate"><img class="spaceship cruiserX3" src="shipX3.png" + data-ship-id="324" data-weapons="laserI laserII" data-shields="72%" + data-x="414354" data-y="85160" data-z="31940" + onclick="spaceships[this.dataset.shipId].blasted()"> +</pre> + +<p>もっと深い HTML のデータ属性の使用については、<a href="/ja/docs/Learn/HTML/Howto/Use_data_attributes">データ属性の使用</a>を参照してください。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#element-attrdef-global-data", "data-*")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショット、 {{SpecName('HTML5 W3C')}} から変更なし</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#element-attrdef-global-data", "data-*")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショット、初回定義。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.data_attributes")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></li> + <li>これらの値を読み書きできる {{domxref("HTMLElement.dataset")}} プロパティ</li> + <li><a href="/ja/docs/Learn/HTML/Howto/Use_data_attributes">データ属性の使用</a></li> +</ul> diff --git a/files/ja/web/html/global_attributes/dir/index.html b/files/ja/web/html/global_attributes/dir/index.html new file mode 100644 index 0000000000..5eb464b651 --- /dev/null +++ b/files/ja/web/html/global_attributes/dir/index.html @@ -0,0 +1,93 @@ +--- +title: dir +slug: Web/HTML/Global_attributes/dir +tags: + - BiDi + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/dir +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><code><strong>dir</strong></code> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>は、要素のテキストの書字方向を示す列挙型属性です。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-dir.html","tabbed-standard")}}</div> + +<p class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<p>次の値を使用することができます。</p> + +<ul> + <li><code>ltr</code>: <em>left to right</em> を表し、左書きの言語 (英語など) に対して使用します。</li> + <li><code>rtl</code>: <em>right to left</em> を表し、右書きの言語 (アラビア語など) に対して使用します。</li> + <li><code>auto</code>: ユーザーエージェントに決定させます。書字方向が明確な文字が見つかるまで要素内の文字を解釈して、その方向を要素全体に適用する基本的なアルゴリズムを使用します。</li> +</ul> + +<div class="note"> +<p><strong>使用上の注意:</strong> この属性は、意味論的な位置づけが異なる場所を示す {{HTMLElement("bdo")}} 要素で必須です。</p> + +<ul> + <li> + <p>この属性は {{HTMLElement("bdi")}} 要素に<em>継承されません</em>。属性を設定しない場合の値は <code>auto</code> になります。</p> + </li> + <li> + <p>この属性は、 CSS の {{cssxref("direction")}} プロパティや {{cssxref("unicode-bidi")}} プロパティで上書きできます。ただし、 CSS が有効かつ要素がこれらのプロパティに対応する場合に限ります。</p> + </li> + <li> + <p>テキストの書字方向はその表示ではなく、内容に対して意味論的な関係がありますので、ウェブ開発者には、可能であれば関連する CSS プロパティの代わりにこの属性を使用することを推奨します。これにより、 CSS に対応しないブラウザーや CSS を無効化したブラウザーでもテキストが正しく表示されます。</p> + </li> + <li> + <p>値 <code>auto</code> は、ユーザーが入力して最終的にデータベースへ保存するデータなど、書字方向が不定のデータに対して使用してください。</p> + </li> +</ul> +</div> + +<div class="note"> +<p>ブラウザーではユーザーが {{ HTMLElement("input") }} や {{ HTMLElement("textarea") }} の書字方向を変更することを許可して、コンテンツの執筆を支援していることがあります。 Chrome と Safari は入力フィールドのコンテキストメニューに書字方向のオプションを提供している一方、 Internet Explorer と Edge はキーバインド <kbd>Ctrl</kbd> + <kbd>Left Shift</kbd> および <kbd>Ctrl</kbd> + <kbd>Right Shift</kbd> を使用します。 Firefox は <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>X</kbd> を使用しますが、 <code><strong>dir</strong></code> 属性の値は変更しません。</p> +</div> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-dir-attribute", "dir")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-dir-attribute", "dir")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショットであり、{{SpecName('HTML5 W3C')}} から変更はありません。</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-dir-attribute", "dir")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショットであり、{{SpecName('HTML4.01')}} の仕様に値 <code>auto</code> を追加、および真にグローバルな属性になりました。</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', "dirlang.html#h-8.2", "dir")}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>{{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}} を除くすべての要素で対応します。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.global_attributes.dir")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべて<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></li> + <li>{{domxref("HTMLElement.dir")}} は、この属性を反映します。</li> +</ul> diff --git a/files/ja/web/html/global_attributes/draggable/index.html b/files/ja/web/html/global_attributes/draggable/index.html new file mode 100644 index 0000000000..8b6996f5f0 --- /dev/null +++ b/files/ja/web/html/global_attributes/draggable/index.html @@ -0,0 +1,66 @@ +--- +title: draggable +slug: Web/HTML/Global_attributes/draggable +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/draggable +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><strong>draggable</strong> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a> は列挙型属性で、要素がブラウザーの本来の動作と <a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">HTML ドラッグ＆ドロップ API</a> のどちらの動作でドラッグするかを示す列挙型属性です。</span></p> + +<p><code>draggable</code> は以下の値を取ることができます。</p> + +<ul> + <li><code>true</code>: 要素がドラッグ可能であることを示す</li> + <li><code>false</code>: 要素はドラッグ不可であることを示す</li> +</ul> + +<div class="blockIndicator warning"> +<p>この属性は<em>列挙型</em>であり、<em>論理型</em>ではありません。 <code>true</code> または <code>false</code> の値が必須であり、 <code><img draggable></code> のような省略形は認められません。正しい使用法は <code><img draggable="false"></code> です。</p> +</div> + +<p>この属性が設定されなかった場合の既定値は <code>auto</code> であり、ブラウザーの既定のドラッグ動作であることを意味します。テキストの選択範囲、画像、リンクのみがドラッグ可能です。他の要素では、ドラッグ＆ドロップできるようにするためには {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} イベントを設定する必要があります (こちらの<a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations">包括的なサンプル</a>にあるように)。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "interaction.html#the-draggable-attribute", "draggable")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "interaction.html#the-draggable-attribute", "draggable")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>変更なし</td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "editing.html#the-draggable-attribute", "draggable")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショット、初回定義。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.draggable")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>。</li> +</ul> diff --git a/files/ja/web/html/global_attributes/dropzone/index.html b/files/ja/web/html/global_attributes/dropzone/index.html new file mode 100644 index 0000000000..290b577040 --- /dev/null +++ b/files/ja/web/html/global_attributes/dropzone/index.html @@ -0,0 +1,48 @@ +--- +title: dropzone +slug: Web/HTML/Global_attributes/dropzone +tags: + - Deprecated + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/dropzone +--- +<div>{{HTMLSidebar("Global_attributes")}}{{deprecated_header}}</div> + +<p><strong><code>dropzone</code></strong> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a> は、 <a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">HTML Drag and Drop API</a> を使用して要素上にどのようなコンテンツをドロップできるかを示す列挙型属性です。以下の値を使用できます。</p> + +<ul> + <li><code>copy</code>: ドロップにより、ドロップした要素のコピーを生成することを示す</li> + <li><code>move</code>: ドロップされた要素は新しい場所に移動されることを示す</li> + <li><code>link</code>: ドラッグしたデータへのリンクを生成する</li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショット、初回定義。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.dropzone")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>。</li> +</ul> diff --git a/files/ja/web/html/global_attributes/hidden/index.html b/files/ja/web/html/global_attributes/hidden/index.html new file mode 100644 index 0000000000..d44d89794e --- /dev/null +++ b/files/ja/web/html/global_attributes/hidden/index.html @@ -0,0 +1,71 @@ +--- +title: hidden +slug: Web/HTML/Global_attributes/hidden +tags: + - HTML + - Reference + - hidden + - グローバル属性 +translation_of: Web/HTML/Global_attributes/hidden +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><strong><code>hidden</code></strong> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a> は、要素はまだ、あるいはもはや<em>関連性</em>がないことを示す論理型属性です。例えば、ログインのプロセスが完了するまで使えない要素を隠すために使用できます。</span>ブラウザーは、 <code>hidden</code> 属性を設定している要素を表示しません。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-hidden.html","tabbed-shorter")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<p><code>hidden</code> 属性は、 1 つの表現方法からのみコンテンツを隠す目的で使用してはいけません。何かが hidden とマークされている場合、それは、例えば読み上げアプリを含むすべての表現方法から隠されます。</p> + +<p>隠された要素は隠されていない要素からリンクするべきではありません。隠された要素の子孫である要素はまだアクティブであり、スクリプト要素はまだ実行でき、フォーム要素はまだ送信できることを意味します。しかし、要素とスクリプトは、他の文脈で隠された要素を参照することがあります。</p> + +<p>例えば、 <code>href</code> 属性を使用して <code>hidden</code> 属性が設定された部分にリンクを張るのは不適切です。コンテンツが利用できないか無関係ならば、リンクする理由がないからです。</p> + +<p>しかし、 ARIA の <code>aria-describedby</code> 属性を使って隠された要素の記述を参照することは良いことです。記述を隠すことは、それ自身では役に立たないことを意味しますが、記述された要素から参照される特定の文脈に限っては有用であるように記述することができます。</p> + +<p>同様に、 canvas 要素に <code>hidden</code> 属性をつけたものはオフスクリーンバッファーとしてグラフィックエンジンを記述することができますし、フォーム制御では hidden のフォーム要素をフォーム属性を使用して参照することができます。</p> + +<div class="note"> +<p><strong>注:</strong> <code>hidden</code> 属性を持つ要素について、 CSS の {{cssxref("display")}} プロパティの値を変更すると、挙動を上書きします。例えば <code>display: flex</code> を設定した要素は、 <code>hidden</code> 属性が存在しても表示されます。</p> +</div> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>CSS による <code>hidden</code> 属性のデフォルトレンダリング方法の案を定義</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショットであり、この属性を初めて定義しました。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.hidden")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>。</li> + <li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute"><code>aria-hidden</code> 属性</a></li> +</ul> diff --git a/files/ja/web/html/global_attributes/id/index.html b/files/ja/web/html/global_attributes/id/index.html new file mode 100644 index 0000000000..3716797fc7 --- /dev/null +++ b/files/ja/web/html/global_attributes/id/index.html @@ -0,0 +1,74 @@ +--- +title: id +slug: Web/HTML/Global_attributes/id +tags: + - Global attributes + - HTML + - Reference + - Web + - id + - グローバル属性 +translation_of: Web/HTML/Global_attributes/id +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><strong><code>id</code> {{glossary("global attribute", "グローバル属性")}}</strong>は、文書全体で一意でなければならない識別子 (ID) を定義します。この属性の用途は、リンク (<a href="/ja/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#Fragment">フラグメント識別子</a>を使用)、スクリプト、スタイル ({{glossary("CSS")}} を使用) で要素を特定することです。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-id.html","tabbed-shorter")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<div class="blockIndicator warning"> +<p>この属性の値は不伝導性の文字列です。つまり、ウェブ作者は人間が理解するための情報を伝えるためにこの情報を使用するべきではありません (ただし、 ID を人間が理解できるようにすることは、コードを理解するために有用です。例えば、 <code>ticket-18659</code> と <code>r45tgfe-freds&$@</code> を比べてみてください)。</p> +</div> + +<p><code>id</code> の値に{{glossary("whitespace", "ホワイトスペース")}}文字 (空白やタブなど) を含めてはいけません。ブラウザーはホワイトスペース文字を含む不適合な ID を、ホワイトスペース文字が ID の一部であるかのように扱います。空白区切りで並べた値を受け入れる {{htmlattrxref("class")}} 属性とは対照的に、要素は ID の値をひとつだけ持つことができます。</p> + +<div class="note"> +<p><strong>注:</strong> {{glossary("ASCII")}} 英文字、数字、<code>'_'</code>、<code>'-'</code>、<code>'.'</code> 以外の文字は HTML 4 で許容されていなかったため、使用した場合に互換性の問題を引き起こす可能性があります。この制約は {{glossary("HTML5")}} で外されましたが、互換性のために ID は文字で始めるようにしましょう。</p> +</div> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショットであり、 {{SpecName('HTML5 W3C')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショットであり、先頭の文字以外で <code>'_'</code>、<code>'-'</code>、<code>'.'</code> が使用可能になった。また、真にグローバルな属性になった。</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>{{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, {{HTMLElement("title")}} を除くすべての要素で対応。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.id")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>。</li> + <li>{{domxref("Element.id")}} は、この属性を反映します。</li> +</ul> diff --git a/files/ja/web/html/global_attributes/index.html b/files/ja/web/html/global_attributes/index.html new file mode 100644 index 0000000000..182b6aeae6 --- /dev/null +++ b/files/ja/web/html/global_attributes/index.html @@ -0,0 +1,199 @@ +--- +title: グローバル属性 +slug: Web/HTML/Global_attributes +tags: + - Attribute + - HTML + - Reference + - Web +translation_of: Web/HTML/Global_attributes +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><strong>グローバル属性</strong>は、すべての HTML 要素で共通の属性です。すべての要素で使用できますが、要素によっては効果がないこともあります。</p> + +<p>グローバル属性は、<em>標準仕様で未定義の要素を含む</em> すべての <a href="/ja/docs/Web/HTML/Element">HTML 要素</a>で指定することができます。つまり、その要素を使用することで文書が HTML5 に準拠しなくなるような標準外の要素であっても、これらの属性は受け入れなければなりません。例えば <code><foo></code> は妥当な HTML 要素ではありませんが、 HTML5 準拠のブラウザーは <code><foo hidden>...</foo></code> とマークアップされたコンテンツを非表示にします。</p> + +<p>基本的な HTML グローバル属性に加えて、以下のグローバル属性も存在します。</p> + +<ul> + <li>{{HTMLAttrDef("xml:lang")}} と {{HTMLAttrDef("xml:base")}}。これらは XHTML 仕様から継承したもので非推奨ですが、互換性のために残されています。</li> + <li>アクセシビリティを向上するために使用する、複数の <strong><code><a href="/ja/docs/Web/Accessibility/ARIA">aria-*</a></code></strong> 属性。</li> + <li><a href="/ja/docs/Web/Guide/Events/Event_handlers">イベントハンドラー</a>属性: <strong><code>onabort</code></strong>, <strong><code>onautocomplete</code></strong>, <strong><code>onautocompleteerror</code></strong>, <strong><code>onblur</code></strong>, <strong><code>oncancel</code></strong>, <strong><code>oncanplay</code></strong>, <strong><code>oncanplaythrough</code></strong>, <strong><code>onchange</code></strong>, <strong><code>onclick</code></strong>, <strong><code>onclose</code></strong>, <strong><code>oncontextmenu</code></strong>, <strong><code>oncuechange</code></strong>, <strong><code>ondblclick</code></strong>, <strong><code>ondrag</code></strong>, <strong><code>ondragend</code></strong>, <strong><code>ondragenter</code></strong>, <strong><code>ondragexit</code></strong>, <strong><code>ondragleave</code></strong>, <strong><code>ondragover</code></strong>, <strong><code>ondragstart</code></strong>, <strong><code>ondrop</code></strong>, <strong><code>ondurationchange</code></strong>, <strong><code>onemptied</code></strong>, <strong><code>onended</code></strong>, <strong><code>onerror</code></strong>, <strong><code>onfocus</code></strong>, <strong><code>oninput</code></strong>, <strong><code>oninvalid</code></strong>, <strong><code>onkeydown</code></strong>, <strong><code>onkeypress</code></strong>, <strong><code>onkeyup</code></strong>, <strong><code>onload</code></strong>, <strong><code>onloadeddata</code></strong>, <strong><code>onloadedmetadata</code></strong>, <strong><code>onloadstart</code></strong>, <strong><code>onmousedown</code></strong>, <strong><code>onmouseenter</code></strong>, <strong><code>onmouseleave</code></strong>, <strong><code>onmousemove</code></strong>, <strong><code>onmouseout</code></strong>, <strong><code>onmouseover</code></strong>, <strong><code>onmouseup</code></strong>, <strong><code>onmousewheel</code></strong>, <strong><code>onpause</code></strong>, <strong><code>onplay</code></strong>, <strong><code>onplaying</code></strong>, <strong><code>onprogress</code></strong>, <strong><code>onratechange</code></strong>, <strong><code>onreset</code></strong>, <strong><code>onresize</code></strong>, <strong><code>onscroll</code></strong>, <strong><code>onseeked</code></strong>, <strong><code>onseeking</code></strong>, <strong><code>onselect</code></strong>, <strong><code>onshow</code></strong>, <strong><code>onsort</code></strong>, <strong><code>onstalled</code></strong>, <strong><code>onsubmit</code></strong>, <strong><code>onsuspend</code></strong>, <strong><code>ontimeupdate</code></strong>, <strong><code>ontoggle</code></strong>, <strong><code>onvolumechange</code></strong>, <strong><code>onwaiting</code></strong>。</li> +</ul> + +<h2 id="List_of_global_attributes" name="List_of_global_attributes">グローバル属性の一覧</h2> + +<dl> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/accesskey">{{HTMLAttrDef("accesskey")}}</a></dt> + <dd>現在の要素に対するキーボードショートカットを生成するヒントを与えます。この属性の値は、空白区切りの文字のリストです。ブラウザーは、この文字リストの中から、コンピューターのキーボードレイアウトに存在する最初の文字を使用します。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/autocapitalize">{{HTMLAttrDef("autocapitalize")}}</a></dt> + <dd>ユーザーが入力／編集したとき、入力文字列の大文字化を自動的に行うか、どこを大文字化するかを制御します。以下の値を指定することができます。 + <ul> + <li><code>off</code> または <code>none</code>: 自動的な大文字化は行いません (すべての文字は小文字のままです)。</li> + <li><code>on</code> または <code>sentences</code>: 各文の最初の文字を大文字にします。それ以外の文字は小文字のままです。</li> + <li><code>words</code>:各単語の最初の文字を大文字にします。それ以外の文字は小文字のままです。</li> + <li><code>characters</code>: すべての文字を大文字にします。</li> + </ul> + </dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/class">{{HTMLAttrDef("class")}}</a></dt> + <dd>要素のクラスの空白区切りリストです。 CSS の <a href="/ja/docs/Web/CSS/Class_selectors">クラスセレクター</a> や JavaScript の {{DOMxRef("Document.getElementsByClassName()")}} メソッドのような関数を使えば、特定の要素を選択したりアクセスしたりすることができます。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/contenteditable">{{HTMLAttrDef("contenteditable")}}</a></dt> + <dd>ユーザーによる要素の編集が可能かどうかを示す列挙型属性です。編集可能な場合、ブラウザーはその要素を編集可能なものに変更します。この属性の値は、以下のどちらかでなければなりません。 + <ul> + <li><code>true</code> または <em>空文字列</em>: 要素が編集可能であることを示す</li> + <li><code>false</code>: 要素は編集不可であることを示す</li> + </ul> + </dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/contextmenu">{{HTMLAttrDef("contextmenu")}}</a> {{Obsolete_Inline}}</dt> + <dd>その要素のコンテキストメニューとして使用する {{HTMLElement("menu")}} の <code><a href="#attr-id"><strong>id</strong></a></code> を指定します。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/data-*">{{HTMLAttrDef("data-*")}}</a></dt> + <dd>これらの属性はカスタムデータ属性と呼ばれており、 <a href="/ja/docs/Web/HTML">HTML</a> とその {{glossary("DOM")}} 表現との間で、固有の情報を交換できるようにします。すべてのカスタムデータは、その属性を設定した要素の {{DOMxRef("HTMLElement")}} インターフェイスを通して使用することができます。 {{DOMxRef("HTMLElement.dataset")}} プロパティでカスタムデータにアクセスできます。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/dir">{{HTMLAttrDef("dir")}}</a></dt> + <dd>要素のテキストの書字方向を示す、列挙型属性です。以下の値を使用することができます。 + <ul> + <li><code>ltr</code>: <em>left to right</em> を表し、左から右へ記述する言語 (日本語、英語など) に対して使用します。</li> + <li><code>rtl</code>: <em>right to left</em> を表し、右から左へ記述する言語 (アラビア語など) に対して使用します。</li> + <li><code>auto</code>: ユーザーエージェントに決定させます。要素の中の文字を、書字方向を強く決定する文字が見つかるまで解析し、その方向を要素全体に適用する基本的なアルゴリズムを使用します。</li> + </ul> + </dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/draggable">{{HTMLAttrDef("draggable")}}</a></dt> + <dd><a href="/ja/docs/DragDrop/Drag_and_Drop">Drag and Drop API</a> を使用して要素をドラッグすることができるかを示す列挙型属性です。以下の値を使用することができます。 + <ul> + <li><code>true</code>: 要素がドラッグ可能であることを示す</li> + <li><code>false</code>: 要素がドラッグ不可であることを示す</li> + </ul> + </dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/dropzone">{{HTMLAttrDef("dropzone")}}</a> {{deprecated_inline}}</dt> + <dd><a href="/ja/docs/DragDrop/Drag_and_Drop">Drag and Drop API</a> を使用して要素上にどのようなコンテンツをドロップできるかを示す列挙型属性です。以下の値を使用することができます。 + <ul> + <li><code>copy</code>: ドラッグした要素をドロップすることで、コピーを生成することを示す</li> + <li><code>move</code>: ドラッグした要素を新しい場所に移動することを示す</li> + <li><code>link</code>: ドラッグしたデータへのリンクを生成する</li> + </ul> + </dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/exportparts">{{HTMLAttrDef("exportparts")}}</a> {{Experimental_Inline}}</dt> + <dd>シャドウ部品を入れ子になったシャドウツリーから軽いツリーへ変換しながらエクスポートするために使用します。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/hidden">{{HTMLAttrDef("hidden")}}</a></dt> + <dd>要素はまだ、あるいはもはや<em>関連性</em>がないことを示す、論理属性です。例えば、ログイン処理が完了するまで使えない要素を隠すために使用できます。ブラウザーはこの要素を表示しません。この属性は、表示することが正当なコンテンツを隠すために使用してはいけません。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/id">{{HTMLAttrDef("id")}}</a></dt> + <dd>文書全体で一意でなければならない識別子 (ID) を定義します。(フラグメント識別子を使った) リンク、スクリプト、 (CSS での) スタイルづけなど要素を特定するために使用されます。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/inputmode">{{HTMLAttrDef("inputmode")}}</a></dt> + <dd>この要素やその内容を編集する時に使用する仮想キーボードの種類の構成に関するヒントをブラウザーに与えます。主に {{HTMLElement("input")}} 要素で使用されますが、 {{htmlattrxref("contenteditable")}} モードにあるすべての要素で使用することができます。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/is">{{HTMLAttrDef("is")}}</a></dt> + <dd>標準の HTML 要素が、登録したカスタム内蔵要素のようにふるまうように指定できます（詳しくは<a href="/ja/docs/Web/Web_Components/Using_custom_elements">カスタム要素の使用</a>を参照）。</dd> +</dl> + +<div class="note"> +<p><strong>注:</strong> <code>item*</code> 属性は、 <a class="external" href="https://html.spec.whatwg.org/multipage/microdata.html#microdata">WHATWG HTML Microdata 機能</a>の一部です。</p> +</div> + +<dl> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/itemid">{{HTMLAttrDef("itemid")}}</a></dt> + <dd>項目の一意でグローバルな識別子です。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/itemprop">{{HTMLAttrDef("itemprop")}}</a></dt> + <dd>項目にプロパティを追加するために使用します。すべての HTML 要素で <code>itemprop</code> 属性を指定することができ、この <code>itemprop</code> は名前と値の組で構成されます。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/itemref">{{HTMLAttrDef("itemref")}}</a></dt> + <dd><code>itemscope</code> 属性を持つ要素の子孫以外のプロパティは、 <code>itemref</code> を使用して項目に関連付けることができます。文書中の他の場所で追加のプロパティがある要素の id (<code>itemid</code> ではない) の一覧を提供します。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/itemscope">{{HTMLAttrDef("itemscope")}}</a></dt> + <dd><code>itemscope</code> は (通常) {{htmlattrxref("itemtype")}} とともに、ブロックに含まれている HTML が特定の項目に関するものであることを指定します。 <code>itemscope</code> は項目を作成し、それに関連付けられる <code>itemtype</code> のスコープを定義します。 <code>itemtype</code> は、項目やそのプロパティの文脈を説明するボキャブラリー (<a class="external external-icon" href="https://schema.org/">schema.org</a> など) の有効な URL です。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/itemtype">{{HTMLAttrDef("itemtype")}}</a></dt> + <dd>データ構造内の <code>itemprop</code> （項目のプロパティ）を定義するために使う、ボキャブラリーの URL を指定します。 {{htmlattrxref("itemscope")}} は、 <code>itemtype</code> で設定したボキャブラリーがデータ構造内でアクティブになるスコープを設定するために使用します。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/lang">{{HTMLAttrDef("lang")}}</a></dt> + <dd>要素の言語を定義します。編集不可能な要素を記述している言語、または編集可能な要素に記述されるべき言語を定義します。この属性の値は、 <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a> で定義された形式の「言語タグ」（ハイフン区切りの「言語サブタグ」列）です。<a href="#attr-xml:lang"><strong>xml:lang</strong></a> はこの要素より優先します。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/part">{{HTMLAttrDef("part")}}</a></dt> + <dd>要素のパート名の空白区切りによるリストです。パート名を利用すると、 CSS がシャドウツリー内にある特定の要素を {{CSSxRef("::part")}} 擬似要素を使用することで選択し、スタイル付けすることができます。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/slot">{{HTMLAttrDef("slot")}}</a></dt> + <dd><a href="/ja/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> のシャドウツリー内のスロットを、要素に割り当てます。<code>slot</code> 属性を持つ要素は、<code>slot</code> 属性の値と一致する {{htmlattrxref("name", "slot")}} 属性の値を持つ {{HTMLElement("slot")}} 要素が生成したスロットに割り当てられます。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/spellcheck">{{HTMLAttrDef("spellcheck")}}</a></dt> + <dd>要素でスペルチェックを行うかどうかを定義する、列挙型属性です。以下の値が使えます: + <ul> + <li><code>true</code>: 可能であればその要素でスペルチェックを行うことを示す</li> + <li><code>false</code>: その要素でスペルチェックを行わないことを示す</li> + </ul> + </dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/style">{{HTMLAttrDef("style")}}</a></dt> + <dd>要素に適用する <a href="/ja/docs/Web/CSS">CSS</a> スタイル宣言を設定します。なお、スタイルは別のファイルで定義することが推奨されます。この属性と {{HTMLElement("style")}} 要素の主な用途は、例えばテストのために、すばやくスタイルを適用することです。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/tabindex">{{HTMLAttrDef("tabindex")}}</a></dt> + <dd>要素が入力フォーカスを受け付ける (<em>focusable</em>) 場合に、順番的なキーボードナビゲーションに参加するかどうか、参加するならばどの位置に入るかを示す、整数値属性です。いくつかの値を取ることができます。 + <ul> + <li><em>負数</em>: 要素はフォーカスを受け付けますが、順番的なキーボードナビゲーションでは到達できません。</li> + <li><code>0</code>: 要素はフォーカスを受け付けて、順番的なキーボードナビゲーションで到達できます。その順番はプラットフォームの慣習に従って定義されます。</li> + <li><em>正数</em>: 要素はフォーカスを受け付けて、順番的なキーボードナビゲーションで到達できることを表します。その相対的な順序は属性の値で定義され、 <a href="#attr-tabindex"><strong>tabindex</strong></a> の数値の昇順にフォーカスを移します。複数の要素が同じ tabindex の値を持っている場合は、文書内における要素の相対的な位置に従います。</li> + </ul> + </dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/title">{{HTMLAttrDef("title")}}</a></dt> + <dd>要素に関するアドバイザリー情報を表すテキストを設定します。この情報は通常、ツールチップとしてユーザーに表示されますが、必ず表示されるとは限りません。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes/translate">{{htmlattrdef("translate")}}</a> {{Experimental_Inline}}</dt> + <dd>要素の属性値や子孫 {{DOMxRef("Text")}} ノードの値が、ページをローカライズするときに翻訳対象となるか、あるいは変更せずにおくかを指定する、列挙型属性です。以下の値を使用することができます。 + <ul> + <li>空文字列または <code>yes</code>: 要素が翻訳対象になることを示します。</li> + <li><code>no</code>: 要素が翻訳対象にならないことを示します。</li> + </ul> + </dd> +</dl> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS Shadow Parts", "#exposing")}}</td> + <td>{{Spec2("CSS Shadow Parts")}}</td> + <td><code>part</code> および <code>exportparts</code> の各グローバル属性を追加。・</td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>{{SpecName("HTML WHATWG")}} のスナップショット。 {{SpecName("HTML5.1")}} に <code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code>, <code>itemtype</code> を追加。</td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>{{SpecName("HTML WHATWG")}} のスナップショット。 {{SpecName("HTML5 W3C")}} に <code>spellcheck</code>, <code>draggable</code>, <code>dropzone</code>, <code>spellcheck</code> を追加。</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td>{{SpecName("HTML WHATWG")}} のスナップショット。 {{SpecName("HTML4.01")}} に、グローバル属性の概念を導入し、 <code>dir</code>, <code>lang</code>, <code>style</code>, <code>id</code>, <code>class</code>, <code>tabindex</code>, <code>accesskey</code>, <code>title</code> が真にグローバルな属性になった。<br> + 当初は XHTML の一部であった <code>xml:lang</code> が、HTML に組み込まれた。<br> + <code>hidden</code>, <code>data-*</code>, <code>contenteditable</code>, <code>translate</code> を追加。</td> + </tr> + <tr> + <td>{{SpecName("HTML4.01")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td>グローバル属性の定義なし。後の仕様書でグローバル属性になるいくつかの属性を、要素のサブセットで定義。<br> + <code>class</code> および <code>style</code> は、次の要素を除くすべての要素で対応しています。 {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, {{HTMLElement("title")}}<br> + <code>dir</code> は、次の要素を除くすべての要素で対応しています。 {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}<br> + <code>id</code> は、次の要素を除くすべての要素で対応しています。 {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, {{HTMLElement("title")}}<br> + <code>lang</code> は、次の要素を除くすべての要素で対応しています。 {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}}<br> + <code>tabindex</code> は、次の要素のみで対応しています。 {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}<br> + <code>accesskey</code> は、次の要素のみで対応しています。 {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} and {{HTMLElement("textarea")}}<br> + <code>title</code> は、次の要素を除くすべての要素で対応しています。 {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, and {{HTMLElement("title")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{DOMxRef("Element")}} および {{DOMxRef("GlobalEventHandlers")}} インターフェイスで、ほとんどのグローバル属性を調べることができます。</li> +</ul> diff --git a/files/ja/web/html/global_attributes/inputmode/index.html b/files/ja/web/html/global_attributes/inputmode/index.html new file mode 100644 index 0000000000..4dd2709789 --- /dev/null +++ b/files/ja/web/html/global_attributes/inputmode/index.html @@ -0,0 +1,72 @@ +--- +title: inputmode +slug: Web/HTML/Global_attributes/inputmode +tags: + - Attribute + - Editing + - Forms + - Global attributes + - HTML + - Input + - Reference + - Text + - Web + - contenteditable + - global + - inputmode + - text input +translation_of: Web/HTML/Global_attributes/inputmode +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><strong><code>inputmode</code></strong> は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>で、ユーザーが要素やその内容を編集する際に入力されるデータの型のヒントとなる列挙型属性です。</span>下記の値が存在します。</p> + +<dl> + <dt><code>none</code></dt> + <dd>仮想キーボードなし。ページが独自のキーボード入力を実装している場合のためのものです。</dd> + <dt><code>text</code> (既定値)</dt> + <dd>ユーザーの現在のロケールにおける標準的な入力キーボードです。</dd> + <dt><code>decimal</code></dt> + <dd>実数を入力するキーボードで、数字とユーザーのロケール上で適切な区切り文字 (ふつうは <kbd>.</kbd> または <kbd>,</kbd>) を含みます。負号キー (<kbd>-</kbd>) を表示するかどうかは端末によります。</dd> + <dt><code>numeric</code></dt> + <dd>数字を入力するキーボードですが、数字の 0 から 9 までのみを必要とするものです。負号キーを表示するかどうかは端末によります。</dd> + <dt><code>tel</code></dt> + <dd>電話番号を入力するテンキーで、 0 から 9 までの数字と、アスタリスク (<kbd>*</kbd>)、シャープ (<kbd>#</kbd>) キーがあります。電話番号を<em>要求する</em>入力欄は、ふつうは代わりに <code>{{HTMLElement("input/tel", '<input type="tel">')}}</code> を使用してください。</dd> + <dt><code>search</code></dt> + <dd>検索入力に最適化された仮想キーボードです。例えば、 <a href="https://html.spec.whatwg.org/dev/interaction.html#input-modalities:-the-enterkeyhint-attribute">return/submit</a> キーのラベルが「検索」になっていたり、他の最適化が行われている可能性もあります。検索クエリを<em>要求する</em>入力欄は、ふつうは代わりに <code>{{HTMLElement("input/search", '<input type="search">')}}</code> を使用してください。</dd> + <dt><code>email</code></dt> + <dd>電子メールアドレスの入力に最適化された仮想キーボードです。ふつう <kbd>@</kbd> の文字を含むなどの他の最適化が行われます。メールアドレスの入力を<em>要求する</em>入力欄は、ふつうは代わりに <code>{{HTMLElement("input/email", '<input type="email">')}}</code> を使用してください。</dd> + <dt><code>url</code></dt> + <dd>URL の入力に最適化された仮想キーボードです。例えば <kbd>/</kbd> キーが目立つ場所に配置されているなどです。履歴へのアクセス機能などの拡張機能が含まれている場合もあります。 URL の入力を<em>要求する</em>入力欄は、ふつうは代わりに <code>{{HTMLElement("input/url", '<input type="url">')}}</code> を使用してください。</dd> +</dl> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "interaction.html#input-modalities:-the-inputmode-attribute", "inputmode")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.inputmode")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>一覧</li> +</ul> diff --git a/files/ja/web/html/global_attributes/is/index.html b/files/ja/web/html/global_attributes/is/index.html new file mode 100644 index 0000000000..642dd49c0c --- /dev/null +++ b/files/ja/web/html/global_attributes/is/index.html @@ -0,0 +1,67 @@ +--- +title: is +slug: Web/HTML/Global_attributes/is +tags: + - Global attributes + - HTML + - Reference + - is +translation_of: Web/HTML/Global_attributes/is +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><strong><code>is</code></strong> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>で、標準の HTML 要素が定義されたカスタム内蔵要素のように振舞うよう指定することができます (詳しくは <a href="/ja/docs/Web/Web_Components/Using_custom_elements">カスタム要素の使用</a> を参照してください)。</span></p> + +<p>この属性は、指定されたカスタム要素名が現在の文書で正常に<a href="/ja/docs/Web/API/CustomElementRegistry/define">定義され</a>、適用されている要素型が拡張されている場合にのみ使用します。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>次のコードは、 <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a> の例から取得されたものです (<a href="https://mdn.github.io/web-components-examples/word-count-web-component/">ライブで参照</a>)。</p> + +<pre class="brush: js notranslate">// 要素のクラスを作成 +class WordCount extends HTMLParagraphElement { + constructor() { + // Always call super first in constructor + super(); + + // Constructor contents ommitted for brevity + ... + + } +} + +// 新しい要素を定義 +customElements.define('word-count', WordCount, { extends: 'p' });</pre> + +<pre class="brush: html notranslate"><p is="word-count"></p></pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "custom-elements.html#attr-is", "is")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.is")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>。</li> +</ul> diff --git a/files/ja/web/html/global_attributes/itemid/index.html b/files/ja/web/html/global_attributes/itemid/index.html new file mode 100644 index 0000000000..2638724527 --- /dev/null +++ b/files/ja/web/html/global_attributes/itemid/index.html @@ -0,0 +1,107 @@ +--- +title: itemid +slug: Web/HTML/Global_attributes/itemid +tags: + - HTML + - HTML マイクロデータ + - Reference + - itemid + - グローバル属性 + - マイクロデータ + - 属性 +translation_of: Web/HTML/Global_attributes/itemid +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><code><strong>itemid</strong></code> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>は、項目の固有でグローバルな識別子の形でマイクロデータを提供します。</span> <code>itemid</code> 属性は、 {{htmlattrxref("itemscope")}} および {{htmlattrxref("itemtype")}} 属性のある要素にだけ指定することができます。また <code>itemid</code> は、グローバル識別子に対応する語彙を参照または定義する <code>itemtype</code> に関係した <code>itemscope</code> 属性を持つ要素でのみ使用することができます。</p> + +<p><code>itemtype</code> のグローバル識別子の正確な意味は、それを特定する語彙の中で識別子の定義が提供されます。語彙は同じグローバル識別子を持つ複数の項目が共存できるかどうか、もしそうであれば、同じ識別子を持つ項目がどのように扱われるかを定義します。</p> + +<p class="note"><strong>注:</strong> {{glossary("WHATWG")}} の定義では、 <code>itemid</code> が {{glossary("URL")}} でなければならないと指定しています。しかし、以下の例では {{glossary("URN")}} も使用されることを明らかに示しています。この矛盾はマイクロデータ仕様の不完全性を反映したものかもしれません。</p> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><dl itemscope + itemtype="http://vocab.example.net/book" + itemid="urn:isbn:0-330-34032-8"> +<dt>Title <dd itemprop="title">The Reality Dysfunction +<dt>Author <dd itemprop="author">Peter F. Hamilton +<dt>Publication date +<dd><time itemprop="pubdate" datetime="1996-01-26">26 January 1996</time> </dl></pre> + +<h3 id="Structured_data" name="Structured_data">構造化データ</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="14">itemscope</td> + <td>itemtype: itemid</td> + <td colspan="2" rowspan="1"> + <div class="jyrRxf-eEDwDf jcd3Mb IZ65Hb-hUbt4d">http://vocab.example.net/book: urn:isbn:0-330-34032-8</div> + </td> + </tr> + <tr> + <td>itemprop</td> + <td>title</td> + <td>The Reality Dysfunction</td> + </tr> + <tr> + <td>itemprop</td> + <td>author</td> + <td> + <div class="jyrRxf-eEDwDf jcd3Mb">Peter F. Hamilton</div> + </td> + </tr> + <tr> + <td>itemprop</td> + <td>pubdate</td> + <td>1996-01-26</td> + </tr> + </tbody> +</table> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample('HTML', '', '', '', 'Web/HTML/Global_attributes/itemid')}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemid", "itemid")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.itemid")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての<a href="/ja/docs/Web/HTML/Global_attributes">他のグローバル属性</a></li> + <li>マイクロデータに関連する他のグローバル属性 + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> diff --git a/files/ja/web/html/global_attributes/itemprop/index.html b/files/ja/web/html/global_attributes/itemprop/index.html new file mode 100644 index 0000000000..7efdec34b5 --- /dev/null +++ b/files/ja/web/html/global_attributes/itemprop/index.html @@ -0,0 +1,475 @@ +--- +title: itemprop +slug: Web/HTML/Global_attributes/itemprop +tags: + - HTML + - HTML マイクロデータ + - Reference + - グローバル属性 + - マイクロデータ + - 属性 +translation_of: Web/HTML/Global_attributes/itemprop +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><code><strong>itemprop</strong></code> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>は、アイテムにプロパティを追加するために使用します。すべての HTML 要素に <code>itemprop</code> 属性を設定することができ、 <code>itemprop</code> は名前と値の組み合わせで構成されます。名前と値の組み合わせは<strong>プロパティ</strong>と呼ばれ、1つまたは複数のプロパティで<strong>アイテム</strong>を構成します。プロパティ値は文字列又は URL のどちらかで、 {{HTMLElement("audio")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("object")}}, {{HTMLElement("source")}} , {{HTMLElement("track")}}, {{HTMLElement("video")}} など、広範にわたる要素と関連付けすることができます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>以下の例は <code>itemprop</code> 属性でマークアップされた要素のセットのソースと、その後で結果の構造化データを表す表を示します。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div itemscope itemtype="http://schema.org/Movie"> + <h1 <strong>itemprop="name"</strong>>Avatar</h1> + <span>Director: + <span <strong>itemprop="director"</strong>>James Cameron</span> + (born August 16, 1954)</span> + <span <strong>itemprop="genre"</strong>>Science fiction</span> + <a href="../movies/avatar-theatrical-trailer.html" + <strong>itemprop="trailer"</strong>>Trailer</a> +</div></pre> + +<h3 id="Structured_data" name="Structured_data">構造化データ</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="2"></td> + <th colspan="2" rowspan="1"><strong>Item</strong></th> + </tr> + <tr> + <th><strong>itemprop name</strong></th> + <th><strong>itemprop value</strong></th> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Avatar</td> + </tr> + <tr> + <td>itemprop</td> + <td>director</td> + <td>James Cameron</td> + </tr> + <tr> + <td>itemprop</td> + <td>genre</td> + <td>Science fiction</td> + </tr> + <tr> + <td>itemprop</td> + <td>trailer</td> + <td>../movies/avatar-theatrical-trailer.html</td> + </tr> + </tbody> +</table> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<p>プロパティは、文字列か URL のどちらかの形で値を持ちます。文字列の値が URL である場合、 {{HTMLElement("a")}} 要素とその {{htmlattrxref("href", "a")}} 属性、 {{HTMLElement("img")}} 要素とその {{htmlattrxref("src", "img")}} 属性、または外部リソースにリンクしたり埋め込んだりするその他の要素を用いて表現されます。</p> + +<h3 id="Three_properties_with_values_that_are_strings" name="Three_properties_with_values_that_are_strings">文字列の値を持つ3つのプロパティ</h3> + +<pre class="brush: html"><div itemscope> + <p>My name is + <span itemprop="name">Neil</span>.</p> + <p>My band is called + <span itemprop="band">Four Parts Water</span>.</p> + <p>I am + <span itemprop="nationality">British</span>.</p> +</div></pre> + +<h3 id="One_property_image_whose_value_is_a_URL" name="One_property_image_whose_value_is_a_URL">値が URL である "image" による1つのプロパティ</h3> + +<pre class="brush: html"><div itemscope> + <img itemprop="image" + src="google-logo.png" alt="Google"> +</div></pre> + +<p>文字列の値が人間にとって読んだり理解したりするのが簡単ではない場合（例えば、数字や文字による長い文字列）、 data 要素の中身にもっと人間理解しやすいもの（これは構造化データの一部ではありません。―以下の例を参照）を入れた上で、 value 属性を使用して表現することができます。</p> + +<h3 id="An_item_with_a_property_whose_value_is_a_product_ID" name="An_item_with_a_property_whose_value_is_a_product_ID">値がプロダクト ID であるプロパティがあるアイテム</h3> + +<p>ID が人間にとって読みやすくない場合、 ID の代わりに製品名が人間から見える文字列になります。</p> + +<pre class="brush: html"><h1 itemscope> + <data itemprop="product-id" + value="9678AOU879">The Instigator 2000</data> +</h1></pre> + +<p>数値データの場合、 meter 要素とその value 属性を使用することができます。</p> + +<h3 id="A_meter_element" name="A_meter_element">meter 要素</h3> + +<pre class="brush: html"><div itemscope itemtype="http://schema.org/Product"> + <span itemprop="name">Panasonic White + 60L Refrigerator</span> + <img src="panasonic-fridge-60l-white.jpg" alt=""> + <div itemprop="aggregateRating" + itemscope + itemtype="http://schema.org/AggregateRating"> + <meter itemprop="ratingValue" + min=0 value=3.5 max=5>Rated 3.5/5</meter> + (based on <span + itemprop="reviewCount">11</span> + customer reviews) + </div> +</div></pre> + +<p>同様に、日付や時間に関連するデータについては、 time 要素と datetime 属性を使用することができます。</p> + +<h3 id="An_item_with_one_property_birthday_whose_value_is_a_date" name="An_item_with_one_property_birthday_whose_value_is_a_date">値が日付であるプロパティ、 "birthday" を1つだけ持つアイテム</h3> + +<pre class="brush: html"><div itemscope> + I was born on <time + itemprop="birthday" + datetime="2009-05-10">May 10th 2009</time>. +</div></pre> + +<p>プロパティはまた、プロパティを宣言する要素で itemscope 属性を置くことによって、名前と値の組のグループを持つことができます。それぞれの値は、文字列か名前と値の組（すなわちアイテム）のグループのいずれかです。</p> + +<h3 id="An_outer_item_representing_a_person_and_an_inner_one_representing_a_band" name="An_outer_item_representing_a_person_and_an_inner_one_representing_a_band">外側のアイテムは人物を表し、内側のアイテムはバンドを表す</h3> + +<pre class="brush: html"><div itemscope> + <p>Name: + <span itemprop="name">Amanda</span></p> + <p>Band: + <span itemprop="band" itemscope> + <span itemprop="name">Jazz Band</span> + (<span itemprop="size">12</span> + players)</span></p> +</div></pre> + +<p>上の外側のアイテムは、 "name" と "band" の2つのプロパティを持ちます。 "name" は "Amanda" であり、 "band" はそれ自身がアイテムであり、2つのプロパティ "name" と "size" を持ちます。バンドの "name" は "Jazz Band" であり、 "size" は "12" です。この例における外側のアイテムは、トップレベルのマイクロデータアイテムです。他の一部でないアイテムは、トップレベルマイクロデータアイテムと呼ばれます。</p> + +<h3 id="All_the_properties_separated_from_their_items" name="All_the_properties_separated_from_their_items">プロパティがすべてアイテムから分離された例</h3> + +<p>この例は前のものと同じですが、すべてのプロパティがアイテムから分離されています。</p> + +<pre class="brush: html"><div itemscope id="amanda" itemref="a b"></div> +<p id="a">Name: + <span itemprop="name">Amanda</span></p> +<div id="b" + itemprop="band" + itemscope itemref="c"></div> +<div id="c"> + <p>Band: + <span itemprop="name">Jazz Band</span></p> + <p>Size: + <span itemprop="size">12</span> players</p> +</div></pre> + +<p>これは1つ前の例と同じ結果になります。最初のアイテムは2つのプロパティを持ちます、 "name" は "Amanda" に設定され、 "band" はもう1つのアイテムに設定されます。2つ目のアイテムはさらに2つのプロパティを持ち、 "name" は "Jazz Band" に設定され、 "size" は "12" に設定されます。</p> + +<p>アイテムは同じ名前で異なる値をもつ複数のプロパティを持つことができます。</p> + +<h3 id="Ice_cream_with_two_flavors" name="Ice_cream_with_two_flavors">2つの味のアイスクリーム</h3> + +<pre class="brush: html"><div itemscope> + <p>Flavors in my favorite ice cream:</p> + <ul> + <li itemprop="flavor">Lemon sorbet</li> + <li itemprop="flavor">Apricot sorbet</li> + </ul> +</div></pre> + +<p>この結果は2つのプロパティを持つアイテムになり、どちらも名前は "flavor" で、値は "Lemon sorbet" および "Apricot sorbet" になります。</p> + +<p>プロパティを導入する要素は、複数のプロパティが同じ値を持つ場合に重複を避けるために、一度に複数のプロパティを導入することもできます。</p> + +<h3 id="An_item_with_two_properties_favorite-color_and_favorite-fruit_both_set_to_the_value_orange" name='="An_item_with_two_properties_favorite-color_and_favorite-fruit_both_set_to_the_value_orange"'>2つのプロパティ "favorite-color" 及び "favorite-fruit" を持ち、どちらも "orange" の値に設定されるアイテム</h3> + +<pre class="brush: html"><div itemscope> + <span + itemprop="favorite-color + favorite-fruit">orange</span> +</div></pre> + +<div class="note"> +<p>メモ: マイクロデータとマイクロデータがマークアップされる文書のコンテンツに関係はありません。</p> +</div> + +<h3 id="Same_structured_data_marked_up_in_two_different_ways" name="Same_structured_data_marked_up_in_two_different_ways">2つの異なる方法でマークアップされた同じ構造化データ</h3> + +<p id="There_is_no_semantic_difference_between_the_following_two_examples">以下の2つの例には意味的な違いはありません。</p> + +<pre class="brush: html"><figure> + <img src="castle.jpeg"> + <figcaption><span + itemscope><span + itemprop="name">The Castle</span></span> + (1986)</figcaption> +</figure></pre> + +<pre class="brush: html"><span itemscope><meta + itemprop="name" + content="The Castle"></span> +<figure> + <img src="castle.jpeg"> + <figcaption>The Castle + (1986)</figcaption> +</figure></pre> + +<p>どちらも caption を伴う figure を持ち、両者とも、 figure に完全に関連しない、名前 "name" と値 "The Castle" をもつ名前と値の組を持つアイテムを持ちます。唯一の違いは、ユーザーが文書の外に figcaption をドラッグする場合、アイテムがドラッグ＆ドロップデータに含まれることです。アイテムに関連付けられる画像は含まれません。</p> + +<h2 id="Names_and_values" name="Names_and_values">名前と値</h2> + +<p>プロパティは、大文字・小文字を区別して名前と値の組を表す一意なトークンの順序なしセットです。下記の例で、それぞれのデータセルはトークンです。</p> + +<h3 id="Names_examples" name="Names_examples">名前の例</h3> + +<table class="standard-table"> + <thead> + <tr> + <th colspan="1" rowspan="2" scope="col"></th> + <th colspan="2" rowspan="1" scope="col">Item</th> + </tr> + <tr> + <th scope="col">itemprop <strong>name</strong></th> + <th scope="col">itemprop <strong>value</strong></th> + </tr> + </thead> + <tbody> + <tr> + <th>itemprop</th> + <td>country</td> + <td>Ireland</td> + </tr> + <tr> + <th>itemprop</th> + <td>Option</td> + <td>2</td> + </tr> + <tr> + <th>itemprop</th> + <td>https://www.flickr.com/photos/nlireland/6992065114/</td> + <td>Ring of Kerry</td> + </tr> + <tr> + <th>itemprop</th> + <td>img</td> + <td>https://www.flickr.com/photos/nlireland/6992065114/</td> + </tr> + <tr> + <th>itemprop</th> + <td>website</td> + <td>flickr</td> + </tr> + <tr> + <th>itemprop</th> + <td>(token)</td> + <td>(token)</td> + </tr> + </tbody> +</table> + +<p><strong>トークン</strong>は、文字列か URL のいずれかです。アイテムは、 URL の場合に<strong>型付きアイテム</strong>と呼ばれます。そうでなければ文字列です。文字列は、ピリオドまたはコロンを含むことができません (下記参照)。</p> + +<ol> + <li>アイテムが型付きアイテムの場合、次のいずれかでなければなりません。 + <ol> + <li>定義されたプロパティ名。</li> + <li>または、妥当な URL。これは、語彙定義を参照します。</li> + <li>独自のアイテムプロパティ名を表す妥当な URL (つまり、公式な私用で定義されていないもの)。</li> + </ol> + </li> + <li>アイテムが型付きアイテムでない場合は、次のようになります。 + <ol> + <li>"<code>.</code>" (U+002E FULL STOP)文字と "<code>:</code>" (U+003A COLON) 文字を含まず、所有者のアイテムプロパティ名 (公式な仕様で定義されないもの) として使用される文字列。</li> + </ol> + </li> +</ol> + +<p class="note"><strong>メモ: </strong> 上記の規則では、 URL ではない値では ":" が許可されていません。なぜならそうでなければ URL と区別できないからです。 "." 文字をもつ値は、将来の拡張のために予約されています。空白文字は複数のトークンとして解析されるために許可されません。</p> + +<h2 id="Values" name="Values">値</h2> + +<p>名前と値の組のプロパティ値は、次のリストで最初に一致するものに与えられます。</p> + +<ul> + <li>要素が <code>itemscope</code> 属性を持つ場合 + + <ul> + <li>値は要素によって作成された<strong>アイテム</strong>を持つ</li> + </ul> + </li> + <li>要素が <code>meta</code> 要素である場合 + <ul> + <li>値は、要素の <code>content</code> 属性の値である</li> + </ul> + </li> + <li>要素が <code>audio</code>, <code>embed</code>, <code>iframe</code>, <code>img</code>, <code>source</code>, <code>track</code>, <code>video</code> 要素である場合 + <ul> + <li>値は、属性が設定される時に要素のノード文書 (<a href="https://developer.mozilla.org/ja/docs/Web/API/Microdata_DOM_API">Microdata DOM API</a>の一部) に関連する要素の src 属性の解析する値に由来する結果の URL 文字列である</li> + </ul> + </li> + <li>要素が <code>a</code>, <code>area</code>, <code>link</code> 要素である場合 + <ul> + <li>値は、属性が設定される時に要素のノード文書に関連する要素の href 属性の解析する値に由来する結果の URL 文字列である</li> + </ul> + </li> + <li>要素が <code>object</code> 要素である場合 + <ul> + <li>値は、属性が設定される時に要素のノード文書に関連する要素の data 属性の解析する値に由来する結果の URL 文字列である</li> + </ul> + </li> + <li>要素が <code>data</code> 要素である場合 + <ul> + <li>値は、要素の value 属性の値である</li> + </ul> + </li> + <li>要素が <code>meter</code> 要素である場合 + <ul> + <li>値は、要素の <code>value</code> 属性の値である</li> + </ul> + </li> + <li>要素が <code>time</code> 要素である場合 + <ul> + <li>値は、要素の <code>datetime</code> 値である</li> + </ul> + </li> +</ul> + +<p>それ以外</p> + +<ul> + <li>値は、要素の <var>textContent</var> である。</li> +</ul> + +<p>プロパティの値が <code>URL</code> である場合、プロパティは URL プロパティ要素を使用して指定されなければなりません。 URL プロパティ要素は、 <code>a</code>, <code>area</code>, <code>audio</code>, <code>embed</code>, <code>iframe</code>, <code>img</code>, <code>link</code>, <code>object</code>, <code>source</code>, <code>track</code>, <code>video</code> 要素です。</p> + +<h3 id="Name_order" name="Name_order">名前の順序</h3> + +<p>名前は互いに順不同ですが、特定の名前が複数の値を持つ場合、その値は相対的な順序を持ちます。</p> + +<p>以下の例では、 "a" プロパティは "1" 及び "2" の値を<em>その順番で</em>持ちますが、 "a" プロパティが "b" プロパティの前にくることは重要ではありません</p> + +<pre class="brush: html"><div itemscope> + <p itemprop="a">1</p> + <p itemprop="a">2</p> + <p itemprop="b">test</p> +</div></pre> + +<p>以下のものは同等です</p> + +<pre class="brush: html"><div itemscope> + <p itemprop="b">test</p> + <p itemprop="a">1</p> + <p itemprop="a">2</p> +</div></pre> + +<p>以下も同等です</p> + +<pre class="brush: html"><div itemscope> + <p itemprop="a">1</p> + <p itemprop="b">test</p> + <p itemprop="a">2</p> +</div></pre> + +<p>以下も同等です</p> + +<pre class="brush: html"><div id="x"> + <p itemprop="a">1</p> +</div> +<div itemscope itemref="x"> + <p itemprop="b">test</p> + <p itemprop="a">2</p> +</div> +</pre> + +<h2 id="Other_examples" name="Other_examples">その他の例</h2> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html"><dl itemscope + itemtype="http://vocab.example.net/book" + itemid="urn:isbn:0-330-34032-8"> + <dt>Title + <dd + itemprop="title">The Reality Dysfunction + <dt>Author + <dd + itemprop="author">Peter F. Hamilton + <dt>Publication date + <dd><time + itemprop="pubdate" + datetime="1996-01-26">26 January 1996</time> +</dl> +</pre> + +<h3 id="Structured_data_2" name="Structured_data_2">構造化データ</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="14">itemscope</td> + <td>itemtype: itemid</td> + <td colspan="2" rowspan="1">http://vocab.example.net/book: urn:isbn:0-330-34032-8</td> + </tr> + <tr> + <td>itemprop</td> + <td>title</td> + <td>The Reality Dysfunction</td> + </tr> + <tr> + <td>itemprop</td> + <td>author</td> + <td>Peter F. Hamilton</td> + </tr> + <tr> + <td>itemprop</td> + <td>pubdate</td> + <td>1996-01-26</td> + </tr> + </tbody> +</table> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample('HTML_2', '', '', '', 'Web/HTML/Global_attributes/itemprop')}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML Microdata', "#dfn-attr-itemprop", "itemprop")}}</td> + <td>{{Spec2('HTML Microdata')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "microdata.html#names:-the-itemprop-attribute", "itemprop")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.itemprop")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/Global_attributes">他のグローバル属性</a></li> + <li>マイクロデータに関連する他のグローバル属性 + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> diff --git a/files/ja/web/html/global_attributes/itemref/index.html b/files/ja/web/html/global_attributes/itemref/index.html new file mode 100644 index 0000000000..7d40896d1d --- /dev/null +++ b/files/ja/web/html/global_attributes/itemref/index.html @@ -0,0 +1,98 @@ +--- +title: itemref +slug: Web/HTML/Global_attributes/itemref +tags: + - HTML + - HTML マイクロデータ + - Reference + - グローバル属性 + - マイクロデータ + - 属性 +translation_of: Web/HTML/Global_attributes/itemref +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>の <strong><code>itemref</code></strong> プロパティは、 <code>itemscope</code> 属性を持つ要素の子孫でない場合、 <code><strong>itemref</strong></code> を使用してアイテムと関連付けができます。</span></p> + +<p><code>itemref</code> は文書内のどこかにある追加のプロパティがある要素の ID （<code>itemid</code> ではない）のリストを提供します。</p> + +<p><code>itemref</code> 属性は <code>itemscope</code> 属性が指定された要素のみで指定することができます。</p> + +<p class="note"><strong>メモ: </strong> <code>itemref</code> 属性は、マイクロデータのデータモデルの一部ではありません。注釈づけるデータが扱いやすいツリー構造に従っていないページにおいて、注釈を追加することを助けるための単なる構文構造です。例えば、テーブル内のデータをマークアップするために、セル内のプロパティを維持しながらそれぞれの列に別々なアイテムを定義することができます。</p> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div itemscope id="amanda" itemref="a b"></div> +<p id="a">Name: <span itemprop="name">Amanda</span> </p> +<div id="b" itemprop="band" itemscope itemref="c"></div> +<div id="c"> + <p>Band: <span itemprop="name">Jazz Band</span> </p> + <p>Size: <span itemprop="size">12</span> players</p> +</div> +</pre> + +<h3 id="Structured_data" name="Structured_data">構造化データ</h3> + +<p><small>(in <a href="https://json-ld.org/" rel="external">JSON-LD</a> format)</small></p> + +<pre class="brush: json">{ + "@id": "amanda", + "name": "Amanda", + "band": { + "@id": "b", + "name": "Jazz Band", + "size": 12 + } +} +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample('Example', '', '', '', 'Web/HTML/Global_attributes/itemref')}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML Microdata', "#dfn-itemref", "itemref")}}</td> + <td>{{Spec2('HTML Microdata')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemref", "itemref")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.global_attributes.itemref")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/Global_attributes">他のグローバル属性</a></li> + <li>マイクロデータに関連する他のグローバル属性 + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> diff --git a/files/ja/web/html/global_attributes/itemscope/index.html b/files/ja/web/html/global_attributes/itemscope/index.html new file mode 100644 index 0000000000..0f6f51923a --- /dev/null +++ b/files/ja/web/html/global_attributes/itemscope/index.html @@ -0,0 +1,290 @@ +--- +title: itemscope +slug: Web/HTML/Global_attributes/itemscope +tags: + - Attribute + - Global attribute + - HTML + - HTML Microdata + - Microdata + - Reference +translation_of: Web/HTML/Global_attributes/itemscope +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><strong><code>itemscope</code></strong> は論理型の<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>で、関連付けられたメタデータのスコープを定義します。 <code>itemscope</code> 属性を要素に指定すると、要素に関連付けられた数々の名前と値の組み合わせを持つ新しいアイテムを作成します。</span>関連する属性である {{htmlattrxref("itemtype")}} は、アイテム及びそのプロパティの文脈を記述する語彙 (<a href="http://schema.org/">schema.org</a> など) の妥当な URL を指定するために使用されます。以下のそれぞれの例では、語彙は <a href="https://schema.org/">schema.org</a> からのものです。</p> + +<p>あらゆる HTML 要素に <code>itemscope</code> 属性を設定することができます。 <code>itemscope</code> 要素が <code>itemtype</code> を持たない場合は、関連付けられた <code>itemref</code> を持つ必要があります。</p> + +<div class="note"> +<p><strong>注:</strong> <code>itemtype</code> 属性についての詳細は、 <a href="http://schema.org/Thing">http://schema.org/Thing</a> をご覧ください</p> +</div> + +<h3 id="Simple_example" name="Simple_example">単純な例</h3> + +<h4 id="HTML">HTML</h4> + +<p>以下の例では、 <code>itemscope</code> 属性を指定しています。この例では <code>itemtype</code> を "http://schema.org/Movie" に設定し、三つの関連する <code>itemprop</code> 属性を定義します。</p> + +<pre class="brush:html notranslate"><div itemscope itemtype="http://schema.org/Movie"> + <h1 itemprop="name">Avatar</h1> + <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span> + <span itemprop="genre">Science fiction</span> + <a href="https://youtu.be/0AY1XIkX7bY" itemprop="trailer">Trailer</a> +</div> +</pre> + +<h4 id="Structured_data" name="Structured_data">構造化データ</h4> + +<p>以下の表は前の例の構造化データを示しています。</p> + +<table class="standard-table"> + <tbody> + <tr> + <td rowspan="6">itemscope</td> + <td>Itemtype</td> + <td colspan="2">Movie</td> + </tr> + <tr> + <td>itemprop</td> + <td>(itemprop name)</td> + <td>(itemprop value)</td> + </tr> + <tr> + <td>itemprop</td> + <td>director</td> + <td>James Cameron</td> + </tr> + <tr> + <td>itemprop</td> + <td>genre</td> + <td>Science Fiction</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Avatar</td> + </tr> + <tr> + <td>itemprop</td> + <td>https://youtu.be/0AY1XIkX7bY</td> + <td>Trailer</td> + </tr> + </tbody> +</table> + +<h3 id="itemscope_id_attributes" name="itemscope_id_attributes">itemscope id 属性</h3> + +<p>要素に <code>itemscope</code> 属性を指定したとき、新しいアイテムが作成されます。アイテムは名前と値の組のグループで構成されます。 <code>itemscope</code> 属性及び <code>itemtype</code> 属性のついた要素には、 {{htmlattrxref("id")}} 属性を指定することもできます。 <code>id</code> 属性は新しいアイテムにグローバル識別子を設定するために使用することができます。グローバル識別子によって、アイテムをウェブ中のページにあるほかのアイテムに結び付けることができます。</p> + +<h3 id="Example" name="Example">例</h3> + +<p>以下の例には四つの <code>itemscope</code> 属性があります。それぞれの <code>itemscope</code> 属性は、対応する <code>itemtype</code> 属性のスコープを設定しています。以下の例にある <code>Recipe</code>, <code>AggregateRating</code>, <code>NutritionInformation</code> の <code>itemtype</code> は、レシピのための <a href="www.schema.org">schema.org</a> 構造化データの一部であり、最初の <code>itemtype</code>, http://schema.org/Recipe として定義されています。</p> + +<pre class="brush: html notranslate"><div itemscope itemtype="http://schema.org/Recipe"> + <h2 itemprop="name">Grandma's Holiday Apple Pie</h2> + <img itemprop="image" src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg" width="50" height="50" /> + <p> + By <span itemprop="author" itemscope itemtype="http://schema.org/Person"> + <span itemprop="name">Carol Smith</span> + </span> + </p> + <p> + Published: <time datetime="2009-11-05" itemprop="datePublished">November 5, 2009</time> + </p> + <span itemprop="description">This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.</span> + <br> + <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> + <span itemprop="ratingValue">4.0</span> stars based on <span itemprop="reviewCount">35</span> reviews + </span> + <br> + Prep time: <time datetime="PT30M" itemprop="prepTime">30 min</time><br> + Cook time: <time datetime="PT1H" itemprop="cookTime">1 hou</time>r<br> + Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min</time><br> + Yield: <span itemprop="recipeYield">1 9" pie (8 servings)</span><br> + <span itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation"> + Serving size: <span itemprop="servingSize">1 medium slice</span><br> + Calories per serving: <span itemprop="calories">250 cal</span><br> + Fat per serving: <span itemprop="fatContent">12 g</span><br> + </span> + <p> + Ingredients:<br> + <span itemprop="recipeIngredient">Thinly-sliced apples: 6 cups<br></span> + <span itemprop="recipeIngredient">White sugar: 3/4 cup<br></span> + ... + </p> + Directions: <br> + <div itemprop="recipeInstructions"> + 1. Cut and peel apples<br> + 2. Mix sugar and cinnamon. Use additional sugar for tart apples. <br> + ... + </div> +</div></pre> + +<h3 id="Results" name="Results">結果</h3> + +<h4 id="HTML_2">HTML</h4> + +<p>以下のものは、先ほどのコードの例を表示するものです。</p> + +<p>{{EmbedLiveSample('Example', '500', '550', '', 'Web/HTML/Global_attributes/itemscope')}}</p> + +<h4 id="Structured_data_2" name="Structured_data_2">構造化データ</h4> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="14">itemscope</td> + <td>itemtype</td> + <td colspan="2" rowspan="1">Recipe</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Grandma's Holiday Apple Pie</td> + </tr> + <tr> + <td>itemprop</td> + <td>image</td> + <td>https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg</td> + </tr> + <tr> + <td>itemprop</td> + <td>datePublished</td> + <td>2009-11-05</td> + </tr> + <tr> + <td>itemprop</td> + <td>description</td> + <td>This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.</td> + </tr> + <tr> + <td>itemprop</td> + <td>prepTime</td> + <td>PT30M</td> + </tr> + <tr> + <td>itemprop</td> + <td>cookTime</td> + <td>PT1H</td> + </tr> + <tr> + <td>itemprop</td> + <td>totalTime</td> + <td>PT1H30M</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeYield</td> + <td>1 9" pie (8 servings)</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeIngredient</td> + <td>Thinly-sliced apples: 6 cups</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeIngredient</td> + <td>White sugar: 3/4 cup</td> + </tr> + <tr> + <td>itemprop</td> + <td>recipeInstructions</td> + <td>1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .</td> + </tr> + <tr> + <td>itemprop</td> + <td colspan="2" rowspan="1">author [Person]</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Carol Smith</td> + </tr> + <tr> + <td colspan="1" rowspan="3">itemscope</td> + <td>itemprop[itemtype]</td> + <td colspan="2" rowspan="1">aggregateRating [AggregateRating]</td> + </tr> + <tr> + <td>itemprop</td> + <td>ratingValue</td> + <td>4.0</td> + </tr> + <tr> + <td>itemprop</td> + <td>reviewCount</td> + <td>35</td> + </tr> + <tr> + <td colspan="1" rowspan="4">itemscope</td> + <td>itemprop[itemtype]</td> + <td colspan="2" rowspan="1">nutrition [NutritionInformation]</td> + </tr> + <tr> + <td>itemprop</td> + <td>servingSize</td> + <td>1 medium slice</td> + </tr> + <tr> + <td>itemprop</td> + <td>calories</td> + <td>250 cal</td> + </tr> + <tr> + <td>itemprop</td> + <td>fatContent</td> + <td>12 g</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>注</strong>: HTML からマイクロデータを抽出するには、 Google の<a href="https://developers.google.com/structured-data/testing-tool/">構造化データテストツール</a>が便利です。上の HTML で試してみてください。</p> +</div> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML Microdata', "#dfn-itemscope", "itemscope")}}</td> + <td>{{Spec2('HTML Microdata')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemscope", "itemscope")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.global_attributes.itemscope")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/Global_attributes">他のグローバル属性</a></li> + <li>マイクロデータに関連する他のグローバル属性: + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> diff --git a/files/ja/web/html/global_attributes/itemtype/index.html b/files/ja/web/html/global_attributes/itemtype/index.html new file mode 100644 index 0000000000..c20f450d97 --- /dev/null +++ b/files/ja/web/html/global_attributes/itemtype/index.html @@ -0,0 +1,255 @@ +--- +title: itemtype +slug: Web/HTML/Global_attributes/itemtype +tags: + - HTML + - HTML マイクロデータ + - Reference + - グローバル属性 + - マイクロデータ + - 属性 +translation_of: Web/HTML/Global_attributes/itemtype +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a><strong>の <code>itemtype</code></strong> は、データ構造の中で <code>itemprop</code> （項目のプロパティ）を定義するのに使われる語彙の URL を指定します。</span> {{htmlattrxref("itemscope")}} は <code>itemtype</code> が有効になるデータ構造の語彙の対象範囲を設定するために使用します。</p> + +<p>Google などの主要な検索エンジンは、構造化データのために <a href="http://schema.org/">schema.org</a> の語彙に対応しています。この語彙は標準の型名とプロパティ名の組み合わせを定義しています。例えば、 <code><a href="http://schema.org/MusicEvent">MusicEvent</a></code> はコンサートを示し、 <code><a href="http://schema.org/startDate">startDate</a></code> プロパティや <code><a href="http://schema.org/location">location</a></code> プロパティでコンサートの主要な詳細を示します。この場合、 <a href="http://schema.org/MusicEvent"><code>MusicEvent</code></a> は <code>itemtype</code> で URL として使用し、 <code>startDate</code> や <code>location</code> は <code><a href="http://schema.org/MusicEvent">MusicEvent</a></code> が定義する <code>itemprop</code> となります。</p> + +<div class="note"> +<p><strong>メモ:</strong> <code>itemtype</code> 属性についての詳細は、 <a href="http://schema.org/Thing">http://schema.org/Thing</a> をご覧ください</p> +</div> + +<ul> + <li><strong>itemtype</strong> 属性には値が必要で、値は大文字小文字を区別する一意のトークンを順不同で並べたもので、それぞれが妥当な絶対 URL であり、すべてが同じ語彙を使用して定義する必要があります。属性の値は1つ以上のトークンを含む必要があります。</li> + <li>項目型はすべて、（<a href="http://schema.org/">schema.org</a> などの）適用可能な仕様書で定義された型であり、すべて同じ語彙を使用して定義する必要があります。</li> + <li>itemtype 属性は itemscope 属性が指定されている要素の中でのみ指定できます。</li> + <li>itemid 属性は、 itemscope 属性と itemtype 属性の両方を指定された要素でのみ指定することができます。これらは itemscope 属性を持つ要素で、語彙の仕様によって定められるとおり、その itemtype が項目のグローバル識別子に対応しない語彙を指定している場合にのみ指定する必要があります。</li> + <li>グローバル識別子の正確な意味は、語彙の仕様によって決定されます。これは、同じグローバル識別子をもつ複数の項目が存在することが許可されるかどうか（同じページか異なるページ上かどうか）、そしてその語彙に対する処理規則が同じ ID をもつ複数のアイテムの場合の取り扱いに関するものを定義するのはそのような仕様次第です。</li> +</ul> + +<h3 id="Simple_example" name="Simple_example">単純な例</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div itemscope itemtype="http://schema.org/Product"> + <span itemprop="brand">ACME</span> + <span itemprop="name">Executive Anvil</span> +</div></pre> + +<h4 id="Structured_data" name="Structured_data">構造化データ</h4> + +<table class="standard-table"> + <tbody> + <tr> + <td rowspan="4">itemscope</td> + <td>itemtype</td> + <td colspan="2" rowspan="1">schema.org Product</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Executive Anvil</td> + </tr> + <tr> + <td>itemprop</td> + <td colspan="2" rowspan="1">brand [Thing]</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>ACME</td> + </tr> + </tbody> +</table> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html"><div itemscope itemtype="http://schema.org/Product"> + <span itemprop="brand">ACME<br></span> + <span itemprop="name">Executive Anvil<br></span> + <img itemprop="image" src="https://pixabay.com/static/uploads/photo/2015/09/05/18/15/suitcase-924605_960_720.png" width="50" height="50" alt="Executive Anvil logo" /><br> + +<span itemprop="description">Sleeker than ACME's Classic Anvil, the + Executive Anvil is perfect for the business traveler + looking for something to drop from a height. + <br> +</span> + + Product #: <span itemprop="mpn">925872<br></span> + <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> + Rating: <span itemprop="ratingValue">4.4</span> stars, based on <span itemprop="reviewCount">89 + </span> reviews + </span><p> + +<span itemprop="offers" itemscope itemtype="http://schema.org/Offer"> + Regular price: $179.99<br> + <meta itemprop="priceCurrency" content="USD" /> + <span itemprop="price">Sale price: $119.99<br></span> + (Sale ends <time itemprop="priceValidUntil" datetime="2020-11-05"> + 5 November!</time>)<br> + Available from: <span itemprop="seller" itemscope itemtype="http://schema.org/Organization"> + <span itemprop="name">Executive Objects<br></span> + </span> + Condition: <link itemprop="itemCondition" href="http://schema.org/UsedCondition"/>Previously owned, + in excellent condition<br> + <link itemprop="availability" href="http://schema.org/InStock"/>In stock! Order now! +</span> + +</div></pre> + +<h3 id="Result" name="Result">結果</h3> + +<h4 id="HTML_3">HTML</h4> + +<p>{{EmbedLiveSample('HTML_2', '300', '400', '', 'Web/HTML/Global_attributes/itemtype')}}</p> + +<h4 id="Structured_data_2" name="Structured_data_2">構造化データ</h4> + +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="7">itemscope</td> + <td>itemtype</td> + <td colspan="2" rowspan="1">Product (http://schema.org/Product)</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Executive Anvil</td> + </tr> + <tr> + <td>itemprop</td> + <td>image</td> + <td>https://pixabay.com/static/uploads/photo/2015/09/05/18/15/suitcase-924605_960_720.png</td> + </tr> + <tr> + <td>itemprop</td> + <td>description</td> + <td>Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.</td> + </tr> + <tr> + <td>itemprop</td> + <td>mpn</td> + <td>925872</td> + </tr> + <tr> + <td>itemprop</td> + <td>brand [Thing]</td> + <td> </td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>ACME</td> + </tr> + <tr> + <td colspan="1" rowspan="9">itemscope</td> + <td>itemprop[itemtype]</td> + <td>aggregateRating[AggregateRating]</td> + <td> </td> + </tr> + <tr> + <td>itemprop</td> + <td>ratingValue</td> + <td>4.4</td> + </tr> + <tr> + <td>itemprop</td> + <td>reviewCount</td> + <td>89</td> + </tr> + <tr> + <td>itemprop</td> + <td>offers [Offer]</td> + <td>http://schema.org/Offer</td> + </tr> + <tr> + <td>itemprop</td> + <td>priceCurrency</td> + <td>USD</td> + </tr> + <tr> + <td>itemprop</td> + <td>price</td> + <td>119.99</td> + </tr> + <tr> + <td>itemprop</td> + <td>priceValidUntil</td> + <td>2020-11-05</td> + </tr> + <tr> + <td>itemprop</td> + <td>itemCondition</td> + <td>http://schema.org/UsedCondition</td> + </tr> + <tr> + <td>itemprop</td> + <td>availability</td> + <td>http://schema.org/InStock</td> + </tr> + <tr> + <td colspan="1" rowspan="2">itemscope</td> + <td>itemprop[itemtype]</td> + <td>seller [Organization]</td> + <td>http://schema.org/Organization</td> + </tr> + <tr> + <td>itemprop</td> + <td>name</td> + <td>Executive Objects</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>メモ</strong>: HTML からマイクロデータを抽出するには、 Google の<a href="https://developers.google.com/structured-data/testing-tool/">構造化データテストツール</a>が便利です。上の HTML で試してみてください。</p> +</div> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML Microdata', "#dfn-itemtype", "itemtype")}}</td> + <td>{{Spec2('HTML Microdata')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemtype", "itemprop")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.global_attributes.itemtype")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/Global_attributes">他のグローバル属性</a></li> + <li>マイクロデータに関連する他のグローバル属性 + <ul> + <li>{{htmlattrxref("itemid")}}</li> + <li>{{htmlattrxref("itemprop")}}</li> + <li>{{htmlattrxref("itemref")}}</li> + <li>{{htmlattrxref("itemscope")}}</li> + <li>{{htmlattrxref("itemtype")}}</li> + </ul> + </li> +</ul> diff --git a/files/ja/web/html/global_attributes/lang/index.html b/files/ja/web/html/global_attributes/lang/index.html new file mode 100644 index 0000000000..dea15467e2 --- /dev/null +++ b/files/ja/web/html/global_attributes/lang/index.html @@ -0,0 +1,90 @@ +--- +title: lang +slug: Web/HTML/Global_attributes/lang +tags: + - HTML + - Reference + - グローバル属性 +translation_of: Web/HTML/Global_attributes/lang +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><strong><code>lang</code></strong> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>は、要素の言語の定義に使われます。編集不可の要素では記述されている言語、また、編集可能な要素ではユーザーが書き込むべき言語です。属性には単一の「言語タグ」を <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a> で定義された書式で持ちます。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-lang.html","tabbed-shorter")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<p>属性値が<em>空文字列</em> (<code>lang=""</code>) の場合、言語は <em>unknown</em> に設定されます。言語タグが BCP47 に準拠していない場合は、 <em>invalid</em> に設定されます。</p> + +<div class="note"> +<h2 id="Language_tag_syntax" name="Language_tag_syntax">言語タグの構文</h2> + +<p>BCP47 の完全な構文は、細かい特定の言語の方言まで示せるようにとても複雑になっていますが、ほとんどの使い方ではずっと単純です。</p> + +<p>言語タグはハイフンで区切られた<em>言語サブタグ</em>より成り、それぞれのサブタグは言語の特定の特性を示します。３つのサブタグがもっともよく使われます。</p> + +<dl> + <dt>言語サブタグ</dt> + <dd>必須です。基本言語を定義する２～３文字のコードで、ふつうすべて小文字で書かれます。例えば、英語の言語コードは <code>en</code> であり、バデシ語のコードは <code>bdz</code> です。</dd> + <dt>書記体系サブタグ</dt> + <dd>任意です。このサブタグは、言語で使われる書記体系を定義し、常に４文字の長さで、最初の文字は大文字です。例えば、ブライユ (点字) のフランス語は <code>fr-Brail</code> であり、 <code>ja-Kana</code> はカタカナで書かれた日本語です。言語がとても一般的な方法で記述される場合、例えば英語でアルファベットを使う場合などは、このサブタグを使用する必要はありません。</dd> + <dt>地域サブタグ</dt> + <dd>任意です。このサブタグは基本言語の特定の場所における方言を定義し、国コードを示す大文字２文字または地域を示す３桁の数字です。例えば、 <code>es-ES</code> はスペインで使われているスペイン語であり、 <code>es-013</code> は中央アメリカで使われているスペイン語です。「国際スペイン語」は単なる <code>es</code> になります。</dd> +</dl> + +<p>両方がある場合、書式体系サブタグは地域サブタグよりも先に置きます。 — <code>ru-Cyrl-BY</code> はベラルーシで使われているキリル文字によるロシア語です。</p> + +<p>言語の正しいサブタグコードを探すには、 <a href="https://r12a.github.io/app-subtags/" rel="external">the Language Subtag Lookup</a> を見てみてください。</p> +</div> + +<p><strong>lang</strong> 属性が設定されていても、 <a href="/ja/docs/Web/HTML/Global_attributes/xml:lang"><strong>xml:lang</strong></a> 属性の方が優先するので、効果がないことがあります。</p> + +<p>CSS 疑似クラスの {{cssxref(":lang")}} においては、名前が異なると二つの無効な言語名を区別します。ですから、 <code>:lang(es)</code> は <code>lang="es-ES"</code> 及び <code>lang="es-419"</code> にも一致しますが、 <code>:lang(xyzzy)</code> は <code>lang="xyzzy-Zorp!"</code> とは一致しません。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショット。{{SpecName('HTML5 W3C')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショット。<code>xml:lang</code> の振る舞いと言語判断のアルゴリズムを定義。真にグローバルな属性となった。</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>{{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, and {{HTMLElement("script")}} を除くすべての要素で対応。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.global_attributes.lang")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></li> + <li><a href="/ja/docs/Web/HTTP/Headers/Content-Language">HTTP の <code>Content-Language</code> ヘッダー</a></li> +</ul> diff --git a/files/ja/web/html/global_attributes/part/index.html b/files/ja/web/html/global_attributes/part/index.html new file mode 100644 index 0000000000..b567f5a331 --- /dev/null +++ b/files/ja/web/html/global_attributes/part/index.html @@ -0,0 +1,46 @@ +--- +title: part +slug: Web/HTML/Global_attributes/part +tags: + - Global attributes + - HTML + - Reference + - part +translation_of: Web/HTML/Global_attributes/part +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><strong><code>part</code></strong> は <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>で、要素のパート名のスペース区切りのリストが含まれています。 CSS はパート名を使用して、 {{CSSxRef("::part")}} 擬似要素を介してシャドウツリー内の特定の要素の選択およびスタイルの設定を行うことができます。</p> + +<p>使用例については <a href="https://mdn.github.io/web-components-examples/shadow-part/">Shadow part example</a> をご覧ください。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Shadow Parts", "#part-attr", "part")}}</td> + <td>{{Spec2('CSS Shadow Parts')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.part")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></li> +</ul> diff --git a/files/ja/web/html/global_attributes/slot/index.html b/files/ja/web/html/global_attributes/slot/index.html new file mode 100644 index 0000000000..f7e40cbc57 --- /dev/null +++ b/files/ja/web/html/global_attributes/slot/index.html @@ -0,0 +1,50 @@ +--- +title: slot +slug: Web/HTML/Global_attributes/slot +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/slot +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><strong><code>slot</code></strong> は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>で、<a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">シャドウ DOM</a> のシャドウツリー内にあるスロットをある要素に割り当てます。 <code>slot</code> 属性をもつ要素は、{{htmlattrxref("name", "slot")}} 属性の値がその <code>slot</code> 属性の値と一致する {{HTMLElement("slot")}} 要素により生成されたスロットに割り当てられます。</p> + +<p>例えば、<a href="/ja/docs/Web/Web_Components/Using_templates_and_slots">テンプレートとスロットの使用</a>ガイドをみてください。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#attr-slot", "slot attribute")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', "#dom-element-slot", "slot attribute")}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.slot")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></li> +</ul> diff --git a/files/ja/web/html/global_attributes/spellcheck/index.html b/files/ja/web/html/global_attributes/spellcheck/index.html new file mode 100644 index 0000000000..8b1fcef24a --- /dev/null +++ b/files/ja/web/html/global_attributes/spellcheck/index.html @@ -0,0 +1,67 @@ +--- +title: spellcheck +slug: Web/HTML/Global_attributes/spellcheck +tags: + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/spellcheck +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><strong><code>spellcheck</code></strong> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>は、要素でスペルミスのチェックを行うかを定義する列挙型属性です。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-spellcheck.html","tabbed-shorter")}}</div> + +<div class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>以下の値を使用できます。</p> + +<ul> + <li><code>true</code>: 可能であればその要素でスペルチェックを行うことを示す</li> + <li><code>false</code>: その要素でスペルチェックを行わないことを示す</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>注:</strong> <code>spellcheck</code> 属性は<em>列挙型</em>であり、<em>論理属性</em>ではありません。これは、 <code>true</code> または <code>false</code> のどちらかを明確に使用することが必須であり、 <code><textarea spellcheck></textarea></code> のような省略形は使用できないということです。正しい使い方は <code><textarea spellcheck="true"></textarea></code> です。</p> +</div> + +<p>この属性を設定しなかった場合の既定値は、要素の種類やブラウザーによって定義されます。既定値は<em>継承</em>されます。つまりもっとも近い祖先要素の <em>spellcheck</em> が <code>true</code> である場合にのみ、自身もスペルチェックを受けることがあります。</p> + +<p>この属性は単に、ブラウザーに対する助言です。ブラウザーがスペルチェックを有効にすることを求められてはいません。一般的に編集不可能な要素は、 <code>spellcheck</code> 属性を <code>true</code> に設定してブラウザーがスペルチェックに対応していても、スペルチェックされません。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#spelling-and-grammar-checking", "spellcheck")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#spelling-and-grammar-checking", "spellcheck")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML WHATWG')}}、初回定義のスナップショット</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.spellcheck")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></li> +</ul> diff --git a/files/ja/web/html/global_attributes/style/index.html b/files/ja/web/html/global_attributes/style/index.html new file mode 100644 index 0000000000..9bbb2dd0f8 --- /dev/null +++ b/files/ja/web/html/global_attributes/style/index.html @@ -0,0 +1,70 @@ +--- +title: style +slug: Web/HTML/Global_attributes/style +tags: + - HTML + - Reference + - グローバル属性 + - リファレンス +translation_of: Web/HTML/Global_attributes/style +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><code><strong>style</strong></code> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>は、要素に適用する <a href="/ja/docs/Web/CSS">CSS</a> スタイル宣言を包含します。なお、スタイルは別のファイルで定義することが推奨されます。この属性と {{HTMLElement("style")}} 要素の主な用途は、例えばテストのために、すばやくスタイルを適用できるようにすることです。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-style.html","tabbed-shorter")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<div class="note"> +<p><strong>使用上のメモ:</strong> この属性は、意味的な情報を伝えるために使用してはいけません。すべてのスタイルが削除されたとしても、ページは依然として意味的にが正しくあるべきです。特に、無関係な情報を隠すために使用しないようにしてください。これには <a href="/ja/docs/Web/HTML/Global_attributes/hidden"><strong>hidden</strong></a> 属性を使用してください。</p> +</div> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショットであり、 {{SpecName('HTML5 W3C')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-style-attribute", "style")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショット。 {{SpecName("HTML4.01")}} から、真にグローバルな属性になりました。</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'present/styles.html#h-14.2.2', 'style')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>{{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}} を除くすべての要素で対応。</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Style", "", "")}}</td> + <td>{{Spec2("CSS3 Style")}}</td> + <td><code>style</code> 属性の内容を定義。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.global_attributes.style")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></li> +</ul> diff --git a/files/ja/web/html/global_attributes/tabindex/index.html b/files/ja/web/html/global_attributes/tabindex/index.html new file mode 100644 index 0000000000..9794aaf13b --- /dev/null +++ b/files/ja/web/html/global_attributes/tabindex/index.html @@ -0,0 +1,94 @@ +--- +title: tabindex +slug: Web/HTML/Global_attributes/tabindex +tags: + - HTML + - Reference + - グローバル属性 + - リファレンス +translation_of: Web/HTML/Global_attributes/tabindex +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><strong><code>tabindex</code></strong> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>は、要素が入力フォーカスを持てることと、キーボードの順次ナビゲーション (ふつうは名前の由来である <kbd>Tab</kbd> キーによる) に加わるかどうか、どの位置に加わるかを示します。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-tabindex.html","tabbed-standard")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>値としては整数値を受け付け、値によって次のような様々な結果になります。</p> + +<ul> + <li><em>負の数</em> (ふつう <code>tabindex="-1"</code>) は、その要素がキーボードの順次ナビゲーションでは到達できませんが、 JavaScript や視覚的にフォーカスを持つことができるという意味です。これは主に、 JavaScript で操作可能なウィジェットを作成するのに有用です。 + + <div class="note"> + <p>負の値はオフスクリーンのコンテンツで特定のイベントにより現れる場合に有用です。ユーザーは負の <code>tabindex</code> が付いた要素に、キーボードを使用してフォーカスを与えることはできませんが、スクリプトは <code>focus()</code> <a href="/ja/docs/Web/API/HTMLElement/focus">メソッド</a>を呼び出すことでフォーカスを与えることはできます。</p> + </div> + </li> + <li><code>tabindex="0"</code> は、要素がキーボードの順次ナビゲーションでフォーカスを持つことが可能ですが、その順序は文書のソース内の順序で決定されることを表します。</li> + <li><em>正の数</em>は、要素がキーボードの順次ナビゲーションでフォーカスを持つことが可能であり、その順序は数値で定義されることを表します。つまり、 <code>tabindex="4"</code> は <code>tabindex="5"</code> よりも前にフォーカスが来ますが、 <code>tabindex="3"</code> よりも後だということです。複数の要素に同じ正の数の <code>tabindex</code> が指定された場合は、文書のソース内の互いの位置に従った順序になります。 <code>tabindex</code> の最大値は32767です。指定されなかった場合、既定値の0を取ります。 + <div class="warning"> + <p><code>tabindex</code> の値に0よりも大きな値を使用することは避けてください。そうすると、支援技術に頼っている人がページコンテンツを移動したり操作したりすることが難しくなります。代わりに、論理的な順序で要素を並べて文書を書いてください。</p> + </div> + </li> +</ul> + +<p><code>tabindex</code> 属性を{{htmlelement("div")}} に設定する場合は、子のコンテンツにも <code>tabindex</code> を設定しなければ、矢印キーを使用して子のコンテンツをスクロールできなくなります。 <a href="https://jsfiddle.net/jainakshay/0b2q4Lgv/"><code>tabindex</code> のスクロール効果を理解するには、こちらの fiddle を確認してください</a>。</p> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> + +<p>キーボード入力で対話的にフォーカスを設定できるようにするために、 <a href="/ja/docs/Web/Guide/HTML/Content_categories#Interactive_content">対話型コンテンツ</a>ではないものに <code>tabindex</code> 属性を組み合わせて使用することは避けてください。例えば、 {{HTMLElement("button")}} 要素を使用する代わりに {{HTMLElement("div")}} 要素を使用してボタンを記述する場合などです。</p> + +<p>対話的要素でないものを使用して対話的コンポーネントを記述すると、<a href="/ja/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">アクセシビリティツリー</a>に掲載されません。これは、支援技術によって移動や操作を行うことを阻害します。このようなコンテンツは、代わりに ({{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, などの) 対話型要素を使用して意味的に記述するべきです。これらの要素には、 <a href="/ja/docs/Web/Accessibility/ARIA">ARIA</a> によって管理しなければならないアクセシビリティにステータスを伝える、組み込みのロールと状態があります。</p> + +<ul> + <li><a href="https://developer.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/">Using the tabindex attribute | The Paciello Group</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "interaction.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショットであり、 {{SpecName('HTML5 W3C')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショット。 {{SpecName("HTML4.01")}} との違いは、すべての要素でこの属性に対応したこと (グローバル属性化)。</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} 要素でのみ対応。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.global_attributes.tabindex")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>。</li> + <li>{{domxref("HTMLElement.tabIndex")}} は、この属性を反映します。</li> + <li>tabindex に関するアクセシビリティの問題について、 Adrian Roselli による <a href="http://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html">Don’t Use Tabindex Greater than 0</a> を参照。</li> +</ul> diff --git a/files/ja/web/html/global_attributes/title/index.html b/files/ja/web/html/global_attributes/title/index.html new file mode 100644 index 0000000000..c80a499c01 --- /dev/null +++ b/files/ja/web/html/global_attributes/title/index.html @@ -0,0 +1,126 @@ +--- +title: title +slug: Web/HTML/Global_attributes/title +tags: + - Global attributes + - HTML + - Reference + - Title +translation_of: Web/HTML/Global_attributes/title +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><strong><code>title</code></strong> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>は、要素に関するアドバイザリー情報を表すテキストを含みます。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/attribute-title.html","tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>典型的な用途は以下の通りです。</p> + +<ul> + <li>{{HTMLElement("iframe")}} 要素の支援技術のためのラベル付け</li> + <li>プログラム的に関連付けれた{{HTMLElement("input")}} 要素のためのラベルを、実際の {{HTMLElement("label")}} の代替として提供</li> + <li><a href="/ja/docs/Web/HTML/Element/table">データ表</a>内のコントロールのラベル付け</li> +</ul> + +<p><code>title</code> 属性は {{HTMLElement("link")}}, {{HTMLElement("abbr")}}, {{HTMLElement("input")}}, {{HTMLElement("menuitem")}} の各要素において、追加の意味を持ちます。</p> + +<h2 id="Multiline_titles" name="Multiline_titles">複数行のタイトル</h2> + +<p><code>title</code> 属性は複数の行を含むことができます。それぞれの <code>U+000A LINE FEED</code> (<code>LF</code>) 文字が改行を表します。いくつか注意しなければならないのは、これが次のように二行にわたって描画されることです。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p>Newlines in <code>title</code> should be taken into account, +like <abbr title="This is a +multiline title">example</abbr>.</p></pre> + +<h3 id="Result" name="Result">結果</h3> + +<div>{{EmbedLiveSample('Multiline_titles')}}</div> + +<h2 id="Title_attribute_inheritance" name="Title_attribute_inheritance">title 属性の継承</h2> + +<p>要素に <code>title</code> 属性がない場合、属性値は親ノードから継承され、さらにそれはその親ノードから継承されるというようになります。</p> + +<p>この属性が空文字列に設定されると、その祖先の <code>title</code> が関係なく、この要素のツールチップとして使用するべきではないことを意味します。</p> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html notranslate"><div title="CoolTip"> + <p>Hovering here will show “CoolTip”.</p> + <p title="">Hovering here will show nothing.</p> +</div></pre> + +<h3 id="Result_2" name="Result_2">結果</h3> + +<div>{{EmbedLiveSample('Title_attribute_inheritance')}}</div> + +<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2> + +<p><code>title</code> 属性を使用することは、次のような人々にとって大きな問題になります。</p> + +<ul> + <li>タッチのみの機器を使用している人々</li> + <li>キーボードで操作している人々</li> + <li>読み上げソフトや拡大鏡などの支援技術で操作している人々</li> + <li>細かい運動制御障碍を経験している人々</li> + <li>認知障碍のある人</li> +</ul> + +<p>これは、ブラウザーが表示するページを追加支援技術が解釈することによる複合性について、ブラウザーの互換性に一貫性がないためです。ツールチップ効果が必要であれば、上記の閲覧方法でもアクセスできる<a href="https://inclusive-components.design/tooltips-toggletips/">もっとアクセシブルな技術を使用する</a>方が効果的です。</p> + +<ul> + <li><a href="https://www.w3.org/TR/html/dom.html#the-title-attribute">3.2.5.1. The title attribute | W3C HTML 5.2: 3. Semantics, structure, and APIs of HTML documents</a></li> + <li><a href="https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/">Using the HTML title attribute – updated | The Paciello Group</a></li> + <li><a href="https://inclusive-components.design/tooltips-toggletips/">Tooltips & Toggletips - Inclusive Components</a></li> + <li><a href="https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/">The Trials and Tribulations of the Title Attribute - 24 Accessibility</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショットであり、{{SpecName('HTML5 W3C')}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#the-title-attribute", "title")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショット。 {{SpecName("HTML4.01")}} から、真にグローバルな属性になりました。</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/global.html#adef-title', 'title')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>{{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("title")}} を除くすべての要素で対応。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.title")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>。</li> + <li>{{domxref("HTMLElement.title")}} は、この属性を反映します。</li> +</ul> diff --git a/files/ja/web/html/global_attributes/translate/index.html b/files/ja/web/html/global_attributes/translate/index.html new file mode 100644 index 0000000000..3c401ecd2c --- /dev/null +++ b/files/ja/web/html/global_attributes/translate/index.html @@ -0,0 +1,64 @@ +--- +title: translate +slug: Web/HTML/Global_attributes/translate +tags: + - Experimental + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/translate +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p><span class="seoSummary"><strong><code>translate</code></strong> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a> は列挙型属性で、要素の<em>翻訳可能な属性</em>の値や {{domxref("Text")}} 子ノードを、ページをローカライズする際に翻訳するべきか、あるいは変更せずにおくかを指定します。</span>以下の値を使用することができます。</p> + +<ul> + <li>空文字列または "<code>yes</code>": ページをローカライズする際に翻訳すべきであることを示します。</li> + <li>"<code>no</code>": 要素を翻訳してはならないことを示します。</li> +</ul> + +<p>すべてのブラウザーがこの属性を認識しているわけではありませんが、 Google 翻訳のような自動翻訳システムがこれを尊重しており、人間の翻訳者によって使用されるツールによっても尊重される可能性があります。そのため、ウェブ制作者がこの属性を使用して、翻訳されるべきではないコンテンツをマークすることが重要です。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例では <code>translate</code> 属性を使用して、翻訳ツールにフッターの企業ブランド名を翻訳しないように依頼しています。</p> + +<pre class="notranslate"><footer> + <small>© 2020 <span translate="no">BrandName</span></small> +</footer></pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "dom.html#attr-translate", "translate")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新のスナップショットである {{SpecName('HTML5.1')}} から変更な。</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#the-translate-attribute", "translate")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName('HTML WHATWG')}} のスナップショット、初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.global_attributes.translate")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>すべての<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>。</li> + <li>{{domxref("HTMLElement.translate")}} プロパティは、この属性を反映します。</li> + <li><a href="https://www.w3.org/International/questions/qa-translate-flag">Using HTML's translate attribute</a>.</li> +</ul> diff --git a/files/ja/web/html/global_attributes/x-ms-format-detection/index.html b/files/ja/web/html/global_attributes/x-ms-format-detection/index.html new file mode 100644 index 0000000000..6368a4c3d8 --- /dev/null +++ b/files/ja/web/html/global_attributes/x-ms-format-detection/index.html @@ -0,0 +1,39 @@ +--- +title: x-ms-format-detection +slug: Web/HTML/Global_attributes/x-ms-format-detection +translation_of: Web/HTML/Global_attributes/x-ms-format-detection +--- +<div>{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}</div> + +<p><code><a href="https://docs.microsoft.com/en-us/previous-versions/dn337007(v%3Dvs.85)">x-ms-format-detection</a></code> 属性は、電話番号の様な要素のテキスト内データ形式が自動的にフォロー可能なリンクに変換されるかどうかを決定します。</p> + +<p><code>tel:</code> スキームのリンクなど既存のリンクは影響を受けません。</p> + +<div class="blockIndicator note"> +<p>format detectionによって作成されたリンクはDOMに表示されません。</p> +</div> + +<p>{{Non-standard_inline}} この独自プロパティは Internet Explorer と Microsoft Edge に固有です。</p> + +<h2 id="構文">構文</h2> + +<pre class="brush: html notranslate"><html x-ms-format-detection="none"> +</pre> + +<h2 id="Value" name="Value">値</h2> + +<dl> + <dt><code>all</code></dt> + <dd>サポートされているすべてのデータ形式が検出されます。</dd> + <dt><code>none</code></dt> + <dd>Format detection はオフになっています。</dd> + <dt><code>phone</code></dt> + <dd>電話番号パターンは自動的にリンクされます。</dd> +</dl> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Microsoft_API_extensions">Microsoft API 拡張</a></li> + <li><a href="https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html">Safari Supported Meta Tags</a></li> +</ul> diff --git a/files/ja/web/html/html_extensions/index.html b/files/ja/web/html/html_extensions/index.html new file mode 100644 index 0000000000..6e0d715d5d --- /dev/null +++ b/files/ja/web/html/html_extensions/index.html @@ -0,0 +1,12 @@ +--- +title: HTML Extensions +slug: Web/HTML/HTML_Extensions +tags: + - HTML +--- +<p>Mozilla ブラウザは、標準を拡張するいくつかの HTML タグをサポートしています。その一部がドキュメント化されています。</p> +<ul> <li>BLINK</li> <li><a class="internal" href="/ja/HTML/HTML_Extensions/KEYGEN_Tag" title="ja/HTML/HTML Extensions/KEYGEN Tag">KEYGEN</a></li> +</ul> +<div class="noinclude"> +<p>{{ languages( { "en": "en/HTML/HTML_Extensions" } ) }}</p> +</div> diff --git a/files/ja/web/html/index.html b/files/ja/web/html/index.html new file mode 100644 index 0000000000..7a9889c191 --- /dev/null +++ b/files/ja/web/html/index.html @@ -0,0 +1,109 @@ +--- +title: 'HTML: HyperText Markup Language' +slug: Web/HTML +tags: + - HTML + - HTML5 + - Landing + - Web + - 'l10n:priority' +translation_of: Web/HTML +--- +<div>{{HTMLSidebar}}</div> + +<p class="summary"><span class="seoSummary"><strong>HTML</strong> (HyperText Markup Language) はウェブのもっとも基本的な構成要素です。 HTML はウェブページの基本レイアウトに従ってウェブページの<em>コンテンツ</em>を記述し定義するものです。 HTML に隣接する他の技術としては、ウェブページの表示や表現を記述するもの (<a href="/ja/docs/Web/CSS">CSS</a>) または機能や振る舞いを記述するもの (<a href="/ja/docs/Web/JavaScript">JavaScript</a>) があります。</span></p> + +<p>「ハイパーテキスト」はウェブページから別なページに、ウェブサイト内でもウェブサイト間でも、接続するリンクを示します。リンクはウェブの基礎的な特徴です。コンテンツをインターネットにアップロードして他の人々が作成したページにリンクすれば、 World Wide Web の活発な参加者になれます。</p> + +<p>HTML ではウェブブラウザーのテキスト、画像、その他のコンテンツを記述するために「マークアップ」を使用します。 HTML のマークアップには、 {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}}, {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("li")}} その他のたくさんの特殊な「要素」を用います。</p> + +<p>HTML 要素は文書中で、 "<code><</code>" および "<code>></code>" で囲まれた要素名で構成される「タグ」によって区別されます。タグ内の要素名は、大文字と小文字の区別がありません。つまり、大文字でも、小文字でも、混在して書いても構いません。例えば、 <code><title></code> タグは <code><Title></code> や <code><TITLE></code> やその他の方法で書くことができます。</p> + +<p>以下の記事が HTML についてもっと学ぶのに役立ちます。</p> + +<section class="cleared" id="sect1"> +<ul class="card-grid"> + <li><span>HTML 入門</span> + + <p>ウェブ開発が初めてであれば、 HTML とは何か、 HTML の使用方法を説明する<a href="/ja/docs/Learn/Getting_started_with_the_web/HTML_basics">HTMLの基本</a>をご覧ください。</p> + </li> + <li><span>HTML チュートリアル</span> + <p>チュートリアルや例を含む HTML の使用方法に関する記事は、<a href="/ja/docs/Learn/HTML">HTML 学習エリア</a>を確認してください。</p> + </li> + <li><span>HTML リファレンス</span> + <p>広範な <a href="/ja/docs/Web/HTML/Reference">HTML リファレンス</a>の章で、 HTML のすべての要素と属性についての詳細が分かります。</p> + </li> +</ul> + +<div class="in-page-callout webdev"> +<h3 id="Looking_to_become_a_front-end_web_developer" name="Looking_to_become_a_front-end_web_developer">フロントエンドウェブ開発者になるために</h3> + +<p>目標に向かって頑張るために必要な基本情報をまとめたコースを用意しました。</p> + +<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">始めましょう</a></p> +</div> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Tools" id="Beginners_tutorials" name="Beginners_tutorials">初心者向けチュートリアル</h2> + +<p><a href="/ja/docs/Learn/HTML">HTML 学習エリア</a>は HTML を基礎から学ぶための複数のモジュールを中心としています。――前提知識は必要ありません。</p> + +<dl> + <dt><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 概論</a></dt> + <dd>このモジュールでは、 HTML を文章に適用する方法、ハイパーリンクを作成する方法、 HTML を使用してウェブページを構築する方法など、重要な概念と構文に慣れていく段階を設定します。</dd> + <dt><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding">マルチメディアとその埋め込み方</a></dt> + <dd>このモジュールでは、ウェブページにマルチメディアを埋め込むための HTML の使い方を探ります。画像を入れるための様々な方法、映像、音声、他のウェブページ全体を含める場合も含みます。</dd> + <dt><a href="/ja/docs/Learn/HTML/Tables">HTML テーブル</a></dt> + <dd>ウェブページ上で表形式のデータを分かりやすく使いやすい方法で表現するのは難しいことです。このモジュールでは、基本的なテーブルのマークアップと、キャプションやサマリーの追加などのより複雑な機能を扱います。</dd> + <dt><a href="/ja/docs/Learn/HTML/Forms">HTML フォーム</a></dt> + <dd>フォームはウェブで非常に重要な部分です。――これはウェブサイトとのやり取り（登録やログイン、フィードバックの送信、商品の購入など）に必要な多くの機能を提供します。このモジュールでは、フォームのクライアント側／フロントエンド部分の作成から始めます。</dd> + <dt><a href="/ja/docs/Learn/HTML/Howto">よくある問題解決に HTML を使う</a></dt> + <dd>HTML を使用してウェブページを作成する際に、とてもよくある問題（タイトルの扱い、画像や動画の追加、コンテンツの強調、基本フォームの作成など）を解決する方法を説明する記事の章へのリンクを紹介します。</dd> +</dl> + +<h2 id="Advanced_topics" name="Advanced_topics">高度なトピック</h2> + +<dl> + <dt class="landingPageList"><a href="/ja/docs/Web/HTML/CORS_enabled_image">CORS を利用した画像</a></dt> + <dd class="landingPageList">{{htmlattrxref("crossorigin", "img")}} 属性と {{glossary("CORS")}} ヘッダーを組み合わせることで、 {{HTMLElement("img")}} 要素で定義された画像を異なるドメインから読み出し、 それを {{HTMLElement("canvas")}} 要素の中で同じドメインから読み出したかのように扱うことができます。</dd> + <dt class="landingPageList"><a href="/ja/docs/Web/HTML/CORS_settings_attributes">CORS 設定属性</a></dt> + <dd class="landingPageList"><a href="/ja/docs/Web/HTTP/CORS">CORS</a> をサポートするいくつかの HTML 要素（{{HTMLElement("img")}} や {{HTMLElement("video")}} など）は <code>crossorigin</code> 属性（<code>crossOrigin</code> プロパティ）を持っており、要素が取得したデータに関する CORS リクエストを設定することができます。</dd> + <dt class="landingPageList"><a href="/ja/docs/Web/HTML/Preloading_content">rel="preload" によるコンテンツの先読み</a></dt> + <dd class="landingPageList">HTML の {{htmlelement("head")}} 要素内において、 {{htmlelement("link")}} 要素で {{htmlattrxref("rel", "link")}} 属性に <code>preload</code> を指定することで、読み込み後すぐにページに必要なリソース、つまりページ読み込みの過程の初期の、ブラウザーの主なレンダリング機構が起動する前に、先読みを始めたいものを指定する宣言的なフェッチリクエストを記述することができます。これにより、ページの最初のレンダリングがブロックされにくくなり、パフォーマンスが向上します。この記事では <code>preload</code> がどのように動作するのかについての基本的なガイドを提供します。</dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="References" name="References">リファレンス</h2> + +<dl> + <dt class="landingPageList"><a href="/ja/docs/Web/HTML/Reference">HTML リファレンス</a></dt> + <dd class="landingPageList">HTML は<strong>要素</strong>の集まりで、それぞれの要素がいくつかの<strong>属性</strong>で修飾される場合があります。 HTML 文書は互いに<a href="/en-US/docs/Web/HTML/Link_types">リンク</a>で接続されます。</dd> + <dt class="landingPageList"><a href="/ja/docs/Web/HTML/Element">HTML 要素リファレンス</a></dt> + <dd class="landingPageList">すべての {{glossary("HTML")}} {{glossary("Element", "要素")}}の一覧を閲覧します。</dd> + <dt class="landingPageList"><a href="/ja/docs/Web/HTML/Attributes">HTML 属性リファレンス</a></dt> + <dd class="landingPageList">HTML の要素には<strong>属性</strong>があります。これは要素を調整したり、さまざまな方法で振る舞いを調整したりするための付加的な値です。</dd> + <dt class="landingPageList"><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></dt> + <dd class="landingPageList">グローバル属性は、<em>標準仕様で規定されていないものを含む</em>すべての <a href="/ja/docs/Web/HTML/Element">HTML 要素</a>に指定できるものです。つまり、あらゆる標準外の要素も、それを使用することで文書が HTML5 に準拠しなくなるとしても、グローバル属性を受け入れなければならないということです。</dd> + <dt class="landingPageList"><a href="/ja/docs/Web/HTML/Inline_elements">インライン要素</a>と<a href="/ja/docs/Web/HTML/Block-level_elements">ブロックレベル要素</a></dt> + <dd class="landingPageList">通常、 HTML の要素は「インライン」要素または「ブロックレベル」要素のどちらかです。インライン要素は、要素を定義するタグによって指定された範囲のみを占有します。ブロックレベル要素は親要素 (コンテナー) の範囲全体を占有し、それによって「ブロック」を作成します。</dd> + <dt class="landingPageList"><a href="/ja/docs/Web/HTML/Link_types">リンク種別</a></dt> + <dd class="landingPageList">HTML では、2つの文書間の関係を確立し定義するために、さまざまなリンク種別が使用できます。リンク種別を設定できるリンク要素は {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}} などです。</dd> + <dt class="landingPageList"><a href="/ja/docs/Web/Media/Formats">ウェブにおけるメディア種別と形式のガイド</a></dt> + <dd class="landingPageList">{{HTMLElement("audio")}} および {{HTMLElement("video")}} 要素では、外部のソフトウェアの支援を必要とせずにコンテンツの中でネイティブに音声や動画を再生できます。</dd> + <dt class="landingPageList"><a href="/ja/docs/Web/Guide/HTML/Content_categories">HTML コンテンツカテゴリ</a></dt> + <dd class="landingPageList">HTML は数種類のコンテンツで構成され、それぞれのコンテンツは特定のコンテキストで使用することができ、他のコンテンツでは使用できません。同様に、それぞれのコンテンツを含むことができる一連の他のコンテンツカテゴリと、中で使用できる要素、使用できない要素があります。これは、これらのカテゴリのガイドです。</dd> + <dt class="landingPageList"><a href="/ja/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">後方互換モードと標準準拠モード</a></dt> + <dd class="landingPageList">後方互換モードと標準準拠モードの歴史的な情報です。</dd> +</dl> + +<h2 class="landingPageList" id="Related_topics" name="Related_topics">関連トピック</h2> + +<dl> + <dt><a href="/ja/docs/Web/HTML/Applying_color">CSS を使って HTML の要素に色をつける</a></dt> + <dd>この記事では、 CSS を使用して HTML コンテンツに色をつける方法、 HTML 文書のどの部分に色付けできるかの一覧、使用する CSS プロパティについて説明します。例えば、パレット作成ツールへのリンクなどが含みます。</dd> +</dl> +</div> +</div> +<span class="alllinks"><a href="/ja/docs/tag/HTML">すべて表示...</a></span></section> diff --git a/files/ja/web/html/index/index.html b/files/ja/web/html/index/index.html new file mode 100644 index 0000000000..eadaa1c4d0 --- /dev/null +++ b/files/ja/web/html/index/index.html @@ -0,0 +1,10 @@ +--- +title: HTML ドキュメントの索引 +slug: Web/HTML/Index +tags: + - HTML + - Index + - MDN Meta +translation_of: Web/HTML/Index +--- +<p>{{Index("/ja/docs/Web/HTML")}} <span class="seoSummary">利用可能なすべての HTML に関する文書の包括的な索引リストです。</span></p> diff --git a/files/ja/web/html/inline_elements/index.html b/files/ja/web/html/inline_elements/index.html new file mode 100644 index 0000000000..cb1100ea03 --- /dev/null +++ b/files/ja/web/html/inline_elements/index.html @@ -0,0 +1,171 @@ +--- +title: インライン要素 +slug: Web/HTML/Inline_elements +tags: + - Beginner + - HTML + - HTML 要素 + - 'HTML:Element Reference' + - Reference + - レイアウト + - 要素 +translation_of: Web/HTML/Inline_elements +--- +<p>HTML (<strong>Hypertext Markup Language</strong>) の要素は従来、<a href="/ja/docs/Web/HTML/Block-level_elements">「ブロックレベル」要素</a>と「インライン」要素に分類されていました。<span class="seoSummary">インライン要素は、コンテンツの流れを分断せずに、要素を定義するタグで囲まれた範囲だけを占有するものです。</span>この記事では、 HTML のインライン要素と、 <a href="/ja/docs/Web/HTML/Block-level_elements">ブロックレベル要素</a>との違いについて説明します。</p> + +<div class="note"> +<p>インライン要素は新しい行から始まらず、必要な幅のみを占有します。</p> +</div> + +<h2 id="Inline_vs._block-level_elements_a_demonstration" name="Inline_vs._block-level_elements_a_demonstration">デモによるインライン要素とブロックレベル要素の比較</h2> + +<p>これは最も簡単なデモとシンプルな例です。最初に、使用するシンプルな CSS は以下のものです。</p> + +<pre class="brush: css">.highlight { + background-color:#ee3; +}</pre> + +<h3 id="Inline" name="Inline">インライン要素</h3> + +<p>インライン要素を紹介する以下の例を見てください。</p> + +<pre class="brush: html"><div>The following span is an <span class="highlight">inline element</span>; +its background has been colored to display both the beginning and end of +the inline element's influence.</div></pre> + +<p>この例では、ブロックレベル要素の {{HTMLElement("div")}} がいくらかのテキストを含んでいます。そのテキストの中に、インライン要素である {{HTMLElement("span")}} 要素があります。 <code><span></code> 要素はインラインなので、段落は単独で、テキストの流れを分断せずに、以下のように表示されます。</p> + +<p>{{EmbedLiveSample("Inline", 600, 80)}}</p> + +<div class="hidden"> +<p>表示上、以下の CSS も使われています (標準モードでは表示されません)。</p> + +<pre class="brush: css">body { + margin: 0; + padding: 4px; + border: 1px solid #333; +} + +.highlight { + background-color:#ee3; +}</pre> +</div> + +<h3 id="Block-level" name="Block-level">ブロックレベル要素</h3> + +<p>それでは <code><span></code> を {{HTMLElement("p")}} のようなブロックレベル要素に変更してみましょう。</p> + +<pre class="brush: html"><div>The following paragraph is a <p class="highlight">block-level element;</p> +its background has been colored to display both the beginning and end of +the block-level element's influence.</div></pre> + +<div class="hidden"> +<p>この CSS も使われています (標準モードでは表示されません)。</p> + +<pre class="brush: css">body { + margin: 0; + padding: 4px; + border: 1px solid #333; +} + +.highlight { + background-color:#ee3; +}</pre> +</div> + +<p>前回と同じ CSS を使って表示していますが、結果は以下のようになります。</p> + +<p>{{EmbedLiveSample("Block-level", 600, 150)}}</p> + +<p>違いが分かりましたか。 <code><p></code> 要素は文字列を <code><p></code> の前の文字列、 <code><p></code> の文字列、そして <code><p></code> の後の文字列と3つの部分に分割して、レイアウトを全体的に変更しました。</p> + +<h3 id="Changing_element_levels" name="Changing_element_levels">要素レベルの変更</h3> + +<p>CSS の {{cssxref("display")}} プロパティを使用すると、要素の<em>視覚表現</em>を変更することができます。例えば、 <code>display</code> の値を <code>"inline"</code> から <code>"block"</code> に変更することで、インライン要素をインラインボックスではなくブロックボックスで描画するようブラウザーに指示することができます。しかし、これによって要素の<em>カテゴリ</em>や<em>コンテンツモデル</em>が変更される訳ではありません。例えば、 <code>span</code> 要素の <code>display</code> を <code>"block"</code> に変更しても、その中に <code>div</code> 要素を含めることができるようになる訳ではありません。</p> + +<h2 id="Conceptual_differences" name="Conceptual_differences">概念上の違い</h2> + +<p>簡単に言えば、インライン要素とブロックレベル要素の基本概念の違いは以下の通りです。</p> + +<dl> + <dt>コンテンツモデル</dt> + <dd>一般に、インライン要素はデータや他のインライン要素のみを含みます。ブロック要素をインライン要素の中に置くことはできません。</dd> + <dt>整形</dt> + <dd>既定では、インライン要素は文書の流れの中で強制的に新しい行から始まりません。一方、ブロックレベル要素は一般的に改行が行われます (ただし、これは CSS を使って変更することができます)。</dd> +</dl> + +<h2 id="Elements" name="Elements">「インライン」要素の一覧</h2> + +<p>以下の要素は既定でインラインです (ただし、ブロック要素とインライン要素は HTML5 では定義されなくなり、代わりに<a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリ</a>が使用されます)。</p> + +<div class="threecolumns"> +<dl> + <dt>{{ HTMLElement("a") }}</dt> + <dt>{{ HTMLElement("abbr") }}</dt> + <dt>{{ HTMLElement("acronym") }}</dt> + <dt>{{ HTMLElement("audio") }} (視覚的なコントロールがある場合)</dt> + <dt>{{ HTMLElement("b") }}</dt> + <dt>{{ HTMLElement("bdi") }}</dt> + <dt>{{ HTMLElement("bdo") }}</dt> + <dt>{{ HTMLElement("big") }}</dt> + <dt>{{ HTMLElement("br") }}</dt> + <dt>{{ HTMLElement("button") }}</dt> + <dt>{{ HTMLElement("canvas") }}</dt> + <dt>{{ HTMLElement("cite") }}</dt> + <dt>{{ HTMLElement("code") }}</dt> + <dt>{{ HTMLElement("data") }}</dt> + <dt>{{ HTMLElement("datalist") }}</dt> + <dt>{{ HTMLElement("del") }}</dt> + <dt>{{ HTMLElement("dfn") }}</dt> + <dt>{{ HTMLElement("em") }}</dt> + <dt>{{ HTMLElement("embed") }}</dt> + <dt>{{ HTMLElement("i") }}</dt> + <dt>{{ HTMLElement("iframe") }}</dt> + <dt>{{ HTMLElement("img") }}</dt> + <dt>{{ HTMLElement("input") }}</dt> + <dt>{{ HTMLElement("ins") }}</dt> + <dt>{{ HTMLElement("kbd") }}</dt> + <dt>{{ HTMLElement("label") }}</dt> + <dt>{{ HTMLElement("map") }}</dt> + <dt>{{ HTMLElement("mark") }}</dt> + <dt>{{ HTMLElement("meter") }}</dt> + <dt>{{ HTMLElement("noscript") }}</dt> + <dt>{{ HTMLElement("object") }}</dt> + <dt>{{ HTMLElement("output") }}</dt> + <dt>{{ HTMLElement("picture") }}</dt> + <dt>{{ HTMLElement("progress") }}</dt> + <dt>{{ HTMLElement("q") }}</dt> + <dt>{{ HTMLElement("ruby") }}</dt> + <dt>{{ HTMLElement("s") }}</dt> + <dt>{{ HTMLElement("samp") }}</dt> + <dt>{{ HTMLElement("script") }}</dt> + <dt>{{ HTMLElement("select") }}</dt> + <dt>{{ HTMLElement("slot") }}</dt> + <dt>{{ HTMLElement("small") }}</dt> + <dt>{{ HTMLElement("span") }}</dt> + <dt>{{ HTMLElement("strong") }}</dt> + <dt>{{ HTMLElement("sub") }}</dt> + <dt>{{ HTMLElement("sup") }}</dt> + <dt>{{ HTMLElement("svg") }}</dt> + <dt>{{ HTMLElement("template") }}</dt> + <dt>{{ HTMLElement("textarea") }}</dt> + <dt>{{ HTMLElement("time") }}</dt> + <dt>{{ HTMLElement("u") }}</dt> + <dt>{{ HTMLElement("tt") }}</dt> + <dt>{{ HTMLElement("var") }}</dt> + <dt>{{ HTMLElement("video") }}</dt> + <dt>{{ HTMLElement("wbr") }}</dt> +</dl> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/HTML/Block-level_elements" title="ja/HTML/Block-level_elements">ブロックレベル要素</a></li> + <li><a href="/ja/docs/Web/HTML/Element">HTML 要素リファレンス</a></li> + <li>{{cssxref("display")}}</li> + <li><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリ</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">通常フローでのブロック及びインラインレイアウト</a></li> +</ul> + +<div>{{QuickLinksWithSubpages("/ja/docs/Web/HTML/")}}</div> diff --git a/files/ja/web/html/link_types/index.html b/files/ja/web/html/link_types/index.html new file mode 100644 index 0000000000..b20a3a6159 --- /dev/null +++ b/files/ja/web/html/link_types/index.html @@ -0,0 +1,364 @@ +--- +title: リンク種別 +slug: Web/HTML/Link_types +tags: + - HTML + - HTML リンク + - Reference + - リンク + - リンク種別 + - 属性 +translation_of: Web/HTML/Link_types +--- +<div>{{HTMLSidebar}}</div> + +<p><span class="seoSummary">HTML では、 {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}},{{HTMLElement("link")}} の何れかを用いて他の文書へリンクするときに、リンク種別で二つの文書間の関係を示します。</span></p> + +<table class="standard-table"> + <caption>HTML で定義されたリンク種別とその意味の一覧</caption> + <thead> + <tr> + <th scope="col">リンク種別</th> + <th scope="col">説明</th> + <th scope="col" style="width: 12em;">許可されている要素</th> + <th scope="col">許可されていない要素</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>alternate</code></td> + <td> + <ul> + <li>{{HTMLElement("link")}} 要素で {{HTMLAttrxRef("rel", "link")}} 属性が <code>stylesheet</code> である場合は、<a href="/ja/docs/Alternative_style_sheets">代替スタイルシート</a> を定義します。この場合は {{HTMLAttrxRef("title", "link")}} 属性が必須であり、空文字列にすることはできません。</li> + <li>{{HTMLAttrxRef("type","link")}} 属性を <code>application/rss+xml</code> または <code>application/atom+xml</code> に設定した場合は、<a href="/ja/docs/RSS/Getting_Started/Syndicating">シンジケーションフィード</a>を定義します。ページ内で最初に定義したものが既定になります。</li> + <li>上記以外の場合は、以下のいずれかの代替ページを定義します。 + <ul> + <li>携帯端末など、別の媒体向けのページ（{{HTMLAttrxRef("media","link")}} 属性を設定した場合）</li> + <li>別の言語のページ（{{HTMLAttrxRef("hreflang","link")}} 属性を設定した場合）</li> + <li>PDF など、別のファイル形式のページ（{{HTMLAttrxRef("type","link")}} 属性を設定した場合）</li> + <li>これらを組み合わせたもの</li> + </ul> + </li> + </ul> + </td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td>{{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>archives</code> {{Obsolete_Inline}}</td> + <td>この文書へのアーカイブリンクを含む文書へのハイパーリンクを定義します。例えばブログ記事はこの方法を使用して、月別の目次へリンクできます。<br> + <br> + <strong>注:</strong> 単数形の <code>archive</code> も認識されますが、誤りですので使用してはいけません。</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td>{{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>author</code></td> + <td>作者について説明するページへのハイパーリンク、または作者への連絡方法を定義します。<br> + <br> + <strong>注:</strong> これを <code>mailto:</code> のハイパーリンクにすることがありますが、早々にロボットが収集して大量のスパムが送信されてしまうため、公開ページでは推奨しません。このような場合、連絡フォームを設置したページに誘導するとよいでしょう。<br> + <br> + {{HTMLElement("a")}} 要素、{{HTMLElement("area")}} 要素、{{HTMLElement("link")}} 要素の {{HTMLAttrxRef("rev", "link")}} 属性でリンク種別 <code>made</code> を設定した場合も認識されますが、誤りですので {{HTMLAttrxRef("rel", "link")}} 属性にこのリンク種別を設定したものに置き換えてください。</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td>{{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>bookmark</code></td> + <td>ハイパーリンクが、もっとも近い祖先の {{HTMLElement("article")}} 要素への<a href="/ja/docs/Permalink">パーマリンク</a>であることを示します。 {{HTMLElement("article")}} 要素が存在しない場合は、もっとも密接に結びつけられた<a href="/ja/docs/Sections_and_Outlines_of_an_HTML5_document">セクション</a>へのパーマリンクになります。<br> + <br> + 月ごとのブログ記事一覧やブログアグリゲーターなど複数の記事を含むページで、単独の記事をブックマークすることができます。</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + <td>{{HTMLElement("link")}}, {{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>canonical</code></td> + <td>Wikipedia の記事「<a href="https://en.wikipedia.org/wiki/Canonical_link_element">Canonical_link_element</a>」より:<br> + canonical を指定した link 要素は、検索エンジン最適化（SEO）の一環として、「正規」または「推奨」バージョンのウェブページを特定することで、ウェブマスターが重複コンテンツの問題を防ぐのに役立ちます。</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Link_types/dns-prefetch">dns-prefetch</a></code> {{Experimental_Inline}}</td> + <td>ユーザーがリンクをクリックする前に DNS 問い合わせやプロトコルのハンドシェイクを行うことをブラウザーが許可する必要があるリソースであることを、ブラウザーにヒントとして提供します。</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>external</code></td> + <td>ページが存在するサイトの外部にあるリソースへのハイパーリンクであることを示します。つまり、現在のサイトから離れるリンクです。</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> + <td>{{HTMLElement("link")}}</td> + </tr> + <tr> + <td><code>first</code> {{Obsolete_Inline}}</td> + <td>現在のページが属する<em>一連の</em>リソース群で、最初のリソースへ移動するリンクであることを示します。<br> + <br> + <strong>注:</strong> 一連のリソースへのリンクに関するリンク種別として、この他に <code>last</code>、<code>prev</code>、<code>next</code> があります。<br> + <br> + 同義語である <code>begin</code> や <code>start</code> も認識されますが、誤りですので使用してはいけません。</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td>{{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>help</code></td> + <td> + <ul> + <li>{{HTMLElement("a")}} 又は {{HTMLElement("area")}} 要素では、親要素およびその子孫要素について詳細なヘルプを提供するリソースへのリンクであることを示します。</li> + <li>{{HTMLElement("link")}} 要素では、ページ全体について詳細なヘルプを提供するリソースへのリンクであることを示します。</li> + </ul> + </td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}, {{HTMLElement("link")}}</td> + <td><em>なし</em></td> + </tr> + <tr> + <td id="icon"><code>icon</code></td> + <td>ユーザーインターフェイス上でページを表すリソースを定義します。通常は（聴覚的あるいは視覚的な）アイコンです。ブラウザーでは、ふつう{{glossary("Favicon", "ファビコン")}}と呼ばれます。<br> + <br> + 複数の <code><link rel="icon"></code> がある場合、ブラウザーは {{HTMLAttrxRef("media","link")}}, {{HTMLAttrxRef("type","link")}}, {{HTMLAttrxRef("sizes","link")}} 属性を使用して最も適切なアイコンを選択します。もし複数のアイコンが同等に適切であれば、最後の一つが使用されます。最も適切なアイコンが後で不適切と分かった場合、例えば未対応の形式を使用していた場合などは、ブラウザーは次に適切なものを探し、以下同様にします。<br> + <br> + <strong>注:</strong> Apple の iOS は他のモバイルブラウザーと同様に、ウェブクリップやスタートアッププレースホルダ用のウェブページアイコンを選択する際に、このリンク種別や {{HTMLAttrxRef("sizes","link")}} 属性を使用しません。代わりに、標準外の <a class="external external-icon" href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4"><code>apple-touch-icon</code></a> および <a class="external external-icon" href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6"><code>apple-touch-startup-image</code></a> を使用します。<br> + <br> + <code>icon</code> より以前はリンク種別 <code>shortcut</code> がよく使用されていましたが、これは非準拠で無視されますので<strong>ウェブ作者は今後使用してはいけません</strong>。</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>import</code> {{Experimental_Inline}}</td> + <td><a href="/ja/docs/Web/Web_Components/HTML_Imports">HTML インポート</a></td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>index</code> {{Obsolete_Inline("HTML5")}}</td> + <td>当該ページは<em>階層</em>構造を持つ文書群の一部であり、階層のトップレベルのリソースへのハイパーリンクであることを示します。<br> + <br> + 一つ以上の <code>up</code> リンク種別も提示した場合は、階層内における当該ページの深さを <code>up</code> の数で示します。</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td>{{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>last</code> {{Obsolete_Inline}}</td> + <td>現在のページが属する<em>一連の</em>リソース群で、<em>最後</em>のリソースへ移動するリンクであることを示します。<br> + <br> + <strong>注:</strong> 一連のリソースへのリンクに関するリンク種別として、この他に <code>first</code>、<code>prev</code>、<code>next</code> があります。<br> + <br> + 同義語である <code>end</code> も認識されますが、誤りですので使用してはいけません。</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td>{{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>license</code></td> + <td>ライセンス情報を説明する文書へ誘導するハイパーリンクを定義します。 {{HTMLElement("head")}} 要素内に配置しない場合に、文書内の一部に適用するか文書全体にするかの区別は標準化されていません。ページ上のデータだけが、ライセンスを示すことができます。<br> + <br> + <strong>注:</strong> 同義語の <code>copyright</code> も認識されますが、誤りですので使用してはいけません。</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}, {{HTMLElement("link")}}</td> + <td><em>なし</em></td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Link_types/manifest">manifest</a></code></td> + <td>リンクしたファイルが <a href="/ja/docs/Web/Manifest">Web App Manifest</a> であることを示します。</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Link_types/modulepreload">modulepreload</a></code></td> + <td>モジュールスクリプトの読み込みを早めに (かつ優先して) 始めます。</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>next</code></td> + <td>現在のページが属する<em>一連の</em>リソース群で、<em>次</em>のリソースへ移動するリンクであることを示します。<br> + <br> + <strong>注:</strong> 一連のリソースへのリンクに関するリンク種別として、この他に <code>first</code>, <code>prev</code>, <code>last</code> があります。</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}, {{HTMLElement("link")}}</td> + <td><em>なし</em></td> + </tr> + <tr> + <td><code>nofollow</code></td> + <td>リンク先の文書は、リンク元ページの作者が推薦するものではないことを示します。例えば作者が管理しているものではない、悪い例である、あるいは二者間に営利関係がある（販売用のリンク）などです。このリンク種別は、人気ランキングの測定技術として検索エンジンが使用するかもしれません。</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> + <td>{{HTMLElement("link")}}</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Link_types/noopener">noopener</a></code></td> + <td> + <p>リンクを新しい閲覧コンテキストで開き、リンク元の文書へアクセスできないようにすることをブラウザーに指示します。つまり、新たに開いたウィンドウで {{DOMxRef("Window.opener")}} プロパティを設定しません（<code>null</code> を返します）。<br> + <br> + これは信頼できないリンクを開く際、 {{DOMxRef("Window.opener")}} プロパティでリンク元の文書を変更できないようにするために特に役に立つリンク種別です（詳しくは <a href="https://mathiasbynens.github.io/rel-noopener/">About rel=noopener</a> を参照してください）。ただし、 <code>Referer</code> HTTP ヘッダーは（<code>noreferrer</code> を使用しない限り）提供します。</p> + + <p>Note that when <code>noopener</code> is used, nonempty target names other than <code>_top</code>, <code>_self</code>, and <code>_parent</code> are all treated like <code>_blank</code> in terms of deciding whether to open a new window/tab.</p> + </td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + <td>{{HTMLElement("link")}}</td> + </tr> + <tr> + <td><code>noreferrer</code></td> + <td> + <p>別のページへ移動する際にリンク元ページのアドレスなどの値を、ブラウザーが <code>Referer:</code> HTTP ヘッダーでリファラーとして送信しないようにします。<br> + (Firefox は 37 より前のバージョンで、これがページ上のリンクでしか機能しませんでした。コンテキストメニューの [リンクを新しいタブで開く] などのユーザーインターフェイスでリンクをたどった場合は、無視していました)</p> + </td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> + <td>{{HTMLElement("link")}}</td> + </tr> + <tr> + <td><code>opener</code> {{Experimental_Inline}}</td> + <td> + <p><code>rel="noopener"</code> が <code>target="_blank"</code> のリンクに暗黙的に追加されることを防ぎます。（<a href="https://github.com/whatwg/html/issues/4078">関連する HTML 仕様書の議論</a>、 <a href="https://trac.webkit.org/changeset/237144/webkit/">WebKit の変更</a>、 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1503681">Firefox バグの議論</a>を参照）。</p> + </td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> + <td>{{HTMLElement("link")}}</td> + </tr> + <tr> + <td><code>pingback</code></td> + <td>ウェブページについてコメントや引用を行いたい場合に呼び出すための、外部リソース URI を定義します。このような呼び出しで使用するプロトコルは、<a href="http://www.hixie.ch/specs/pingback/pingback">Pingback 1.0</a> 仕様で定義しています。<br> + <br> + <strong>注</strong>: HTTP の <code>X-Pingback:</code> ヘッダーも存在する場合は、 {{HTMLElement("link")}} 要素より優先します。</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Link_types/preconnect">preconnect</a></code> {{Experimental_Inline}}</td> + <td>個人情報の開示やコンテンツのダウンロードを行わない形で、事前にリンク先のウェブサイトへの接続を開くようブラウザーに提案するヒントを提供します。これにより、リンクをたどるときにより早く読み込むことができます。</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Link_types/prefetch">prefetch</a></code></td> + <td>ユーザーが要求すると思われるため、リンク先のリソースを事前に読み込むようブラウザーに提案します。 Firefox 44 より {{HTMLAttrxRef("crossorigin", "link")}} 属性の値を考慮して、匿名のプリフェッチを可能にします。<br> + <br> + <strong>注:</strong> どのようなリンクをプリフェッチできるかや代替手段について、<a href="/ja/docs/Link_prefetching_FAQ">Link Prefetch FAQ</a> に詳しく掲載しています。</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Link_types/preload">preload</a></code></td> + <td>現在のナビゲーションの中で後に必要になるため、リソースをダウンロードしておくようブラウザーに伝えます。詳しくは <a href="/ja/docs/Web/HTML/Preloading_content">rel="preload" によるコンテンツの先読み</a>を参照してください。</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code><a href="/ja/docs/Web/HTML/Link_types/prerender">prerender</a></code> {{Experimental_Inline}}</td> + <td>事前にリンク先のリソースを読み込んでオフスクリーンでレンダリングしておくよう、ブラウザーに提案します。これにより、ユーザーがコンテンツを必要とするときにすばやく提供できます。</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>prev</code></td> + <td>現在のページが属する<em>一連の</em>リソース群で、<em>前</em>のリソースへ移動するリンクであることを示します。<br> + <br> + <strong>注:</strong> 一連のリソース内で次のページへのリンクを指定するキーワードである <code>next</code> も使用できます。<br> + <br> + 同義語である <code>previous</code> も認識されますが、誤りですので使用してはいけません。</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}, {{HTMLElement("form")}}</td> + <td><em>なし</em></td> + </tr> + <tr> + <td><code>search</code></td> + <td>ハイパーリンクが、この文書やサイトとそのリソースを検索するために特別に設計されたインターフェイスを持つ文書を参照することを示します。<br> + <br> + {{HTMLAttrxRef("type","link")}} 属性を <code>application/opensearchdescription+xml</code> に設定したリソースは、Firefox や Internet Explore などのインターフェイスへ簡単に追加できる <a href="/ja/docs/Creating_OpenSearch_plugins_for_Firefox">OpenSearch プラグイン</a> になります。</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}, {{HTMLElement("form")}}</td> + <td><em>なし</em></td> + </tr> + <tr> + <td><code>shortlink</code></td> + <td><a href="https://code.google.com/archive/p/shortlink/wikis/Specification.wiki"><code>shortlink</code> 仕様書</a><br> + Wikipedia の記事「<a href="https://en.wikipedia.org/wiki/URL_shortening">URL shortening</a>」より<br> + 一部のウェブサイトでは、インスタントメッセージングによるリンクの共有をしやすくするために、短いリンクを作成します。</td> + <td>{{HTMLElement("link")}}</td> + <td>???</td> + </tr> + <tr> + <td><code>sidebar</code> {{Non-standard_Inline}}{{Obsolete_Inline("Gecko63")}}</td> + <td><em>サイドバー</em>など、副次的な閲覧コンテキストに適したリソースへのハイパーリンクであることを示します。副次的なコンテキストを持たないブラウザーは、このキーワードを無視します。<br> + <br> + これは以前 HTML 仕様の一部でしたが削除されており、現時点では Firefox 63 より前の Firefox しか実装していません。</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td>{{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>stylesheet</code></td> + <td>スタイルシートとして使用する外部リソースを定義します。 <code>type</code> が設定されなかった場合、ブラウザーはさらなる解析を行うまで、 <code>text/css</code> スタイルシートであるとみなします。<br> + <br> + キーワード <code>alternate</code> と組み合わせて使用すると、<a href="/ja/docs/Alternative_style_sheets">代替スタイルシート</a>を定義できます。この場合は {{HTMLAttrxRef("title", "link")}} 属性が必須であり、空文字列にすることはできません。</td> + <td>{{HTMLElement("link")}}</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>tag</code></td> + <td>この文書に適用する<em>タグ</em>を説明する文書へのハイパーリンクであることを示します。<br> + <br> + <strong>注:</strong> このリンク種別は、タグクラウドの項目に設定すべきではありません。これらは単一の文書ではなく、ページの集合体へのリンクであるためです。</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}</td> + <td>{{HTMLElement("link")}}, {{HTMLElement("form")}}</td> + </tr> + <tr> + <td><code>up</code> {{Obsolete_Inline}}</td> + <td>当該ページは<em>階層</em>構造を持つ文書群の一部であり、階層の上位レベルのリソースへのハイパーリンクであることを示します。<br> + <br> + <code>up</code> リンク種別の数で、当該ページとリンク先文書の階層の差を示します。</td> + <td>{{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}}</td> + <td>{{HTMLElement("form")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Preload", "#x2.link-type-preload", "preload")}}</td> + <td>{{Spec2("Preload")}}</td> + <td><code>preload</code> を追加</td> + </tr> + <tr> + <td>{{SpecName("Resource Hints", "#dfn-preconnect", "preconnect")}}</td> + <td>{{Spec2("Resource Hints")}}</td> + <td><code>dns-prefetch</code>, <code>preconnect</code>, <code>prerender</code> の値を追加。</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "links.html#linkTypes", "link types")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td><code>opener</code> を追加し、 <code>noopener</code> を <code>target="_blank"</code> リンクの既定の動作にした。</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "links.html#linkTypes", "link types")}}</td> + <td>{{Spec2("HTML5 W3C")}}</td> + <td><code>tag</code>, <code>search</code>, <code>prefetch</code>, <code>noreferrer</code>, <code>nofollow</code>, <code>icon</code>, <code>author</code> を追加。<br> + <code>copyright</code> を <code>license</code> に変更。<br> + <code>start</code>, <code>chapter</code>, <code>section</code>, <code>subsection</code>, <code>appendix</code> を削除。</td> + </tr> + <tr> + <td>{{SpecName("HTML4.01", "types.html#type-links", "link types")}}</td> + <td>{{Spec2("HTML4.01")}}</td> + <td><code>alternate</code>, <code>stylesheet</code>, <code>start</code>, <code>chapter</code>, <code>section</code>, <code>subsection</code>, <code>appendix</code>, <code>bookmark</code> を追加。<br> + <code>previous</code> を <code>prev</code> に変更。<br> + <code>top</code>, <code>search</code> を削除。</td> + </tr> + <tr> + <td>{{SpecName("HTML3.2", "#link", "<link>")}}</td> + <td>廃止</td> + <td>Added <code>top</code>, <code>contents</code>, <code>index</code>, <code>glossary</code>, <code>copyright</code>, <code>next</code>, <code>previous</code>, <code>help</code>, and <code>search</code>.</td> + </tr> + <tr> + <td>{{RFC(1866, "HTML 2.0")}}</td> + <td>廃止</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.link.rel")}}</p> diff --git a/files/ja/web/html/microdata/index.html b/files/ja/web/html/microdata/index.html new file mode 100644 index 0000000000..0a3e0cedeb --- /dev/null +++ b/files/ja/web/html/microdata/index.html @@ -0,0 +1,175 @@ +--- +title: マイクロデータ +slug: Web/HTML/Microdata +tags: + - Composing + - Example + - HTML + - Microdata + - Reference + - SEO + - Search +translation_of: Web/HTML/Microdata +--- +<p>マイクロデータは {{glossary("WHATWG")}} HTML 標準の一部であり、ウェブページ上の既存のコンテンツ内でメタデータをネストするために使用されます。検索エンジンやウェブクローラーは、ウェブページからマイクロデータを抽出して処理し、ユーザーによ高度な閲覧操作を提供するために使用することができます。検索エンジンは、ウェブページ上の情報を理解し、ユーザーにより関連性の高い結果を提供することを可能にするため、この構造化されたデータを直接利用できることから大きな利益を得ます。マイクロデータは、値をプロパティに割り当てるためにアイテムと名前と値の組み合わせを記述するためのサポート語彙を使用します。マイクロデータは、機械可読なタグとともに HTML 要素に注釈する試みで、古い RDFa やマイクロフォーマットの同様のアプローチよりも簡単な方法を提供します。</p> + +<p>高水準では、マイクロデータは名前と値の組み合わせのグループで構成されます。このグループはアイテムと呼ばれ、それぞれの名前と値の組み合わせがプロパティとなります。アイテムとプロパティは標準の要素によって表されます。</p> + +<ul> + <li>アイテムを作成するために、 <strong>itemscope</strong> 属性を使用します。</li> + <li>アイテムにプロパティを追加するために、 <strong>itemprop </strong> 属性がアイテムの子孫の1つで使用されます。</li> +</ul> + +<h2 id="Vocabularies" name="Vocabularies">語彙</h2> + +<p>Google をはじめとする主要な検索エンジンは、構造化されたデータ <a href="https://schema.org">Schema.org</a> に対応しています。この語彙は、タイプ名やプロパティ名の標準セットを定義しています。たとえば、 <a href="http://schema.org/MusicEvent">Schema.org Music Event</a> はコンサートを表し、 <a href="http://schema.org/startDate">startDate</a> と <a href="http://schema.org/location">location</a> プロパティをコンサートの主要な詳細を指定するために併用します。この場合、 <a href="http://schema.org/MusicEvent">Schema.org Music Event</a> は itemtype によって使用される URL となり、 startDate と location は <a href="http://schema.org/MusicEvent">Schema.org Music Event</a> が定義する itemprop になります。</p> + +<div class="note"> +<p><strong>注:</strong> itemtype 属性の詳細は <a href="http://schema.org/Thing">http://schema.org/Thing</a> にあります。</p> +</div> + +<p>マイクロデータの語彙は、アイテムのセマンティックスや意味を提供します。ウェブ開発者は専用の語彙を設計したり、 <a href="http://schema.org">schema.org</a> のような広く使用されている語彙を利用したりすることができます。よく使用されるマークアップ語彙のコレクションは、 Schema.org によって提供されます。</p> + +<p>よく使用される語彙:</p> + +<ul> + <li>創作物: <a href="http://schema.org/CreativeWork">CreativeWork</a>, <a href="http://schema.org/Book">Book</a>, <a href="http://schema.org/Movie">Movie</a>, <a href="http://schema.org/MusicRecording">MusicRecording</a>, <a href="http://schema.org/Recipe">Recipe</a>, <a href="http://schema.org/TVSeries">TVSeries</a></li> + <li>埋め込み非テキストオブジェクト: <a href="http://schema.org/AudioObject">AudioObject</a>, <a href="http://schema.org/ImageObject">ImageObject</a>, <a href="http://schema.org/VideoObject">VideoObject</a></li> + <li><a href="http://schema.org/Event">Event</a></li> + <li><a href="http://schema.org/docs/meddocs.html">健康と医療タイプ</a>: <a href="http://schema.org/MedicalEntity">MedicalEntity</a> の下の健康と医療タイプに注目してください</li> + <li><a href="http://schema.org/Organization">Organization</a></li> + <li><a href="http://schema.org/Person">Person</a></li> + <li><a href="http://schema.org/Place">Place</a>, <a href="http://schema.org/LocalBusiness">LocalBusiness</a>, <a href="http://schema.org/Restaurant">Restaurant</a></li> + <li><a href="http://schema.org/Product">Product</a>, <a href="http://schema.org/Offer">Offer</a>, <a href="http://schema.org/AggregateOffer">AggregateOffer</a></li> + <li><a href="http://schema.org/Review">Review</a>, <a href="http://schema.org/AggregateRating">AggregateRating</a></li> + <li><a href="http://schema.org/Action">Action</a></li> + <li><a href="http://schema.org/Thing">Thing</a></li> + <li><a href="http://schema.org/Intangible">Intangible</a></li> +</ul> + +<p>Google、Microsoft、Yahoo! のような主要な検索エンジンの管理者は、検索結果を改良するために <a href="http://schema.org/">schema.org</a> を頼りにしています。目的によってはその場で作成した語彙が適切です。それ以外の目的には、語彙を設計する必要があります。可能であれば、著者は簡単にコンテンツを再利用できるように、既存の語彙を再利用することを勧めます。</p> + +<h2 id="Localization" name="Localization">ローカライズ</h2> + +<p>ある場合に、特定の領域をカバーする検索エンジンはマイクロデータの地域に固有な拡張を提供するかもしれません。例えば、ロシアのメジャーな検索エンジンである <a href="https://www.yandex.com/">Yandex </a>は、 hCard (会社の連絡先情報)、 hRecipe (料理のレシピ)、 hReview (マーケットのレビュー)、 hProduct (製品データ) のような microformat をサポートし、用語の定義や百科事典の記事について独自フォーマットを提供しています。この拡張は、キリル文字とラテン文字の間の文字変換の問題を解決するためになされました。スキーマ語彙の追加マーキングパラメータの実装により、ロシア語のウェブページにおける情報のインデックス化は、かなりの成功を収めました。</p> + +<h2 id="Global_attributes" name="Global_attributes">グローバル属性</h2> + +<p><a href="/ja/docs/Web/HTML/Global_attributes/itemid">itemid</a> – 一意の、アイテムのグローバル識別子。</p> + +<p><a href="/ja/docs/Web/HTML/Global_attributes/itemprop">itemprop</a> – アイテムにプロパティを追加するために用います。すべての HTML 要素は、 itemprop が名前と値のペアから構成する、 itemprop 属性を指定することができます。</p> + +<p><a href="/ja/docs/Web/HTML/Global_attributes/itemref">itemref</a> – <code>itemscope</code> 属性をもつ要素の子孫でないプロパティは、itemref を用いてアイテムと関連付けることができます。itemref は、要素の id (<code>itemid</code>ではなく) のリストに文書の他の場所で追加のプロパティを提供します。</p> + +<p><a href="/ja/docs/Web/HTML/Global_attributes/itemscope">itemscope</a> – itemscope は、ブロックに含まれる HTML が特定のアイテムであることを記述するために <a href="/ja/docs/Web/HTML/Global_attributes/itemtype">itemtype</a> と共に (通常) 動作します。 itemscope はアイテムを作成し、アイテムに関連付けられる itemtype の範囲を定義します。 itemtype は、アイテムとアイテムのプロパティのコンテキストを説明する (<a class="external external-icon" href="http://schema.org/">schema.org</a> のような) 語彙の妥当なURLとなります。</p> + +<p><a href="/ja/docs/Web/HTML/Global_attributes/itemtype">itemtype </a>– データ構造で itemprop の語彙 (アイテムのプロパティ) を定義するために使用される語彙の URL を指定します。<a href="/ja/docs/Web/HTML/Global_attributes/itemscope">itemscope </a> は、 itemtype によって設定される語彙がアクティブとなるデータ構造の範囲を設定するために使用されます。</p> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div itemscope itemtype="http://schema.org/SoftwareApplication"> + <span itemprop="name">Angry Birds</span> - + + REQUIRES <span itemprop="operatingSystem">ANDROID</span><br> + <link itemprop="applicationCategory" href="http://schema.org/GameApplication"/> + + <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> + RATING: + <span itemprop="ratingValue">4.6</span> ( + <span itemprop="ratingCount">8864</span> ratings ) + </div> + + <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> + Price: $<span itemprop="price">1.00</span> + <meta itemprop="priceCurrency" content="USD" /> + </div> +</div></pre> + +<h3 id="Structured_data" name="Structured_data">構造化データ</h3> + +<div class="VIpgJd-VgwJlc-bN97Pc"> +<div class="ibnC6b-sM5MNb"> +<div class="NbYDle"> +<div class="SmKAyb-jyrRxf IQ5j-oKdM2c" style="padding-left: 0px;"> +<div class="jyrRxf-eEDwDf l5asRc"> +<table class="standard-table"> + <tbody> + <tr> + <td colspan="1" rowspan="4">itemscope</td> + <td>itemtype</td> + <td colspan="2" rowspan="1"><span>SoftwareApplication (</span>http://schema.org/SoftwareApplication)</td> + </tr> + <tr> + <td>itemprop</td> + <td><span>name</span></td> + <td><span>Angry Birds</span></td> + </tr> + <tr> + <td>itemprop</td> + <td><span>operatingSystem</span></td> + <td><span>ANDROID</span></td> + </tr> + <tr> + <td>itemprop</td> + <td><span>applicationCategory</span></td> + <td><span>GameApplication (http://schema.org/GameApplication)</span></td> + </tr> + <tr> + <td colspan="1" rowspan="3">itemscope</td> + <td>itemprop[itemtype]</td> + <td colspan="2" rowspan="1"><span>aggregateRating</span> [<span>AggregateRating</span>]</td> + </tr> + <tr> + <td>itemprop</td> + <td><span>ratingValue</span></td> + <td><span>4.6</span></td> + </tr> + <tr> + <td>itemprop</td> + <td><span>ratingCount</span></td> + <td><span>8864</span></td> + </tr> + <tr> + <td colspan="1" rowspan="3">itemscope</td> + <td>itemprop[itemtype]</td> + <td colspan="2" rowspan="1"><span>offers</span> [<span>Offer</span>]</td> + </tr> + <tr> + <td>itemprop</td> + <td><span>price</span></td> + <td><span>1.00</span></td> + </tr> + <tr> + <td>itemprop</td> + <td><span>priceCurrency</span></td> + <td><span>USD</span></td> + </tr> + </tbody> +</table> +</div> +</div> +</div> +</div> +</div> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{ EmbedLiveSample('HTML', '', '100', '', 'Web/HTML/Microdata') }}</p> + +<div class="note"> +<p><strong>注</strong>: HTML からマイクロデータを抽出するための便利なツールとして、 Google の<a href="https://developers.google.com/structured-data/testing-tool/ Structured Data Testing Tool">構造化データテストツール</a>があります。上に示した HTML 上で試してみてください。</p> +</div> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p>Firefox 16 で対応しました。 Firefox 49 で削除されました。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></li> +</ul> + +<p>{{QuickLinksWithSubpages("/ja/docs/Web/HTML")}}</p> diff --git a/files/ja/web/html/microformats/index.html b/files/ja/web/html/microformats/index.html new file mode 100644 index 0000000000..fa21d22000 --- /dev/null +++ b/files/ja/web/html/microformats/index.html @@ -0,0 +1,462 @@ +--- +title: マイクロフォーマット +slug: Web/HTML/microformats +tags: + - HTML + - Microformat + - NeedsContent + - NeedsMarkupWork + - Reference +translation_of: Web/HTML/microformats +--- +<h2 id="Summary" name="Summary">概要</h2> + +<p><span class="seoSummary"><ruby><a href="http://microformats.org/"><dfn>マイクロフォーマット</dfn></a><rp> (</rp><rt>Microformat</rt><rp>)</rp></ruby> (<strong>μF</strong> と略記されることもあります) は、意味情報と構造化データを HTML に埋め込むために使用される規格で、検索エンジンやアグリゲーター、その他のツールが使用するための API を提供します。HTML のこれらの最小限のパターンは、人、組織、イベント、場所などの基本的な情報からドメイン固有の情報まで、さまざまなものをマークアップするために使用されます。マイクロフォーマットは、オブジェクトを記述するためにサポートする語彙を使用し、そのプロパティに値を割り当てるために名前と値のペアを使用します。プロパティはクラス属性で運ばれ、任意の HTML 要素に追加することができ、データ値は HTML 要素のコンテンツとセマンティック属性を再利用します。マイクロフォーマット 2 はマイクロフォーマットの更新版で、HTML の構造化された構文や語彙に注釈を付けるために新しい属性を学習する必要がある RDFa やマイクロデータを使用する以前のアプローチよりもシンプルな方法を提供します。</span></p> + +<p>マイクロフォーマットは、すべての主要な検索エンジンが対応しています。検索エンジンは、この構造化データに直接アクセスすることで、ウェブページ上の情報を理解し、より関連性の高い結果をユーザーに提供することができるため、大きな利益を得ることができます。マイクロフォーマットは機械可読性があることにくわえ、人間も簡単に読めるように設計されています。</p> + +<ul> + <li>マイクロフォーマットのオブジェクトを生成するには、class 属性に h-* というクラス名を付けてください。</li> + <li>オブジェクトへプロパティを追加するには、p-*, u-*, dt-*, e-* のクラス名がオブジェクトの子孫の一つに使用されます。</li> +</ul> + +<p>マイクロフォーマット 2 には<a href="http://microformats.org/wiki/microformats2#Parsers">オープンソースの主要言語における解釈ライブラリ</a>があります。</p> + +<h2 id="How_Microformats_Work" name="How_Microformats_Work"><span id="How_do_Microformats_Work">マイクロフォーマットはどのように動作するのか</span></h2> + +<p>An author of a webpage can add microformats to their HTML. For example if they wanted to identify themselves they could use an <a href="http://microformats.org/wiki/h-card">h-card</a> such as:</p> + +<h3 id="HTML_Example" name="HTML_Example">HTML の例</h3> + +<div dir="ltr" style="text-align: left;"> +<pre class="source-html4strict notranslate"><a class="h-card" href="http://alice.example.com">Alice Blogger</a></pre> + +<p>When a parser encounters this data, it will know that this page contains a "card" which describes a person or organization named <code>Alice Blogger</code> with a URL of <code>http://alice.example.com/</code>. The parser makes this data available via APIs that can be used for different applications.</p> + +<p>As in this example, some markup patterns require only a single microformat root class name, which parsers use to find a few generic properties such as <code>name</code>, <code>url</code>, <code>photo</code>.</p> +</div> + +<h2 id="Microformats_Prefixes" name="Microformats_Prefixes">マイクロフォーマットの接頭辞</h2> + +<p>All microformats consist of a root, and a collection of properties. Properties are all optional and potentially multivalued - applications needing a singular value may use the first instance of a property. Hierarchical data is represented with nested microformats, typically as property values themselves.</p> + +<p>All microformats class names use prefixes. Prefixes are <strong>syntax independent from vocabularies</strong>, which are developed separately.</p> + +<ul> + <li><strong>"h-*" for root class names</strong>, e.g. "h-card", "h-entry", "h-feed", and many more. These top-level root classes usually indicate a type and corresponding expected vocabulary of properties. For example: + + <ul> + <li><a href="http://microformats.org/wiki/h-card">h-card</a> describes a person or organization</li> + <li><a href="http://microformats.org/wiki/h-entry">h-entry</a> describes episodic or date stamped online content like a blog post</li> + <li><a href="http://microformats.org/wiki/h-feed">h-feed</a> describes a stream or feed of posts</li> + <li>You can find many more <a href="http://microformats.org/wiki/microformats2#v2_vocabularies">vocabularies on the microformats2 wiki.</a></li> + </ul> + </li> + <li><strong>"p-*" for plain (text) properties</strong>, e.g. "p-name", "p-summary" + <ul> + <li>Generic plain text parsing, element text in general. On certain HTML elements, use special attributes first, e.g. img/alt, abbr/title.</li> + </ul> + </li> + <li><strong>"u-*" for URL properties</strong>, e.g. "u-url", "u-photo", "u-logo" + <ul> + <li>Special parsing: element attributes a/href, img/src, object/data etc. attributes over element contents.</li> + </ul> + </li> + <li><strong>"dt-*" for datetime properties</strong>, e.g. "dt-start", "dt-end", "dt-bday" + <ul> + <li>Special parsing: time element datetime attribute, <a href="http://microformats.org/wiki/value-class-pattern" title="value-class-pattern">value-class-pattern</a> and separate date time value parsing for readability.</li> + </ul> + </li> + <li><strong>"e-*" for element tree properties</strong> where the entire contained element hierarchy is the value, e.g. "e-content". The "e-" prefix can also be mnemonically remembered as "element tree", "embedded markup", or "encapsulated markup".</li> +</ul> + +<h2 id="Some_microformats_examples" name="Some_microformats_examples">マイクロフォーマットの例</h2> + +<h3 id="h-card" name="h-card">h-card</h3> + +<p>The <a href="http://microformats.org/wiki/h-card">h-card</a> microformat represents a a person or organization.</p> + +<p>The value of each property is defined in HTML using the class property any element can carry</p> + +<h4 id="Example_h-card" name="Example_h-card">h-card の例</h4> + +<div dir="ltr" style="text-align: left;"> +<pre class="source-html4strict notranslate"><p class="h-card"> + <img class="u-photo" src="http://example.org/photo.png" alt="" /> + <a class="p-name u-url" href="http://example.org">Joe Bloggs</a> + <a class="u-email" href="mailto:joebloggs@example.com">joebloggs@example.com</a>, + <span class="p-street-address">17 Austerstræti</span> + <span class="p-locality">Reykjavík</span> + <span class="p-country-name">Iceland</span> +</p></pre> +</div> + +<table class="standard-table"> + <tbody> + <tr> + <th>プロパティ</th> + <th>説明</th> + </tr> + <tr> + <td><strong><code>p-name</code></strong></td> + <td>The full/formatted name of the person or organization.</td> + </tr> + <tr> + <td><strong><code>u-email</code></strong></td> + <td>email address</td> + </tr> + <tr> + <td><strong><code>u-photo</code></strong></td> + <td>a photo of the person or organization</td> + </tr> + <tr> + <td><strong><code>u-url</code></strong></td> + <td>home page or other URL representing the person or organization</td> + </tr> + <tr> + <td><strong><code>u-uid</code></strong></td> + <td>universally unique identifier, preferably canonical URL</td> + </tr> + <tr> + <td><strong><code>p-street-address</code></strong></td> + <td>street number + name</td> + </tr> + <tr> + <td><strong><code>p-locality</code></strong></td> + <td>city/town/village</td> + </tr> + <tr> + <td><strong><code>p-country-name</code></strong></td> + <td>country name</td> + </tr> + </tbody> +</table> + +<h4 id="Nested_h-card_example" name="Nested_h-card_example">入れ子になった h-card の例</h4> + +<div dir="ltr" style="text-align: left;"> +<pre class="source-html4strict notranslate"><div class="h-card"> + <a class="p-name u-url" + href="http://blog.lizardwrangler.com/" + >Mitchell Baker</a> + (<a class="p-org h-card" + href="http://mozilla.org/" + >Mozilla Foundation</a>) +</div></pre> +</div> + +<p>Parsed JSON:</p> + +<div dir="ltr" style="text-align: left;"> +<pre class="source-javascript notranslate">{ + "items": [{ + "type": ["h-card"], + "properties": { + "name": ["Mitchell Baker"], + "url": ["http://blog.lizardwrangler.com/"], + "org": [{ + "value": "Mozilla Foundation", + "type": ["h-card"], + "properties": { + "name": ["Mozilla Foundation"], + "url": ["http://mozilla.org/"] + } + }] + } + }] +}</pre> +</div> + +<p>Note: the nested h-card has implied 'name' and 'url' properties, just like any other root-class-name-only h-card on an <code><a href></code> would.</p> + +<h3 id="h-entry" name="h-entry">h-entry</h3> + +<p>The <a href="http://microformats.org/wiki/h-entry">h-entry</a> microformat represents episodic or datestamped content on the web. h-entry is often used with content intended to be syndicated, e.g. blog posts.</p> + +<p>Example h-entry as a blog post:</p> + +<div dir="ltr" style="text-align: left;"> +<pre class="source-html4strict notranslate"><article class="h-entry"> + <h1 class="p-name">Microformats are amazing</h1> + <p>Published by <a class="p-author h-card" href="http://example.com">W. Developer</a> + on <time class="dt-published" datetime="2013-06-13 12:00:00">13<sup>th</sup> June 2013</time></p> + + <p class="p-summary">In which I extoll the virtues of using microformats.</p> + + <div class="e-content"> + <p>Blah blah blah</p> + </div> +</article></pre> + +<h4 id="Properties" name="Properties">プロパティ</h4> +</div> + +<table class="standard-table"> + <tbody> + <tr> + <th>プロパティ</th> + <th>説明</th> + </tr> + <tr> + <td><strong><code>p-name</code></strong></td> + <td>entry name/title</td> + </tr> + <tr> + <td><strong><code>p-author</code></strong></td> + <td>who wrote the entry, optionally embedded h-card</td> + </tr> + <tr> + <td><strong><code>dt-published</code></strong></td> + <td>when the entry was published</td> + </tr> + <tr> + <td><strong><code>p-summary</code></strong></td> + <td>short entry summary</td> + </tr> + <tr> + <td><strong><code>e-content</code></strong></td> + <td>full content of the entry</td> + </tr> + </tbody> +</table> + +<h4 id="Parsed_reply_h-entry_example" name="Parsed_reply_h-entry_example">Parsed reply h-entry example</h4> + +<pre id="line1"><div class="<a class="attribute-value">h-entry</a>"> + <p><span class="p-author h-card"> + <a href="<a class="attribute-value">https://quickthoughts.jgregorymcverry.com/profile/jgmac1106</a>" ><img class="<a class="attribute-value">u-photo</a>" src="<a class="attribute-value">https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg</a>"/></a> + <a class="<a class="attribute-value">p-name u-url</a>" href="<a class="attribute-value">https://quickthoughts.jgregorymcverry.com/profile/jgmac1106</a>">Greg McVerry</a></span> + Replied to <a class="<a class="attribute-value">u-in-reply-to</a>" href="<a class="attribute-value">https://developer.mozilla.org/ja/docs/Web/HTML/microformats</a>">a post on + <strong>developer.mozilla.org</strong> </a>: + </p> + <p class="<a class="attribute-value">p-name e-content</a>">Hey thanks for making this microformats resource</p> + <p> <a href="<a class="attribute-value">https://quickthoughts.jgregorymcverry.com/profile/jgmac1106</a>">Greg McVerry</a> + published this <a class="<a class="attribute-value">u-url url</a>" href="<a class="attribute-value">https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource</a>"><time class="<a class="attribute-value">dt-published</a>" + datetime="<a class="attribute-value">2019-05-31T14:19:09+0000</a>">31 May 2019</time></a></p> +</div></pre> + +<div class="panelContent"> +<pre class="data notranslate">{ + "items": [ + { + "type": [ "h-entry" ], + "properties": { + "in-reply-to": [ "https://developer.mozilla.org/ja/docs/Web/HTML/microformats" ], + "name": [ "Hey thanks for making this microformats resource" ], + "url": [ "https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource" ], + "published": [ "2019-05-31T14:19:09+0000" ], + "content": [ + { + "html": "Hey thanks for making this microformats resource", + "value": "Hey thanks for making this microformats resource", + "lang": "en" + } + ], + "author": [ + { + "type": [ "h-card" ], + "properties": { + "name": [ "Greg McVerry" ], + "photo": [ "https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg" ], + "url": [ "https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ] + }, + "lang": "en", + "value": "Greg McVerry" + } + ] + }, + "lang": "en" + }</pre> +</div> + +<h3 id="h-feed" name="h-feed">h-feed</h3> + +<p>The <a href="http://microformats.org/wiki/h-feed">h-feed</a> is a stream or feed of <a href="http://microformats.org/wiki/h-entry" title="h-entry">h-entry</a> posts, like complete posts on a home page or archive pages, or summaries or other brief lists of posts</p> + +<h4 id="Example_h-feed" name="Example_h-feed">Example h-feed</h4> + +<div dir="ltr" style="text-align: left;"> +<pre class="source-html4strict notranslate"><div class="h-feed"> + <h1 class="p-name">Microformats Blogs</h1> + <article class="h-entry"> + <h2 class="p-name">Microformats are amazing</h2> + <p>Published by <a class="p-author h-card" href="http://example.com">W. Developer</a> + on <time class="dt-published" datetime="2013-06-13 12:00:00">13<sup>th</sup> June 2013</time> + </p> + <p class="p-summary">In which I extoll the virtues of using microformats.</p> + <div class="e-content"> <p>Blah blah blah</p> </div> + </article> +</div></pre> +</div> + +<h4 id="Properties_2" name="Properties_2">プロパティ</h4> + +<table class="standard-table"> + <tbody> + <tr> + <th>プロパティ</th> + <th>説明</th> + </tr> + <tr> + <td><strong><code>p-name</code></strong></td> + <td>name of the feed</td> + </tr> + <tr> + <td><strong><code>p-author</code></strong></td> + <td>author of the feed, optionally embed an h-card</td> + </tr> + </tbody> +</table> + +<h4 id="Children" name="Children">Children</h4> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>Nested h-entry</strong></td> + <td></td> + </tr> + <tr> + <td>objects representing the items of the feed</td> + <td></td> + </tr> + </tbody> +</table> + +<h3 id="h-event" name="h-event">h-event</h3> + +<p>The <code>h-event</code> is for events on the web. h-event is often used with both event listings and individual event pages</p> + +<div dir="ltr" style="text-align: left;"> +<pre class="source-html4strict notranslate"><div class="h-event"> + <h1 class="p-name">Microformats Meetup</h1> + <p>From + <time class="dt-start" datetime="2013-06-30 12:00">30<sup>th</sup> June 2013, 12:00</time> + to <time class="dt-end" datetime="2013-06-30 18:00">18:00</time> + at <span class="p-location">Some bar in SF</span></p> + <p class="p-summary">Get together and discuss all things microformats-related.</p> +</div></pre> +</div> + +<h4 id="Properties_3" name="Properties_3">プロパティ</h4> + +<table class="standard-table"> + <tbody> + <tr> + <th>プロパティ</th> + <th>説明</th> + </tr> + <tr> + <td><strong><code>p-name</code></strong></td> + <td>event name (or title)</td> + </tr> + <tr> + <td><strong><code>p-summary</code></strong></td> + <td>short summary of the event</td> + </tr> + <tr> + <td><strong><code>dt-start</code></strong></td> + <td>datetime the event starts</td> + </tr> + <tr> + <td><strong><code>dt-end</code></strong></td> + <td>datetime the event ends</td> + </tr> + <tr> + <td><strong><code>p-location</code></strong></td> + <td>where the event takes place, optionally embedded h-card</td> + </tr> + </tbody> +</table> + +<h4 id="Parsed_h-event_Example" name="Parsed_h-event_Example">Parsed h-event Example</h4> + +<div dir="ltr" style="text-align: left;"> +<pre class="notranslate"><div class="h-event"> + <h2 class="p-name">IndieWeb Summit</h2> + <time class="dt-start" datetime="2019-06-29T09:00:00-07:00">June 29, 2019 at 9:00am (-0700)</time><br>through <time class="dt-end" datetime="2019-06-30T18:00:00-07:00">June 30, 2019 at 6:00pm (-0700)</time><br> + <div class="p-location h-card"> + <div> + <span class="p-name">Mozilla</span> + </div> + <div> + <span class="p-street-address">1120 NW Couch St</span>, + <span class="p-locality">Portland</span>, + <span class="p-region">Oregon</span>, + <span class="p-country">US</span> + </div> + <data class="p-latitude" value="45.52345"></data> + <data class="p-longitude" value="-122.682677"></data> + </div> + <div class="e-content">Come join us + </div> + <div> + <span class="p-author h-card"><a class="u-url p-name" href="https://aaronparecki.com">Aaron Parecki</a></span> Published this <a href="https://aaronparecki.com/2019/06/29/1/" class="u-url">event </a>on <time class="dt published" datetime="2019-05-25T18:00:00-07:00">May 5th, 2019</time> + </div> +</div></pre> + +<div class="panelContent"> +<pre class="data notranslate">{ + "items": [ + { + "type": [ "h-event" ], + "properties": { + "name": [ "IndieWeb Summit" ], + "url": [ "https://aaronparecki.com/2019/06/29/1/" ], + "author": [ + { + "type": [ "h-card" ], + "properties": { + "name": [ "Aaron Parecki" ], + "url": [ "https://aaronparecki.com"] + }, + "lang": "en", + "value": "Aaron Parecki" + } + ], + "start": [ "2019-06-29T09:00:00-07:00" ], + "end": [ "2019-06-30T18:00:00-07:00" ], + "published": [ "2019-05-25T18:00:00-07:00" ], + "content": [ + { + "html": "Come join us", + "value": "Come join us", + "lang": "en" + } + ], + "location": [ + { + "type": [ "h-card" ], + "properties": { + "name": [ "Mozilla" ], + p-street-address: [ "1120 NW Couch St" ] + "locality": [ "Portland" ], + "region": [ "Oregon" ], + "country": [ "US" ], + "latitude": [ "45.52345" ], + "longitude": [ "-122.682677" ] + }, + "lang": "en", + "value": "Mozilla" + } + ] + }, + "lang": "en" + } + ],</pre> +</div> +</div> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p>すべてのブラウザーが class 属性と DOM API に対応していることにより対応しています。</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/HTML/Global_attributes/class">class 属性</a></li> + <li>Wikipedia の {{interwiki("wikipedia", "Microformat")}}</li> + <li><a href="http://microformats.org/">Microformats 公式ウェブサイト</a></li> + <li><a href="http://microformats.org/wiki/search_engines">Search engines support</a> on Microformats official website</li> + <li><a href="https://indiewebcamp.com/microformats">Microformats on IndieWebCamp</a></li> +</ul> diff --git a/files/ja/web/html/preloading_content/index.html b/files/ja/web/html/preloading_content/index.html new file mode 100644 index 0000000000..71b388638b --- /dev/null +++ b/files/ja/web/html/preloading_content/index.html @@ -0,0 +1,243 @@ +--- +title: rel="preload" によるコンテンツの先読み +slug: Web/HTML/Preloading_content +tags: + - Guide + - HTML + - JavaScript + - Link + - Media + - Performance + - Web Performance + - as + - preload + - rel +translation_of: Web/HTML/Preloading_content +--- +<p class="summary">{{htmlelement("link")}} 要素の {{htmlattrxref("rel", "link")}} 属性で <code>preload</code> を指定すると、 HTML の {{htmlelement("head")}} 要素内で読み込みリクエストを宣言し、ページのライフサイクルの早期の、ブラウザーの主なレンダリング機構が起動する前に読み込みを始めたい、すぐに必要なリソースを指定することができます。これにより、そのリソースがより早く利用でき、ページのレンダリングがブロックされにくくなり、性能が向上します。</p> + +<p class="summary">この記事では <code><link rel="preload"></code> がどのように動作するのかについての基本的なガイドを提供します。</p> + +<h2 id="The_basics" name="The_basics">基本概念</h2> + +<p>多くの場合は以下のように、 <code><link></code> を使用して CSS ファイルを読み込み、ページにスタイルを適用します。</p> + +<pre class="brush: html notranslate"><link rel="stylesheet" href="styles/main.css"></pre> + +<p>しかしここで、 <code>rel</code> の値に <code>preload</code> を使用すると、 <code><link></code> 要素は利用したいあらゆるリソースの先読み指示になります。以下のものも指定する必要があります。</p> + +<ul> + <li>リソースへのパスを {{htmlattrxref("href", "link")}} 属性へ。</li> + <li>リソースの種類を {{htmlattrxref("as", "link")}} 属性へ。</li> +</ul> + +<p>簡単な例は以下のようになります (<a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/js-and-css">JS と CSS のサンプルコード</a> および <a href="https://mdn.github.io/html-examples/link-rel-preload/js-and-css/">デモ</a>) も参照してください)。</p> + +<pre class="brush: html notranslate"><head> + <meta charset="utf-8"> + <title>JS and CSS preload example</title> + + <link rel="preload" href="style.css" as="style"> + <link rel="preload" href="main.js" as="script"> + + <link rel="stylesheet" href="style.css"> +</head> + +<body> + <h1>bouncing balls</h1> + <canvas></canvas> + + <script src="main.js" defer></script> +</body></pre> + +<p>ここで CSS ファイルと JavaScript ファイルを先読みするので、その後のページのレンダリングで必要な時には、すぐに利用できるようになります。ブラウザーはおそらく、 <code><link rel="stylesheet"></code> と <code><script></code> 要素を HTML 内の同じチャンクで見つけるので、この例は極端ですが、後に現れるリソースであるほど、また大きいリソースであるほど効果が見られる可能性があります。例えば以下の場合です。</p> + +<ul> + <li>フォントや画像など、 CSS の中から指しているリソース</li> + <li>JSON やインポートされたスクリプト、ウェブワーカーなどの JavaScript がリクエストする可能性があるリソース</li> + <li>より大きな画像や動画ファイル。</li> +</ul> + +<p><code>preload</code> には他の利点もあります。 <code>as</code> によって先読みされるコンテンツの種類をブラウザーに指示することで、以下のようなことが実現できます。</p> + +<ul> + <li>リソースの読み込みの優先付けがより正確にできます。</li> + <li>可能であれば、将来のリクエストのためにキャッシュに格納してリソースを再利用します。</li> + <li>リソースに対して正しく<a href="/ja/docs/Web/HTTP/CSP">コンテンツセキュリティポリシー</a>を適用できます。</li> + <li>正しい {{HTTPHeader("Accept")}} リクエストヘッダーを設定できます。</li> +</ul> + +<h3 id="What_types_of_content_can_be_preloaded" name="What_types_of_content_can_be_preloaded">先読みできるコンテンツの種類</h3> + +<p>さまざまな種類のコンテンツが先読みできます。 <code>as</code> 属性で使用できる値は以下の通りです。</p> + +<ul> + <li><code>audio</code>: 通常は {{htmlelement("audio")}} で使用される音声ファイル。</li> + <li><code>document</code>: {{htmlelement("frame")}} や {{htmlelement("iframe")}} に埋め込まれる HTML 文書。</li> + <li><code>embed</code>: {{htmlelement("embed")}} 要素の中に埋め込まれるリソース。</li> + <li><code>fetch</code>: ArrayBuffer や JSON ファイルのような、フェッチまたは XHR 要求でアクセスされるリソース。</li> + <li><code>font</code>: フォントファイル。</li> + <li><code>image</code>: 画像ファイル。</li> + <li><code>object</code>: {{htmlelement("object")}} 要素の中に埋め込まれるリソース。</li> + <li><code>script</code>: JavaScript ファイル。</li> + <li><code>style</code>: CSS スタイルシート。</li> + <li><code>track</code>: WebVTT ファイル。</li> + <li><code>worker</code>: JavaScript ウェブワーカーまたは共有ワーカー。</li> + <li><code>video</code>: 通常は {{htmlelement("video")}} で使用される動画ファイル。</li> +</ul> + +<div class="note"> +<p><strong>メモ</strong>: 使用されると予想されるこれらの値やウェブ機能について、もっと詳細は Preload の仕様書にあります。 — <a href="https://w3c.github.io/preload/#link-element-extensions">link element extensions</a> を参照してください。また、フェッチの仕様書で管理されている <code>as</code> 属性の値の完全な一覧は、 <a href="https://fetch.spec.whatwg.org/#concept-request-destination">request destinations</a> を参照してください。</p> +</div> + +<h2 id="Including_a_MIME_type" name="Including_a_MIME_type">MIME タイプを含める</h2> + +<p><code><link></code> 要素は {{htmlattrxref("type", "link")}} 要素を受け付け、要素が指す先のリソースの MIME タイプを指定することができます。これは特にリソースの先読み時に便利です。 — ブラウザーは <code>type</code> 属性の値を使用して対応しているリソースであるかどうかを確認し、その場合だけダウンロードを開始し、そうでない場合は開始しないようにすることができます。</p> + +<p>この例を動画のデモで見ることができます (<a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/video">ソースコード全体</a>と<a href="https://mdn.github.io/html-examples/link-rel-preload/video/">デモ版</a>もご覧ください。)。</p> + +<pre class="brush: html notranslate"><head> + <meta charset="utf-8"> + <title>Video preload example</title> + + <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4"> +</head> +<body> + <video controls> + <source src="sintel-short.mp4" type="video/mp4"> + <source src="sintel-short.webm" type="video/webm"> + <p>Your browser doesn't support HTML5 video. Here is a <a href="sintel-short.mp4">link to the video</a> instead.</p> + </video> +</body></pre> + +<p>この場合、MP4 をサポートしているブラウザーは MP4 を先読みして使用し、ユーザーにとって動画プレイヤーをよりスムーズまたはレスポンシブにできるでしょう。ブラウザーが MP4 をサポートしていない場合は WebM バージョンを読み込みますが、先読みの利点は得られません。これは、どのように先読みコンテンツがプログレッシブエンハンスメントの哲学と結ばれているかを示しています。</p> + +<h2 id="Cross-origin_fetches" name="Cross-origin_fetches">オリジンをまたいだフェッチ</h2> + +<p>If you've got your sites' <a href="/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a> settings worked out properly, you can successfully preload cross-origin resources as long as you set a {{htmlattrxref("crossorigin","link")}} attribute on your <code><link></code> element.</p> + +<p>One interesting case where this applies, even if the fetch is not cross-origin, is font files. Because of various reasons, these have to be fetched using anonymous mode CORS (see <a href="https://drafts.csswg.org/css-fonts/#font-fetching-requirements">Font fetching requirements</a>).</p> + +<p>Let's use this case as an example. You can see the full <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts">example source code on GitHub</a> (<a href="https://mdn.github.io/html-examples/link-rel-preload/fonts/">also see it live</a>):</p> + +<pre class="brush: html notranslate"><head> + <meta charset="utf-8"> + <title>Web font example</title> + + <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin> + <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin> + + <link href="style.css" rel="stylesheet" type="text/css"> +</head> +<body> + … +</body></pre> + +<p>Not only are we providing the MIME type hints in the <code>type</code> attributes, but we are also providing the <code>crossorigin</code> attribute to handle the CORS issue.</p> + +<h2 id="Including_media" name="Including_media">media を含める</h2> + +<p>One nice feature of <code><link></code> elements is their ability to accept {{htmlattrxref("media", "link")}} attributes. These can accept <a href="/en-US/docs/Web/CSS/@media#Media_types">media types</a> or full-blown <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a>, allowing you to do responsive preloading!</p> + +<p>Let's look at an example (see it on GitHub — <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/media">source code</a>, <a href="https://mdn.github.io/html-examples/link-rel-preload/media/">live example</a>):</p> + +<pre class="brush: html notranslate"><head> + <meta charset="utf-8"> + <title>Responsive preload example</title> + + <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)"> + <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)"> + + <link rel="stylesheet" href="main.css"> +</head> +<body> + <header> + <h1>My site</h1> + </header> + + <script> + var mediaQueryList = window.matchMedia("(max-width: 600px)"); + var header = document.querySelector('header'); + + if (mediaQueryList.matches) { + header.style.backgroundImage = 'url(bg-image-narrow.png)'; + } else { + header.style.backgroundImage = 'url(bg-image-wide.png)'; + } + </script> +</body></pre> + +<p>We include <code>media</code> attributes on our <code><link></code> elements so that a narrow image is preloaded if the user has a narrow viewport, and a wider image is loaded if they have a wide viewport. We use {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} to do this (see <a href="/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a> for more).</p> + +<p>This makes it much more likely that the font will be available for the page render, cutting down on FOUT (flash of unstyled text).</p> + +<p>This doesn't have to be limited to images, or even files of the same type — think big! You could perhaps preload and display a simple SVG diagram if the user is on a narrow screen where bandwidth and CPU is potentially more limited, or preload a complex chunk of JavaScript then use it to render an interactive 3D model if the user's resources are more plentiful.</p> + +<h2 id="Scripting_and_preloads" name="Scripting_and_preloads">スクリプトと先読み</h2> + +<p>これらのプリロードに関するもう一つの良い点として、スクリプトを使って実行できることが挙げられます。例えば、ここでは {{domxref("HTMLLinkElement")}} インスタンスを作成し、それを DOM に適用させています。</p> + +<pre class="brush: js notranslate"><code class="language-javascript"><span class="keyword token">var</span> preloadLink <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"link"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +preloadLink<span class="punctuation token">.</span>href <span class="operator token">=</span> <span class="string token">"myscript.js"</span><span class="punctuation token">;</span> +preloadLink<span class="punctuation token">.</span>rel <span class="operator token">=</span> <span class="string token">"preload"</span><span class="punctuation token">;</span> +preloadLink<span class="punctuation token">.</span><span class="keyword token">as</span> <span class="operator token">=</span> <span class="string token">"script"</span><span class="punctuation token">;</span> +document<span class="punctuation token">.</span>head<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>preloadLink<span class="punctuation token">)</span><span class="punctuation token">;</span></code> +</pre> + +<p>これは、ブラウザは <code>myscript.js</code> ファイルをプリロードしますが、実際はまだ使用されていません。これを使用するには、以下のようにします。</p> + +<pre class="brush: js notranslate"><code class="language-javascript"><span class="keyword token">var</span> preloadedScript <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"script"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +preloadedScript<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">"myscript.js"</span><span class="punctuation token">;</span> +document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>preloadedScript<span class="punctuation token">)</span><span class="punctuation token">;</span> +</code></pre> + +<p>これは、スクリプトをプリロードしたいが、必要なときまで実行を延期する場合に便利です。</p> + +<h2 id="Other_resource_preloading_mechanisms" name="Other_resource_preloading_mechanisms">他のリソースの先読み機構</h2> + +<p>Other preloading features exist, but none are quite as fit for purpose as <code><link rel="preload"></code>:</p> + +<ul> + <li><code><link rel="prefetch"></code> has been supported in browsers for a long time, but it is intended for prefetching resources that will be used in the <strong><em>next</em></strong> navigation/page load (e.g. when you go to the next page). This is fine, but isn't useful for the current page! In addition, browsers will give <code>prefetch</code> resources a lower priority than <code>preload</code> ones — the current page is more important than the next. See <a href="/en-US/docs/Web/HTTP/Link_prefetching_FAQ">Link prefetching FAQ</a> for more details.</li> + <li><code><link rel="prerender"></code> renders a specified webpage in the background, speeding up its load if the user navigates to it. Because of the potential to waste users bandwidth, Chrome treats <code>prerender</code> as a <a href="https://developers.google.com/web/updates/2018/07/nostate-prefetch">NoState prefetch</a> instead.</li> + <li><code><link rel="subresource"></code> {{non-standard_inline}} was supported in Chrome a while ago, and was intended to tackle the same issue as <code>preload</code>, but it had a problem: there was no way to work out a priority for the items (<code>as</code> didn't exist back then), so they all got fetched with fairly low priority.</li> + <li>There are a number of script-based resource loaders out there, but they don't have any power over the browser's fetch prioritization queue, and are subject to much the same performance problems.</li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Preload','#x2.link-type-preload','preload')}}</td> + <td>{{Spec2('Preload')}}</td> + <td><code>preload</code> の詳細</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#link-type-preload', 'rel=preload')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td><code>preload</code> の定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("html.elements.link.rel.preload")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/">Preload: What Is It Good For?</a> by Yoav Weiss</li> +</ul> + +<p>{{QuickLinksWithSubpages("/ja/docs/Web/HTML")}}</p> diff --git a/files/ja/web/html/quirks_mode_and_standards_mode/index.html b/files/ja/web/html/quirks_mode_and_standards_mode/index.html new file mode 100644 index 0000000000..50d3ad09d2 --- /dev/null +++ b/files/ja/web/html/quirks_mode_and_standards_mode/index.html @@ -0,0 +1,56 @@ +--- +title: 後方互換モードと標準準拠モード +slug: Web/HTML/Quirks_Mode_and_Standards_Mode +tags: + - Gecko + - Guide + - HTML + - NeedsUpdate + - Web Development + - Web Standards + - XHTML +translation_of: Web/HTML/Quirks_Mode_and_Standards_Mode +--- +<p>{{HTMLRef}}</p> + +<p>かつてウェブでは、よく2つのバージョンのページを作成していました。ひとつは Netscape Navigator 向け、もうひとつは Microsoft Internet Explorer 向けです。 W3C がウェブ標準を作成したとき、ウェブ上のほとんどの既存サイトの表示が壊れるため、ブラウザーはウェブ標準を採用し始めることができませんでした。そのためブラウザーは、標準に準拠した新しいサイトと以前の古いサイトを区別して扱うために、2つのモードを導入しました。</p> + +<p>ウェブブラウザーのレイアウトエンジンが利用するモードは、後方互換 (Quirks) モード、準標準 (Almost Standards) モード、完全標準 (Full Standards) モードの3種類になりました。<strong>後方互換モード</strong>では、レイアウトは Navigator 4 や Internet Explorer 5 のような非標準の動作をエミュレートします。これは、ウェブ標準が広く採用される前に作られたウェブサイトをサポートするために必要です。<strong>完全標準準拠モード</strong>では、HTML や CSS の仕様書で書かれている通りに動作します (そのように期待されています)。<strong>ほぼ標準準拠モード</strong>では、ほぼ標準準拠モードのトリガーとなる DOCTYPE を利用している実際のページについて表示を損なう可能性を考慮した、ごく少数の互換動作が実装されています。</p> + +<h2 id="How_does_Mozilla_determine_which_mode_to_use.3F" name="How_does_Mozilla_determine_which_mode_to_use.3F">ブラウザーが利用するモードを決定する方法</h2> + +<p><a href="/ja/docs/HTML" title="HTML">HTML</a> 文書については、ブラウザーは文書の先頭にある DOCTYPE を使用して、後方互換モードで処理するか、標準準拠モードで処理するかを決定します。ページで確実に完全標準準拠モードが使用されるようにするには、以下のサンプルのような DOCTYPE を使用するようにしてください。</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html lang="en"> + <head> + <meta charset=UTF-8> + <title>Hello World!</title> + </head> + <body> + </body> +</html></pre> + +<p>この例にある DOCTYPE の <code><!DOCTYPE html></code> はもっともシンプルな形式であり、HTML5 で推奨されているもののひとつです。以前のバージョンの HTML 標準では他の形式を推奨していましたが、現行のブラウザーはすべて（旧式の Internet Explorer 6 でさえ）、この DOCTYPE に対して完全標準準拠モードを使用します。より複雑な DOCTYPE を使用すべき理由はありません。他の DOCTYPE を使用する場合は、ほぼ互換モードや後方互換モードが適用されるおそれがあります。</p> + +<p>DOCTYPE は HTML 文書の先頭に置くようにしてください。 Internet Explorer 9 以前ではコメントや XML 宣言などが DOCTYPE の前に存在すると、後方互換モードが適用されます。</p> + +<p>HTML5 では、 DOCTYPE の用途は完全標準準拠モードを適用させることだけです。古いバージョンの HTML 標準では DOCTYPE に他の意味を与えていましたが、後方互換モードと標準準拠モードの切り替え以外の目的で DOCTYPE を使用するブラウザーはありませんでした。</p> + +<p><a href="http://hsivonen.iki.fi/doctype/" title="http://hsivonen.iki.fi/doctype/">さまざまなブラウザーのモード選択の詳細な説明</a>もご覧ください。</p> + +<h3 id="XHTML" name="XHTML">XHTML</h3> + +<p><code>Content-Type</code> HTTP ヘッダで <code>application/xhtml+xml</code> を使用して、ページを <a href="/ja/docs/XHTML" title="XHTML">XHTML</a> として提供する場合は、文書で常に完全標準準拠モードを使用しますので、標準準拠モードを有効化するための DOCTYPE は不要です。ただし Internet Explorer 8 は<code>application/xhtml+xml</code> でページを提供すると、ページを表示せずに未知の形式のファイルを<a href="/ja/docs/XHTML#Support" title="XHTML">ダウンロードするダイアログボックス</a>を表示します。これは、最初に XHTML をサポートした Internet Explorer がバージョン 9 であるためです。</p> + +<p><code>text/html</code> の MIME タイプを使用して XHTML 形式のコンテンツを提供する場合は、ブラウザーが HTML として読み込みますので、標準準拠モードを使用するために DOCTYPE が必要です。</p> + +<h2 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">どのモードが使われているかを確認するには</h2> + +<p>Firefox では、コンテキストメニューで <em>ページの情報を表示</em> を選択して、<em>描画モード</em> を確認してください。</p> + +<p>Internet Explorer では、 <em>F12</em> を押下して、<em>ドキュメントモード</em> を確認してください。</p> + +<h2 id="What_are_the_differences_between_the_modes.3F" name="What_are_the_differences_between_the_modes.3F">モードの違い</h2> + +<p>それぞれのモードの違いについては、<a href="/ja/docs/Mozilla_Quirks_Mode_Behavior" title="Mozilla_Quirks_Mode_Behavior">互換モード一覧</a> および <a href="/ja/docs/Mozilla/Gecko_Almost_Standards_Mode" title="Gecko%27s_%22Almost_Standards%22_Mode">準標準準拠モード</a> をご覧ください。</p> diff --git a/files/ja/web/html/reference/index.html b/files/ja/web/html/reference/index.html new file mode 100644 index 0000000000..96d112ce4d --- /dev/null +++ b/files/ja/web/html/reference/index.html @@ -0,0 +1,31 @@ +--- +title: HTML リファレンス +slug: Web/HTML/Reference +tags: + - HTML + - Landing + - Reference + - Web + - ウェブ +translation_of: Web/HTML/Reference +--- +<div>{{HTMLSidebar}}</div> + +<p>この <a href="/ja/docs/Web/HTML">HTML</a> リファレンスは、 HTML のすべての<strong>要素</strong>と<strong>属性</strong>、およびすべての要素に適用される<strong>グローバル属性</strong>について書かれています。</p> + +<dl> + <dt><a href="/ja/docs/Web/HTML/Element">HTML 要素リファレンス</a></dt> + <dd>このページでは、タグを使用して作成されるすべての HTML 要素を一覧表示しています。</dd> + <dt><a href="/ja/docs/Web/HTML/Attributes">HTML 属性リファレンス</a></dt> + <dd>HTML の要素は属性を持ちます。ユーザーが望む基準を満たすために、さまざまな方法で要素を構成したり、動作を調整したりする追加の値です。</dd> + <dt><a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a></dt> + <dd>グローバル属性は、すべての HTML 要素で共通の属性です。すべての要素で使用できますが、要素によっては効果がないこともあります。</dd> + <dt><a href="/ja/docs/Web/HTML/Link_types">リンク種別</a></dt> + <dd>HTML では、以下のようなリンク種別で {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}} 要素を使用して他へリンクするときに二つの文書間の関係を示します。</dd> + <dt><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリ</a></dt> + <dd>すべての HTML 要素は一つ以上のコンテンツカテゴリのメンバです。 — これらのカテゴリは共通の特徴を持つ要素をグループ化します。</dd> + <dt><a href="/ja/docs/Web/HTML/Date_and_time_formats">HTML で使われる日付と時刻の形式</a></dt> + <dd>一部の HTML 要素では、日付や時刻を値や属性の値として指定することができます。これには様々な種類の日付や時刻を扱う {{HTMLElement("input")}} 要素や、 {{HTMLElement("ins")}} および {{HTMLElement("del")}} 要素があります。</dd> +</dl> + +<p><span class="alllinks"><a href="/ja/docs/tag/HTML" title="Article tagged: HTML">"HTML" とタグ付けされたすべてのページを見る...</a></span></p> diff --git a/files/ja/web/html/using_the_application_cache/index.html b/files/ja/web/html/using_the_application_cache/index.html new file mode 100644 index 0000000000..56112819c3 --- /dev/null +++ b/files/ja/web/html/using_the_application_cache/index.html @@ -0,0 +1,350 @@ +--- +title: アプリケーションキャッシュの使用 +slug: Web/HTML/Using_the_application_cache +tags: + - Advanced + - App + - Cache + - Guide + - HTML + - appcache + - application cache + - web cache +translation_of: Web/HTML/Using_the_application_cache +--- +<div class="blockIndicator warning"> +<p><strong>この<em>アプリケーションキャッシュ</em>機能を使用しないでください！</strong>これは<a href="https://html.spec.whatwg.org/multipage/browsers.html#offline">ウェブプラットフォームから削除する手続中のものです</a>。</p> + +<ul> + <li>Firefox 84 以降、この機能は削除されました ({{bug("1619673")}})。 Chomium 90 でも削除が予定されており、 Safari でも非推奨になっています。</li> + <li>Firefox 60 以降、および<a href="/ja/docs/Web/HTML/Using_the_application_cache#Browser_compatibility">対応しているブラウザー</a>の一部またはすべてにおいて、<a href="/ja/docs/Web/Security/Secure_Contexts">安全なコンテキスト</a> (HTTPS) でしか利用できません。</li> + <li>Firefox 44 以降ではオフライン対応のために<a href="/ja/docs/Web/HTML/Using_the_application_cache">アプリケーションキャッシュ</a>を使用すると、代わりに<a href="/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers">サービスワーカー</a>を使用するよう開発者に案内する警告メッセージをコンソールに表示します ({{bug("1204581")}})。</li> +</ul> +</div> + +<div>{{DefaultAPISidebar("App Cache")}}{{Deprecated_Header}}{{SecureContext_Header}}</div> + +<h2 id="Introduction" name="Introduction">はじめに</h2> + +<p><a href="/ja/docs/HTML/HTML5">HTML5</a> は、ウェブアプリケーションをオフラインで実行できるようにするための<em>アプリケーションキャッシュ</em>の仕組みを提供しています。この <strong>Application Cache</strong> (<em>AppCache</em>) インターフェイスは、ブラウザーがオフラインで利用できるようにキャッシュするべきリソースを列挙します。キャッシュされたアプリケーションは、ユーザーが更新ボタンを押しても、オフラインで読み込まれて正常に動作します。</p> + +<p>アプリケーションキャッシュは以下のような利益をもたらします。</p> + +<dl> + <dt>オフラインブラウジング</dt> + <dd>オフライン状態であってもユーザーがサイトを閲覧できます。</dd> + <dt>速度</dt> + <dd>キャッシュされたリソースはローカルに置かれることになり、その結果、より速く読み込まれます。</dd> + <dt>サーバー不の削減</dt> + <dd>ブラウザーはサーバーから変更されたリソースのみをダウンロードします。</dd> +</dl> + +<h2 id="How_the_application_cache_works" name="How_the_application_cache_works">アプリケーションキャッシュの動作</h2> + +<h3 id="Enabling_the_application_cache" name="Enabling_the_application_cache">アプリケーションキャッシュの有効化</h3> + +<p>アプリケーションでアプリケーションキャッシュを有効にするには、 {{HTMLAttrxRef("manifest", "html")}} 属性をアプリケーションページ内の {{HTMLElement("html")}} 要素に設定してください。</p> + +<pre class="brush: html notranslate"><html manifest="/example.appcache"> + … +</html> +</pre> + +<p><code>manifest</code> 属性の値は <strong>キャッシュマニフェスト</strong> ファイルの URL を参照します。これはアプリケーションのためにブラウザーがキャッシュするべき URL を列挙したテキストファイルです。</p> + +<p>キャッシュしてほしいサイトのすべてのページに <code>manifest</code> 属性を含めてください。ブラウザーは <code>manifest</code> 属性のないページは、マニフェストファイルで列挙されていない限りキャッシュしません。マニフェストファイルにキャッシュしてほしいページをすべて列挙する必要はありません。なぜなら、ブラウザーは、ユーザーが訪問したページに <code>manifest</code> 属性があると、暗黙的にアプリケーションキャッシュに追加するからです。</p> + +<p>ブラウザーによっては (例: Firefox) は、ユーザーがアプリケーションキャッシュを利用するアプリケーションを読み込む初回時に通知バーを表示します。通知バーは以下のようなメッセージを表示します。</p> + +<p style="margin-left: 40px;">このサイト (<code>example.com</code>) はオフライン作業用データの保存を求めています。 [許可] [このサイトでは保存しない] [今回は保存しない]</p> + +<p>「オフライン(利用可能) アプリケーション」という表現は、ときに、ユーザーがオフライン機能を利用することを許可したアプリケーションを具体的に指すこともあります。</p> + +<h3 id="Loading_documents" name="Loading_documents">文書の読み込み</h3> + +<p>アプリケーションキャッシュの利用は文書を読み込む通常のプロセスを変更します:</p> + +<ul> + <li>アプリケーションキャッシュが存在する場合、ブラウザーは文書を読み込んで、それに関連付けられたリソースをネットワークにアクセスせずにキャッシュから直接取得します。これは文書の読み込み時間をスピードアップさせます。</li> + <li>ブラウザーはキャッシュマニフェストがサーバー上で更新されているかどうかをチェックします。</li> + <li>キャッシュマニフェストが更新されていた場合、ブラウザーはマニフェストの新しいバージョンとそのマニフェスト内に列挙されたリソースをダウンロードします。これはバックグランドで行われ、パフォーマンスに大きな影響を与えません。</li> +</ul> + +<p>文書を読み込み、アプリケーションキャッシュを更新するプロセスの詳細は以下のようになります。</p> + +<ol> + <li>ブラウザーは <code>manifest</code> 属性を含む文書を訪れたとき、アプリケーションキャッシュが存在しなければ、文書を読み込んでから、マニフェストファイルに列挙されたすべてのエントリーを取得して、アプリケーションキャッシュの最初のバージョンを作成します。</li> + <li>その文書へのその後の訪問では、ブラウザーは文書とマニフェストファイルで指定されたその他のリソースを (サーバーからではなく) アプリケーションキャッシュから読み込みます。さらに、ブラウザーは <code><a href="/ja//docs/DOM/window.applicationCache">window.applicationCache</a></code> オブジェクトに <code>checking</code> イベントを送り、適切な HTTP キャッシュ規則に従い、マニフェストファイルを取得します。</li> + <li>マニフェストファイルの現在のキャッシュされたコピーが最新であった場合、ブラウザーは <code>applicationCache</code> オブジェクトに <code>noupdate</code> イベントを送り、更新プロセスは完了します。サーバー上のキャッシュされたリソースを変更する場合、マニフェストファイル自身も変更する必要があることに注意してください。そうすることで、ブラウザーはすべてのリソースを再び取得する必要があることを知ります。</li> + <li>マニフェストファイルが変更<em>されていた</em>場合、マニフェストに列挙されたファイルのすべて、および、 <code><a href="/ja/docs/nsIDOMOfflineResourceList#add.28.29">applicationCache.add()</a></code> が呼ばれたことによってキャッシュに追加されたファイルが、適切な HTTP キャッシュ規則に従い、一時キャッシュに取得されます。この一時キャッシュに取得された各ファイル毎に、ブラウザーは <code>applicationCache</code> オブジェクトに <code>progress</code> イベントを送ります。エラーが起こった場合、ブラウザーは <code>error</code> イベントを送り、更新は中止されます。</li> + <li>すべてのファイルが正常に取得されれば、それらは本当のオフラインキャッシュに動的に移動され、<code>applicationCache</code> オブジェクトに <code>cached</code> イベントを送ります。文書は既にキャッシュからブラウザーに読み込まれているので、更新された文書は文書が（手動かプログラムで）再読込されるまで描画されません。</li> +</ol> + +<h2 id="Storage_location_and_clearing_the_offline_cache" name="Storage_location_and_clearing_the_offline_cache">ストレージの場所とオフラインキャッシュをクリアする</h2> + +<p>Chrome では、設定の "閲覧履歴データの消去..." を選択することか、<a class="external">chrome://appcache-internals/</a> を開くことで、オフラインキャッシュをクリアできます。Safari では、設定に、似たような "キャッシュを空にする" がありますが、ブラウザーの再起動も必要になるかもしれません。</p> + +<p>Firefox では、オフラインキャッシュデータは Firefox プロファイルに分割して保存されています。以下が通常のディスクキャッシュです:</p> + +<ul> + <li>Windows Vista/7: <code>C:\Users\<username>\AppData\<strong>Local</strong>\Mozilla\Firefox\Profiles\<salt>.<profile name>\OfflineCache</code></li> + <li>Mac/Linux: <code>/Users/<username>/Library/Caches/Firefox/Profiles/<salt>.<profile name>/OfflineCache</code></li> +</ul> + +<p>Firefox では、現在のステータスを <code>about:cache</code> ページ ("Offline cache device" の見出しがある箇所) で調査できます。オフラインキャッシュは ツール -> オプション -> 詳細 -> ネットワーク -> オフラインデータ の "削除..." ボタンを利用して各サイト毎に別々にクリアできます。</p> + +<p>Firefox 11 以前から Firefox 11 まで、ツール -> 最近の履歴を消去、あるいは、ツール -> オプション -> 詳細 -> ネットワーク -> オフラインデータ -> 今すぐ消去 のどちらでもオフラインキャッシュを消せませんでしたが、このバグは修正されました。</p> + +<p>Linux では、設定は Edit > Preferences > Advanced > Network > Offline Web Content and User Data にあります。</p> + +<p><a href="/ja/DOM/Storage#Storage_location_and_clearing_the_data">DOM Storage データをクリアする</a>も参照してください。</p> + +<p>アプリケーションキャッシュはもう利用されない状態にもなり得ます。アプリケーションマニフェストファイルがサーバーーから削除されたとき、ブラウザーはそのマニフェストを利用しているアプリケーションキャッシュをすべて削除し、<code>applicationCache</code> オブジェクトに "obsoleted" イベントを送信します。これはアプリケーションキャッシュの状態を <code>OBSOLETE</code> に設定します。</p> + +<h2 id="The_cache_manifest_file" name="The_cache_manifest_file">キャッシュマニフェストファイル</h2> + +<h3 id="Referencing_a_cache_manifest_file" name="Referencing_a_cache_manifest_file">キャッシュマニフェストファイルを参照する</h3> + +<p>ウェブアプリケーションでの <code>manifest</code> 属性は、キャッシュマニフェストファイルからの相対パスか絶対 URL のどちらかを指定できます。 (絶対 URL はアプリケーションと同一生成元経由でなければなりません)。キャッシュマニフェストファイルはどんなファイル拡張子でもかまいませんが、<code>text/cache-manifest</code> MIME タイプで提供されなければなりません。</p> + +<div class="note"><strong>注: </strong>Apache サーバーでは、マニフェストファイル (.appcache) ファイルを設定するために、ルートディレクトリ又はアプリケーションと同じディレクトリの .htaccess ファイルに <code>AddType text/cache-manifest .appcache</code> を追加します。</div> + +<h3 id="Entries_in_a_cache_manifest_file" name="Entries_in_a_cache_manifest_file">キャッシュマニフェストファイルのエントリー</h3> + +<p>キャッシュマニフェストファイルはブラウザーがオフラインアクセスのためにキャッシュすべきリソースを列挙した単純なテキストファイルです。リソースは URI によって区別されます。キャッシュマニフェストに列挙されたエントリーはマニフェストと同じスキーマ、ホスト、およびポートでなければなりません。</p> + +<h3 id="Example_1_a_simple_cache_manifest_file" name="Example_1_a_simple_cache_manifest_file">例 1: 単純なキャッシュマニフェストファイル</h3> + +<p>以下は、<span class="nowiki">www.example.com</span> にある想像上のウェブサイトのための単純なキャッシュマニフェストファイルである <code>example.appcache です。</code></p> + +<pre class="eval notranslate">CACHE MANIFEST +# v1 - 2011-08-13 +# これはコメントです。 +<span class="nowiki">http://www.example.com/index.html</span> +<span class="nowiki">http://www.example.com/header.png</span> +<span class="nowiki">http://www.example.com/blah/blah</span> +</pre> + +<p>キャッシュマニフェストファイルは3つのセクション (後述する <code>CACHE</code>, <code>NETWORK</code>, <code>FALLBACK</code>) を含んでいます。上記の例では、セクションヘッダーがありません。そのため、すべてのデータ行は明示的 (<code>CACHE</code>) セクションであるとみなされます。これは、ブラウザーは列挙されたリソースのすべてをアプリケーションキャッシュにキャッシュすべきということを意味します。リソースは絶対、もしくは、相対 URL (例：<code>index.html</code>) のどちらかを用いて指定できます。</p> + +<p>上記例での "v1" コメントがあるのには正当な理由があります。ブラウザーがアプリケーションキャッシュを更新するのは、マニフェストファイルがバイト単位で更新されたときだからです。キャッシュされたリソースを変更したとき (例えば、 <code>header.png</code> 画像を新しい画像に差し替えた場合)、ブラウザーにキャッシュの更新が必要であることを知らせるためにマニフェストファイルの内容も変更する必要があります。どんな変更でもマニフェストファイルに対して行うことができますが、バージョン番号を修正することが、おすすめできるベストプラクティスです。</p> + +<div class="warning"><strong>重要:</strong> マニフェストファイル自身をキャッシュマニフェストファイルに指定しないようにしてください。さもなければ、ブラウザーは新しいマニフェストが利用可能であることを知ることがほぼ不可能になるでしょう。</div> + +<h3 id="Sections_in_a_cache_manifest_file_CACHE_NETWORK_and_FALLBACK" name="Sections_in_a_cache_manifest_file_CACHE_NETWORK_and_FALLBACK">キャッシュマニフェストファイルのセクション: <code>CACHE</code>, <code>NETWORK</code>, <code>FALLBACK</code></h3> + +<p>マニフェストには3つの性質が異なるセクション、 <code>CACHE</code>、<code>NETWORK</code>、<code>FALLBACK</code> があります。</p> + +<dl> + <dt><code>CACHE:</code></dt> + <dd>これはキャッシュマニフェストファイルにおけるエントリーの既定のセクションです。<code>CACHE:</code> セクションヘッダー下 (もしくは <code>CACHE MANIFEST</code> の行の直後) に列挙されたファイルは、それらが初回時にダウンロードされた後に明示的にキャッシュされます。</dd> + <dt><code>NETWORK:</code></dt> + <dd><code>キャッシュマニフェストファイルにおける NETWORK</code> セクションヘッダー下に列挙されたファイルは、サーバーーに接続する必要があるホワイトリスト化されたリソースです。ユーザーがオフライン状態であっても、これらのリソースへのリクエストはすべてキャッシュを無視します。ワイルドカードが利用できます。</dd> + <dt><code>FALLBACK:</code></dt> + <dd><code>FALLBACK:</code> セクションは、リソースにアクセス不可能な場合にブラウザーが利用すべき代替ページを指定します。このセクションにおける各エントリーには 2 つの URI を列挙します。具体的には、最初はリソースであり、2 番目は代替リソースです。両方の URL は相対で、マニフェストファイルと同一生成元経由でなければなりません。ワイルドカードが利用できます。</dd> +</dl> + +<p><code>CACHE</code>, <code>NETWORK</code>, <code>FALLBACK</code> の各セクションは、キャッシュマニフェストファイル内でどんな順番でも列挙でき、各セクションは単一のマニフェストにおいて、複数回定義することができます。</p> + +<h3 id="Example_2_a_more_complete_cache_manifest_file" name="Example_2_a_more_complete_cache_manifest_file">例 2: より完全なキャッシュマニフェストファイル</h3> + +<p>以下は、 <span class="nowiki">www.example.com</span> にある想像上のウェブサイト向けのより完全なキャッシュマニフェストファイルです:</p> + +<pre class="eval notranslate">CACHE MANIFEST +# v1 2011-08-14 +# これは別のコメントです +index.html +cache.html +style.css +image1.png + +# 利用可能ならネットワーク経由で利用する +NETWORK: +network.html + +# 代替コンテンツ +FALLBACK: +. fallback.html +</pre> + +<p>この例は <code>NETWORK</code> と <code>FALLBACK</code> セクションを用いて、 <code>network.html</code> ページは常にネットワーク経由で取得し、 <code>fallback.html</code> ページは代替リソース (例えば、サーバーへの接続ができない場合) として提供されるべきであることを指定しています。</p> + +<h3 id="Structure_of_a_cache_manifest_file" name="Structure_of_a_cache_manifest_file">キャッシュマニフェストファイルの構造</h3> + +<p>キャッシュマニフェストファイルは <code>text/cache-manifest</code> という MIME タイプで提供される必要があります。この MIME タイプを使って提供されるすべてのリソースは、このセクションで定義されている、アプリケーションキャッシュマニフェストのための構文に従う必要があります。</p> + +<p>キャッシュマニフェストは UTF-8 形式のテキストファイルで、任意で BOM 文字を含むこともできます。改行文字は、ラインフィード (<code>U+000A</code>)、キャリッジリターン (<code>U+000D</code>)、あるいはその両方で表すことができます。</p> + +<p>キャッシュマニフェストの1行目は、ゼロあるいはそれ以上のスペースまたはタブ文字に続けて「CACHE MANIFEST」という文字列で構成される必要があります。2 つの単語の間にはひとつのスペース (<code>U+0020</code>) が含まれます。1行目に書かれたそれ以外の文字列は無視されます。</p> + +<p>キャッシュマニフェストの残りの部分は、ゼロあるいはそれ以上の、以下の行によって構成されます:</p> + +<dl> + <dt>空白行</dt> + <dd>ゼロあるいはそれ以上のスペースまたはタブ文字から成る空白行を用いることができます。</dd> + <dt>コメント</dt> + <dd>コメントは、ひとつの <code>#</code> 文字に続くゼロあるいはそれ以上のスペースまたはタブ文字と、それに続くゼロあるいはそれ以上のコメント文字列によって構成されます。コメントは (最初の <code>CACHE MANIFEST</code> 行の後の) 単独の行のみで用いることができ、他の行に付加することはできません。これは、フラグメント識別子を指定できないことを意味します。</dd> + <dt>セクションヘッダー</dt> + <dd>セクションヘッダーは、キャッシュマニフェストのどのセクションが操作されるかを示すものです。3種類のセクションヘッダーを用いることができます:</dd> +</dl> + +<blockquote> +<table class="standard-table"> + <tbody> + <tr> + <th>セクションヘッダー</th> + <th>説明</th> + </tr> + <tr> + <td><code>CACHE:</code></td> + <td>キャッシュマニフェストの明示的セクションに切り替えます。これは既定のセクションです。</td> + </tr> + <tr> + <td><code>NETWORK:</code></td> + <td>キャッシュマニフェストのオンラインホワイトリストセクションに切り替えます。</td> + </tr> + <tr> + <td><code>FALLBACK:</code></td> + <td>キャッシュマニフェストの代替セクションに切り替えます。</td> + </tr> + </tbody> +</table> +</blockquote> + +<dl> + <dd>セクションヘッダ行には空白を含めることも可能ですが、セクション名には必ずコロンを含める必要があります。</dd> + <dt>セクションデータ</dt> + <dd>データ行の形式はセクションとごとに異なります。明示的 (<code>CACHE:</code>) セクションでは、各行は、キャッシュのリソースを参照する妥当な URI または IRI です（このセクションではワイルドカード文字は一切利用できません）。各行の URI または IRI の前後には空白を含めることも可能です。 Fallback セクションでは、各行は、リソースと、それに続いて、サーバーとの接続ができないときに提供される代替リソースを参照する妥当な URI または IRI です。ネットワークセクションでは、各行は、ネットワークから取得できるリソースを参照する 妥当な URI または IRI です（このセクションではワイルドカード文字である <code>*</code> が利用できます）。 + <div class="note"><strong>注意: </strong>相対 URI は、マニフェストを参照する文書の URI ではなく、キャッシュマニフェストの URI からの相対となります。</div> + </dd> +</dl> + +<p>キャッシュマニフェストは、それぞれのセクションを任意で行き来することができます (つまり、各セクションヘッダを複数回用いることができます)。また、セクションを空白にしておくことも許容されています。</p> + +<h2 id="Resources_in_an_application_cache" name="Resources_in_an_application_cache">アプリケーションキャッシュ内のリソース</h2> + +<p>アプリケーションキャッシュには、少なくとも 1 つの URI で識別されるリソースが常に含まれています。すべてのリソースは以下のカテゴリのいずれかに当てはまります。</p> + +<dl> + <dt>マスターエントリ</dt> + <dd>これらは、ユーザーが訪問した閲覧コンテキストに、 <code>manifest</code> 属性を使用してこのキャッシュにあることを示す文書が含まれていたためにキャッシュに追加されたリソースです。</dd> + <dt>明示的なエントリ</dt> + <dd>これらはアプリケーションのキャッシュマニフェストファイルに明示的に掲載されているリソースです。</dd> + <dt>ネットワークエントリ</dt> + <dd>これらはアプリケーションのキャッシュマニフェストファイルにネットワークエントリとして掲載されているリソースです。</dd> + <dt>フォールバックエントリ</dt> + <dd>これらはアプリケーションのキャッシュマニフェストファイルにフォールバックエントリとして掲載されているリソースです。</dd> +</dl> + +<div class="note"><strong>注:</strong> リソースは複数のカテゴリでタグ付けすることができるので、複数のエントリに分類することができます。例えば、エントリは明示的なエントリと予備のエントリの両方を持つことができます。</div> + +<p>リソースのカテゴリについては、以下で詳しく説明します。</p> + +<h3 id="Master_entries" name="Master_entries">マスターエントリ</h3> + +<p>マスターエントリとは、 {{HTMLAttrxRef("manifest", "html")}} 属性を {{HTMLElement("html")}} 要素に含む HTML ファイルのことです。例えば、<a href="http://www.example.com/entry.html">http://www.example.com/entry.html</a> という HTML ファイルがあるとします。</p> + +<pre class="brush: html notranslate"><html manifest="example.appcache"> + <h1>アプリケーションキャッシュの例</h1> +</html> +</pre> + +<p><code>entry.html</code> が <code>example.appcache</code> キャッシュマニフェストファイルに掲載されていない場合、 <code>entry.html</code> ページにアクセスすると、 <code>entry.html</code> がマスターエントリとしてアプリケーションキャッシュに追加されます。</p> + +<h3 id="Explicit_entries" name="Explicit_entries">明示的なエントリ</h3> + +<p>明示的なエントリは、キャッシュマニフェストファイルの <code>CACHE</code> セクションに明示的にリストされたリソースです。</p> + +<h3 id="Network_entries" name="Network_entries">ネットワークエントリ</h3> + +<p>キャッシュマニフェストファイルの <code>NETWORK</code> セクションは、ウェブアプリケーションがオンラインアクセスを必要とするリソースを指定します。アプリケーションキャッシュ内のネットワークエントリは本質的に「オンラインホワイトリスト」であり、 <code>NETWORK</code> セクションで指定された URI はキャッシュの代わりにサーバーから読み込まれます。これにより、ブラウザーのセキュリティモデルは、承認されたリソースへのアクセスを制限することで、潜在的なセキュリティ侵害からユーザーを保護することができます。</p> + +<p>例として、ネットワークエントリを使用して、キャッシュの代わりにサーバーからスクリプトなどのコードをロードして実行することができます。</p> + +<pre class="eval notranslate">CACHE MANIFEST +NETWORK: +/api +</pre> + +<p>上記のキャッシュマニフェストセクションは、 <code><a href="http://www.example.com/api/" rel="freelink">http://www.example.com/api/</a></code> サブツリーに含まれるリソースをロードするリクエストが、キャッシュにアクセスしようとせずに常にネットワークに移動することを保証します。</p> + +<div class="note"><strong>注</strong>: マスターエントリ (<code>html</code> 要素に設定された <code>manifest</code> 属性を持つファイル) をマニフェストファイルから単に省略しても、マスターエントリはアプリケーションキャッシュに追加され、その後アプリケーションキャッシュから提供されるため、同じ結果にはなりません。</div> + +<h3 id="Fallback_entries" name="Fallback_entries">フォールバックエントリ</h3> + +<p>フォールバックエントリは、リソースの読み込みに失敗したときに使用されます。例えば、キャッシュマニフェストファイル <code><a href="http://www.example.com/example.appcache" rel="freelink">http://www.example.com/example.appcache</a></code> に以下の内容が含まれているとします。</p> + +<pre class="eval notranslate">CACHE MANIFEST +FALLBACK: +example/bar/ example.html +</pre> + +<p><code><a href="http://www.example.com/example/bar/" rel="freelink">http://www.example.com/example/bar/</a></code> またはそのサブディレクトリとそのコンテンツへのリクエストにより、ブラウザーはリクエストされたリソースの読み込みを試みるためのネットワークリクエストを発行します。この試みがネットワーク障害や何らかのサーバーエラーのために失敗した場合、ブラウザーは代わりに <code>example.html</code> というファイルをロードします。</p> + +<h2 id="Cache_states" name="Cache_states">キャッシュ状態</h2> + +<p>各アプリケーションキャッシュは、キャッシュの現在の状態を示す<strong>状態</strong>を持っています。同じマニフェスト URI を共有するキャッシュは同じキャッシュの状態を共有します。</p> + +<dl> + <dt><code>UNCACHED</code></dt> + <dd>アプリケーションキャッシュオブジェクトが完全に初期化されていないことを示す特別な値です。</dd> + <dt><code>IDLE</code></dt> + <dd>アプリケーションキャッシュは現在更新中ではありません。</dd> + <dt><code>CHECKING</code></dt> + <dd>マニフェストを取得し、更新をチェックしています。</dd> + <dt><code>DOWNLOADING</code></dt> + <dd>リソースのマニフェストが変更されたため、キャッシュに追加するためにリソースをダウンロードしています。</dd> + <dt><code>UPDATEREADY</code></dt> + <dd>新しいバージョンのアプリケーションキャッシュが利用可能です。対応する <code>updateready</code> イベントがあり、新しい更新プログラムがダウンロードされたが <code>swapCache()</code> メソッドを使用してまだ有効化されていない場合に <code>cached</code> イベントの代わりに発生します。</dd> + <dt><code>OBSOLETE</code></dt> + <dd>アプリケーションキャッシュグループは廃止されました。</dd> +</dl> + +<h2 id="Testing_for_updates_to_the_cache_manifest" name="Testing_for_updates_to_the_cache_manifest">キャッシュマニフェストの更新の確認</h2> + +<p>JavaScript を使用して、アプリケーションが更新されたキャッシュマニフェストファイルを持っているかどうかをプログラムでテストすることができます。スクリプトが更新をテストするためにイベントリスナーをアタッチする前にキャッシュマニフェストファイルが更新されている可能性があるので、スクリプトは常に <code>window.applicationCache.status</code> をテストする必要があります。</p> + +<pre class="brush: js notranslate">function onUpdateReady() { + console.log('found new version!'); +} +window.applicationCache.addEventListener('updateready', onUpdateReady); +if(window.applicationCache.status === window.applicationCache.UPDATEREADY) { + onUpdateReady(); +}</pre> + +<p>新しいマニフェスト ファイルのテストを手動で開始するには、 <code>window.applicationCache.update()</code> を使用してください。</p> + +<h2 id="Gotchas">Gotchas</h2> + +<ul> + <li>従来の GET 引数 (<code>other-cached-page.html?parameterName=value</code>) を使用してキャッシュされたファイルにアクセスしないでください。これは、ブラウザーがキャッシュをバイパスしてネットワークから取得しようとすることになります。 JavaScript で解析されたパラメータを持つキャッシュされたリソースにリンクするには、リンクのハッシュ部分に <code>other-cached-page.html#whatever?parameterName=value</code> のような引数を使用します。</li> + <li>アプリケーションがキャッシュされている場合、ウェブページで使用されるリソース (ファイル) を更新するだけでは、キャッシュされたファイルを更新することはできません。ブラウザーが更新されたファイルを取得して使用する前に、キャッシュマニフェストファイル自体を更新する必要があります。これは <code>window.applicationCache.swapCache()</code> を使用してプログラムで行うことができますが、すでに読み込まれているリソースは影響を受けません。リソースが新しいバージョンのアプリケーションキャッシュから読み込まれるようにするには、ページをリフレッシュするのが理想的です。</li> + <li>ウェブサーバー上で <code>*.appcache</code> ファイルの expires ヘッダを設定して、すぐに期限切れになるようにすることをお勧めします。これにより、マニフェストファイルをキャッシュするリスクを回避することができます。例えば、 Apache ではこのような設定を次のように指定することができます。<br> + <code>ExpiresByType text/cache-manifest "access plus 0 seconds"</code></li> +</ul> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.html.manifest")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="https://web.dev/appcache-removal/">Preparing for AppCache Removal</a> - web.dev blog with useful timeline information</li> + <li><a href="http://www.html5rocks.com/en/tutorials/appcache/beginner/">HTML5Rocks - A Beginner's Guide to Using the Application Cache</a></li> + <li><a href="http://appcache.offline.technology/">Appcache Facts</a> - detailed information on AppCache idiosyncrasies</li> + <li><a href="https://alistapart.com/article/application-cache-is-a-douchebag">A List Apart: Application Cache is a Douchebag</a> + <ul> + <li><a href="https://flailingmonkey.com/application-cache-not-a-douchebag">The Application Cache is no longer a Douchebag</a> - an overview of the app cache debugging tools added in Firefox 23.</li> + </ul> + </li> + <li><a href="https://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> at hacks.mozilla.org - showcases an offline app demo and explains how it works.</li> + <li><a href="https://html.spec.whatwg.org/multipage/offline.html#offline">HTML 5 working draft: Offline web applications</a></li> + <li><a href="https://www.w3.org/TR/offline-webapps/">W3C Working Group Note: Offline Web Applications</a></li> + <li><a href="http://developer.teradata.com/blog/js186040/2011/11/html5-cache-manifest-an-off-label-usage">HTML5 Cache Manifest: An Off-label Usage</a></li> + <li><a href="http://www.ibm.com/developerworks/web/library/wa-ffox3/">Get ready for Firefox 3.0 - A Web developer's guide to the many new features in this popular browser, especially the offline application features</a> (IBM developerWorks)</li> + <li><a href="/ja/docs/Application_cache_implementation_overview">アプリケーションキャッシュ実装の概要</a></li> + <li><a href="//www.onlinewebcheck.com/check.php?adv=1">OnlineWebCheck.com - Check cache manifest file syntax</a> (Desktop app for Windows)</li> +</ul> |