コンテンツのみ印刷するようにCSSで制御してみよう

はじめに

　Web開発者にとって、XHTML+CSSで構成されたWebページ作成の基礎知識は避けて通れません。「CSSってデザイナーがやることじゃないの？」と思うかも知れませんが、プログラマこそ、CSSのマークアップを理解する必要があると筆者は考えています。とりわけ、デザインも担当するWeb開発者も少なくありません。

　また、Webページを印刷する場合、コンテンツのみ印刷したいけど、Firefoxでは右端が切れてうまく印刷できずに困ったことはありませんか？

　そこで本稿では、CSSの特長や概要をはじめ、どのブラウザからでも思い通りにコンテンツのみ印刷するようにCSSで制御する方法を解説します。

対象読者

• CSSに移行したいが、思い通りにいかずに結局テーブルレイアウトに頼っているWeb開発者
• Firefoxでも右端が途切れることなく印刷できるように対処したい方

CSSでレイアウトするメリット

　CSSレイアウトにするメリットとして、以下の点が挙げられます。ここでは、よく使われているテーブルレイアウトとの比較をまとめてみます。

• コンテンツによって横幅が広がったりしない
• デザインの変更・管理がラクラク
• 読み込みが速くなる
• コンテンツを先に記述できる
• 印刷制御が行える

コンテンツによって横幅が広がったりしない

　テーブルレイアウトの場合、等倍フォントでない限り、たとえセルの横幅を指定したとしても、実際にその幅より広くなることがあります。すべて日本語のテキストであれば問題がないのですが、アルファベットや記号が混在したコンテンツの場合、そのセルの幅が広がってしまうのです。よって、コンテンツによって全体の横幅が揃わないといった問題が発生してしまいます。

　CSSレイアウトにすると、コンテンツテキストによって横幅が広がったりしないので、全体的に統一された見映えの良いレイアウトになります。

デザインの変更・管理がラクラク

　CSSレイアウトにすると、Webサイト全体のリニューアルの時にそれぞれの要素の色や背景、配置方法を一新できます。とりわけ、CSSセレクタの定義を書き換えるだけで、メニューの配置を左側から右側、もしくはその逆に変更することも可能です。すべての要素を一元管理できるので、デザインの変更や管理がスムーズになります。

読み込みが速くなる

　テーブルをレイアウト枠の代わりとして作成されたWebページでは、ブラウザはそのテーブルの中身すべての情報を読み込んでから表示する仕組みを持っているため、何らかの原因により途中で切断すると、結局Webページの内容が表示できなくなってしまいます。Webページが徐々に表示されるのではなく、テーブル内にどれだけのボリュームがあるのかをブラウザ側ですべて読み込んで判断した後で表示するので、それだけ時間がかかってしまうのです。

　一方、CSSにすると、Webページを徐々に表示していきます。いったんキャッシュに保存されたCSSファイルが存在すると、そのCSSファイルをそのキャッシュから読み込むことになるので、読み込みが速くなり、Webページの軽量化にもつながります。

コンテンツを先に記述できる

　テーブルレイアウトの場合は、左上から右下に順番に読み込みます。視覚に障害を持つ人が利用する音声読み上げブラウザでコンテンツを利用する場合、セルの配置状態によっては、意図しない順番に読み上げられてしまう場合があります。しかし、CSSにすると、音声読み上げブラウザにも対応でき、読み込ませたい順番通りに記述できます。また、PDAや古いブラウザ、もしくはCSSを無効にして表示した場合、CSSの場合はコンテンツを先に記述することによって、スクロールしなくてもすぐにコンテンツを読むことができるので、利用者にとってストレスのないサイトになります。

印刷制御が行える

　Webページをとりあえず印刷してあとでじっくり読みたいという利用者も存在します。テーブルレイアウトの場合、メニューやコンテンツすべてまとめて印刷されます。しかし、CSSレイアウトのメニューなどの不要なセクションを印刷しないように設定することができるので、利用者にとって使い勝手が良いサイトになります。

筆者のサイトをIE7で表示

印刷プレビューした画面