リストの文字がどんどん小さくなる！？

リストにスタイルシートを適用する際の問題点

リストを作るには、ul要素とli要素を使いますね。 li要素の中にさらにul要素を含めることで、リストの階層をいくらでも深くすることができます。
このリストに対して、スタイルシートで文字サイズを指定すると、ちょっと困ったことが起こる可能性があります。

今回は、その問題点を、HTMLには手を加えず、スタイルシートだけで解決する方法をご紹介致します。

どこまでも限りなく小さくなっていくリスト…

「リストの文字サイズをちょっと小さめにしたい」と思ったときを考えてみましょう。 ul要素に対して「80%」などの文字サイズを指定すると、リストの階層が深くなるにつれて、どんどん文字サイズが小さくなってしまいます。 例えば、次のような感じです。

これでは、深い階層の文字が小さくなりすぎて、読めませんね。
ここで記述したスタイルシートは、次のようなものです。

ul要素の文字サイズ（font-size）を「80%」にするスタイルです。
この記述で、なぜ、リストの階層が深くなるにつれて、文字サイズがどんどん小さくなってしまうのでしょうか。

答えは、リストを実現するHTMLソースを見ると分かります。

もう、お分かりでしょうか？
リストの階層を1段階深くするには、ul要素を使います。
さらにもう1段階深くするには、さらにul要素を使います。

スタイルシートで、ul要素に対して「文字サイズを80%にする」指定をしていると、 2階層目の文字サイズは「80%の80%」（80%×80%＝64%）で64％になり、 3階層目の文字サイズは「『80%の80%』の80%」（80%×80%×80%＝51.2%）で51.2%になります。

これが、どんどん文字サイズが小さくなってしまう原因です。

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

さて、どんどん小さくなってしまうと困るので、それを防ぐ必要があります。
防ぐ方法はいろいろ考えられますが、それぞれデメリットもあります。

今回ご紹介したいのは、デメリットのない解決策ですが、その前に、デメリットのある解決策をいくつか挙げてみましょう。

■方法1：文字サイズの指定にキーワードを使う

スタイルシートでの文字サイズは、「 90% 」のような割合での指定のほかに、「 small, x-small, xx-small 」といったキーワードでの指定もできます。 この指定を使えば、相対的にどんどん文字サイズが変化することはなくなります。

【デメリット】キーワードでの指定では、Internet Explorer(※)とその他のブラウザで、実際に表示される大きさが異なるという問題点があります。ブラウザによって文字サイズが異なってしまうわけです。
※IE5.5以下や、IE6.0の「互換モード」の場合。

■方法2：文字サイズの指定に絶対的な単位を使う

文字サイズを指定する単位に pt や px を使って、「 18pt 」や「 24px 」のように指定することもできます。 この指定を使えば、どんどん文字サイズが変化することもありませんし、各ブラウザでも同じ大きさで表示されます。

【デメリット】文字サイズを絶対的な値で指定すると、ユーザが自分の意志で文字サイズを調整できなくなる可能性があるので、望ましくありません。 ユーザビリティ（使いやすさ）を考えるなら、この指定方法は避けた方がよいでしょう。

■方法3：リスト全体を囲むブロックレベル要素を追加する

リスト全体を囲むdiv要素などをHTMLに追加して、そのdiv要素に対して文字サイズを指定することもできます。 この方法なら、「80%」などの割合での指定方法でも、特に問題は起こりません。

【デメリット】HTMLに何か書き加えないといけませんから、対象のページ数が多い場合や、レンタルブログなどでHTMLを編集できない場合には使えません。

■方法4：最初のul要素にだけクラス名を付加する

最初のul要素にだけクラス名を付加しておき、そのクラスのul要素にだけ、文字サイズを小さくするスタイルを適用するという方法もあります。

【デメリット】この場合も、HTMLに何か書き加えないといけませんから、先ほどと同様の問題があります。

デメリットのない解決策は？

さて、それではデメリットのない解決策をご紹介致しましょう。

…ずいぶん長く引っ張ってきましたが、解決策は非常に単純なものです。

どんどん小さくなるのを防ぐ方法は、次のページで！ >>