スタート:2019-09-17HTMLのruby要素を使ってルビを振ると,行間が微妙に変わります。ルビのデザインも,ブラウザまかせです。ここで紹介するルビ(独自ルビ)を使うと,一定の行間が保てます。ルビのデザインも,自分で決めることができます。長所と短所ユーザビリティusability使い心地←このようなパターンにマウスをのせると,何か表示されます。Ruby要素との比較ruby要素を使ったルビと,独自ルビを比較してみます。行間の変動がわかりやすいように,二段組で表示しました。行高1行の高さによって異なることがわかります。▼行高が2文字分のとき(2文字分の行高は,「こひつじの家」の標準です。思わぬ雨となって軒下に雨宿あまやどりをしたとき,目の前にある水たまりに落ちてくる雨う滴てきが,水面に次々と泡あわを作っている様子ようすが目に留まりました。できた泡はしばらくすれば消えてしまいますが,泡と泡が合体して大きな泡になることも,寄り添っていた泡の弾けたショックをくらって,ふたついっしょに消えることもありました。様々な泡の一生いっしょうは,しばしの時を楽しませてくれました。思わぬ雨となって軒下に雨宿りをしたとき,目の前にある水たまりに落ちてくる雨滴が,水面に次々と泡を作っている様子が目に留まりました。できた泡はしばらくすれば消えてしまいますが,泡と泡が合体して大きな泡になることも,寄り添っていた泡の弾けたショックをくらって,ふたついっしょに消えることもありました。一生は,しばしの時を楽しませてくれました。思わぬ雨となって軒下に雨宿あまやどりをしたとき,目の前にある水たまりに落ちてくる雨う滴てきが,水面に次々と泡あわを作っている様子ようすが目に留まりました。できた泡はしばらくすれば消えてしまいますが,泡と泡が合体して大きな泡になることも,寄り添っていた泡の弾けたショックをくらって,ふたついっしょに消えることもありました。様々な泡の一生いっしょうは,しばしの時を楽しませてくれました。思わぬ雨となって軒下に雨宿りをしたとき,目の前にある水たまりに落ちてくる雨滴が,水面に次々と泡を作っている様子が目に留まりました。できた泡はしばらくすれば消えてしまいますが,泡と泡が合体して大きな泡になることも,寄り添っていた泡の弾けたショックをくらって,ふたついっしょに消えることもありました。一生は,しばしの時を楽しませてくれました。ruby要素を使用した場合は,行高が小さいほど行間の不揃いが目立ちます。ブラウザによって表示は異なります。Firefoxのルビは,比較的よくできていると思います。独自ルビを使用した場合は行間の不揃いはありません。行高が小さいと,ルビが上の行にくっついてしまいます。ruby要素を使用した場合と独自ルビを使用した場合とでは,ブラウザの画面でコンテンツをコピーしたときのテキスト内容が異なります。「軒下に雨宿りをした」という部分をコピーすると,ruby要素の場合は「軒下に雨宿あまやどりをした」になりますが,独自ルビの場合は「軒下に雨宿りをした」となって,ルビが含まれません。rb="ルビ">漢字</span>という構文になります。rbという属性に〔ルビ〕という値を与えています。これに対してruby要素を使用した場合は,<ruby>漢字<rt>ルビ</rt></ruby>となりますから,独自ルビの方がやや簡素なかたちになります。次にCSSの独自ルビ部分を示します。ここでrbは,〔ルビを付ける働きをする属性〕の名前です。キー入力が楽なように,思い切り短い名前をつけました。}独自ルビを表示する過程は次のようになります。属性は,span[rb]というように,要素と組み合わせて指定するのが一般的ですが,あえて単独の属性として指定しました。記述するだけで,太字と表示させることができます。▽:短所)△ルビを振っても行間が変わりません。△HTMLの構文が簡単です。△ルビを自分でデザインすることができます。△ブラウザに依存しないため,意図したデザインで表示されます。▽ルビ用のCSSを準備する必要があります。▽行高が小さいと,ルビを振ることができません。