Day4：模写してみよう！

今日は実戦形式！
完成見本を自分で「そっくり再現」してみよう！

模写ってなに？

完成見本を見ながら「同じように作る」練習
全体の構造やCSSの使い方を実戦で確認
観察 → 分解 → 再現！

今回の模写演習

s4.html を使って、完成見本と同じような見た目を作る
まずは構造（HTML）、つぎにスタイル（CSS）
「どんなタグ・プロパティを使っているか？」を考える

👉 s4.htmlを開く

👉 完成見本を開く

演習ヒント

見出し・画像・文章の順番をよく見る
要素にクラス名をつけて、CSSで調整
似たパーツがあるなら、使いまわせる！

構造用のタグ

<header>：サイトロゴ、タイトル、ナビゲーションなど
<main>：コンテンツ
<footer>：ナビゲーション、コピーライトなど

よく使うタグ（復習）

タグ	用途
`<h1>`〜`<h6>`	見出し
`<p>`	文章（段落）
`<img>`	画像
`<a>`	リンク
`<ul>` / `<ol>` / `<li>`	リスト
`<div>`	ブロック要素
`<span>`	インライン要素
`<br>`	改行

よく使うCSSプロパティ（復習）

プロパティ	例	用途
`color`	`color: red;`	文字の色
`font-size`	`font-size: 20px;`	文字の大きさ
`text-align`	`text-align: center;`	文字の並び
`background-color`	`background-color: #eeeeee;`	背景色
`padding`	`padding: 20px 10px;`	内側の余白
`margin`	`margin: 0 auto 20px;`	外側の余白
`border`	`border: 1px solid #cccccc;`	枠線
`border-radius`	`border-radius: 4px;`	角の丸み
`display`	`display: flex;`	要素の並び

発展タスク

スマホ画面でも見やすいデザインに調整
:hover を使って動きを追加
オリジナルの要素を追加してみる

ふりかえり

模写で「観察力＋再現力」を養えた
タグとCSSの組み合わせを実戦で確認できた
同じものを作ると実力がグッと伸びる！

👉 次回は自己紹介ページを仕上げよう！