[CSS]CSS3のMedia Queries（メディアクエリ）の使い方と実装例

CSS3 Media Queries 下記は各ポイントを意訳したものです。 はじめに CSS2のMedia typesではscreen, printなどのように特定のメディア用のスタイルシートを設定することができました。CSS3ではクエリを加えることで、さらに効率的にスタイルシートを使用できます。 Media Queriesはユーザーの状態を調べ、それにあった特定のスタイルシートを適用することができます。例えば、大きいディスプレイ用と小さいモバイル用にそれぞれ異なるスタイルシートを指定することができます。 Media Queriesの使い方 まずは、デモページをみてください。 ブラウザのサイズを変更すると、スタイルが変更されます。

[futarigake]

メディアクエリ

[eagleyama]

“Media Queriesはユーザーの状態を調べ、それにあった特定のスタイルシートを適用することができます。例えば、大きいディスプレイ用と小さいモバイル用にそれぞれ異なるスタイルシートを指定することができます。”

[kerokerori]

簡潔でわかりやすい

[natsukareala]

mediaQuery

[masayukif9]

“Hicksdesign”

[beth321]

　コリス

[code404]

Media Queriesの使い方と実装例を紹介します。

[fumihidew]

CSS3のMedia Queries（メディアクエリ）の使い方と実装例

[hiralinko]

スマホ、タブレット最適化

[munenaga]

CSS2のMedia typesではscreen, printなどのように特定のメディア用のスタイルシートを設定することができました。CSS3ではクエリを加えることで、さらに効率的にスタイルシートを使用できます。 Media Queriesはユーザーの状態を調

[flashball]

メディアクエリー

[blogpants]

端末によって見せ方を変える。 今後の拡張でも、素早く対応できる感じかな。

[kurobuchi]

ありがたいまとめ記事。これこそリキッドレイアウト！

[mura24]

[CSS:Media Queries]

[kams3261]

CSS3のMedia Queries（メディアクエリ）の使い方と実装例

[hedeyoshi]

こっちもブクマしとこう。

[takarakuda]

css3 - Media Queries　ユーザーの状態を調べ、それにあった特定のスタイルシートを適用する

[slywalker]

Media Queries

[Kimura]

CSS3からはスタイルシートの適用に条件をつけることが出来るのか。。。

[hisasann]

ややこしくなりそうだから、これを使わないようにサイト設計したいな

[yomogi]

サイトのスマートフォン対応…というよりもマルチデバイス対応はCSS3のメディアクエリで乗り切れるケースもあるのだろうな。ここでもIE爆発しろ問題はありそうだけど。

[kuwalab]

スクリーンのサイズでスタイルを変える。

[zazakki]

「Media Queriesはユーザーの状態を調べ、それにあった特定のスタイルシートを適用することができます。」「Media Queriesは現在のIE8ではサポートされていません。」

[takami_hiroki]

大きいディスプレイ用と小さいモバイル用にそれぞれ異なるスタイルシートを指定することができます。

[snobsnog]

ふー。いくつ準備すればいいんだろうなあ。

[sea_mountain]

カラムレイアウト

[a2ikm]

「Media Queriesとは最適化のためではなく、プレゼンテーションのためのものです」

[gonta02]

CSS3のMedia Queries（メディアクエリ）の使い方と実装例

[fooo]

Media Queriesを使うことで、ブラウザサイズに合わせて異なるスタイルシートを指定することができる。IEでの適用にはJavascriptが必要

[skunk0915]

環境ごとにスタイルシート切り替え