HTML5での段組

Question

以前、こちらでHTML5では段組を意識しないで済む
工夫が用意されていると見かけました。

現在、div.fig{width:500px;float:left}・・・
とかで段組しているサイトが圧倒的かと思います。

このfloat:leftがなくなって専用の何かができると
思っているのですが、具体的にどう変わりますか？

ORUKA1951 · Accepted Answer

　複数のブロックを「段組もどき」で配置することと、記事を段組することの違いはきちんと区別してください。本来の段組は、長い記事を一行８０文字とかで表示すると目で追うのが大変なので、４０文字の二段に段組して、二つの段にテキストを流し込むことを言います。そとと3では、それが用意されます。 CSS Multi-column Layout Module ( http://www.w3.org/TR/2011/CR-css3-multicol-20110412/ ) 　これは、文書構造上、記事自体は連続しているものをプレゼンテーションで二段に分けるという問題なので、HTMLではなくCSSで指定すべきですから、HTML5だろうとHTML6だろうとHTMLには用意されないでしょう。　さて、本題のブロックを並べる方法ですが、HTML5で　

記事見出し

章見出し

　　　・・記事・・　　

章見出し

　　　・・記事・・　　

章見出し

　　　・・記事・・　　

　というHTMLがある場合、body>section内のdiv.tableContentは、body>sectionの左横に置き、footer navは、ページの右に置く。本文の章はウィンドウの巾によって一段から３段に段組して表示する・・・なんてことが、文書構造を変更せずに出来るようになるでしょう。　

tep0607 · Answer

ボックスを並べるためのfloatはほぼ必要なくなります。

displayの属性にboxという要素が追加されています。

#aaa{display:box;}

と言う要素を持った親要素を作成した場合、
子要素のボックス要素（主にdiv）はfloatをかけなくても
横幅が余っていれば、回り込んで配置されます。
さらに、heightも並んでいる要素の中で最も大きい要素と自然に揃えてくれます。

IEの対応が待ち遠しいですね。

参考URL：http://www.css-lecture.com/log/css3/css3-layout-box.html

ORUKA1951 · Answer

HTML5自体で変わるわけではありません。 HTML4.01で　　

だったものが、　

　と文書構造を示すclass名をつけなくても、文書構造を示せる要素が導入された以上の変更があるわけではありません。「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」 ↓ 「HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」　段組(Columns)とは、本来の意味は文字通り段組です。新聞記事が段組されているため一行の文字数を長くしないで何段もの段に自動的に文字が振り分けられて並べることが本来の段組です。HTML(Web)において多用されるtableやabsoluteを使用する方法は、本来の段組ではありません。　HTML5で段組をというのは誤解で、CSS3で「段組が可能になった」を誤解されているのではないですか？　CSS3で導入されるcolumns(column-width,column-count)、column-rule(column-gap,column-rule,column-rule-color,column-rule-style,column-rule-width)、break-after,break-before,break-inside、column-span,column-fillと言った段組に関わるプロパティは、本来の意味での段組です。

・・・

・・・・

で、・・・・・・・・・　　左下より・・・・・・・・・・・・・・・　　・・・・・・・・・・・・・・・・・・・　　・・・・・・・・・・・・・・・・・・・　　・・・・・・・・・・・・・・・・・・・　　・・・・・・・・・・・・・・・・・・・　　・・・・・・・・・・・・・・・・右上へ　　・・・・・・・・・・のように段組されます。　以前、floatによる段組について - Webデザイン・CSS - 教えて！goo ( http://oshiete.goo.ne.jp/qa/7079628.html#a3 )で回答したことがあるのですが、確かにfloatで配置する方法が多いのは事実ですが、本来はabsoluteで配置するほうがよいと思っています。それは、上記リンク先で参照しているWikiの記事の「Webデザインにおける段組 ( http://ja.wikipedia.org/wiki/%E6%AE%B5%E7%B5%84#Web.E3.83.87.E3.82.B6.E3.82.A4.E3.83.B3.E3.81.AB.E3.81.8A.E3.81.91.E3.82.8B.E6.AE.B5.E7.B5.84 )」に詳しいので省きます。　いずれにしても、 [本来の段組--次の段にテキストを回り込ませる]を、文書構造を崩さずに、きちんと段組をするためには古いブラウザを無視してCSS3でデザインすると言うことになると思います。

HTML5での段組

複数のブロックを「段組もどき」で配置することと、記事を段組することの違いはきちんと区別してください。

ボックスを並べるためのfloatはほぼ必要なくなります。

HTML5自体で変わるわけではありません。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

　複数のブロックを「段組もどき」で配置することと、記事を段組することの違いはきちんと区別してください。