More than 5 years have passed since last update.

Javascriptで電卓を作ろう　第1回　HTMLとCSSでボタンを横並びで配置しよう

Last updated at 2019-07-29Posted at 2019-05-27

#初めに
動画で習った内容を理解できた。でも自分で作れるかはどうだろう？javascriptの練習課題が必要と考え、電卓の作り方を書きました。小さい作品でいいから自分で作り上げていくことが大切。電卓は基礎問題の宝庫です。
最も簡単な「とりあえず計算できる」状態から、エラーを減らし、様々な機能を追加した状態にしていきたいと思います。

[完成版はこちら]
(https://mycalculator-a79ad.firebaseapp.com/)

Javascriptで四則演算
6)打った数字をコンソールに出力させよう。
7)打った数字と記号を変数に格納しよう。
8)計算結果を出力させよう。
8-1）「＝」を押した時の処理
8-2) 計算結果と計算途中を、計算結果の画面に表示させよう。

第3回　連続で演算記号や小数点が押された場合の不具合処理

最初に「＋　÷　－　×　＝」が押せないようにする。
二回連続で計算できるようにしたい。
Cボタン（リセットボタン）を押した時の処理
BS(バックスペース）ボタンを使えるようにする

第4回　小数点を正しく入力できるように改善しよう

12.12.や12..12のように小数点を間違って入力できてしまう。
電卓と同じように「.4」と入力したら0.4としたい。

第5回　演算記号を連続して押した時の不具合を直そう

第6回　バックスペースを押した時の不具合を直そう。

第7回　「4 ÷ 3 = 1.33333333333333333」の表示桁数を10桁にしたい

第8回　「電卓と同じ表示画面を目指そう

#レベル１のイメージ

#HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>電卓</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class = "container">
<!--      計算結果を出力する場所-->
      <div id = "output_total" class="output ">0</div>
<!--      計算過程を出力する -->
      <div id = "output_sub" class="output active">0</div>
<!--      ボタンを配置する場所-->
      <div class = 'input'>
          <section class = 'row'>
            <div id = "clear">C</div>
            <div class = "num_bth"></div>
            <div class = "num_bth" id="bs">BS</div>       
            <div class = "num_bth " data-index-id= '/'>÷</div>
          </section>
          <section class = 'row'>
            <div class = "num_bth " data-index-id = 9 >9</div>
            <div class = "num_bth " data-index-id = 8 >8</div>
            <div class = "num_bth " data-index-id = 7 >7</div>
            <div class = "num_bth " data-index-id = '*'>×</div>
          </section>
          <section class = 'row'>
            <div class = "num_bth " data-index-id = 6 >6</div>
            <div class = "num_bth " data-index-id = 5 >5</div>
            <div class = "num_bth " data-index-id = 4 >4</div>
            <div class = "num_bth " data-index-id = '-'>－</div>     
          </section>
          <section class = 'row'>
            <div class = "num_bth " data-index-id = 3 >3</div>
            <div class = "num_bth " data-index-id = 2 >2</div>
            <div class = "num_bth " data-index-id = 1 >1</div>
            <div class = "num_bth " data-index-id = '+'>+</div>
          </section>
          <section class = 'row'>
            <div class = "num_bth" data-index-id = 00 >00</div>
            <div class = "num_bth" data-index-id = 0 >0</div>
            <div class = "num_bth" data-index-id = . >.</div>
            <div id = 'equal_btn'>=</div>       
          </section>        
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

HTMLの出力結果

「data-index-id = 9」の記載がわからない場合は、「JavaScript」「data属性（カスタムデータ属性）」で検索して復習してみよう。

#CSS
1)containerの幅は200px。上から50xp余白を作り、左右の余白は均等。全体を2pxの黒線の枠線を書こう。

.container {
  width: 200px;
  margin: 50px auto;
  border: 2px solid black;
}

2)計算結果の出力場所のスタイリング

幅　200px
高さ 50px
文字は、高さは中央揃え、横は右寄せ
padding 5pxで文字と枠線にスペースを持たせる
枠線の下に5pxのmarginをとる。

.output {
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: right;
  padding: 5px;
  margin-bottom: 5px;
  border:2px solid black;
}

3)widthがpaddingの分だけずれてしまった。widthにpadding含ませるにはどうしよう？

.output {
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: right;
  padding: 5px;
  margin-bottom: 5px;
  border:2px solid black;
  box-sizing: border-box;
}

box-sizing: border-box;とすると、widthにpadding含ませられるので、綺麗に揃う。

4)ボタンの部分のスタイリング

幅 200px;
2pxの黒の枠線

.input {
  width:200px;
  border: 2px solid black; 
}

5)ボタンのスタイリング
5-1)ボタンを横並びにしたい

.row {
  display: flex;
}

5-2)ボタンにスペースを作り、均等に配置したい

.row {
  display: flex;
  justify-content: space-between;
}

【均等配置】
justify-content: space-between;
とすると、各アイテムを均等に配置し最初のアイテムは先頭に寄せ、最後のアイテムは末尾に寄せることができる。
MDNのjustify-contentの解説

5-3)ナンバーボタン、クリアボタン、イコールボタンをスタイリングしよう。

幅　60px
高さ　30px
文字は高さ中央揃え、横は中央
色はgray
少し丸めよう（30%)
ボタンがカーソルが乗ったことがわかるようにしてみよう。

.row {
  display: flex;
  justify-content: space-between;
  border: 2px solid red;
  width: 200px;
}
/*rowの範囲がわかりやすいように赤の枠を作っています。*/

.num_bth, #clear, #equal_btn{
  width: 60px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 30%;
  background: lightgray;
  cursor: pointer 
}

5-4)ボタンの間に余白を作ろう

.num_bth, #clear, #equal_btn{
  width: 60px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 30%;
  background: lightgray;
  cursor: pointer;
  margin: 5px;
}

ボタンのスタイリングはほぼ完成。
今までのCSSのコードはこちら

.container {
  width: 200px;
  margin: 50px auto;
  border: 2px solid black;
}

.output {
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: right;
  padding: 5px;
  margin-bottom: 5px;
  border:2px solid black;
  box-sizing: border-box;
}

.input {
  width:200px;
  border: 2px solid black; 
}

.row {
  display: flex;
  justify-content: space-between;
  border: 2px solid red;
  width: 200px;
}
/*rowの範囲がわかりやすいように赤の枠を作っています。*/

.num_bth, #clear, #equal_btn{
  width: 60px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 30%;
  background: lightgray;
  cursor: pointer;
  margin: 5px;
}

次回、javascriptで計算をしていきたいと思います。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Javascriptで電卓を作ろう 第1回 HTMLとCSSでボタンを横並びで配置しよう

目次

Javascriptで電卓を作ろう　第1回　HTMLとCSSでボタンを横並びで配置しよう