親子におすすめの新型プラネタリウムとは?

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

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

A 回答 (2件)

CSSで、印刷用をお作りになられては如何でしょうか。


<link REL="stylesheet" type="text/css" HREF="印刷用のスタイルシートアドレス" media="print">
上記のスタイルシートアドレス内に、印刷用を新たに追加して、背景を指定すればご質問に対する回答になるかと思います。参考URLに、印刷用CSSの説明が記載されているものを添付致します。ご参照下さい。

参考URL:http://linux-life.net/web/print/

この回答への補足

ご回答ありがとうございました。
>印刷用を新たに追加して
すみません。印刷用にどうCSSを書いたら良いかわかりません。用紙が二枚以上になった時の二枚目以降の背景画像を消したいのです。やはりむりですよね。

補足日時:2006/08/29 11:49
    • good
    • 0

無理ではありませんよ^^


大丈夫です。印刷用の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
    • good
    • 1
この回答へのお礼

丁寧なご回答ありがとうございます。やってみます。まだ未熟者ですがもっと勉強したいと思います。

お礼日時:2006/09/04 15:03

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

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

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

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

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

Q印刷プレビューに白紙のページが出てきちゃうんです!

通常、何も文字が書かれていなければ(白紙なら)、印刷はされませんよね?でも時々、1ページで文章は済んでいるのに、白紙の2ページ目まで印刷プレビューに出てきてしまいます。当然、印刷してみると2枚目に白紙が出てきます。続けて何かを印刷したい時など困ります。こうなった場合の、白紙の2枚目の取り消し方みたいなものは有りますか?宜しくお願いします。

Aベストアンサー

いろいろな原因が考えられると思いますが、取りあえず思いつくところで・・・
1.印刷範囲が設定されていない。
2.印刷範囲は設定されているが、用紙範囲外まで設定されている。
3.マクロが組まれている。
もし、上の3つの内であれば、範囲を設定を変更するなどが一番良い手だと思います。補足があればお願いします。

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;を消せば直りましたが、どうでしょうか。
もし解決済みでしたら、どうしてそうなったのか、解決方法はあったのかよろしければ教えて下さい。

Q印刷時ヘッダーとフッターを挿入

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

Aベストアンサー

共通のフッター部とヘッダー部を別途用意し、各ページに自動挿入するのは、
主に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;にするのがよいのでは..

共通のフッター部とヘッダー部を別途用意し、各ページに自動挿入するのは、
主にCGI(PHPとかPerl)のお仕事です。

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

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

やはり、全部のページに予めフッター部とヘッダー部を含めておいて、
普通はCSSで...続きを読む

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自体を削除すれば全てのメディアに適用されます。)

QCSSのfloatでレイアウトしたページの印刷について

CSSのfloatでレイアウトしたページを印刷してみると、
2ページ分必要なところが1ページ分しか印刷されなかったり、2ページ目が印刷されていても、ある一箇所だけ・・・
といった、印刷した時のレイアウトの崩れで悩んでいます。

ページ内のコンテンツ部分だけを印刷したいのではなく、あくまでも全体がきちんと印刷されるようにしたいのですが、
float:none;
を設定すると、floatが解除されてしまうので、印刷するとますますおかしくなってしまいます。。。

印刷用スタイルシートをどのように設定したら良いのか、皆様アドバイスをお願いします・・・!!

Aベストアンサー

CSSで、印刷時に見たままを表示するのは難しいですよね。
基本は<link REL="stylesheet" type="text/css"
HREF="XXXXX.css" media="print">という風に
印刷用の外部スタイルシートを別に指定してやります。

で、その中身ですが、、表示用CSSを
ちょこちょこと変えても思い通りにはなりません。
(私の経験です)
私は、新たにレイアウト等を作り直します。

1.IE等で背景を印刷しない設定にしていると
 背景や背景色が無視され(たまに枠線色も無視する)
 せっかくのデザインが意味のないものになる。
2.改行位置やページの幅等が特定できない。
3.白黒のプリンタだと…
とかいう理由で、思い通りにならないので
思い切って!?無難な文字ベースにしちゃいます。
(一応 2 の改行位置やページの幅等を固定する
ことは出来ますが、古いブラウザ等では
無視されることがあります。参考URL参照)

どうしても同じレイアウトにしたいのであれば
テーブルレイアウトの別ページで対応とかを
考えてみてはどうでしょうか。

参考URL:http://www.tohoho-web.com/css/reference.htm#page2

CSSで、印刷時に見たままを表示するのは難しいですよね。
基本は<link REL="stylesheet" type="text/css"
HREF="XXXXX.css" media="print">という風に
印刷用の外部スタイルシートを別に指定してやります。

で、その中身ですが、、表示用CSSを
ちょこちょこと変えても思い通りにはなりません。
(私の経験です)
私は、新たにレイアウト等を作り直します。

1.IE等で背景を印刷しない設定にしていると
 背景や背景色が無視され(たまに枠線色も無視する)
 せっかくのデザインが意味のないものに...続きを読む

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という
自動的にペ...続きを読む

QWebページが1ページのみ印刷される

IE8でWebページを印刷したいのですが、A4サイズで3,4ぺージ
あると思われるのですが、1ページめのみ印刷されます。
いろいろやって見ましたが、できませんので質問させていただきました
今まではこのようなことはなかったので、Webページが特別なのでしようか?

Aベストアンサー

違うブラウザで印刷できるのなら、サイトの方に問題があるのかもです。
http://www.forest.impress.co.jp/lib/inet/browser/webbrowser/firefox.html

Q印刷すると文字が重なってしまうのです

サイトのページを印刷すると、数ヶ所ですが文字が
横に重なってしまい読めなくなってしまいます。
そのサイトページだけなんです。
ほかの印刷も同様にそうなるのでしたらプリンターの
設定かと思うんですが。。
 
ちなみに印刷したいページはこちらなんです。↓  http://www.isize.com/study/cgi-bin/go.cgi?FS=seo_sz&TN=2102070

直す方法をどうぞ伝授くださいませ!

Aベストアンサー

私のプリンタでは正常に出ますね。プリンタプロパティ(ファイル→印刷→プロパティ)で出力を「原稿サイズに合わせる」にされたらいかがでしょう?それか、設定上で印刷用紙のサイズを変えてみるのもいいかもです。印刷プレビューでも文字は重なっていますか?
それでもダメな場合、サイトをコピーして、ワードなどに貼り付けて印刷する方法もあります。

Q印刷範囲の指定はできますか?

現在、ホームページを制作しているのですが、A4紙に収まらないページがあるのです(写真が切れてしまいます)。
そこで、ページのある一部分(メインの部分)だけを印刷する、またはしないように指定したいのですが、可能でしょうか。

Aベストアンサー

スタイルシートを使えば可能ですよ。

印刷用のスタイルシートを適用すればよいのです。
http://linkage.xrea.jp/article/2004/07/make_mediacss.php

上記のサイトを参考にしていただければ分かりやすいと思いますが(やり方は二通りあります)

たとえば、次のページを用意します。
<html>
<head>
<link rel="stylesheet" href="print.css" type="text/css" media="print">
</head>
<body>
<div class="noprint">
ここは印刷したくない
</div>
<div>
ここは印刷したい
</div>
</body>
</html>

上のHTMLでprint.cssというファイルを読み込み指定していますよね。
このprint.cssというファイルを作ります。
この中に

.noprint{
display:none;
}

と書いてあれば、class="noprint"で指定された部分は印刷されません。

分かりますでしょうか?

参考URL:http://linkage.xrea.jp/article/2004/07/css2print.php

スタイルシートを使えば可能ですよ。

印刷用のスタイルシートを適用すればよいのです。
http://linkage.xrea.jp/article/2004/07/make_mediacss.php

上記のサイトを参考にしていただければ分かりやすいと思いますが(やり方は二通りあります)

たとえば、次のページを用意します。
<html>
<head>
<link rel="stylesheet" href="print.css" type="text/css" media="print">
</head>
<body>
<div class="noprint">
ここは印刷したくない
</div>
<div>
ここは印刷したい
</div>
</body>
</htm...続きを読む

Q文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。


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

人気Q&Aランキング