HTML 【メタデータ】2 ~ link要素(4)@importと@media

At sign, inside of the shopping cart on a laptop. E commerce concept. Depth of field with focus on At sign.

HTML 【 metadata 】2 ~ link要素(3)media属性で、link要素でスタイルシートのメディアを切り替える方法を紹介しましたが、CSSファイル自体でメディアの切り替え指定を行う方法もあります。
link要素そのものではありませんが、今回はCSSファイルでメディアの切り替えを行う方法を紹介します。

link要素については、以下のページもご参照下さい。
HTML 【 metadata 】1 ~ メタデータ・コンテンツの概要とbase要素
HTML 【 metadata 】2 ~ link要素(1)MIMEタイプ一覧と属性一覧
HTML 【 metadata 】2 ~ link要素(2)CSSファイルの読み込み
HTML 【 metadata 】2 ~ link要素(3)media属性

目次

1.@import
2.@media
3.link要素のメディア指定

1.@import

@importを使って、メディアの切り替えを行う方法があります。

まず、複数のCSSファイルを@importを使って1つにまとめます。
例えば、default.css、print.cssというCSSファイルを適用したい場合、この2つのCSSファイルを、import.css(ファイル名は任意)というCSSファイルで1つにまとめて、このimport.cssをHTMLファイルで読み込む方法です。

まとめるためのCSSファイル(ここではimport.css)には、次のように記述します。

@charset ”UTF-8″; ←ファイルの冒頭は必ずエンコード宣言をします。

@import url(“default.css”);
@import url(“print.css”);

この時、エンコード宣言(@charset “UTF-8”;など)を必ず文頭にすることが重要です。コメント文などを文頭にすると正しく読み込めなくなるので注意が必要です。

上記のような、複数のCSSファイルをまとめたファイル(上記の例ではimport.css)内でメディアを指定をすると、メディアの切り替えを行うことができます。

@import url(“default.css”) screen, projection, tv;
@import url(“print.css”) print;

このように最後にメディアタイプを指定します。
メディアタイプは「,」で区切って複数指定できます。
このように指定すると、印刷時には印刷用のCSS(print.css)が適用されます。

スマホやタブレット用のCSSの切り替えも@import を使えます。

@import url(“yoko.css”) screen and (min-width: 480px) and (orientation:landscape) ;
@import url(“tate.css”) screen and (min-width: 480px) and (orientation:portrait) ;
@import url(“smartp.css”) screen and (max-width: 480px) ;

このように指定すると、それぞれの画面幅によってCSSが切り替わります。

@importは3通りの記述方法があります。どれで書いてもOKですよ。

@import url(“xxx.css”) ;
  基本型です。

@import url(xxx.css) ;
  基本型の引用符(” “)を省略した書き方です。

@import ”xxx.css” ;
  基本型のurlと () を省略した書き方です。
  この場合は引用符(” “)は省略できません。

▲目次へ戻る

2.@media

@mediaを使って、メディアの切り替えを行う方法があります。

(CSSファイル内へ記述します)

@media screen, projection, tv {
body { font: 100%/1.6em sans-serif }
}
@media print {
body { font: 12px/1.3em serif }
}

このように、「@media メディア名, メディア名 {  } 」でCSSの指定を囲むように記述します。

メディアで分けたい指定が少ない場合などに適した書き方です。
指定が多い場合は、@importでファイルごと分ける方が書き易いです。

スマホやタブレット用のCSSの切り替えは次の通りです。

(CSSファイル内へ記述します)

@media screen and (min-width: 480px) and (orientation:landscape) {
/*480px以上のタブレット、横持ち(landscape)用の指定*/
}
@media screen and (min-width: 480px) and (orientation:portrait) {
/*480px以上のタブレット、縦持ち(portrait)の指定*/
}
@media screen and (max-width: 480px) {
/*480px以下、スマホ用の指定*/
}

このように、「@media メディアの種類 and (メディアの詳細)and (メディアの詳細)…」と書きます。

▲目次へ戻る

3.link要素のメディア指定

@importや@mediaで記述したCSSファイルは、HTMLファイル内のlink要素で適用しますが、その際のmedia属性は省略又はallでOKです。
media属性はallがデフォルト値なので、media属性を省略した場合もallに指定した場合も同じ結果になります。
HTMLファイル上では全てのメディアタイプが対象になりますが、CSSファイル内で目的のメディアタイプが指定されているので、意図した結果が得られます。

<head>
 <link rel=”stylesheet” href=”css/import.css”>
 <link rel=”stylesheet” href=”css/default.css”>
</head>

メディアタイプの値は、link要素のmedia属性で使う値と同じです。

メディアタイプ メディアタイプの概要
all すべての機器(デフォルト値)
screen 一般的なコンピュータ用カラーディスプレイ
tv テレビ画面(スクロール制限のあるカラーモニタ)
handheld 携帯電話などの端末(小さい画面、モノクロ、周波帯域が小さいもの)
print プリンタ
projection プロジェクタ(投影機やOHPなど)
tty 文字幅が固定された機器
speech
(以前のaural)
音声ブラウザなど音声を生成するデバイス
(CSS3ではauralは非推奨です)
braille 点字ディスプレイなど
embossed 点字プリンタ

▲目次へ戻る

コメントを残す

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