CSSリスト(olとul)入れ子にした際のフォントサイズ調整

WEB制作で、知らないとちょっと困る事の１つが、リスト（olやul）を入れ子にしてグローバルナビゲーションやサイドナビゲーションを作る時ではないでしょうか？

入れ子にしたリストが大きくなってしまう事があります。この現象で悩まれている方も多いと思います。

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

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

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

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

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

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

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

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



 
  
   
    
    
   
  
 



.side .childern li li {
    font-size: 1em;
}

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

li li {
 font-size: 1em;
}

また、remを使ってもいいでしょう。remはルート（html）に指定したフォントサイズに固定されたサイズを維持します。入れ子部分はremが便利かもしれません。