第8回：スマホ対応とレスポンシブデザイン｜もう“崩れない”サイトを作ろう！

今やWebサイトの閲覧の7割以上がスマホからと言われる時代。
スマホで見たら「レイアウトが崩れている…」「文字が小さくて読めない…」そんな経験はありませんか？

今回のテーマは、そんなトラブルを防ぐ「レスポンシブデザイン」とスマホ対応の基本知識です。

スマホに対応するってどういうこと？

パソコン・タブレット・スマホ…それぞれ画面サイズはバラバラ。
レスポンシブデザインとは、ユーザーがどのデバイスで見ても
レイアウトが最適に表示されるように作る技術のことです。

スマホ表示でよくある“崩れ”の例：

• 文字が小さくて読めない
• 画像がはみ出す
• メニューが押しにくい
• ボタンが小さすぎてタップできない

メディアクエリとは？（CSS超入門）

レスポンシブを実現するためのCSS機能が メディアクエリ（@media） です。

@media screen and (max-width: 768px) {
  /* スマホ用スタイル */
  body {
    font-size: 14px;
  }
  .menu {
    flex-direction: column;
  }
}

• max-width: 768px → 横幅768px以下（＝スマホ）に適用
• この中に“スマホ専用のCSS”を書き込むことでレイアウトを切り替えられます

モバイルファーストという考え方

最近は 「まずスマホで見たときに美しいサイトを作る」という設計方法＝モバイルファースト が主流です。

理由は以下の通り

• スマホ閲覧ユーザーが圧倒的に多い
• デスクトップの方が装飾が多く“後から整える”ほうがラク
• サイトが軽量になり、SEOにも効果的！

/* 先にスマホ用を書く */
body { font-size: 14px; }

/* 後からパソコン用に上書き */
@media (min-width: 1024px) {
  body { font-size: 16px; }
}

よくある“崩れ”トラブルと解決策

よくある症状	原因	対処法
画像が画面から飛び出す	横幅を固定している	max-width:100%; height:auto;を設定
メニューが横並びで見切れる	横幅が足りない	スマホだけ flex-direction:column; に切替
テキストが読めないほど小さい	デフォルトフォントがPC基準	スマホ用に font-size を調整
余白が大きくスカスカに見える	PC用余白をそのまま適用している	margin/padding を画面幅に合わせて縮小

まとめ

• レスポンシブデザインは今や標準！スマホでの使いやすさは最優先
• @media を使って画面幅ごとにスタイルを切り替える
• モバイルファースト設計で作れば、崩れにくく軽いサイトが作れる
• よくある崩れパターンを知っておけば安心！

#レスポンシブデザイン #スマホ対応 #モバイルファースト #Webデザイン基礎 #フロントエンド入門 #HTMLCSS #Web制作 #コーディング初心者 #CSS入門 #メディアクエリ #Webデザイン学習 #プログラミング学習 #初心者向けWebデザイン #デザイン勉強中 #Web制作の勉強記録

Favorite