ブログ運営

ルビ(読みがな)をふるHTMLコード

こんにちは😀広瀬ユキです。

今回は、

完全試合パーフェクトゲーム
Green Tea Creme Brûléeグリーンティークリームブリュレ

このように、HTMLコードを使って、文字にルビをふる方法をご紹介します。

「ルビをふる」ってどういう意味?

漢字や名前や名称などが読み方が難しい場合、その単語の読み間違いを防ぐために読みがなを付けること。

「ルビをふる」って漢字だとどう書くの?

ルビを振るとなります。

「ルビをふる」HTMLコード

基本

「ルビをふる」HTMLコードは<ruby>を使います。

例えば、

完全試合パーフェクトゲーム

このように表したいときは、

<ruby>完全試合<rt>パーフェクトゲーム</rt></ruby>

と、入力します。

WordPressの場合、ビジュアルエディターではなく、テキストエディターに入力してください。

※WordPress以外をご利用の方は、各種サービスが指定するHTMLコードを入力する場所に入力してください。

サイズを変えるには?

では、サイズを変えたい場合は、どうすればよいのでしょうか?

文字のみ大きく表示したい場合

先ほどのHTMLコードをドラッグして反転させ、28pxを選択します。すると、以下のようになります。

完全試合パーフェクトゲーム

HTMLコードはコチラ↓

<ruby><span style="font-size: 28px;">完全試合</span><rt>パーフェクトゲーム</rt></ruby>

最初の<ruby>の後ろに、サイズを指定するコードを入れると、変えることができます。

この場合、ルビの大きさは変わりません。

文字とルビをそれぞれ違うサイズで表示したい場合

文字とルビをそれぞれ違うサイズで表示したい場合、上記のHTMLコードに追記します。

完全試合パーフェクトゲーム

HTMLコードはコチラ↓

<ruby><span style="font-size: 28px;">完全試合</span><rt><span style="font-size: 12px;">パーフェクトゲーム</span></rt></ruby>

<rt>の後ろに、サイズを指定するコードを入れると、変えることができます。

まとめ

「ルビをふる」HTMLコード

<ruby>ここに文字を入れる<rt>ここにルビを入れる</rt></ruby>

文字のみ大きく表示したい場合

<ruby><span style="font-size: 28px;">ここに文字を入れる</span><rt>ここにルビを入れる</rt></ruby>

文字とルビをそれぞれ違うサイズで表示したい場合

<ruby><span style="font-size: 28px;">ここに文字を入れる</span><rt><span style="font-size: 12px;">ここにルビを入れる</span></rt></ruby>

おまけ:ルビの語源・由来は???

ルビの由来は、宝石のルビーのことです。

もともと18世紀初頭の欧米諸国では文字のサイズを表す単位がなく、その後19世紀後半のイギリス🇬🇧で、活版印刷の文字のサイズを宝石に例えて表現していました。

  • 4.5ポイント=ダイヤモンド
  • 5.0ポイント=パール
  • 5.5ポイント=ルビー
  • 6.5ポイント=エメラルド

そして、日本の新聞社が使っていた読み仮名のサイズ7号が5.5ポイントのルビーとサイズが近かったため、日本で「ルビ」という呼び名が広がったのです。

名称がそのまま宝石のルビーの意味だなんて、ちょっと驚きですよね。

当ブログでこのHTMLコードを使っているページ

今回ご紹介した「ルビをふる」HTMLコードは、当ブログでも使っています。

以下のページも合わせてご覧ください。

【ハーゲンダッツ クリスピーサンド】期間限定「抹茶のクリームブリュレ」を食べた感想【2019年5月21日発売】【ハーゲンダッツ クリスピーサンド】期間限定「抹茶のクリームブリュレ」を食べた感想を書きました。【2019年5月21日発売】...
TVアニメ【進撃の巨人[Season3]】第53話「完全試合」あらすじ&感想TVアニメ【進撃の巨人[Season3]】第53話「完全試合」あらすじ&感想を書きました。This article is my impression of watching the TV anime 【Attack on Titan [Season3]】Episode.53 「完全試合」...

編集後記

参考になれば幸いです。いろいろなコードを応用して使ってみたいですね。

☆クリックで応援お願いします☆

PVアクセスランキング にほんブログ村

ブログランキング・にほんブログ村へ にほんブログ村 スイーツブログ コンビニスイーツへ にほんブログ村 ブログブログ ブログ初心者へ