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

はじめに

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

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

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ファイルを保存し、ウェブブラウザで開きます。次のような出力が表示されるはずです。

Ruby Annotation Example Output

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

まとめ

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

HTML のルビ注釈の解説