AI AIワークナビ AI Work Studio
メニュー
AIワークナビ ホーム

HTML/CSSのレイアウト崩れを直す練習。ライブプレビューで確認する

記事

HTML/CSSの学習では、文章は表示されているのに余白や横並びが思った通りにならないことがあります。レイアウト崩れは、コードを書いてすぐPreviewで確認する練習をすると直しやすくなります。

まず確認したいポイント

  • HTMLのタグが閉じられているか
  • class名がHTMLとCSSで一致しているか
  • display、gap、padding、marginの指定が意図通りか
  • スマホ幅で横にはみ出していないか

練習用コード

まずHTMLに3つのカードを作ります。

<div class="cards">
  <article>HTML</article>
  <article>CSS</article>
  <article>JavaScript</article>
</div>

次にCSSで横並びにします。

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.cards article {
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

PC幅では3列で表示されます。ただし、スマホ幅でも3列のままだと文字が詰まったり、横にはみ出したりすることがあります。

スマホ対応を入れる場合は、次のように書きます。

@media (max-width: 600px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

これで画面幅が600px以下のときは、カードが1列で表示されます。ライブプレビューで画面幅を変えながら確認すると、CSSがどのタイミングで切り替わるか理解しやすくなります。

レイアウト崩れでよくある原因

class名が一致していない

HTMLではclass="cards"なのに、CSSで.cardと書くと反映されません。class名は1文字違うだけでも別の指定になります。

横幅を固定しすぎている

width: 1000px;のように固定幅を指定すると、スマホ画面では横にはみ出すことがあります。最初はmax-widthや%を使うと調整しやすくなります。

gapやpaddingが大きすぎる

カードの余白が大きいと、画面幅が狭いときに崩れやすくなります。Previewで確認しながら少しずつ数値を変えてみましょう。

よくある質問

Previewでは正常なのにスマホで崩れるのはなぜですか？

PC幅だけで確認していると、スマホ幅の表示崩れに気づきにくいです。画面幅が狭くなったときのために、media queryを使って列数や余白を調整しましょう。

CSSが反映されないときは何を確認しますか？

HTMLとCSSのclass名、ファイルの読み込み、セレクタの書き方を確認します。特にclass名の打ち間違いは初心者がよくつまずくポイントです。

最初からレスポンシブ対応を覚える必要がありますか？

最初はPC幅で表示を作り、そのあとスマホ幅で崩れていないか確認する流れで大丈夫です。慣れてきたら、最初からスマホ表示も意識して書くとよいです。

次に読むおすすめ記事