CSSで印刷するWebページをブロックする方法

ウェブページは画面上で見ることを意図している。サイト（デスクトップ、ラップトップ、タブレット、携帯電話、ウェアラブル、テレビなど）を表示するために使用できるさまざまなデバイスがありますが、それらには何らかの種類の画面が含まれています。あなたのウェブサイトを閲覧できる別の方法があります。これは画面を含まない方法です。私たちはあなたのウェブページの物理的なプリントアウトを指しています。

数年前、あなたはウェブサイトを印刷する人々がかなり一般的なシナリオであったことに気付くでしょう。ウェブを初めて使う多くのクライアントとの会合を覚えていて、サイトの印刷されたページをより快適に見直すことができました。彼らはその後、ウェブサイトを議論するためのスクリーンを見るのではなく、私たちにフィードバックと編集を行いました。人々が生活の中でスクリーンに慣れてきて、スクリーンが何度も何度も何度も繰り返されてきたように、私たちはウェブページを紙に印刷しようとする人はますます少なくなってきました。あなたはあなたのウェブサイトを計画するときにこの現象を考慮する必要があるかもしれません。人々にあなたのウェブページを印刷させますか？多分あなたはしません。その場合、いくつかの選択肢があります。

CSSで印刷するWebページをブロックする方法

人々があなたのウェブページを印刷するのを防ぐためにCSSを使用するのは簡単です。次のCSS行を含む "print.css"という1行のスタイルシートを作成するだけです。

本文{display：none; }

この1つのスタイルは、ページの "body"要素を表示しないようにします。ページのすべてがbody要素の子であるため、ページ/サイト全体が表示されません。

"print.css"スタイルシートを取得したら、それを印刷スタイルシートとしてHTMLにロードします。 HTMLページの "head"要素に次の行を追加するだけです。

この情報は、このWebページが印刷に設定されている場合、ページが画面上の表示に使用するデフォルトのスタイルシートの代わりに、このスタイルシートを使用するようブラウザに指示します。ページがこの "print.css"シートに切り替わると、ページ全体が表示されないようにするスタイルが開始され、印刷されるのは空白のページになります。

一度に1ページをブロックする

サイトの多くのページをブロックする必要がない場合は、次のスタイルをHTMLの先頭に貼り付けて、ページ単位で印刷をブロックすることができます。

このインページスタイルは、外部スタイルシート内のどのスタイルよりも高い特異性を持ちます。つまり、ページはまったく印刷されませんが、この行のない他のページは引き続き正常に印刷されます。

ブロックされたページでもっと魅力的なものを手に入れよう

印刷をブロックしたいが、あなたの顧客が欲求不満にならないようにしたい場合はどうすればよいでしょうか？空白のページが印刷されていると、プリンタやコンピュータが壊れていると思われ、本質的に印刷が無効になっていることに気付かない場合があります。

訪問者の不満を避けるために、読者がページを印刷したときに表示されるメッセージだけを表示して、他のコンテンツを置き換えることができます。これを行うには、標準のWebページを作成し、ページの上部でbodyタグの直後にput：

あなたのすべてのコンテンツが書かれた後、そのタグをページの一番下に閉じます：

次に、「noprint」divを閉じた後、ドキュメントが印刷されるときに表示するメッセージとともに別のdivを開きます。

このページはオンラインで閲覧するためのもので、印刷することはできません。このページはhttp://webdesign.about.com/od/advancedcss/qt/block_print.htmでご覧ください。

print.cssという名前の印刷CSSドキュメントへのリンクを含めます：

その文書には以下のスタイルが含まれています：

#noprint {display：none; } #print {display：block; }

最後に、標準スタイルシート（またはドキュメントヘッドの内部スタイル）に、次のように記述します。

#print {display：none; } #noprint {display：block; }

これにより、印刷メッセージは印刷ページにのみ表示され、Webページはオンラインページにのみ表示されます。

ユーザーエクスペリエンスの検討

今日のサイトはしばしば印刷されたページにうまく翻訳されないので、ウェブページを印刷することは一般に貧弱な経験である。完全に別のスタイルシートを作成して印刷スタイルを指定したくない場合は、この記事の手順を使用してページの印刷を「無効にする」ことを検討できます。 Webサイトの印刷に頼っているユーザーには、視覚障害や画面上のテキストの読み込みに苦労している可能性があるため、ユーザーのサイトの意思決定に影響を与える可能性があることに注意してください。

Jennifer Kryninのオリジナル記事。ジェレミージラール編集。