webデザインとヒュッゲな暮らし
webデザイン

HTMLで漢字にルビをつける

子ども関係や、教育・福祉関係のホームページを制作するときに使用することがあるルビ。
漢字やあて字、読みにくい漢字などにルビをつけると、とても親切です。

読み手のことを考えて、ルビをつける細やかな気配りも大切です。

ルビとは

ruby要素とrt要素を使用して、文字にルビをつけることができます。

<ruby> ~ </ruby>
ルビをつけたい文字を囲む

<rb> ~ </rb>
ルビをつけたい文字を入力

<rt> ~ </rt>
つけたいルビを入力

サンプルコード

See the Pen
ルビ
by 西河吉恵 (@rfxxkeww-the-bold)
on CodePen.

ストーリーを大切にするデザイナー
YOSHIE
選ばれるwebサイトに育てる、仕組み化づくりのプロフェッショナル。

【クライアント実績】
ECサイト前年対比150%/講座申込み率80%/制作受注2ヶ月待ちのデザイナー育成

デザインとヒュッゲな暮らしを配信しています。


静かな空間や時間が好き / モノづくりが好き / デザインが好き / 北欧雑貨が好き