vow.design – 大阪上新庄のウェブ&グラフィックデザイン事務所

CSSの新しい単位「lh」はアイコン画像サイズ指定に効果を発揮

CSSの新しい単位「lh」はアイコン画像サイズ指定に効果を発揮

こんにちは、vow.design代表/デザイナー兼CSS研究家のTomo Shiotaniです!

今回は、CSSの新しいサイズ指定単位である、lhをご紹介します!

サイズ指定の単位は色々あるけど、今更新しい単位なんている?
TOMO
TOMO

px, %, em, rem, vw, vh などなど、CSSのサイズユニットはたくさんあり、それぞれにメリット・デメリットがありますよね。

今回新しく見つけた単位「lh」は、どういうサイズ指定方法でそういうシチュエーションで生きるものなのか、ご紹介します!

lhはline-heightと同じ計算値となる

line-heightはCSSが書けるデザイナーさんやコーダーさんからすれば、お馴染みのプロパティですよね!

line-heightは行の高さを指定するCSSプロパティですが、ではそれと同じ計算値となる「lh」とはどういうことなのでしょう?

例えば、以下のようなCSSを記述した場合、

p {
font-size: 16px;
line-height: 32px;
}

フォントサイズ16pxの文字に対して上下均等に8pxづつのマージンが取られるようになります。

フォントサイズ16pxの文字に対してline-height: 32px;を設定した場合は、上下均等に8pxづつのマージンが取られるようになります。

これにアイコンを付ける場合、上手にサイズ指定が出来ないシーンがありましたよね!

「lh」単位を利用すれば、その問題が解決できるようです。

.icon {
display:inline-block;
width: 0.5lh;
height: 0.5lh;
}

このような形で設定してあげることで、アイコン画像サイズを綺麗に設定できるようになる!

これはなかなか便利だと思います。

CSSの新しい単位「lh」はアイコン画像サイズ指定に効果を発揮

その他lh単位の詳細は、以下文献が詳しく説明を和訳してくれています!

ih単位:この単位が利用された要素上の line-height プロパティの算出値に等しい — ここでは、値 normal も,可用な最初のフォントの計量法を利用して絶対長さに変換する。

quoted from CSS Values and Units Module Level 4 (日本語訳)

今はまだ対応ブラウザが少ない

残念ながら実践で使えるシーンはもう少し先になりそうです。