koblog

高校生のWEBデザインブログ

【HTML】難しい漢字にふりがなを振ろう

サムネイル

活版印刷用語で”ルビ”とも言われるふりがな。

難しい感じが使われると見る側としても嫌になるので、なるべく読みやすい漢字を使いたいところですが、必ずしもそれが叶うわけではありません。

 

そこで今回はHTMLでふりがなを振る方法を紹介します。

ブログのカテゴリー的にどうしても難しい漢字を使うことを避けられない場合などに使ってみてください。

 

ruby要素の使い方

HTMLでruby要素を使うことで、「ふりがな」を振ることができます。

ふりがなを降る際は下のコードを書きます。

HTML
<ruby><rb>漢字</rb><rt>かんじ</rt></ruby>

 

また<rb>を省略して書くこともできます。

HTML
<ruby>漢字<rt>かんじ</ruby>

 

試しに使ってみました。

陸蓮根おくら

 

次に文章で試してみます。

HTMLエイチティーエムエルで、むずかしい漢字かんじにふりがなをることが出来できます。

 

HTML
<p><ruby>HTML<rt>エイチティーエムエル</ruby>で、<ruby>難<rt>むずか</ruby>しい<ruby>漢字<rt>かんじ</ruby>にふりがなを<ruby>振<rt>ふ</ruby>ることが<ruby>出来<rt>でき</ruby>ます。</p>
サムネイルPC
POPULAR
サムネイル

【コピペのみ】ブログのシェアボタンをシンプルでオシャレにカスタマイズしよう!

サムネイル

Twitterの「埋め込みタイムライン」を使う方法

サムネイル

【CSS】コードをオシャレに飾るボックスデザイン


スポンサーリンク


NEW POST
サムネイル

2019.8.30 Fri

Xcodeを使ってスマートフォン用サイトの動作確認をしてみる【Mac】

サムネイル

2019.4.09 Tue

【2019年版】Disqusのおすすめ設定

サムネイル

2019.8.07 Wed

JavaScriptでURLを遷移させる【ジャンプページを作る方法】

サムネイル

2019.6.12 Wed

JavaScriptでページのURLをコピーする機能を作ってみる

サムネイル

2019.6.04 Tue

はてなブログのCSSがスマホで反映されないときの対処法

サムネイル

2019.6.03 Mon

Javascriptで「前のページに戻る」リンクを作ってみる