印刷画面の横切れをCSSで調整する方法

2015年05月03日（Sun）

印刷画面の横切れをCSSで調整する方法

クーポンページを作成して印刷プレビューで見たら横が切れて表示されていることに気づきました。
印刷設定をすれば問題ないのでしょうが、ユーザーの手を煩わせるわけにはいきません！
色々な方法があるようですが、今回は印刷用のCSSを作成し印刷画面を調整する事にしました。
簡単に説明するとRWD（レスポンシブWebデザイン）と同じ要領で印刷画面を調整します。

メディアごとにスタイルシートを指定

メディアタイプはlink要素やstyle要素のmedia属性、また@mediaで指定出来るようです。
今回は、link要素のmedia属性を指定したやり方で試みました。

link要素のmedia属性を指定したサンプル

<html>
<head>
（省略）
<link rel="stylesheet" type="text/css" media="screen, handheld" href="指定したいCSSのパス">
<link rel="stylesheet" type="text/css" media="print" href="指定したいCSSのパス">
（省略）
</head>
<body>（省略）</body>
</html>

※複数のメディアタイプに同じCSSを適用させたい場合には、メディアタイプの値をカンマ（ , ）で区切って指定することができるようです。
※media属性を指定しない場合はall扱いになるようです。

link要素のmedia属性がallまたは未設定の場合の注意点

link要素のmedia属性を未設定またはallを指定している場合は、その状態でmedia属性に今回のprintを指定したlink要素を追加する場合は記述する順番に注意しましょう！
自分は、うっかりして順番を間違えmedia属性がprintのlink要素をメインのlink要素より先に記述してしまいmedia属性のprintの効果がないと思ってしまいました。

link要素の順番

<link rel="stylesheet" type="text/css" media="all" href="指定したいCSSのパス">
<link rel="stylesheet" type="text/css" media="print" href="指定したいCSSのパス">

メインのスタイルシートのmedia属性をallや未設定で指定している場合、その他のmedia属性のlink要素を追加する場合は、メインスタイルシートのlink要素の後に記述しないと効果が適用されない。

メディアタイプ一覧

CSS2以降で定義されているメディアタイプには以下のものがあります。
CSS3からは「特性」の指定もできるようになったようです。

all	すべてのメディア
screen	スクリーン
print	印刷
handheld	モバイル機器
projection	プロジェクタ
tv	テレビ
tty	文字幅固定のデバイス
braille	点字ディスプレイ
embossed	点字プリンタ
speech	音声
aural	音声(CSS2)

Ａ４サイズのピクセル幅

ブラウザなどによって若干違いがあると思いますが、ＩＥのディフォルトの印刷可能範囲は上下のマージンを除くと649ｘ978のようです。

【参考Webサイト】

コメント（0件）

印刷画面の横切れをCSSで調整する方法に対するご意見、ご感想、情報提供など皆様からのコメントをお待ちしております。お気軽にコメントしてください。

WEB帳
印刷画面の横切れをCSSで調整する方法