オンラインショップを作ってみよう

これまでHTML、CSS、JavaScriptおよびjQueryを学習してきました。

思い通りできなくて投げ出しそうになったこともあったかもしれませんが

ここまで来たら、ある程度のウェブページは制作することができます。

そこで今まで学習してきた知識を総括して「Tシャツのオンラインショップ」を制作してみましょう。

構造は至ってシンプルです。

下の写真のようなウェブページを制作してください。

画像ファイルなどは こちら からダウンロードできます。

仕様として、以下の点を実装してください。

①4枚のTシャツがある

②Tシャツの画像にマウスをかざすとTシャツの背面画像が表示される

②Tシャツの画像をクリックすると”選択”されているように見えるように工夫する(複数選択可)

③Tシャツの画像をクリックし、”選択”されている状態になると、そのTシャツの値段がページ下部の合計金額に加算される

④もう一度クリックすると”選択”は解除され、合計金額からも減算される

⑤Tシャツ画像の下にある「詳細」をクリックするとTシャツの情報が表示されるようにする。

随時、必要な情報をインターネットで検索したり、今までの復習をすることはとても大切です。

頑張ってください！