HTMLスキル - 第8章 チャレンジ

素材ダウンロードサイトを作ってみよう(解説)

素材ダウンロードサイトを作ってみよう

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

素材ダウンロードサイトを作ってみましょう。


チャレンジ内容

・画像の表示ができるかどうか
・画像をクリックした時にダウンロードできるように記述できるかどうか




画像の表示をしていこう

<!-- ここに写真一覧を記述 -->
の下に、<li>タグを使って画像を表示させていきます。
<li>タグの中に<img>タグを書き、SRC属性を使って画像のパスを入力してください。



<ul>
<li><img src="images/download_01.jpg"></li>
</ul>



一度保存してブラウザで見てみましょう。
画像の表示が確認できたら、<li>タグをコピー&ペーストして同じものを6つ作成していきます。
そして、画像のパスの数字の部分を変更していきましょう。



<ul>
<li><img src="images/download_01.jpg"></li>
<li><img src="images/download_02.jpg"></li>
<li><img src="images/download_03.jpg"></li>
<li><img src="images/download_04.jpg"></li>
<li><img src="images/download_05.jpg"></li>
<li><img src="images/download_06.jpg"></li>
</ul>




クリックした画像をダウンロードできるようにしよう


次に、画像をクリックした時にダウンロードできるようにします。
<li>タグの中に<a>タグを記述し、2つの属性を追加します。
・クリックしたときにリンク先に飛ばすhref属性
・ダウンロードできうるようにするdownload属性
どちらにも、値には画像のパスを入力してください。



<ul>
<li><a download="images/download_01.jpg" href="images/download_01.jpg"><img src="images/download_01.jpg" /></a></li>
<li><a download="images/download_02.jpg" href="images/download_02.jpg"><img src="images/download_02.jpg" /></a></li>
<li><a download="images/download_03.jpg" href="images/download_03.jpg"><img src="images/download_03.jpg" /></a></li>
<li><a download="images/download_04.jpg" href="images/download_04.jpg"><img src="images/download_04.jpg" /></a></li>
<li><a download="images/download_05.jpg" href="images/download_05.jpg"><img src="images/download_05.jpg" /></a></li>
<li><a download="images/download_06.jpg" href="images/download_06.jpg"><img src="images/download_06.jpg" /></a></li>
</ul>


保存してブラウザで確認してみましょう。
すべての画像がダウンロードできるようになれば、完成です。