MUGEN

集めたWebサイトを記事として
ピックアップしています。

2022.01.31

子ども向けエンタメサイトに使いたいHTML!?「ふりがな(ルビ)」

今回は、「やさしいにほんご」としてよく使用される<ruby>ルビタグについて紹介します。

医療など子ども向けや日本に住む外国人向けに「やさしいにほんご」でサイト制作することがあります。その際に使用するのが、<ruby>ルビタグです。この<ruby>ルビタグをエンタメ系のサイトにも使用しても・・・?と思っております。

 

玩具サイトやアニメやゲームサイトも今は子供も見る時代かと思います。

簡単なのでターゲット層に合わせて実装させて見てください!

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サイト制作の相談する

linkedin このエントリーをはてなブックマークに追加
サイト制作なら夢双合同会社へ サイト制作なら夢双合同会社へ