【CSS】印刷時のみ有効となる設定にする

公開日: : 最終更新日:2016/03/24 css

CSSを使って、印刷時のみ有効となる設定をします。これを使用すれば、わざわざ印刷専用のページを作らなくても、印刷に適したデザインを印刷時のみ適用させることができます。

CSSファイルに記述する方法

スクリーン用に記述しているCSSファイル(スクリーン用とも印刷用とも、特に使い分けせず普通に書いてるCSSファイル)に印刷時に適用するCSSファイルを一緒に記述しちゃいます。印刷用のときに指定したいCSSが数少なければ、これでOK。

「@media print」要素内にCSSスタイルを記述すると、印刷時のみ有効となります。CSSは一般的に旗上げゲームと一緒で(赤上げといて赤下げる…みたいな)、後ろの位置に書いたスタイルが最終結果として採用されるので、「@media print」は普段使いのスタイルの後ろの位置に記述します。

@media print {
#sub {display:none}
}

この設定で、スクリーンには「id=sub」は表示されますが、印刷時には「id=sub」が非表示になります。IDだけでなく、クラスにも設定可。

一部の古いIEなどでは「@media type」内の記述が無視されます。

外部CSSファイルをリンクする方法

印刷時のCSSが多いときは印刷用のCSSファイルを1枚作ってリンクさせた方が分かりやすくてよいかも。

まず、印刷用のCSSファイルを作り(例/print.css)、<head>~</head>内に記述します。

<head>
<link rel="stylesheet" href="css/base.css" type="text/css" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print">
</head>

上記のように「media="print"」の記述を追加すると、印刷用のCSSとして設定できます。

MEMO

スタイルシートには、他にもメディアタイプが用意されています。

プロパティ CSSの適用メディア
all 全て
screen スクリーン
print プリンター
projection プロジェクター
tv テレビ
aural 音声合成機器
speech 音声合成機器
braille 点字ディスプレイ
embossed 点字プリンタ
handheld 携帯端末
tty 固定幅文字の機器


関連記事

no image

インラインCSSの記述で画像を回転させる方法

画像を回転させたいときに使用。ブログなどで外部CSSを使用するのが面倒な時に便利。 html内に下記...

記事を読む

【CSS】ボックスや画像のカドを丸くする

border-radius はボックスのカドを丸くするプロパティです。<img>に対して...

記事を読む

画像をマウスオーバー時に半透明にする

画像をマウスオーバー時に半透明にする

cssで画像をマウスオーバー時に半透明にする a:hover時のimgに対してcssで指定します。 ...

記事を読む

Message

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

no image
エコノミークラス症候群

エコノミークラス症候群とは?  エコノミークラス症候群は、旅行に関連

no image
巻き爪・陥入爪

巻き爪・陥入爪ってなに?  巻き爪とは、主に親指の爪の両端が「巻く」

no image
結婚お祝い金

披露宴に出る場合 祝儀袋の渡し方  受付でお祝いの言葉を述べ、祝儀

no image
結婚祝い

お祝い品選びと費用 お祝い品の選び方  新居を構える二人には、生活

no image
ダニ除去マニュアル

ダニ除去マニュアルについて  基本的なダニアレルゲン対策としては、

→もっと見る

PAGE TOP ↑