メディアクエリ（Media Query）は、CSSでデバイスの画面サイズや解像度などに応じて異なるスタイルを適用するための機能です。これにより、画面の幅が変わるとデザインも変化する「レスポンシブデザイン」を実現できます。
メディアクエリの基本構文
メディアクエリは、@media ルールを使って記述し、条件に応じたスタイルを設定します。
1 2 3 | @media 条件 { /* 条件に合致する場合のスタイル */} |
例えば、画面幅が768px以下のデバイスに対して特定のスタイルを適用する場合は、次のように記述します。
1 2 3 4 5 | @media (max-width: 768px) { body { background-color: lightblue; }} |
この場合、画面幅が768px以下になると、bodyの背景色がライトブルーに変わります。
よく使われる条件
max-width と min-width
・max-width: 指定した幅以下の画面サイズに適用
・min-width: 指定した幅以上の画面サイズに適用
1 2 3 4 5 6 7 8 9 | /* 画面幅が768px以下のデバイスに適用 */@media (max-width: 768px) { /* スタイル */}/* 画面幅が600px以上のデバイスに適用 */@media (min-width: 600px) { /* スタイル */} |
max-height と min-height
画面の高さに応じてスタイルを適用する条件です。
orientation
・デバイスの向きに応じてスタイルを変えることができます。
・portrait（縦向き）または landscape（横向き）を指定できます。
1 2 3 4 | /* 縦向きのときに適用 */@media (orientation: portrait) { /* スタイル */} |
aspect-ratio
画面のアスペクト比（縦横比）に基づいてスタイルを適用できます。
1 2 3 4 | /* アスペクト比が16:9以上のデバイスに適用 */@media (min-aspect-ratio: 16/9) { /* スタイル */} |
メディアクエリを使ったレスポンシブデザインの例
以下は、画面サイズに応じてナビゲーションメニューの表示方法を変更する例です。
1 2 3 4 5 6 7 8 9 10 11 | /* PCサイズのデフォルトスタイル */.navbar { display: flex;}/* 画面幅が600px以下のデバイスでは縦並びのメニューに変更 */@media (max-width: 600px) { .navbar { display: block; }} |
このように、メディアクエリを使うことで、デバイスのサイズや向きに応じた適切なデザインを提供できます。
メディアクエリは、レスポンシブデザインに不可欠なCSSの機能で、デバイスの特性に応じて異なるスタイルを提供することができます。画面のサイズや向きだけでなく、解像度やカラーモードに応じたデザイン調整にも活用できます。