印刷用CSSについてです。


http://www.jetro.go.jp/indexj.html
をご参照いただければと思いますが、
上記サイトにおける印刷用CSS対応と同じ考え方で、

1) ブラウザで印刷すると従来通りの印刷(画面そのまま印刷)
2) 各ページに置く印刷用アイコンをクリックすると印刷用CSS対応の印刷

を実現するにはどうしたら良いでしょうか。
よろしくお願いします。

回答の条件
  • 1人10回まで
  • 登録:2007/03/06 22:58:07
  • 終了:2007/03/08 16:31:52

ベストアンサー

id:kn1967 No.3

kn1967回答回数2915ベストアンサー獲得回数3012007/03/08 02:55:56

ポイント60pt

■外部ファイル

回答1へのお返事でお示しの

http://www7a.biglobe.ne.jp/~mkun/css/css_JavaScript.htm

であればswitchcss.js(拡張子js)が外部ファイルです。


htmlからの呼び出しはhtmlのhead内に

<script src="switchcss.js"></script>

という形で記述されていると思いますが、

<script type="text/javascript" src="switchcss.js"></script>

という形にしておくほうが良いでしょう。


今では少ないと思いますがサーバーによっては外部スクリプトが動作しない(呼び出してくれない)ものがあるかもしれません。


■CSS切り替え

switchcss.jsに今回のcss切り替え(仮にChangecss2と命名します)の

function Changecss2() {
  if (self.name == "print_style") { setActiveStyleSheet("prt"); }
}

を追加して、

htmlファイルのほうはhead内に先で示したcssファイルの指定2行を書いておいて、bodyタグにonLoad="Changecss2()"を指定しておきます。


■別ウィンドウ

switchcss.jsに今回のcss切り替え(仮にwopenと命名します)の

function wopen() {
  w = window.open(location,"print_style");
}

呼び出しはタグにonClick="wopen()"を加えてください。

onClickはAタブやButtonタグ、画像などお好きなタグをお使いください。

とりあえず以上で、あとは適宜対応してください。

id:sunkujira

ご回答ありがとうございました。

以下の通り試してみましたが、うまく動作しませんでした…。

Mac OS X(10.3.9)で試しています。

Windowsではまだ試していないのですが、

具体的にはfirefoxでは下記エラーが出ます。

setActiveStyleSheet is not defined

別ウインドウは開かず、スタイルシートの変更もされません。


safariでは、別ウインドウは開きますが、スタイルシートの変更はやはりされません。


IE@Macでは、ステータスバー、メニューバーなどのないウインドウが開きます。

スタイルシートの変更はされませんでした。


switchcss.js

function Changecss(ttl) {
  var i, lnklst;
  for(i=0; (lnklst = document.getElementsByTagName("link")[i]); i++) {
    if(lnklst.getAttribute("rel").indexOf("stylesheet")  &amp;&amp; lnklst.getAttribute("title")) {
      lnklst.disabled = true;
      if(lnklst.getAttribute("title") == ttl) lnklst.disabled = false;
    }
  }
}
function Changecss2() {
  if (self.name == "print_style") { setActiveStyleSheet("prt"); }
}

function wopen() {
  w = window.open(location,"print_style");
} 

test.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="screen.css" title="scr" />
<link rel="alternate stylesheet" type="text/css" href="print.css" title="prt" />
<script type="text/javascript" src="switchcss.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>印刷test</title>
</head>
<body onLoad="Changecss2()">
<a href="#" onclick="wopen()">印刷</a>
</body>
</html>

なにかミスをしているのだとは思い、いろいろ検索したり試したりしていますが、

恥ずかしながら、どうもうまくいかず困っています。

もしもお時間がありましたら、もう少しおつきあいいただけませんでしょうか。


無理なようでしたら、コメント欄でお知らせくだされば

質問を閉めてポイントをお支払いいたします。

よろしくお願いいたします。

2007/03/08 15:56:54

その他の回答(3件)

id:kn1967 No.1

kn1967回答回数2915ベストアンサー獲得回数3012007/03/07 00:28:45

ポイント20pt

印刷と書かれたボタンのURLを見ると、

http://www.jetro.go.jp/indexj.html?print=1

というように?print=1と付いているのがお分かりになるかと思います。

サーバー側での対処方法とすれば

パターン(1)
indexj.htmlにprint=1というパラメータが付与されていた場合は、
indexj.htmlではなく印刷用として別途用意しておいたページを
呼び出す(あるいは作り出す)ためのプログラムを呼ぶようになっている。
パターン(2)
indexj.htmlは静的なファイルではなく、
実はphpなどのスクリプトが内蔵されていて、
受け取ったパラメータによって出力を変えている。

といったような処理になるでしょう。

実装方法としてはWEBサーバソフトにもよりますが広く使われているApache系であれば

(1)はmod_rewriteと.htaccess(必要に応じてperlやphpなどのスクリプト)
(2)は.htaccess+phpなどのスクリプト

といった組み合わせになります。

いずれの場合も複数のページを用意しておいたり、

あるいはスクリプトを組むなどの面倒がありますので、

個人的にはCSSの@mediaのscreenやprintを使って画面表示用と印刷用の設定を1つのhtml内に組み込んでおく事をお勧めします。


最後になりましたが、別ウィンドウに表示させたいという点についてはタグでターゲットを_blankなどにしておけばよろしいかと思います。

(indexj.htmlの中ではブランクではなくtarget="new"と命名しています)

id:sunkujira

ご回答ありがとうございました。

やはりプログラムなどのサーバ側処理が必要なのですね。


>>個人的にはCSSの@mediaのscreenやprintを使って画面表示用と印刷用の設定を1つのhtml内に組み込んでおく事をお勧めします。


現在はこの方法で提案しているのですが、この方法だとやはり

「ブラウザで見たままを印刷できない」のが問題になっています。


そこで、cssを切り替えるjavascriptを探したのですが、

例)http://www7a.biglobe.ne.jp/~mkun/css/css_JavaScript.htm

これだと「別ウインドウで表示する」がクリアできずにおります。

javascriptでcssを切り替え、更にその結果を別ウインドウで表示するにはどのような記述をすれば良いでしょう。

2007/03/07 02:49:52
id:kn1967 No.2

kn1967回答回数2915ベストアンサー獲得回数3012007/03/07 04:13:19

ポイント20pt

フレーム名を利用した方法では方法ではどうでしょうか?

(1)別ウィンドウを表示する際にはフレーム名をつける

<a href="URL" target="print_style">印刷</a>

ここでは仮にprint_styleとしています。

(2)JAVAScriptでself.name(フレームの名前)がprint_styleならCSSを切り替える。

headに書くlinkは2行
<link rel="stylesheet" type="text/css" href="表示用のスタイルシート" title="scr" />
<link rel="alternate stylesheet" type="text/css" href="印刷用のスタイルシート" title="prt" />

スクリプトは1行
if (self.name == "print_style") { setActiveStyleSheet("prt"); }

(1改)別ウィンドウはJAVAScriptで開く

  w = window.open(location,"print_style");

(1)の場合は埋め込むページ毎にURL部分を書き換えないといけなくなるけど、

スクリプトを使えば自分のURLを自動的に入れてくれるので修正部分が減って作業もメンテも楽になります。

JAVAScript部分を外部ファイル(.js)としてしまうと、さらに楽になるかも・・・

id:sunkujira

再度のご回答、本当にありがとうございます。


>>(1改)別ウィンドウはJAVAScriptで開く

>>(2)JAVAScriptでself.name(フレームの名前)がprint_styleならCSSを切り替える。

>>JAVAScript部分を外部ファイル(.js)


ひとりあたりの回答回数を変更しておきますので、大変お手数をおかけしますが

このやり方の、html、jsファイルそれぞれの具体的な記述例をお願いできませんでしょうか。


図々しいお願いで申し訳ありませんが、どうぞよろしくお願いいたします。

2007/03/07 13:35:15
id:kn1967 No.3

kn1967回答回数2915ベストアンサー獲得回数3012007/03/08 02:55:56ここでベストアンサー

ポイント60pt

■外部ファイル

回答1へのお返事でお示しの

http://www7a.biglobe.ne.jp/~mkun/css/css_JavaScript.htm

であればswitchcss.js(拡張子js)が外部ファイルです。


htmlからの呼び出しはhtmlのhead内に

<script src="switchcss.js"></script>

という形で記述されていると思いますが、

<script type="text/javascript" src="switchcss.js"></script>

という形にしておくほうが良いでしょう。


今では少ないと思いますがサーバーによっては外部スクリプトが動作しない(呼び出してくれない)ものがあるかもしれません。


■CSS切り替え

switchcss.jsに今回のcss切り替え(仮にChangecss2と命名します)の

function Changecss2() {
  if (self.name == "print_style") { setActiveStyleSheet("prt"); }
}

を追加して、

htmlファイルのほうはhead内に先で示したcssファイルの指定2行を書いておいて、bodyタグにonLoad="Changecss2()"を指定しておきます。


■別ウィンドウ

switchcss.jsに今回のcss切り替え(仮にwopenと命名します)の

function wopen() {
  w = window.open(location,"print_style");
}

呼び出しはタグにonClick="wopen()"を加えてください。

onClickはAタブやButtonタグ、画像などお好きなタグをお使いください。

とりあえず以上で、あとは適宜対応してください。

id:sunkujira

ご回答ありがとうございました。

以下の通り試してみましたが、うまく動作しませんでした…。

Mac OS X(10.3.9)で試しています。

Windowsではまだ試していないのですが、

具体的にはfirefoxでは下記エラーが出ます。

setActiveStyleSheet is not defined

別ウインドウは開かず、スタイルシートの変更もされません。


safariでは、別ウインドウは開きますが、スタイルシートの変更はやはりされません。


IE@Macでは、ステータスバー、メニューバーなどのないウインドウが開きます。

スタイルシートの変更はされませんでした。


switchcss.js

function Changecss(ttl) {
  var i, lnklst;
  for(i=0; (lnklst = document.getElementsByTagName("link")[i]); i++) {
    if(lnklst.getAttribute("rel").indexOf("stylesheet")  &amp;&amp; lnklst.getAttribute("title")) {
      lnklst.disabled = true;
      if(lnklst.getAttribute("title") == ttl) lnklst.disabled = false;
    }
  }
}
function Changecss2() {
  if (self.name == "print_style") { setActiveStyleSheet("prt"); }
}

function wopen() {
  w = window.open(location,"print_style");
} 

test.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="screen.css" title="scr" />
<link rel="alternate stylesheet" type="text/css" href="print.css" title="prt" />
<script type="text/javascript" src="switchcss.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>印刷test</title>
</head>
<body onLoad="Changecss2()">
<a href="#" onclick="wopen()">印刷</a>
</body>
</html>

なにかミスをしているのだとは思い、いろいろ検索したり試したりしていますが、

恥ずかしながら、どうもうまくいかず困っています。

もしもお時間がありましたら、もう少しおつきあいいただけませんでしょうか。


無理なようでしたら、コメント欄でお知らせくだされば

質問を閉めてポイントをお支払いいたします。

よろしくお願いいたします。

2007/03/08 15:56:54
id:kn1967 No.4

kn1967回答回数2915ベストアンサー獲得回数3012007/03/08 16:05:42

ポイント20pt

今回の件はごめんなさい。こちらの記述ミスです。

呼び出すサブルーチンの名前は

  setActiveStyleSheet

ではなく

  Changecss ←switchcss.jsにありますよね。

です。

申し訳無いです。

id:sunkujira

kn1967さん、ありがとうございました!

function Changecss2() {
  if (self.name == "print_style") { Changecss("prt"); }
}

これで問題なく動作しました。

ただ、IE@Macでは相変わらず、ステータスバーなどのないウインドウが開きますが何故なんでしょうね。

ともあれ、大変助かりました。

本当にありがとうございました。

2007/03/08 16:29:09
  • id:sunkujira
    追記です。
    印刷用画面は、参考URLの用に別ウインドウで開くのが希望です。
  • id:kn1967
    Windowsのメニューバー等については、
    window.openの第三引数にて menubar=yes などを追加して調整してください(印刷用だからいらないと勝手に決め付けてました)

    menubar=yes 以外にもいろいろありますので、とほほさんのサイトなどを参考にしてください。
    http://www.tohoho-web.com/js/window.htm
  • id:kn1967
    >Windowsのメニューバー等については、

    window です。
    重ね重ねすみません。
  • id:sunkujira
    kn1967さん

    >>window.openの第三引数にて menubar=yes などを追加して調整してください

    なるほど、そうですね。
    menubar=noなどを記述していない場合は各種bar類は表示するのが
    普通かと思っていましたが、やっぱり書いておいたほうが安心ですね。

    ご丁寧にありがとうございました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません