[CSS]line-heightとpaddingの使い分け方、リストの各アイテムの間隔を設定するテクニック

メニューなどをリストで実装する時に、クリックができないデッドゾーンができてしまうことがあります。この問題を解決するline-heightとpaddingを使い分けて実装するテクニックを紹介します。

サイトのキャプチャ

In CSS, set line-height first, padding second

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

何が問題か?

ハッカーニュースを見ていたら、Zapierブログのこの記事を見つけました。
このメニューにおける問題に気付かないわけにはいきませんでした。

サイトのキャプチャ

Zapierのメニュー

問題はこのメニューに、クリックが出来ないデッドゾーンがあることです。

サイトのキャプチャ

クリックのデッドゾーン

この問題は珍しいものではなく、よく見かけるものです。これを解決するシンプルなテクニックがあります。

何が起きているか?

この現象の原因は、リストの各アイテムに間隔を空けるために「line-height」を使用しているためです。

この「line-height: 2em;」が原因です!
リストの各アイテムが一行であれば問題はありませんが、複数行であればデッドゾーンが出来てしまいます。

解決方法はありますか?

解決方法を尋ねられて、私は嬉しく思います。
まずは、CSSのシンプルなルールを確認しておきましょう。

line-height
line-heightはリーダビリティのために使用されるべきです。
padding
paddingはアイテムに間隔を空けるために使用されるべきです。

各アイテムの高さを2emに保たせ、メニューにあるクリックのデッドゾーンを無くしてみましょう。
まずは、アイテムのリーダビリティのために「line-height: 1.2em;」を設定します。

これで一行の高さが、1.2emになります。
この時点では、2.0emに0.8em欠けています。

paddingは各アイテムの間隔の上下に適用されるので、半分の値で設定します。

これで完成です!

サイトのキャプチャ

クリックのデッドゾーンを無くしたデモ

一行のアイテムも複数行のアイテムも同じ間隔で配置されており、複数行にクリックのデッドゾーンは無くなりました。リーダビリティも確保されています。

sponsors

top of page

©2018 coliss