キャリカク一宮駅前

ウェブページで振り仮名を使ってみる

2026年06月03日 / 一宮駅前

こんにちは、キャリカク一宮駅前の利用者「ファーストネームが K」 です。

振り仮名の効果

最近、ウェブページで振り仮名(読み仮名)をつける方法を調べて、使い始めました。前回投稿した「星の神話♓うお座」でも、「判官びいき」は読みにくいかと思って、ひと手間かけて「判官(はんがん)びいき」のようにルビを振っていたのですが、たぶん、気づきにくいとは思います😓

でも、難読漢字が連続する場合は、振り仮名を使ったほうが読みやすくなると思います。例えば、4月12日に書いた私のブログ記事「古都旅行~石上神宮・紫香楽宮~」では、当時まだルビを振る方法を知らなかったので、次のように、難読地名の読み仮名を括弧で示していました。

先日、名古屋駅からJR関西本線を使って、奈良県天理市にある石上(いそのかみ)神宮と滋賀県甲賀(こうか)市にある紫香楽宮(しがらきのみや)跡をめぐる1泊2日の旅行に行ってきました。

読みにくい漢字があると、読むリズムをくずされて、文全体が読みにくくなるかもしれないので、読み仮名は効果的です。しかし、上の例のように括弧(かっこ)で示す方法だと、文が分断され、なおかつ不用意に長くなってしまうので、読み仮名の効果が半減されるように思います。

では、上の例文にある読み仮名を、ルビを振る方法で書いてみましょう。次のようになります。

先日、名古屋駅からJR関西本線を使って、奈良県天理市にある石上(いそのかみ)神宮と滋賀県甲賀(こうか)市にある紫香楽宮(しがらきのみや)跡をめぐる1泊2日の旅行に行ってきました。

どうでしょうか。ちょっとは読みやすくなっていると思います。

ルビの振り方

ウェブページで振り仮名をつける、同じことですがルビを振るには、<ruby> タグというのを使います。HTMLの知識がないと難しく感じるかもしれないし、HTMLの知識があっても面倒くさいと思うかもしれませんが、少しの間お付き合いください。なお、WordPress(このブログを投稿するのにも使っているコンテンツ管理システム)の編集画面を使って説明します。

まず、ふつうに(「ビジュアル編集モード」といいます)次のように「奈良県天理市にある石上神宮」と書いたとします。

ビジュアル編集モードの画面

この文のある段落を「HTML編集モード」に切り替えてみてください(上の図だと、点3つのオプションから「HTML編集」を選びます)。すると、次のように <p> というHTMLタグがついた生のHTMLテキストになります。

HTML編集モードの画面

いま、「石上」にルビを振りたいので、「石上」というテキストの前後に開始タグ <ruby> と終了タグ </ruby> とを手動で次のように書き込みます。

HTML編集で <ruby> タグを追加

これで終わりではありません。読み仮名を明示するために、<rt> タグも使わなければなりません。つまり次のように、「石上」に続いて読み仮名「いそのかみ」を開始タグ <rt> と終了タグ </rt> とで囲んで書き込みます。

HTML編集モードで <rt> タグを追加

ね、面倒くさいでしょ。無理強いはしません😉

では「ビジュアル編集モード」に戻してみてください。次のような振り仮名つきのテキストになっているはずです。

試しに使ってみたいなっていう人のために、上の例文の <ruby> タグの部分だけ書いておきます。

<ruby>石上<rt>いそのかみ</rt></ruby>

コピペとかして使ってください。

ルビって何?

振り仮名のためのHTMLタグが <ruby> であることからもわかるように、「ルビ」は宝石のルビーと語源は同じです。欧米では、活字の大きさを表す名前に宝石などの名前を当てていたようで(なんか洒落(しゃれ)てますね)、日本語の振り仮名用の活字の大きさが「ルビー」相当だったので、振り仮名をつけることを「ルビを振る」と言うようになったそうです。

あ、そうそう、「読み仮名」と「振り仮名」は、ふつう同じ意味ですが、このブログでは微妙にニュアンスを変えて使っています。


就労継続支援B型

キャリカク一宮駅前

愛知県一宮市大江3丁目12-22 一観ビル1階

電話番号:0586-71-3577 FAX:0586-71-3587


月別アーカイブ
2026年7月(23)
2026年6月(32)
2026年5月(41)

CONTACT

お問い合わせ

まずはお近くのキャリカクへご相談ください!まずはお近くのキャリカクへご相談ください!

キャリカクは全国34拠点。その輪はますます広がっています。
まずは最寄りのキャリカクにご相談ください。

キャリカク成瀬が2026年12月オープン予定!

キャリカク栗東が2026年8月オープンしました!

キャリカク本八幡駅前事業所が2026年6月オープンしました!

キャリカク大和八木駅Officeが2026年5月オープンしました!

キャリカク半田が2026年5月オープンしました!

キャリカク大分駅前が2026年5月オープンしました!

キャリカク岡山事業所が2026年3月オープンしました!

キャリカク前橋駅前オフィスが2026年2月オープン!

キャリカク東岡崎駅が2025年12月オープン!

愛知

キャリカク大須観音駅

パソコン初心者でもOK!
伏見駅・大須観音駅どちらからもアクセス良好!

愛知

キャリカク一宮駅前

パソコン仕事
パソコンが並んだオフィスのような空間!

愛知

キャリカク勝川駅オフィス

JR中央本線勝川駅から徒歩3分!

愛知

キャリカク藤が丘駅前事業所

2024年4月新規オープン!
地下鉄東山線 藤が丘駅から徒歩2分!

愛知

キャリカク平安通

地下鉄名城線 平安通駅から徒歩1分!

愛知

キャリカク中村公園前

「中村公園駅」から徒歩5分の好立地!

愛知

キャリカク東岡崎駅

名鉄東岡崎駅から徒歩7分。あなたの“できる”が輝き出す場所!

愛知

キャリカク半田

名鉄河和線「成岩駅」出口から徒歩約2分!

岐阜

キャリカク岐阜駅オフィス

JR岐阜駅前にオープン!
パソコン作業で楽しくキャリアアップを! 岐阜駅オフィスのマスコット「もち太郎」がお待ちしております!

岐阜

キャリカク大垣オフィス

JR大垣駅から駅近3分の好立地!

三重

キャリカク四日市駅オフィス

近鉄四日市駅から徒歩5分の駅チカ!

三重

キャリカク津駅事業所

2025年2月オープン!
三重県下2事業所目!近鉄「津」駅から徒歩2分の駅チカ事業所です

東京

キャリカク茗荷谷オフィス

2025年12月オープン!茗荷谷(みょうがだに)オフィスです!

東京

キャリカク浅草橋オフィス

JR総武線・都営浅草線「浅草橋駅」から徒歩4分♪都バス「蔵前一丁目」バス停から徒歩1分♪見学随時受付中!!

埼玉

キャリカク北浦和事業所

2025年10月オープン!JR京浜東北線「北浦和駅」から徒歩で2分の好立地

東京

キャリカク成瀬

2026年12月オープン予定!成瀬(なるせ)オフィスです!

静岡

キャリカク浜松駅前オフィス

「ちょっと気になる」その気持ちだけでOK!
パソコン初心者の方も、通所に不安がある方も
大歓迎!!
まずは見学やご相談から、お気軽にどうぞ!

静岡

キャリカク静岡駅

新静岡駅から徒歩で7分

神奈川

キャリカク小田原オフィス

2024年2月オープン 小田原駅から徒歩10分!

神奈川

キャリカク藤沢南口

2025年6月2日オープン!

群馬

キャリカク前橋駅前オフィス

パソコン初心者でもOK!JR前橋駅から徒歩11分

栃木

キャリカク小山駅

2026年7月3日、移転グランドオープン!

宮城

キャリカク古川駅オフィス

東北地方初!
宮城県大崎市に2025年4月オープン!

山梨

キャリカク甲府駅前

2025年9月1日オープン!JR「甲府駅」から徒歩3分

大阪

キャリカク大阪なんば事業所

南海本線なんば駅から徒歩8分

大阪

キャリカクJR茨木駅前

JR茨木駅 徒歩2分!
話しやすさNo.1の事業所!

奈良

キャリカク大和八木駅Office

2026年5月オープン!大和八木駅からスグ

滋賀

キャリカク栗東

2026年8月オープン!

広島

キャリカク広島西

2023年11月オープン!広電草津駅から徒歩8分

広島

キャリカク広島駅オフィス

2024年9月OPEN!JR山陽本線 広島駅から徒歩6分

広島

キャリカク五日市

駅近6分!2025年5月オープン!

岡山

キャリカク岡山

ITスキルを磨ける事業所「キャリカク岡山」岡山駅徒歩2分の好立地にOPEN!

大分

キャリカク大分駅前

【大分駅 徒歩5分】                     ゆっくり自分のペースで。ここから社会と繋がっていく!

株式会社キャリカク

愛知県一宮市大江3丁目12-22 一観ビル1階

TEL:0586-71-3577 FAX:0586-71-3587

\ FOLLOW ME ! /

プライバシーポリシー

©️2024 Kyarikaku Inc, All Rights Reserved.

\ FOLLOW ME ! /

©️Kyarikaku Inc, All Rights Reserved.

見学・お試し体験はコチラ