2.1 メディアクエリの基本
メディアクエリ (media queries) は、レスポンシブなウェブサイトを作成するための重要なツールの一つだよ。これを使えば、異なるデバイスや画面サイズに合わせてスタイルを調整できるから、最適な表示と使いやすさを実現できるんだ。ここでは、メディアクエリの基本的な使い方や文法、そして異なる画面のスタイルを適応する例を見てみよう。
メディアクエリ は @media ルールを使って、特定の条件が満たされたときだけスタイルを適用することができるんだ。条件には画面サイズや解像度、向きその他のパラメータが含まれるよ。
文法:
@media media-type and (media-feature) {
/* スタイル */
}
ここでは:
media-type: スタイルが適用されるメディアのタイプだよ。最も一般的なのは screen だね。media-feature: 幅、高さ、向きなどのメディアの特徴さ。
例:
- この例では、画面幅が768ピクセル以下の場合、ページの背景がライトブルーになっちゃうんだ。
CSS
@media screen and (max-width: 768px) {
body {
background-color: lightblue;
}
}
2.2 メディアクエリの種類
1. 幅と高さでのクエリ
これらのメディアクエリでは、ビューポートの幅や高さに応じてスタイルを変えることができるんだ。
例:
CSS
/* 画面幅が768px以下の場合にスタイルを適用 */
@media (max-width: 768px) {
.container {
padding: 10px;
}
}
/* 画面の高さが800pxより大きい場合にスタイルを適用 */
@media (min-height: 800px) {
.header {
height: 150px;
}
}
2. 向き (orientation)
画面の向きを使ったクエリにより、デバイスがポートレート (portrait) モードかランドスケープ (landscape) モードかに応じてスタイルを調整できるんだ。
例:
CSS
/* ポートレートモードの場合にスタイルを適用 */
@media (orientation: portrait) {
.sidebar {
display: none;
}
}
/* ランドスケープモードの場合にスタイルを適用 */
@media (orientation: landscape) {
.sidebar {
display: block;
}
}
3. ピクセル密度 (resolution)
ピクセル密度に基づいたメディアクエリにより、Retinaディスプレイのような異なるピクセル密度のデバイスにスタイルを適応できるんだ。
例:
CSS
/* ピクセル密度が2倍以上の画面でスタイルを適用 */
@media (min-resolution: 2dppx) {
.high-res-image {
background-image: url('high-res-image.png');
}
}
/* ピクセル密度が2倍未満の画面でスタイルを適用 */
@media (max-resolution: 1.99dppx) {
.high-res-image {
background-image: url('standard-res-image.png');
}
}
2.3 メディアクエリの組み合わせ
メディアクエリは論理演算子 and, not, only を使って組み合わせることができるんだ。
例
and演算子の使用:
CSS
/* 画面幅が600pxから1200pxのデバイスにスタイルを適用 */
@media (min-width: 600px) and (max-width: 1200px) {
.main-content {
margin: 0 auto;
width: 80%;
}
}
not演算子の使用:
CSS
/* 画面幅が600px未満のデバイス以外にスタイルを適用 */
@media not all and (max-width: 600px) {
.footer {
display: block;
}
}
only演算子の使用:
CSS
/* スクリーンのみでスタイルを適用 */
@media only screen and (max-width: 768px) {
.menu {
display: none;
}
}
GO TO FULL VERSION