レスポンシブが効かない…1時間ハマった凡ミスの正体

■ はじめに

今回は、見積もりフォームを作っていて「レスポンシブが効かない」という地獄に1時間ハマった俺の凡ミス談を記録しておく。似たような経験をした人、これから同じミスをするかもしれない人の役に立てば幸いだ。

■ 状況：JavaScriptでゴリゴリ書いてた

俺は、JavaScriptで簡単な「見積もりフォーム」のたたき台を作っていた。HTMLファイル1枚だけで、divタグを並べて、styleもscriptもその中に全部書き込むスタイル。

見た目のレイアウト調整と、クリックで金額が変わる処理を一生懸命書いていた。

ついでにスマホでも動作確認しとくかーってな感じだったんだが

“あれ？ @media で画面サイズに応じたレイアウトが…効いてない？”

■ 試行錯誤：CSSは合ってるのに反応がない

何度も確認した。

• CSSは間違ってない
• @media screen and (max-width: 768px) も合ってる
• flexboxの設定も問題なし

でもスマホでは全然スタイルが変わらない。なんか文字が縮小されてる。こんなの初めて！どう見てもおかしい。

“なんで？ なんで？ なんで！？”

■ 気づいたきっかけ：「get_header()…あれ？」

ふと、WordPressで作ってた別のページを思い出した。

“WordPressなら、get_header() と get_footer() を呼び出すけど… てことは普通のHTMLなら…ヘッダー自分で書くよな？”

ここで俺の中の何かがつながった。

“あっっっっっっっっっっ！！！！！！！！！”

<meta name="viewport" content="width=device-width, initial-scale=1.0">

コレ。忘れてた。完全に。

■ 原因：meta viewport の書き忘れ

スマホでレスポンシブデザインが効かないとき、たいていの原因はこの1行にある。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

これがないと、スマホは強制的に画面幅を1024px相当にして表示してくる。そりゃ、CSS効かんわ。

■ 教訓：テンプレから始めろ

今回の事件から得た最大の学びはこれ：

“自分でHTMLを書くときは、最初にVS Codeで html って打ってEmmet展開しろ”

VS Codeでは、html:5 などと打つと、最低限のHTMLテンプレートが出てくる。 そこには meta charset や meta viewport もちゃんと入ってる。

今後はどんなに小さな検証ファイルでも、テンプレからスタートして確実に土台を作る。

■ まとめ：ミスは成長の肥料

• ビューポートタグは超重要。忘れたら地獄を見る
• CSSが効かないときは、HTMLの構造から疑え
• 凡ミスこそ、学びに直結する

今回の俺のやらかしが、誰かの時間を1時間節約できればそれでいい。

怠けるのは構造じゃない。