大人のための『夢を叶える学校』

「夢は叶えるもの!」険しい道でも突き進めば、その先に必ず光が見える。実現した経緯や飲食店経営・起業の仕方などをはじめ、昨今話題の『副業』のカテゴリーについての最新情報も発信しています。

ふりがな付けたい!ふりがなの【HTML】初心者でも簡単にできる振り仮名記述

(✿✪‿✪。)ノコンチャ♡

ブログを書いてて読みにくい漢字があったりしたら、どうしてましたか?

私は、漢字の後にカッコで振り仮名入れたりしていました。

しかしある時、言葉の要約でカッコを使っていたので、それにカッコで振り仮名を書くと、カッコばかりで肝心な内容が読みづらくなると思ったのです。

そこで、振り仮名の記述法を調べたので記録しておきます。

f:id:success-life:20220209230116p:plain

振り仮名の記述法【HTML】

 

<ruby style="margin: 0px; padding: 0px; border: 0px; font-size: 16px;">漢字<rt>フリガナ</rt></ruby>

 

表示例

上記のまま「HTML編集」モードにコピペするとこうなります。

漢字フリガナ

 

次に、上記の記述法の「フォントサイズ」を変えてみます。

【 font-size: 24px 】

漢字フリガナ

( 16px から 24px に変更してみた)

  ✅「漢字」の文字の大きさが変わりました。

 

同様に、振り仮名を指定する<rt>の「フォントサイズ」を追加記述してみました。

【 <rt style=" font-size: 24px;">】

漢字フリガナ

 ✅「振り仮名」の文字の大きさが変わりました。

 

編集後記

まだまだ、初心者のブロガーなので困惑していました。

「こうしたい!」と思ったら、すぐ調べて実践してみることって、大事です。

思い通りに表示されると楽しくなり、モチベーション維持の行動として素晴らしいことだと思っています。

今後も「常に勉強!死ぬまで勉強!」と思いながら張り切ってブログ活動していきます。

皆様の応援も嬉しいです。

 

www.newinfo.press

 

www.newinfo.press

 

www.newinfo.press

 

ではまたお会いしましょう。

 

  参考になった!  参考にならない