ホームページ作成/リストの表示・装飾 (HTML,CSS)

リストの文字がどんどん小さくなる!?(2ページ目)

スタイルシートでリスト(ul要素)の文字サイズを指定すると、リストの階層が深くなるにつれて、どんどん文字が小さくなってしまう可能性があります。スタイルシートだけを使ってスマートに解決してみましょう。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

どんどん小さくならないようにするには

実は、とても簡単です。
解決策のスタイルシートソースは、以下の通りです。

ul { font-size: 80%; }
ul ul { font-size: 100%; }

これだけです。
1行目は、最初から記述していたスタイルです。2行目を追加することで、問題はすべて解決します。 (リストの階層が何階層あったとしても、この2行だけで大丈夫です。)

なぜ これで解決?

1行目は、「 ul要素の文字のサイズを 80% にする 」という指定ですね。
2行目は、「 ul要素に含まれるul要素の文字サイズを 100% にする」という指定です。

HTML中の最初のul要素は、1行目のスタイルが適用されて、文字サイズが80%になります。
2階層目以降の ul要素は、「ul要素の中のul要素」になるので、2行目のスタイルが適用(※)されます。 その結果、文字サイズは、「80%の100%」ということになるので、つまり 80%×100%=80% で、「80%」のままの大きさになります。
※2行目のスタイルと同時に1行目のスタイルも適用されています。しかし、同じfont-sizeプロパティが指定されているので、1行目の指定は2行目の指定で上書きされます。

実際に表示させてみると、以下のようになります。

  • 第1階層目
  • 第1階層目
  • 階層追加
    • 第2階層目
    • 第2階層目
    • 階層追加
      • 第3階層目
      • 第3階層目
      • 階層追加
        • 第4階層目
        • 第4階層目
        • 階層追加
          • 第5階層目
          • 第5階層目

文字サイズは、リストの階層がどれだけ深くなっても、ずっと80%のままですね。

もっとスマートな解決策

実は、もっとスマートな解決策があります。スタイルシートは、たった1行で済む方法です。

スタイルシートには、次のような記述方法があります。

body > ul { font-size: 80%; }

上記の記述と、以下の記述では、意味が異なります。

body ul { font-size: 80%; }

最初の記述は、「body要素の直下にあるul要素のみ」が対象になるのに対し、上記の記述は「body要素に含まれるすべてのul要素」が対象になります。

「直下にある」と「含まれる」では、次のような差があります。

<body>
   <ul> ← bodyの直下にあるul
      <li>~</li>
      <li>~</li>
   </ul>
   <div>
      <ul> ← bodyに含まれるul(でもbodyの直下ではない)
         <li>~</li>
         <li>~</li>
      </ul>
   </div>
</body>

後者のul要素は、body要素との間にdiv要素が存在するので、「body要素の直下」ではありません。

スタイルシートでは、「 > 」記号を使うことによって、特定の要素の直下にある要素のみを適用対象にすることができます。
というわけで、

body > ul { font-size: 80%; }

…のように記述しておけば、最初のul要素のみに文字サイズを指定し、「ul要素の中にあるul要素」には何も適用しないようなスタイルシートを作ることができます。 これなら、どんどんサイズが小さくなるようなことにはなりません。
※ul要素が、body要素の直下ではなく、例えばdiv要素の直下にあるなら、「 div > ul 」と記述します。

なんとも便利な記述方法です。

…が。

この記述方法は、Internet Explorer では対応していません。
従って、現在のところ、現実的な解決策は、このページの最初にご紹介した、2行記述する方法でしょう。

おわりに

今回は、「ある要素の中に同じ要素が繰り返し登場する際に、文字サイズを指定した場合」の問題点を解決する方法をご紹介致しました。

ここでは例として、ul要素を使った「リスト」を挙げましたが、「div要素の中にdiv要素が含まれる場合」などでも同じことです。 意図せず、文字サイズがどんどん小さくなったり、どんどん大きくなったりしたときには、今回ご紹介した方法をご活用下さい。

関連記事

【編集部おすすめの購入サイト】
Amazonでホームページ作成の参考書をチェック!楽天市場でホームページ作成関連の書籍をチェック!
  • 前のページへ
  • 1
  • 2
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます