HTML 5 にて、リストを縦横に並べたい

質問

HTML5にて、リストを以下のように並べたいのですが、方法を教えていただけないでしょうか。

よろしくお願いいたします。

【ブロック 1】　　　　　【ブロック 3】　　　　【ブロック5】
・AAAAAA　　　　　　・KKKKKKK　　　　 ・UUUUUUU
・BBBBBB　　　　　　・LLLLLLL　　　　　・VVVVVVV　
・CCCCCC　　　　　 ・MMMMMM　　　　・WWWWWW
・DDDDDDD　　　　　・NNNNNNN ・XXXXXXX
・EEEEEEE　　　　　 ・OOOOOOO ・YYYYYYYY

【ブロック2】　　　　　【ブロック 4】　　　　【ブロック 6】
・FFFFFF　　　　　　・PPPPPPPP　　　　・4444444
・GGGGGG　　　　　・QQQQQQQQ　　　・ZZZZZZZZ
・HHHHHHH　　　　 ・RRRRRRRR　　　　・１１１１１１
・IIIIIIIIIIIIIIII　　　　　・SSSSSSSS　　　　・２２２２２２
・JJJJJJJJ　　　　・TTTTTTTTT　　　　 ・３３３３３３

ここで、例えば、ブロック1 は、以下のようになっています。

<ul>
<li>AAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
<li>EEEEEE</li>
</ul>

回答No.1

ORUKA1951 · ベストアンサー

確かにHTML5と言えなくもないですが、HTML5は【意味的な】文書構造しか書きませんから、「以下のように並べたいのですが、」--どのようにプレゼンテーションするかとは分けないと。
　これは、CSS3の範疇です。

　CSS3には、Multi-column Layout モジュールと、Flexible Box Layout モジュールがあります。前者は、文字通り段組で列数にしたがって一列目から流し込んでいきます。後者は３つの縦ブロックを使います。
　ただ、いまだに50%弱のシェアのあるIE8以下の存在を考えるとCSS3はまだ早いかもしれません。

　このようなリストで内容の大きさがある程度わかっている場合は、
<section>
　<section>
　　<ul>
　　　<li></li>
　　　<li></li>
　　</ul>
　　<ul>
　　　<li></li>
　　　<li></li>
　　</ul>
　　<ul>
　　　<li></li>
　　　<li></li>
　　</ul>
　</section>
　<section>
　　<ul>
　　　<li></li>
　　　<li></li>
　　</ul>
　　<ul>
　　　<li></li>
　　　<li></li>
　　</ul>
　　<ul>
　　　<li></li>
　　　<li></li>
　　</ul>
　</section>
　<section>
　　<ul>
　　　<li></li>
　　　<li></li>
　　</ul>
　　<ul>
　　　<li></li>
　　　<li></li>
　　</ul>
　　<ul>
　　　<li></li>
　　　<li></li>
　　</ul>
　</section>
</section>
に対して、
section{position:relative;width:100%;}
section section{width:32%;margin:0 33%;}
section section+section{position:absolute;top:0;left:0;margin:0;}
section section+section+section{right:0;}
とかのほうが実用的でしょう。

お礼

回答ありがとうございました。助かりました。