子ども向けエンタメサイトに使いたいHTML！？「ふりがな（ルビ）」

HTMLでルビタグを使おう！

cssを使用しなくても可能なので、簡単にできます。

下記、参考コードになります。

<ruby><rb>鬼滅</rb><rp>（</rp><rt>きめつ</rt><rp>）</rp></ruby>の<ruby><rb>刃</rb><rp>（</rp><rt>やいば</rt><rp>）</rp></ruby>
<ruby><rb>呪術廻戦</rb><rp>（</rp><rt>じゅじゅつかいせん</rt><rp>）</rp></ruby>
<ruby><rb>Apex Legends</rb><rp>（</rp><rt>エーぺックス　レジェンズ</rt><rp>）</rp></ruby>

<ruby>・・・ルビ大枠

<rb>・・・漢字箇所のみ囲む

<rp>・・・ルビ未対応のブラウザーの場合は（〇〇）と表記される

<rt>・・・ルビ箇所のみ囲む

実際に、<ruby>ルビタグを使用すると下記の様に見えます。

鬼滅（きめつ）の刃（やいば）

呪術廻戦（じゅじゅつかいせん）

五等分（ごとうぶんの花嫁（はなよめ）

進撃（しんげきの巨人（きょじん）

名探偵（めいたんていコナン

涼宮（すずみやハルヒの憂鬱（ゆううつ

Apex Legends（エーぺックス　レジェンズ

実はCSSで調整も可能！

rt { font-size: 0.6em; text-align: left; font-family: 'メイリオ', 'Meiryo', sans-serif;}

フォントサイズ、左寄せ右寄せセンター、フォントファミリーなどcssで指定できます。

最後にMUGENについて

MUGENとは

Webサイト制作会社（夢双合同会社）が運営するギャラリーサイトになります。エンタメ系（アニメ・ゲーム・同人など）サイト制作の参考になるWebサイトを収集しています。

夢双合同会社（MUSOU）とは

夢双は、エンタメ系を中心にWebサイト制作を致します。
新しい会社ではありますが、日本の行政機関や医療業界などからも多数の案件をお受けしております。
魅力を伝えるWebサイトを目標にし、WebディレクションからCMS（ WordPress・EC-CUBEなど ）を使用したWebサイト制作に携わっています。
作品や商品イメージに合わせたデザインやユーザービリティ・SNSプロモーションに適したコンテンツなどのご提案をさせていただきます。

夢双合同会社（MUSOU）にWebサイト制作の相談する