【HTML】HTMLでルビ（ふりがな）を振る方法

ブレインキャット

今回はHTMLで漢字にルビを振る方法をご紹介します。

【HTML】HTMLファイルを作成にあたっての基本とは！設定しておくことetc... ブレインキャット今回はHTMLファイルを作成するにあたって設定しておくべき基本的項目をまとめておこうと思います！ HTM...

前知識
実際のコード例
結果

前知識

<ruby> 〜 </ruby>

1	<ruby> 〜 </ruby>

ルビを振りたい部分を囲みます。

<rb> ～ </rb>

1	<rb> ～ </rb>

ルビを振る対象の漢字を設定します。

<rt> ～ </rt>

1	<rt> ～ </rt>

ルビ（ふりがな）を設定します。

<rp> ～ </rp>

1	<rp> ～ </rp>

ルビに対応していないブラウザがルビの代わりに表示するカッコになります。

ブレインキャット

では実際にHTMLファイルを作成しルビを振ってみましょう！

実際のコード例

<head>
    <meta charset="utf-8">
    <title>記事のタイトル</title>
</head>
<body>
     <!--記事の内容-->
     <ruby>
         <rb>記事</rb> 
         <rp>（</rp>
         <rt>きじ</rt>
         <rp> ）</rp>    
    </ruby>
</body>
</html>