HTML のルビ注釈をマスターする

はじめに

東アジアの活版印刷では、ルビは通常、文字の上または右に配置される小さなテキスト注釈です。このテキストは、文字の発音または翻訳を提供します。ルビは、HTMLにおけるルビ注釈の重要なコンポーネントです。この実験では、HTMLの<rt>タグを使用してルビ注釈を作成する方法を学びます。

注: index.htmlでコーディングを練習し、Visual Studio CodeでHTMLを書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート8080でウェブサービスを実行します。その後、Web 8080タブを更新して、ウェブページをプレビューできます。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/charset("Character Encoding") html/TextContentandFormattingGroup -.-> html/para_br("Paragraphs and Line Breaks") html/TextContentandFormattingGroup -.-> html/text_dir("Text Direction") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70823{{"HTML のルビ注釈の解説"}} html/head_elems -.-> lab-70823{{"HTML のルビ注釈の解説"}} html/charset -.-> lab-70823{{"HTML のルビ注釈の解説"}} html/para_br -.-> lab-70823{{"HTML のルビ注釈の解説"}} html/text_dir -.-> lab-70823{{"HTML のルビ注釈の解説"}} html/doc_flow -.-> lab-70823{{"HTML のルビ注釈の解説"}} html/inter_elems -.-> lab-70823{{"HTML のルビ注釈の解説"}} end

HTMLドキュメントのセットアップ

まず、index.htmlファイルに新しいHTMLドキュメントを作成しましょう。ファイルに次のコードを追加します。

<!doctype html>
<html>
  <head>
    <title>Ruby Annotation Example</title>
  </head>
  <body>
    <h1>Ruby Annotation Example</h1>
  </body>
</html>

この基本構造は、ルビ注釈の例を作成するために使用するドキュメントをセットアップします。

ルビの追加

次に、ルビ付きで注釈を付けたいテキストを追加します。h1タグの後に次のコードを追加します。

<p>
  Here is some text that we want to annotate with ruby text. In East Asian
  typography, ruby text is used to provide the pronunciation or translation of a
  character.
</p>

ルビ注釈の作成

次に、テキスト内の文字に対してルビ注釈を作成しましょう。文字を囲むために<ruby>タグを使用し、ルビのテキストを提供するために<rt>タグを使用します。段落の後に次のコードを追加します。

<p>
  Here is some text that we want to annotate with ruby text. In East Asian
  typography, ruby text is used to provide the pronunciation or translation of a
  character.
</p>

<ruby> 漢 <rt>hàn</rt> </ruby>

この例では、<ruby>タグで文字「漢」を囲んでいます。そして、<rt>タグを使用してルビのテキスト「hàn」を提供しています。

さらに文字を追加する

例にさらにいくつかの文字を追加しましょう。<ruby>タグのコードを次のものに置き換えます。

<ruby> 漢 <rt>hàn</rt> </ruby>

<ruby> 字 <rt>zì</rt> </ruby>

<ruby> 表 <rt>biǎo</rt> </ruby>

このコードでは、例にさらに2つの文字を追加し、それぞれのルビのテキストで注釈を付けています。

ルビ注釈のテスト

index.htmlファイルを保存し、ウェブブラウザで開きます。次のような出力が表示されるはずです。

この出力では、それぞれのルビのテキスト付きの注釈付きの文字が見えます。

まとめ

おめでとうございます！HTMLの<rt>タグを使用して、成功裏にルビ注釈を作成しました。ルビのテキストは、HTMLにおけるルビ注釈の重要なコンポーネントであり、東アジアの活版印刷では文字の発音や翻訳を提供するために使用されます。