CSSでデザイン調整可能なルビ - Qiita
<p><ruby>吾輩<rt>わがはい</rt></ruby>は猫である。名前はまだ無い。</p> <p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番<ruby>獰悪<rt>どうあく</rt></ruby>な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</p> すると、こうなる。 ルビが入ることで行間が変化して、いまいち格好悪い。そして一部のブラウザ（Chromeなど）ではルビの位置をCSS微調整することができず、使いにくい。 別の方法を考える そこで、<ruby>タグを使わないで以下のようにHTMLを組んでみる。 <p><span data-ruby="わがはい">吾輩</span>は猫である。名前はまだ無い
CSSのボックスモデルにおける古い方法とこれからの方法 -論理プロパティにおける考え方
現在のところ、margin-top, padding-bottomのように物理プロパティをボックスモデルで使用していると思います。しばらくはそのままで問題ないですが、CSS GridやFlexboxで使われている論理プロパティを使用する機会が増えるでしょう。 CSSの論理プロパティにおける考え方、注意点、そして英語や日本語など言語で変化する使い方について紹介します。 New CSS Logical Properties! by Elad Shechter 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 訳者注: 記事内の日本語サイトとは横書きではなく、縦書きが想定されています。 はじめに CSSの論理プロパティにおける考え方 新しいボックスモデルのプロパティ 論理ディメンション 言語に応じた配置の適用 ブラウザのサポート 論理プ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTMLクイックリファレンス
https://d-lover.com/css/hack.shtml