【HTMLタグ】ルビの位置(高さ、間隔)を調整方法


ルビを使用し、読みにくい文字に”フリガナ”を付けるようになってから、ルビの位置(高さ、間隔)が気になるようになりました。

場合によっては、”フリガナをつけたい文字”とルビが離れすぎて、かなりブサイクな感じになります。

この状態になる原因を調べて、その対処法を考えてみました。

以下で、ルビの位置(高さ、間隔)を調整方法を説明します。

ルビの位置はなぜ動くのか?

Webサイトの表示は、基本、ブラウザやOSの設定によって違います。

サイトの要素をチェックし、CSSを確認してみてください。

【サイトの要素をチェックする方法】

Chomeの場合:右クリック➡︎検証

IEの場合:右クリック➡︎要素の検査

Firefoxの場合:右クリック➡︎要素の調査

Safariの場合:右クリック➡︎要素の詳細

「user agent stylesheet」が、ブラウザごとに設定されており、若干表示がことなります。

【user agent stylesheetとは】

ブラウザのwebデザインの初期設定のこと。

ブラウザごとに、cssプロパティの初期設定がなされており、表示ズレなどの問題が生じる。

ですが、このブラウザごとの表示ズレは、実際のところ大きくはありません。

スポンサーリンク

本当の原因は『フォント』

僕が作っているサイトごとに、ルビの高さが違うことに気づきました。

そして、その違いを検証してみると、サイトの「font-familyプロパティ」の設定が違うことに気づきました。

「font-familyプロパティ」とは、「書体デザイン」を設定するCSSのことで、通常、body要素に設定します。


body {
font-family:Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "MS Pゴシック" , "MS PGothic" , sans-serif;
}

このCSSの設定によって、ルビの表示に変化が現れます。

たとえば、font-familyに「avenir」を設定すると、以下のようになります。

【font-familyが「avenir」の場合】

南無阿弥陀仏あむあみだぶつ

今度は、「Arial」を設定してみます。

【font-familyが「Arial」の場合】

南無阿弥陀仏あむあみだぶつ

一目瞭然ですよね。

上の「avenir」でfont-familyを設定した場合は、ルビが高い位置で表示されています

単語レベルでは、まだ見やすいとは思いますが、文章の中で確認すると、高い位置に表示されたルビが文章の中で浮き、非常に見づらいものになってしまいます。

スポンサーリンク

ルビが離れすぎる場合の対処法

positionプロパティで対処はダメ!

僕がこの問題に直面して、ネットで調べた際、あるサイトで、 CSSのpositionプロパティで、対処する方法を紹介していました。

ですが、ブラウザによっては、CSSの変更が効かないこともあり、対処になってはいません。

僕がオススメするのは、font-familyを見直すこと。

書体を変更したくない人もいるかもしれません。ですが、ルビの位置ズレが「font-familyプロパティ」に起因する以上、これを変更することが最善策になります。

font-familyについて

font-familyの設定しだいで、ルビの表示がズレることがわかったと思いますが、font-familyのことについて、少しお話をします。

通常、font-familyは、以下のように複数設定します。


font-family:Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "MS Pゴシック" , "MS PGothic" , sans-serif;

なぜ複数設定するのかといえば、ブラウザやOSによって、認識しない書体があるから。

上記の場合でいうと、まず「Arial」をブラウザなどが認識します。もし、認識できない書体であれば、次の「Verdana」、また認識できなれば次の「Roboto」という形になります。

もし、自分の作成するサイトで、ルビの位置の問題が生じているのなら、ブラウザごとに表示をチェックし、どの書体が問題を起こしているのかを検証してみてください。

ちなみに、僕の検証によれば、「avenir」のような、海外の書体の場合に、位置ズレを発生しやすいという結果が出ています。

スポンサーリンク
ページ先頭へ