はじめての親子ハイキングに挑戦!! >>

リストの2段組ですが、皆さんどのように組まれていますか?

リストの項目が同一カテゴリーだった場合です。
例えば下記のような同一カテゴリー(花)の場合
・チューリップ
・あじさい
・たんぽぽ
・ひまわり
・すみれ
・パンジー

これを
=============
・チューリップ  ・ひまわり
・あじさい     ・すみれ
・たんぽぽ    ・パンジー
=============
のように表示させたい場合です。
投稿した後に表示がズレるかもしれませんが、
・ひまわり ・すみれ ・パンジー の頭は揃えたいです。

苦肉の策で下記のようなマークアップをしています。
<ul class="left">
<li>チューリップ</li>
<li>あじさい</li>
<li>たんぽぽ</li>
</ul>
<ul class="right">
<li>ひまわり</li>
<li>すみれ</li>
<li>パンジー</li>
</ul>
そして左右にfloatさせています。
ただ、これだとリストが途中で分断されてしまって
正しいマークアップとは言えないですよね・・・。

こういうケースって結構あるのでは、と思い、
色んなサイトを巡りましたが見つからず。

皆さんこういったケースの場合どのように組まれてますか?
いっそテーブルの方が良いのでしょうか?
項目は後から追加するものと想定してください。
(縦に可変していきます)

どうぞ宜しくお願いいたします。

このQ&Aに関連する最新のQ&A

A 回答 (6件)

確かに下のソースだとIEで駄目でした・・・


以下の部分を追加してください。


.left {
width:251px;
float:left;
clear:left; /* ←追加する場所 */
}
    • good
    • 2
この回答へのお礼

わかりやすい記述なのにIEだと無理なのか・・・
と残念に思っていたのですが、たしかに記述追加で問題なく表示できるように
なりました!
No.6さんも言っておられますが、確かに目から鱗ですね。

columnというのが実装されてきているということも勉強になりました。
早く普及して欲しいです。

お礼日時:2009/04/22 22:57

(回答じゃなくてすみません。


ANo.5様の方法…これで解決できるとは。目から鱗でした。勝手ながら、今後是非使わせて頂こうと思います。
ということで私のANo.4の方法は忘れて下さい(元々お奨めじゃないので…)。
    • good
    • 1
この回答へのお礼

>私のANo.4の方法は忘れて下さい(元々お奨めじゃないので…)。

とおっしゃっているにもかかわらず、ソースをコピーして試してみました。すみません・・・。
(回答くださった皆様のを全部、試していたりします・・・)
IE、Firefoxで試しましたが、どちらも崩れなく綺麗に表示されています。
緻密に計算されていてすごいなと思いました。
何よりpositionをもっと勉強してみようと思うきっかけになりました。

ありがとうございました!

お礼日時:2009/04/22 23:08

アイテムの並び方に拘らなくても良く「左→右→左→右→左→右」になっても構わない様な内容なら、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行になってしまう可能性が高い場合は基本、使いません。
    • good
    • 0

あまり参考にならないかもですが。


http://www.google.co.jp/cse?cx=partner-pub-45759 …

内容が既出の回答と被ってるかもしれません。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。

同じところでつまづいている方々がいるのだな・・・と。
(いけない安心が・・・)
<ol>を使用して縦並びさせたい、というのも実際にでてきそうなケースだな、
と思いながら参考ページを読ませていただきました。

お礼日時:2009/04/22 23:20

そのうちモダンブラウザで先行実装されはじめている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;
}
    • good
    • 0

はじめまして。


私も質問者様と同じように左右に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;
}
これだと正しいマークアップとは言えないですね。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。

1つ目に提案いただいたものがリストの並び順にこだわらなければ、シンプルで良いです。
難しく考えすぎていたのですが、こんなにすっきりとした記述でOKなんですね。
実は、並び順にこだわる以前の問題だったので、(こだわらなくてもつまづいていた)とても嬉しく思っています。是非活用させていただきます。

「でも順番にこだわるなら・・・」と問題提起して考えていただいた
2案目もありがとうございます!

お礼日時:2009/04/22 22:50

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qcss 横並びのナビゲーションバーを二段にする場合

CSSでデザインしてるのですが・・・。
ナビゲーションバーで横並びに4項目。
ここまでは出来るのですが、この4項目を
2段にして、8項目にするには、どのように書くのがスマートでしょうか。
テーブルにしたほうが早そうな気もしますが、
表かといいうと、違う気もします。

ulでリスト表示の途中で改行させる方法があるのか、
マークアップが適切とはいえないけれど、
リストが二つあることにして、ulを二つにするか、
などと考えています。

初心者でよくわかっていないのですが、
皆様はどのようにしたら良いと思われますか?

よろしくお願いします。

Aベストアンサー

たとえば、外枠のブロックで横幅を決めちゃって、その中で float: left; じゃだめ?非常に単純にCSSとHTMLを書くとこんな感じ。

■CSS部

*{
margin:0;
padding:0;
}

ul {width: 600px;}

li {
height: 50px;
width: 150px;
list-style-type: none;
float: left;
display: block;
}

■HTML部
<ul>
<li>めにゅー1</li>
<li>めにゅー2</li>
<li>めにゅー3</li>
<li>めにゅー4</li>
<li>めにゅー5</li>
<li>めにゅー6</li>
<li>めにゅー7</li>
<li>めにゅー8</li>
</ul>

Qulタグやliタグの中でbrタグは使えない?

完成したサイトなのですが…。
Dreamweaverにて開いて一応チェックすると、
「タグbrはur内では使用できません」との表示がでて驚いています。

<li>~</li>だけで自動的になされる改行だと、詰まって見えるのです。
だから、

<ul style="padding-left: 00px;">
<li>~</li></br>
<li>~</li></br>
</ul>

のようにして処理しております。ただ、これってSEO的にマズい、ということなのでしょうか?
どうか、ご存知の方いましたら教えてください。

Aベストアンサー

SEO(検索エンジン最適化)には無関係ですが、文法的には誤りです。
→10.2 順不同リスト (UL)、序列リスト (OL)、及びリスト項目(LI)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#edef-UL )

<!ELEMENT UL - - (LI)+ -- unordered list -->
ulには、「li要素のみを一個以上もつ。」と書かれています。


<!ELEMENT LI - O (%flow;)* -- list item -->
li要素には、%flowをゼロ個以上もつ、終了タグは省略できる。

読み方は、3.3.3 要素宣言 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/sgmltut.html#h-3.3.1 )を参照すること

したがって
<ul>
 <li>・・・<br>
 <li>・・・<br>
</ul>
とは書けます。(HTMLの場合)
その場合、ブラウザは
<ul>
 <li>・・・<br></li>
 <li>・・・<br></li>
</ul>
と解釈します。(XHTMLはこう書かないとならない)

★もっと、はるかに大事なこと
「<li>~</li>だけで自動的になされる改行だと、詰まって見えるので」<br>を入れるは、HTML的には最大の間違いです。こちらのほうがはるかに重要!!
 構造とプレゼンテーションは区別すること。デザインのためにHTMLを書いてはなりません。
 2.3.2 アクセス性 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.3.2 )

スタイルシートで、
ul li{margin-bottom:1em;}
だけでよい。

SEO(検索エンジン最適化)には無関係ですが、文法的には誤りです。
→10.2 順不同リスト (UL)、序列リスト (OL)、及びリスト項目(LI)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#edef-UL )

<!ELEMENT UL - - (LI)+ -- unordered list -->
ulには、「li要素のみを一個以上もつ。」と書かれています。


<!ELEMENT LI - O (%flow;)* -- list item -->
li要素には、%flowをゼロ個以上もつ、終了タグは省略できる。

読み方は、3.3.3 要素宣言 ( http://www.asahi-net.or.jp...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qリストの左余白の削除方法

<li>リストを作成した再に表示されてしまう、左余白部分を削除して、画面左に詰めたいのですが、上手く出来ません。
どなたかご教授頂けませんでしょうか?

=>CSS記述<=
ul li {
list-style: none;
margin: 0px;
padding: 0px;}

=>HTML記述<=
<ul>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
</ul>

Aベストアンサー

ul li {

の箇所を

ul {

にするだけ

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

QCSSでボックス幅を文字列に合わせたい

ボックス幅を文字列の幅に合わせるにはどうしたらいいのでしょうか。
テーブルではセルにwidth属性を指定しなくても文字列の幅になりますが、ボックスではwidthプロパティを指定しなかったら領域全体の幅になります。white-spaceプロパティでnowrap指定し、widthプロパティで文字列より小さいサイズに指定するとできるのですが、他に指定する方法があれば教えて下さい。

Aベストアンサー

div等のblock要素ではなくspan等のinline要素によって行う。

<span style="border:solid 1px">文字幅に合わせた枠線</span>

Q文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

Qul liのclass指定について

表示が上手くいかないのでお助け下さい。
ul liのliにclass指定をして、それぞれのclassに異なる背景画像を表示させようとしているのですが、
なぜかclass指定をすると画像が消えてしまいます。
class指定をしない状態ですと普通に表示されるのですが、別々の画像を表示させたいと思っているので困っています。
どなたか教えて頂けないでしょうか?

また、申し訳ありませんがとりあえず表示されれば良いだけなので
htmlやcssの記述に対する細かいツッこみは勘弁して下さい。

宜しくお願いします!


【html】

<div id="side">
<ul id="sidenav">
<li class="a"><a href="test.html">test</a></li>
</ul>
</div>

【css】

div#side {
display: inline;
float: left;
width: 178px;
margin-top: 20px;
text-align:center;
background:#fff;
}

div#side ul#sidenav {
list-style-type:none;
border: none;
}

div#side ul#sidenav li.a {
background:url(../common/side.gif) no-repeat left;
background-position: 6px 11px;
}

div#side li {
position:relative;
width: 165px;
height:40px;
padding: 1px;
margin: 5px;
text-align:left;
border: 1px solid #8c8c8c;
}

表示が上手くいかないのでお助け下さい。
ul liのliにclass指定をして、それぞれのclassに異なる背景画像を表示させようとしているのですが、
なぜかclass指定をすると画像が消えてしまいます。
class指定をしない状態ですと普通に表示されるのですが、別々の画像を表示させたいと思っているので困っています。
どなたか教えて頂けないでしょうか?

また、申し訳ありませんがとりあえず表示されれば良いだけなので
htmlやcssの記述に対する細かいツッこみは勘弁して下さい。

宜しくお願いします!


【html】

...続きを読む

Aベストアンサー

>class指定をしない状態ですと普通に表示されるのですが、
このスタイルシートの書き方はどうなってますか?

>div#side ul#sidenav li.a {
このセレクタの、background-positionを消してみるとどうなりますか?


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング