こんにちは。まるたにです。

前回の続きをしますっ。読んでも覚えてないでしょうけど・・・（　＾ω＾）。

メディアクエリーの設定

レスポンシブwebデザインでは「メディアクエリー」を使ってスクリーン幅を応じてCSSを切り替えます。メディアクエリーとは、デバイスの画像解像度・ウィンドウの幅・向きなどの指定条件に合わせて別々のCSSを適用できる機能です。

メディアクエリーを使ったCSSの切り替えでは、CSSを切り替える条件である「ブレイクポイント（Break Point）」を決めそれぞれの条件に沿ったスタイルシートを記述していきます。

ブレイクポイントの決定

ブレイクポイントとはメディアクエリーによってCSSを切り替える条件となるポイントのことでブラウザーのウィンドウ幅（px）で考えます。
デバイスに依存しないのがレスポンシブwebデザインの原則ですが多くのユーザーが使うであろうデバイスを念頭に、以下の表のようなブレイクポイントを決めます。

メディアクエリーを使いこなす

メディアクエリーは、デバイスの画像解像度やブラウザーのウィンドウサイズ・向きなどの指定条件に合わせて別々のCSSを適用するCSS3の機能です。
CSS2.1ではMedia type（メディアタイプ）によって、CSSを適用するメディア（スクリーン、プリンター等）を指定できました。例えば、以下のように記述すると指定したCSSをパソコンの画面にだけ適用できます。

HTMLのlink要素を利用してメディアタイプを指定する方法

<link rel=”stylesheet” href=”styles.css” media=”screen“>

@mediaを利用してスタイルシート内でメディアタイプを指定する方法

@media screen{/*ここにCSSを記述*/}

メディアタイプにはscreen以外にも➀のような値が指定できます。

➀
all　⇒　すべてのデバイス
aural　⇒　スピーチ
braille　⇒　点字
embossed　⇒　点字文書
handheld　⇒　モノクロームの携帯電話　
print　⇒　プリンター
projection　⇒　プロジェクター
screen　⇒　パソコンの画面
tty　⇒　テレタイプライター（ドット印字）
tv　⇒　テレビ

CSS3のメディアクエリーは、このメディアタイプをベースにデバイスのウィンドウサイズやデバイスの向きなどの細かな条件を設定できるように拡張したものです。

メディアクエリーの指定方法
メディアクエリーは、メディアタイプと同様に「link要素」と「＠media」を利用した2つの方法で記述できます。

link要素を利用する場合

<link rel=”stylesheet” href=”desktop.css” media=”[not|only]メディアタイプ[and](デバイスの条件)“>

@mediaを利用する場合

@media [not|only]メディアタイプ[and](デバイスの条件){}

メディアクエリーでは、「メディアタイプ」で指定しているデバイスの機能や状態を記述し、条件分岐【 conditional branch ：条件分岐(じょうけんぶんき)とは、プログラム中で、ある条件が満たされているかどうかによって次に実行するコードを切り替える命令。また、そのようなコード。】文のように「真」か「偽」を判定してCSSを振り分けます。条件は「not」「only」「and」等のキーワードを使って記述します。キーワードの意味は次の通りです。
・not・・・・・のみではない
・only・・・・のみ
・and・・・・のみかつ

「デバイスの条件」は、表のようなプロパティと値を対にして指定できます。

width ⇒　ウインドウの幅
height　⇒　ウインドウの高さ
device-width　⇒　デバイスの実際のスクリーンの幅
device-height　⇒　デバイスの実際のスクリーンの高さ
orientation　⇒　オリエンテーション
aspect-ratio　⇒　ウインドウの縦横比
device-aspect-ratio　⇒　デバイスの縦横比
color　⇒　カラーのビット数
color-index　⇒　カラーのチャンネル数
monochrome　⇒　モノクロの諧調(かいちょう)数
device-pixel-ratio　⇒　デバイスのピクセル解像度(webkitの独自実装)
resolution　⇒　解像度
scan　⇒　走査線
grid　⇒　グリッドベースのデバイス

どうでしたでしょうか？？レスポンシブwebデザインも奥が深いので説明をしたくても足りないんですよね。
この続きもまだまだありますがひとまず終わります。また機会があれば・・・ｗ

みなさん雪道の転倒にお気を付けてくださいね。もうすぐ12月。・・・早い！！それではまた！

Tweet