閉じる
閉じる

あまめも

【HTML】サイトで漢字にルビ(読み仮名)ふりたいんだけどなんてタグ使うんだ?ってなったのでメモ

こんにちは! あますた(@amaguristar)です。

現在、趣味と実益を兼ねてPHPでお店の在庫管理システムを作成中。住所蘭の入力を作成して「あれ?」と思ったのが、ルビの付け方。ルビ用のタグってなんだ?となったので使い方をメモ。

目次

 

<ruby>タグで設定可能

調べてみると設定方法は以外と簡単。分かりやすくインデントをつけて書くと。

<ruby>
  <rb>ここに文字(※1)</rb>
  <rp>(</rp>
    <rt>ここにルビ(※2)</rt>
  <rp>)</rp>
</ruby>

使うタグは4種類。

1.<ruby>~</ruby>タグは対象範囲を設定
このタグ内でルビを付ける処理をしますよーという宣言
2.<rb>~</rb>タグ内の文字がメイン
ルビを付けるベース文字。通常この文字の上部にルビが表示される。
3.<rt>~</rt>タグでルビを設定
メインの文字に付けるルビを設定。
4.<rp>~</rp>タグでブラウザが対応していない時の対応
<ruby>タグ未対応のブラウザで表示を整える為のタグ。主に「(」などの記号を使い整える。

「4.」の未対応のブラウザでの表示は具体的には下記の様に表示されます。

[HTML]
<ruby>
  <rb>浅草</rb>
  <rp>(</rp>
    <rt>あさくさ</rt>
  <rp>)</rp>
</ruby>
[未対応ブラウザの表示]
浅草(あさくさ)

本来上記の例では「浅草」という文字の上に小さく読み仮名が「あさくさ」と表示されますが、未対応の場合は<rp>タグで囲まれた文字も一緒に表示されます。ちなみに<rp>タグを設定しない場合、上記の例では

浅草あさくさ

と、表示されてしまいます。今回は「(」「)」で囲う様にしましたが、分かり易ければ「<」「>」でも「–」でも問題ありません。好きな様に設定できます。

スニペットに登録しておくと便利

実際に使う時はいちいち打ち込むと面倒なので、スニペット登録がおすすめ。最近はタダで使えるアプリがあったり、エディタ標準機能で設定できたりと便利になりました。

自分は無料アプリ「Dash」を使用してます。使い方は下記リンクにて!

・・・と思って過去記事検索しましたが、書いてなかった様なので近いうちにリンク貼ります。

まとめ

設定するには下記テンプレートを使用。

[HTML]
<ruby><rb>令和元年</rb><rp>(</rp><rt>れいわがんねん</rt><rp>)</rp></ruby>
[結果]
令和元年(れいわがんねん)

上記テンプレートの「令和元年」及ルビの「れいわがんねん」の場所を任意に変更して下さい。

関連記事

  1. 【HTML】サイトにテキストボックスを付けたいって時の設定方法

  2. タイプライター

    文字の間隔を設定したいそんな時の設定方法

  3. 雑誌

    「一文字だけ雑誌の様におしゃれに大きく表示したい」直ぐに解決可能…

  4. アイコン

    HTMLで簡単に拡張子に合ったアイコンを設定する方法【css】

  5. GitのリモートリポジトリをSSH接続で独自サーバに作成してみた…

  6. 良いか悪いかは別として複数サイトで同じ「css」を参照させてみま…

こんなメモもありますよ♪

  1. 看板
  2. 磯丸水産看板

Twitter

ページ上部へ戻る