CSSをHTML上に読み込ませる際のmedia属性と
CSSファイルをインポートする際の@importについて本日知ったこと。。。

今まではブラウザでの表示用CSSと印刷用CSSの読み込み指定する際、

<link rel=”stylesheet” type=”text/css” href=”common.css” media=”all” />
<link rel=”stylesheet” type=”text/css” href=”print.css” media=”print” />

といった具合に<head>タグ内でmedia属性の切り替えをしていましたが、
CSS内でそれらを判別させる記述方法がありました。

記述の仕方は

@media print { セレクタなどを記述 }

こんな感じで。

例えば
@media screen { font-size: 12px; }
@media print { font-size: 10px; }

という風に記述をすると、
ブラウザ(モニター)上ではフォントが12px、
印刷時には10pxとなります。

今まではmediaの判別は上記に書いたソースの様に記述して判別させ、
screen.css(CSSファイルインポート用CSSファイル)を用意して
その中で@importを使って、

@import url(“common.css”);

といったかたちで読み込む指定で使っていましたが、

@media all { @import url(“common.css”); }
@media print { @import url(“print.css”); }

こんな書き方をすればソースでmediaを切り替えるのではなく
CSSファイル内で完結できそうです。

…とか思っていたらもっと簡単な記述が。。。

@import url(“common.css”) all;
@import url(“print.css”) print;

これでmedia属性の切り分けは済んでしまうもよう…
“@media” “@import”でこんな色々使い分けができるとは知らなかった…

参考サイト

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

CSSの“@media”“@import”の使い方

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR