HTMLとCSSのレスポンシブ対応入門｜メディアクエリとFlexboxで崩れないレイアウトを作るコツ

HTMLとCSSの学習を進めると、パソコンでは綺麗に表示されるのにスマートフォンではレイアウトが崩れる、Flexboxを使ったのに要素が思った位置に配置されないといった問題に直面することがあります。

レスポンシブデザインやFlexboxは、現在のWeb制作では欠かせない重要な技術です。しかし、仕組みを理解せずにプロパティを追加していくと、どこを修正すればよいのか分からなくなりやすい部分でもあります。

この記事では、初心者がつまずきやすいポイントを中心に、メディアクエリやFlexboxを正しく使う考え方、レイアウト調整のコツを具体例を交えながら解説します。

レスポンシブデザインとは？画面サイズに合わせて表示を変える考え方

レスポンシブデザインとは、パソコン、タブレット、スマートフォンなど異なる画面サイズでも見やすく表示できるようにWebページを調整する設計方法です。

以前はパソコン用サイトとスマートフォン用サイトを別々に作る方法もありましたが、現在では1つのHTMLとCSSを画面幅に応じて変化させるレスポンシブ対応が一般的になっています。

例えば、パソコンでは横並びに表示しているメニューを、スマートフォンでは縦並びに変更するといった調整がレスポンシブデザインの代表例です。

メディアクエリは、画面サイズなどの条件によってCSSを切り替えるための機能です。

基本的な書き方は以下のようになります。

@media screen and (max-width: 768px) {
.menu {
display: block;
}
}

この例では、画面幅が768px以下の場合だけ.menuのCSSが適用されます。スマートフォン表示用の設定によく利用される書き方です。

初心者によくある失敗は、メディアクエリを書いたのに反映されないケースです。その場合は以下の点を確認すると原因を見つけやすくなります。

Flexboxは、要素を横並びや縦並びに配置するためのCSSレイアウト機能です。以前のようにfloatやpositionを多用しなくても、柔軟な配置ができるため現在のWeb制作では頻繁に利用されています。

Flexboxを使う場合は、まず親要素にdisplay:flexを指定することが基本です。

.container {
display: flex;
}

この指定によって、子要素がFlexアイテムとして扱われ、横方向に並びます。

例えば、3つの商品カードを横並びに表示したい場合、商品カードを囲む親要素にFlexboxを設定することで簡単に配置できます。

Flexboxでよくある悩みは、「justify-contentを指定したのに位置が変わらない」「中央寄せしたいのにずれる」といった問題です。

その多くは、Flexboxのプロパティを指定する場所を間違えていることが原因です。

例えば、子要素の位置を調整したい場合でも、justify-contentやalign-itemsは子要素ではなく親要素に指定します。

また、子要素にwidthを設定しすぎると、画面幅に収まらずレイアウトが崩れることがあります。

例として、3つのボックスを横並びにする場合、それぞれにwidth:50%を指定すると合計150%になり、画面からはみ出してしまいます。

レスポンシブ対応では、固定サイズだけに頼らないことが重要です。

例えばwidth:500pxのような固定値では、小さい画面では表示しきれなくなる可能性があります。そのため、max-widthや%指定、vwなどの相対的な単位を活用します。

画像の場合は以下のような指定がよく使われます。

img {
max-width: 100%;
height: auto;
}

この設定により、画像が親要素の幅を超えないように自動調整されます。

また、スマートフォンでは不要な要素を非表示にしたり、文字サイズを変更したりすることで、より見やすいページになります。

HTMLとCSSのレイアウトを理解するには、コードを書いて結果を確認する繰り返しが効果的です。

最初から複雑なWebサイトを作るより、以下のような小さな課題に取り組むと理解しやすくなります。

また、開発者ツールを使って画面サイズを変更しながら確認する習慣を付けると、実際のWeb制作に近い形で学習できます。

HTMLとCSSでレスポンシブデザインを実現するには、メディアクエリとFlexboxの役割を理解することが重要です。

メディアクエリは画面サイズに応じてCSSを切り替える仕組み、Flexboxは要素を柔軟に配置するための仕組みとして使い分けます。

思い通りに配置できない場合は、親要素と子要素の関係、指定しているCSSの場所、サイズ指定の方法を順番に確認することが解決への近道です。

小さなレイアウトを何度も作成しながら仕組みを理解していくことで、スマートフォンでも美しく表示できるWebページを作れるようになります。