「段組」の版間の差分
add,cl |
|||
| 4行目: | 4行目: | ||
== 概要 == |
== 概要 == |
||
段組が行われる理由の1つとして可読性が挙げられる。一続きの文章において1行の文字数が多くなると可読性を損なうことがある |
段組が行われる理由の1つとして可読性が挙げられる。一続きの文章において1行の文字数が多くなると可読性を損なうことがある場合、段を換えて1行の文字数を適度にすることで可読性を保つことができる。また1行の文字数や区切りとして用いる[[罫線]]の種類など、段組の行い方によりデザインの幅も広がる。 |
||
出版物では書籍、雑誌、新聞などで広く用いられる手法である。[[Microsoft Word]]、[[一太郎]]など多くの[[ワープロソフト]]でも段組機能が搭載されている。 |
出版物では書籍、雑誌、新聞などで広く用いられる手法である。[[Microsoft Word]]、[[一太郎]]など多くの[[ワープロソフト]]でも段組機能が搭載されている。 |
||
| 17行目: | 17行目: | ||
}}</ref>。この意味での段組には大きく分けて[[テーブル (情報)|テーブル]]（表組み）によるものと、[[Cascading Style Sheet|CSS]]によるものがある。 |
}}</ref>。この意味での段組には大きく分けて[[テーブル (情報)|テーブル]]（表組み）によるものと、[[Cascading Style Sheet|CSS]]によるものがある。 |
||
文章が横書きの場合には縦の列に、縦書きの場合は横の列に分けることとなるが、 |
文章が横書きの場合には縦の列に、縦書きの場合は横の列に分けることとなるが、2012年現在では横書きの文章を縦の列に分割するケースに限定して取り上げられることがほとんどである。これは縦書き表示を行うために用いられるCSS3の草案にあるwriting-modeプロパティを先行実装しているWebブラウザが[[Internet Explorer]]5.5以降のみであり、縦書き表示で段組を行うサイトを製作することは事実上同ブラウザに特化したサイトとなることによる。 |
||
テーブルによる場合、[[HyperText Markup Language|HTML]]のtable要素などを用いる。 |
テーブルによる場合、[[HyperText Markup Language|HTML]]のtable要素などを用いる。[[Netscape Navigator (ネットスケープコミュニケーションズ)|Netscape Navigator]]4.x以前やInternet Explorer5.x以前をはじめとしたCSS対応が不十分な（もしくは未対応の）比較的初期の視覚系Webブラウザでもテーブルの表示には表示にほぼ対応しているため、かつては多く用いられた。一方でソースが複雑になることや、セルの分割方法によってはテキストブラウザや音声ブラウザでの閲覧の際にコンテンツの順序がおかしくなることもありユーザビリティが低くなるなどの問題がある。また本来の表組の用途から外れた使用方法でもあることから、[[World Wide Web Consortium|W3C]]は推奨していない<ref>{{Cite web |
||
|url=http://www.w3.org/TR/WAI-WEBCONTENT/ |
|url=http://www.w3.org/TR/WAI-WEBCONTENT/ |
||
|title=Web Content Accessibility Guidelines 1.0 |
|title=Web Content Accessibility Guidelines 1.0 |
||
| 33行目: | 33行目: | ||
|accessdate=2010-03-12 |
|accessdate=2010-03-12 |
||
|quote=表示上の効果として間違ったタグ付けを行うこと（レイアウトのためにテーブルを利用することや、フォントサイズを変えるために見出しを利用すること）は、特別なソフトウェアを利用しているユーザーにとって、ページの構成を理解することやサイト内を行き来することを難しくしています。 |
|quote=表示上の効果として間違ったタグ付けを行うこと（レイアウトのためにテーブルを利用することや、フォントサイズを変えるために見出しを利用すること）は、特別なソフトウェアを利用しているユーザーにとって、ページの構成を理解することやサイト内を行き来することを難しくしています。 |
||
}}</ref>が、 |
}}</ref>が、W3Cも公式サイトトップにおいてブラウザのCSS対応が不十分であったことなどからテーブルレイアウトを用いていた時期がある<ref>[http://web.archive.org/web/20021202091355/http://www.w3.org/ 2002年12月2日時点でのW3Cトップ] （WebArchiveによるキャッシュ）</ref>。 |
||
またCSSによる場合には、floatプロパティで回り込みを設定することで実現するものと、positionプロパティで各ボックスを絶対配置することで実現するものの2種類がある。例えば絶対配置による方法では、HTMLを記述する上で内容の配置順序が自由になることが回り込ませるボックスを先に記述する必要がある回り込みによる方法よりも優れているが、場合によっては後続のボックスに重なって表示されるおそれがある<ref name="ofuji" /> |
またCSSによる場合には、floatプロパティで回り込みを設定することで実現するものと、positionプロパティで各ボックスを絶対配置することで実現するものの2種類がある。いずれの方法を用いるかは場合により異なる。例えば絶対配置による方法では、HTMLを記述する上で内容の配置順序が自由になることが回り込ませるボックスを先に記述する必要がある回り込みによる方法よりも優れているが、場合によっては後続のボックスに重なって表示されるおそれがある<ref name="ofuji" />。 |
||
2012年現在ではCSS対応ブラウザの普及が進み、W3C標準にも従っているためユーザビリティの問題も少ないため、例えばGoogleやYahoo!、その他かつてはテーブルレイアウトを用いていたサイトもCSSにより段組を行うようになるなど主流になっている。一方でWebブラウザの[[バグ]]や仕様、各人の閲覧環境の違いからの影響がテーブルレイアウトよりも大きく、表示の乱れが比較的起きやすい。特に画像を配置した場合にこの傾向が顕著となる。 |
|||
他方、（出版物と同様の）本来の段組のWebブラウザ上での実装についても模索されてきた。デザインのためのものと同じくテーブルやCSSを用いて擬似的に表現することも可能だが、マークアップの観点から見ると本質的ではなく、また出版物とは異なりWebブラウザの幅は多くの場合可変である点も異なる。 |
他方、（出版物と同様の）本来の段組のWebブラウザ上での実装についても模索されてきた。デザインのためのものと同じくテーブルやCSSを用いて擬似的に表現することも可能だが、製作時に1列の行数や文字数を均等に調整するようにする必要があるためマークアップの観点から見ると本質的ではなく、また出版物とは異なりWebブラウザの幅は多くの場合可変である点も異なる。 |
||
かつては |
かつてはNetscape 3.xおよび4.xに段組用に独自拡張要素multicolが実装されたことがあり、これを用いて製作されたWebサイトは（対応Webブラウザでは）各列の文字数などが自動的に均等に調整されて表示されるが、見栄えを表現する要素であった点がHTMLの理念にそぐわなかっためか正式にHTML仕様には取り込まれず、後継となった[[Netscape (Mozillaベース)|Netscape6.x]]以降や[[Mozilla Firefox]]でも対応していない。ただし[[ジャストシステム]]が開発し、2012年現在は開発停止状態の[[JustView]]には独自に縦書き表示機能も加えmulticolを実装していた。 |
||
また草稿段階であるCSS3ではMulti-column moduleとして段組用のプロパティが用意されており、[[Mozilla]]ベースのWebブラウザや[[Safari]]など[[KHTML]]ベースのWebブラウザにおいて独自拡張プロパティとして |
また草稿段階であるCSS3ではMulti-column moduleとして段組用のプロパティが用意されており、[[Opera]]11以降で先行実装としてMulti-column moduleに対応した。[[Mozilla]]ベースのWebブラウザや[[Safari]]や[[Google Chrome]]など[[KHTML]]ベースのWebブラウザにおいても独自拡張プロパティとして実装されているが、他の先行実装プロパティ同様に将来プロパティの変更が行われる可能性もある<ref>[http://www.mozilla.gr.jp/standards/webtips0001.html Mozillaの独自拡張CSSは使わないでください] Web標準普及プロジェクト</ref>。 |
||
== 脚注 == |
== 脚注 == |
||
2012年4月27日 (金) 13:59時点における版
段組（だんぐみ）は、段を組むことを指す言葉で、特に紙などの印刷物やコンピュータ画面などにおいて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]。
2012年現在ではCSS対応ブラウザの普及が進み、W3C標準にも従っているためユーザビリティの問題も少ないため、例えばGoogleやYahoo!、その他かつてはテーブルレイアウトを用いていたサイトもCSSにより段組を行うようになるなど主流になっている。一方でWebブラウザのバグや仕様、各人の閲覧環境の違いからの影響がテーブルレイアウトよりも大きく、表示の乱れが比較的起きやすい。特に画像を配置した場合にこの傾向が顕著となる。
他方、（出版物と同様の）本来の段組のWebブラウザ上での実装についても模索されてきた。デザインのためのものと同じくテーブルやCSSを用いて擬似的に表現することも可能だが、製作時に1列の行数や文字数を均等に調整するようにする必要があるためマークアップの観点から見ると本質的ではなく、また出版物とは異なりWebブラウザの幅は多くの場合可変である点も異なる。
かつてはNetscape 3.xおよび4.xに段組用に独自拡張要素multicolが実装されたことがあり、これを用いて製作されたWebサイトは（対応Webブラウザでは）各列の文字数などが自動的に均等に調整されて表示されるが、見栄えを表現する要素であった点がHTMLの理念にそぐわなかっためか正式にHTML仕様には取り込まれず、後継となったNetscape6.x以降やMozilla Firefoxでも対応していない。ただしジャストシステムが開発し、2012年現在は開発停止状態のJustViewには独自に縦書き表示機能も加えmulticolを実装していた。
また草稿段階であるCSS3ではMulti-column moduleとして段組用のプロパティが用意されており、Opera11以降で先行実装としてMulti-column moduleに対応した。MozillaベースのWebブラウザやSafariやGoogle ChromeなどKHTMLベースのWebブラウザにおいても独自拡張プロパティとして実装されているが、他の先行実装プロパティ同様に将来プロパティの変更が行われる可能性もある[5]。
脚注
- ^ 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（エ・ビスコム・テック・ラボによる記事）
 | この項目は、コンピュータに関連した書きかけの項目です。この項目を加筆・訂正などしてくださる協力者を求めています（PJ:コンピュータ/P:コンピュータ）。 |