(HTML,CSS)リストの文字がどんどん小さくなる!?スタイルシートでリスト(ul要素)の文字サイズを指定すると、リストの階層が深くなるにつれて、どんどん文字が小さくなってしまう可能性があります。スタイルシートだけを使ってスマートに解決してみましょう。文宏ホームページ作成ガイドリストにスタイルシートを適用する際の問題点リストを作るには、ul要素とli要素を使いますね。li要素の中にさらにul要素を含めることで、リストの階層をいくらでも深くすることができます。このリストに対して、スタイルシートで文字サイズを指定すると、ちょっと困ったことが起こる可能性があります。今回は、その問題点を、HTMLには手を加えず、スタイルシートだけで解決する方法をご紹介致します。どこまでも限りなく小さくなっていくリスト...「リストの文字サイズをちょっと小さめにしたい」と思ったときを考えてみましょう。ul要素に対して「80%」などの文字サイズを指定すると、リストの階層が深くなるにつれて、どんどん文字サイズが小さくなってしまいます。第5階層目これでは、深い階層の文字が小さくなりすぎて、読めませんね。ここで記述したスタイルシートは、次のようなものです。}ul要素の文字サイズ(font-size)を「80%」にするスタイルです。この記述で、なぜ、リストの階層が深くなるにつれて、文字サイズがどんどん小さくなってしまうのでしょうか。答えは、リストを実現するHTMLソースを見ると分かります。:</ul></li></ul></li></ul>もう、お分かりでしょうか?リストの階層を1段階深くするには、ul要素を使います。1段階深くするには、さらにul要素を使います。3階層目の文字サイズは「『80%の80%』の80%」(80%×80%×80%=51.2%)で51.2%になります。これが、どんどん文字サイズが小さくなってしまう原因です。小さくならないようにするには?さて、どんどん小さくなってしまうと困るので、それを防ぐ必要があります。防ぐ方法はいろいろ考えられますが、それぞれデメリットもあります。今回ご紹介したいのは、デメリットのない解決策ですが、その前に、デメリットのある解決策をいくつか挙げてみましょう。」といったキーワードでの指定もできます。この指定を使えば、相対的にどんどん文字サイズが変化することはなくなります。Explorer(※)とその他のブラウザで、実際に表示される大きさが異なるという問題点があります。ブラウザによって文字サイズが異なってしまうわけです。※IE5.5以下や、IE6.0の「互換モード」の場合。」のように指定することもできます。この指定を使えば、どんどん文字サイズが変化することもありませんし、各ブラウザでも同じ大きさで表示されます。【デメリット】文字サイズを絶対的な値で指定すると、ユーザが自分の意志で文字サイズを調整できなくなる可能性があるので、望ましくありません。ユーザビリティ(使いやすさ)を考えるなら、この指定方法は避けた方がよいでしょう。■方法3:リスト全体を囲むブロックレベル要素を追加するリスト全体を囲むdiv要素などをHTMLに追加して、そのdiv要素に対して文字サイズを指定することもできます。この方法なら、「80%」などの割合での指定方法でも、特に問題は起こりません。【デメリット】HTMLに何か書き加えないといけませんから、対象のページ数が多い場合や、レンタルブログなどでHTMLを編集できない場合には使えません。■方法4:最初のul要素にだけクラス名を付加する最初のul要素にだけクラス名を付加しておき、そのクラスのul要素にだけ、文字サイズを小さくするスタイルを適用するという方法もあります。【デメリット】この場合も、HTMLに何か書き加えないといけませんから、先ほどと同様の問題があります。デメリットのない解決策は?さて、それではデメリットのない解決策をご紹介致しましょう。...ずいぶん長く引っ張ってきましたが、解決策は非常に単純なものです。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。