印刷用スタイルシート@media print

ブラウザで表示するcss記述では印刷ページを制御することができないので、印刷用のスタイルシートを用意します。 方法としては、既存のcssファイルに以下の印刷用のメディアクエリの記述を追加するか、別にCSSファイルを用意します。

• 既存のCSSファイルに追加する場合

@media print{
/*ここに印刷用のセレクタを記述*/
}

• 専用のCSSファイルを用意する場合

印刷時のみに有効になるスタイルシートを別途用意して、印刷用のセレクタを記述します。print.cssというファイルを新規作成して、ページヘッダ内に以下のlinkタグを追加します。

<link rel="stylesheet" href="print.css" media="print">

overflowの修正

用意したメディアクエリにブラウザ用のCSSにoverflow:hiddenを指定されている囲いタグがあれば、修正します。

例)

.wrap{
overflow:hidden;/*←hiddenが影響してはみだしたりする*/
}

[修正後]
.wrap{
overflow:visible;/*←属性値をvisibleにする*/
}

Webページ印刷調整は@media printとoverflow:visibleが基本です。

Webページ印刷自体ができないときチェックすること

• プリンターの電源は入っているか
• プリンターとパソコンは正しく接続されているか
• プリンターの紙詰まりなど警告は表示されていないか
• ブラウザから印刷するときにプリンター一覧にプリンターの名前はあるか
• プリンターのドライバーは正しくインストールされているか
• テスト印刷はできているか

主に上の内容をチェックすれば、ホームページ印刷ができない原因が判明します。

大切な切り分け方は、2つだけです。

• これまで印刷できていたか
• はじめて印刷するか

はじめての場合はプリンターの説明書をみながらテスト印刷まで行います。
これまでできていて急にできなくなった場合は、一旦すべての機器を再起動して、上述したチェックすることをひとつづ確認していきます。 おおよその印刷トラブルは原因が一つのみなので、あれこれ設定やドライバーファイルを操作するよりも、ひとつづつ段階を追って原因を切り分けておくことが推奨されます。

Webページ印刷できない時に注意したいこと

ホームページ印刷が必要な時に、急に印刷ができない場合などはとても焦るシチュエーションがありますが、ネット検索すると

• ドライバーを最新のものに入れ直す

という情報がすごく多いです。
大抵は入れ直しても症状は改善しません。

というよりも、基本的にドライバーは一度インストールされていれば、不具合などがない限り更新や再インストールなどはあまり効果がありません。

どうしても急いでいる場合は、USBフラッシュメモリなどにホームページのスクリーンショット画像を保存して、コンビニなどでカラーコピーするほうが早い場合があります。

プリンター自体が破損していたり、ケーブル類が断線している場合などは、すぐに復旧が難しいですから、応急処置方法をいくつか用意しておくと、いざという時にあまり困らなくて済むケースが多いようです。

プリンタートラブルの原因はほぼ1つ