ITOBEN STYLE > EC-CUBEレスポンシブWebデザイン：メディアクエリとブレイクポイントの設定 2013年8月9日カテゴリー:未分類 EC-CUBEレスポンシブWebデザイン：メディアクエリとブレイクポイントの設定 レスポンシブWebデザインを実現するためには、メディアクエリが不可欠です。 メディアクエリは、ウィンドウの幅や画像解像度、ディバイスの向きなどを条件にして、HTMLに適用するスタイルを切り替えることができるCSS3の新機能です。 たとえば下記のように使用します。 [php] .block_body { color:#666; } /* タブレット向けのスタイル：460px ～ 979px */ @media only screen and (min-width: 460px) { .block_body { color:#000; } } /* PC向けのスタイル：980px */ @media only screen and (min-width: 980px) { .block_body { color:#fff; } } [/php] ↑ ウィンドウの幅が460px未満（スマホ向け）では、色をグレー（#666）で表示する。 ウィンドウの幅が460px以上（タブレット向け）になったら、色を黒（#000）にする。 ウィンドウの幅が980px以上（PC向け）になったら、色を白（#fff）にする。 460px、980pxが、ブレイクポイントになります。
[php]
.block_body {
color:#666;
}
/* タブレット向けのスタイル：460px ～ 979px */
@media only screen and (min-width: 460px) {
.block_body {
color:#000;
}
}
/* PC向けのスタイル：980px */
@media only screen and (min-width: 980px) {
.block_body {
color:#fff;
}
}
[/php]
↑
ウィンドウの幅が460px未満（スマホ向け）では、色をグレー（#666）で表示する。
ウィンドウの幅が460px以上（タブレット向け）になったら、色を黒（#000）にする。
ウィンドウの幅が980px以上（PC向け）になったら、色を白（#fff）にする。
460px、980pxが、ブレイクポイントになります。