スマホで崩れる？初心者がつまずくレスポンシブの壁
あなたもこんな経験ありませんか？
「PCではきれいに見えているのに、スマホで見たら崩れている…」そんな経験、あるのではないでしょうか。たとえば文字が小さすぎて読みにくかったり、横にスクロールできてしまったり。特にHTML/CSSに慣れていない段階だと、何が原因なのかもよくわからず、対応に時間がかかることもあります。
近年はスマートフォンからのアクセスが主流です。レスポンシブ対応は“やったほうがいい”ではなく“やって当たり前”の基礎技術。とはいえ、「フレームワークを使わずにCSSだけでできるの？」「何から始めたらいいの？」という声も少なくありません。
この記事では、CSSだけでレスポンシブ対応を実現するための基礎知識と実践的ノウハウを、初心者目線でていねいに解説します。最終的には、「スマホでも崩れないページを自力で作れる！」と自信を持てる状態を目指します。
レスポンシブデザインとは？CSSだけでできる仕組みを理解しよう
レスポンシブデザインとは、画面サイズに応じてWebページのレイアウトやスタイルを柔軟に調整する設計手法です。
この仕組みを支えているのがCSSの「メディアクエリ（@media）」です。これにより、ある条件（たとえば画面幅が768px以上）を満たすときだけ、別のCSSルールを適用できるようになります。
/* モバイルを基本にスタイル定義 */
.container {
padding: 16px;
}
/* タブレット以上の幅なら上書き */
@media (min-width: 768px) {
.container {
padding: 32px;
}
}このように、まずはモバイル向けにスタイルを定義し、それをPCなど大きな画面に合わせて拡張していく方法が「モバイルファースト」と呼ばれます。
また、以下のようなブレイクポイント（切り替えの基準）がよく使われます：
-
〜767px：スマートフォン
-
768px〜1023px：タブレット
-
1024px〜：PC
このブレイクポイントは固定ではないので、プロジェクトに応じて調整が必要です。
よくある表示崩れの原因とCSSでの対処法
1. 【画像】横スクロールが出てしまう
原因：画像のサイズが画面をはみ出している
解決策：width: 100%; で親要素の幅に合わせて画像を縮小
img {
width: 100%;
height: auto;
display: block;
}2. 【テキスト】文字が小さすぎて読みにくい
原因：PC基準のフォントサイズをスマホでもそのまま適用している
解決策：clamp()で画面幅に応じたサイズ調整
body {
font-size: clamp(14px, 2.5vw, 16px);
}3. 【レイアウト】要素が詰まりすぎる・折り返されない
原因：Flexbox使用時にflex-wrapを忘れている
解決策：明示的に折り返しを許可する
.button-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}CSSだけで横スクロールを消すには？
質問：スマホで横スクロールが出るページ、どうすれば直せる？
答え：まず原因となる要素を特定し、その要素に max-width: 100% や overflow-x: hidden を適用するのが一般的です。ただし、overflow-x: hidden は最終手段であり、まずは画像やブロック要素が画面をはみ出していないかを確認しましょう。
body {
overflow-x: hidden;
}さらに快適なデザインを実現するCSSモダン技術
Grid + auto-fit
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}Container Queries（対応ブラウザで有効）
@container (min-width: 600px) {
.card {
flex-direction: row;
}
}aspect-ratio
.card-img {
aspect-ratio: 16 / 9;
width: 100%;
}総まとめと次に学ぶべきこと
-
スマホ対応には「モバイルファースト＋メディアクエリ」が基本
-
画像・文字・レイアウトの3軸で原因を特定しやすくなる
-
clamp()やGridなどCSSのみで十分に対応可能
「CSSだけでここまでできるんだ」と思えたら、もうレスポンシブは怖くありません。ぜひ今日からあなたのページでも実践してみてください！
【外部リンク】
【内部リンク】
【簡単に試せる】CSSアニメーションの仕組みを徹底解説！初心者でもわかる動きの作り方
CSSアニメーションとJavaScriptの組み合わせで始める！初心者向けユニークアプローチ10選【コード例あり】
