ITコラム

プログラミングノウハウ

2017.01.25

#HTML入門

HTML【メタデータ】2～link要素（4）@importと@media

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

メタデータ・コンテンツについては、こちらのページもご参照下さい。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

１．@import
２．@media
３．link要素のメディア指定

１．@import

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

まず、複数のCSSファイルを@importを使って１つにまとめます。
例えば、default.css、print.cssというCSSファイルを適用したい場合、この２つのCSSファイルを、import.css（ファイル名は任意）というCSSファイルで１つにまとめて、この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は３通りの記述方法があります。どれで書いてもOKです。

@import　url("xxx.css") ;

基本型です。
　

@import　url(xxx.css) ;

基本型の引用符（” “）を省略した書き方です。
　

@import　"xxx.css" ;

基本型のurlと () を省略した書き方です。
この場合は引用符（” “）は省略できません。

▲目次へ戻る

２．@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　（メディアの詳細）…」と書きます。

▲目次へ戻る

３．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	点字プリンタ