こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

css media screen、all 使い分け

<link rel="stylesheet" href="/css/★★.css" media="all">
<link rel="stylesheet" href="/css/★★.css" media="screen">
の使い分けが良く分かりません。

印刷を分けたい時の画面用として「media="screen"」があると思うのですが、
仮に、「screen」指定だけした場合(print指定なし)は、印刷するとcssが全く適用されないのでしょうか?
と言うことは、「screen」指定した際は、必ず「print」指定もすべきなのでしょうか?

また、そもそもデフォルトの挙動はどうなっているのでしょうか?
<link rel="stylesheet" href="/css/★★.css">
と書くことも出来るのでしょうか?

投稿日時 - 2012-11-30 09:25:17

QNo.7822611

暇なときに回答ください

質問者が選んだベストアンサー

メディアタイプを指定しない場合は、デフォルトで all と解釈されます。

screen だけ指定して print の指定が無い場合は、HTMLの規定に沿ったデフォルトのスタイルで印刷されます。
従って、画面で見る場合は独自のスタイルで見せて、印刷はHTMLの規定に沿ったスタイルでいいという場合は screen だけ指定して print は無指定でも構いません。
(そのようなサイトは多数あります)

投稿日時 - 2012-11-30 09:46:27

補足

回答ありがとうございました。

>HTMLの規定に沿ったデフォルトのスタイルで印刷されます
これって、どのような内容なのでしょうか?
cssは適用されないので崩れまくっている感じなのでしょうか?
それとも、常識の範囲で、普通に読める感じなのでしょうか?

> screen だけ指定して print は無指定でも構いません
>(そのようなサイトは多数あります)
ということは、特に凝ったデザインでもなければ、
指定しないほうが背景画像とかも表示されないので、印刷した場合、読みやすいのでしょうか?


>メディアタイプを指定しない場合は、デフォルトで all と解釈されます
と言うことは、
<link rel="stylesheet" href="/css/★★.css">
と書いても良いのでしょうか?
それとも、あくまでも書いていない場合はall と解釈されるだけであって、
HTML標準的には、明示的にallと指定すべきなのでしょうか?

投稿日時 - 2012-11-30 11:32:33

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.3

 CSSとは、カスケーディングスタイルシートの略です。カスケーディングと言う仕組みはわかり易く、またとても効率的なためにCSSが数あるスタイルシートの中でもっとも良く使われています。HTML5では指定しなくてもCSSが使えます。
 カスケーディングとは、滝の流れのように次々に影響を及ぼしていく仕組みです。カスケーディングは、その出所、出現順番、最重要宣言の有無、詳細度などをひっくるめて理解すると良いでしょう。
※プロパティよりも先に身につけるべきですよ。仕様書にもプロパティより先に書いてある。

1) 出所)誰が指定したスタイルか
 ・ユーザー
 ・著者
 ・ブラウザ
  優先順位 著者>ユーザー>ブラウザ
 ※ブラウザのスタイルシートの一例は、「A. HTML 4.0におけるスタイルシートの例 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/sample.html )」にあります。
2) 出現順位
 出所が同じで、詳細度も同じなら後から出てきたもので上書きされる。
3) 最重要宣言
 ユーザー指定の最重要宣言は、著者指定の最重要宣言に勝る。

 ユーザー指定の最重要宣言>著者指定の最重要宣言>著者のスタイルシート>ユーザーのスタイルシート>ブラウザのスタイルシート


4) 詳細度、より詳しく記述してあるほうが優先される。
 一意セレクタ 0,1,0,0
 要素セレクタ 0,0,1,0 クラスセレクタ 擬似クラスも同じ
 タイプセレクタ 0,0,0,1 擬似要素も同じ
 style属性での指定 1,0,0,0
 全称セレクタ/HTMLの属性での指定は詳細度0,0,0,0

※セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )
※値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )


本題の、外部スタイルシートの指定ですが、
★mediaもtitleも指定してない、styleSheetは、固定スタイルシートと言われ
media= all としてすべてのユーザーエージェントに有効です。サイト全体を統一するためにfont-familyやline-heightなどを指定します。

★mediatypeが指定されているとそのmediaに対してのみ有効です.

★CSS3では、ディスプレイの幅による指定も可能になります。

★title属性がないスタイルシートでmediaのみ指定してあれば、そのmediaに対して固定して使用されます。

★title属性があるスタイルシートで、relの値がstylesheetのものは、指定されたmediaに対して標準スタイルシートとしてあつかわれます。

★title属性があり、relの値がAlternate StyleSheetのものは、代替スタイルシートとして扱われます。

※14.3 外部スタイルシート ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.3 )
※14.4 カスケードするスタイルシート ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.4 )

 したがって、HTMLがきちんとマークアップされていれば、ブラウザの持つスタイルシートが適用されます。そのスタイルシートは、上記「HTML 4.0におけるスタイルシートの例」のような値が適用されます。--それぞれのmedia(prent,speach,screen)用のものです。---
 印刷が想定されるページについては、印刷用のスタイルシートを用意すべきです。シンプルなデザインでよければ、ブラウザがデフォルトで持つものを利用しても良いでしょう。ただ、リンクなどの値が表示されないので、
a:after{content:"\A< "attr(href)" >";whitespace:pre;}
などで、URLが表示するようにするのが良いでしょう。

私は
<link rel="stylesheet" type="text/css" href="./styleSheet/default.css">
で、
body{font-family:;}
p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
p{text-indent:1em;}
blockquote{border:dotted 1px gray;margin:0.5em 1em;}
などだけ指定して

<link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/screen.css" title="標準">
で、スクリーン用のスタイルシート
<link rel="Alternate stylesheet" type="text/css" media="screen" href="./styleSheet/screen.css" title="大きな文字">
で視覚弱者向けなど

<link rel="stylesheet" type="text/css" media="print" href="./styleSheet/print.css">
で印刷用スタイルシートを指定することにしています。

以前、「CSSファイルの上手な使い方を教えて下さい。 - Webデザイン・CSS - 教えて!goo ( http://okwave.jp/qa/q7817905.html )」でも同様な回答をしています。

投稿日時 - 2012-11-30 15:58:15

お礼

回答ありがとうございました。

>mediaもtitleも指定してない、styleSheetは、固定スタイルシートと言われ
media= all としてすべてのユーザーエージェントに有効です。サイト全体を統一するためにfont-familyやline-heightなどを指定します
そういう言葉も定義もちゃんとあるんですね。参考になりましたー

投稿日時 - 2012-12-02 21:59:49

ANo.2

> cssは適用されないので崩れまくっている感じなのでしょうか?
> それとも、常識の範囲で、普通に読める感じなのでしょうか?
タグの持つ本来の意味通りにタグを使用していれば、普通に読めるはずです。

> ということは、特に凝ったデザインでもなければ、
> 指定しないほうが背景画像とかも表示されないので、印刷した場合、読みやすいのでしょうか?
一番簡単なのは、CSSを無効にして見てみると分かります。
先にも書いた通り、タグの持つ本来の意味通りにタグを使用していれば普通に読めるはずです。

> <link rel="stylesheet" href="/css/★★.css">
> と書いても良いのでしょうか?
OKです。

> HTML標準的には、明示的にallと指定すべきなのでしょうか?
CSSはHTMLと別モノですので、HTMLの規定でどうしろという事は決められてませんので、明示しなくても問題ありません。
また、外部CSSファイル内でメディアタイプを指定することもできます。

投稿日時 - 2012-11-30 12:19:41

お礼

回答ありがとうございました。
色々参考になりましたー

投稿日時 - 2012-12-02 21:57:57

あなたにオススメの質問