【HTML】サイトで漢字にルビ(読み仮名)ふりたいんだけどなんてタグ使うんだ？ってなったのでメモ
こんにちは！ あますた(@amaguristar)です。
現在、趣味と実益を兼ねてPHPでお店の在庫管理システムを作成中。住所蘭の入力を作成して「あれ？」と思ったのが、ルビの付け方。ルビ用のタグってなんだ？となったので使い方をメモ。
<ruby>タグで設定可能
調べてみると設定方法は以外と簡単。分かりやすくインデントをつけて書くと。
<ruby>
<rb>ここに文字(※1)</rb>
<rp>(</rp>
<rt>ここにルビ(※2)</rt>
<rp>)</rp>
</ruby>
<rb>ここに文字(※1)</rb>
<rp>(</rp>
<rt>ここにルビ(※2)</rt>
<rp>)</rp>
</ruby>
使うタグは4種類。
「4.」の未対応のブラウザでの表示は具体的には下記の様に表示されます。
[ＨＴＭＬ]
<ruby>
<rb>浅草</rb>
<rp>(</rp>
<rt>あさくさ</rt>
<rp>)</rp>
</ruby>
[未対応ブラウザの表示]
<rb>浅草</rb>
<rp>(</rp>
<rt>あさくさ</rt>
<rp>)</rp>
</ruby>
浅草(あさくさ)
本来上記の例では「浅草」という文字の上に小さく読み仮名が「あさくさ」と表示されますが、未対応の場合は<rp>タグで囲まれた文字も一緒に表示されます。ちなみに<rp>タグを設定しない場合、上記の例では
浅草あさくさ
と、表示されてしまいます。今回は「(」「)」で囲う様にしましたが、分かり易ければ「<」「>」でも「–」でも問題ありません。好きな様に設定できます。
スニペットに登録しておくと便利
実際に使う時はいちいち打ち込むと面倒なので、スニペット登録がおすすめ。最近はタダで使えるアプリがあったり、エディタ標準機能で設定できたりと便利になりました。
自分は無料アプリ「Dash」を使用してます。使い方は下記リンクにて！
・・・と思って過去記事検索しましたが、書いてなかった様なので近いうちにリンク貼ります。
まとめ
設定するには下記テンプレートを使用。
[HTML]
令和元年
<ruby><rb>令和元年</rb><rp>(</rp><rt>れいわがんねん</rt><rp>)</rp></ruby>
[結果]
上記テンプレートの「令和元年」及ルビの「れいわがんねん」の場所を任意に変更して下さい。
