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

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

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

チャレンジ内容

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



使用するファイル

・チャレンジフォルダの中の「start」フォルダに入っている、「index.html」に記述していきましょう。



進め方

01.画像の表示をしよう

・画像は同じようなデザインがいくつも並んでいるので、<li>タグでリストにします。
・<li>タグの中に<img>タグを書き、src属性を追加して画像のパスを入力しましょう。
・1つ目のリストができたら一度ブラウザで表示の確認をしてください。
・1つ目のリストをコピー&ペーストで合計6つになるように複製し、画像のパスの数字を修正します。
・再度ブラウザで確認し、すべての画像が上手く表示されていればOKです。




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

・<li>タグの中に<a>タグを記述します。
・クリックしたときにリンク先に飛ばすhref属性を追加し、値を画像のパスにします。
・ダウンロードできうるようにするdownload属性を追加し、値を画像のパスにします。
・ブラウザで確認し、画像をクリックした時にダウンロードできれば大丈夫です。

今回、このような素敵な素材ダウンロードサイトが完成します。
みなさんもぜひチャレンジしてみてください。