【フロントエンド入門演習】レイアウトを作ろう!HTML/CSS/JSで作る動きのあるWebページ!

レイアウトを作ろう

本記事では、自動販売機の見た目をレイアウトしていく方法を解説します。

習得できるスキルは以下になります。

学習スキル

① HTML
 stylesheetファイルの読み込み
 JavaScriptファイルの読み込み
 CDNを使用したJQueryファイルの読み込み
 タグ:div、ul、li、button、span
 属性:class、style、data、id

② CSS
 box-sizing、list-style、margin、padding、font-family、font-size、font-weight、width、height、max-width、min-height、text-align、border、border-radius、background-color、background-image、background-size、background-repeat、display(flex)、flex-wrap、flex-direction、align-items、flex-grow、outline、cursor、visibility

本記事に登場する用語解説

content delivery network(コンテンツデリバリーネットワーク)の略称です。
普段は別のところにある物を、使いたいときだけ取りに行って使わせてもらう仕組みです。
ネットワークを使って取りに行くため、ネットが繋がっていない環境では使用できません。

目次

開発環境の準備

作成するプログラムのディレクトリとファイル構成を以下に記載します。

【ディレクトリ構成】

プロジェクトディレクトリ
 │  index.html ※自動販売機Webページ
 │
 ├─css
 │  │  index.css ※自動販売機Webページのスタイルシート
 │  │
 │  └─images
 │        各画像ファイル
 │
 └─script
       index.js ※自動販売機WebページのJavaScriptファイル

完成ソース

本記事で完成するソースです。

初期ソース

以下に記載するソースを初期ソースとします。
この状態から、自動販売機の見た目を作成していきます。

HTML

【index.html】

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自販機</title>
  <!-- css -->
  <link rel="stylesheet" href="css/index.css">
</head>
<body>
  
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- js -->
<script type="text/javascript" src="script/index.js"></script>
</body>
</html>

【プログラム解説】

<link rel="stylesheet" href="css/index.css">

このWebページのスタイルを記述する index.css を読み込む処理を書きます。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

今回JavaScriptの便利ライブラリーであるJQueryを使用するので、JQueryを読み込む処理書きます。
CDN(コンテンツデリバリーネットワーク)という仕組みでJQueryを使用できるようにします。
※googleがJQueryを利用できるようにしてくれてるので、それを利用します。


<script type="text/javascript" src="script/index.js"></script>

また、このWebページのJavaScriptを記述する index.js を読み込む処理を書きます。

CSS

【index.css】

*{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
body{
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans JP', sans-serif;
}
ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
button{
  margin: 0;
  padding: 0;
}

【プログラム解説】

*{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

セレクタ「*」を指定して、すべてのタグに以下のスタイルを設定します。
box-sizingプロパティ:border-box
border-box は、要素の幅(width)または高さ(height)に、padding と border を含める設定です。


  margin: 0;
  padding: 0;
  list-style: none;

marginプロパティ、paddingプロパティで余白を「0」に設定します。
これは、ブラウザごとにデフォルトで設定されている余白を消しています。
list-styleプロパティ:none で、リスト項目に付く「・」を消します。

JavaScript(JQuery)

【index.js】

※※※ なし

【プログラム解説】

見た目を作成している段階のため、まだJavaScriptのロジックはないです。

全体レイアウト作成

ページレイアウト
Webページの画面イメージ ※Chromeのデベロッパーツールで表示

それでは、自販機をHTMLとCSSで作成していきます。
まずは、Webページをレイアウトしましょう。
自販機がページの左右中央に表示されるようにレイアウトを作成します。

【index.html】

<body>
  <div class="mainContents">
  
  </div>

 ~~~ 省略 ~~~
</body>

【プログラム解説】

<div class="mainContents">
</div>

div タグのクラス属性に mainContents を設定します。


【index.css】

/************************************
* ページレイアウト
************************************/
.mainContents{
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem;
  text-align: center;
}

【プログラム解説】

.mainContents{
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem;
  text-align: center;
}

セレクタ「.mainContents」を指定して、クラス属性が mainContents である要素に以下のスタイルを設定します。
max-width: 900px; … 要素の最大幅を900pxとする。※画面幅に応じて900px以下となる。
margin: 0 auto; … 縦方向の余白0、横方向の余白は自動とする。⇒横方向は左右中央揃えとなる。
padding: 1rem; … 内側の余白を1remに設定する。※remはHTMLで基準の文字サイズ。
text-align: center; … この要素内のインライン要素を左右中央揃えとする。

自販機の外枠(本体)

自販機のレイアウト
Webページの画面イメージ

次は、自販機の外枠(本体)を作成します。
自販機の色は赤にします。

【index.html】

  <div class="mainContents">

    <!-- 自販機 -->
    <div class="vendingMachine">
      
    </div><!-- 自販機 -->
  
  </div>

【プログラム解説】

<div class="vendingMachine">
</div>

div タグのクラス属性に vendingMachine を設定します。


【index.css】

/************************************
* 自販機
************************************/
.vendingMachine{
  padding: 1rem;
  border: 1px solid #f00;
  background-color: #f00;
}

【プログラム解説】

.vendingMachine{
  padding: 1rem;
  border: 1px solid #f00;
  background-color: #f00;
}

セレクタ「.vendingMachine」を指定して、クラス属性が vendingMachine である要素に以下のスタイルを設定します。
padding: 1rem; … 内側の余白を1remに設定する。※remはHTMLで基準の文字サイズ。
border: 1px solid #f00; … この要素を赤枠で囲う。
background-color: #f00; … この要素の背景色を赤で塗りつぶす。

商品ディスプレイ

商品ディスプレイ
Webページの画面イメージ

次は、商品ディスプレイ部分を作成します。
商品画像、在庫数、値段、購入ボタン(購入ランプ)の要素も、このセクションで作成していきます。

以下の順で作成します。

① 商品ディスプレイエリア
② 商品ディスプレイ、商品
③ 商品の画像
④ 商品の在庫数
⑤ 商品の値段
⑥ 購入ボタンと購入ランプ

STEP1 商品ディスプレイエリア

商品ディスプレイエリア
Webページの画面イメージ

【index.html】

    <!-- 自販機 -->
    <div class="vendingMachine">

      <!-- 商品ディスプレイエリア -->
      <div class="showWindowArea">
        
      </div><!-- 商品ディスプレイエリア -->

    </div><!-- 自販機 -->

【プログラム解説】

<div class="showWindowArea">
</div>

div タグのクラス属性に showWindowArea を設定します。


【index.css】

/************************************
* 商品ディスプレイエリア
************************************/
/* 領域 */
.showWindowArea{
  padding: 1rem;
}

【プログラム解説】

.showWindowArea{
  padding: 1rem;
}

セレクタ「.showWindowArea」を指定して、クラス属性が showWindowArea である要素に以下のスタイルを設定します。
padding: 1rem; … 内側の余白を1remに設定する。※remはHTMLで基準の文字サイズ。

STEP2 商品ディスプレイ、商品

商品ディスプレイ、商品テンプレート
Webページの画面イメージ

【index.html】

      <!-- 商品ディスプレイエリア -->
      <div class="showWindowArea">
        <!-- 商品ディスプレイ -->
        <ul class="showWindowUlFlex">
          <!-- 商品 -->
          <li class="drinkFrame">

          </li><!-- 商品 -->
        </ul>
      </div><!-- 商品ディスプレイエリア -->

【プログラム解説】

<ul class="showWindowUlFlex">
  <li class="drinkFrame">
  </li>
</ul>

ul タグとli タグで商品のリストを作成します。
※ulタグは箇条書きのリストを表示する時に使います。
今回は、ulタグのスタイルにFlexboxを指定してliタグを横並びにします。

ul タグのクラス属性に showWindowUlFlex を設定します。
li タグのクラス属性に drinkFrame を設定します。


【index.css】

/* 商品ディスプレイ */
.showWindowUlFlex{
  display: flex;
  flex-wrap: wrap;
  border: solid 1px #999;
  background-color: #fff;
}
/* 商品テンプレート */
.drinkFrame{
  width: 150px;
  padding: 5px;
  border-left: solid 1px #eee; 
  border-right: solid 1px #eee; 
}

【プログラム解説】

/* 商品ディスプレイ */
.showWindowUlFlex{
  display: flex;
  flex-wrap: wrap;
  border: solid 1px #999;
  background-color: #fff;
}

セレクタ「.showWindowUlFlex」を指定して、クラス属性が showWindowUlFlex である要素に以下のスタイルを設定します。
display: flex; … 子要素を横並び(または縦並び)にする。
flex-wrap: wrap; … 子要素が親要素の横幅(または縦幅)に収まらない場合、子要素を折り返して並べる。
border: solid 1px #999; … 灰色の枠線を引く。
background-color: #fff; … 商品ディスプレイの背景色を白で塗りつぶす。


/* 商品テンプレート */
.drinkFrame{
  width: 150px;
  padding: 5px;
  border-left: solid 1px #eee; 
  border-right: solid 1px #eee; 
}

セレクタ「.drinkFrame」を指定して、クラス属性が drinkFrame である要素に以下のスタイルを設定します。
width: 150px; … 1個の商品の表示幅を150pxとする。
padding: 5px; … 内側の上下左右の余白を5pxとする。
border-left: solid 1px #eee; … 要素の左側の境界線を灰色とする。
border-right: solid 1px #eee; … 要素の右側の境界線を灰色とする。

STEP3 商品の画像

商品画像
Webページの画面イメージ

【index.html】

          <!-- 商品 -->
          <li class="drinkFrame">
            <div class="drink" style="background-image: url('./css/images/drink01.png');"></div>  <!-- 商品画像 -->

          </li><!-- 商品 -->

【プログラム解説】

<div class="drink" style="background-image: url('./css/images/drink01.png');"></div>

商品画像を表示するための div タグを作成します。

div タグのクラス属性に drink を設定します。
style属性に背景画像 “background-image: url(‘./css/images/drink01.png’);” を設定します。
※商品画像をdiv タグの背景画像として表示します。


【index.css】

/* 商品画像 */
.drink{
  background-image: url("");
  background-size	: contain;
  background-repeat: no-repeat;
  display: inline-block;
  width: 70px;
  height: 70px;
}

【プログラム解説】

.drink{
  background-image: url("");
  background-size	: contain;
  background-repeat: no-repeat;
  display: inline-block;
  width: 70px;
  height: 70px;
}

セレクタ「.drink」を指定して、クラス属性が drink である要素に以下のスタイルを設定します。
background-image: url(“”); … 要素の背景画像を設定する。※今はindex.htmlで設定しているので無くてもOK。
background-size : contain; … 画像の縦横比を保持しつつ、要素からはみ出さないサイズで表示する。
background-repeat: no-repeat; … 背景画像が要素いっぱいに表示されていない場合でも、背景画像を繰り返し表示しない。
display: inline-block; … この要素をインラインブロック要素にする。
width: 70px;… 商品画像の横幅を70pxとする。
height: 70px;… 商品画像の縦幅を70pxとする。

STEP4 商品の在庫数

商品の在庫数
Webページの画面イメージ

【index.html】

          <!-- 商品 -->
          <li class="drinkFrame">
            <div class="drink" style="background-image: url('./css/images/drink01.png');"></div>  <!-- 商品画像 -->
            <div class="dispStock" data-stock="5">■■■■■</div>  <!-- 在庫数(表示用)(内部処理用) -->

          </li><!-- 商品 -->

【プログラム解説】

<div class="dispStock" data-stock="5">■■■■■</div>

商品の在庫数を表示するための div タグを作成します。

div タグのクラス属性に dispStock を設定します。
データ属性(data-stock)に在庫数の「5」を設定します。※別記事で紹介するJavaScript処理で使用します
div タグの中に、在庫数を表す■を5つ記述して画面に表示します。


【index.css】

/* 在庫数(表示用) */
.dispStock{
  color: #f00;
  font-size: 8pt;
  text-align: right;
}

【プログラム解説】

.dispStock{
  color: #f00;
  font-size: 8pt;
  text-align: right;
}

セレクタ「.dispStock」を指定して、クラス属性が dispStock である要素に以下のスタイルを設定します。
color: #f00; … 在庫数を表す■を赤色に設定する。
font-size: 8pt; … 在庫数を表す■の文字サイズを設定する。
text-align: right; … 要素内のインライン要素を右寄せにする。※これで■が右寄せ表示になる。

STEP5 商品の値段

商品の値段
Webページの画面イメージ

【index.html】

          <!-- 商品 -->
          <li class="drinkFrame">
            <div class="drink" style="background-image: url('./css/images/drink01.png');"></div>  <!-- 商品画像 -->
            <div class="dispStock" data-stock="5">■■■■■</div>  <!-- 在庫数(表示用)(内部処理用) -->
            <div class="dispPrice" data-price="110">¥110</div>   <!-- 値段(表示用)(内部処理用) -->

          </li><!-- 商品 -->

【プログラム解説】

<div class="dispPrice" data-price="110">¥110</div>

商品の値段を表示するための div タグを作成します。

div タグのクラス属性に dispPrice を設定します。
データ属性(data-price)に値段の「110」を設定します。※別記事で紹介するJavaScript処理で使用します
div タグの中に、値段である\110を記述して画面に表示します。


【index.css】

/* 値段(表示用) */
.dispPrice{
  border: solid 1px #eee;
  color: #5f5f5f;
  font-size: 10pt;
  font-weight: bold;
}

【プログラム解説】

.dispPrice{
  border: solid 1px #eee;
  color: #5f5f5f;
  font-size: 10pt;
  font-weight: bold;
}

セレクタ「.dispPrice」を指定して、クラス属性が dispPrice である要素に以下のスタイルを設定します。
border: solid 1px #eee; … 商品の値段を表示する部分に枠をつける。
color: #5f5f5f; … 商品の値段を灰色に設定する。
font-size: 8pt; … 商品の値段の文字サイズを設定する。
font-weight: bold; … 商品の値段を太字にする。

STEP6 購入ボタン、購入ランプ

購入ボタン、購入ランプ(消灯)
Webページの画面イメージ
購入ボタン、購入ランプ(点灯)
Webページの画面イメージ

【index.html】

          <!-- 商品 -->
          <li class="drinkFrame">
            <div class="drink" style="background-image: url('./css/images/drink01.png');"></div>  <!-- 商品画像 -->
            <div class="dispStock" data-stock="5">■■■■■</div>  <!-- 在庫数(表示用)(内部処理用) -->
            <div class="dispPrice" data-price="110">¥110</div>   <!-- 値段(表示用)(内部処理用) -->
            <button type="button" class="btnBuy">             <!-- 購入ボタン -->
              <span class="lblBtnBuy">* * * * *</span>  <!-- 購入ランプ -->
            </button>
          </li><!-- 商品 -->

【プログラム解説】

<button type="button" class="btnBuy">
  <span class="lblBtnBuy">* * * * *</span>
</button>

購入ボタンを button タグで作成します。
購入ランプを表示するための span タグを作成します。
購入ランプは購入ボタンの子要素とします。

button タグのクラス属性に btnBuy を設定します。
span タグのクラス属性に lblBtnBuy を設定します。
span タグの中に、購入ランプを表す「* * * * *」を記述します。


【index.css】

/* 購入ボタン */
.btnBuy{
  width: 100%;
  height: 23px;
  background-color: #555;
  border: solid 1px #fff;
  border-radius: 10px;
  outline: none;
  cursor: pointer;
}
/* 購入ランプ */
.lblBtnBuy{
  color: #ffd700;
  font-size: 18pt;
  font-weight: bold;
  visibility: hidden;
}

【プログラム解説】

/* 購入ボタン */
.btnBuy{
  width: 100%;
  height: 23px;
  background-color: #555;
  border: solid 1px #fff;
  border-radius: 10px;
  outline: none;
  cursor: pointer;
}

セレクタ「.btnBuy」を指定して、クラス属性が btnBuy である要素に以下のスタイルを設定します。
width: 100%; … 購入ボタンの横幅を親要素の100%(同じ大きさ)にする。
height: 23px; … 購入ボタンの高さを設定する。
background-color: #555; … 背景色を灰色にする。
border: solid 1px #fff; … 購入ボタンの境界線を白にする。
border-radius: 10px; … 購入ボタンを角丸にする。
outline: none; … クリックしたときに枠線を表示しない。
cursor: pointer; … 要素の上にマウスポインターが乗ったとき、指マークにする。


/* 購入ランプ */
.lblBtnBuy{
  color: #ffd700;
  font-size: 18pt;
  font-weight: bold;
  visibility: hidden;
}

セレクタ「.lblBtnBuy」を指定して、クラス属性が lblBtnBuy である要素に以下のスタイルを設定します。
color: #ffd700; … 購入ランプの色をオレンジにする。
font-size: 18pt; … 購入ランプの文字サイズを設定する。
font-weight: bold; … 購入ランプの文字を太字にする。
visibility: hidden; … 要素を非表示にする。※購入ランプはJavaScriptで点灯と消灯を切り替えます。

STEP7 商品を増やす

商品を追加
Webページの画面イメージ

商品ディスプレイに表示する商品を増やします。
これまでに作成した商品タグをコピーして貼り付けて、一部を書きかえれば簡単に作成できます。

【index.html】

<!-- 商品 -->
<li class="drinkFrame">
  ~~~ 省略 ~~~
</li><!-- 商品 -->
<!-- 商品 -->
<li class="drinkFrame">
  <div class="drink" style="background-image: url('./css/images/drink02.png');"></div>  <!-- 商品画像 -->
  <div class="dispStock" data-stock="5">■■■■■</div>  <!-- 在庫数(表示用)(内部処理用) -->
  <div class="dispPrice" data-price="110">¥110</div>   <!-- 値段(表示用)(内部処理用) -->
  <button type="button" class="btnBuy">             <!-- 購入ボタン -->
    <span class="lblBtnBuy">* * * * *</span>  <!-- 購入ランプ -->
  </button>
</li><!-- 商品 -->

【プログラム解説】

<li class="drinkFrame">
  <div class="drink" style="background-image: url('./css/images/drink02.png');"></div>  <!-- 商品画像 -->
  <div class="dispStock" data-stock="5">■■■■■</div>  <!-- 在庫数(表示用)(内部処理用) -->
  <div class="dispPrice" data-price="110">¥110</div>   <!-- 値段(表示用)(内部処理用) -->
  <button type="button" class="btnBuy">             <!-- 購入ボタン -->
    <span class="lblBtnBuy">* * * * *</span>  <!-- 購入ランプ -->
  </button>
</li>

1個目に作成した商品<li>~</li>タグ(子要素を含む)をコピーして、</li>タグの下に貼り付けます。
コピーしたタグの以下の箇所を変更すれば商品を増やすことができます。
・商品画像  :background-imageに指定する画像ファイルのパスを変更する。
・商品の在庫数:data-stockに設定する数値を変更する。div タグの中の■の数を変更する。
・商品の値段 :data-priceに設定する数値を変更する。div タグの中の値段を変更する。

おつり抽選

おつりと抽選
Webページの画面イメージ

次は、おつりと抽選に関係する部分のレイアウトにいきましょう。
あたり表示、おつり表示、おつり返却ボタンを作成していきます。

以下の順で作成します。

① おつり抽選エリア
② おつり抽選レイアウト
③ あたり表示
④ おつり表示
⑤ おつり返却ボタン

STEP1 おつり抽選エリア

おつり抽選エリア
Webページの画面イメージ

【index.html】

<!-- 商品ディスプレイエリア -->
<div class="showWindowArea">
  ~~~ 省略 ~~~
</div><!-- 商品ディスプレイエリア -->

<!-- おつり抽選エリア -->
<div class="changeOtherArea">
  
</div><!-- おつり抽選エリア -->

【プログラム解説】

<div class="changeOtherArea">
</div>

おつりと抽選に関連する要素を表示するための div タグを作成します。
※作成場所は、商品ディスプレイエリア(divタグ)の下に記述します。

div タグのクラス属性に changeOtherArea を設定します。


【index.css】

/************************************
* おつり抽選エリア
************************************/
/* 領域 */
.changeOtherArea{
  padding: 1rem 3rem;
}

【プログラム解説】

.changeOtherArea{
  padding: 1rem 3rem;
}

セレクタ「.changeOtherArea」を指定して、クラス属性が changeOtherArea である要素に以下のスタイルを設定します。
padding: 1rem 3rem; … 内側の上下余白を1rem、左右余白を3remに設定する。※remはHTMLで基準の文字サイズ。

STEP2 おつり抽選レイアウト

おつり抽選レイアウト
Webページの画面イメージ

【index.html】

<!-- おつり抽選エリア -->
<div class="changeOtherArea">
  <ul class="changeOtherUlFlex">
    <!-- あたりフレーム -->
    <li>
    </li>
    <!-- おつりフレーム -->
    <li>
    </li>
  </ul>
</div><!-- おつり抽選エリア -->

【プログラム解説】

<ul class="changeOtherUlFlex">
  <li>
  </li>
  <li>
  </li>
</ul>

ul タグとli タグでおつり表示とあたり表示をレイアウトします。
ulタグのスタイルにFlexboxを指定してliタグを横並びにします。

ul タグのクラス属性に changeOtherUlFlex を設定します。


【index.css】

/* おつり抽選レイアウト */
.changeOtherUlFlex{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
/* おつり抽選フレーム */
.changeOtherUlFlex li{
  flex-grow: 1;
  padding: 0.5rem;
  text-align: left;
}

【プログラム解説】

/* おつり抽選レイアウト */
.changeOtherUlFlex{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

セレクタ「.changeOtherUlFlex」を指定して、クラス属性が changeOtherUlFlex である要素に以下のスタイルを設定します。
display: flex; … 子要素を横並び(または縦並び)にする。
flex-wrap: wrap; … 子要素が親要素の横幅(または縦幅)に収まらない場合、子要素を折り返して並べる。
align-items: center; … 子要素を縦方向中央揃えにする。


/* おつり抽選フレーム */
.changeOtherUlFlex li{
  flex-grow: 1;
  padding: 0.5rem;
  text-align: left;
}

セレクタ「.changeOtherUlFlex li」を指定して、クラス属性が changeOtherUlFlex である要素の子孫階層にある li タグに以下のスタイルを設定します。
flex-grow: 1; … 親要素に合わせて横幅を伸ばす。
padding: 0.5rem; … 内側の上下左右の余白を0.5remとする。
text-align: left; … 要素内のインライン要素を左揃えとする。

STEP3 あたり表示

あたり表示ディスプレイ(あたり非表示)
Webページの画面イメージ
あたり表示ディスプレイ(あたり表示)
Webページの画面イメージ

【index.html】

<!-- あたりフレーム -->
<li>
  <div class="hitFrame">
    <span id="lblHit">あたり ●●●●●</span>
  </div>
</li>

【プログラム解説】

<div class="hitFrame">
  <span id="lblHit">あたり ●●●●●</span>
</div>

あたり表示ディスプレイを div タグで作成します。
あたりの文字を表示するための span タグを作成します。

div タグのクラス属性に hitFrame を設定します。
span タグのクラス属性に lblHit を設定します。
span タグの中に、あたりを表す「あたり ●●●●●」を記述します。


【index.css】

/* 当たり表示ディスプレイ */
.hitFrame{
  background-color: #333;
  width: 250px;
  padding: 5px;
}
/* 当たりタイトル */
#lblHit{
  color: #ff0;
  font-weight: bold;
  text-align: center;
  display: inline-block;
  visibility: hidden;
  width: 100%;
}

【プログラム解説】

/* 当たり表示ディスプレイ */
.hitFrame{
  background-color: #333;
  width: 250px;
  padding: 5px;
}

セレクタ「.hitFrame」を指定して、クラス属性が hitFrame である要素に以下のスタイルを設定します。
background-color: #333; … 背景色を暗めの灰色にする。
width: 250px; … 当たり表示ディスプレイの横幅を設定する。
padding: 5px; … 内側の上下左右の余白を5pxとする。


/* 当たりタイトル */
#lblHit{
  color: #ff0;
  font-weight: bold;
  text-align: center;
  display: inline-block;
  visibility: hidden;
  width: 100%;
}

セレクタ「#lblHit」を指定して、ID属性が lblHit である要素に以下のスタイルを設定します。
color: #ff0; … あたりの文字色を黄色にする。
font-weight: bold; … あたりの文字を太字にする。
text-align: center; … 要素内のインライン要素を左右中央揃えにする。
display: inline-block; … この要素をインラインブロック要素にする。
visibility: hidden; … 要素を非表示にする。※あたり文字はJavaScriptで点灯と消灯を切り替えます。
width: 100%; … この要素の横幅を親要素と同じ幅にする。

STEP4 おつり表示

おつり表示ディスプレイ(金額非表示)
Webページの画面イメージ
おつり表示ディスプレイ(金額表示)
Webページの画面イメージ

【index.html】

<!-- おつりフレーム -->
<li>
  <div class="changeFrame">
    <span id="lblChangeTitle">おつり</span>
    <span id="lblChangeValue" data-changeval="0">0</span>
  </div>
</li>

【プログラム解説】

<div class="changeFrame">
  <span id="lblChangeTitle">おつり</span>
  <span id="lblChangeValue" data-changeval="0">0</span>
</div>

おつり表示ディスプレイを div タグで作成します。
おつりの文字を表示するための span タグを作成します。
おつり金額を表示するための span タグを作成します。

div タグのクラス属性に changeFrame を設定します。
span タグのクラス属性に lblChangeTitle を設定します。
span タグの中に、「おつり」を記述します。
span タグのクラス属性に lblChangeValue を設定します。
データ属性(data-changeval)におつり金額の「0」を設定します。※別記事で紹介するJavaScript処理で使用します
span タグの中に、おつり金額の「0」を記述します。


【index.css】

/* おつり表示ディスプレイ */
.changeFrame{
  background-color: #333;
  width: 250px;
  padding: 5px;
  display: inline-block;
}
/* おつりタイトル */
#lblChangeTitle{
  color: #fff;
  font-weight: bold;
  display: inline-block;
  visibility: hidden;
  margin-left: 10px;
}
/* おつり金額 */
#lblChangeValue{
  color: #FFCC00;
  font-weight: bold;
  text-align: right;
  display: inline-block;
  visibility: hidden;
  width: 150px
}

【プログラム解説】

/* おつり表示ディスプレイ */
.changeFrame{
  background-color: #333;
  width: 250px;
  padding: 5px;
  display: inline-block;
}

セレクタ「.changeFrame」を指定して、クラス属性が changeFrame である要素に以下のスタイルを設定します。
background-color: #333; … 背景色を暗めの灰色にする。
width: 250px; … おつり表示ディスプレイの横幅を設定する。
padding: 5px; … 内側の上下左右の余白を5pxとする。
display: inline-block; … この要素をインラインブロック要素にする。


/* おつりタイトル */
#lblChangeTitle{
  color: #fff;
  font-weight: bold;
  display: inline-block;
  visibility: hidden;
  margin-left: 10px;
}

セレクタ「#lblChangeTitle」を指定して、ID属性が lblChangeTitle である要素に以下のスタイルを設定します。
color: #fff; … おつりの文字色を白にする。
font-weight: bold; … おつりの文字を太字にする。
display: inline-block; … この要素をインラインブロック要素にする。
visibility: hidden; … 要素を非表示にする。※おつりの文字はJavaScriptで点灯と消灯を切り替えます。
margin-left: 10px; … この要素の外側の左余白を設定する。


/* おつり金額 */
#lblChangeValue{
  color: #ffcc00;
  font-weight: bold;
  text-align: right;
  display: inline-block;
  visibility: hidden;
  width: 150px
}

セレクタ「#lblChangeValue」を指定して、ID属性が lblChangeValue である要素に以下のスタイルを設定します。
color: #ffcc00; … おつり金額の文字色をオレンジにする。
font-weight: bold; … おつり金額の文字を太字にする。
text-align: right; … 要素内のインライン要素を右寄せにする。※これでおつり金額が右寄せ表示になる。
display: inline-block; … この要素をインラインブロック要素にする。
visibility: hidden; … 要素を非表示にする。※おつり金額の文字はJavaScriptで点灯と消灯を切り替えます。
width: 150px; … おつり金額の横幅を設定する。

STEP5 おつり返却ボタン

おつり返却ボタン
Webページの画面イメージ

【index.html】

<!-- おつりフレーム -->
<li>
  <div class="changeFrame">
    <span id="lblChangeTitle">おつり</span>
    <span id="lblChangeValue" data-changeval="0">0</span>
  </div>
  <button type="button" class="btnReturn">返却</button>
</li>

【プログラム解説】

<button type="button" class="btnReturn">返却</button>

購入ボタンを button タグで作成します。

button タグのクラス属性に btnReturn を設定します。
button タグの中に、「返却」を記述して画面に表示します。


【index.css】

/* 返却ボタン */
.btnReturn{
  width: 100px;
  background-color: #333;
  border: solid 1px #555;
  border-radius: 10px;
  cursor: pointer;
  color: #fff;
  font-weight: bold;
  font-size: 11pt;
  display: inline-block;
  margin-left: 20px;
}

【プログラム解説】

/* 返却ボタン */
.btnReturn{
  width: 100px;
  background-color: #333;
  border: solid 1px #555;
  border-radius: 10px;
  cursor: pointer;
  color: #fff;
  font-weight: bold;
  font-size: 11pt;
  display: inline-block;
  margin-left: 20px;
}

セレクタ「.btnReturn」を指定して、クラス属性が btnReturn である要素に以下のスタイルを設定します。
width: 100px; … 返却ボタンの横幅を設定する。
background-color: #333; … 背景色を暗めの灰色にする。
border: solid 1px #555; … 返却ボタンの境界線を暗めの灰色にする。
border-radius: 10px; … 返却ボタンを角丸にする。
cursor: pointer; … 要素の上にマウスポインターが乗ったとき、指マークにする。
color: #fff; … 返却ボタンの文字を白にする。
font-weight: bold; … 返却ボタンの文字を太字にする。
font-size: 11pt; … 返却ボタンの文字サイズを設定する。
display: inline-block; … この要素をインラインブロック要素にする。
margin-left: 10px; … この要素の外側の左余白を設定する。

取出口

取出口と購入商品
Webページの画面イメージ

次は、取出口部分のレイアウトにいきましょう。
ここには、購入した商品、取出しボタンを作成していきます。

以下の順で作成します。

① 取出口エリア
② 取出口レイアウト
③ 購入商品
④ 取出しボタン
⑤ 購入商品を増やす

STEP1 取出口エリア

取出口エリア
Webページの画面イメージ

【index.html】

<!-- おつり抽選エリア -->
<div class="changeOtherArea">
  ~~~ 省略 ~~~
</div><!-- おつり抽選エリア -->

<!-- 取出口エリア -->
<div class="dispensingSlotArea">
  
</div><!-- 取出口エリア -->

【プログラム解説】

<div class="dispensingSlotArea">
</div>

取出口を表示するための div タグを作成します。
※作成場所は、おつり抽選エリア(divタグ)の下に記述します。

div タグのクラス属性に dispensingSlotArea を設定します。


【index.css】

/************************************
* 取出口エリア
************************************/
/* 領域 */
.dispensingSlotArea{
  margin-top: 80px;
  padding: 1rem 3rem;
}

【プログラム解説】

.dispensingSlotArea{
  margin-top: 80px;
  padding: 1rem 3rem;
}

セレクタ「.dispensingSlotArea」を指定して、クラス属性が dispensingSlotArea である要素に以下のスタイルを設定します。
margin-top: 80px; … 外側の上余白を設定する。
padding: 1rem 3rem; … 内側の上下余白を1rem、左右余白を3remに設定する。※remはHTMLで基準の文字サイズ。

STEP2 取出口レイアウト

取出口レイアウト
Webページの画面イメージ

【index.html】

<!-- 取出口エリア -->
<div class="dispensingSlotArea">
  <!-- 取出口 -->
  <ul class="dispensingSlotUlFlex">
    <!-- 購入商品 -->
    <li class="dispensingDrinkFrame">
    </li>
  </ul>
  
</div><!-- 取出口エリア -->

【プログラム解説】

<ul class="dispensingSlotUlFlex">
  <li class="dispensingDrinkFrame">
  </li>
</ul>

ul タグとli タグで購入商品をレイアウトします。
ulタグのスタイルにFlexboxを指定してliタグを横並びにします。

ul タグのクラス属性に dispensingSlotUlFlex を設定します。
li タグのクラス属性に dispensingDrinkFrame を設定します。


【index.css】

/* 取出口 */
.dispensingSlotUlFlex{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  
  min-height: 100px;
  background-color: #333;
}
/* 取出口商品フレーム */
.dispensingDrinkFrame{
  margin: 10px;
}
/* 取出口商品フレーム(先頭要素) */
.dispensingDrinkFrame:first-child{
  margin-left: 80px;
}

【プログラム解説】

/* 取出口 */
.dispensingSlotUlFlex{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  min-height: 100px;
  background-color: #333;
}

セレクタ「.dispensingSlotUlFlex」を指定して、クラス属性が dispensingSlotUlFlex である要素に以下のスタイルを設定します。
display: flex; … 子要素を横並び(または縦並び)にする。
flex-wrap: wrap; … 子要素が親要素の横幅(または縦幅)に収まらない場合、子要素を折り返して並べる。
flex-direction: row-reverse; … 子要素の並び順を逆順にする。※子要素が右から順に並ぶようになる。
min-height: 100px; … 要素の最小の高さを設定する。
background-color: #333; … 要素の背景色を暗めの灰色にする。


/* 取出口商品フレーム */
.dispensingDrinkFrame{
  margin: 10px;
}

セレクタ「.dispensingDrinkFrame」を指定して、クラス属性が dispensingDrinkFrame である要素に以下のスタイルを設定します。
margin: 10px; … 外側の上下左右余白を設定する。


/* 取出口商品フレーム(先頭要素) */
.dispensingDrinkFrame:first-child{
  margin-left: 80px;
}

セレクタ「.dispensingDrinkFrame:first-child」を指定して、クラス属性が dispensingDrinkFrame である要素の中の先頭要素に以下のスタイルを設定します。
margin-left: 80px; … 外側の左余白を設定する。※先頭要素と2番目の要素の間に80pxの間隔ができる。

STEP3 購入商品の画像

購入商品の画像
Webページの画面イメージ

【index.html】

<!-- 購入商品 -->
<li class="dispensingDrinkFrame">
  <div class="drink" style="background-image: url('./css/images/drink01.png');"></div>  <!-- 商品画像 -->
</li>

【プログラム解説】

<div class="drink" style="background-image: url('./css/images/drink01.png');"></div>

購入した商品画像を表示するための div タグを作成します。

div タグのクラス属性に drink を設定します。
style属性に背景画像 “background-image: url(‘./css/images/drink01.png’);” を設定します。
※商品画像をdiv タグの背景画像として表示します。
※商品ディスプレイの商品画像のdivタグと同じです。

STEP4 取出しボタン

取出しボタン
Webページの画面イメージ

【index.html】

<!-- 取出口 -->
<ul class="dispensingSlotUlFlex">
  <!-- 購入商品 -->
  <li class="dispensingDrinkFrame">
    <div class="drink" style="background-image: url('./css/images/drink01.png');"></div>  <!-- 商品画像 -->
  </li>
</ul>
<button type="button" class="btnTakeOut">全取出し</button>

【プログラム解説】

<button type="button" class="btnTakeOut">全取出し</button>

取出しボタンを button タグで作成します。

button タグのクラス属性に btnTakeOut を設定します。
button タグの中に、「全取出し」を記述して画面に表示します。


【index.css】

/* 全取出しボタン */
.btnTakeOut{
  width: 100%;
  height: 30px;
  cursor: pointer;
}

【プログラム解説】

.btnTakeOut{
  width: 100%;
  height: 30px;
  cursor: pointer;
}

セレクタ「.btnTakeOut」を指定して、クラス属性が btnTakeOut である要素に以下のスタイルを設定します。
width: 100%; … 取出しボタンの横幅を親要素の100%(同じ大きさ)にする。
height: 30px; … 要素の高さを設定する。
cursor: pointer; … 要素の上にマウスポインターが乗ったとき、指マークにする。

STEP5 購入商品を増やす

購入商品を追加
Webページの画面イメージ

取出口に表示する購入商品を増やします。
これまでに作成した購入商品タグをコピーして貼り付けて、一部を書きかえれば簡単に作成できます。

【index.html】

<!-- 購入商品 -->
<li class="dispensingDrinkFrame">
  <div class="drink" style="background-image: url('./css/images/drink01.png');"></div>  <!-- 商品画像 -->
</li>
<!-- 購入商品 -->
<li class="dispensingDrinkFrame">
  <div class="drink" style="background-image: url('./css/images/drink03.png');"></div>  <!-- 商品画像 -->
</li>

【プログラム解説】

<li class="dispensingDrinkFrame">
  <div class="drink" style="background-image: url('./css/images/drink03.png');"></div>  <!-- 商品画像 -->
</li>

1個目に作成した商品<li>~</li>タグ(子要素を含む)をコピーして、</li>タグの下に貼り付けます。
コピーしたタグの以下の箇所を変更すれば商品を増やすことができます。
・商品画像  :background-imageに指定する画像ファイルのパスを変更する。

財布

財布
Webページの画面イメージ

次は、財布のレイアウトにいきましょう。
1000円、500円、100円、50円、10円のお金ボタンを作成していきます。

以下の順で作成します。

① 財布エリア
② 1000円ボタン
③ その他のお金ボタン

STEP1 財布エリア

財布エリア
Webページの画面イメージ

【index.html】

<!-- 自販機 -->
<div class="vendingMachine">
  ~~~ 省略 ~~~
</div><!-- 自販機 -->

<!-- 財布エリア -->
<div class="pocketmoneyArea">
  
</div><!-- 財布エリア -->

【プログラム解説】

<div class="pocketmoneyArea">
</div>

財布要素を表示するための div タグを作成します。
※作成場所は、自販機(divタグ)の下に記述します。

div タグのクラス属性に pocketmoneyArea を設定します。


【index.css】

/************************************
* 財布エリア
************************************/
/* 領域 */
.pocketmoneyArea{
  padding: 1rem;
}

【プログラム解説】

.pocketmoneyArea{
  padding: 1rem;
}

セレクタ「.pocketmoneyArea」を指定して、クラス属性が pocketmoneyArea である要素に以下のスタイルを設定します。
padding: 1rem; … 内側の上下左右余白を1remに設定する。※remはHTMLで基準の文字サイズ。

STEP2 1000円ボタン

1000円ボタン
Webページの画面イメージ

【index.html】

<!-- 財布エリア -->
<div class="pocketmoneyArea">
  <button type="button" class="money money1000" data-moneyval="1000"></button>

</div><!-- 財布エリア -->

【プログラム解説】

<button type="button" class="money money1000" data-moneyval="1000"></button>

1000円のお金ボタンを button タグで作成します。

button タグのクラス属性に moneyとmoney1000 を設定します。※複数のクラスを設定できます。
データ属性(data-moneyval)に金額「1000」を設定します。※別記事で紹介するJavaScript処理で使用します


【index.css】

/* お金共通 */
.money{
  background-size	: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  width: 100px;
  height: 100px;
  cursor: pointer;
}
/* 1000円 */
.money1000{
  background-image: url("./images/1000.png");
}

【プログラム解説】

/* お金共通 */
.money{
  background-size	: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  width: 100px;
  height: 100px;
  cursor: pointer;
}

セレクタ「.money」を指定して、クラス属性が money である要素に以下のスタイルを設定します。
background-size : cover; … 画像の縦横比を保持しつつ、要素いっぱいに表示する。※入りきらない部分はトリミングする。
background-position: center; … 背景画像を中央寄せする。
background-repeat: no-repeat; … 背景画像を繰り返し表示しない。
background-color: transparent; … 背景色を透明にする。
border: none; … 要素の境界線を消す。
width: 100px; … 要素の横幅を設定する。
height: 100px; … 要素の高さを設定する。
cursor: pointer; … 要素の上にマウスポインターが乗ったとき、指マークにする。


/* 1000円 */
.money1000{
  background-image: url("./images/1000.png");
}

セレクタ「.money1000」を指定して、クラス属性が money1000 である要素に以下のスタイルを設定します。
background-image: url(“./images/1000.png”); … 背景画像に1000円札の画像ファイルパスを設定する。

STEP3 その他のお金ボタン

その他のお金ボタン
Webページの画面イメージ

1000円以外のお金ボタンを増やします。
これまでに作成したお金ボタンタグをコピーして貼り付けて、一部を書きかえれば簡単に作成できます。

【index.html】

<!-- 財布エリア -->
<div class="pocketmoneyArea">
  <button type="button" class="money money1000" data-moneyval="1000"></button>
  <button type="button" class="money money500" data-moneyval="500"></button>
  <button type="button" class="money money100" data-moneyval="100"></button>
  <button type="button" class="money money50" data-moneyval="50"></button>
  <button type="button" class="money money10" data-moneyval="10"></button>
</div><!-- 財布エリア -->

【プログラム解説】

<button type="button" class="money money500" data-moneyval="500"></button>
<button type="button" class="money money100" data-moneyval="100"></button>
<button type="button" class="money money50" data-moneyval="50"></button>
<button type="button" class="money money10" data-moneyval="10"></button>

1個目に作成した1000円ボタンタグをコピーして、1000円ボタンタグの下に貼り付けます。
コピーしたタグの以下の箇所を変更すればお金ボタンを増やすことができます。
・クラス属性:money500、money100、money50、money10 に変更する。
・データ属性(data-moneyval):500、100、50、10 に変更する。


【index.css】

/* 500円 */
.money500{
  background-image: url("./images/500.png");
}
/* 100円 */
.money100{
  background-image: url("./images/100.png");
}
/* 50円 */
.money50{
  background-image: url("./images/50.png");
}
/* 10円 */
.money10{
  background-image: url("./images/10.png");
}

【プログラム解説】

/* 500円 */
.money500{
  background-image: url("./images/500.png");
}

セレクタ「.money500」を指定して、クラス属性が money500 である要素に以下のスタイルを設定します。
background-image: url(“./images/500.png”); … 背景画像に500円硬貨の画像ファイルパスを設定する。


/* 100円 */
.money100{
  background-image: url("./images/100.png");
}

セレクタ「.money100」を指定して、クラス属性が money100 である要素に以下のスタイルを設定します。
background-image: url(“./images/100.png”); … 背景画像に100円硬貨の画像ファイルパスを設定する。


/* 50円 */
.money50{
  background-image: url("./images/50.png");
}

セレクタ「.money50」を指定して、クラス属性が money50 である要素に以下のスタイルを設定します。
background-image: url(“./images/50.png”); … 背景画像に50円硬貨の画像ファイルパスを設定する。


/* 10円 */
.money10{
  background-image: url("./images/10.png");
}

セレクタ「.money10」を指定して、クラス属性が money10 である要素に以下のスタイルを設定します。
background-image: url(“./images/10.png”); … 背景画像に10円硬貨の画像ファイルパスを設定する。

まとめ

本記事では、Webページの見た目を作っていく方法を解説しました。

Webページを作るために以下のスキルを使用しました。

Webページを作るスキル

① HTML
② CSS

Webページを作成するためには、HTMLとCSSの知識は必須です。

HTML、CSSコーディングを含むWebデザイナーを目指す場合も、Webシステムを作成するエンジニアを目指す場合も、どちらもWebページを作成するスキルは必要なので、しっかりと学習しましょう。

HTMLとCSSでWebページを作成できるようになった後は、Webページに動きをつけるためにJavaScriptの学習に進みましょう。

JavaScriptを使えるようになると、よりWebページを作成することが楽しくなります!

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

この記事を書いた人

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

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

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

コメント

コメントする

CAPTCHA


目次
閉じる