スタイルシートについての質問です。


スタイルシートでブラウザのメニューから設定できる「ページ設定」の余白を制御しようと思います。
あちこちのページを見て下記の通りやればできるというのを見つけたので試したのですがうまく反映されません。

ページのヘッダーに
<link href="print.css" rel="stylesheet" type="text/css" media="print">

print.cssの中
@page {
margin-top: 0.5cm;
margin-bottom: 0.5cm;
margin-left: 0.5cm;
margin-right: 0.5cm:
}

どこか間違っているのでしょうか?

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2007/02/07 15:52:20
  • 終了:2007/02/14 15:55:02

回答(2件)

id:STRing No.1

STRing回答回数351ベストアンサー獲得回数362007/02/07 15:59:01

ポイント35pt

@規則 一覧 - CSS Dencitie

文法が間違っているからです。

@media print {
 margin-top: 0.5cm;
 margin-bottom: 0.5cm;
 margin-left: 0.5cm;
 margin-right: 0.5cm:
 }

User-Agent の対応も確認を。

id:nyankochan

やはりうまくいきません。

http://www.tohoho-web.com/css/reference.htm

このサイトに書いてあるとおりのIE5.5以降ではダメということですか?

使ってるIEは6.0ですが、STRingさんの提示されたページでは適用外になっているようです。

2007/02/07 16:13:07
id:komorebi No.2

komorebi回答回数133ベストアンサー獲得回数82007/02/07 17:13:10

ポイント35pt

外部のCSSファイル内で、

 @media print{ ~ }

を指定してもIEは認識しません。(経験談)

すでに、<link media="print">を指定している段階でプリント用になってますから、

body もしくは、その中のコンテンツに対して、

margin指定を普通指定するだけで済むと思います。

1cm未満が、認識するかどうかも問題ですが、

まずは値を大きめにして反応するか試してから希望の値にすると良いと思います。

id:nyankochan

1cmも5cmも反応なしでした。

やはり、IEではページ設定の部分の余白を制御することはできないのですね。

各サイトによって出来るできない表記が曖昧なので真偽は定かではないですが、

今の自分の環境下では少なくともできなさそうです。

で、bodyはそのページのマージンなので@pageじゃないと意味無い気がします。

しばらくは、印刷する閲覧者に余白の設定をしてもらうよう注意文を付け加えて見ます。

2007/02/08 11:52:56
  • id:STRing
    間違えました。 @media のブロックの中で更に通常の記述をしなければいけないので、以下のようにしてください。

    @media print {
    body {
    margin-top: 0.5cm;
    margin-bottom: 0.5cm;
    margin-left: 0.5cm;
    margin-right: 0.5cm:
    }
    }
  • id:nyankochan
    HTML部分
    <meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
    <link href="style.css" rel="stylesheet" type="text/css">
    <link href="print.css" rel="stylesheet" type="text/css" media="print">
    </head>
    <body background="image/bg.gif" topmargin="0">

    CSS部分(print.css)
    @media print {
    body {
    margin-top: 0.5cm;
    margin-bottom: 0.5cm;
    margin-left: 0.5cm;
    margin-right: 0.5cm:
    }
    }

    のようにしたのですが、やはり印刷時に余白の変更が行われません。
  • id:nyankochan
    ページ設定の余白ということで、
    @media print {
    body {
    margin-top: 0.5cm;
    margin-bottom: 0.5cm;
    margin-left: 0.5cm;
    margin-right: 0.5cm:
    }
    }

    @media print {
    @page {
    margin-top: 0.5cm;
    margin-bottom: 0.5cm;
    margin-left: 0.5cm;
    margin-right: 0.5cm:
    }
    }
    にも変更してみましたがやはりできないようです。
    IE6.0では対応してないという事なのでしょうか。
  • id:STRing
    Firefox 2 と IE6 で色々試してみたら、
    どうやらプリンタの印刷できる限度の余白を確保した上で指定された margin が追加されるようです。
    ページ余白の設定値を変更する方法ではないみたいでした。

    文法エラーでそこだろうと追試せずに投稿してしまいました。すみません。
  • id:nyankochan
    とりあえず・・・・自力で探し当てた回答・・・・・。
    「今の所制御不可能」
    一緒に考えてくれた回答者様、ありがとうございました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません