2005.01.21

印刷を考慮したページ作り

Webページの中の一部分の文章の表示方法を、ブラウザで見た場合と印刷して紙に出力した場合とで変えて欲しいという要望をいただくことがあります。
例えば、ブラウザの時はあらかじめ数行だけ表示されていて、ページの中のスクロールを動かすことにより、続きの文章が表示される。
印刷の場合はそれが全部表示された状態で出力したい、という時などです。

その場合はoverflowのautoとvisibleを使い分けましょう。

まず画面と印刷とで動作を分けるには、HTMLに次の2行を追加します。

<link href="aaa.css" rel="stylesheet" type="text/css" media="screen">
<link href="bbb.css" rel="stylesheet" type="text/css" media="print">

そして、aaa.cssには
.memo { width: 300px; height: 100px; overflow: auto;}

bbb.cssには
.memo {overflow: visible}
※aaa.cssで、widthとheightについてスタイルを設定しているので、bbb.cssで書かなくても継承されます。

これでブラウザで表示する際は、オーバーフローした分の文はスクロールをすると表示されます。
印刷の際は、オーバーフローした分も全て印刷される結果となります。

photo
admin