最終更新HTMLの<ruby>ルビタグは、テキストにルビ(ふりがな・よみがな)を振るために使います。<>HTML<p>中国にとって<ruby>熊猫<rt>パンダ</rt></ruby>は国宝です。縦書きでは使わないrpタグで未対応ブラウザ対策HTMLでルビ(ふりがな)を振る方法ルビを振るためには<ruby>と<rt>の2つタグを使います。具体的には、以下のような書き方をします。👆特にCSSを指定しなくても、ブラウザで「ふりがな」らしく表示してくれます。のちほどCSSでフォントサイズなどを調整する方法を紹介します。この書き方は全ての主要ブラウザに対応しています。1文字ごとにルビを振る単語1文字ごとにルビを振りたいこともあるかもしれません。「令和」は「レイ」+「ワ」であることを明確に伝えたい...といった場合ですね。👆その場合、ルビを振りたい文字列のすぐ右に<rt>ふりがな</rt>を書きます。別の文字列でも同じことをします。1つの<ruby>の中に複数の<rt>が入るわけですね。見づらくなるのが難点です。和<rt>わ</rt></ruby>👆改行を入れると読みやすくなりますが、ブラウザでその部分に半角スペースが入って表示されてしまう可能性があります。和」のように「令」と「和」の間に半角スペースが入って表示される可能性があります。ルビが長いと見づらくなることも<>HTML<p>まずは<ruby>HTML<rt>えいちてぃーえむえる</rt></ruby>を学習しましょう。👆こればかりはどうにもなりませんが、<rt>内のテキストが長いと、ルビだけ長くなり、左右に隙間が空いてしまうことがあるので注意しましょう。CSSでルビのスタイルを調整ここからはCSSでルビ(ふりがな)のスタイルを調整する方法を紹介します。}というCSSを書くことで調整できます。文字サイズはrtに対してfont-sizeを指定することで変更できます。<>HTML#CSS<p>中国にとって<ruby>熊猫<rt>パンダ</rt></ruby>は国宝です。Chromeの場合、デフォルトのfont-sizeは50%です。class="rt-larger">パンダ</rt></ruby>は国宝です。👆一部のルビのスタイルだけ変えたい場合には、HTMLで<rt>にクラス名を指定しておき、そのクラスに対してCSSで装飾を行えば良いでしょう。ルビを左寄せにする<>HTML#CSS<p>写真を合成するなら<ruby>Photoshop<rt>フォトショップ</rt></ruby>を使うのが一般的ですね。leftを指定すると、ルビが左寄せになります。👆デフォルトでは、単語に対してルビは均等割り付けされたように表示されます。centerを指定すると、文字がギュッと詰まります。😿text-alignより柔軟にルビの位置を調整できるruby-alignというCSSプロパティがあるのですが、これは実験的な機能で、Firefoxなどの一部のブラウザにしか対応していません。フォントを変えるWindows、Mac、iOS、Android、それぞれで標準搭載されているフォントは異なります。フォントが異なれば、ルビの位置も少なからずズレます。そのため、できればrubyには、複数のブラウザ共通で使用できるフォントを指定するのが良いでしょう。😺Webフォントを使えばこの問題を回避できる可能性が高いです(それでも表示のされ方が異なることがありますが...)。<>HTML#CSS<p>それでは<ruby>CSS<rt>しーえすえす</rt></ruby>を学びましょう。Explorerを含め、すべての主要ブラウザで使用できます。caniuse.com縦書きでは使わないただし、CSSのwriting-modeにより、テキストを縦書き表示にした場合には、正常に表示されないことがあります。通常の横書きのテキストでのみ使用することをおすすめします。基本的に不要かと思いますが、念のための未対応ブラウザ対策を行うこともできます。<ruby>内で<rp>タグを使うと、その内容がルビ未対応のブラウザでのみ表示されます。<ruby>HTML<rp>(</rp><rt>えいちてぃーえむえる</rt><rp>)</rp></ruby>👆<rp>にはカッコを入れています。<rp>内のテキスト(カッコ)は、ルビ表示未対応ブラウザでのみ表示されます。対応ブラウザと、未対応ブラウザでそれぞれこのような表示になるわけですね。どんな環境でも確実にきれいに表示させたい場合は<rp>を使うと良いでしょう。