人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

印刷用CSSについてです。

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

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

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

●質問者: sunkujira
●カテゴリ:ウェブ制作
✍キーワード:CSS アイコン クリック サイト ブラウザ
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● kn1967
●20ポイント

印刷と書かれたボタンの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"と命名しています)

◎質問者からの返答

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

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


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


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

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


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

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

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

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


2 ● kn1967
●20ポイント

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

(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)としてしまうと、さらに楽になるかも・・・

◎質問者からの返答

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


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

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

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


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

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


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


3 ● kn1967
●60ポイント ベストアンサー

■外部ファイル

回答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タグ、画像などお好きなタグをお使いください。

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

◎質問者からの返答

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

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

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>

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

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

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


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

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

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


4 ● kn1967
●20ポイント

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

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

setActiveStyleSheet

ではなく

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

です。

申し訳無いです。

◎質問者からの返答

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

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

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

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ