Good morning！！
may I have Get up Please！！
今日はメディアクエリについて書いていくよ！！
今日も朝から銀行まわり行く前にアウトプットしていきますね！！
まずはメディアクエリとは？
Link要素やmedia要素にmedia属性が指定できるという説明もしました。
で、今回はCSSに直接書いて拡張することができます。
それでは書いて行きますね、
前回のはコピペさせてもらいます。
参照記事はこちら
<link rel=”stylesheet” herf=”ほにゃらら.css” media=”適応対象”>
というところでしょうか？
mediaの使い方は、
all すべての機器 screen パソコン画面 print プリンタ projection プロジェクタ
tv テレビ handheld 携帯用機器（画面小さいもの）speech 音声読み上げソフト
braille 点字ディスプレイ embossed 点字プリンタ
<link rel=”stylesheet” herf=”.css” media=”all”>
何もかかないと、デフォルトではallになっているとは思います。
という感じで、
CSS3では、
「出力媒体」と「メディア属性：値」の式が成り立ちます。
あとは必要なだけ（およびand(メディア特性：値)）を指定していくことができます。
これはデモるのは、ちょっとよいしょいりますので、
値を書いていきますね！！
簡単に式でいうと、
media=”出力媒体”
media=”出力媒体,出力媒体”
でCSS3に則ってできることは、
madia=”出力媒体 and (メディア特性: 値)”
media=”出力媒体 and (メディア特性: 値) and (メディア特性: 値), 出力媒体”
CSS3で書けるようになった？メディア特性じゃあがさっと書いていきますね！！
- width 表示領域の幅
- min-width これ以上で適応
- max-width これ以下で適応
- height 表示領域の高さ
- min-height これ以上で適応
- max-height これ以下で適応
- device-width 出力領域の画面全体の幅
- これも同じく min max があります。
- device-height 出力領域の画面全体の高さ
次はちょっと珍しいのいきます。
- aspect-ratio WとHの比率 これは整数で表します 整数/整数 例 4/3
これもminとmaxでの表記があります。
その頭に「device」をつけて device-aspect-ratio
このあたりは深く掘り下げないと難しいかもですね、、
あとはカラーでのメディア特性があります。
使い勝手としては個人的に、たぶんですが、サーバー側の意図した表現の色の出力ができないときはコレ、
できるときはコレみたいな細かい親切なデザインができるということになりますね。
簡単にデモというか例を載せておきます！！
@media screen and (min-width: 640px;) and (max-width: 800px) {
p{font-size: 12px;}
#sideber{width:80%; height: 300px;}
}
ざっとこんな感じでしょうか？
そしたら画像載せておきます！！
で、！！
今から銀行行ってきます！！
ちなみに次回はCSS3の醍醐味のアニメーションをこだわってやりたいと思います！！
サランヘヨ！！
