どのブラウザでも反映されるルビのCSSについて。


↓のCSSで、行間をあけるにはどこをいじれば良いのか教えてください。
http://roheisen.net/dl/sim2ruby.css

line-heightだけいじると、rubyで囲った部分がずれてしまいます。
コードが長くてここにはコピペできなかったのでリンクですがよろしくお願いします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2015/02/22 18:16:24
  • 終了:2015/02/23 13:27:56

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4487ベストアンサー獲得回数18562015/02/23 13:06:23

ruby タグを含む文章の行間を広くしたい、ということでしょうか。
ruby を含む文章の外側の要素で line-height を指定すると、割と良い感じにやってくれます。
例えば、文章を P タグで括って、そのスタイルに line-height を指定します。

.contents {
    line-height: 3;
}
<p class="contents">
    ... <ruby> を含む、<ruby><rb>行高</rb><rp> | </rp><rt>ぎょうのたかさ</rt></ruby>を制御したい文章
</p>


はてなブログでも試してみたので、見た感じを確認してください。
http://a-kuma3.hatenablog.com/entry/ruby_any_browser

id:hiro_words

文章を囲っているdivにline-heighを設定しても動かなかったのですが、pに設定したら動きました。
とても助かりました。
ありがとうございました。

2015/02/23 13:29:36

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません