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

    WebデザインのためCSSエフェクトを実装できる5つのライブラリ

    とても役立ちそうなまとめだったのでメモがてらご紹介します。Webデザイ…

  2. 動画をレスポンシブにするCSS

    CSS

    動画をレスポンシブに対応させるCSSのTipsがとても便利

    以前、YouTubeやVimeoからの埋め込み動画をレスポンシブにする…

  3. CSSで上下の要素を入れ替えて配置させるやり方

    CSS

    CSSのレイアウトで上下の要素を入れ替えて逆に配置させるやり方

    CSSでレイアウトを組む時に、上下に二つ並んでいる要素を入れ替えて逆に…

  4. Alerts.css

    CSS

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

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

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

    CSS

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

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

  6. CSS

    CSSを使ったエフェクトつきボタンを探せる「CSS Buttons」

    CSSでエフェクトがついたボタンを作りたいときに役立つ「CSS But…

コメント

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

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

最近の記事

  1. TAP-F27-2KP
  2. M32ミニ
  3. CITTA TT5.0
  4. Kindle Oasis

アーカイブ

PAGE TOP