Webデザインにおける段組
出典: フリー百科事典『ウィキペディア（Wikipedia）』 (2021/07/07 00:47 UTC 版)
Webサイトのデザインの際には例えばメニューなどナビゲーション部分と本文部分といった2つ以上の列に分割してコンテンツを配置することを段組と呼ぶ。この意味での段組には大きく分けてテーブル（表組み）によるものと、CSSによるものがある。 文章が横書きの場合には縦の列に、縦書きの場合は横の列に分けることとなるが、2012年現在では横書きの文章を縦の列に分割するケースに限定して取り上げられることがほとんどである。これは縦書き表示を行うために用いられるCSS3の草案にあるwriting-modeプロパティを先行実装しているWebブラウザがInternet Explorer5.5以降のみであり、縦書き表示で段組を行うサイトを製作することは事実上同ブラウザに特化したサイトとなることによる。 テーブルによる場合、HTMLのtable要素を用いる。Netscape Navigator4.x以前やInternet Explorer5.x以前をはじめとしたCSS対応が不十分な（もしくは未対応の）比較的初期の視覚系Webブラウザでもテーブルの表示にはほぼ対応しているため、かつては多く用いられた。一方でソースが複雑になることや、セルの分割方法によってはテキストブラウザや音声ブラウザでの閲覧の際にコンテンツの順序がおかしくなることもありユーザビリティが低くなるなどの問題がある。また本来の表組の用途から外れた使用方法でもあることから、W3Cは推奨していないが、W3Cも公式サイトトップにおいてブラウザのCSS対応が不十分であったことなどからテーブルレイアウトを用いていた時期がある。 またCSSによる場合には、floatプロパティで回り込みを設定することで実現するものと、positionプロパティで各ボックスを絶対配置することで実現するものの2種類がある。いずれの方法を用いるかは場合により異なる。例えば絶対配置による方法では、HTMLを記述する上で内容の配置順序が自由になることが回り込ませるボックスを先に記述する必要がある回り込みによる方法よりも優れているが、場合によっては後続のボックスに重なって表示されるおそれがある。 2013年現在ではCSS対応ブラウザの普及が進み、W3C標準にも従っているため非視覚系Webブラウザ等に対してもユーザビリティの問題が少ないため、例えばGoogleやYahoo!、その他かつてはテーブルレイアウトを用いていたサイトもCSSにより段組を行うようになるなど主流になっている。一方でWebブラウザのバグや仕様、各人の閲覧環境の違いからの影響がテーブルレイアウトよりも大きく、表示の乱れが比較的起きやすい。特に画像を配置した場合にこの傾向が顕著となる。 他方、（出版物と同様の）本来の段組のWebブラウザ上での実装についても模索されてきた。Webブラウザの幅は出版物とは異なり多くの場合可変である点が異なる。（本来の）段組をWebブラウザ上でもデザインのためのものと同じくテーブルやCSSを用いて擬似的に表現することも可能だが、製作時にコンテンツをいくつかのセルやブロックレベル要素に分ける必要があるためマークアップの観点から見ると本質的ではない。また1列の行数や文字数は均等に自動調整はされず、手動で適宜調整する必要もある。 かつてはNetscape 3.xおよび4.xに段組用に独自拡張要素multicolが実装されたことがあり、これを用いて製作されたWebサイトは（対応Webブラウザでは）各列の文字数などが自動的に均等に調整されて表示されるが、見栄えを表現する要素であった点がHTMLの理念にそぐわなかったためか正式なHTML仕様には取り込まれず、後継となったNetscape6.x以降やMozilla Firefoxでも対応していない。ただしジャストシステムが開発し、2013年現在は開発停止状態のJustViewには独自に縦書き表示機能も加えmulticolを実装していた。 また草稿段階であるCSS3ではMulti-column moduleとして段組用のプロパティが用意されており、2013年現在ではOpera、MozillaベースのWebブラウザやSafariやGoogle ChromeなどKHTMLベースのWebブラウザMulti-column moduleに先行実装として対応している。さらにCSS3ではdisplayプロパティの値として"box"が追加され（フレキシブル・ボックス）、CSS2で回り込みや絶対配置を用いて実現していたのと同等以上のことも可能になっている。こちらもOpera、Mozillaベース、KHTMLベースなどで先行実装されている。
※この「Webデザインにおける段組」の解説は、「段組」の解説の一部です。
「Webデザインにおける段組」を含む「段組」の記事については、「段組」の概要を参照ください。
- Webデザインにおける段組のページへのリンク
