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

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

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

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

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

本文{display:none; }

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

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

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

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

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