段組
段組(だんぐみ)は、段を組むことを指す言葉で、特に紙などの印刷物やコンピュータ画面などにおいて2列以上の列に分けて文字や図などを配列することである。マルチカラム(もしくはコラム)デザインなどとも呼ばれる。
概要
段組が行われる理由の1つとして可読性が挙げられる。一続きの文章において1行の文字数が多くなると可読性を損なうことがあるため、段を換えて1行の文字数を適度にすることで可読性を保つことがある。また1行の文字数や区切りとして用いる罫線の種類など、段組の行い方によりデザインの幅も広がる。
出版物では書籍、雑誌、新聞などで広く用いられる手法である。Microsoft Word、一太郎など多くのワープロソフトでも段組機能が搭載されている。
Webデザインにおける段組
Webサイトのデザインの際には例えばメニューなどナビゲーション部分と本文部分といった2つ以上の列に分割してコンテンツを配置することを段組と呼ぶ[1]。この意味での段組には大きく分けてテーブル(表組み)によるものと、CSSによるものがある。
文章が横書きの場合には縦の列に、縦書きの場合は横の列に分けることとなるが、2010年現在では横書きの文章を縦の列に分割するケースに限定して取り上げられることがほとんどである。これは縦書き表示を行うために用いられるCSS3の草案にあるwriting-modeプロパティを先行実装しているWebブラウザがInternet Explorer5.5以降のみであり、縦書き表示で段組を行うサイトを製作することは事実上同ブラウザに特化したサイトとなることによる。
テーブルによる場合、HTMLのtable要素などを用いる。テーブルには比較的古いWebブラウザでも表示にほぼ対応しているため、以前は多く用いられた。一方でソースが複雑になる、セルの分割方法によってはテキストブラウザや音声ブラウザでの閲覧の際にコンテンツの順序がおかしくなることもありユーザビリティが低くなるなどの問題がある。また本来の用途から外れた使用のため、W3Cは推奨していない[2][3]が、かつてはW3CもブラウザのCSS対応が不十分であったことなどから公式サイトトップにおいてテーブルレイアウトを用いていた[4]。
またCSSによる場合には、floatプロパティで回り込みを設定することで実現するものと、positionプロパティで各ボックスを絶対配置することで実現するものの2種類がある。例えば絶対配置による方法では、HTMLを記述する上で内容の配置順序が自由になることが回り込ませるボックスを先に記述する必要がある回り込みによる方法よりも優れているが、場合によっては後続のボックスに重なって表示されるおそれがある[1]ため、いずれの方法を用いるかは場合により異なる。
2010年現在ではCSS対応ブラウザの普及が進み、W3C標準に従っているためユーザビリティの問題も少ないため、例えばGoogleやYahoo!、その他かつてはテーブルレイアウトを用いていたサイトもCSSにより段組を行うようになるなど主流になっている。一方でWebブラウザのバグや仕様、各人の閲覧環境の違いからの影響がテーブルレイアウトと比較すると特に画像を配置した場合に大きい部分がある。
他方、(出版物と同様の)本来の段組のWebブラウザ上での実装についても模索されてきた。デザインのためのものと同じくテーブルやCSSを用いて擬似的に表現することも可能だが、マークアップの観点から見ると本質的ではなく、また出版物とは異なりWebブラウザの幅は多くの場合可変である点も異なる。
かつてはNetscape Navigator3.xおよび4.xに段組用に独自拡張要素multicolが実装されたことがあるが、正式にHTML仕様には取り込まれず、後継となったNetscape6.x以降やMozilla Firefoxでも対応していない。ただしジャストシステムが開発し、2010年現在は開発停止状態のJustViewには独自に縦書き表示機能も加えmulticolが採用されていた。
また草稿段階であるCSS3ではMulti-column moduleとして段組用のプロパティが用意されており、MozillaベースのWebブラウザやSafariなどKHTMLベースのWebブラウザにおいて独自拡張プロパティとして先行実装されている。ただし他の先行実装プロパティ同様に将来プロパティの変更が行われる可能性もある[5]。またOpera11以降でも(独自拡張ではない)先行実装としてMulti-column moduleに対応した。
脚注
- ^ a b 大藤幹『スタイルシートサンプル&リファレンス』ソシム、2006。ISBN 9784883375097。
- ^ “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.”
- ^ “ウェブコンテンツ・アクセシビリティ・ガイドライン 1.0”. ZSPC. 2010年3月12日閲覧。 “表示上の効果として間違ったタグ付けを行うこと(レイアウトのためにテーブルを利用することや、フォントサイズを変えるために見出しを利用すること)は、特別なソフトウェアを利用しているユーザーにとって、ページの構成を理解することやサイト内を行き来することを難しくしています。”
- ^ 2002年12月2日時点でのW3Cトップ (WebArchiveによるキャッシュ)
- ^ Mozillaの独自拡張CSSは使わないでください Web標準普及プロジェクト
外部リンク
- 『大辞泉』における定義 Yahoo!辞書
- スタイルシート(CSS)で段組を構成する AllAbout
- "いろは"の先のCSS 第8回 (いわゆる)段組について Folio Vol.08
- ウェブページの段組みをレイアウトするCSS 3のMulti Column builder by ZDNet Japan(エ・ビスコム・テック・ラボによる記事)