- ベストアンサー
ページ内特定範囲の印刷
ページ内特定範囲（画像等）の印刷ボタンを設けたいのですが シンプルな方法はないでしょうか？ 過去ログをみましたが、スクリプトが複雑すぎて。 CSSでディスプレー画面とプリント画面に分ける方法も やってみましたが動きませんでした。 よろしくお願いします。
- kurobon619
- お礼率76% (314/410)
- JavaScript
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (3)
- 15mm
- ベストアンサー率65% (65/100)
<style><!-- @media print{ body *{display:none;} .prtOnly {display:inline;}//注１ } @media screen{ .prtOnly {display:none;} } //--></style> これでどうでしょうかね？ 印刷時のみ表示する要素にclass="prtOnly" それ以外は印刷時自動的に非表示になります。（たぶん） <img>を二つ記述する必要が無いのなら他の方法もありますが・・・ 注１：ブロックレベル要素にも使う場合は、inlineとblockを別々に指定する必要があります。 .prtOnlyi{display:inline;} .prtOnlyb{display:block;}
お礼
15mmさん お時間を割いてくれてありがとうございます。 できました。
- Yohjira
- ベストアンサー率66% (14/21)
ANo.1の回答の補足をローカル環境で試してみましたが、 こちらではうまくいってますね。 （ソースをコピー＆ペーストしただけ、InternetExplorer7とFirefox3で確認） 何か別の理由が考えられませんか？もう少し状況を詳しく教えて欲しいです。 もしくは動かないソースをどこかのサーバにアップしてもらえるといいかもしれませんね。
補足
Yohjiraさん試していただいて恐縮です。 デモを作りました。ソースをコピー＆ペーストしただけですが やはり印刷したい画像だけでなく左の文字も入ってしまいます。 御査証ください。 http://www.business-nandemo.com/kome1/
- yambejp
- ベストアンサー率51% (3827/7415)
HTML自体、印刷とは次元の違う話しです。 もし意図した範囲での印刷を考えているのでしたら CSSで印刷範囲を指定するくらいしか現時点で有効な方法はありません。
補足
yambejpさん、わざわざ貴重なお時間を割いていただいてありがとうございます。 やはりCSSですか。 ではお聞きしたいのですが、過去に記述があったのを見よう見まねで下記のように書き込みました。test1を印刷したいのですが、ブラウザに二つtest1が出てて、印刷すると全体とtest1だけのものが出てきました。prtOnlyのものを消しても同じけかでした。 dspOnlｙのものを消すと画面上からtest1が消えます。 わけがわかってないせいかもしれませんが、どうしたらうまくいくのでしょうか？ <html> <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <title></title> <style media=screen> <!-- /*印刷時のみ表示*/ .prtOnly {display:none;} // --> </style> <style media=print> <!-- /*ブラウザのみ表示*/ .dspOnly {display:none;} // --> </style> </head> <body> <!-- ブラウザ上のみ表示 --> <img src="test1.jpg" border="0" class="dspOnly"><br> <!-- 印刷時のみ表示 --> <img src="test1.jpg" border="0" class="prtOnly"><br> <a href="javascript:window.print();" class="dspOnly"> 印刷する</a> </body> </html>
補足
なるほどYohjiraさんありがとうございます。 classで 印刷したくないところは dspOnlyにすればいいのですね。 でもそうすると印刷したくないヘッダーやサイドバーなりに すべてのdivにclassを入れなければならないのは大変ですが それしか手がないのでしょうか？