読者です 読者をやめる 読者になる 読者になる

palm84.hatenablog.com

革命的愛熊主義者同盟!

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

HTML CSS

f:id:palm84:20160115160609j:plain

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

INDEX
  1. 印刷用CSSの指定
  2. 指定要素を非表示に
  3. 強制改ページ
  4. いろいろ

印刷用CSSの指定

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

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

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

  1. 既存CSSに media="all", media="screen" などを指定
  2. 印刷用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;
}

非表示用の 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 */  

ほな


HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

Webデザインの新しい教科書 改訂新版 基礎から覚える、深く理解できる。〈HTML5、CSS3、レスポンシブWebデザイン〉

Webデザインの新しい教科書 改訂新版 基礎から覚える、深く理解できる。〈HTML5、CSS3、レスポンシブWebデザイン〉