今のサイトを直してみる

このレッスンでやること

今の研究室サイトの index.html に、自分をメンバーとして手で追加する
素の HTML で更新し続けることの大変さを体験する

今のサイトのファイル

研究室サイトのフォルダを開くと、こんなファイルが並んでいます。

sfc-icar.github.io/
├── index.html      ← ページの中身はすべてここ（約 700 行）
├── css/            ← 見た目
├── img/            ← メンバーの写真など
├── js/
└── lib/            ← Bootstrap など、借りてきた部品

メンバー、研究、業績、連絡先。サイトの中身はすべて index.html 1 つに書かれています。

やってみよう: 自分をメンバーに追加する

1 章で作った練習用の branch で作業します。

branch を確認します。practice-あなたの名前 に * が付いていれば OK です。
```
git branch
```
index.html をエディタで開き、id="member" を探します。メンバー欄の始まりです。

一番最後のメンバーの後ろに、自分の分を追加します。前の人の書き方をまねてください。

<div class="col-md-4">
    <div class="member-item">
        <img class="img-responsive img-rounded facepic" src="img/あなたの写真.jpg">
        <h4>環境情報学部</h4>
        <h3>あなたの名前</h3>
        <p class="text-muted">Your Name</p>
    </div>
</div>

写真を img/ フォルダに入れます。なければ、まずは誰かの写真を仮に使ってかまいません。
index.html をブラウザで開いて、自分が表示されることを確かめます。

commit して push します。

git add index.html img/
git commit -m "メンバーに自分を追加（練習）"
git push

うまくいかなかったら

表示が崩れたら、次を疑ってください。

<div> の開始タグと終了タグの数が合っているか
class="row" の中に、col-md-4 が 4 つ以上入っていないか

2 つ目は、このサイトが使っている Bootstrap という部品集のルールです。row は横 1 列を表し、col-md-4 は「横幅の 3 分の 1」を意味します。1 列に 3 人までしか入らないので、4 人目からは新しい row を作る必要があります。

ふりかえり: 何が大変だったか

できたら、次の問いを考えてみてください。Claude に聞かれたら、自分の言葉で答えてください。

1 人追加するのに、何行書きましたか？そのうち、あなた固有の情報（名前、写真、所属）は何行でしたか？
新しい row が必要かどうか、どうやって判断しましたか？毎年の新人も同じ判断ができそうですか？
実は今のファイルには、豊田安信 さんの行に </i> という、対応する開始タグのない終了タグが残っています。ブラウザは何も言わずに表示してしまうので、誰も気づきませんでした。こういう間違いは、なぜ見つけにくいのでしょうか？

チェックリスト

自分が今のサイトのメンバー欄に表示された（手元のブラウザで）
練習用の branch に commit して push した
素の HTML で更新するときの大変さを、具体的に 2 つ言える