1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
---
title: HTML で用語を定義する
slug: Learn/HTML/Howto/Define_terms_with_HTML
tags:
- Beginner
- Guide
- HTML
- Learn
translation_of: Learn/HTML/Howto/Define_terms_with_HTML
---
<div class="summary">
<p>HTML は、インラインであろうと構造化された用語集であろうと、記述の意味を伝達するいくつかの方法を提供します。 この記事では、キーワードを定義する際に適切にマークアップする方法について説明します。</p>
</div>
<table class="learn-box nostripe standard-table">
<tbody>
<tr>
<th scope="row">前提条件:</th>
<td><a href="/ja/docs/Learn/Getting_started_with_the_web">基本的な HTML 文書の作成方法</a>に精通している必要があります。</td>
</tr>
<tr>
<th scope="row">目的:</th>
<td>新しいキーワードを導入する方法と説明リストを作成する方法を学びます。</td>
</tr>
</tbody>
</table>
<p>用語の意味が必要なときは、おそらくまっすぐに辞書や用語集に行くでしょう。 辞書や用語集は、キーワードを1つ以上の説明と正式に関連付けます。 この場合は次のようになります。</p>
<blockquote>
<dl>
<dt>Blue (<em>Adjective</em>)</dt>
<dd>Of a color like the sky in a sunny day.<br>
<em><q>The clear blue sky</q></em></dd>
<dd>Of a subtle sadness, melancholy.<br>
<em><q>I'm feeling blue</q></em></dd>
</dl>
</blockquote>
<p>しかし、私たちは常に次のように非公式にキーワードを定義しています。</p>
<blockquote>
<p><strong><dfn>Firefox</dfn></strong> は、Mozilla Foundation によって作成されたウェブブラウザです。</p>
</blockquote>
<p>これらのユースケースに対処するために、{{Glossary("HTML")}} には説明と説明された単語をマークするための{{Glossary("tag","タグ")}}が用意されているので、読者に意味が適切に伝わるようになります。</p>
<h2 id="How_to_mark_informal_description" name="How_to_mark_informal_description">非公式の説明をマークする方法</h2>
<p>教科書では、キーワードが初めて出てきたときに、キーワードを太字にしてすぐに定義するのが一般的です。</p>
<p>私たちは HTML でもそうしていますが、HTML は視覚的なメディアではないので太字を使いません。 {{htmlelement("dfn")}} は、初めて出現するキーワードをマークするための特別な要素です。 <code><dfn></code> タグは、定義ではなく定義される単語の周りにあり、定義は段落全体で構成されています。</p>
<pre class="brush: html"><p><dfn>Firefox</dfn> は、Mozilla Foundation によって作成されたウェブブラウザです。</p>
</pre>
<div class="note">
<p>太字のもう1つの用途はコンテンツを強調することです。 太字自体は HTML の概念ではありませんが、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">強調を示すタグ</a>があります。</p>
</div>
<h3 id="Special_case_Abbreviations" name="Special_case_Abbreviations">特別な場合: 略語</h3>
<p>{{htmlelement("abbr")}} で<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/%E9%AB%98%E5%BA%A6%E3%81%AA%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E6%88%90%E5%9E%8B#Abbreviations">略語を特別にマーク</a>することが最適です。 これにより、スクリーンリーダーが適切に読むことができ、すべての略語を統一的に操作できるようになります。 新しいキーワードの場合と同様に、初めて出現したときに略語を定義する必要があります。</p>
<pre class="brush: html"><p>
<dfn><abbr>HTML</abbr> (hypertext markup language、ハイパーテキストマークアップ言語)</dfn>
は、ウェブ上のドキュメントを構造化するために使用される記述言語です。
</p></pre>
<div class="note">
<p>HTML 仕様は実際には略語を拡張するために <a href="http://www.w3.org/TR/html/text-level-semantics.html#the-abbr-element"><code>title</code> 属性を用意しています</a>（英語）。 ただし、これはインライン展開を提供するための許容可能な代替方法ではありません。 <code>title</code> の内容は、マウスを使用していない限り、ユーザーには完全に隠されています。 この仕様も同様に<a href="https://www.w3.org/TR/html/dom.html#the-title-attribute">これを認めています</a>（英語）。</p>
</div>
<h3 id="Improve_accessibility" name="Improve_accessibility">アクセシビリティの向上</h3>
<p>{{HTMLElement('dfn')}} は定義されたキーワードをマークし、現在の段落がキーワードを定義していることを示します。 言い換えれば、<code><dfn></code> 要素とそのコンテナの間に暗黙の関係があります。 より正式な関係を望む場合、または定義が段落全体ではなく1つの文で構成されている場合は、<code><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> 属性を使用して、より正式に定義に関連付けることができます。</p>
<pre class="brush: html"><p>
<span id="ff">
<dfn aria-describedby="ff">Firefox</dfn>
は、Mozilla Foundation によって作成されたウェブブラウザです。
</span>
<a href="http://www.mozilla.org">mozilla.org</a> からダウンロードできます。
</p></pre>
<p>支援技術は、この属性を使用して、指定された用語の代替テキストを見つけることができます。 <code><dfn></code> 要素だけでなく、キーワードを囲む任意のタグで <code>aria-describedby</code> を使用して定義できます。 <code>aria-describedby</code> は、説明を含む要素の {{htmlattrxref('id')}} を参照します。</p>
<h2 id="How_to_build_a_description_list" name="How_to_build_a_description_list">説明リストを作成する方法</h2>
<p>説明リストは、用語とそれに対応する説明のリスト（例: 定義リスト、辞書エントリ、よくある質問、およびキーと値のペア）です。</p>
<div class="note">
<p>説明リストは、対話が話し手を直接記述しないため、<a href="http://www.w3.org/TR/html5/grouping-content.html#the-dl-element">対話をマークアップするのには適していません</a>（英語）。 ここには、<a href="http://www.w3.org/TR/html5/common-idioms.html#conversations">対話をマークアップするための推奨事項</a>（英語）があります。</p>
</div>
<p>説明された用語は、{{htmlelement("dt")}} 要素内にあります。 対応する説明は直ちに続き、1つ以上の {{htmlelement("dd")}} 要素に含まれています。 説明リスト全体を {{htmlelement("dl")}} 要素で囲みます。</p>
<h3 id="A_simple_example" name="A_simple_example">簡単な例</h3>
<p>ここでは簡単な例として、食べ物と飲み物の種類を説明します。</p>
<pre class="brush: html"><dl>
<dt>jambalaya</dt>
<dd>
rice-based entree typically containing chicken,
sausage, seafood, and spices
</dd>
<dt>sukiyaki</dt>
<dd>
Japanese specialty consisting of thinly sliced meat,
vegetables, and noodles, cooked in sake and soy sauce
</dd>
<dt>chianti</dt>
<dd>
dry Italian red wine originating in Tuscany
</dd>
</dl>
</pre>
<div class="note">
<p>ご覧のとおり、基本パターンは <code><dt></code> の用語を <code><dd></code> の説明で置き換えることです。 行内に2つ以上の用語が存在する場合は、以下の説明はそれらのすべてに適用されます。 行内に2つ以上の説明が存在する場合、それらはすべて最後に指定された用語に適用されます。</p>
</div>
<h3 id="Improving_the_visual_output" name="Improving_the_visual_output">視覚的な出力を改善する</h3>
<p>グラフィカルブラウザに前述のリストが表示される方法は次のとおりです。</p>
<p>{{EmbedLiveSample("A_simple_example", 600, 180)}}</p>
<p>キーワードをより際立たせたい場合は、それらを強調することができます。 HTML は視覚的な媒体ではないことを忘れないでください。 すべての視覚効果に対して {{glossary("CSS")}} が必要です。 CSS の {{cssxref("font-weight")}} プロパティは、ここで必要なものです。</p>
<pre class="brush: css">dt {
font-weight: bold;
}
</pre>
<p>これにより、以下のわずかに読みやすい結果が生成されます。</p>
<p>{{EmbedLiveSample("How_to_build_a_description_list", 600, 180)}}</p>
<h2 id="Learn_more" name="Learn_more">より詳しく知る</h2>
<ul>
<li>{{htmlelement("dfn")}}</li>
<li>{{htmlelement("dl")}}</li>
<li>{{htmlelement("dt")}}</li>
<li>{{htmlelement("dd")}}</li>
<li><a href="/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby 属性の使用方法</a></li>
</ul>
|
