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

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

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

属性

+ +

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

+ +

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

+ +

使用上の注意

+ +

よくある使用例

+ +

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

+ + + +

文法的な考慮事項

+ +

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

+ +

既定のスタイル

+ +

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

+ + + +

例

+ +

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

+ +

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

+ +

HTML

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

結果

+ +

{{EmbedLiveSample("Marking_up_an_abbreviation_semantically")}}

+ +

略語の整形

+ +

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

+ +

HTML

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

CSS

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

結果

+ +

{{EmbedLiveSample("Styling_abbreviations")}}

+ +

完全形の提供

+ +

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

+ +

HTML

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

結果

+ +

{{EmbedLiveSample("Providing_an_expansion")}}

+ +

略語の定義

+ +

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

+ +

HTML

+ +
<p><dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr>
+</dfn> is a markup language used to create the semantics and structure
+of a web page.</p>
+
+<p>A <dfn id="spec">Specification</dfn>
+(<abbr title="Specification">spec</abbr>) is a document that outlines
+in detail how a technology or API is intended to function and how it is
+accessed.</p>
+ +

結果

+ +

{{EmbedLiveSample("Defining_an_abbreviation", 600, 120)}}

+ +

アクセシビリティの考慮

+ +

頭字語や略語を、ページ内で最初に使われたときに完全な形で綴ることは、特に中身が技術用語や産業用語であった場合に、人々が理解するのに有益です。

+ +

例

+ +
<p>JavaScript Object Notation (<abbr>JSON</abbr>) は軽量のデータ交換形式です。</p>
+
+ +

これは特に、コンテンツで説明している用語や概念になじみがない人、その言語の初心者、認知症の人などに有益です。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'semantics.html#the-abbr-element', '<abbr>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-abbr-element', '<abbr>')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}{{Spec2('HTML4.01')}}
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

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