• このエントリーをはてなブックマークに追加

2015年05月03日(Sun)

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

印刷画面の横切れを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)

A4サイズのピクセル幅

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

【参考Webサイト】

コメント(0件)

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

【ソーシャルボタン】


TOP