blob: eaf85ea86d5b349ee47b5ff0a7871644501dcd38 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
---
title: 印刷
slug: Web/Guide/Printing
tags:
- DOM
- Guide
- NeedsContent
- NeedsRelocation
- printing
translation_of: Web/Guide/Printing
---
<p>コンテンツを印刷するときに、ウェブサイトまたはアプリケーションで使い勝手を向上させたい場合があります。考えられるシナリオはいくつかあります。</p>
<ul>
<li>紙の大きさと形状を生かしてレイアウトを調整したい</li>
<li>(画面とは) 異なるスタイルを利用して、紙の上でのコンテンツの見栄えを良くしたい</li>
<li>良い結果をるために、より高解像度の画像を使用したい</li>
<li>印刷を始める前にコンテンツの印刷プレビュー版を表示するなど、印刷の使い勝手を調整したい</li>
</ul>
<p>他にも印刷処理を管理したい場合がありますが、これらは最も一般的なシナリオの一部です。この記事では、ウェブコンテンツの印刷品質を向上させるためのヒントとテクニックを紹介します。</p>
<h2 id="Using_a_print_style_sheet" name="Using_a_print_style_sheet">印刷スタイルシートの使用</h2>
<p>{{HTMLElement("head")}} タグの中に次のように追加してください。</p>
<pre><link href="/path/to/print.css" media="print" rel="stylesheet" />
</pre>
<h2 id="Using_media_queries_to_improve_layout" name="Using_media_queries_to_improve_layout">レイアウトを改善するためのメディアクエリの使用</h2>
<h2 id="Detecting_print_requests" name="Detecting_print_requests">印刷リクエストの検出</h2>
<p>ブラウザーによっては (Firefox 6 以降や Internet Explorer など) コンテンツが印刷を開始することを判断できるように、 <code>beforeprint</code> および <code>afterprint</code> イベントを送信します。これを使用して、印刷中に表示されるユーザーインターフェイスを調整することができます (例えば、印刷処理中にユーザーインターフェイス要素を表示したり隠したりするなど)。</p>
<div class="note"><strong>メモ:</strong> <a href="/ja/docs/DOM/window.onbeforeprint" title="DOM/window.onbeforeprint"><code>window.onbeforeprint</code></a> および <a href="/ja/docs/DOM/window.onafterprint" title="DOM/window.onafterprint"><code>window.onafterprint</code></a> を使用してこれらのイベントにハンドラーを割り当てることもできますが、 {{domxref("EventTarget.addEventListener()")}} を使用することをお勧めします。</div>
<h2 id="Examples" name="Examples">例</h2>
<p>よくある例をいくつか紹介します。</p>
<h4 id="Open_and_automatically_close_a_popup_window_when_finished" name="Open_and_automatically_close_a_popup_window_when_finished">ポップアップウィンドウを開き、終了したら閉じる</h4>
<p>ユーザーがコンテンツを印刷した後に <a href="/ja/docs/DOM/window.open" title="DOM/window.open">popup window</a> (例えば文書の印刷用など) を自動的に閉じたい場合は、次のようなコードで実現できます。</p>
<pre class="brush: html"><!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>JavaScript Window Close Example </title>
<script type="text/javascript">
function popuponclick() {
my_window = window.open('', 'mywindow', 'status=1,width=350,height=150');
my_window.document.write('<html><head><title>Print Me</title></head>');
my_window.document.write('<body onafterprint="self.close()">');
my_window.document.write('<p>When you print this window, it will close afterward.</p>');
my_window.document.write('</body></html>');
}
</script>
</head>
<body>
<p>To try out the <code>afterprint</code> event, click the link below to open
the window to print. You can also try changing the code to use <code>beforeprint</code>
to see the difference.</p>
<p><a href="javascript: popuponclick()">Open Popup Window</a></p>
</body>
</html>
</pre>
<div><a href="/samples/domref/printevents.html">ライブ例を表示</a></div>
<h3 id="Print_an_external_page_without_opening_it" name="Print_an_external_page_without_opening_it">外部ページを開かずに印刷する</h3>
<p>外部ページを開かずに印刷できるようにしたい場合は、非表示の {{HTMLElement("iframe")}} (<a href="/ja/docs/DOM/HTMLIFrameElement" title="DOM/HTMLIFrameElement">HTMLIFrameElement</a> を参照) を利用し、ユーザーがコンテンツを印刷した後で自動的にそれを削除するようにすることで実現できます。以下の例は、 <code>externalPage.html</code> という名前のファイルを印刷することができる例です。</p>
<pre class="brush: html"><!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MDN Example</title>
<script type="text/javascript">
function closePrint () {
document.body.removeChild(this.__container__);
}
function setPrint () {
this.contentWindow.__container__ = this;
this.contentWindow.onbeforeunload = closePrint;
this.contentWindow.onafterprint = closePrint;
this.contentWindow.focus(); // Required for IE
this.contentWindow.print();
}
function printPage (sURL) {
var oHiddFrame = document.createElement("iframe");
oHiddFrame.onload = setPrint;
oHiddFrame.style.position = "fixed";
oHiddFrame.style.right = "0";
oHiddFrame.style.bottom = "0";
oHiddFrame.style.width = "0";
oHiddFrame.style.height = "0";
oHiddFrame.style.border = "0";
oHiddFrame.src = sURL;
document.body.appendChild(oHiddFrame);
}
</script>
</head>
<body>
<p><span onclick="printPage('externalPage.html');" style="cursor:pointer;text-decoration:underline;color:#0000ff;">Print external page!</span></p>
</body>
</html>
</pre>
<div class="note"><strong>メモ:</strong> 古いバージョン Internet Explorer は、非表示の {{HTMLElement("iframe")}} の印刷することができません。</div>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="/ja/docs/DOM/window.print" title="DOM/window.print"><code>window.print</code></a></li>
<li><a href="/ja/docs/DOM/window.onbeforeprint" title="DOM/window.onbeforeprint"><code>window.onbeforeprint</code></a></li>
<li><a href="/ja/docs/DOM/window.onafterprint" title="DOM/window.onafterprint"><code>window.onafterprint</code></a></li>
<li><a href="/ja/docs/CSS/Media_queries" title="CSS/Media queries">Media queries</a></li>
<li>{{cssxref("@media")}}</li>
</ul>
|
