印刷も考慮したhtml/cssのデザイン

普通の人は、ブラウザの見た目を印刷にも求めてしまう。
わたしはスタイルなしでもいいかと思うときもあるのだが、そうはいかない。

• IEの詳細設定オプション(Firefoxのページ設定もかな？)では、背景と色の印刷はOFFになっている？ので背景がなくてもそれなりに印刷できるようにする必要がありそう。
• スタイルで画像を背景にする理由は画像の上に文字を表示したい場合や、今回のようにCSSで画像のロールオーバーを実現したい場合など。
• 背景で指定した画像は印刷時、うまいことリサイズされないときがある。

そのため、以下のようにする。

• 背景にしなくてもいいところはhtml中で、img要素を使う。
• CSSでの画像ロールオーバーはそのまま背景とbackground-positionで実現する。ただし、印刷のことも考えて以下のようにする。
  • html中にimg要素を記述して画面表示のときにはそれを表示させない(display: none;)。
  • 印刷の場合(@media print)のときには、その画像を表示(表示領域をwidth/heightで指定し、表示させたくない部分はoverflow: hidden;)

以下ではul/liでのCSSロールオーバーナビゲーションメニューとh2に指定したCSSロールオーバータイトル。ulに指定した画像は1つで全てのメニューを構成している場合で、h2の画像はそれぞれ別画像である。

#nav {
  clear: both;
  float: none;
  height: 24px;
  margin: 0px;
  padding: 0px;
  width: 650px;
  background-image: url(../IMG/top_navi.gif);
  background-repeat: no-repeat;
}
ul#nav li {
  list-style: none;
  display: block;
  margin: 0;
  padding: 0;
  text-indent: -9999px;
  height: 24px;
  float: left;
}
ul#nav li a {
  display: block;
  padding: 0;
  height: 24px;
  text-decoration: none;
  background-image: url(../IMG/top_navi.gif);
  background-repeat: no-repeat;
}
ul#nav li#nav00  { width:  90px; }
ul#nav li#nav01  { width:  70px; }
ul#nav li#nav02  { width: 100px; }
ul#nav li#nav03  { width:  70px; }
ul#nav li#nav04  { width:  80px; }
ul#nav li#nav05  { width:  70px; }
ul#nav li#nav06  { width:  90px; }

ul#nav li#nav00 a  { background-position:      0 0; }
ul#nav li#nav01 a  { background-position:  -90px 0; }
ul#nav li#nav02 a  { background-position: -160px 0; }
ul#nav li#nav03 a  { background-position: -260px 0; }
ul#nav li#nav04 a  { background-position: -330px 0; }
ul#nav li#nav05 a  { background-position: -410px 0; }
ul#nav li#nav06 a  { background-position: -480px 0; }

ul#nav li#nav00 a:hover  { background-position:      0 100%; }
ul#nav li#nav01 a:hover  { background-position:  -90px 100%; }
ul#nav li#nav02 a:hover  { background-position: -160px 100%; }
ul#nav li#nav03 a:hover  { background-position: -260px 100%; }
ul#nav li#nav04 a:hover  { background-position: -330px 100%; }
ul#nav li#nav05 a:hover  { background-position: -410px 100%; }
ul#nav li#nav06 a:hover  { background-position: -480px 100%; }

ul#nav li#nav00.current-page  { background: url(../IMG/top_navi.gif)       0 100%; }
ul#nav li#nav01.current-page  { background: url(../IMG/top_navi.gif)   -90px 100%; }
ul#nav li#nav02.current-page  { background: url(../IMG/top_navi.gif)  -160px 100%; }
ul#nav li#nav03.current-page  { background: url(../IMG/top_navi.gif)  -260px 100%; }
ul#nav li#nav04.current-page  { background: url(../IMG/top_navi.gif)  -330px 100%; }
ul#nav li#nav05.current-page  { background: url(../IMG/top_navi.gif)  -410px 100%; }
ul#nav li#nav06.current-page  { background: url(../IMG/top_navi.gif)  -480px 100%; }

ul#nav li#nav00 a img { display: none; }

....

h2#topnav-01, h2#topnav-02, h2#topnav-03, h2#topnav-04, h2#topnav-05 {
  display: block;
  margin: 0px;
  padding: 0px;
  width:  650px;
  height: 60px;
}
h2#topnav-01 a, h2#topnav-02 a, h2#topnav-03 a, h2#topnav-04 a, h2#topnav-05 a {
  display: block;
  margin: 0px;
  padding: 0px;
  width: 650px;
  height: 60px;
}
h2#topnav-01 a { background: url(../IMG/top_menu-01.gif) no-repeat scroll 0 0; }
h2#topnav-02 a { background: url(../IMG/top_menu-02.gif) no-repeat scroll 0 0; }
h2#topnav-03 a { background: url(../IMG/top_menu-03.gif) no-repeat scroll 0 0; }
h2#topnav-04 a { background: url(../IMG/top_menu-04.gif) no-repeat scroll 0 0; }
h2#topnav-05 a { background: url(../IMG/top_menu-05.gif) no-repeat scroll 0 0; }

h2#topnav-01 a:hover, h2#topnav-02 a:hover, h2#topnav-03 a:hover,
h2#topnav-04 a:hover, h2#topnav-05 a:hover {
  background-position: -650px 0;
}
h2#topnav-01 a img, h2#topnav-02 a img, h2#topnav-03 a img,
h2#topnav-04 a img, h2#topnav-05 a img {
  display: none;
}

@media print {
  ul#nav { width: 650px; height: 24px; overflow: hidden; }
  ul#nav li#nav00 {
    width: 650px;
    height: 24px;
    overflow: hidden;
  }
  ul#nav li#nav00 a img { display: block; }
  h2#topnav-01, h2#topnav-02, h2#topnav-03, h2#topnav-04, h2#topnav-05 {
    width: 650px;
    height: 60px;
    overflow: hidden;
  }
  h2#topnav-01 a img, h2#topnav-02 a img, h2#topnav-03 a img,
  h2#topnav-04 a img, h2#topnav-05 a img {
    display: block;
  }
}

....

<ul id="nav">
<li id="nav00" title="ホーム"><a href="#"><img src="IMG/top_navi.gif" width="650" height="48" alt="ホーム" title="ホーム"></a></li>
<li id="nav01" title="お知らせ"><a href="#">お知らせ</a></li>
<li id="nav02" title="ナビ02"><a href="#">ナビ02</a></li>
<li id="nav03" title="ナビ03"><a href="#">ナビ03</a></li>
<li id="nav04" title="ナビ04"><a href="#">ナビ04</a></li>
<li id="nav05" title="アクセス"><a href="#">アクセス</a></li>
<li id="nav06" title="お問い合わせ"><a href="#">お問い合わせ</a></li>
</ul>

....

<h2 id="topnav-01" title="見出し02"><a href="#"><img src="IMG/top_menu-01.gif" 
	width="1300" height="60" alt="見出し02" title="見出し02"></a></h2>
<h2 id="topnav-02" title="見出し03"><a href="#"><img src="IMG/top_menu-02.gif" 
	width="1300" height="60" alt="見出し03" title="見出し03"></a></h2>
<h2 id="topnav-03" title="見出し04"><a href="#"><img src="IMG/top_menu-03.gif" 
	width="1300" height="60" alt="見出し04" title="見出し04"></a></h2>
<h2 id="topnav-04" title="アクセス"><a href="#"><img src="IMG/top_menu-04.gif" 
	width="1300" height="60" alt="アクセス" title="アクセス"></a></h2>
<h2 id="topnav-05" title="お問い合わせ"><a href="#"><img src="IMG/top_menu-05.gif" 
	width="1300" height="60" alt="お問い合わせ" title="お問い合わせ"></a></h2>

これで、一応、IE6/IE7/Firefox2ではなんとか我慢できる範囲に印刷ができそう。

見た目通りに印刷できるようにして欲しいな。＞各ブラウザ