diff --git a/files/ja/web/html/element/rb/index.md b/files/ja/web/html/element/rb/index.md index 0cd349ae89fa79..3de88460116dac 100644 --- a/files/ja/web/html/element/rb/index.md +++ b/files/ja/web/html/element/rb/index.md @@ -1,17 +1,65 @@ --- -title: ': ルビベース要素' +title: ": ルビベース要素" slug: Web/HTML/Element/rb +l10n: + sourceCommit: e04d8d2766c468f149445c0bf438d09f9b2d188c --- -{{HTMLSidebar}}{{Non-standard_Header}} +{{HTMLSidebar}}{{deprecated_header}} -**HTML ルビベース (``) 要素**は、 {{HTMLElement("ruby") }} 表記のベースとなるテキストの部分を区切るために使用されます。つまり、修飾される文字列です。一つの `` 要素がベーステキストの不可分な区間を隔てるように囲みます。 +**``** は [HTML](/ja/docs/Web/HTML) の要素で、{{HTMLElement("ruby") }} 表記のベースとなるテキストの部分、すなわち修飾される文字列を区切るために使用されます。一つの `` 要素がベーステキストの不可分な区間を区切るように囲みます。 + +## 属性 + +この要素には[グローバル属性](/ja/docs/Web/HTML/Global_attributes)のみがあります。 + +## 使用上のメモ + +- ルビ表記は、日本語の振り仮名や台湾語の注音符号のように、東アジアの文字の発音を示すためのものです。 `` 要素はルビベース文字の区間を区切るために使用されます。 +- `` 要素は{{glossary("void element", "空要素")}}ではありませんが、ソースコード上ではそれぞれの要素の開始タグだけを含めるのが一般的で、その方がマークアップが複雑でなくなり読みやすくなります。ブラウザーは表示する際に完全な要素に補完します。 +- 修飾をしたいそれぞれのベース区間/`` 要素ごとに 1 つずつ {{htmlelement("rt")}} 要素を置く必要があります。 + +## 例 + +### rb の使用 + +この例では、元の文字に対して "Kanji" が等価であるという注釈を提供します。 + +```html + + (kanji) + +``` + +ルビのベーステキストを 2 つの部分に区切るために 2 つの `` 要素を含めています。一方で、注釈も 2 つの {{htmlelement("rt")}} 要素で区切っています。 + +#### 結果 + +{{EmbedLiveSample("Using_rb", "100%", 60)}} + +### 注釈の分割 + +なお、この例を完全に分割して注釈された 2 つのベーステキストの部分で書くこともできます。この場合は `` 要素を含める必要はありません。 + +```html + + 漢 (Kan)(ji) + +``` + +#### 結果 + +{{EmbedLiveSample('Separate annotations')}} + +それ以外の例は、 {{HTMLElement("ruby")}} 要素についての記事を参照してください。 + +## 技術的概要 @@ -44,75 +92,13 @@ slug: Web/HTML/Element/rb
- コンテンツカテゴリ + コンテンツカテゴリー なし
-## 属性 - -この要素には[グローバル属性](/ja/docs/Web/HTML/Global_attributes)のみがあります。 - -## 使用上のメモ - -- ルビ表記は、日本語の振り仮名や台湾語の注音符号のように、東アジアの文字の発音を示すためのものです。 `` 要素はルビベース文字の区間を区切るために使用されます。 -- `` 要素は空要素ではありませんが、ソースコード上ではそれぞれの要素の開始タグだけを含めるのが一般的で、その方がマークアップが複雑ではなく読みやすくなります。ブラウザーは表示する際に完全な要素に補完します。 -- 修飾をしたいそれぞれのベース区間/`` 要素ごとに一つずつ {{htmlelement("rt")}} 要素を置く必要があります。 - -## 例 - -この例では、元の文字に対して "Kanji" が等価であるという注釈を提供します。 - -```html - - 字 - (kanji) - -``` - -ルビのベーステキストを二つの部分に区切るために二つの `` 要素を含めています。一方で、注釈も二つの {{htmlelement("rt")}} 要素で区切っています。 - -なお、この例を完全に分割して注釈された二つのベーステキストの部分で書くこともできます。この場合は `` 要素を含める必要はありません。 - -```html - - 漢 (Kan) - 字 (ji) - -``` - -```html hidden - (kanji) -``` - -```css -body { - font-size: 22px; -} -``` - -出力は以下のようになります。 - -{{EmbedLiveSample("with-ruby", "100%", 60)}} - -上記の HTML はルビに対応して*いない*ブラウザーでは次のように表示されます。 - -```html hidden -漢字 (kan ji) -``` - -```css hidden -body { - font-size: 22px; -} -``` - -{{EmbedLiveSample("without-ruby", "100%", 60)}} - -> **メモ:** それ以外の例は、 {{HTMLElement("ruby")}} 要素についての記事を参照してください。 - ## 仕様書 {{Specifications}} ## ブラウザーの互換性 -{{Compat("html.elements.rb")}} +{{Compat}} ## 関連情報