athro https://blog.hatena.ne.jp/athro/ HTML-CSS （演習プロンプト） https://athro.hatenablog.com/ ★コーディング演習 ★AI 1カラム固定幅レイアウト プロンプト例 HTML＋CSS完成形を作成して 幅：800px 中央寄せ（margin: 0 auto;） 背景色：bodyは薄いグレー mainは白 headerは濃い色＋白文字 sectionごとに padding を設定 h2 と p の間に margin footer は中央揃え 完成例 🎯 このコードで学べること ✔ 1カラム固定幅レイアウト ✔ 中央寄せ（margin: 0 auto;） ✔ header / main / footer の構造 ✔ sectionごとの余白設計 ✔ 補色アクセントの使い方 ✔ ボタンデザイン設計方針 1カラム（800px固… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fathro.hatenablog.com%2Fentry%2F2025%2F12%2F15%2F000000" title="1カラム固定幅レイアウト - HTML-CSS （演習プロンプト）" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/a/athro/20260305/20260305031634.jpg Hatena Blog https://hatena.blog 2025-12-15 00:00:00 rich https://athro.hatenablog.com/entry/2025/12/15/000000 1.0 100%