範囲指定印刷での位置（css)

質問

media printを使って、印刷範囲を指定したいです。

サイトは大きく以下のように構成されています。

サイト全体を囲む　div#base（サイズ固定、センターぞろえ）

div#baseの中に、
ヘッダ　#header（上段、左右いっぱい）
メニュー　.area_menu（中央段左。float:left）
メイン　.main（中央段右。float:right）
フッタ　#footer（下段、左右いっぱい）
となっています。

上記各要素の中に子要素は諸々入っていますが、上記の大箱たちはこれ以上入れ子になってはいません。
※例えば、「メニューとメイン」を合わせて別の箱でくくったりはしていません。

このうちの、メイン部分のみ、印刷したいです。
現在、

@media print{
.area_menu{display:none;}
#footer{display:none;}
#header{display:none;}
.main{width:100%; float:none; color:#666;}
}
としています。

確かにメイン以外の部分は消えるのですが、本当にそのままの位置で消えただけという感じで、メインの左側に大きな余白ができてしまっています。
印刷サイズを拡大・縮小してみてもやはり同じで、左側の白い部分（メニューがあった部分）も「印刷物」として認識してしまっています。
印刷範囲からはみ出るくらい拡大すると、左に余白を残した状態で、右側は印刷可能範囲からはみ出て次ページに行ってしまいます。
どうすれば、「メイン部分だけ」を左に持ってこれるでしょうか？

検索したのですが見つからなかったため、
適当に指定のfloatの部分を右や左にしてみたり、clearを入れてみたり、「div#baseを読んでるのか？」と思い、div#baseをdisplay:noneしてみたり…。
初心者なりに色々試してはみたのですが、どうにもうまくいきません。

float:rightがかかっているボックスを、左寄せにして印刷する方法をお願いします（＞＜

回答No.7

ORUKA1951

No.2です。
　一度仕様書(CSS2でもよい)を読み通しておくことをお勧めします。
視覚整形モデル ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html )
視覚整形モデル詳細 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visudet.html )
その他の視覚効果 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visufx.html )

ページ媒体 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/page.html )

音声スタイルシート ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/aural.html )

は異なります。
float:プロパティは、視覚メディア(visual)です。

　たとえば、visualとprintedは随分と異なります。特にfixedは各ページに印刷されます。
　プロパティ索引 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/propidx.html )のfloat:の項目の右端に、visualと書いてあります。

　あくまで、テキスト中の挿絵など本来の使い方なら大丈夫ですが、blockの配置には使うべきではありません。

　たとえば、
ペットボトル握力計 ( http://iruka.la.coocan.jp/craft/HandDynamometer/index.html )
　な使い方をします。

お礼

ありがとうございます。
せっかくたくさんのURLを貼ってくださったのですが…。
すみません。現在の私のスキルと脳みそでは、脳内に？？が大量に浮かぶだけで、全く理解できそうにありません（＞＜
何のことを言っているかもサッパリわからず、異国の文章をただ茫然と眺めているかのような状態です…。

まだcssを始めて1～2週間しか経っていないもので…。
いつもORUKA様の高度なアドバイスを生かすことができず、申し訳ありません。

ORUKA様の発言から、なんとな～く理解できた（？）のは、要するに体裁を整えるためのボックスの配置にフロートを使わないこと！ということでしょうか？

だとすれば…どうやって配置すればいいんでしょうか（＞＜
「初心者のためのcss講座」「誰でもできるcssの基本」的なサイトを参考にしながら作っていたのですが（そういうのじゃないと理解できないので）、同様のレベルのサイトで、フロートを使わない方法を教えてくれているサイトをご存知でしたら教えていただきたいです…。

回答No.6

noname#147388

(4)は便宜上記述しただけですね。

(3)の直下に(2)と同じかそれ以下のwidth 属性をもったエレメントが存在したらそこにまわりこむのです。

レイアウト上(3)は回り込みを解除する必要はあれど回り込みを設定することはないはずです。

お礼

４に該当するものは私のレイアウトにはないが、仮にあった場合、今の指定だと図のようになってしまう、ということですね。

しかし、実際には私のレイアウトに4は存在せず、加えてフッタでclearして〆ているのでそれでOKだと思っていました。
サイトでいろいろな記事を見ながら作成していたのですが、メニューにfloat: left;、メインにright、フッタでclearというように教えているものも多かった（と言うか、そういうのばかりしか目にしなかった）ため、そのように作ってしまっていました。

教えてくださった方法に変更するとして、メインのフロートをleftに変更するのではなく、フロートそのものを削除するということですよね？（でないと意味がないですよね？）
そうだと仮定して、メインのフロートを完全に削除すると、メニューに重なってしまい、メインのボックスは画面最左まで寄ってしまいます。

この状態で、左からの余白を320（メニューの幅と余白の幅分）にすればいいのでしょうか？
それとも、margin-left:auto;でしょうか？

上記2方法とも試してみましたが、やはり印刷時、どちらも大きく左に空きが出来てしまいます。
プリントCSSにmargin-right:auto;を設定したら、やや左に寄ったものの、相変わらず左に空きがあり、印刷サイズを変更等しても、左の空きが埋まりません。

今のところ（正しい正しくないは別として）、望みどおりの解決策（印刷プレビュー時に印刷したい部分が左に寄る）を実現できるのは、メインのフロートをleftに書き換え、左に20pxの空きを指定する方法だけです。

なんだか混乱してきてしまいましたが、何とかもう少しお力をお借りしたく、よろしくお願いします。

回答No.5

noname#147388

float: right; 削除でOKです。

(1)────┐
│■■■■│
└────┘
(2)─┐(3)─┐
│■││■│
└─┘│■│
(4)─┐│■│
│■││■│
└─┘└─┘

（MSゴシック等でみてください。）
のようなレイアウトにするのは構造上問題です。
(2)のエリアの中に(4)も入るようにしましょう。

お礼

回答ありがとうございます。
すみません。ちょっと意味がよくわかりませんでした。
１～４は具体的にどこを表しているのでしょうか？
１がヘッダ、2がメニュー、3がメイン、4がフッタですか？
そうだという前提で話を進めますが、
２に4を入れるというのがよくわからないのですが…。

フッタは横幅いっぱいですので、2の横にも3の横にも来ることはありません。
２や３に内包することもできません。
ですので、仮に３が長くなっても、下にずれるだけで、図のような回り込みにはなりません。

現状、メインのfloat: right;を削除してしまうと、３が左にずれ、２にくっつきます。
外枠が940、メニューが300、メインが620ですので、20px右に空きができます。
その分メインの左に余白を取ってしまえば、見た目上は今と同じ、メインが右に寄っているように見えるようにすることはできます。
そのようにしたほうが良いということですか？

「構造上問題」とのことですが、上記のようにちょっと意味が理解できなかったため、どこが問題なのかわかりませんでした。
とても気になりますので、お手数ですが再度教えていただけますと助かります。

回答No.4

noname#147388

float: right; が悪さをしてる。

お礼

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

そうなんです。
メインボックスに指定したfloat: right;がガンなのは明らかなんですが、このガンを、何とかプリント用cssでやっつけたいのです（＾＾；

サンプル提示時に書いたように、メインボックスのfloat: right;をreftに書き換えて、代わりに左余白を設定すれば、とりあえず問題を解決することはできます。
でも、float: right;の箱は印刷指定できない…はずはないと思うんですよね。
なので、どこかに思わぬミスがあるとか、大事な指定を忘れているとか、何か原因があるのではないかと思っています。
それとも、float: right;の箱は印刷指定できない＝みんなfloat: right;を避けてうまくやっているのでしょうか？

解決方法でも、「float: right;はできない決まりになってるよ」という情報でも何でもいいので、何かアドバイスがあれば教えていただけたら嬉しいです。

回答No.3

神崎 渉瑠（@taloo）

.main{margin-left:0;}

追加でどうでしょう？

お礼

回答していただき、ありがとうございます。
↓2番の方へのコメントで書きましたが、
.main{margin-left:0;}
テストしてみた結果、アウトでした（TT

そちらのコメにサンプルを載せましたので、どこか間違いがあればご指摘いただけると助かります。

回答No.2

ORUKA1951

単純にスタイルシート自体を切り替えればよいです。
スタイルシートには
固定スタイルシート(persistent style sheet)
優先スタイルシート(preferred style sheet)
代替スタイルシート(alternate style sheet)
メディア別スタイルシート
などがあります。私は、　@mediaを解釈しないブラウザもあるので
<link rel="stylesheet" type="text/css" href="./CSS/general.css" >
<link rel="stylesheet" type="text/css" media="screen" title="標準" href="./CSS/standardShape.css" >
<link rel="stylesheet" type="text/css" media="screen" title="標準" href="./CSS/standardColor.css" >
<link rel="styleSheet" type="text/css" media="handheld,tty" href="./CSS/handheld.css" >
<link rel="styleSheet" type="text/css" media="print" href="./CSS/print.css" >
とかにしています。

　完全にprint用のスタイルシートを別にしてしまえば問題はないと思います。

お礼

いつも回答いただきありがとうございます。

説明不足で申し訳ありません。
初めからプリント用cssはレイアウトcssとは分けています。
でもダメなんです。

サンプルを作ったので、どこが悪いか見てください。
子要素の構造が悪いのかと思い、現在のページから「サイトを構成する箱」以外の余分な要素を一切排除してみたものですが、これでも右に寄ってしまいます。
最初に質問を立てた時点からの変更点は、
.area_menu→#menu
.main→#main
としてみたところです。

と、これを書いている時点でもう御一方の回答をいただきましたので、margin-left:0;を足す変更も加えてみました。

しかし、ダメです。
IE、Firefox　Chromeすべてダメ。
最悪、メインの箱の左に余白を作り、float: left;にするしかないのでしょうか。
（そうすれば左に寄ることは確認済みです。）
でも、それだと、もっと複雑な構造のサイトの特定部分を印刷したいなど、floatを変更することが難しい構造の場合、印刷指定はできないということになってしまいますよね…？

サンプルです。

プリント用css
@media print{
#header{display:none;}
#footer{display:none;}
#menu{display:none;}
#main{width:100%; float:none; color:#666; margin-left:0;}
}

レイアウト用css
@charset "utf-8";
/* ボディー全体 */
div#base {
width:940px;
margin:0 auto;
}
/* ヘッダー */
div#header {
width:940px;
}
/* フッター */
div#footer {
width:940px;
clear: both;
}
/* メニューエリア */
div#menu {
float: left;
width: 300px;
}
/* メインエリア */
div#main {
float: right;
width: 620px;
}

HTMLページ
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>てすとてすと</title>
<meta name="description" content="てすとてすとてすと" />
<meta name="keywords" content="てすと,てすと,てすと" />
<link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../css/print.css" rel="stylesheet" media="print" type="text/css">
</head>
<body>
<div id="base">
<div id="header">
へっだ</div>
<div id="menu">
めにゅー</div>
<div id="main">
印刷したい
</div>
<div id="footer">
ふった</div>
</div>
</body>
</html>

どこに間違いがあるか、検証していただけると助かります。

回答No.1

noname#147388

http://template.b-cures.net/dl/stylecss/index18.html　でそ

お礼

URLを教えていただき、ありがとうございます。
行ってみましたが、そもそも最初に私が参考にしてソースをパクってきたサイトでした…（笑
その通りにやっているつもりなのですが、うまくいきません。

↑2番の方へのコメントにサンプルを載せましたので、どこか間違いがあればご指摘いただけると助かります。