HTMLで印刷対応アプリのバックアップ(No.3) - PukiWiki

[ トップ ] [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
HTMLで印刷対応アプリへ行く。
- 1 (2006-10-19 (木) 11:47:51)
- 2 (2006-10-19 (木) 12:03:41)
- 3 (2006-10-20 (金) 15:29:05)
- 4 (2016-10-17 (月) 02:52:44)
- 5 (2016-10-17 (月) 23:53:35)
- 6 (2016-10-18 (火) 06:42:32)
- 7 (2016-10-18 (火) 11:01:06)

印刷ボタン †

<INPUT TYPE="button" VALUE="印刷" ONCLICK="print()"

印刷したときに別のスタイルを適用する †

その1 以下のように2つスタイルシートを指定しておく †

<link rel="stylesheet" type="text/css" href="design.css" media="screen">
<link rel="stylesheet" type="text/css" href="print.css" media="print">

その2 @print 内にクラスを記述 †

下の「印刷時に余計なメニューなどを隠す」参照のこと [#g255f4fc]

印刷時に余計なメニューなどを隠す †

以下のcssを適用すれば良い。

@media print{
 div.noprint{
  display:none;
 }
}

上で紹介した印刷ボタンなどもこれで隠せば良い．

ヘッダ，フッタ †

簡易的に作るには
- position:fixedなどを使えば良い．
  - http://www.zspc.com/documents/wcag10-tech/css-techniques/
- position:fixedの動作確認
  - http://useyan.x0.com/s/html/expression/sample/sample_fixed.html
- IE6だとpositon:fixedは使えないので工夫する．
- このやりかただと通常表示でも表示されるので，それを抑止するには非印刷時にdisplay:none;が適用されるようにしておけばいい
ちゃんと作るには
- xmlパーサ
- CSS3

改ページ †

CSSにpage-break-before: alwaysを入れる