Media Queriesの@media

CSS

Media Queriesの@mediaを使ってブラウザ幅やデバイス幅に応じたCSSを記述してみる

CSS3のMedia Queriesのうちの一つ、@mediaを使ってみたのでメモしておきます。一般的によく使いそうなものを簡単にまとめておこうかと思います。今後、おそらく使っていく予定なので、少しずつでも覚えていきたいですね。レスポンシブWebデザインには欠かせないものだと思うので。

[ads_center]

@mediaでCSSファイル内に直接記述していく

CSSファイル自体を分けるやり方もありますが、個人的には@mediaを使って1つのCSSファイル内に直接記述していく方が合っているのでこちらを使っていこうかと思っています。

min-width

ブラウザの横幅が〇〇以上のものを指定していきます。

/* ブラウザ幅が960px以上 */
@media screen and (min-width: 960px) {
    .sample {
        background: red;
    }
}

max-width

ブラウザの横幅が〇〇以下のものを指定していきます。

/* ブラウザ幅が600px以下 */
@media screen and (max-width: 600px) {
    .sample {
        background: blue;
    }
}

and

ブラウザの横幅が〇〇〜〇〇の間を指定していきます。

/* ブラウザ幅が700px〜800pxの間 */
@media screen and (min-width: 700px) and (max-width: 800px) {
    .sample {
        background: green;
    }
}

min-device-width

デバイス幅が〇〇以上のものを指定していきます。

/* デバイス幅が500px以上 */
@media only screen and (min-device-width: 500px) {
    .sample {
        color: #eee;
    }
}

ちなみに、min-device-widthとmin-width(またはmax-device-widthとmax-width)の違いはなんだろうと思い調べてみたんですが、どうやらデバイス幅とブラウザ幅の違いみたいですね。

例えば、CSSにデバイス幅が500px以下の指定が記述されていた場合、500px以上あるデバイス(PCなど)のブラウザをいくら縮小しても、そのCSSは適用されないということです。

max-device-width

デバイス幅が〇〇以下のものを指定していきます。

/* デバイス幅が500px以下 */
@media only screen and (max-device-width: 500px) {
    .sample {
        color: #ccc;
    }
}

orientation: portrait

デバイスの向きが縦の場合です。

/* デバイスの向き(縦) */
@media only screen and (orientation: portrait) {
    .sample {
        background: yellow;
    }
}

orientation: landscape

デバイスの向きが横の場合です。

/* デバイスの向き(横) */
@media only screen and (orientation: landscape) {
    .sample {
        background: orange;
    }
}

ということで、大体この辺をよく使いそうな感じだったのでまとめてみました。

以下、自分が作った時のサンプルコードを載せておきます。

サンプルコード(HTML)

<p class="sample1">サンプル</p>
<p class="sample2">サンプル</p>

サンプルコード(CSS)

/* ブラウザ幅が960px以上 */
@media screen and (min-width: 960px) {
    .sample1 {
        background: red;
    }
    body {
        width: 960px;
    }
}

/* ブラウザ幅が600px以下 */
@media screen and (max-width: 600px) {
    .sample1 {
        background: blue;
    }
}

/* ブラウザ幅が700px〜800pxの間 */
@media screen and (min-width: 700px) and (max-width: 800px) {
	.sample1 {
		background: green;
	}
}

/* デバイス幅が500px以上 */
@media only screen and (min-device-width: 500px) {
    .sample1 {
        color: #eee;
    }
}

/* デバイス幅が500px以下 */
@media only screen and (max-device-width: 500px) {
    .sample1 {
        color: #ccc;
    }
}

/* デバイスの向き(縦) */
@media only screen and (orientation: portrait) {
    .sample2 {
        background: yellow;
    }
}

/* デバイスの向き(横) */
@media only screen and (orientation: landscape) {
    .sample2 {
        background: orange;
    }
}

Media QueriesをIE8以下にも対応させるためのcss3-mediaqueries-jsの記事も書いたので、よろしければこちらもどうぞ。

関連記事

  1. CSS

    CSSだけを使ったストライプ(斜め・水平・垂直など)の作り方

    CSSだけを使ったストライプの作り方「Stripes in CSS」が…

  2. CSS

    CSS3でフォントサイズを指定する単位は「rem」がとても便利

    CSS3から新しく出来たフォントサイズ指定の単位「rem」がとても便利…

  3. CSS

    CSSで画像をfloatさせた時にテキストの行間を綺麗に揃えるやり方

    何気にこういう細かい部分を調整してあげると見た目も綺麗なりますよね。C…

  4. CSSチュートリアルまとめ

    CSS

    CSS初心者のための役立つ75のチュートリアルまとめ

    とても便利で役立つチュートリアル集「75 CSS Tutorial f…

  5. CSSグラデーションジェネレーター「Gradientoo」

    CSS

    直感的な操作感!CSSグラデーションを作成できるジェネレーター「Gradientoo」

    CSSのグラデーションを作成できる素敵なジェネレーター「Gradien…

  6. Animated Transition Effects

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. LAOWA 10-18mm F4.5-5.6 FE Zoom
  2. M3IETW BLACK
  3. V60珈琲王2 コーヒーメーカー
  4. Anker PowerCore Lite 20000
  5. ネクスタイム

Instagram始めました

Facebookページ

アーカイブ

PAGE TOP