2/2 リストの文字がどんどん小さくなる！？ [ホームページ作成] All About

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

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

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行記述する方法でしょう。