webサイトをプリントする際に使用したコードまとめ

Html5 tips

最近、スマートフォンを使用する方が多くなり、ペーパーレスになってきている昨今ですが まだまだwebサイトを印刷して2次利用することがあるようです。


プリント用に必要なのはprint.css

基本的に必要なのはprint.cssのみ。

print.cssには下記の内容を記載します。

@media print{
body{ -webkit-print-color-adjust: exact; }
/*ここに追記可能*/
} 

html側にはhead内に下のコードを記述します。


プリント用に仕上げる為に、ヘッダーやサイドバー、フッター等必要がない箇所があればdisplay:none;を print.cssに入れて上げる事で、印刷範囲の整形ができます。

プリントボタンもつけてみる


このコードを貼付けて出てきたボタンをクリックするだけでユーザーが印刷を開始できます。 ユーザビリティを考えると「印刷ボタン」があった方がライトユーザーのフォローもできますね。

印刷ボタンを画像にしたい場合は

印刷する

このようにすれば画像ボタンにできます。