SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

特集記事

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

CSSレイアウトとメディアタイプ

  • X ポスト
  • このエントリーをはてなブックマークに追加

 これからCSSをはじめるWeb開発者向けに、CSSレイアウトの基本から、印刷制御の方法を紹介します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 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で表示
印刷プレビューした画面

次のページ
CSSで段組みレイアウトの方法はいろいろ

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
特集記事連載記事一覧

もっと読む

この記事の著者

小濱 良恵(コハマ ヨシエ)

Microsoft MVP for Expression WebMSソフトの解説書やWeb記事を執筆するテクニカルライター。Expression Webの前身となるFrontPageは2000バージョンから使用しはじめ、個人サイト(www.wanichan.com) においてFrontPageやExpression Webをはじめ、Microsoft Office全般などの総合情報&T...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/3969 2009/06/19 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング