【 ＨＰ作成質問箱 】

【ＨＰ作成質問箱/詳細】　一覧 / 詳細

　 No.9040　ホームページ印刷時の設定について

[ぽこぱぱ] [ブラウザ]　 07/02/05 (月) 19:05

先日はお世話になりました。おかげさまで少しずつではありますがホームページを作成できています。

今回教えていただきたいのは印刷用の設定についてです。

１）ＤＩＶでそれぞれのＢＯＸを作ってレイアウトを作っています。印刷しようとプレビューを表示すると右の段組が下の方へずれてしまいます。なぜそのようになるかが分かりません。

２）どのページもタイトル部分やナビ部分は同じです。印刷時にコンテンツの部分だけを印刷するようにできれば，もうちょっと幅を使えると思うのですが，ＨＰの中にそのような設定を埋め込むことができますか？

要を得ない説明かと思いますが，よろしく御指導下さい。

▼

▼

▼

　 No.9041　Re:ホームページ印刷時の設定について

[atom] [ブラウザ]　 07/02/05 (月) 20:21

１）について
問題点だけを言うなら「#news」の「WIDTH: 340px;」を「WIDTH: 330px;」に変更すれば、正しくプレビューが表示されました。

それと、細かくはわかりませんが、各パーツの合計横幅が表示可能横幅を超えてると思われます。
もう一度、細かく計算されたほうがいいと思います。

表示可能幅 ＝ widthの幅 －－ 左右のpadding幅
表示に必要な幅 ＝ widthの幅 ＋ 左右のmargin幅

２）については、特殊機能になります。
HTMLは文書整形機能しかありませんから、基本的にプログラムコントロールのような機能は期待しないほうがよいでしょう。

望むなら、全体のデザインを再考したほうが無難です。

▼

▼

▼

　 No.9042　Re^2:ホームページ印刷時の設定について

[ぽこぱぱ] [ブラウザ]　 07/02/05 (月) 21:00

> 問題点だけを言うなら「#news」の「WIDTH: 340px;」を「WIDTH: 330px;」に変更すれば、正しくプレビューが表示されました。
> それと、細かくはわかりませんが、各パーツの合計横幅が表示可能横幅を超えてると思われます。
> もう一度、細かく計算されたほうがいいと思います。

早速の御回答ありがとうございます。早速試してみます。

>２）については、特殊機能になります。

難しそうですね。日経ＢＰのＨＰでそのような形を見かけたので，自分でもできればと思ったのですが・・・さらに精進したいと思います。ありがとうございました。

▼

▼

▼

　 No.9043　Re^3:ホームページ印刷時の設定について

[atom] [ブラウザ]　 07/02/05 (月) 21:59

> >２）については、特殊機能になります。
> 難しそうですね。日経ＢＰのＨＰでそのような形を見かけたので，自分でもできればと思ったのですが・・・さらに精進したいと思います。ありがとうございました。

もし、そのURL（アドレス）がわかるなら教えていただければ、
簡単に実現できるかどうか確認してみますが．．
私も興味ありますし．．

▼

▼

▼

　 No.9044　Re^4:ホームページ印刷時の設定について

[ぽこぱぱ] [ブラウザ]　 07/02/06 (火) 08:19

http://www.nikkeibp.co.jp/
http://www.nikkeibp.co.jp/news/biz07q1/524646/

この様な感じなんです。一応ソースを眺めてみたものの，まだ私の力ではどうにもなりませんでした。

教えていただいた方法でうまく印刷プレビューが出るようになりました。それと同時に，プレビューを表示しようとするとブラウザ自体がハングしやすかった現象も解消したようです。なぜそうなったのかはまだ理解できていないんですけど(^^;)印刷はうまくいかないのに，ブラウザでの表示自体は問題なかったのも私にとっては謎なんです。

▼

▼

▼

　 No.9045　Re^5:ホームページ印刷時の設定について

[atom] [ブラウザ]　 07/02/06 (火) 08:38

このページのソースを見て、思い出しました。
そういえばこんな機能があったなぁ．．と。

この手法は単純なものでした。
↓ミソはここ。
<link href="/primitive_0610.css" rel="stylesheet" media="screen">
<link href="/print_0610.css" rel="stylesheet" media="print">

このように「media」属性を使って、画面のCSSと印刷用のCSSを切り分けてるのです。

▼

▼

▼

　 No.9046　Re^5:ホームページ印刷時の設定について

[atom] [ブラウザ]　 07/02/06 (火) 08:47

> 印刷はうまくいかないのに，ブラウザでの表示自体は問題なかったのも私にとっては謎なんです。

これは、単純にページ表示のための解析処理が違うからでしょう。
画面表示と印刷ではその出力メディアが違います。
機械のコントロールなども違います。

そのため、いろいろなパーツの配置を考えるモジュールの細かいところで計算ではうまくいかないところがあったため、処理の途中でハングしてしまったのだと思います。

▼

▼

▼

　 No.9047　Re^6:ホームページ印刷時の設定について

[ぽこぱぱ] [ブラウザ]　 07/02/07 (水) 08:35

『media』属性で切り分けるんですね。言葉で言うと一言ですけど習得するのにはまたまた勉強しなきゃですね。でも目標物を切り分けていただいたおかげで何とか進めそうです。解析処理の件も何となく分かるような気がします。今後widthなどをきちっと計算して作るように心がけます。
ありがとうございました。

▼

▼

▼

　一覧 / 詳細