HTMLとCSSを学び始めて、ある程度ページを作れるようになったころ、「スマートフォンで見ると崩れる」という問題に直面します。レスポンシブデザインは、画面サイズに応じてレイアウトを変えるための考え方です。難しそうに聞こえますが、基本的な仕組みはシンプルです。この記事では、メディアクエリの書き方と、よく使うパターンを整理します。

メディアクエリとは何か ¶

メディアクエリは、画面の幅などの条件に応じてCSSを切り替えるための記法です。「画面幅が768px以下のときはこのスタイルを適用する」という条件を書くことができます。@mediaというキーワードを使い、その後に条件と適用するスタイルを記述します。メディアクエリ自体はCSSの一部であり、HTMLファイルを変更する必要はありません。

モバイルファーストで書く理由 ¶

メディアクエリには「モバイルファースト」と「デスクトップファースト」の2つのアプローチがあります。モバイルファーストは、まず小さい画面向けのスタイルを書き、画面が大きくなったときに上書きする方法です。現在はモバイルファーストが推奨されています。理由の一つは、スマートフォンからのアクセスが多いサイトでは、モバイル向けのスタイルを基準にした方が管理しやすいからです。

よく使うブレークポイントの目安 ¶

ブレークポイントとは、レイアウトを切り替える画面幅の境界値です。よく使われる値として、スマートフォン向けに480px以下、タブレット向けに768px以下、デスクトップ向けに1024px以上などがあります。ただし、これらは目安であり、コンテンツの内容に合わせて調整することが重要です。特定のデバイスに合わせるより、コンテンツが崩れる幅を基準にブレークポイントを決める方が実用的です。

Flexboxとメディアクエリの組み合わせ ¶

レスポンシブレイアウトでよく使われるのが、FlexboxとメディアクエリのCSSの組み合わせです。たとえば、デスクトップでは横並びに表示していた要素を、スマートフォンでは縦並びに変えたい場合、flex-directionをcolumnに変えるだけで対応できます。Flexboxの基本的なプロパティを理解した上でメディアクエリを組み合わせると、多くのレイアウトパターンに対応できるようになります。

レスポンシブデザインは、最初は難しく感じますが、メディアクエリの書き方とFlexboxの組み合わせを覚えると、多くの場面で応用できます。Majestash HarborのWebフロントエンド入門コースでは、実際にページを作りながらこれらの技術を学べます。