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の:beforeと:afterを使ってちょっとした装飾をつけてみる

    CSSの:beforeと:afterを使ってちょっとした装飾をつけるこ…

  2. CSS

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

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

  3. CSS

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

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

  4. CSSでテキストを縦にするやり方

    CSS

    CSSでテキストを縦の位置にするやり方

    ちょっと便利そうだったのでメモがてらご紹介。CSSでテキストを縦の位置…

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

    CSS

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

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

  6. CSS

    リストを横並びにした際に簡単に均等にすることができるdisplay:table-cellを使ってみる…

    リストを横並びにした際にli要素の幅を簡単に均等にすることができるdi…

コメント

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

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

最近の記事

  1. ベーコンエッグ&厚切りバタートースト
  2. 有栖川公園
  3. 広尾のスタバ
  4. マーガレットハウエルとミズノのコラボシューズ
  5. フレンチトーストや自家製ソーセージ

アーカイブ

PAGE TOP