CSSリストを入れ子にするとサイズが大きくなって困った事はありませんか

入れ子のリストサイズが拡大される
Pocket

WEB制作で、知らないとちょっと困る事の1つが、リストを入れ子にしてグローバルナビゲーションや再度ナビゲーションを作る時ではないでしょうか?

この現象で悩まれている方も多いと思います。

そこで今回は解決策をご紹介致します。

入れ子にした「li」が大きくなる理由

理由はフォントサイズの指定方法にあります。かつてのWEB制作ではピクセルでフォントサイズを指定するのが通常でしたが、最近のWEBサイトはブラウザの視認性やレスポンシブウェブデザインの普及によってフォントサイズをem(エム)で指定する方法が主流となりました。

emはピクセルのように固定ではなく、相対的な大きさで指定する為、このような問題が起こります。

たとえば、私はhtmlにfont-size:100%を指定し、bodyにfont-size:1emとしています。
font-size:100%は16pxです。1emが16pxとなります。

1emが16pxなので、それを中心にフォントサイズを指定していくようにしています。

解決策

ピクセルで指定すれば良い話ではあるのですが、これからの主流ではなくなるかもしれません?ので、入れ子になる「li」に下記の用にフォントサイズをしてする事で回避する事が出来ます。

例はサイドバーの入れ子のリストです。

デフォルトの設定でこのように指定しておいてもいいでしょう。

カテゴリー ホームページ作成テクニック

シェア&ブックマークする

Pocket


  • ビジネス
    企業向けホームページ作成ソフト
  • 低価格
    低価格ホームページ作成ソフト
  • 初心者
    初心者ホームページ作成ソフト
  • EC
    ネットショップ作成ソフト
  • スマホ
    スマートフォンサイト作成ソフト
  • フリー
    無料ホームページ作成ソフト
  • おすすめ
    おすすめホームページ作成ソフト
  • 人気
    人気ホームページ作成ソフト
  • seo
    SEO対策ホームページ作成ソフト
  • Webオーサリング
    WEBオーサリングツール