段組

ウィキペディアにおける段組については、「Category:段組みテンプレート」をご覧ください。

2段組の例

段組（だんぐみ）は、段を組むことを指す言葉で、特に紙などの印刷物やコンピュータ画面などにおいて2列以上の列に分けて文字や図などを配列することである。マルチカラム（もしくはコラム）デザインなどとも呼ばれる。

概要

段組が行われる理由の1つとして可読性が挙げられる。一続きの文章において1行の文字数が多くなると可読性を損なうことがある場合、段を換えて1行の文字数を適度にすることで可読性を保つことができる。また1行の文字数や区切りとして用いる罫線の種類など、段組の行い方によりデザインの幅も広がる。

出版物では書籍、雑誌、新聞などで広く用いられる手法である。Microsoft Word、一太郎など多くのワープロソフトでも段組機能が搭載されている。

→「組版」を参照

Webデザインにおける段組

Webサイトのデザインの際には例えばメニューなどナビゲーション部分と本文部分といった2つ以上の列に分割してコンテンツを配置することを段組と呼ぶ^[1]。この意味での段組には大きく分けてテーブル（表組み）によるものと、CSSによるものがある。

文章が横書きの場合には縦の列に、縦書きの場合は横の列に分けることとなるが、2012年現在では横書きの文章を縦の列に分割するケースに限定して取り上げられることがほとんどである。これは縦書き表示を行うために用いられるCSS3の草案にあるwriting-modeプロパティを先行実装しているWebブラウザがInternet Explorer5.5以降のみであり、縦書き表示で段組を行うサイトを製作することは事実上同ブラウザに特化したサイトとなることによる。

テーブルによる場合、HTMLのtable要素を用いる。Netscape Navigator4.x以前やInternet Explorer5.x以前をはじめとしたCSS対応が不十分な（もしくは未対応の）比較的初期の視覚系Webブラウザでもテーブルの表示にはほぼ対応しているため、かつては多く用いられた。一方でソースが複雑になることや、セルの分割方法によってはテキストブラウザや音声ブラウザでの閲覧の際にコンテンツの順序がおかしくなることもありユーザビリティが低くなるなどの問題がある。また本来の表組の用途から外れた使用方法でもあることから、W3Cは推奨していない^[2][3]が、W3Cも公式サイトトップにおいてブラウザのCSS対応が不十分であったことなどからテーブルレイアウトを用いていた時期がある^[4]。

またCSSによる場合には、floatプロパティで回り込みを設定することで実現するものと、positionプロパティで各ボックスを絶対配置することで実現するものの2種類がある。いずれの方法を用いるかは場合により異なる。例えば絶対配置による方法では、HTMLを記述する上で内容の配置順序が自由になることが回り込ませるボックスを先に記述する必要がある回り込みによる方法よりも優れているが、場合によっては後続のボックスに重なって表示されるおそれがある^[1]。

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ベースなどで先行実装されている。

脚注

[脚注の使い方]

1. ^ 大藤幹『スタイルシートサンプル&リファレンス』ソシム、2006年。ISBN 9784883375097。 
2. “Web Content Accessibility Guidelines 1.0” (英語). W3C. 2010年3月12日閲覧。 “Misusing markup for a presentation effect (e.g., using a table for layout or a header to change the font size) makes it difficult for users with specialized software to understand the organization of the page or to navigate through it.”
3. “ウェブコンテンツ・アクセシビリティ・ガイドライン 1.0”. ZSPC. 2010年3月12日閲覧。 “表示上の効果として間違ったタグ付けを行うこと（レイアウトのためにテーブルを利用することや、フォントサイズを変えるために見出しを利用すること）は、特別なソフトウェアを利用しているユーザーにとって、ページの構成を理解することやサイト内を行き来することを難しくしています。”
4. 2002年12月2日時点でのW3Cトップ （WebArchiveによるキャッシュ）

外部リンク

• スタイルシート(CSS)で段組を構成する AllAbout
• "いろは"の先のCSS 第8回 （いわゆる）段組について Folio Vol.08
• ウェブページの段組みをレイアウトするCSS 3のMulti Column builder by ZDNet Japan（エ・ビスコム・テック・ラボによる記事）