【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 固定幅文字の機器


関連記事

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

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

記事を読む

no image

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

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

記事を読む

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

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

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

記事を読む

Message

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

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

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

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

no image
巻き爪・陥入爪

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

no image
結婚お祝い金

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

no image
結婚祝い

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

no image
ダニ除去マニュアル

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

→もっと見る

PAGE TOP ↑