読者です 読者をやめる 読者になる 読者になる

Media Queries(メディアクエリ)

レスポンシブWebデザイン

Media Queries(メディアクエリ)

  • CSS3
  • CSS2からある、Media Type の拡張
  • スクリーンサイズに応じて、CSSを使い分ける
  • バイスの解像度に応じて、CSSを使い分ける
Media Queries、IE への対応
<!--[if lt IE 9]> 
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
<![endif]-->

これで IE でも Media Queries を使うことができるようになります。

メディアクエリで指定できるもの

  • W3C Media Queries
  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

各デバイスによって、見やすいようにメディアクエリによってレイアウトを変化させます。

メディアクエリの書き方
@media only screen and (max-width: 767px) {

}
幅指定の単位
  • 基本的には、px(従来の制作フローを考慮し)

デスクトップファーストとモバイルファースト

  • レスポンシブWebデザインの記述順序を指します
  • デスクトップファーストでは、PCが基準となるため情報過多になります
  • 一方、モバイルファーストは、PCでは情報が少ないと感じることもあります
バイルファースト
  • 2009年にルーク・ウロブルスキー氏(Luke Wroblewski、以下ルーク氏)によって提唱した、ビジネスやサービスの仕組み(メディアクエリのモバイルファーストとは、意味が違います)