• 締切済み

javascriptでページ内の一部分だけを印刷する設定

ページを印刷するjavascriptを調べたところ、 <a href="javascript:window.print();"> 印刷する</a> というのが最も多く出てきました。 今回、ページ内のクーポンの部分だけを印刷する、 という設定にしたいのですが、その場合の記述方法を教えてください。 また上記の場合、<script>～</script>　で javascript自体の指令は必要ないんでしょうか。

みんなの回答

回答No.3

度々失礼します。 ＞ 印刷したい表が、大きな囲いとなるtableの中の、 ＞ tdの一つの中にあるtableであった場合、 ＞ どうやって指定したらいいんでしょう。 ＞ divでもspanでも、半端な位置になってしまいます。 ご希望に沿うかわかりませんが、 その印刷用の内側のテーブルを外にもう一つ作成して 印刷時のみの設定にして（普段は非常時）おくのが 簡単な方法だと思います。

niconico_1969
質問者

お礼

お返事遅くなってすみません。 この方法で複数のサイトに対応でき助かりました！ 何度か設定するうちに使いこなせてもきて、 うれしい気持ちです。 ありがとうございました。

回答No.2

＃1です。 お察しの通り、「media」の「screen」 or 「print」 指定ですが、 スタイルシートの有効な場面が決定されます。 「screen」 を付ければ画面表示時に有効。 「print」 を付ければ印刷時に有効。 といった具合です。 ＞ style専用の属性なんでしょうか？ スタイル用の固有属性だと思います。 「http://www.tohoho-web.com/html/style.htm」 ＞ ある一つの表のみを印刷できるようにしたい場合、 ＞ その表には、何もclass指定はせず、 ＞ それ以外のすべてのタグに（又はdivで囲んで）class="dspOnly"を指定するってことで ＞ 解釈は合っているでしょうか？ その考え方で合っていると思います。 style指定は、外部ファイルに入れる場合ですが、 別けないと駄目なようなきがします。 <link href="style1.css" type="text/css" media=screen> <link href="style2.css" type="text/css" media=print> 【style1.css】 .prtOnly {display:none;} 「screen」指定のスタイルシートでは「prtOnly」のクラスを非表示としています。 【style2.css】 .dspOnly {display:none;} 「print」指定のスタイルシートでは「dspOnly」のクラスを非表示としています。 説明があまり上手じゃなく申し訳ないですが、 わからないことがあれば、また質問をお願いします。 頑張ってみてください！

niconico_1969
質問者

補足

ありがとうございます。 どうしても外部ファイルにしたいわけではないので、先日の記述をヘッドタグ内に埋め込むことにします。 ただ、印刷時に必要な表以外の部分にclass="dspOnly" を入れる方法なのですが、 印刷したい表が、大きな囲いとなるtableの中の、 tdの一つの中にあるtableであった場合、 どうやって指定したらいいんでしょう。 divでもspanでも、半端な位置になってしまいます。

回答No.1

HTML上の印刷する部分を限定したいということですが、 こんな感じでどうでしょうか？ スタイルシートの設定のしかたで、ある程度近いことができると思います。 IE6ではこれで動いています。 <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> <!-- ブラウザ上のみ表示 --> <div class="dspOnly">テスト</div><br> <!-- 印刷時のみ表示 --> <img src="test1.jpg" border="0" class="prtOnly"><br> <!-- 両方表示 --> <img src="test2.jpg" border="0" class=""> <br> <br> <a href="javascript:window.print();" class="dspOnly"> 印刷する</a> </body> </html> ＞ また上記の場合、<script>～</script>　で ＞ javascript自体の指令は必要ないんでしょうか。 javascript:window.print()←自体がJavaScriptの命令になって いますので特に必要ありません。 ※さらに複雑さ処理がやりたい場合は別ですが。

niconico_1969
質問者

補足

cssで制御できるんですね。すごい…。 ちなみにmedia=screen　media=print　というのは style専用の属性なんでしょうか？ また、今回のような印刷したいとき専用の属性なんでしょうか？ それで、今htmlに組み込んでみましたが あまり意味がわかっていないせいか、動作しませんでした。 確認したいのですが、 たとえば、ページ全体のうちの、 ある一つの表のみを印刷できるようにしたい場合、 その表には、何もclass指定はせず、 それ以外のすべてのタグに（又はdivで囲んで）class="dspOnly"を指定するってことで 解釈は合っているでしょうか？ それと、style指定は、外部ファイルに入れる場合、 .prtOnly {display:none;} .dspOnly {display:none;} だけでよいんでしょうか。 それとも、media-screen　を指定するべく、 classを１つ１つ<style></style>タグで囲むことが 必要なんでしょうか。 わかりにくい文章になってしまいましたが、、 よろしくお願いします。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • javascriptですか？

    初心者です。 これはjavascriptなのでしょうか？ <a href="javascript:window.close()">閉じる</a> javascriptと書いてあるので、多分そうなのだと思いますが、この場合、これだけを記述すればいいのでしょうか？ 本などにはjavascriptを記述する際に、 <script language="JavaScript"> <!-- //--> こんなのを書きなさい見たいな事も書いてあったのですが、どうなのでしょうか、ちなみに書かなくてもちゃんと使えるのですがどちらが正解ですか？ 変な質問ですが、よろしくお願いします。

  • ページ内の画像印刷について

    <a href="javascript:window.print();">印刷</a> 等でホームページ全体の印刷はできるようですが、印刷ボタンを押す事で特定の画像だけを印刷するにはどのようにすれば良いのかお教え下さい。

    • ベストアンサー
    • HTML
  • JavaScriptでページを一度だけリロード

    とあるページにアクセスした際、JavaScript(jQuery)を使って一度だけページをリロードしたいと思っております。 <script language="JavaScript"><!-- function reload() { if (window.name != "test") { location.reload(); window.name = "test"; } } // --></script> 上記のような記述で試みたのですが、リロードしてくれません。 他に対応できる方法がございましたら、ご教授いただけますと幸いです。 以上、よろしくお願い致します。

  • 印刷の設定について

    はじめまして。ほとんどプログラミングをわかっていない初心者です。 普段はＡＳＰで記述しているのですが作成した書類を印刷したいと思っています。 いろいろ検索した結果，下記のような記述で印刷のダイアログを表示させることはできました。 <SCRIPT LANGUAGE="JavaScript"> <!-- function PrintPage(){ if(document.getElementById || document.layers){ window.print(); } } //--> ＊＊＊ ＊＊＊ ＊＊＊ <input type="button" value=" 印 刷 " onClick="javascript:PrintPage()"> 問題は印刷したい書類ごとに縦書き、横書きがあるので ダイアログの中で操作しなくても自動的に任意の方向に指定したいと思います。 あと、可能でしたらＡ４やＢ５など用紙サイズ指定もやりたいです。 JavaScriptはほとんどわからないので僕のようなものにもわかるようにお願いします。 質問自体がおかしい！とかそんなもんできるわけないだろ的な意見でもかまいませんのでお願いします

  • javascriptに詳しい方

    下のスクリプトで見るべきページが二つ以上ある場合どのように記述すればいいのでしょうか? javascriptに詳しい方よろしくお願いいたします。 <html> <head> <script language="JavaScript"> <!-- var isClicked = false; //--> </script> </head> <body> <A href="check.html" onClick="isClicked = true">見るべきページ</a><br> <A href="test.html" onClick="if (!isClicked){ alert('先に見るべきページをクリックしてください'); return false; }">A</a><br> </body> </html>

  • ウインドウの後ろに隠れているページを前面に出したいんです。

    「呼び出し元ページ」をA 「呼び出されるWINDOWページ」をB と例えます。 「A」のリンクをクリックすると「B」がNEW WINDOWで開き、既に開いている「B」のリンクをクリックすると背面「A」が手前に来るjavascriptに挑戦しているのですが、うまく動作しないんです。 逆の順序「B」→「A」→「B」もです。 WIN IE6.0では成功しましたが、FIREFOX、ネスケ、Mac safariの最新verではダメでした。 すみません、誰か教えて頂けないでしょうか。 現在「A」「B」のページには下記の記述をしてます。 IEでは大丈夫でした。 別の方法でも良いのでお願いします。 ■「呼び出し元ページA、test1.com」 <script language="javascript"> <!-- window.focus(); //--> </script> <A href=http://www.test2.com/ target=test>リンク</A> ■「呼び出されるWINDOWページB、test2.com」 <script language="javascript"> <!-- window.focus(); //--> </script> <A href=http://www.test1.com/ target=test>リンク</A>

  • 印刷用のボタンを作り、印刷をする方法を教えて下さい

    Webサイトを作成しており、申込用紙のページを作っております。 そこで、「印刷をする」ボタンを作成し、「印刷をする」をクリックすると印刷ページを呼び起こしたいです。 これは、どうやって印刷ページを呼び起こすのでしょうか？ HTMLとCSSだけで可能でしょうか？ こちらのサイトでは、Ｊａｖａｓｃｒｉｐｔｏを使って印刷ページをが呼び起せるとしております。 http://www.nishishi.com/javascript/2007/window-print.html window.print();　を使うだけで良いらしいですが、HTMLのbodyに以下のように記述するだけで良いのでしょうか？他に、headなどの部分に何か記述する必要はないのでしょうか？ <form> <input type="button" value="このページを印刷" onclick="window.print();" /> </form>

    • ベストアンサー
    • CSS
  • javascriptでのエラーについて

    Windows7+IE8にて以下の処理を行いたいのですが、 ================================================== (1) 親ウィンドウ(oya_window.html)から、【window.open】にて 　　子ウィンドウ(ko_window.html)を開く (2) 子ウィンドウ(ko_window.html)の【window.opener】にて 　　親ウィンドウ(oya_window.html)に定義されている 　　【window.open】を実行する関数[openWindow]を呼び出し、 　　Yahooページを開く ================================================== (2)の部分で以下のエラーとなり、Yahooページを開く事ができません。 --------------------------------------------------------- このWebページのエラーにより、正しく機能しない場合があります。 --------------------------------------------------------- タグが無効です。 oya_window.html　　　ライン:10 コード：0　　　　　　文字：5 --------------------------------------------------------- 同マシン(Windows7)のfirefoxでは問題なく処理が行えるため、IEの 何らかの設定に起因していると思うのですが、IEの何の設定に起因して いるのかわからず、困っています。 何か情報をお持ちの方いらっしゃいましたら、よろしくお願いします。 【その他情報】 ○IEをアドオンなしで起動しても同エラーが発生することから、IEの 　アドオンによる影響ではないと思われます。 ○以下の処理は問題なく実行できます。 　▼パターンＡ 　================================================== 　(1) 親ウィンドウ(oya_window2.html)から、【window.open】にて 　　　子ウィンドウ(ko_window2.html)を開く 　(2) 子ウィンドウ(ko_window2.html)にて(元々親ウィンドウ 　　　(oya_window.html)に定義していた)【window.open】を実行する 　　　関数[openWindow]を呼び出し、Yahooページを開く 　================================================== 　▼パターンＢ 　================================================== 　(1) 親ウィンドウ(oya_window3.html)から、【window.open】にて 　　　子ウィンドウ(ko_window3.html)を開く 　(2) 子ウィンドウ(ko_window3.html)の【window.opener】にて 　　　親ウィンドウ(oya_window.html)に定義されている 　　　【document.bgColor】を実行する関数[changeColor]を呼び出し 　　　親ウィンドウの背景色を灰色に変更する 　================================================== 【ソース】 ▼本来のパターン ==親ウィンドウ(oya_window.html)=================== <HTML> <HEAD> <TITLE>親ウィンドウ </TITLE> <script language="Javascript"> function koopen(){ window.open("ko_window.html","ko_window","status=yes,width=800,height=100"); } function openWindow(){ window.open("http://yahoo.co.jp","",""); } </script> </HEAD> <BODY> <a href="JavaScript:koopen();">子ウインドウを開く</a> </BODY> </HTML> ================================================== ==子ウィンドウ(ko_window.html)=================== <HTML> <HEAD> <TITLE>子ウィンドウ </TITLE> <script language="Javascript"> function helpop(){ window.opener.openWindow(); } </script> </HEAD> <BODY> <a href = "JavaScript:helpop();">Yahooページを開く</a> </BODY> </HTML> ================================================== ▼パターンＡ ==親ウィンドウ(oya_window2.html)=================== <HTML> <HEAD> <TITLE>親ウィンドウ </TITLE> <script language="Javascript"> function koopen(){ window.open("ko_window2.html","ko_window","status=yes,width=800,height=100"); } </script> </HEAD> <BODY> <a href="JavaScript:koopen();">子ウインドウを開く</a> </BODY> </HTML> ================================================== ==子ウィンドウ(ko_window2.html)=================== <HTML> <HEAD> <TITLE>子ウィンドウ </TITLE> <script language="Javascript"> function helpop(){ window.opener.window.open("http://yahoo.co.jp","",""); } </script> </HEAD> <BODY> <a href = "JavaScript:helpop();">Yahooページを開く</a> </BODY> </HTML> ================================================== ▼パターンＢ ==親ウィンドウ(oya_window3.html)=================== <HTML> <HEAD> <TITLE>親ウィンドウ </TITLE> <script language="Javascript"> function koopen(){ window.open("ko_window3.html","ko_window","status=yes,width=800,height=100"); } function changeColor(){ document.bgColor="CCCCCC"; } </script> </HEAD> <BODY> <a href="JavaScript:koopen();">子ウインドウを開く</a> </BODY> </HTML> ================================================== ==子ウィンドウ(ko_window3.html)=================== <HTML> <HEAD> <TITLE>子ウィンドウ </TITLE> <script language="Javascript"> function helpop(){ window.opener.changeColor(); } </script> </HEAD> <BODY> <a href = "JavaScript:helpop();">親ウィンドウの色を変える</a> </BODY> </HTML> ==================================================

  • Html CSS JavaScript での印刷制

    現在、htmlページにボタンを置いて、そのボタンが押されたら 印刷の処理を行おうとしているのですが、 その印刷の際に、印刷のプリンタ選択の ダイアログボックスを出さずに印刷をすることは可能でしょうか？ Html,css,JavaScript この三つのうち、どれかで制御ができないかと 探してみているのですが、成果が出ません。 方法をご存知の方、 方法が記述されたページをご存知の方、 ご教授お願い致します。 現在、印刷はJavaScriptを使用し、 OnClickイベントで、window.print()を実行させ、 印刷を行おうとしています。

  • JavaScriptの表示についておねがいします。

    JavaScriptで、以下のスプリクトのページを表示する部分を10秒ごとにしたいのですがどなたか教えて頂けないでしょうか？出来れば、追記して回答お願いします。 <html> <body> </scr ipt> </head> <body onLoad="openWindow1()"> <a href="javascript:openWindow1();">web表示</a> <SCRIPT language="JavaScript"> <!-- // サブウィンドウの表示方法を指定する function openWindow1() { window.open("http://yahoo.co.jp/","1"); window.open("http://www.google.co.jp/","2"); window.open("http://ja.wikipedia.org/wiki/メインページ","3"); } //--> </SCRIPT> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する