(ちょっとメモ)link よりスマートな CSSの @import と @media

<link>要素でスタイルシートのメディアを切り替える方法を紹介しましたが、
実はCSSファイルでメディアの切り替え指定を行う方法もあります。
こっちの方がHTMLの<head>にいろいろ書かずに済んで、スマートというか手っ取り早いです。

今日のソースを書く場所は、全部CSSファイルの中です。
いつものようにHTMLファイルじゃありません。

@import を使う

複数のCSSファイルを「@import」で1つにまとめる方法があります。
@import の詳細は「CSSレイアウトメモ:本文2段組みのレイアウト_外部CSSの読込み」をご覧ください。

この @import ファイル(複数のCSSファイルをまとめたファイル)内で、メディア指定します。

@import url("default.css") screen, projection, tv;
@import url("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) ;」
★「url」と () を省略可。これがいちばん短い書き方です→「@import "xxx.css" ;」
 この最後のヤツは「引用符(" ")」は必要ですよ。

@media を使う

1つのCSSファイル内で、対応メディアを分けて書くことができます。

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

このように、「@media メディア名, メディア名 { 〜 } 」でCSSの指定を囲んでやるわけです。

メディアで分けたい指定が少ないときは、この@media のほうがラクです。
指定が多い場合は、さっきの@import でファイルごと分けるほうがラク。

スマホやタブレット用のCSSの切り替えも書いておきます。
「@media メディアの種類 and (メディアの詳細)and (メディアの詳細)…」と書きます。

@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 を使った方が、HTMLの<head>内がシンプルになります。

HTMLに貼るときのメディア指定は「なし」か「all」

で、こうして作ったCSSは HTMLに<link>要素で適用しますが、
そのとき「 media属性の値はどうすんだ?」ってことですが、
media属性は省略でOK
。「all」で指定しても同じ。
「all」がデフォルトなので、media属性を省略した場合メディアタイプは「all」になります。
これで、すべてのメディアタイプが対象になりますが、CSS内で目的のメディアタイプを絞っているので大丈夫です。

<head>
	<link rel="stylesheet" href="css/style_import.css">
	<link rel="stylesheet" href="css/default.css">
</head> 

メディアタイプについて

メディアタイプは<link>要素のmedia属性で使うものと同じです。一覧表はこのとおり。

メディアタイプ メディアタイプの概要
all すべての機器(デフォルト値)
screen 一般的なコンピュータ用カラーディスプレイ
tv テレビ画面(昔のスクロール制限のあるカラーモニタのことみたい)
handheld 携帯電話などの端末(小さい画面でデータ転送容量が小さいもの)
print プリンタ
projection プロジェクタ(投影機やOHPなど)
tty 文字幅が固定された機器(テレタイプなど…ってテレタイプ知らないけど)
speech
( 以前のaural )
音声ブラウザなど音声を生成するデバイス
(CSS2では aural だったが、CSS3で非推奨になるそうです)
braille 点字ディスプレイなど突起による触覚で表示するもの
embossed 点字プリンタ(点訳して紙にエンボス加工して出力する)
関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

trackback


この記事にトラックバックする(FC2ブログユーザー)

CSSの基本2

さて、此間(こないだ)の[CSSの基本1]では、まずは基本をおさらいと言いながら結構初歩的な内容はすっ飛ばした感が否めず、予定を変更してもうちょい根幹の部分を掘り下げてみようかな〜と。 と言ってもCSS(スタイルシート)が何故必要なの?とか、文書構造に関するHTMLとの関係性なんかはそれなりに詳しく解説してるページをご覧いただくとして・・ 参照:CSSとは?−CSSの基本 by HT...
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.