実習：地域の写真紹介ページ
新規フォルダーに index.html、style.css、photo.jpg を用意します。写真は利用許諾を確認したものを使ってください。
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>私の地域アーカイブ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<h1>私の地域アーカイブ</h1>
<img src="photo.jpg" alt="地域の風景">
<p>この写真について調べたことを書きます。</p>
</main>
</body>
</html>表示例
私の地域アーカイブ
ここに写真と解説が表示されます。
style.css
body { font-family: sans-serif; background: #f4f7f7; }
main { max-width: 800px; margin: auto; padding: 24px; }
img { max-width: 100%; height: auto; }表示例
読みやすい幅と余白のページ
確認ポイント
見出し・写真・説明が表示されるか、スマートフォン幅でも横スクロールが出ないか、写真の出典・権利情報を確認したかをチェックしましょう。