⑤ 写真：縮めて軽くし、四角と差しかえる

受講生

写真のサイズをそろえて、
書き出して、差しかえて…
地味に時間がかかるんです。

先生

そのまとめ作業を1回で頼みます。
説明の文字（alt）も、
写真を見て書いてくれます。

準備：練習用の写真を入れる

イメージ練習用の写真4枚（hero・beginner・teacher・access）

見本：Claude Code での写真の差しかえ

録画（早送り）頼んでから、写真がページに入るまで（早送り）

AIが作った実物写真が入った index.html の一番上（パソコンの幅）

あなたの番：写真を差しかえてもらおう

貼る文（全文）

写真 フォルダに4枚の写真があります（hero.jpg は一番上、beginner.jpg ははじめての方へ、teacher.jpg は先生の紹介、access.jpg はアクセス）。横幅1200pxに縮めて軽くしてから images フォルダに入れ、index.html の「写真」の四角と差しかえてください。写真の中身を説明する文字（alt）も入れてください。残りの四角はそのままでいいです。画面での確認はわたしがします。

こうなっていればOK

alt（写真の説明の文字）

alt は、写真が見られない人（画面を読み上げる道具を使う人など）や、写真が表示されなかったときに出る文字です。Claude Code は、写真に実際に写っているものを書きました。先生の紹介の写真に先生本人が写っていないので、部屋の説明にした、とも書いてきました。

つまずきやすいところ

※「実際の画面」「録画」は、2026年10月19日に吉田のiMac（Mac）のターミナルで、Claude Code 2.1.303 を動かして撮ったものです。確認の画面は「毎回たずねる」設定のまま、毎回中身を読んでから選びました。アカウントの情報（メールアドレス・プラン名）は消してあります。どのプランで同じことができるか、Windows でどう見えるかは、この講座では確かめていません。作業時間は、画面に出た Claude Code の作業時間（「✻ … for 1m 14s」など）です。