ベストアンサー

<ol>でfloatを使っての3列表示をした時の不具合

2009/02/18 13:07

下記の様にし、リストをテーブルを使わずに3列表示したいのですが、 Firefoxだとそのままちゃんと表示されるのですが、IEだと数字ではなく、ドットで表示されてしまいます。 Operaに至っては列毎に1から数字が振られてしまいます。何か解決法はありませんでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>参考リスト</title> <style type="text/css">  </style> </head> <body> <ol> <div id="line1"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </div> <div id="line2"> <li>リスト4</li> <li>リスト5</li> <li>リスト6</li> <li>リスト7</li> </div> <div id="line3"> <li>リスト8</li> <li>リスト9</li> <li>リスト10</li> </div> </ol> </body></html>

harukatsum
お礼率27% (3/11)

HTML
回答数9
ありがとう数2

みんなの回答 （9）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

abril
ベストアンサー率69% (388/560)

2009/02/18 15:38 回答No.5

> ただ、この方法だと、私が意図するような表示が出来ません。 > 次の列に行くと再度１から表示されてしまいます。当然ですね。列毎に新しいolでマークアップされているのですから、liの番号がリセットされます。 olにstart属性というのがあります。これを使用すればご希望には添うかと思いますが、この属性は非推奨であり、HTML4.01 strict／XHTML1.0 strict／XHTML1.1では廃止されています。質問様のHTML文書はHTML 4.01 Transitionalですのでかろうじてセーフですが… ---------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css">※←CSS（<style type="text/css">～</style>）を使用するならこのmeta情報が必要です。 <title>参考リスト</title> <style type="text/css">  </style> </head> <body> <ol id="line1"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ol> <ol id="line2" start="4"> <li>リスト4</li> <li>リスト5</li> <li>リスト6</li> </ol> <ol id="line3" start="7"> <li>リスト7</li> <li>リスト8</li> <li>リスト9</li> <li>リスト10</li> </ol> <p id="hoge">下に続く要素</p> </body> </html> ---------------------------------------------------------------------- あくまで非推奨の方法だという事は了承しておいて下さい。 ※「<ol>の中に<div>はない方がいい」という記述は、「あってもいい／あっても違反ではない」という意味ではなく、その様なマークアップはHTMLの文法では有り得ない、という事ですので質問者様は誤解されません様に。

質問者

お礼 2009/02/19 07:46

ご回答有難う御座いました。表示的にはこの方法が一番見た目的に近いかと思います。この方法で作成を使用かと思います。

その他の回答 (8)

ORUKA1951
ベストアンサー率45% (5062/11036)

2009/02/18 21:17 回答No.9

バグだらけというか、未対応のIEを無視して、IEのみ、リストナンバーを表示させない方法で、対処。項目No.はでないが、@media screen{}で括っておけば、スクリーン以外(ＳＥを含む)でも、問題ないと思う。IEも8あたりになれば、対応してくるだろうと期待して。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>Untitled</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css">  </style> </head> <body> <h1>title</h1> <h2>subTitle</h2> <ol id="list"> <li class="left ol1">リスト1</li> <li class="left ol2">リスト2</li> <li class="left ol3">リスト3</li> <li class="left ol4">リスト4</li> <li class="center ol5">リスト5</li> <li class="center ol6">リスト6</li> <li class="center ol7">リスト7</li> <li class="center ol8">リスト8</li> <li class="right ol9">リスト9</li> <li class="right ol10">リスト10</li> </ol> <div style="margin-top:10em"> <p>テスト</p> </div> </body> </html> 一つのOLとして、正しく、マークアップして、かつ３段にするには、今のところこれしか思いつかない。　これだと携帯端末などで訪問した場合は、きちんとOLとして表示される。

質問者

お礼 2009/02/19 07:50

ご回答有難う御座います。内容的にはこちらが良いのですが、一番シェアの多いIEで非表示というのが残念。。。今回は非推奨ではありますが、start属性で見た目的に近いもので行こうかと思います。

ORUKA1951
ベストアンサー率45% (5062/11036)

2009/02/18 19:28 回答No.8

No.6 ORUKA1951です。　IEでのチェックを忘れてました。スタイルシートを変更しても、IEではリスト番号がline-itemに連動して動かないですね。・・opera,safari,firefoxでは図のように移動します。 ol#list{ /* display:block; */ list-style-type:decimal; padding-top:0.5em ; padding-left: 2em; width:800px; height: 4.8em; /* ;ine-height×4 */ border: 1px solid red; } ol#list li{ position:relative; line-height: 1.2em; width: 240px; list-style-position:outside; display:list-item; } ol#list li.center{ top: -4.8em; /* ;ine-height×4 */ left: 266px; } ol#list li.right{ top: -9.6em; /* ;ine-height×4×2 */ left: 532px; } }

abril
ベストアンサー率69% (388/560)

2009/02/18 18:33 回答No.7

ANo.5です。以下は質問者様への補足（蛇足）の様なものですので、読み飛ばして下さって結構です。続き番号にしたいという事は、本来、一つのリストなのでしょうからHTML側の理想としてはANo.5様の様なマークアップが妥当な事は確かです。ただ、positionとheightを併用する方法だと、アイテムの数が変わる毎に当然高さも変わってきてしまうので、CSS側の値の調整・再計算が必要になってきますね。3コラムのアイテムの数をできるだけ均等に配置したい場合は、3種類のclassの割り当てをその都度変更しなければならないアイテムも出てくるでしょうし。一方、ANo.4様や私のアドバイスは1コラム毎にolを終わらせてHTML 4.01 Transitionalで非推奨のstart属性を使う方法ですし。アイテムの数の増減の際にはHTML側でのstart属性の値の変更のみで済む事は済みますが。 …まあ、どの方法を採用するかは質問者様の考え方一つで自由になさって良いのでは。floatを使う配置が間違いと定められたわけではないですし、floatにはpositionにはないメリットもありますから、特性を理解して不具合やブラウザ間の差を吸収する対処さえできるノウハウがあるのであれば別に問題ないと思います。

ORUKA1951
ベストアンサー率45% (5062/11036)

2009/02/18 17:56 回答No.6

とっても簡単に実現できますが・・・・まず、 HTMLは正しく文法どおりに書きましょう。【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここからメモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/ )］より文意から、通し番号にしたいということらしいですが、だとすると、divはおかしい、【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから <!ELEMENT OL - - (LI)+ -- ordered list --> ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Lists in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#edef-OL )］より　はっきりと、(LI)+ 一個以上のLI以外は含むことが出来ないと書かれている。　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ですので、HTMLのマークアップは、３列に表示したい場合は、下記のようになります。 <ol id="list"> <li class="left">リスト1</li> <li class="left">リスト2</li> <li class="left">リスト3</li> <li class="left">リスト4</li> <li class="center">リスト5</li> <li class="center">リスト6</li> <li class="center">リスト7</li> <li class="center">リスト8</li> <li class="right">リスト9</li> <li class="right">リスト10</li> </ol> 　正しくマークアップで来たら、その上で、スタイルシートを書きますが、この場合は、本来表示される位置からずらすのですから、position:relativeを使うべきです。　ネット上には、やたらめったらfloatを使うものがありますが、本当にトラブルの原因になったりして悩みます。基本的にfloatを使ってブロックを配置すべきではありません。floatは、画像などの周囲に文字を回りこませるなど、本来の用途に限って使うようにするとよい。 ol#list{ display:block; padding:0.5em 1em; width:800px; height: 4.8em; /* ;ine-height×4 */ border: 1px solid red; } ol#list li{ position:relative; line-height: 1.2em; width: 240px; } ol#list li.center{ top: -4.8em; /* ;ine-height×4 */ left: 266px; } ol#list li.right{ top: -9.6em; /* ;ine-height×4×2 */ left: 532px; } ★注意事項　リストの１項目が設定したサイズより長くなると、ずれます。特に訪問者が文字サイズを大きくした場合など、よって余裕を持って配置すること。

grumpy_the_dwarf
ベストアンサー率48% (1628/3337)

2009/02/18 15:37 回答No.4

非推奨なんだけど、hachi_08さんの回答をベースにしてそれぞれのリストでstart属性を使い、番号を無理矢理指定するってやり方がなきにしもあらずです。 <ol id="line1" start="1"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ol> <ol id="line2" start="4"> <li>リスト4</li> <li>リスト5</li> <li>リスト6</li> </ol> <ol id="line3" start="7"> <li>リスト7</li> <li>リスト8</li> <li>リスト9</li> </ol> 美しくないですね。

hachi_08
ベストアンサー率58% (44/75)

2009/02/18 14:07 回答No.3

#1、#2の方が仰っているように、<ol>の中に<div>はない方がいいです。 olに直接idを振るのはどうでしょうか？また、IEでリストの数字が出ない場合はCSSに ol { list-style-position:inside; } を追加してみてください。下記↓ソースを試してみて下さい。こちらで確認しましたが、Firefox・IE・Operaともに問題なく表示されたと思います。 //-------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "?http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>参考リスト</title> <style type="text/css">  </style> </head> <body> <ol id="line1"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ol> <ol id="line2"> <li>リスト4</li> <li>リスト5</li> <li>リスト6</li> </ol> <ol id="line3"> <li>リスト7</li> <li>リスト8</li> <li>リスト9</li> <li>リスト10</li> </ol> </body></html> //--------------------------------------------

質問者

補足 2009/02/18 14:21

ご回答有難う御座います。ただ、この方法だと、私が意図するような表示が出来ません。次の列に行くと再度１から表示されてしまいます。 1 4 7 2 5 8 3 6 9 の様に表示をさせたいのです。

abril
ベストアンサー率69% (388/560)

2009/02/18 13:25 回答No.2

下記の様な記述は文法違反です。 <ol> <div id="line1"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </div> <div id="line2"> （省略） </ol> olの直接の子要素として許可されているのはliのみです。まずはマークアップから修正した上で再度適切なスタイルを当てはめるべきですね。