リストの2段組ですが、皆さんどのように組まれていますか?
リストの項目が同一カテゴリーだった場合です。
例えば下記のような同一カテゴリー(花)の場合
・チューリップ
・あじさい
・たんぽぽ
・ひまわり
・すみれ
・パンジー
これを
=============
・チューリップ ・ひまわり
・あじさい ・すみれ
・たんぽぽ ・パンジー
=============
のように表示させたい場合です。
投稿した後に表示がズレるかもしれませんが、
・ひまわり ・すみれ ・パンジー の頭は揃えたいです。
苦肉の策で下記のようなマークアップをしています。
<ul class="left">
<li>チューリップ</li>
<li>あじさい</li>
<li>たんぽぽ</li>
</ul>
<ul class="right">
<li>ひまわり</li>
<li>すみれ</li>
<li>パンジー</li>
</ul>
そして左右にfloatさせています。
ただ、これだとリストが途中で分断されてしまって
正しいマークアップとは言えないですよね・・・。
こういうケースって結構あるのでは、と思い、
色んなサイトを巡りましたが見つからず。
皆さんこういったケースの場合どのように組まれてますか?
いっそテーブルの方が良いのでしょうか?
項目は後から追加するものと想定してください。
(縦に可変していきます)
どうぞ宜しくお願いいたします。
No.5ベストアンサー
- 回答日時:
確かに下のソースだとIEで駄目でした・・・
以下の部分を追加してください。
.left {
width:251px;
float:left;
clear:left; /* ←追加する場所 */
}
わかりやすい記述なのにIEだと無理なのか・・・
と残念に思っていたのですが、たしかに記述追加で問題なく表示できるように
なりました!
No.6さんも言っておられますが、確かに目から鱗ですね。
columnというのが実装されてきているということも勉強になりました。
早く普及して欲しいです。
No.6
- 回答日時:
(回答じゃなくてすみません。
)ANo.5様の方法…これで解決できるとは。目から鱗でした。勝手ながら、今後是非使わせて頂こうと思います。
ということで私のANo.4の方法は忘れて下さい(元々お奨めじゃないので…)。
>私のANo.4の方法は忘れて下さい(元々お奨めじゃないので…)。
とおっしゃっているにもかかわらず、ソースをコピーして試してみました。すみません・・・。
(回答くださった皆様のを全部、試していたりします・・・)
IE、Firefoxで試しましたが、どちらも崩れなく綺麗に表示されています。
緻密に計算されていてすごいなと思いました。
何よりpositionをもっと勉強してみようと思うきっかけになりました。
ありがとうございました!
No.4
- 回答日時:
アイテムの並び方に拘らなくても良く「左→右→左→右→左→右」になっても構わない様な内容なら、ANo.1様の最初の方法をとりますが、並び方に意味があって「左→左→左→右→右→右」を崩せないとなると難しいですね。
ANo.2様の方法は理想的なのですが、例によってIE6/7がだめなので、通常は妥協して質問者様と同じくリストを二つに分けてしまう事が多いでしょうか…ごく限られた条件(アイテムが頻繁に増減する事がなく、アイテムのテキストが短くかなり文字サイズを拡大しても2行にならない)が整っている場合は、下記の様な方法をとる事もありますが。
<ul class="hoge">
<li class="col1">チューリップ</li>
<li class="col1">あじさい</li>
<li class="col1">たんぽぽ</li>
<li class="col2">ひまわり</li>
<li class="col2">すみれ</li>
<li class="col2">パンジー</li>
</ul>
ul.hoge {
position: relative;
width: 500px;
height: 4.2em;
list-style: none;
margin: 0;
padding: 0;
line-height: 1.4em;
overflow: hidden;
}
ul.hoge li {
width: 50%;
margin: 0;
padding: 0;
}
ul.hoge li.col1 {
position: relative;
left: 0;
}
ul.hoge li.col2 {
position: relative;
top: -4.2em;
left: 250px;
}
heightとline-heightで高さを調整してpositionで右コラムのリストの開始位置を引き戻しています。
ただし、これはアイテム数の増減によって、それらのプロパティの値をその度に再計算して調整しなければならないという手間があります。アイテムが2行になってしまう可能性が高い場合は基本、使いません。
No.3
- 回答日時:
ご回答ありがとうございます。
同じところでつまづいている方々がいるのだな・・・と。
(いけない安心が・・・)
<ol>を使用して縦並びさせたい、というのも実際にでてきそうなケースだな、
と思いながら参考ページを読ませていただきました。
No.2
- 回答日時:
そのうちモダンブラウザで先行実装されはじめているcolumnが使えそうですが・・・
とりあえず今回のパターンだとこれでもいいかなと思います。
<ul>
<li class="left">チューリップ</li>
<li class="left">あじさい</li>
<li class="left">たんぽぽ</li>
<li>ひまわり</li>
<li>すみれ</li>
<li>パンジー</li>
</ul>
ul {
width:500px;
}
.left {
width:251px;
float:left;
}
No.1
- 回答日時:
はじめまして。
私も質問者様と同じように左右にfloatさせています。
が、少し試してみました。
ul,liの幅を固定にしてfloatすれば、
2つずつならんでカラム落ちを繰り返すので
左の列の先頭は揃うと思いますが・・。
【html】
<ul>
<li>チューリップ</li>
<li>あじさい</li>
<li>たんぽぽ</li>
<li>ひまわり</li>
<li>すみれ</li>
<li>パンジー</li>
</ul>
【css】
ul{
width:400px;
}
li{
width:200px;
float:left;
}
でも、これでは順番が
=============
・チューリップ ・あじさい
・たんぽぽ ・ひまわり
・すみれ ・パンジー
=============
と変わってしまいますね。
それではソースを少々いじって、
【html】
<ul>
<li>チューリップ<span>ひまわり</span></li>
<li>あじさい<span>すみれ</span></li>
<li>たんぽぽ<span>パンジー</span></li>
</ul>
【css】
ul{
width:400px;
list-style-type:none;
}
li{
background:url(URL)no-repeat;
}
li span{
display:block;
background:url(URL)no-repeat;
text-align:left;
width:200px;
float:right;
margin:-2.25em 0 10;
}
これだと正しいマークアップとは言えないですね。
ご回答ありがとうございます。
1つ目に提案いただいたものがリストの並び順にこだわらなければ、シンプルで良いです。
難しく考えすぎていたのですが、こんなにすっきりとした記述でOKなんですね。
実は、並び順にこだわる以前の問題だったので、(こだわらなくてもつまづいていた)とても嬉しく思っています。是非活用させていただきます。
「でも順番にこだわるなら・・・」と問題提起して考えていただいた
2案目もありがとうございます!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS リストの並べ替え 1 2022/09/13 15:27
- PHP PHPの構文で間違えが分からない 5 2022/07/11 16:38
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- その他(プログラミング・Web制作) pythonリストの特定の値を表示htmlで表示できない 2 2022/05/14 05:48
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
番号付きリスト(<Ol><Li>・・...
-
<ul>~</ul>が二つ続くと間に改...
-
IEでスクロールできない
-
liタグの中に<p>タグやら<dl>を...
-
リストマーカーをボックス内に...
-
htmltとcssの連携をして画像縮...
-
円形の配置にするコーディング...
-
<ul><li></li></ul>にするメリ...
-
リストの数字のフォントサイズ...
-
<table>の高さ固定。情報増加時...
-
HTML5のfooterに見出しを付けて...
-
jQuery-もっと見るボタンをスマ...
-
CSSのみでのドロップダウンメニ...
-
(HP作成)メニューバーのプル...
-
display:table;を多段表示させたい
-
アコーディオンメニューがかく...
-
css ol liにdisplay:inlineを設...
-
HTMLで画像を3つ並べる方法
-
なぜ?マウスオーバーで1pt位置...
-
レスポンシブWebデザインでリン...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
レスポンシブWebデザインでリン...
-
html/cssの、navを2段にする...
-
リストの数字のフォントサイズ...
-
divタグ内のコンテンツが重なっ...
-
<ul><li></li></ul>にするメリ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
リンク文字同士の間隔を開ける...
-
<ul>~</ul>が二つ続くと間に改...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
display:table;を多段表示させたい
-
ボタンを横に並べて表示させる方法
-
CSS質問:大手サイトを見ると何...
-
html <li>の中の文字一部に色を...
-
html <ul></ul>の並びで一行空...
-
Tableの1セル内に画像・テキス...
おすすめ情報