旅の写真ページの作成

準備

1. 旅の写真ページから、ヘッダー画像及び写真９枚を取得し「img」フォルダーに保存します。
2. エクスプローラーを開きtextフォルダーの「photogallery.html」をコピーして、ファイル名を「tabi.html」に変更します。

Bracketsの起動とファイルの起動

1. Bracketsの起動し、ファイルから「フォルダーを開く」をクリックし、準備で作成した「講習会」選択します。
2. 「tabi.html」を選択します。

テキストの書き換え

1. 「main」要素のh1要素を「旅の写真のページへようこそ！」に書き換えます。
2. 次のp要素を「これまでの旅で撮りためていた写真を紹介します。」に書き換えます。
3. クラスcolumnのdiv要素内の3箇所の「 <div class="column3">」を「 <figure class="column3">」に書き換えます。
4. それぞれ中身を削除します。

画像の挿入

1. ヘッダー画像の呼び込み先を上記「準備の1」で取り込んだヘッダー画像のファイル名に書き換えます。
2. 上記3.で作成した「figure」要素にそれぞれ3枚づつの写真を取り込みます。
3. 全ての写真について幅を「220」に指定します。

ナビメニューの修正

1. 「フォトギャラリー」のクラスを削除しまし、リンク先を入力します。
2. 「旅の写真」にクラス「current2」を追記します。
3. 「我が街」にリンク先を入力します。
4. 「フォトギャラリー」のページからリンクさせます。