HTMLで振り仮名(ルビ)を付ける方法:rubyの書き方

Programming

今回は、HTMLで振り仮名(ルビ)を付ける方法を例文を基に説明していきます。

HTMLの記述では、特別なタグを使用する事でどんな文字にでも振り仮名を付ける事が出来ます。
ブラウザの機能が高くなった現在では簡単に漢字の読み仮名を調べられるため、中々見かけない技術だが、WEB関連の仕事をしていればいつかは使うことになる要素だと思うので一応覚えておきましょう。

HTMLで振り仮名(ルビ)を振る方法

HTMLで振り仮名(ルビ)を振るには「ruby」タグ「rb」タグ「rp」タグ「rt」タグを使います。

下記が例文です。

漢字かんじにルビを(るには「ruby」を使います。

<p><ruby><rb>漢字</rb><rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>にルビを<ruby><rb>振</rb><rp>(</rp><rt>ふ</rt></ruby>るには「ruby」を<ruby><rb>使</rb><rp>(</rp><rt>つ</rt><rp>)</rp></ruby>います。</p>

まず<rubyタグ>で振り仮名を付けたい漢字と平仮名を囲います。その中で漢字は<rbタグ>で囲い、平仮名は<rtタグ>で囲います。(下記、色分けで分かりやすく)

<ruby><rb>漢字</rb><rp>(</rp><rt>ふりがな</rt><rp>)</rp></ruby>

<rp>タグは、<rubyタグ>に対応していないブラウザが、漢字の上に振り仮名を表示する代わりに「(」をくくって表示させます。
※現在は主要なブラウザではrubyは使用出来るので()が表示される事は滅多に無い。(詳しくはこちら

「ruby」は漢字のみならず英語、平仮名、アイコンにまで、基本何にでも付ける事が出来ます。

平仮名にルビ

あいうえおアイウエオ

<p><ruby><rb>あいうえお</rb><rp>(</rp><rt>アイウエオ</rt><rp>)</rp></ruby></p>

使う事は無いが。

英語にルビ

How ハウ to トゥ give ギブ furigana フリガナ 

<p><ruby><rb>How </rb><rp>(</rp><rt>ハウ </rt><rp>)</rp></ruby><ruby><rb>to </rb><rp>(</rp><rt>トゥ </rt><rp>)</rp></ruby><ruby><rb>give </rb><rp>(</rp><rt>ギブ </rt><rp>)</rp></ruby></ruby><ruby><rb>furigana </rb><rp>(</rp><rt>フリガナ </rt><rp>)</rp></ruby></p>

バランスを整えたい時は「&nbsp;」を使ってうまい具合にスペースを調整します。

アイコンフォントにルビ

  メール   アイコンにもルビを付けれます。

<p><ruby><rb><i class="far fa-envelope fa-lg"></i>  </rb><rp>(</rp><rt>メール  </rt><rp>)</rp></ruby>アイコンにもルビを付けれます。</p>

この様にアイコンフォントに対してもルビを付ける事が出来ます。

WordPressだと超簡単にルビを付けれる

WordPressだとエディタ(Gutenberg)の機能で超簡単にルビを付ける事が可能です。

このようにめんどくさいコードを必要ひつようく、簡単かんたんにルビをけれる便利べんり機能きのうです。

WordPressでルビを付けたい場合はpタグの上にあるツールバーの▼ボタンにある「ルビ<ruby>」を使います。

ポップアップで出てくる記入欄にフリガナを入力して「OK」を押すだけ。

これだけで先述したコードが自動で付いてくれます。


以上が「HTMLで振り仮名(ルビ)を付ける方法:rubyの書き方」でした。

使い道があるのかは分かりませんが…きっといつかは使う時がくるはず…

この記事を書いた人
KEITO

AI × IT × WEB3|関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

Programming
この記事を共有する
スポンサーリンク
スポンサーリンク
KT LIFE
スポンサーリンク

暗号資産投資するなら以下

Bybit

国内人気No.1!屈強なサーバー/信頼性抜群!トレーダー御用達の取引所。

通貨数338種以上
レバレッジ最大100倍
現物取引手数料Maker:0%〜0.1%
Taker:0.02%〜0.1%
先物取引手数料Maker:0%〜0.01%
Taker:0.03%〜0.06%
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり・JPY利用可
特典下記から登録で初回ボーナスあり
登録リンクBybitへの登録は こちら
招待コード22295
レビュー記事レビュー記事は こちら
BigBoss&CRYPTOS

最大レバレッジ1111倍・日本円換金ルート

通貨数BigBoss:15種以上
CRYPTOS:15種以上
レバレッジ最大1111倍
スポット手数料Maker:0.02%〜0.18%
Taker:0.05〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設少し敷居が高い
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクBigBossへの登録は こちら
招待コード6690951
レビュー記事レビュー記事は こちら
Nexo

高APYでのステーキング&レンディング

通貨数60種以上
レバレッジ
スポット手数料Maker:0.04%〜0.20%
Taker:0.03%〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクNexoへの登録は こちら
招待コード
レビュー記事レビュー記事は こちら

他おすすめ取引所はこちら

タイトルとURLをコピーしました