スタイルシートで横並びリストを作成するとき、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>
No.1ベストアンサー
- 回答日時:
回り込みとインライン表示は似た表現ができる場合もありますが存在する理由が違います。
インライン表示は文字列を段落のようなブロックとして表示しないという考え方です。
floatはブロックにほかのブロックを回り込ませる(雑誌などで写真に対し文章が回り込んでいたりするあれです)ためのものです。
今回の場合はどちらでもよさそうですがリストのインライン表示にはMozilla系のブラウザでトラブルの原因となることがあります。
逆にフロートはIntenet Explorerでトラブルの原因となることがあります。
ですのでユーザの多いほうでトラブルを起こさない書き方(インライン表示)が適切ではないかと思います。
ありがとうございます!なるほど。IEのフロートは色々注意が必要みたいですね。今回の場合に限れば、どちらでも問題なさそうということも分かりました。同じレイアウトを実現する方法を色々知っておいて、その時々にブラウザ毎のことを考えて使い分ける、がよさそうですね。教えていただき感謝します!
No.2
- 回答日時:
> ですのでユーザの多いほうでトラブルを起こさない書き方(インライン表示)が適切ではないかと思います。
少数派を半ば無条件的に切り捨てるのはどうかと…^^;
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は地道な努力と誠意が大事だと、痛感しました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS インラインブロックの中のテキストを上下中央に合わせたい 1 2022/12/24 17:46
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
レスポンシブWebデザインでリン...
-
<table>の高さ固定。情報増加時...
-
リストの数字のフォントサイズ...
-
ボックスの幅を内容に合わせたい
-
excel vba で ulタグのなかのse...
-
正規表記について「除く」の表...
-
html <ul></ul>の並びで一行空...
-
リストの並べ替え
-
html/cssの、navを2段にする...
-
CSS質問:大手サイトを見ると何...
-
html <li>の中の文字一部に色を...
-
divタグ内のコンテンツが重なっ...
-
css li に入れ子で適用する範囲
-
htmlで鍵盤を描きたい
-
ulとliで囲った文字の一部を変...
-
<ul><li></li></ul>にするメリ...
-
HTMLで組織図を作成する方法
-
Tableの1セル内に画像・テキス...
-
Dreamweaverで、ul要素の下に写...
-
リストを2つに分割して、それぞ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<table>の高さ固定。情報増加時...
-
リストマーカーをボックス内に...
-
画像にリンクを張ると画像がず...
-
レスポンシブWebデザインでリン...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
ポップアップメニューを表のよ...
-
liタグの中に<p>タグやら<dl>を...
-
リストの数字のフォントサイズ...
-
<ul>~</ul>が二つ続くと間に改...
-
<ul><li></li></ul>にするメリ...
-
html <ul></ul>の並びで一行空...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
html/cssの、navを2段にする...
-
display:table;を多段表示させたい
-
HTML5のfooterに見出しを付けて...
-
divタグ内のコンテンツが重なっ...
-
リストを2つに分割して、それぞ...
-
複数行にまたがる括弧を表示し...
おすすめ情報