path: root/files/ja/web/html/element/u/index.html

---
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>&lt;u&gt;</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>&lt;u&gt;</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>&lt;u&gt;</code>) 要素は HTML 4 で非推奨になりました。しかし <code>&lt;u&gt;</code> は、 HTML 5 で新しい意味論的な、何らかの曖昧な注釈が適用されるテキストをマークするという意味で復活しました。</p>

<div class="note">
<p>(既定で下線が引かれる) ハイパーリンクと誤認されるような方法で、 (これも既定で下線が引かれる) <code>&lt;u&gt;</code> 要素を使用することは避けるように注意してください。</p>
</div>

<h3 id="Use_cases" name="Use_cases">使用例</h3>

<p><code>&lt;u&gt;</code> 要素の有効な使用例としては、綴りエラーの通知、中国語の文字列の{{interwiki("wikipedia", "proper name mark", "固有名詞記号")}}の記述、その他の形の注釈などがあります。</p>

<p>単に表現の目的で下線を引いたり、本の題名を記述したりするために <code>&lt;u&gt;</code> を使用するべきでは<em>ありません</em>。</p>

<h3 id="Other_elements_to_consider_using" name="Other_elements_to_consider_using">仕様を考慮するべきその他の要素</h3>

<p>多くの場合、次のような場合は <code>&lt;u&gt;</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>&lt;u&gt;</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>&lt;u&gt;</code> 要素と CSS を使用して、綴り間違いのエラーを含む段落を表示し、エラー箇所をこの目的でよく使用される、赤い波線の下線スタイルで示します。</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;p&gt;This paragraph includes a &lt;u class="spelling"&gt;wrnogly&lt;/u&gt;
spelled word.&lt;/p&gt;</pre>

<p>この HTML では、 <code>&lt;u&gt;</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>&lt;u&gt;</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_&lt;u>" name="Avoiding_&lt;u>">&lt;u&gt; の回避</h3>

<p>多くの場合、実際には <code>&lt;u&gt;</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">&lt;span class="underline"&gt;Today's Special&lt;/span&gt;
&lt;br&gt;
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>&lt;u&gt;</code> や <code>&lt;i&gt;</code> でもなく、 {{HTMLElement("cite")}} 要素を使用して表現してください。</p>

<h5 id="HTML_3">HTML</h5>

<pre class="brush: html notranslate">&lt;p&gt;The class read &lt;cite&gt;Moby Dick&lt;/cite&gt; in the first term.&lt;/p&gt;</pre>

<h5 id="Result_with_default_style" name="Result_with_default_style">既定のスタイルでの結果</h5>

<p>{{EmbedLiveSample("example-unstyled-cite", 650, 80)}}</p>
</div>

<p>なお、 <code>&lt;cite&gt;</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', '&lt;u&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-u-element', '&lt;u&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '&lt;b&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

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