ul li を使ったリストを作りたいんですけど。。。

CSS初心者です。
ul liを使ってこんな感じのリストを作りたいんですけど
うまくいきません。
↓
------------------------------------
ああああ
　　いいいい　うううう　ええええ
　　おおおお　かかかか　きききき
くくくく
　　けけけけ　ここここ　ささささ
　　しししし
すすすす
　　せせせせ　そそそそ
------------------------------------



なんとか作ってはみたんですが、IE7ではなんとかそれらしく
表示されますが、Opera9で確認すると
うまく表示されません。
（「あ」の後に改行されずに「い」がきてしまったり・・・）

すいません。
どなたか分かる方がいれば教えてください。
よろしくお願いします。

No.1 ベストアンサー 回答者： ORUKA1951 回答日時： 2008/10/17 12:38

CSSより前に、この文書はどのタイプのリストでしょうか？

HTMLでは次のリストが用意されています。
・順不同リスト (UL)
・序列リスト (OL)
　　　リスト項目(LI)
・定義リスト(DL)、DT、
　　　内容 DD要素

リストはその意味からこの３つに必ず分類します。
たとえば
・工具
　　・作業工具
　　・電動工具
　　・荷役
・金物
　　・建築金物
　　・厨房用品
これは、通常の箇条書き[順不同リスト (UL)]ですから
<ul>
　　<li>工具
　　　　<ul>
　　　　　　<li>作業工具</li>
　　　　　　<li>電動工具</li>
　　　　　　<li>荷役</li>
　　　　</ul>
　　</li>
　　<li>金物
　　　　<ul>
　　　　　　<li>建築金物</li>
　　　　　　<li>厨房用品</li>
　　　　</ul>
　　</li>
</ul>

※必ずタブなどで、インデントをつけて見やすくしましょう。
　例では、全角スペースを使ってますから、タブなど(空白文字)に変換すること。
　★HTMLでは</li>は省略できますが、将来のXHTMLを考慮して、必ず書くようにしましょう。</閉じタグ>が現れれば、インデント解除すればソースが分かりやすくなります。
　★XHTMLへの発展を考えて、要素名や属性は小文字で書く癖をつけましょう。

　ここまでできたら、CSSでデザインしましょう。ボタンにするなり、

【資料】
Lists in HTML documents (ja)
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 …

　　

この回答へのお礼

勉強になりました。丁寧に教えて頂きありがとうございました。

お礼日時：2008/10/17 15:11

No.3 回答者： pick52 回答日時： 2008/10/19 21:38

こういうリストなら定義リストを使った方がいいと思います。

http://www.tohoho-web.com/html/dl.htm
http://www.htmq.com/html/dd.shtml

なんか、少々位置がおかしいですけどこんな感じで。

<dl>
<dt>ああああ</dt>
<dd style="float: left;">いいいい</dd>
<dd style="float: left;">うううう</dd>
<dd>ええええ</dd>
<dd style="float: left;">おおおお</dd>
<dd style="float: left;">かかかか</dd>
<dd>きききき</dd>
<dt>くくくく</dt>
<dd style="float: left;">けけけけ</dd>
<dd style="float: left;">ここここ</dd>
<dd>ささささ</dd>
<dd>しししし</dd>
<dt>すすすす</dt>
<dd style="float: left;">せせせせ</dd>
<dd>そそそそ</dd>
</dl>

この回答へのお礼

ありがとうございます。このやり方も試してみます。助かります。

お礼日時：2008/10/20 08:13

No.2 回答者： SAYKA 回答日時： 2008/10/17 13:17

ああああ、くくくく、すすすす

は通常通り。
他はその下階層の1つのli内に別のlist(ulとか)として記述
第一段階としては通常通り

ああああ
　　いいいい
　　うううう
　　ええええ
　・・・

の形にしよう。
下階層のul(「いいいい」とかね)のliをcssで横並びになるように指定すれば完成

え？具体的なソース？この質問の仕方じゃ答えてあげると違反なのでこれが限界。
後は自分で調べようね。
または「この記述でできる筈なのに」とソースを出そうね。

この回答へのお礼

ありがとうございました。ちょっと色々調べてみます。

お礼日時：2008/10/17 15:10