メディアクエリCSSの書き方
説明: 本記事では、CSSメディアクエリを使用して、画面サイズ、解像度、向きなどのさまざまなデバイス特性に基づいて異なるスタイルルールを適用し、レスポンシブWebデザインを作成する方法について詳しく説明します。
一、メディアクエリの基礎
1. メディアクエリとは
- 定義: メディアクエリは、デバイスの特性に基づいて異なるスタイルシートを適用できるようにするCSSの技術です。
- 役割: デバイスの特性に基づいて異なるCSSルールを読み込み、Webページのレスポンシブレイアウトと機能を実現します。
2. メディアクエリの構文
- 基本構造:
@mediaキーワード + メディアタイプ +andキーワード + メディア特性 +{ CSS ルール } - 例:
@media screen and (max-width: 600px) {
/* 画面幅が600px以下の場合に適用されるスタイル */
}
二、よく使用されるメディアタイプ
- all: すべてのデバイス
- print: プリンター
- screen: 画面付きデバイス
- speech: スクリーンリーダーなどの音声合成デバイス
三、よく使用されるメディア特性
1. 幅と高さ
width: ビューポートの幅height: ビューポートの高さmin-width: 最小ビューポート幅max-width: 最大ビューポート幅min-height: 最小ビューポート高さmax-height: 最大ビューポート高さ
2. 向き
orientation: portrait: 縦向きorientation: landscape: 横向き
3. 解像度
resolution: デバイスの解像度min-resolution: 最低解像度max-resolution: 最高解像度
4. その他のよく使用される特性
aspect-ratio: ビューポートのアスペクト比color: 色深度grid: デバイスがグリッドレイアウトをサポートしているかどうか- ...
四、論理演算子
- and: すべての条件が満たされている必要がある
- not: 特定の条件を除外する
- or(カンマ): いずれかの条件が満たされればよい
五、メディアクエリの使用上のコツ
- 優先順位と順序: 後で定義されたメディアクエリの方が優先順位が高い
- 簡略表記: メディアタイプを省略すると、デフォルトで
allになる - メディアクエリテストツールの使用: Chromeデベロッパーツールなど
- メディアクエリの使いすぎを避ける: コードを簡潔で保守しやすい状態に保つ
六、メディアクエリの例
- 画面サイズに応じて異なるレイアウトを適用する
@media (max-width: 768px) {
/* タブレットおよびそれ以下の場合 */
.container {
width: 90%;
}
}
@media (max-width: 480px) {
/* スマートフォン画面の場合 */
.container {
width: 100%;
}
}
- 向きに応じて要素を表示/非表示にする
@media (orientation: landscape) {
.sidebar {
display: block;
}
}
@media (orientation: portrait) {
.sidebar {
display: none;
}
}
七、まとめ
メディアクエリは、レスポンシブWebデザインを作成するための強力なツールです。メディアクエリを適切に使用することで、さまざまなデバイスに最適なユーザーエクスペリエンスを提供できます。
Q&A
1. メディアクエリで複数の条件を指定するにはどうすればよいですか？
論理演算子（and、not、,(カンマ)）を使用して、複数の条件を組み合わせることができます。
例えば、画面幅が600px以下で、縦向きの場合のみスタイルを適用するには、次のように記述します。
@media (max-width: 600px) and (orientation: portrait) {
/* スタイル */
}
2. メディアクエリはどの順番で読み込まれますか？
メディアクエリは、CSSファイル内の記述順に読み込まれます。ただし、後から読み込まれたメディアクエリの方が優先順位が高いため、記述順序に注意する必要があります。
3. メディアクエリが正しく動作しているかどうかを確認するにはどうすればよいですか？
ブラウザのデベロッパーツールを使用すると、メディアクエリが正しく適用されているかどうかを確認できます。 Chromeデベロッパーツールの場合、"Elements"タブで該当の要素を選択し、"Computed"タブで適用されているスタイルを確認できます。