Media Queryを触りながら試してみよう! [Japanese Version Only]

「Medua Queryを活用したスタイルの使い分けを試してみたいけれど準備をするのは面倒だなあ」と思っている方にオススメ!

Media Queryを試せるサンプルコードを用意しました!フォークするとすぐにMedia Queryを試せます!

サンプルコードはウインドウサイズを変えることで異なるスタイルが適用されます。
エディット画面のプレビューエリアはサイズを変えることができないので、
「Smart Phone Preview」ボタンをクリックしてポップアップでプレビューエリアを表示してください。

こんなことを試してみよう!

  • ウインドウサイズによって異なるスタイルが適用されていることを確認します。
  • CSSのタブを開いて、Media Queryの記述を確認してみましょう。
  • 数値やスタイルを変更して、どのように反映されているかを確認してみましょう。
    反映するためには「Save」ボタンを押下した後、プレビューウインドウをリロードします。

Media Queryってなんだっけ?

Media Queryはウインドウのサイズやデバイスの解像度などの様々な条件でスタイルをコントロールするための仕組みです。
例えば、標準的なコンテンツ幅が950pxのサイトの場合、ワイドスクリーンで表示しているユーザーにはコンテンツの幅を1200pxに設定したり、低解像度のデバイスで表示しているユーザーにはコンテンツ幅を600pxに設定するなど、ユーザーの環境に合わせた最適なスタイルを設定することができるのです。

Media Queryを活用しているサイトの例

Media Queryの基本的な書き方を見てみましょう

ウインドウの幅を基準にスタイルを変更する場合はこのように記述します。

/* ウインドウの幅が300px以上の時 */
@media screen and (min-width: 300px) {
    div{
        background: #ff9000;
        color: #fff;
    }
}

/* ウインドウの幅が500px以上の時 */
@media screen and (min-width: 500px) {
    div{
        background: #ffb700;
    }
}

/* ウインドウの幅が700px以上の時 */
@media screen and (min-width: 700px) {
    div{
        background: #ff5600;
    }
}

/* ウインドウの幅が900px以上の時 */
@media screen and (min-width: 900px) {
    div{
        background: #a65e00;
    }
}

さらに高度な条件でMedia Queryを指定できます。

and指定

ウインドウの幅が300px以上かつ高さが600px以上の時

@media screen and (min-width: 300px) and (min-height: 600px){
    div{
        background: #ff9000;
    }
}

デバイスのサイズで指定

スマートフォンやタブレットで専用のスタイルを適用したいときなどに使えます。

@media screen and (device-width) {
    div{
        background: #ff9000;
    }
}

その他にもいろいろな指定方法があります。

サンプルコードをベースにして、実際に書いてみましょう!

Media Queryを使ったサンプルコードを作成しました。
ぜひ、こちらのコードをフォーク(アレンジ)してMedia Queryを触りながら試してみてください!

「Fork」ボタンから書き始めることができます。

サンプルコードはウインドウサイズを変えることで異なるスタイルが適用されます。
エディット画面のプレビューエリアはサイズを変えることができないので、
「Smart Phone Preview」ボタンをクリックしてポップアップでプレビューエリアを表示してください。

Comment

Recommendations

Facebook page