- ベストアンサー
CSS 横並びリストの書き方はどちらがよいでしょうか
スタイルシートで横並びリストを作成するとき、li { display: inline; } を使う方法と、li { display: block; float:left; } を使う方法がありますよね。皆さんは、意識して、使い分けられていますか？ どちらで表現しようか、よく迷います。どちらの方法でも同じレイアウトにできるように思ってしまっていて。。でも自分の気付いていないデメリットがあるのかな？と気になります。「こうしたい場合、こちらのレイアウトだと無理」とか、「これではこのブラウザで表示が崩れる」など、お気づきのことがあれば、教えていただけないでしょうか。 下に、自分で確認用に作ったhtmlがあるので、そのままブラウザで見ていただければと思います。お手数ですが、よろしくお願いします。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>横並びサンプル</title> <style type="text/css"> <!-- /* リスト：インライン ------------------------------------------------------------ */ #yoko1 li { display: inline; } #yoko1 a { display: block; float:left; } #yoko1 li { list-style-type: none; margin:0 5px; } #yoko1 a { padding: 5px 10px; margin: 5px; text-decoration:none; border:1px solid #CCFF33; } #yoko1 a:hover { background-color:#CCCCFF; } #yoko2 { clear:left; } /* リスト：ブロック ------------------------------------------------------------ */ #yoko2 li { display: block; float:left; } #yoko2 a { display:block; } #yoko2 li { list-style-type:none; margin:0 5px; } #yoko2 a { padding: 5px 10px; text-decoration:none; border:1px solid #CCFF33; } #yoko2 a:hover { background-color:#CCCCFF; } --> </style> </head> <body> <div id="yoko1"> <ul> <li><a href="#">あ</a></li> <li><a href="#">い</a></li> <li><a href="#">う</a></li> </ul> </div> <div id="yoko2"> <ul> <li><a href="#">あ</a></li> <li><a href="#">い</a></li> <li><a href="#">う</a></li> </ul> </div> </body> </html>
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
回り込みとインライン表示は似た表現ができる場合もありますが存在する理由が違います。 インライン表示は文字列を段落のようなブロックとして表示しないという考え方です。 floatはブロックにほかのブロックを回り込ませる(雑誌などで写真に対し文章が回り込んでいたりするあれです)ためのものです。 今回の場合はどちらでもよさそうですがリストのインライン表示にはMozilla系のブラウザでトラブルの原因となることがあります。 逆にフロートはIntenet Explorerでトラブルの原因となることがあります。 ですのでユーザの多いほうでトラブルを起こさない書き方(インライン表示)が適切ではないかと思います。
その他の回答 (1)
- MAN_MA_RUI
- ベストアンサー率41% (426/1024)
> ですのでユーザの多いほうでトラブルを起こさない書き方(インライン表示)が適切ではないかと思います。 少数派を半ば無条件的に切り捨てるのはどうかと…^^; IEが使えない環境も考慮したほうが幅広い層のユーザーを取り込めるのですから。 IEとそれ以外で挙動が異なるのであれば両方の併用を行えばいいと思います。 CSS読み込みでIE5以降とそれ以外を振り分け。 <!--[if IE]> <link rel="stylesheet" href="ie_only.css" type="text/css"> <![endif]--> <![if IE]> <link rel="stylesheet" href="not_ie.css" type="text/css"> <![endif]>
お礼
おーありがとうございます！条件分岐コメントは使ったことがありませんが、そうですね、それぞれにメリデメがあるのなら、振り分けが一番親切ですね！CSSは地道な努力と誠意が大事だと、痛感しました。
お礼
ありがとうございます！なるほど。ＩＥのフロートは色々注意が必要みたいですね。今回の場合に限れば、どちらでも問題なさそうということも分かりました。同じレイアウトを実現する方法を色々知っておいて、その時々にブラウザ毎のことを考えて使い分ける、がよさそうですね。教えていただき感謝します！