- ベストアンサー
ul liを使ったリストを作成する際の問題と解決方法
- CSS初心者のため、ul liを使ったリストを作成する際に問題が発生しました。
- 特にOpera9での表示において、意図しない改行や文字の配置のズレが発生しました。
- 解決策をご存知の方は、教えていただけると助かります。
- みんなの回答 (3)
- 専門家の回答
質問者が選んだベストアンサー
CSSより前に、この文書はどのタイプのリストでしょうか? HTMLでは次のリストが用意されています。 ・順不同リスト (UL) ・序列リスト (OL) リスト項目(LI) ・定義リスト(DL)、DT、 内容 DD要素 リストはその意味からこの3つに必ず分類します。 たとえば ・工具 ・作業工具 ・電動工具 ・荷役 ・金物 ・建築金物 ・厨房用品 これは、通常の箇条書き[順不同リスト (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-html401j/struct/lists.html
その他の回答 (2)
- pick52
- ベストアンサー率35% (166/466)
こういうリストなら定義リストを使った方がいいと思います。 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>
お礼
ありがとうございます。このやり方も試してみます。助かります。
- SAYKA
- ベストアンサー率34% (944/2776)
ああああ、くくくく、すすすす は通常通り。 他はその下階層の1つのli内に別のlist(ulとか)として記述 第一段階としては通常通り ああああ いいいい うううう ええええ ・・・ の形にしよう。 下階層のul(「いいいい」とかね)のliをcssで横並びになるように指定すれば完成 え?具体的なソース?この質問の仕方じゃ答えてあげると違反なのでこれが限界。 後は自分で調べようね。 または「この記述でできる筈なのに」とソースを出そうね。
お礼
ありがとうございました。ちょっと色々調べてみます。
お礼
勉強になりました。丁寧に教えて頂きありがとうございました。