人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

htmlの質問です
モノクロ印刷用のcssとカラー印刷用のcssを分けたいのですが
そんなことできるのでしょうか?

●質問者: takanii
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● きゃづみぃ
●34ポイント

それぞれ モノクロ用のホームページと カラー用のホームページを作れば 分けることにはなりますし、それが一番簡単でもあると思いますね。


2 ● a-kuma3
●33ポイント

多分、できるはずです。

/* 白黒プリンタ用のスタイル */
@media print and (monochrome) {
 #hoge {
 background-color: white;
 }
}

/* カラープリンタ用のスタイル */
@media print and (color) {
 #hoge {
 background-color: yellow;
 }
}
/*
 ↑とも書けますが、画面もカラーでしょうから、カラー用は画面もプリンタも、
 まとめてスタイルが書けます。
 */
/* 全てのデバイス(画面もプリンタも)で、カラー用のスタイル */
@media all and (color) {
 #hoge {
 background-color: yellow;
 }
}


こういうのを、「メディアクエリ」と言うそうです。
以下のようなところをご参考に。
http://www.marguerite.jp/Nihongo/WWW/RefCSS/MediaQueries/index.html
https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Media_queries


a-kuma3さんのコメント
コメントが消されてるってことは、自分でたどり着いたということですよね? 一応、規格へのリンクと引用を。 >http://www.w3.org/TR/css3-mediaqueries/#monochrome> **EXAMPLE 37 Express that there is one style sheet for color pages and another for monochrome: >|| <link rel="stylesheet" media="print and (color)" href="http://…" /> <link rel="stylesheet" media="print and (monochrome)" href="http://…" /> ||< << 外部CSS をひとつにして、その中を分ける、ということでも大丈夫です。

takaniiさんのコメント
たどり着いて試してみたのですが うまく働きませんでした 残念です

3 ● holoholobird
●33ポイント

英語ですが同じ質問している人がいます。
http://stackoverflow.com/questions/17294817/media-queries-color-monochrome-and-printing

http://www.quirksmode.org/css/tests/mediaqueries/color.html
特に下のページが参考になるかもしれません


4 ● boost_beast
●0ポイント

http://www.fsfield.info/develop/css/007/
こちらが参考になると思います。

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ