JavaScript/HTML/CSSを使用した簡単な電卓を作ろう
参考にするサイトの模写をします
新しく覚えた要素(HTML編)
< form >
ユーザーから情報を入力して送信するためのフォーム作成に必要
colspan=" "
セルを横に何個増やすか
get_calc
電卓アプリや数値入力UIで使われる関数名、ユーザーがクリックしたボタンの値を読み取って表示エリアに追加する処理などを行います
get_calc(this)
この要素自身、電卓ならクリックされたボタンそのもの
忘れていた要素(HTML編)
< table >
表を作成するのに必要
< tr >
表の横一列を作成
< td >
表のマスを作成
disabled
ユーザーが操作できないようにする
onclick=" "
ユーザーが要素をクリックしたときに発生するイベントを作成
模写した内容
<body>
<form name="dentaku">
<table>
<!-- 液晶画面 -->
<tr>
<td colspan="4">
<input type="text" class="display" value="" disabled>
</td>
</tr>
<!-- 1段目 -->
<tr>
<td><input type="button" value="7" onclick="get_calc(this)"></td>
<td><input type="button" value="8" onclick="get_calc(this)"></td>
<td><input type="button" value="9" onclick="get_calc(this)"></td>
<td><input type="button" value="÷" class='operator' name="div_btn" onclick="get_calc(this)"></td>
</tr>
<!-- 2段目 -->
<tr>
<td><input type="button" value="4" onclick="get_calc(this)"></td>
<td><input type="button" value="5" onclick="get_calc(this)"></td>
<td><input type="button" value="6" onclick="get_calc(this)"></td>
<td><input type="button" value="×" class='operator' name="multi_btn" onclick="get_calc(this)"></td>
</tr>
<!-- 3段目 -->
<tr>
<td><input type="button" value="1" onclick="get_calc(this)"></td>
<td><input type="button" value="2" onclick="get_calc(this)"></td>
<td><input type="button" value="3" onclick="get_calc(this)"></td>
<td><input type="button" value="-" class='operator' name="div_btn" onclick="get_calc(this)"></td>
</tr>
<!-- 4段目 -->
<td><input type="button" value="0" onclick="get_calc(this)"></td>
<td><input type="button" value="C" onclick="get_calc(this)"></td>
<td><input type="button" value="=" class='equal' onclick="get_calc(this)"></td>
<td><input type="button" value="+" class='operator' onclick="get_calc(this)"></td>
</table>
</form>
</body>
次はCSSでスタイリングします
模写したコード
table {
/* 電卓のサイズ */
width: 300px;
height: 400px;
/* 電卓に影をつける */
border: solid 1px #dcdcdca4;
border-right: solid 4px #dcdcdca4;
border-bottom: solid 4px #dcdcdca4;
border-radius: 10px;
text-align: center;
/* 余白 */
padding: 8px;
margin: 20px;
}
input {
/* ボタンのサイズ */
width: 70px;
height: 70px;
/* ボタンの文字サイズ */
font-size: x-large;
/* 数字の背景色 */
background-color: #dcdcdca4;
/* ボタンの詳細設定 */
border: none;
border-radius: 20px;
/* クリック時の黒枠を消す */
outline: none;
}
/* ディスプレイの詳細設定 */
.display {
width: 250px;
text-align: right;
/* 見た目の詳細設定 */
background: #ffffff;
border-top: solid #dcdcdca4 5px;
border-bottom: solid #dcdcdca4 5px;
border-right: solid #b6b6b6 6px;
border-left: solid #b6b6b6 6px;
border-radius: 5px;
}
/* 演算子の背景色を上書きで設定 */
.operator {
background-color: #87cefa;
}
/* 記号＝の部分の背景色を上書きで設定 */
.equal {
background-color: #b6b6b6;
}
/* カーソルを上に乗せた時に色を濃くする */
input:hover {
background: #747373b9;
}
.display:hover {
background: #ffffff;
/* ディスプレイ部分は無効化 */
}
.operator:hover {
background: #339cdd;
}
/* クリック時に色を濃くする */
input:active {
background: #5a5a5a;
}
.operator:active {
background: #2c80b4;
}
途中まで完成した電卓
