1. TOP
  2. HTML / CSS Web
  3. レスポンシブ ウェブデザイン(CSSメディアクエリのメモ)

レスポンシブ ウェブデザイン(CSSメディアクエリのメモ)

カテゴリ:
HTML / CSS
Web
| トラックバック(0)
投稿者:yo yo

今なさらながらレスポンシブウェブデザイン用のメディアクエリをメモ

私も一般に言われるレスポンシブウェブデザインは好きではありません。正直、レスポンシブウェブデザインを考えた人、実装しようと思いついた人の頭を疑います。

僕はレスポンシブサイトが嫌いです。レスポンシブサイトが嫌い、というよりは普通のサイトよりも、レスポンシブサイトの方が優れているという風潮が嫌い。

僕はレスポンシブサイトが嫌いです - ぼくのぶろぐ

何故かって、レスポンシブウェブサイトは全くユーザの為になっていないんですよね。何でもかんでもレスポンシブがいいってのは絶対に間違ってる。

ただ、特定のコンテンツ、例えばテキスト主体のブログとかならば、レスポンシブウェブでも問題ないとは思います。要するに使い分けてくれと。それでもレスポンシブは使いにくいぞと。

ですがまぁ、レスポンシブを実現しているCSSのメディアクエリぐらいは覚えておかないといけないのでメモしておきます。

使わないのと使えないのじゃ全く違いますからね。

CSSメディアクエリ

/*
	@media:なんか宣言
  screen:オプション only?とか
  and:○○かつ××みたいな
  min-width:スクリーンの最少横幅
  max-width:スクリーンの最大横幅
*/
@media [only] screen and print and (min-width: 横幅) and (max-width: 横幅) {}

何かこんなの

media_query_list:  [,  ]*
media_query: [[only | not]?  [ and  ]*]
  |  [ and  ]*
expression: (  [: ]? )
media_type: all | aural | braille | handheld | print |
  projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width
  | height | min-height | max-height
  | device-width | min-device-width | max-device-width
  | device-height | min-device-height | max-device-height
  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
  | color | min-color | max-color
  | color-index | min-color-index | max-color-index
  | monochrome | min-monochrome | max-monochrome
  | resolution | min-resolution | max-resolution
  | scan | grid
メディアクエリ - Web technology for developers

モジラのサイトにはこんなのもあるらしい。要チェック。

なんか、device-widthと、widthの違いが良くわかりませんが、その辺適当でいいかと。ウェブサイトが見られればいいのです。念のため、作ったらちゃんと実機で確認して、時間のある時に検証もしておきます。

CSSメディアクエリ コピペ用

横600-900pxのデバイス

@media only screen and (min-width: 600px) and (max-width: 900px) {
	.class {
		いつもの記述
	}
	#id {
		いつもの記述
	}
}

スクリーンの時かつ、横幅600px~900pxの大きさの時。メディアタイプがscreenなので印刷メディアとかには適用されない。

横599px未満のデバイス

@media only screen and (max-width: 599px) {
	.class {
		いつもの記述
	}
	#id {
		いつもの記述
	}
}

スクリーンの時かつ、横幅599px未満の大きさの時。メディアタイプがscreenなので印刷メディアとかには適用されない。

横320px未満のデバイス、もしくは横幅が320px以上のデバイス

@media (max-width: 319px),(min-width: 320px) {
	.class {
		いつもの記述
	}
	#id {
		いつもの記述
	}
}

これって要するに全部の横幅に対応してるってこと。screenとかallとかのメディアタイプ?て必須なのかな。意味のない記述ですが、ORの記述方法。詳しくはメディアクエリ - Web technology for developersを参照して。

ここで重要なのは、ANDはand、ORは","カンマで記述するってことです。

色々記述方法がある様なので、使ったらここにコピペして追加していきます。

スマフォの横幅っていくつなのよ的な

デバイス縦 表示横 表示
iPhone 4 / 4SW640px × H960pxW960px × H640px)
iPhone 5W640px × H1136pxW1136px × H640px)
iPadW768px × H1024pxW1024px × H768px
アンドロイドよーわからん。けど基本16:9らしい
PC上記以外

画面サイズまとめてありましたけど、情報がちょっと古いですね。くわしくは引用先を。

■画面サイズ[画面解像度](単位:px)

iPhone3G / 3GS 320×480

iPhone4 640×960

iPad / iPad 2 768×1024

HT-03A 320×480

Xperia (SO-01B) / Xperia arc (SO-01C) 480×854

HTC Desire (X06HT) 480×800

Nexus One 480×800

Galaxy S 480×800

IS03 640×960

Galaxy Tab 600×1024

スマートフォン(iPhone/Android)アプリ制作時に役立つ画像サイズのまとめ

グーグルさんも推薦

検索エンジンのグーグル先生はレスポンシブウェブデザインを推薦しているようです。

« 検索エンジン対策にハマった人がハマってしまう落とし穴 | ホーム | もう(色で)迷わない!素敵な配色が選べるウェブサイト HUE/360 »

トラックバック

http://pulltab.info/mt/mt-tb.cgi/94
ページの先頭に戻る