独自のルビ機能

HTMLとCSSで作ったHTMLの部品

最終更新：2021-01-23 スタート：2019-09-17
はじめに

色温度←このようなパターンをすると小窓が出現します。小窓の中には，何か入っています。

で出現したものは，で閉じます。

　HTMLの標準ルビ機能ruby要素によってルビを振ります。でルビを振ると，ルビが存在する行間が広くなってしまうことがあります。またルビのデザインはブラウザまかせになります。それに対して，ここで紹介する独自のルビ機能を使えば行間は一定に保たれます。そしてルビのデザインは自分で決めることができます。
　このページはモバイル機器でも見られますが，画面が狭いと見にくいので，ぜひパソコンでご覧ください。

もくじ

標準ルビ機能との比較
長所と短所
概要とソース
標準ルビ機能との比較
　標準ルビ機能を使ったルビと，独自のルビ機能を使ったルビを比較してみます。行間の変化がわかりやすいように，二段組で表示しました。左右の段を比較しながらご覧ください。標準ルビ機能でルビを振った場合の行間の変化は，設定した行間行間は，1行の高さ（line-height）で設定します。によって異なることがわかります。
▼行間が1文字分のとき（最近の〔こひつじの家〕の標準は，1文字分の行間です。）
　標準ルビ機能を使用

　思わぬ雨となって軒下に雨宿あまやどりをしたとき，目の前にある水たまりに落ちてくる雨う滴てきが，水面に次々と泡あわを作っている様子ようすが目に留まりました。できた泡はしばらくすれば消えてしまいますが，泡と泡が合体して大きな泡になることも，寄り添っていた泡の弾けたショックをくらって，ふたついっしょに消えることもありました。様々な泡の一生いっしょうは，しばしの時を楽しませてくれました。

　独自のルビ機能を使用

　思わぬ雨となって軒下に雨宿りをしたとき，目の前にある水たまりに落ちてくる雨滴が，水面に次々と泡を作っている様子が目に留まりました。できた泡はしばらくすれば消えてしまいますが，泡と泡が合体して大きな泡になることも，寄り添っていた泡の弾けたショックをくらって，ふたついっしょに消えることもありました。様々な泡の一生は，しばしの時を楽しませてくれました。

▼行間が0.5文字分のとき
　標準ルビ機能を使用

　思わぬ雨となって軒下に雨宿あまやどりをしたとき，目の前にある水たまりに落ちてくる雨う滴てきが，水面に次々と泡あわを作っている様子ようすが目に留まりました。できた泡はしばらくすれば消えてしまいますが，泡と泡が合体して大きな泡になることも，寄り添っていた泡の弾けたショックをくらって，ふたついっしょに消えることもありました。様々な泡の一生いっしょうは，しばしの時を楽しませてくれました。

　独自のルビ機能を使用

　思わぬ雨となって軒下に雨宿りをしたとき，目の前にある水たまりに落ちてくる雨滴が，水面に次々と泡を作っている様子が目に留まりました。できた泡はしばらくすれば消えてしまいますが，泡と泡が合体して大きな泡になることも，寄り添っていた泡の弾けたショックをくらって，ふたついっしょに消えることもありました。様々な泡の一生は，しばしの時を楽しませてくれました。

  • 標準ルビ機能を使用した場合は，行間が狭いほど不揃いが目立ちます。ただしブラウザによって表示は異なります。
  • 独自のルビ機能を使用した場合は，行間の不揃いはありません。ただし行間が狭すぎると，ルビが上の行にくっついてしまいます。
  • 標準ルビ機能を使用した場合と独自のルビ機能を使用した場合とでは，ブラウザの画面でコンテンツをコピーしたときのテキスト内容が異なります。たとえば「軒下に雨宿りをした」という部分をコピーすると，標準ルビ機能の場合は「軒下に雨宿あまやどりをした」になりますが，独自のルビ機能の場合は「軒下に雨宿りをした」となって，ルビが含まれません。
長所と短所 （△：長所　▽：短所）

△ルビを振っても行間が変わりません。

△HTMLの構文が簡単です。

△ルビを自分でデザインすることができます。

△ブラウザに依存しないため，思いどおりのデザインで表示させることができます。

▽ルビ用のCSSを準備する必要があります。

▽行間が狭いときは，ルビを振ることができません。

概要とソース
　はじめに独自のルビ機能のHTML部分ですが，基本的に， 
<span rb="あまやど">雨宿</span>
というような構文になります。rbという属性に〔あまやど〕という値を与えています。これに対して標準ルビ機能を使用した場合は， 
<ruby>雨宿<rt>あまやど</rt></ruby>
となりますから，独自のルビ機能の方がやや簡素なかたちになります。
　次に独自のルビ機能のCSSを示します。ここでrbは，〔ルビを付ける働きをする属性〕の名前です。思い切り，短い名前をつけてみました。 
[rb] {position: relative;}  /* 漢字の位置を取得 */
[rb]::before {  /* ::before擬似要素によって，contentプロパティの内容を表示 */
  content: attr(rb);  /* rbの値をcontentプロパティに代入 */
  position: absolute;  /* 以下4行は，ルビを振る場所の指定 */
  top: -0.9em;
  left: -0.2em;  /* ルビを振る場所の幅を，ルビを振る漢字の幅よりも少し拡大 */
  right: -0.2em;
  font-size: 0.5em;  /* 漢字1文字について，かな2文字を基準とする */
  text-align: center;  /* ルビは，ルビを振る場所の中央に表示 */
  white-space: nowrap;  /* 長いルビが途中で改行しないように */
  line-height: 1;  /* ルビを振る位置が親ボックスのプロパティによって変わらないように */
  text-indent: 0;  /* ルビを振る位置が親ボックスのプロパティによって変わらないように */
  }
　独自のルビ機能を表示する過程は次のようになります。
　(1) rb="ルビ" によって，rb属性の値にルビを代入
　(2) attr(属性)という関数を用いて，属性の値を取得
　(3) content: attr(属性)によって，属性の値をcontentプロパティに代入
　(4) ::before擬似要素を用いて，contentを表示
　属性は， span[rb] というように，要素と組み合わせて用いることが多いようですが，あえて属性 [rb] だけを用いました。そうすることによって，たとえば <b rb="ふとじ">太字</b> と記述すれば太字と表示させることができます。もし span[rb] というかたちを用いていたら <b><span rb="ふとじ">太字</span></b> などとする必要があります。また標準ルビ機能を使用すると <b><ruby>太字<rt>ふとじ</rt></ruby></b> となりますから，いずれにしても複雑で長くなります。
ページの先頭へ