最近ではWebサイトを構築する際、
閲覧されるメディアはPCのみならず、iPhoneなどのスマートフォン、iPadなどなど、
さまざまなメディアからの閲覧されることを想定して構成しなくてはなりません。

そんな数あるメディア環境をCSS3を使って調整する方法「CSS3 Media Queries」のご紹介。

CSS3MediaQueries.jpg
CSS3 Media Queries

実際の記述方法は

@media screen and (max-width: ○○px) {
	.class {
	background:#000;
	}
}

の様にスクリーンサイズ(ブラウザサイズ)について
max-widthやmin-widthを使って判断させ、CSSクラスの指定を切り替える方法です。
(上記チュートリアルページではもっと詳細な判別方法が紹介されています。)

CSS3ではブラウザウィンドウ幅をとってこれたり
JavaScriptに近いことが可能になるので、かなり期待。

CSS3でのブラウザ幅を判断するデモページも用意されています。
※ブラウザサイズを変更することでターゲット要素が変化します。
CSS3 Media Queries (demo)

jQueryでも同等のことは可能そうですが、
CSSでこれらの判別が可能ならば、そっちの方が軽く済みそうでいいですね。
残る問題はIEのみ…

ご参考までに。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (1)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

CSS3で閲覧しているメディアによってレイアウトを調整する方法「CSS3 Media Queries」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner