ツイート
« 2009年03月13日 | メイン | 2009年03月18日 »
2009年03月14日
コンピュータ画面での行折り返し問題、段組問題
昨日、Webを見ていましたら、「CSS 3の段組みと、その使いどころ」というブログページを見つけました。
ブラウザでの多段組レイアウトの問題点として、スクロール回数が多くなること。コンピュータの画面の大きさや縦横比のバラエティが多いので柔軟なレイアウト設計が必要とのことです。段組をコンピュータの画面上で見やすくするには、MicrosoftのXAMLビューアのように表示Windowsのサイズに合わせて再描画するような仕組みが必要です。
これはHTMLに限らず、PDFでも同じ問題がありますね。それで思い出しましたが、最近、政府の法律がPDFで公開されているのは良いですが、用紙縦使い（ポートレート）で縦書しているので読み難いったらありません。この法律PDFを画面上で読むには1行毎に上下スクロールの繰り返しが必要で、読み難さは段組の比ではありません。
さて、本題に戻りますが、そのブログページに触発されて、以前に書いたWebページ「CSSによるプリントデザイン」の内容を改訂しました。
序に自分でも段組を実践してみようと考え、印刷版の段組を使うCSSを作って指定してみました。
<link rel="stylesheet" href="../css/XMLPrint.css" media="print"/>
でリンクしてあります。
段組はスタイルシート上では、
.two-cols {
-ah-column-count: 2;
-ah-column-gap: 20pt;
｝
を指定し、HTMLコンテンツ上では、段組する範囲を
<div class="two-cols">
・・・
</div>
で囲むだけです。
一般のブラウザでは表示できませんが、AH Formatterのデモページでご覧頂くことができます。
（ちなみに、接頭辞を-moz-にするとFirefoxでも段組が働きます。）
デモページ：http://cssfo.antenna.co.jp/demo2.php
一般のサイトを見るのフォームに
http://www.antenna.co.jp/XML/xmllist/CSS-Print.html
をコピペして、URLを送信を試してみてください。
とりあえず、ローカルで作成したPDF版もリンクしておきます。
ファイルをダウンロード
これを作ってみて、「未来のWebデザイナは、きっと日本語組版と印刷ページレイアウトの勉強が必須になるだろうな。」ということを感じました。今までは、読者に読み易いページデザインをどう作るかの勉強は出版関連デザイナだけの世界だったかもしれませんが、今後は、Webを作る人も勉強が必要ということです。今後とは、CSS3が普及した時代。
投票をお願いいたします