CSSでアイコンをテキストに揃えるのはこれで簡単になる!CSSの新しい単位「lh」「rlh」が登場
Post on:2020年5月18日
アイコンのサイズをテキストに揃えて配置する時、どのように実装していますか?
テキストのサイズぴったりにアイコンを簡単に配置できるCSSの新しい単位「lh」「rlh」が登場します。
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
CSS Values and Units Module Level 4に見たこともない新しい単位がありました!
- lh
- それが使われている要素のline-heightプロパティの計算値に等しい
- rlh
- ルート要素(おそらく<html>要素)のline-heightプロパティの計算値に等しい
これらの新しい単位が役立つシーンはどこだと思いますか?
Šime Vidasの記事によると、
アイコンを垂直方向の中央揃えに配置
特に、インラインのSVGアイコンに適しています。
アイコンのサイズをテキストに揃えて配置するCSSは、非常に簡単です。
1 2 3 4 5 |
.inline-icon { display: inline-block; width: 1lh; height: 1lh; } |
【訳者注】
新しい単位「lh」「rlh」の仕様は、下記をご覧ください。
「lh」「rlh」をサポートしているブラウザは2020年5月現在、Safari Technology Previewのみとなっていますが、各ブラウザでサポートの動きがでています。
sponsors