- ベストアンサー
HTML5での段組
以前、こちらでHTML5では段組を意識しないで済む 工夫が用意されていると見かけました。 現在、div.fig{width:500px;float:left}・・・ とかで段組しているサイトが圧倒的かと思います。 このfloat:leftがなくなって専用の何かができると 思っているのですが、具体的にどう変わりますか？
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
複数のブロックを「段組もどき」で配置することと、記事を段組することの違いはきちんと区別してください。本来の段組は、長い記事を一行８０文字とかで表示すると目で追うのが大変なので、４０文字の二段に段組して、二つの段にテキストを流し込むことを言います。そとと3では、それが用意されます。 CSS Multi-column Layout Module ( http://www.w3.org/TR/2011/CR-css3-multicol-20110412/ ) これは、文書構造上、記事自体は連続しているものをプレゼンテーションで二段に分けるという問題なので、HTMLではなくCSSで指定すべきですから、HTML5だろうとHTML6だろうとHTMLには用意されないでしょう。 さて、本題のブロックを並べる方法ですが、HTML5で <body> <header> </header> <section> <h2>記事見出し</h2> <div id="tableContent"><!-- 目次 --></div> <section> <h3>章見出し</h3> ・・記事・・ </section> <section> <h3>章見出し</h3> ・・記事・・ </section> <section> <h3>章見出し</h3> ・・記事・・ </section> </section> <footer> <nav id="sitmap"></div> </footer> </body> というHTMLがある場合、body>section内のdiv.tableContentは、body>sectionの左横に置き、footer navは、ページの右に置く。本文の章はウィンドウの巾によって一段から３段に段組して表示する・・・なんてことが、文書構造を変更せずに出来るようになるでしょう。
その他の回答 (2)
- tep0607
- ベストアンサー率0% (0/1)
ボックスを並べるためのfloatはほぼ必要なくなります。 displayの属性にboxという要素が追加されています。 #aaa{display:box;} と言う要素を持った親要素を作成した場合、 子要素のボックス要素（主にdiv）はfloatをかけなくても 横幅が余っていれば、回り込んで配置されます。 さらに、heightも並んでいる要素の中で最も大きい要素と自然に揃えてくれます。 IEの対応が待ち遠しいですね。
お礼
どうも情報提供有り難うございます。 これだと教えてgooのようなサイドメニューとかには 対応できそうもありませんが、 取り敢えずclearfix系の呪縛からは解放されそうですね。 HTMLにはまだ完全に慣れきってないので 頓珍漢なことを言っていたらご指摘お願いします。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTML5自体で変わるわけではありません。 HTML4.01で <body> <div class="header"> <div class="nav"></div> </div> <div class="section"> </div> <div class="figure"> </div> </body> だったものが、 <body> <header> <nav></nav> </header> <section> </section> <footer> </footer> </body> と文書構造を示す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と言った段組に関わるプロパティは、本来の意味での段組です。 <div style="width: 600px;column-width:290px;"> <p>・・・</p> <p>・・・</p> ・・・・ </div> で、 ・・・・・・・・・ 左下より・・・・・・ ・・・・・・・・・ ・・・・・・・・・・ ・・・・・・・・・ ・・・・・・・・・・ ・・・・・・・・・ ・・・・・・・・・・ ・・・・・・・・・ ・・・・・・・・・・ ・・・・・・・・・ ・・・・・・・・・・ ・・・・・・右上へ ・・・・・・・・・・ のように段組されます。 以前、floatによる段組について - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7079628.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でデザインすると言うことになると思います。
お礼
ご回答有り難うございます。 そういえばリンク先でも私も回答してますね＾＾； 以前から時折ROMっていたので ORUKA1951さんがabsolute派というのは知っています。 それでORUKA1951さんがよく仰っていた sectionやarticleやfigureといったタグに段組の仕組みが あるのかなと思ったのですが、そうでもないらしい。 段組をどのように文書構造に反映させていくんだろうと思ってました。 段組はあくまでレイアウトということですね。 columnsという属性で指定していくのですか。 HTML5で段組が可能になったというのは 他のベテランの方の記述を見て、そうなのかと思いました。 ただ、その時は漠然と認識していたため、勘違いがあるかもしれません。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
ソースまでご提供頂き、まことに済みません。 段組とdivブロックを並べることの違いは、以前にお聞きして把握しています。 一般企業としてはやはりdivブロックを並べたレイアウトに関心があります。 用語で専門家の方と齟齬が生じたのは申し訳ありません。 他の用語も全く思いつかなかったので敢えて段組と表現しました。