閉じる
閉じる

あまめも

HTMLでふりがなを表示する方法!タグの使い方

09222021-info

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

サイトを作成してると、文字にふりがな(るび)を表示したい時ってありますよね?
例えばこんな感じ、

毘沙門天(びじゃもんてん)

これを実現するには、<ruby>タグを利用します。

具体的な使い方は、下記構造。

<ruby>
 <rb>ルビをふる元の文字</rb>
 <rp>(</rp><rt>ルビ</rt><rp>)</rp>
</ruby>

rb : Ruby Base の略、るびをふる元の文字
rt : Ruby Text の略、るびの文字
rp : Ruby Parenthesesの略、未対応ブラウザの際、表示する文字

<rp>タグはルビに対応してないブラウザの場合に表示がおかしくならないようにする為のもの。基本的にルビは文字の上部に表示されますが、未対応だと続けて表示されます。具体的な例を示すと、未対応のブラウザの場合

<rp>で指定あり → 毘沙門天(びしゃもんてん)
<rp>なし    → 毘沙門天びしゃもんてん

と表示されます。この時表示される()<rp>で指定して分かりやすくしてます。

POINT!
ちなみに<rb>は省略可能

関連記事

  1. take090-thumbnail

    【WaznFilm更新】「Markdownって良く聞くけど、どん…

  2. コロナ対策

    簡単!飲食店オーナーの「連絡先の把握に努める」というコロナ対策の…

  3. thumbnail

    WordPressでプラグインを簡単に作成する方法メモ

  4. 雑誌

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

  5. 【基礎】「MySQL」を使い始めたのは良いのですがコマンドを忘れ…

  6. アイコン

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

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

  1. うまからくん
  2. コロナ対策

Twitter

ページ上部へ戻る