ウェブデザインをする上で、レスポンシブデザインは今や欠かせない要素です。多様なデバイスで一貫したユーザー体験を提供するために、メディアクエリを活用することが非常に重要です。今回は、メディアクエリの基本的な使い方について説明していきます👨🏻💻
メディアクエリとは？
メディアクエリは、デバイスの特性（例えば画面の幅、高さ、解像度など）に基づいて、異なるCSSスタイルを適用するための手法です。これにより、同じウェブサイトでも、スマホ、タブレット、デスクトップなど、さまざまなデバイスに適した表示を実現できます。
そんな複数デバイスの表示に欠かせないメディアクエリですが、2種類の記述方法があります。1つはHTMLの link タグに記述する方法で、もう1つはCSS内に @media を記述する方法です。
1. HTMLのlinkタグに記述する方法
まず、HTMLの link タグにメディアクエリを記述する方法を見てみましょう。例えば、以下のようにHTMLの head 要素に記述します。
<link rel="stylesheet" href="style.css" media="screen and (min-width: 600px)">
<link rel="stylesheet" href="style2.css" media="print and (min-width: 900px)">普通の link タグとの違いは media 属性です。この media 属性では、style.cssやstyle2.cssのどちらを適用するかを、メディアのタイプと特性を指定して表しています。
<link rel="stylesheet" href="◯◯" media="メディアタイプ and (メディア特性)">メディアタイプには、PCやスマホなどの screen 、すべてのデバイスを表す all 、プリンターを表す print などがあります。メディア特性には width や height 、 aspect-ratio 、 orientation 、 resolution などがあります。詳細については後述します。
2. CSS内に@mediaを記述する方法
次に、CSS内に @media を記述する方法を見てみましょう。これは、HTMLから読み込むCSSファイル内でメディアのタイプと特性を指定し、条件分岐の要領でスタイルを変更する方法です。
@media screen and (max-width: 600px) {
/* 画面の横幅が600px以下で適用するスタイルの記述 */
}
@media print and (min-width: 900px) {
/* 画面の横幅が900px以上で適用するスタイルの記述 */
}通常、メディアクエリは主にこちらの「CSS内に @media を記述する方法」で記述することが多いと思うので、こちらの方法で具体的なメディアクエリの使い方を見ていきましょう。
メディアクエリの基本構文
@media を利用したメディアクエリの基本的な書き方は、以下の通りです。
@media メディアタイプ and (メディア特性) {
/* 適用するスタイル */
}例えば、画面の幅が600px以下の場合に適用するスタイルは以下のように書きます。
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}この例では、画面の幅が600px以下のとき、背景色をライトブルーに変更します。
メディアタイプとメディア特性
まずはメディアタイプについてです。メディアタイプとは、どのデバイスに対してスタイルを適用するかを指定するものです。メディアクエリでは、以下のようなメディアタイプを使用できます。
screen: スクリーンデバイス（PC、タブレット、スマホなど）print: プリンターall: すべてのデバイス
次にメディア特性です。メディア特性は、デバイスの具体的な条件（幅、高さ、解像度など）を指定します。メディアクエリでは、以下のようなメディア特性を使用できます。
width: 画面の幅height: 画面の高さaspect-ratio: アスペクト比orientation: 縦向き（portrait）か横向き（landscape）かresolution: 画素密度
例えば、画面が縦向きのときに適用するスタイルは以下のように書けます。
@media screen and (orientation: portrait) {
body {
font-size: 16px;
}
}複数の条件を組み合わせる
さらにメディアクエリでは、複数の条件を組み合わせて、より詳細なスタイル指定が可能です。条件を組み合わせる時は、and や , を使用します。
例えば、画面の幅が400px以下、または900px以上の場合に適用するスタイルは以下のように書きます。
@media (max-width: 400px), (min-width: 900px) {
body {
background-color: lightblue;
}
}特定の条件を除外する
not や only を使って、特定のデバイスや条件にのみスタイルを適用することもできます。
notを使うときは、メディアタイプの指定が必須です。
例えば、以下のように指定することで、画面幅が600px以下のスクリーンデバイスを除外してスタイルを適用できます。
@media not all and (max-width: 600px) {
body {
background-color: lightgreen;
}
}この例では、画面幅が600px以下のデバイスには適用されず、それ以外のすべてのデバイスに対して背景色をライトグリーンに変更するスタイルが適用されます。
まとめ
メディアクエリを使いこなすことで、レスポンシブデザインを実現し、さまざまなデバイスで快適なユーザー体験を提供できます。まずは基本的な構文を理解し、少しずつ実際のプロジェクトで使ってみましょう。何度か試行錯誤することで、きっと使いこなせるようになりますよ。ぜひチャレンジしてみてください！