痔になりやすい生活習慣とは?

印刷時ヘッダーとフッターを挿入
現在HPを作成しているのですが、来訪者がHPを印刷する時に、
フッターとヘッダーをこちらで指定しておくことは可能でしょうか?
ページ印刷時2枚以上になる場合全ページに同じヘッダーとフッターが
印刷されるようにしたいのです。
初心者なのであまり専門的なことまではわかりませんが、
html,Javascript,cgi,cssなどWindows環境で使用可能であれば基本言語は問いません。
わかる方いらっしゃいましたらご教授願います。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

共通のフッター部とヘッダー部を別途用意し、各ページに自動挿入するのは、


主にCGI(PHPとかPerl)のお仕事です。

Javascriptでやる時はAJAXと呼ばれる手法で、動的にコンテンツを
挿入出来ます。

ただし、プリント時にのみとなると、IEだけだったら、
window.onbeforeprint = functuon(){}で処理を書けますが、
一般的なブラウザーにこのイベントは無いです。(キーイベントで
PRINTキー押下を検知なんてのはいんちきですね)

やはり、全部のページに予めフッター部とヘッダー部を含めておいて、
普通はCSSで非標示にして、印刷用のCSSを作って、
<link rel="stylesheet" type="text/css"
href="/screen.css" media="screen">

.print_header{display:none;} <==注意:screen.cssの内容です。
                   この場に書くんじゃない

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

.print_header{display:block;} <==注意:print.cssの内容です。
                   この場に書くんじゃない


<body>

<div class="print_header">header部</div>

</body>
print.cssでのみdisplay:block;にするのがよいのでは..
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
質問の仕方があまりよくなかったのでしょうか、語弊があったように思われます。
質問の意味としては、びろーんと縦に長いページだったとすると、印刷時2枚とか3枚にしないと
字がちっちゃくなっちゃいますよね?
それで、ヘッダーとフッターをあらかじめ用意していても、印刷したら最初のページのみにヘッダーが、
最後のページのみにフッターが入っちゃいますよね?
そうではなくて、印刷時に全部のページにヘッダー・フッターを挿入したいという話でした。

お礼日時:2010/08/31 10:23

若干質問の意図が汲み取れないのですが、



通常表示される総ページ数などの印刷用ヘッダ・フッタを無効にして、
そちらで任意のものを設定したいというのなら「無理」です。

ブラウザで閲覧してるときは表示されなかった項目を印刷時には挿入したいというのなら、
CSSのメディア設定を使ってみてはいかがでしょうか?(参考URL)
ブラウザによる閲覧時と印刷時とで異なるCSSを適用することが可能ですので、
当然ながらある程度は内容そのものを変化させることも可能です。

いずれにしてもユーザの利便性は考慮の上でどうぞ。
意図した通りの内容に印刷されないのは迷惑ということも充分にありますしね。

参考URL:http://msugai.fc2web.com/web/CSS/media.html
    • good
    • 0
この回答へのお礼

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

>通常表示される総ページ数などの印刷用ヘッダ・フッタを無効にして、
>そちらで任意のものを設定したいというのなら「無理」です。

たぶんこちらになりますね。
wordなどの印刷レイアウト上のヘッダー・フッターにあたる部分に任意の文字列を挿入という
意味でした。
ただそうでなくても、ヘッダー・フッターにあたる文字列を印刷時、ページの上下に挿入できるだけ
でもよいのですが、それでも表示ページの文字列の高さを制御して任意の高さになったらpagebreakで
改ページを入れて、その前後に文字列が入るよう記述という方法も考えたのですが、ページ内に表示されるデータが他のファイルから持ってくるので大変なことになりそうでして。

>いずれにしてもユーザの利便性は考慮の上でどうぞ。
>意図した通りの内容に印刷されないのは迷惑ということも充分にありますしね。

利用者は身内のみのごく限られた一部のみで、IE限定。
また、これは利用者がいちいちヘッダー・フッターを編集するの面倒だからこんな風にできないのと
言われまして。

お礼日時:2010/08/31 10:41

ヘッダ、フッタを付与してるのは、ブラウザの機能なので。


標準設定のままなら、印刷した用紙の右上に「ページ/総ページ数」で印刷されますし、フッタにURLも印刷されますから同じページで印刷したものだって事は見分けが付きますが、それでは駄目なのでしょうかね?
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qサイト全体を縮小して印刷するには?

こんにちは。教えてください。
http://lexus.jp/
上記アドレスのサイトのように
横幅940pxと普通はA4縦では全てが印刷出来ないサイズのサイトでも
ブラウザから印刷するとサイト全体が縮小して
A4縦に収まって印刷される方法を教えてください。

JavaScript、css少しならわかります。
よろしくお願い致します!

Aベストアンサー

まず、このサイトは標準準拠モードではなく互換モードで作成されています。
(IEはプロパティにつくアンダーバーを無視する。
他のブラウザは仕様どおり存在しないプロパティ自体を無視する)

http://lexus.jp/models/common/css/import.css
から読み込まれる
http://lexus.jp/models/common/css/default.css
にある

@media print {
body {
_zoom: 0.68;
}
}

を読み込むことで印刷時のみzoomを効かせているんだと思います。

Minefield/Firefox,Opera,IE7にはShrink To Fitという
自動的にページ幅を基準とする機能が付いています。

MinefieldではScaleで調整し,
Operaでは[ファイル]-[印刷オプション]に「用紙幅におさめる」で有効になります。
IE6は上の指定で回避します。

ただし,IE7は標準でShrink To Fitであり,zoomプロパティを読み込んでしまうため,異様に小さく印刷されてしまいます。なのでShrink To Fitではなく100%で印刷した方が良いでしょう。

何故か俺の環境ではVPC上でしか動作しないSafariは,
VPCにプリンタドライバ入れなきゃいけないのが面倒なので検証していません。

まず、このサイトは標準準拠モードではなく互換モードで作成されています。
(IEはプロパティにつくアンダーバーを無視する。
他のブラウザは仕様どおり存在しないプロパティ自体を無視する)

http://lexus.jp/models/common/css/import.css
から読み込まれる
http://lexus.jp/models/common/css/default.css
にある

@media print {
body {
_zoom: 0.68;
}
}

を読み込むことで印刷時のみzoomを効かせているんだと思います。

Minefield/Firefox,Opera,IE7にはShrink To Fitという
自動的にペ...続きを読む

Q印刷時に2ページ以上になる時CSSで指定した背景が全てのページに印刷されてしまう

CSSで背景を上部にno-repeatで指定しています。これを印刷すると、印刷枚数が2ページ以上になった時、全てのページに背景が印刷されてしまいます。できれば最初のページだけに印刷されるようにしたいのですが方法はありますでしょうか。Mac IEでは最初のページのみに背景が印刷されます。Windowsはだめです。

Aベストアンサー

無理ではありませんよ^^
大丈夫です。印刷用のCSSは簡単です。
まず印刷用のCSSは、
<link REL="stylesheet" type="text/css" HREF="印刷用のスタイルシートアドレス" media="print">
ヘッダ部にこのように記述します。
そこから、印刷した場合2ページ以上は背景を表示しないですよね。
印刷用のCSSには、改ページさせる記述方法があります。
.front_print {
page-break-before: always;
}

例として名前を入力しました。.front_printは任意の名前で結構ですよ。
そして、HTMLの方の記述は、

<div class="front_print"></div>

この<div class="front_print"></div>がある箇所で、印刷は改ページとなります。

この記述がある箇所で改ページがなされるという事は、それ以降の記述は2ページ後となりますので、そこより
背景を再指定させればご質問者様の要望に叶うかと思います。

CSSが詳しく紹介されているページを参考URLに載せておきます。ご覧下さい

ご参考頂けますと幸いです。

参考URL:http://www.stylish-style.com/index.html

無理ではありませんよ^^
大丈夫です。印刷用のCSSは簡単です。
まず印刷用のCSSは、
<link REL="stylesheet" type="text/css" HREF="印刷用のスタイルシートアドレス" media="print">
ヘッダ部にこのように記述します。
そこから、印刷した場合2ページ以上は背景を表示しないですよね。
印刷用のCSSには、改ページさせる記述方法があります。
.front_print {
page-break-before: always;
}

例として名前を入力しました。.front_printは任意の名前で結構ですよ。
そして、HTMLの方の記述は、

<...続きを読む

QIEの印刷機能を制御して印刷設定をするためにScriptXというのを使いたいのですが

IEの印刷設定で、余白を指定し、ヘッダとフッタを非表示にする制御はできないかと調べていて、
http://otd8.jbbs.livedoor.jp/javascript/bbs_tree?base=7371&range=1
この7387番の記事をみつけ、「ScriptX」というのに興味を持ちました。

http://www.meadroid.com/scriptx/sxdownload.asp
から「ScriptX Client Resource Kit contains」とやらのURLを取り寄せて
インストールしてみたのですが、結局↑の例は難しくてよくわからなかったです。

その後、別の記事を↓に見つけ、ローカルのテスト環境(IIS)で一番下の記事
に書いてあるとおりにしたら、見事にうまく制御できました。
http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?topic=9590&forum=7
HTML上の「印刷」を押すだけで、設定どおりに刷り出されます。
(上記「ScriptX Client Resource Kit contains」をインストールしたのがよかったのでしょうか?)


ところが本番環境のサーバーではまったく動きません。クライアントによっても動作が異なり、
わたしのPC(XP+IE7)ではプリンタを選ぶ印刷ダイアログが開くだけですし、
別の人のPC(Win2k+IE6)では、HTML上の「印刷」を押しても何も起こりません。

コード中にある、
codebase="http://www.meadroid.com/scriptx/ScriptX.cab#Version=6,1,429,14"
というのが、リンク切れですが、だからでしょうか?

手がかりがわかればご教示下さい。

IEの印刷設定で、余白を指定し、ヘッダとフッタを非表示にする制御はできないかと調べていて、
http://otd8.jbbs.livedoor.jp/javascript/bbs_tree?base=7371&range=1
この7387番の記事をみつけ、「ScriptX」というのに興味を持ちました。

http://www.meadroid.com/scriptx/sxdownload.asp
から「ScriptX Client Resource Kit contains」とやらのURLを取り寄せて
インストールしてみたのですが、結局↑の例は難しくてよくわからなかったです。

その後、別の記事を↓に見つけ、ローカルのテスト環境(IIS)...続きを読む

Aベストアンサー

確認はしてませんが、以下のページに書いてあるサンプルが最新なのでは?

[参考]MeadCo's ScriptX
http://www.meadroid.com/scriptx/freedep.asp

QIEの印刷でcssが無効になう

宜しくお願いします。

CSSを使って、DIVタグでレイアウトしています。TABLEでなくDIVだけで組むのは初チャレンジです。外部CSSを使用しています。

IE(Ver6)では、問題なくCSSが有効となって見えるのですが、印刷プレビュー及び印刷では、CSSが無効となりレイアウトが崩れてしまいます。DIV関係に限らず全てのCSSが無効です。

こんな経験は初めてで、何が悪いのかわかりません。

どこをチェックすれば良いのでしょうか?

Aベストアンサー

#2です。例題が悪かったです。(こうなっていると印刷にcssが効かないという例です。)
media="screen" になっているならこのCSSはscreenメディア(主にパソコンのディスプレイ)に対してだけ適用してください。という意味になります。
media="screen,print" と、すると画面と印刷の両方に適用されます。
(media="all"またはmedia自体を削除すれば全てのメディアに適用されます。)

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

ページを印刷するjavascriptを調べたところ、

<a href="javascript:window.print();">
印刷する</a>

というのが最も多く出てきました。
今回、ページ内のクーポンの部分だけを印刷する、
という設定にしたいのですが、その場合の記述方法を教えてください。

また上記の場合、<script>~</script> で
javascript自体の指令は必要ないんでしょうか。

Aベストアンサー

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の命令になって
いますので特に必要ありません。

※さらに複雑さ処理がやりたい場合は別ですが。

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>
<...続きを読む

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Qページの一部が消える印刷プレビューの原因について

ご質問です。
当方、実務経験の浅いwebデザイナー兼コーダーです。
仕事でコーポレートサイトを作成したのですが、htmlファイルの納品後に「印刷にも対応できるようにしてほしい」とクライアントからの要望を頂きました。

フルcssで作成したサイトを確認するも社内のWinXPのIE7・WinVistaIE7共に特定の倍率で「ページのある一部」が印刷プレビューに映らない(印刷しても、そこだけ白い・そこだけスペースが空いている)という現象が起きてしまいました。
(念のため・・クライアントからは最低IE7で印刷できればいい、と言われています)

私の確認では倍率70~75%で「ページのある一部」が表示できなくなり、クライアントの環境(WinXP IE7)では縮小して全体を印刷する、80%、60%の3つで「ページのある一部」が表示できないとのことです。
これはいったい何が原因となっているのでしょうか。

印刷用のcssにzoom指定で修正はできそうなのですが、何より原因がわからないので気になります。

プリンターの問題なのか、ブラウザによるものなのか・・
はたまたコーディングが悪いのか・・。

説明が悪いので伝わりにくく申し訳ないのですが、クライアントにうまく説明するためにも心当たりがある方のご意見を頂きたいです。
宜しくお願いします。

ご質問です。
当方、実務経験の浅いwebデザイナー兼コーダーです。
仕事でコーポレートサイトを作成したのですが、htmlファイルの納品後に「印刷にも対応できるようにしてほしい」とクライアントからの要望を頂きました。

フルcssで作成したサイトを確認するも社内のWinXPのIE7・WinVistaIE7共に特定の倍率で「ページのある一部」が印刷プレビューに映らない(印刷しても、そこだけ白い・そこだけスペースが空いている)という現象が起きてしまいました。
(念のため・・クライアントからは最低IE7で印刷で...続きを読む

Aベストアンサー

結構日数が経っているのでもう解決済みかもしれませんが…
私も一度その現象に出くわしたことがあります。
その時はoverflow:hidden;を消せば直りましたが、どうでしょうか。
もし解決済みでしたら、どうしてそうなったのか、解決方法はあったのかよろしければ教えて下さい。

QHTMLって印刷するとずれるんですか?

お世話になっております。相談です(涙
会社の社内WEBページで いくつかマニュアル類などWordやPDFで作成したものがあります。重くていやなので、この際、HTMLで作成しましょう(私がつくってもいい)といいました。返ってきた回答は、
「マニュアル系は印刷して使用することが多いからです.
HTMLで作成すると、印刷がずれるなどして、
印刷に対する問合せなど余計な手間が増えます.」
でした。わたしはタグ打ちで少々ならHPが作れる程度なんですが、そんなに印刷するとずれるもんでしょうか・・社内のユーザーさんもWordやPDFは重くていやだから、HTMLでつくって、とか言うし、私自身もそう思うのですが・・詳しい方、教えてください。

Aベストアンサー

HTMLはブラウザで見ることを前提に作っているので印刷するということは考慮されていません。
なのでレイアウトによってはずれることもあります。
しかしページをレイアウトどおりに印刷するプラグインやソフトもあるのでそれを使えば見た目と同じように印刷されます。
また使うブラウザによってはあまりずれないで印刷できるブラウザもあります。
Htmlはどんな端末で見ても同じように見えることを重視して作ってあるので印刷するときのことまで想定されていないんですよね。
そういった意味ではPDFは印刷することを意識したファイル形式なので印刷するんだったらPDFにしたらどうですか?
ブラウザで見る用にHTMLで作って印刷用としてPDFを用意してリンクさせておくとか。

Qtextareaで入力した文字を改行したままで表示したいのですが。

textareaに複数行で入力した文字を改行したままで表示したいのですが
改行されずに表示されます。
改行したままで表示するのはどうすればいいでしょうか?

<HTML>
<HEAD>
<STYLE type="text/css">
<!--
INPUT {font-size: 12px;}
-->
</STYLE>
<SCRIPT language="JavaScript">
<!--
function check(){
var strName;
strName = document.nform.textN.value;
var test = document.getElementById("test");
test.innerHTML = strName;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM name="nform" >
<textarea cols="30" rows="10" name="textN"></textarea>
<input type="button" value=" 確認 " onClick="check()">
</FORM>
<DIV id="test" style="position:absolute;font-size:24px;">
</DIV>
</BODY>
</HTML>

textareaに複数行で入力した文字を改行したままで表示したいのですが
改行されずに表示されます。
改行したままで表示するのはどうすればいいでしょうか?

<HTML>
<HEAD>
<STYLE type="text/css">
<!--
INPUT {font-size: 12px;}
-->
</STYLE>
<SCRIPT language="JavaScript">
<!--
function check(){
var strName;
strName = document.nform.textN.value;
var test = document.getElementById("test");
test.innerHTML = strName;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM name="nform" ...続きを読む

Aベストアンサー

function check(){
var strName;
strName = document.nform.textN.value;
var test = document.getElementById("test");
//一応タグを使えないように置き換える
strName = strName.split("<").join("&lt;");
strName = strName.split(">").join("&gt;");
//改行を改行タグに置き換える
strName = strName.split("\n").join("<br>");
test.innerHTML = strName;
}


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング