index.htmlのファイルを編集2回目です。
今回は、20枚あるの写真説明を書きこんでみましょう。
前回の編集部分より下の行になります。
<section class=”up”>
<div id=”gallery” class=”bg2″>
<section class=”up”>
<h2>GALLERY<span>作品集</span></h2>
<p class=”c”>６月の東京深川周辺</p>
※作品集や6月の東京深川周辺なども自分なりに書き直します。
<div class=”list-container”>
<div class=”list”>
<div>
<a href=”sample_photo/1.jpg” data-lightbox=”group1″ data-title=”タイトルをここに入れます”>
<img src=”sample_photo/1.jpg” alt=””>
</a>
</div>
</div>
※写真は、1.jpg、2.jpgと20までありますが、”タイトルをここに入れます”の” ”の間に入れます。
20枚目まで説明を書き込んだらファイルを保存して、ブラウザで確認します。
20枚目まで説明を書き込んだらファイルを保存して、ブラウザで確認します。
<div class=”list”>
<a href=”sample_photo/2.jpg” data-lightbox=”group1″ data-title=”タイトルをここに入れます”>
<img src=”sample_photo/2.jpg” alt=””>
</a>
</div>
<div class=”list”>
<a href=”sample_photo/3.jpg” data-lightbox=”group1″ data-title=”タイトルをここに入れます”>
<img src=”sample_photo/3.jpg” alt=””>
</a>
</div>
<div class=”list”>
<a href=”sample_photo/4.jpg” data-lightbox=”group1″ data-title=”タイトルをここに入れます”>
<img src=”sample_photo/4.jpg” alt=””>
</a>
</div>
<div class=”list”>
<a href=”sample_photo/5.jpg” data-lightbox=”group1″ data-title=”タイトルをここに入れます”>
<img src=”sample_photo/5.jpg” alt=””>
</a>
</div>
<div class=”list”>
<a href=”sample_photo/6.jpg” data-lightbox=”group1″ data-title=”タイトルをここに入れます”>
<img src=”sample_photo/6.jpg” alt=””>
</a>
</div>
<div class=”list”>
<a href=”sample_photo/7.jpg” data-lightbox=”group1″ data-title=”タイトルをここに入れます”>
<img src=”sample_photo/7.jpg” alt=””>
</a>
</div>
<div class=”list”>
<a href=”sample_photo/8.jpg” data-lightbox=”group1″ data-title=”タイトルをここに入れます”>
<img src=”sample_photo/8.jpg” alt=””>
</a>
</div>
<div class=”list”>
<div>
<a href=”sample_photo/9.jpg” data-lightbox=”group1″ data-title=”タイトルをここに入れます”>
<img src=”sample_photo/9.jpg” alt=””>
</a>
</div>
</div>
<div class=”list”>
<a href=”sample_photo/10.jpg” data-lightbox=”group1″ data-title=”タイトルをここに入れます”>
<img src=”sample_photo/10.jpg” alt=””>
</a>
</div>
<div class=”list”>
<a href=”sample_photo/11.jpg” data-lightbox=”group1″ data-title=”タイトルをここに入れます”>
<img src=”sample_photo/11.jpg” alt=””>
</a>
</div>
<div class=”list”>
<a href=”sample_photo/12.jpg” data-lightbox=”group1″ data-title=”タイトルをここに入れます”>
<img src=”sample_photo/12.jpg” alt=””>
</a>
</div>
<div class=”list”>
<a href=”sample_photo/13.jpg” data-lightbox=”group1″ data-title=”タイトルをここに入れます”>
<img src=”sample_photo/13.jpg” alt=””>
</a>
</div>
<div class=”list”>
<a href=”sample_photo/14.jpg” data-lightbox=”group1″ data-title=”タイトルをここに入れます”>
<img src=”sample_photo/14.jpg” alt=””>
</a>
</div>
<div class=”list”>
<a href=”sample_photo/15.jpg” data-lightbox=”group1″ data-title=”タイトルをここに入れます”>
<img src=”sample_photo/15.jpg” alt=””>
</a>
</div>
<div class=”list”>
<a href=”sample_photo/16.jpg” data-lightbox=”group1″ data-title=”タイトルをここに入れます”>
<img src=”sample_photo/16.jpg” alt=””>
</a>
</div>
<div class=”list”>
<a href=”sample_photo/17.jpg” data-lightbox=”group1″ data-title=”タイトルをここに入れます”>
<img src=”sample_photo/17.jpg” alt=””>
</a>
</div>
<div class=”list”>
<a href=”sample_photo/18.jpg” data-lightbox=”group1″ data-title=”タイトルをここに入れます”>
<img src=”sample_photo/18.jpg” alt=””>
</a>
</div>
<div class=”list”>
<a href=”sample_photo/19.jpg” data-lightbox=”group1″ data-title=”タイトルをここに入れます”>
<img src=”sample_photo/19.jpg” alt=””>
</a>
</div>
<div class=”list”>
<a href=”sample_photo/20.jpg” data-lightbox=”group1″ data-title=”タイトルをここに入れます”>
<img src=”sample_photo/20.jpg” alt=””>
</a>
</div>
</div>
<!–/.list-container–>
</section>
</div>
<!–/#gallery–>
<section class=”up”>
</section>
※以上、<section> から </section>までの編集でした。
※以上、<section> から </section>までの編集でした。