スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。



  

印刷時と、画面表示時に使用するCSSを切り替える方法

画面に表示されたデザインと、その画面を印刷したデザインで配色や構成が異なっていることがある。これは外部CSSの呼び先が、ブラウザからの呼び出し時と印刷時とで切り替えることで実現できる。

通常、外部CSSを呼び出す際、以下のように記述をする。
<link rel="stylesheet" type="text/css" href="CSSファイルへのパス" />

切替を行いたい場合にはlinkタグ内にmediaオプションを使用する。

○ブラウザからの画面表示時に参照するCSSを指定する場合(media="screen")
<link rel="stylesheet" type="text/css" href="CSSファイルへのパス" media="screen"/>

○印刷プレビューや印刷時に参照するCSSを指定する場合(media="print")
<link rel="stylesheet" type="text/css" href="CSSファイルへのパス" media="print"/>

以下のページにサンプルを作成した。
サンプルページ
(ブラウザから参照した場合と、印刷プレビューから参照した場合とで見え方が違う)
関連記事
スポンサーサイト



  

テーマ : プログラミング
ジャンル : コンピュータ

コメント

非公開コメント

検索フォーム
プロフィール

サトリヒロシ

Author:サトリヒロシ
ビジネスを重視した企画を支援したいエンジニアが、何かを書こうとするブログです。

サトリ潜伏先
サトリ倉庫

WEB関連の技術で調査リクエストがあればご連絡ください。

カレンダー
08 | 2017/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
カテゴリ
最新記事
最新コメント
最新トラックバック
月別アーカイブ
RSSリンクの表示
リンク
QRコード
QRコード
FC2カウンター
スポンサードリンク
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。