athro https://blog.hatena.ne.jp/athro/ HTML-CSS （演習プロンプト） https://athro.hatenablog.com/ ★AI HTML構造の練習（１カラムレイアウト理解） プロンプト例 完全未経験者がWebページ作成の練習をするときに適切なテーマを作って 🟢 レベル1：HTML構造の練習（レイアウト理解） ① 自己紹介ページ 目的 header / main / footer h1〜h3 p ul / li img 学習効果 最も基本的な文書構造を理解できる。 ② カフェ紹介サイト 目的 section の使い方 メニュー表（table） 画像配置 リンク（a） 発展要素 メニューページを別HTMLに分ける。 ③ 架空の花屋さんサイト 目的 3カラムや1カラムレイアウト 写真＋説明文 営業時間・地図情報の記載 ※あな… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fathro.hatenablog.com%2Fentry%2F2025%2F12%2F14%2F000000" title="HTML構造の練習（１カラムレイアウト理解） - 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/20260304/20260304233123.jpg Hatena Blog https://hatena.blog 2025-12-13 00:00:00 rich https://athro.hatenablog.com/entry/2025/12/14/000000 1.0 100%