HTML のルビ注釈の代替方法

HTMLHTMLBeginner
今すぐ練習

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

この実験では、HTMLの<rp>タグについて学びます。その使い方、構文、基本的な例について学びます。<rp>タグは、<ruby>タグをサポートしていない人用の代替括弧として使用されます。

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") 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") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70821{{"HTML のルビ注釈の代替方法"}} html/text_head -.-> lab-70821{{"HTML のルビ注釈の代替方法"}} html/para_br -.-> lab-70821{{"HTML のルビ注釈の代替方法"}} html/text_dir -.-> lab-70821{{"HTML のルビ注釈の代替方法"}} html/doc_flow -.-> lab-70821{{"HTML のルビ注釈の代替方法"}} html/inter_elems -.-> lab-70821{{"HTML のルビ注釈の代替方法"}} html/custom_attr -.-> lab-70821{{"HTML のルビ注釈の代替方法"}} end

HTMLファイルをセットアップする

  1. index.htmlという名前のHTMLファイルを作成します。
  2. 本文に以下のHTMLコードを作成します。
<h1>HTML Ruby Parentheses</h1>
<p>Example text here.</p>

<rp> タグを追加する

  1. <p> タグの下に <ruby> タグを追加します。
  2. <ruby> タグの中に、開始タグと終了タグ付きの <rp> タグを追加します。
<ruby>
  <rp>(</rp>
  <rt>MTV</rt>
  <rp>)</rp>
</ruby>

グローバルイベントを追加する

  1. インラインスタイルなど、コードに任意のイベントまたはグローバル属性を追加します。
<ruby style="font-size: 18px;">
  <rp>(</rp>
  <rt>MTV</rt>
  <rp>)</rp>
</ruby>
  1. index.html ファイルをウェブブラウザで開いて、コードを表示します。

まとめ

この実験では、HTMLの<rp>タグとその構文の使い方を学びました。また、<ruby>タグをサポートしていない人用の代替括弧を表示する基本的な例を作成する方法も学びました。<rp>タグは、さまざまな種類のブラウザで正しくフォーマットが表示されるようにするため、HTMLにおいて重要です。