リストの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で質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・【お題】絵本のタイトル
- ・【大喜利】世界最古のコンビニについて知ってる事を教えてください【投稿~10/10(木)】
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ol要素の番号とリスト項目の離...
-
<ul>~</ul>が二つ続くと間に改...
-
html/cssの、navを2段にする...
-
css ol liにdisplay:inlineを設...
-
htmlの<ol>タグで、数字などを...
-
<table>の高さ固定。情報増加時...
-
ホームページビルダーで同じ行...
-
番号付きリスト(<Ol><Li>・・...
-
HTMLで画像を3つ並べる方法
-
箇条書きcssのul liで一部のli...
-
CSSで、リスト<li>の、アンカー...
-
html <li>の中の文字一部に色を...
-
リストの数字のフォントサイズ...
-
ulタグやliタグの中でbrタグ...
-
正規表記について「除く」の表...
-
liにスタイルシートが上手くい...
-
HTMLで組織図を作成する方法
-
SWIFTでHtmlのソースの一部を取得
-
画像を形そのままで横に並べたい
-
liタグの左寄せ方法を教えてく...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
html/cssの、navを2段にする...
-
ulタグやliタグの中でbrタグ...
-
リストの数字のフォントサイズ...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
<ul>~</ul>が二つ続くと間に改...
-
<ul><li></li></ul>にするメリ...
-
レスポンシブWebデザインでリン...
-
html <ul></ul>の並びで一行空...
-
display:table;を多段表示させたい
-
HTMLで組織図を作成する方法
-
divタグ内のコンテンツが重なっ...
-
番号付きリスト(<Ol><Li>・・...
-
ulとliで囲った文字の一部を変...
-
htmlの<ol>タグで、数字などを...
-
HTML5のfooterに見出しを付けて...
-
css 横並びのナビゲーションバ...
-
疑似クラス :activeが効きません
-
list-style-type部分だけ大きく...
おすすめ情報