面白い

Webページに印刷ボタンまたはリンクを追加する方法

Webページに印刷ボタンまたはリンクを追加する方法

CSS(カスケードスタイルシート)を使用すると、Webページのコンテンツを画面に表示する方法をかなり制御できます。このコントロールは、Webページが印刷されるときなど、他のメディアにも拡張されます。

Webページに印刷機能を追加する理由を疑問に思うかもしれません。結局のところ、ほとんどの人は、ブラウザのメニューを使用してWebページを印刷する方法をすでに知っているか、簡単に理解できます。

しかし、ページに印刷ボタンまたはリンクを追加すると、ユーザーがページを印刷する必要があるときにプロセスが簡単になるだけでなく、おそらくさらに重要なことには、それらの印刷の表示方法をより詳細に制御できる状況があります紙。

ページに印刷ボタンまたは印刷リンクのいずれかを追加する方法、およびページコンテンツのどの部分を印刷し、どの部分を印刷しないかを定義する方法は次のとおりです。

印刷ボタンを追加する

ボタンを表示するHTMLドキュメントに次のコードを追加することにより、Webページに印刷ボタンを簡単に追加できます。

onclick = "window.print(); return false;" />

ボタンには次のラベルが付けられますこのページを印刷Webページに表示されるとき。次の引用符の間のテキストを変更することにより、このテキストを好きなようにカスタマイズできます

値=上記のコードで。
テキストの前後に1つの空白スペースがあることに注意してください。これにより、テキストの端と表示されるボタンの端の間にスペースが挿入され、ボタンの外観が改善されます。

印刷リンクを追加する

Webページに簡単な印刷リンクを追加するのはさらに簡単です。リンクを表示するHTMLドキュメントに次のコードを挿入するだけです。

印刷する

「印刷」を選択したものに変更することにより、リンクテキストをカスタマイズできます。

特定のセクションを印刷可能にする

ユーザーが印刷ボタンまたはリンクを使用して、Webページの特定の部分を印刷する機能を設定できます。これを行うには、 print.css サイトにファイルを作成し、HTMLドキュメントのヘッドで呼び出してから、クラスを定義することで簡単に印刷できるようにするセクションを定義します。

最初に、HTMLドキュメントのheadセクションに次のコードを追加します。

type = "text / css" media = "print" />

次に、という名前のファイルを作成します print.css。 このファイルに、次のコードを追加します。

body {visibility:hidden;}
.print {visibility:visible;}

このコードは、エレメントに「print」クラスが割り当てられていない限り、ボディ内のすべてのエレメントを非表示として定義します。

これで、あなたがする必要があるのは、印刷可能にしたいWebページの要素に「印刷」クラスを割り当てることだけです。たとえば、div要素で定義されたセクションを印刷可能にするには、次を使用します。

このクラスに割り当てられていないページ上の他のものは印刷されません。