Day 3・実践 — AI生成のHTML/CSSを読んで直す

よくある崩れと直し方

中央寄せ・はみ出し・余白。原因を切り分けてから直す。

AIのコードは動くけれど、微妙にズレていることがよくあります。ここでは初心者がつまずく三大崩れ「中央に寄らない」「画面からはみ出す」「余白が変」を、原因の見つけ方つきで直します。

なぜ切り分けが先なのか

崩れを見て、あてずっぽうで数字をいじると、直ったように見えて別の場所が崩れます。お医者さんが薬を出す前に原因を診るのと同じで、まず「なぜ崩れているか」を突き止めてから直すと、一発で終わります。

崩れ1: 中央に寄らない

「中央寄せして」とAIに頼んだのに左に寄っている。よくある原因は、横並びの中央寄せにを使うべきところで、文字用の中央寄せ(text-align)を使っているケースです。箱そのものを中央に置くのか、箱の中の文字を中央に置くのかで、道具が違います。

箱が中央に来ない

text-align は中の文字を中央にするだけ。箱そのものの位置は動かない。

CSS

.wrap {
  text-align: center;
}

箱ごと中央に

flexbox で横方向の中央に、箱ごと寄せられる。

CSS

.wrap {
  display: flex;
  justify-content: center;
}

たとえるなら

text-align は「紙の上で文字を真ん中に書く」こと。flexbox の中央寄せは「机の上で紙そのものを真ん中に置く」こと。同じ『中央』でも、動かす対象がちがいます。

横スクロールバーが出て右がはみ出す。犯人はたいてい「固定の幅(px)」か「画像のサイズ指定なし」です。特に width を 1000px のように固定すると、スマホの狭い画面では入りきりません。(幅にパディングや枠が足される仕組み)を思い出すと、なぜ想定より太るのかが分かります。

はみ出す

固定1000pxに余白40pxが両側に足され、実際は1080px。狭い画面で確実にはみ出す。

CSS

.card {
  width: 1000px;
  padding: 40px;
}

画面に収まる

最大1000pxまでで、狭ければ画面幅に合わせて縮む。box-sizing で余白込みの幅にできる。

CSS

.card {
  max-width: 1000px;
  width: 100%;
  padding: 40px;
  box-sizing: border-box;
}

たとえるなら

width を固定するのは、どんな部屋にも同じ大きさの家具を無理に入れようとすること。max-width と width:100% は「大きい部屋なら1000pxまで、小さい部屋なら壁に合わせて縮む」伸縮する家具です。狭い画面(スマホ)に強くなります。これがの基本の考え方です。

余白の道具は margin(外側のすき間)と padding(内側のすき間)の二つ。詰まって見えるなら足りない方を、空きすぎなら大きすぎる値を探します。ブラウザの検証ツールで部品をクリックすると、margin と padding が色分けで見えるので、どちらが原因かすぐ切り分けられます。

たとえるなら

padding は服の内側の詰め物(体と布のすき間)、margin は人と人との距離。ボタンの文字が窮屈なら padding、ボタン同士がくっついているなら margin。悩んだら『内側か、部品同士か』で見分けます。

AIにはこう頼む

崩れを直してもらうときは、症状だけでなく切り分けた原因も渡すと精度が上がります。例えば「カードが画面からはみ出す。width が1000px固定なのが原因だと思う。max-widthとwidth:100%で画面幅に収まるようにして」。原因つきで頼むと、AIは的外れな修正をしにくくなります。

気をつけること

直したら、必ずスマホ幅とパソコン幅の両方で確認しましょう。片方だけ見て「直った」と思うと、もう片方で新しく崩れていることがあります。ブラウザの画面幅を狭めるだけで簡単に確認できます。

読んでも腑に落ちない所は、AIに噛み砕いてもらいましょう。

答えられれば、面接で説明できる状態に一歩近づきます。

「箱そのものを横方向の中央に置きたい」とき、適切なのはどれ?

「.card { width: 1000px; padding: 40px; }」でスマホで横にはみ出す。原因の説明として正しいのは?

margin と padding の違いを、たとえを使って説明してください。

記述式です。まず自分の言葉で答えを考えてから、模範解答を開いて自己採点してください。