はじめに
ウェブサイトはユーザーが様々なデバイスからアクセスすることを考慮し、レスポンシブデザインで構築することが当たり前のように求められています。
メディアクエリは異なる画面サイズや解像度に対応するための重要なテクニックであり、ウェブサイトのレスポンシブ化においては一般的な手法です。
この記事では、メディアクエリの基本的な使い方やブレイクポイントの設定、モバイルファーストなアプローチについて解説します。
この記事の対象者
- ウェブ制作初心者の方
- レスポンシブデザインに興味のある方
- モバイルファーストなウェブデザインを学びたい方
この記事で学べること
- メディアクエリの基本概念
- レスポンシブデザインの重要性
- メディアクエリの実装方法
レスポンシブデザインの重要性
近年、様々な種類のデバイス（スマートフォン、タブレット、デスクトップなど）でウェブサイトにアクセスするユーザーが増加しています。
これらのデバイスは画面サイズや解像度が異なるため、ウェブデザインでもそれぞれのデバイスに合わせてデザインを最適化することが求められています。
レスポンシブデザインとは、異なるデバイスに適応するために、デザインやレイアウトを柔軟に調整する手法です。これにより、ユーザーがどのデバイスを使用していても最適化されたデザインのウェブページを閲覧することができます。
ユーザーレスポンシブデザインの役割
レスポンシブデザインは以下のような重要な役割を持っています。
- 多様なデバイスに対応：スマートフォン、タブレット、デスクトップなど、多種多様なデバイスが存在します。レスポンシブデザインを用いることで、どのデバイスからでもウェブサイトにアクセスできるため、ユーザーの利便性が向上します。
- ユーザーエクスペリエンスの向上：レスポンシブデザインによって、デバイスごとに最適な表示を提供することができます。文字や画像の適切な配置、ナビゲーションの改善などが行われるため、ユーザーはより快適な閲覧体験を享受できます。
- SEOの向上：検索エンジンはモバイルフレンドリーなサイトを評価し、ランキングに影響を与えることがあります。レスポンシブデザインを採用することで、SEOの向上が期待でき、サイトの可視性が高まります。
- 将来の互換性：新しいデバイスや画面サイズが登場する度に、新たなデザインを制作する必要がありません。レスポンシブデザインを使用することで、将来のデバイスにも柔軟に対応できます。
レスポンシブデザインはユーザーの多様なデバイス利用に対応するために必要な手法であり、ウェブサイトのユーザビリティ、SEOなど多岐にわたる面で利点をもたらすため、ウェブサイト制作において重要な役割を果たしています。
メディアクエリについて
メディアクエリは、ウェブデザインにおいて特定のメディア属性（画面幅、解像度など）に基づいて、異なるスタイルやレイアウトを適用するためのCSSテクニックです。
メディアクエリはCSS内で@mediaルールを使用して定義することができます。メディアクエリ内には、特定の条件（例: 最小幅が600px以上）を設定し、その条件が満たされた場合に適用するスタイルを定義できます。
これにより、スマートフォンの画面幅に応じてテキストサイズを調整したり、タブレットの表示時にはメニューの配置を変更したりすることが可能です。メディアクエリを使用することで、デバイスごとに最適な表示を実現し、ユーザーが快適にウェブサイトを利用できるようになります。
メディアクエリの実装方法
メディアクエリを実装するためには、以下のステップを追うことが一般的です。
@mediaルールの使用：メディアクエリは、@mediaルールを使用してCSS内で指定します。このルールは、特定の条件が満たされた場合に適用するスタイルを定義するためのものです。- 条件の設定：
@mediaルール内には、条件（メディアタイプや特定の属性値）を指定します。例えば、画面幅が768px以上の場合に適用するスタイルを定義したい場合、以下のように記述します。
@media screen and (min-width: 768px) {
/* ここにスタイルを記述 */
}- スタイルの定義: 条件が満たされた際に適用するスタイルを{}ブロック内に記述します。これによって、指定した条件が成立するデバイスや画面サイズに対して、適切なスタイルが適用されます。
例えば、画面幅が768px以上の場合にテキストのサイズを大きくする場合、以下のように実装できます。
@media screen and (min-width: 768px) {
html {
font-size: 18px;
}
}多くのブラウザではデフォルトの設定により文章の文字は16pxで表示されますが、これによって画面幅が768px以上のデバイスで閲覧した場合には文字サイズが18pxに変更されます。
このように、メディアクエリを実装することで特定の条件に基づいて異なるスタイルを適用し、レスポンシブなデザインを実現できます。
メディアクエリとビューポート
ビューポートは、ウェブページが表示される画面領域のことを指します。デバイスごとに異なるサイズの画面が存在するため、ビューポートのサイズも異なります。メディアクエリを使用する際、ビューポートのサイズに基づいてスタイルを適用することが一般的です。
ビューポートの幅や高さは、meta 要素を使用して設定することができます。以下のように設定することで、ビューポートの幅がデバイスの幅に合わせられます。
<meta name="viewport" content="width=device-width, initial-scale=1.0">meta要素はブラウザにウェブページのメタ情報を伝えるための要素であり、コンテンツとしては表示されません。一般的にはHTMLのhead内に記述します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ビューポートについて</title>
</head>「name=”viewport”」はビューポートのメタデータであることを示しており、「content=”width=device-width, initial-scale=1.0″」はデバイスのスクリーン幅とビューポートの幅を同じにするということを示しています。
この設定によって、デバイスの幅に合わせたビューポートが設定され、メディアクエリ内で指定する条件もこのビューポートのサイズに基づいて判断されます。
メディアクエリの基本構文
メディアクエリは@media ルールを使用して定義されます。ルール内には特定の条件を指定し、その条件が満たされた場合に適用されるスタイルを記述します。メディアクエリの基本的な構文は以下です。
@media メディアタイプ and (条件) {
/* スタイルを記述 */
}「@media」、「メディアタイプ」、「and」の後ろには必ず半角スペースが必要なので注意しましょう。
メディアタイプ
メディアタイプはall、screen、printなどがあり、どの種類のデバイスに適用するかを指定します。一般的にはallやscreenが使用されますが、他にもスクリーンリーダーやテレビなど指定することができるので、必要になったら調べてみると良いでしょう。
- all：すべてのメディアタイプに対してスタイルが適用されます。
- screen：スクリーンを持つデバイス（PC、タブレット、スマホなど）にスタイルが適用されます。
- print：印刷用のスタイルを指定します。プリンターや印刷プレビュー時に適用されます。
また、メディアタイプは省略することもでき、省略した場合はallとして解釈されます。しかし、ブラウザによっては解釈が異なる可能性があるので注意しましょう。
メディアクエリの条件指定
メディアクエリの条件指定は、widthやmin-width、max-widthを指定することが一般的です。
- (min-width: ○○px)：指定した値以上の場合にスタイルが適用されます。
- (max-width: ○○px)：指定した値以下の場合にスタイルが適用されます。
min-widthやmax-widthは初心者のうちは混乱しやすいですが、widthで条件を指定すると直感的に理解しやすくなります。
/* 以下は同じ条件 */
@media screen and (min-width: 768px) {}
@media screen and (width >= 768px) {}
@media screen and (width > 767px) {}
/* 以下は同じ条件 */
@media screen and (max-width: 767px) {}
@media screen and (width: <= 767px) {}
@media screen and (width: < 768px) {}また、一般的ではありませんがビューポートの向きを条件に指定することもできます。
- (orientation: landscape)：ビューポートの向きが横の場合にスタイルが適用されます。
- (orientation: portrait)：ビューポートの向きが縦の場合にスタイルが適用されます。
条件指定は「and」や「or」を使用することで複数組み合わせることもできるので、以下のような記述もできます。
@media screen and (min-width: 768px) and (max-width: 991px) {
/* 画面幅768px以上かつ991px以下に適用 */
}
@media screen and (min-width: 768px) or (orientation: portrait) {
/* 画面幅768以上またはビューポートが横向きの場合に適用 */
}メディアクエリとブレイクポイント
メディアクエリを使ったレスポンシブデザインにおいては、ブレイクポイントを設定することが重要です。
ブレイクポイントはデバイスの画面幅が変わるポイントを指し、それに基づいてスタイルを調整します。
例えば、幅が767px以下の場合とそれ以上の場合でスタイルを変更するなど、ブレイクポイントを起点にして柔軟なデザインを実現します。
よく使用されるブレイクポイント
レスポンシブデザインでは、主にスマホ、タブレット、PCといった主要なデバイスに対応するブレイクポイントを決定することが一般的です。
広く普及しているデバイスの画面サイズや、ウェブサイトのターゲットのニーズなどを考慮し、どのブレイクポイントが必要かを判断します。
以下は一般的に使用されるブレイクポイントの例です。
- モバイル向け：320px～480px
- タブレット向け：768px～1024px
- PC向け：1024px以上
この例を参考にモバイルファーストでコーディングを行う場合、メディアクエリを以下のように記述します。
/* スマホのスタイルを含む共通のスタイル */
body {
color: #030303;
}
@media screen and (min-width: 768px) {
/* タブレットのスタイル */
}
@media screen and (min-width: 1024px) {
/* PCのスタイル */
}ブレイクポイントを「min-width」で指定することでモバイルファーストなアプローチでコーディングすることができます。
モバイルファーストでは、モバイルデバイスを基準にコーディングを行います。そのため、基本的にはモバイル向けのブレイクポイントは指定しません。なので、上の例の「color: #030303;」全てのデバイスに適用されます。
モバイルファーストではPCやタブレットのブレイクポイントを指定することで、それぞれのレイアウトやスタイルを調整します。
モバイルフレンドリーであることはSEOの評価にも良い影響を与えるため、モバイルファーストのアプローチは効果的だと考えられます。
しかし、ウェブ制作の現場ではルールやチームメンバーのクセ、古いサイトの更新など、モバイルファーストでの構築がされないケースもあります。
モバイルファーストを採用しない場合は以下のようになります。
/* PCのスタイルを含む共通のスタイル */
body {
color: #030303;
}
@media screen and (max-width: 1023px) {
/* タブレットのスタイル */
}
@media screen and (max-width: 479px) {
/* スマホのスタイル */
}ブレイクポイントを「max-width」で指定しているため、画面幅が小さいデバイスに対してそれぞれスタイルを適用させることになります。
この例では画面幅480px～1023pxまでのデバイスにタブレットのスタイルが適用されるので、タブレットの画面幅を768pxまでと想定してスタイリングを行った場合、480px～767pxの画面幅を持つデバイスではレイアウト崩れを起こす可能性があります。
これを回避するには新たにブレイクポイントが必要になるため、保守性が損なわれる可能性があります。
モバイルファーストのアプローチであれば、レイアウトに関わる要素はwidthで固定幅などを指定しない限り画面幅に合わせられるため、基本的にはレイアウト崩れを意識する必要がありません。
まとめ
メディアクエリの基本的な使い方やブレイクポイントの設定、モバイルファーストなアプローチについて解説しました。
メディアクエリはいろいろな条件を指定できますが、基本はscreenメディアタイプとwidthやmin-width、max-widthの理解だけしておけばレスポンシブ化を行うことができます。
ブレイクポイントはウェブサイトの特性に合わせて検討する必要がありますが、最適なブレイクポイントを調査するには時間と手間が掛かるので、一般的に多く使用されるブレイクポイントを採用することも1つの手段です。
また、ブレイクポイントを過剰に設定すると保守性が損なわれるので2～3か所程度に留めておくと良いです。
メディアクエリでどのようにブレイクポイントを設定するかも重要なので覚えておくと良いでしょう。オススメはmin-widthを使用したモバイルファーストなアプローチです。