Webページ(HTML)の印刷用CSS設定

f:id:palm84:20160115160609j:plain

個人的に必要なので、まだまだ未熟ですがまとめてみます。

INDEX

印刷用CSSの指定
指定要素を非表示に
強制改ページ
いろいろ

印刷用CSSの指定

主に3通り。2番目が一番楽かな。

専用CSSを指定
既存CSSに追記
エンベッド - HTMLファイルに追記

参考リンク :
- @media - CSS | MDN
- CSS 概説 | Media Types in CSS

専用CSSを指定

専用CSSを作成し、htmlファイルの head 要素内の既存CSS指定の後に link タグを追記する。

既存CSSに media="all", media="screen" などを指定
印刷用CSSには media="print" を指定

<link rel="stylesheet" type="text/css" href="./basic.css" media="all">
<link rel="stylesheet" type="text/css" href="./print.css" media="print">

既存CSSに追記

html側の編集は不要なので最も楽かな。

既存CSSに上書きさせる場合は、既存CSSの最後の方に、@media print { } で囲んで追記する。

/* 印刷プレビュー */  
@media print {
.sidebar {
display: none;
}
}

エンベッド - HTMLファイルに追記

HTMLファイルの head 要素内に style 要素を追記。@media print { } で囲んで記述する。

<head>
----- 省略 -----
<style type="text/css">
<!--
@media print {
.sidebar {
display: none;
}
}	
-->
</style>
</head>

戻る

指定要素を非表示に

サイドバーやナビゲーションリンクなどに display:none を指定して非表示にする

.sidebar {
display: none;
}

参考リンク :
- display - CSS | MDN
- display－スタイルシートリファレンス

非表示用の class を作っておくのもいいかもしれない...

.noprint {
display:none;
}

※ 尚、サイドバーを非表示にした場合は、メイン記事部分の幅 - width を広げる必要があるので注意。

戻る

強制改ページ

コンテンツ部分の後や見出し h2 の前などで強制改ページさせる。

参考リンク :

h2 {
page-break-before: always;
}

.contens {
page-break-after: always;
}

戻る

いろいろ

問題点とか...

画像は表示幅に合わせて縮小表示指定するべき？

img {
max-width: 100%;
height: auto;
}

pre のはみ出しは諦める？一応 visible 指定しておくとか

pre {
overflow: visible;
}

このページは今んとここんなかんじ...

/*===== 印刷プレビュー =====*/  
@media print {	/* @media print START */  
/* 幅 */  
#container {
width: 100%;
margin: 0;
padding: 0;
}

#wrapper {
width: 98%;
margin: 0;
padding: 0;
}

/* 非表示 */  
#globalheader-container,
header#blog-title,
footer,
#bottom-editarea,
aside,
#box1,
#box2,
.pager,
.hatena-counter,
#fb-root,
#footer,
.navi_back {
display: none;
}

/* 改ページ */  
.entry-inner h2 {
page-break-before: always;
}

article {
page-break-after: always;
}

}			/* @media print END */