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

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

まず確認したいポイント

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

練習用コード

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

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.cards article {
  padding: 16px;
  border: 1px solid #ddd;
}

このような短いコードをAI Work Studioに貼り付け、Previewで見た目を確認します。列数やgapを変えると、CSSが画面にどう反映されるかを理解しやすくなります。

AI Reviewで見直す

なぜ崩れているのか分からないときは、CSSファイルを開いてAI Reviewを使うと、指定ミスや改善ポイントを短く確認できます。HTML/CSS/JavaScript全体の練習方法はこちらの記事も参考にしてください。