2024.07.19
ChatGPTにクラス名を付けてもらってみた
- コーディング
WEB制作のあれこれがわかる！
WEB制作のあれこれがわかる！
ruby要素はふりがなをつけるためのHTML要素で、rubyはそのままルビ(ふりがな)のことを意味します。
ルビ関連の要素はruby要素を含めていくつかあり、その使い方を混同してしまったりするので、記事にまとめてみました！
目次
ruby要素は、 ルビ関連要素の大枠となるもので、他の全てのルビ関連要素はruby要素内で使用します。
ルビ関連要素は他に、rt要素、rb要素、rp要素、rtc要素の4つがあります。
rt要素は「ruby text」の略で、ルビとして表示させたいテキストはこの要素を指定します。
この要素が一番の肝となる要素です。
See the Pen ruby要素① by spiqa design (@spiqa_design) on CodePen.
rb要素のbは「base text」を意味し、その内容がルビを振る対象となることを表します。
上の例を見ていただければわかる通り、必ずしもrb要素で囲わなくても大丈夫です。
漢字とふりがなとで別々にスタイルを調整したい時は、漢字をrb要素で囲うといいでしょう。
See the Pen ruby要素② by spiqa design (@spiqa_design) on CodePen.
ルビ要素に未対応のブラウザでは、漢字とルビが同じ大きさでそのまま続けて表示されてしまいます。
上記例だと、そのまま「寿司すし」と表示されます。
rp要素は未対応のブラウザでルビ要素を表示させた時、ルビに（）をつけることができる要素です。
表示を「寿司(すし)」と表示されるようにします。
対応ブラウザではrp要素の内容は表示されません。
rp要素のpは「parentheses（丸かっこ）」という意味です。
See the Pen Untitled by spiqa design (@spiqa_design) on CodePen.
rtc要素は、rt要素をグループ化する要素です。
rtcは「ruby text container(rt要素の入れもの)」という意味です。
たとえばひらがなのルビだけでなく、下にローマ字のルビも振りたい時などに、それぞれのルビを区別するためにrtc要素を使用します。
※下の例では特にスタイル調整していないのでローマ字部分がそのまま続けて表示されています。
See the Pen ruby要素④ by spiqa design (@spiqa_design) on CodePen.
関連要素がruby要素も含めると合計5つもあるので、こんがらがってしまいますよね。
自分の備忘録としてもこの記事を書きました。そんなに頻繁に使用するHTMLタグでもないので、使い慣れるまではこの記事をぜひ参考にしてください！
こちらの記事もおすすめ
株式会社スピカデザイン
渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。
© 2020 spiqa design
https://spiqa.design/