ふりがなの付け方

はじめに

先生!今、非常に困っています。
何に困っているんだね?内容を言ってくれないとわからないよ
ホームページに記事を投稿しようとしているのですが、頂いた原稿に漢字があってルビを振るようにと書いているんです。
なるほどね。漢字の読み間違いがないようにルビを振ってくださいっていうのがご要望なんだね。
そうなんです。ルビってhtmlでも振ることができるんですか?あんまりhtmlでルビをふるって自分の周りでは聞かないくて・・
もちろん振ることができるよ!じゃあサンプルを使いながら説明していこうか

漢字にルビを振る

漢字にルビを振るためには、rubyタグと言われるものを使用します。rubyタグには、rtと言われるルビのテキストを設定するタグとrと言われるルビのテキストを囲む括弧の記号を設定することができるタグが子要素としてあります。

サンプルコード

<!DOCTYPE html>
 <head>
  <meta charset="UTF-8">
  <title>ふりがなの付け方</title>
 </head>
 <body>
  <ruby>要素<rt>ようそ</ruby>
    <ruby>要素<rp>[</rp><rt>ようそ</rt><rp>]</rp></ruby>
 </body>
</html>

サンプルコードの動作例

要素ようそ
要素[ようそ]

上記のコードは、ブラウザ上では、同じ結果になりますが、rubyタグに対応していないブラウザでは、rpを使った方の結果では、「要素(ようそ)」と言った形で漢字の上にふりがなが出る形ではなくなるように表示されます。

関連記事

  1. HTML箇条書きを書く

  2. HTMLでセレクトボックスを作ろう

  3. HTMLでテーブルを作ろう

  4. ちょっと複雑なテーブルをHTMLで作ろう

  5. リンクの貼り方

  6. htmlで番号付きのリストを作ろう

2021年4月
 1234
567891011
12131415161718
19202122232425
2627282930  
Translate »