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の記事も書いたので、よろしければこちらもどうぞ。

Art Text Light jQuery pluginテキストに光が移動するエフェクトを与えることができる「Art Text Light jQuery plugin」前のページ

Media QueriesをIE8以下でも使えるようにするための「css3-mediaqueries-js」次のページcss3-mediaqueries-js

関連記事

  1. CSS3を使ったツールチップ

    CSS

    CSS3を使ってアニメーションするツールチップを実装するコード

    これすごくよかったのでメモがてらエントリー。CSS3を使ってアニメーシ…

  2. CSSだけで実装できるスニペット

    CSS

    CSSのコードだけで実装できるWebデベロッパーのための28のスニペット

    とてもよさそうなまとめですね。CSSのコードだけで実装できるWebデベ…

  3. Alerts.css

    CSS

    シンプルでピュアなCSSによるアラート実装「Alerts.css」

    Alerts.cssはシンプルでピュアなCSSを使ったアラートを実装で…

  4. CSSで背景画像をアニメーションさせる

    CSS

    CSSを使ってテキストに背景画像を設定して背景をアニメーションさせるやり方

    ちょっと個人的にいいなって思ったTipsがあったのでご紹介します。CS…

  5. nth-child()とnth-last-child()

    CSS

    CSSのnth-child()とnth-last-child()の使い方をまとめてみる

    毎回使おうとする度に記憶が曖昧になっちゃってるんでここにまとめておこう…

  6. CSS

    CSSのfloatで回り込みさせたテキストを画像や要素の下に回り込ませないやり方

    ちょっとしたCSSのTipsです。結構使う機会があるのでメモがてら残し…

コメント

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

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

最近の記事

  1. 紫陽花
  2. 生ハム&モッツァレラチーズ サラダラップ
  3. コガネムシ
  4. ショルダーハム&5種の野菜サンドイッチ
PAGE TOP