From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/html/element/u/index.html | 216 +++++++++++++++++++++++++++++++++ 1 file changed, 216 insertions(+) create mode 100644 files/ja/web/html/element/u/index.html (limited to 'files/ja/web/html/element/u') 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: ': 非言語的注釈 (下線) 要素' +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 +--- +
{{HTMLRef}}
+ +

HTML の非言語的注釈要素 (<u>) は、非言語的に注釈があることを示す方法で表示する行内テキストの区間を示します。これは既定で単純な実線の下線として表示されますが、 CSS を使用して変更することもできます。

+ +
+

この要素は古いバージョンの HTML で "Underline" (下線) 要素と呼ばれる傾向があり、現在でもそのように誤用されることがあります。テキストに下線を引くのであれば、代わりに CSS の {{cssxref("text-decoration")}} プロパティを underline に設定したスタイルを適用してください。

+
+ +
{{EmbedInteractiveExample("pages/tabbed/u.html", "tabbed-shorter")}}
+ + + +

<u> を使用するのがどのような場合に適切で、どのような場合に適切でないのかについての詳細は、{{anch("Usage notes", "使用上の注意")}}を参照してください。

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

属性

+ +

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

+ +

使用上の注意

+ +

他の純粋な整形要素と同様に、以前の HTML の下線 (<u>) 要素は HTML 4 で非推奨になりました。しかし <u> は、 HTML 5 で新しい意味論的な、何らかの曖昧な注釈が適用されるテキストをマークするという意味で復活しました。

+ +
+

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

+
+ +

使用例

+ +

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

+ +

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

+ +

仕様を考慮するべきその他の要素

+ +

多くの場合、次のような場合は <u> よりも他の要素を使用するべきです。

+ + + +

(<u> で作成された非言語的な注釈に対して) 言語的な注釈を提供する場合は、 {{HTMLElement("ruby")}} 要素を使用してください。

+ +

意味論的な意味なしで下線を引きたい場合は、 {{cssxref("text-decoration")}} プロパティの値 underline を使用してください。

+ +

例

+ +

綴りエラーを表示

+ +

この例は、 <u> 要素と CSS を使用して、綴り間違いのエラーを含む段落を表示し、エラー箇所をこの目的でよく使用される、赤い波線の下線スタイルで示します。

+ +

HTML

+ +
<p>This paragraph includes a <u class="spelling">wrnogly</u>
+spelled word.</p>
+ +

この HTML では、 <u> にクラス spelling を付けて、 "wrongly" という語の綴りミスを示すために使用しているのが分かります。

+ +

CSS

+ +
u.spelling {
+  text-decoration: red wavy underline;
+}
+ +

この CSS は <u> 要素にクラス spelling がついてスタイル付けされるとき、テキストすぐ下に赤い波線の下線を引くことを示しています。これはスペルミスをスタイル付けするときに一般的なスタイル付けです。 red dashed underline を使って表現できるスタイルもよく使われます。

+ +

結果

+ +

結果は現在利用可能なもっと有名なワープロを使ってきた人になじみがあるものでしょう。

+ +

{{EmbedLiveSample("Indicating_a_spelling_error", 650, 80)}}

+ +

<u> の回避

+ +

多くの場合、実際には <u> を使用したいと思わないでしょう。いくつかの場面で代わりに何をするべきかを示す例を挙げましょう。

+ +

意味を伴わない下線

+ +

意味を含むことがないテキストに下線を引くには、次のように、 {{HTMLElement("span")}} 要素と {{cssxref("text-decoration")}} プロパティに "underline" を設定したものを使用してください。

+ +
HTML
+ +
<span class="underline">Today's Special</span>
+<br>
+Chicken Noodle Soup With Carrots
+ +
CSS
+ +
.underline {
+  text-decoration: underline;
+}
+ +
結果
+ +

{{EmbedLiveSample("Non-semantic_underlines", 650, 80)}}

+ +

書籍の題名の表現

+ +
+

書籍の題名は <u> や <i> でもなく、 {{HTMLElement("cite")}} 要素を使用して表現してください。

+ +
HTML
+ +
<p>The class read <cite>Moby Dick</cite> in the first term.</p>
+ +
既定のスタイルでの結果
+ +

{{EmbedLiveSample("example-unstyled-cite", 650, 80)}}

+
+ +

なお、 <cite> 要素の既定のスタイルではテキストを斜体で表示します。ご希望であれば、 CSS を使用して上書きすることができます。

+ +
cite {
+  font-style: normal;
+  text-decoration: underline;
+}
+ +
カスタムスタイルでの結果
+ +

{{EmbedLiveSample("Presenting_a_book_title", 650, 80)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-u-element', '<u>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-u-element', '<u>')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}{{Spec2('HTML4.01')}}
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf