人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

●質問者: hiro
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
ベストアンサー

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


hiroさんのコメント
文章を囲っているdivにline-heighを設定しても動かなかったのですが、pに設定したら動きました。 とても助かりました。 ありがとうございました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ