【フロントエンド入門演習】HTML/CSS/JSで動きのあるWebページを作成してみよう!【出題編】

フロントエンド入門

本記事では、Webページ作成の演習問題を行っていきます。

HTML/CSS/JSのフロントエンド技術を使用して、動きのあるWebページを作成します。

作成する題材は、自動販売機です。

この演習で学習できる内容は以下になります。

学習できるスキル

① HTMLでWebページをレイアウトするスキル
② CSSでWebページを装飾していくスキル
③ JavaScript(JQuery) でWebページに動きを付与するスキル

Webプログラマーにとって、JavaScriptでページに動きをつけるスキルは必須です。

しっかりと学習してJavaScriptを使いこなせるようになりましょう。

Webデザイナーを目指す方も①HTMLと②CSSのスキルは必要なので、ぜひ演習にチャレンジしてみてください!

目次

Webページの仕様:仕様を理解して、仕様を満たすシステムを作る!

この演習で作成するWebページの仕様を説明します。
※仕様とは、画面の見た目の要求事項や満たさなければならない機能をまとめたものです。

以降、このWebページを自動販売機システムと呼んでいきます。

画面イメージ

自動販売機システムの画面イメージは以下になります。

自動販売機のWebページ

Webページ全体に自動販売機を表示しましょう。
自動販売機の下には、お金を表示します。

基本設計:画面UI、機能説明

次は、自動販売機システムの画面項目と機能を説明していきます。

Webページ項目名を表示

画面項目の仕様をまとめた一覧表を以下に記載します。

No.画面項目項目仕様
1商品ディスプレイ①商品を整列して表示する。
2商品情報①商品画像を表示する。
②在庫数を表示する。
 在庫ありの場合は、在庫数と同じ数の■を表示する。
 在庫なしの場合は、売切を表示する。
③商品金額を表示する。
3購入ボタン①以下のいずれかの条件に該当する場合は、ランプを点灯する。
 1. 抽選であたり状態のとき
 2. 投入金額が商品の金額以上 かつ 商品の在庫数が1以上のとき
②商品取出口に購入商品が6本ある場合は、メッセージを表示して購入不可とする。
 「6本まで購入できます。(改行)取り出しボタンを押してください。」
4おつり表示①投入した金額の残額を表示する。
②お金が投入されていない場合は、空白(ブランク)で表示する。
5おつり返却ボタン①おつり表示をクリアする(空白で表示する)。
6あたり表示①商品購入時に抽選を行い、抽選中の演出を表現する。
②あたりの場合は、あたり表示欄に「あたり」を表示する。
 ハズレの場合は、あたり表示欄に空白(ブランク)を表示する。
③あたりの場合は好きな商品を1本無料で購入できる。
 投入金額が商品金額未満の場合でも購入可能とする。
 ただし、在庫がない商品は購入不可とする。
7商品取出口①購入した商品を表示する。
 左から購入した順番に表示される。
 最大6本まで購入できる。
8購入商品①購入ボタンを押した商品が表示される。
 購入商品は、上から下に落ちてくるように表現する。
②商品を購入するごとに、先に購入した商品を左にスライドさせる。
9取り出しボタン①商品取出口にある購入商品をすべて取り出す。
 取り出した後は、商品取出口に購入商品がない状態となる。
10財布①クリックしたお金の金額が自動販売機に投入される。
②お金は無限とする。

上記の仕様を満たすように、自動販売機システムをプログラミングしてみましょう。

まとめ:HTML/CSS/JSで動きのあるWebページを作れるようになろう!

本記事では、フロントエンドのスキル習得を目的としたWebページ作成の演習問題を紹介しました。

この演習問題にチャレンジすると、以下のスキルを習得することができます。

演習後に習得できるスキル

① HTMLでWebページをレイアウトするスキル
② CSSでWebページを装飾していくスキル
③ JavaScript(JQuery) でWebページに動きを付与するスキル

また、基本設計を読んで、仕様を理解する練習にもなります。

プログラマーは設計書に書かれている仕様を満たすプログラムを作成する必要があります。

設計書に書かれている仕様を正しく読み取れないことは非常に問題になります。

なぜなら、設計書の仕様と異なるプログラムを作成すると、作り直しになってしまうからです。

皆さんがプログラマーになったときは、設計書の内容を的確に読み取れるようになりましょう!

それでは、演習問題にチャレンジして、フロントエンドのスキルを習得しましょう。


よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

SE歴16年。
システム開発会社で開発部長をしています。

【主な仕事内容】
 ・Webシステム開発
 ・新入社員育成
 ・社員採用

IT業界が好きで、プログラミングが好きです。
社内の新入社員育成に情熱を注いでいます。

コメント

コメントする

CAPTCHA


目次
閉じる