CSSメディアクエリ-その他の例
メディアクエリの使用例をいくつか見てみましょう。
メディアクエリは、カスタマイズされたスタイルシートをさまざまなデバイスに配信するための一般的な手法です。
簡単な例を示すために、さまざまなデバイスの背景色を変更できます。
例
/* Set the background color of body to tan */
body {
background-color: tan;
}
/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
自分で試してみる»
なぜ正確に992pxと600pxを使用するのか疑問に思いますか?これらは、デバイスの「典型的なブレークポイント」と呼ばれるものです。典型的なブレークポイントについて詳しくは、レスポンシブWebデザインのチュートリアル.
メニューのメディア クエリ
この例では、メディアクエリを使用して、画面サイズごとにデザインが異なるレスポンシブナビゲーションメニューを作成します。
例
/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* On screens that are 600px wide or less, make the menu links stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
自分で試してみる»
列のメディア クエリ
メディアクエリの一般的な用途は、柔軟なレイアウトを作成することです。
この例では、さまざまな画面サイズに応じて、4列、2列、または全幅列の間で変化するレイアウトを作成します。
例
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
}
/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
自分で試してみる»
ヒント：列のレイアウトを作成するより現代的な方法は、CSSFlexboxを使用することです(以下の例を参照)。ただし、InternetExplorer10以前のバージョンではサポートされていません。IE6-10のサポートが必要な場合は、floatを使用します(上記を参照)。
フレキシブルボックスレイアウトモジュールの詳細については、CSSフレックスボックスの章を読む.
レスポンシブウェブデザインの詳細については、レスポンシブWebデザインのチュートリアルを読む.
例
/* Container for flexboxes */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create four equal columns */
.column {
flex: 25%;
padding: 20px;
}
/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}
自分で試してみる»
メディアクエリで要素を非表示にする
メディアクエリのもう1つの一般的な用途は、さまざまな画面サイズで要素を非表示にすることです。
私は小さな画面に隠れます。
例
/* If the screen size is 600px wide or less, hide the element */
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
自分で試してみる»
メディアクエリでフォントサイズを変更する
メディアクエリを使用して、さまざまな画面サイズで要素のフォントサイズを変更することもできます。
可変フォントサイズ。
例
/* If screen size is more than 600px wide, set the font-size of <div> to 80px */
@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
}
}
/* If screen size is 600px wide, or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
自分で試してみる»
柔軟な画像ギャラリー
この例では、メディアクエリをフレックスボックスと共に使用して、レスポンシブイメージギャラリーを作成します。
柔軟なウェブサイト
この例では、メディアクエリをフレックスボックスと共に使用して、柔軟なナビゲーションバーと柔軟なコンテンツを含むレスポンシブWebサイトを作成します。
向き:縦/横
メディアクエリを使用して、ブラウザーの向きに応じてページのレイアウトを変更することもできます。
ブラウザーウィンドウが高さよりも広い場合にのみ適用される一連のCSSプロパティを使用できます。これは、いわゆる「横向き」の向きです。
例
横向きモードの場合は水色の背景色を使用します。
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
自分で試してみる»
最小幅から最大幅
また、(max-width: ..) and (min-width: ..)最小幅と最大幅を設定する値。
たとえば、ブラウザーの幅が600～900ピクセルの場合、<div>要素の外観を変更します。
例
@media screen and (max-width: 900px) and (min-width: 600px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
自分で試してみる»
追加の値を使用する:以下の例では、カンマを使用して既存のメディアクエリに追加のメディアクエリを追加します(これはOR演算子のように動作します)。
例
/* When the width is between 600px and 900px <strong>OR</strong> above 1100px - change the appearance of <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
自分で試してみる»
CSS@mediaリファレンス
すべてのメディアタイプと機能/表現の完全な概要については、CSS リファレンスの @media ルール.
ヒント：レスポンシブWebデザイン(さまざまなデバイスや画面をターゲットにする方法)の詳細については、メディアクエリブレークポイントを使用して、こちらをお読みください。レスポンシブWebデザインのチュートリアル.
