掲示板/スタイルシート質問板/過去ログ/一覧/ リストを途中から横の列に表示させたい

0 名前：なみ： 2007/02/08（木） 17:55 ID:cU5nXTle sub-tF: リストを

1.○○○　4.○○○
2.○○○　5.○○○
3.○○○　6.○○○

このように表示させる方法はありますでしょうか？
今までは２つのリストを作り、片方をfloatさせるなどして無理矢理表示していたのですが、
本来の意味とは違ってしまいますので、何か適当な方法がありましたらご教授お願いします。

1 名前：匿名： 2007/02/08（木） 17:55 ID:lgf8L5TP sub-Ds: 本来はどんな意味なの？２段にする明快な理由を教えて下さい。

2 名前：なみ： 2007/02/08（木） 17:55 ID:cU5nXTle sub-tF: ＞２段にする明快な理由
単純に見た目の問題なんです。下にずらずらと伸ばしたくないだけでして…。
「本来の意味とは違ってしまう」というのは、リスト項目は全てひとつのグループなのに、
２つのリストを作って並べるのでは、そのまま別のグループの項目のようにも見えてしまうということです。

ところで
<ul>
<li>1</li><li>2</li><li>3</li><br>
<li>4</li><li>5</li><li>6</li>
</ul>
---------------
li{float:left;}
br{clear:left;}

このような状態だと横並びのリストを複数行作ることができますよね。（正しいかはわかりませんが…）
横ができるのなら、縦もできるのではないか？と思ったのです。

3 名前：匿名： 2007/02/08（木） 17:55 ID:ynaz1.gE sub-Ds: それでは、見た目を取るか、本来の意味をとるかだけの話ですよ。
やり方はいろいろありますが、所詮、無理やりに変わりはない。

4 名前：匿名： 2007/02/08（木） 17:55 ID:UMe4AhfY sub-Gs: CSS3 の multicol プロパティを使えば可能。ただし、現状で先行実装しているのは Firefox 2 のみ（-moz-*）。

もしスクリプトに頼ってよいなら、
http://www.csscripting.com/css-multi-column/
のスクリプトを組み込むと、多くのブラウザで CSS3 Multi-Column モジュールの column-count、column-gap、column-rule、column-width が使えるようになる（改造すれば、他のプロパティにも対応できる）。

5 名前：なみ： 2007/02/08（木） 17:55 ID:cU5nXTle sub-tF

>>4さん

ありがとうございます。
やはり何かしらのプロパティは用意されているのですね。
実装に問題があるとはいえ、方法があることがわかっただけでも勉強になりました。

ところで、ご教示のスクリプトを使ってみたのですが、IE6では希望どおりに表示されるのですが
Firefoxでは２列にならず、１列のまま表示されてしまいます。
リンク先はもちろんFirefoxでもきちんと表示されているので、試しにexample6のページのソースを
コピーしてex.htmlとして保存したのですがやはりIEでないと２カラムになってくれません。
下記がリンク先、charsetを変更したものですがどこかに問題がありますでしょうか？
（jsやcssは変更していません。）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS" />
<title>CSS3 Multi-Colum Test Page</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" type="text/css" href="multicol.css" />
<script type="text/javascript" src="css3-multi-column.js"></script>
</head>
<body>
<div id="Content">
	<h2>CSS3 - Multi Column Layout Demonstration </h2>
	<div class="Navigation">

	    <p><a href="example1.php?">Test Case 1</a> | 
  <a href="example2.php?">Test Case 2</a>| 
  <a href="example3.php?">Test Case 3</a> | 
  <a href="example4.php?">Test Case 4</a>  | 
  <a href="example5.php?">Test Case 5</a> | 
  <a href="example6.php?">Test Case 6</a> </p> 
		  	</div>	
	<div>

	  	
	    <h4 class="p1">Contents</h4>
		<div  class="Article2Col">
			<ol>
			  <li><a href="#From_Roman_to_Julian">From Roman to Julian</a></li>
			  <li><a href="#Leap_years_error"> Leap years error</a></li>
			  <li><a href="#Naming_of_the_months">Naming of the months</a></li>

			  <li><a href="#Length_of_the_months">Length of the months</a></li>
			  <li><a href="#Year_numbering">Year numbering</a></li>
			  <li><a href="#From_Julian_to_Gregorian">From Julian to Gregorian</a></li>
			  <li><a href="#Related_articles"> Related articles</a></li>
			  <li><a href="#External_links"> External links</a></li>

			</ol>
	  </div>
  </div>
	<div id="Output"></div>

</div>

</body>
</html>