HTMLで電卓を作れるようになるたった3つのステップ

2023年2月25日2024年2月19日

URLをコピーしました！

HMTL、CSS、JavaScriptを使用して電卓プログラムを作りました。

最小限の機能にまとめて、初心者の方がHTMLを勉強するのにわかりやすく記事にしてみました。

この記事では、たった3つのステップでHTMLで電卓を作る方法をご紹介します。

プログラミングの知識がなくても、手順に従って進めれば誰でも簡単に作成できます。

まずはソースコードをコピーしてそのままマネして動かしてみてください。

ソースコードの解説をもとに、自分なりに機能追加してカスタマイズすると勉強になります。

ぜひこの記事を読んで、自分の手でオリジナルの電卓を作成してみてください！

HTMLによる電卓のデザイン完成イメージ

作成する電卓のHTMLのデザイン完成イメージがこちらです。

この記事で紹介するHMTL、CSS、JavaScriptをコーディングするときは、「Visual Studio Code」をエディタに使用するのがおすすめです。

「Visual Studio Code」のインストールや初期設定方法は、こちらの記事に詳しく紹介していますのでご覧ください。

VSCodeのインストール・初期設定方法

あわせて読みたい

VSCodeのインストール・初期設定方法とおすすめ拡張機能について 2022年6月8日、GitHubよりテキストエディタ「Atom」の開発を終了する、との発表が行われました。 Atomユーザーには、12月15日の廃止日までに代替サービスへの移行方法な…

事前準備

最初にパソコンの作業用フォルダを任意の名前で作成してください。

フォルダを作成したら、下記のファイルを３つ作成します。

事前準備

main.html・・・HTMLを記述するファイルです。
style.css・・・CSS（スタイルシート）を記述するファイルです。
dentaku.js・・・JavaScriptを記述するファイルです。

ステップ①　HTMLを作成する

HTMLで電卓のレイアウトを作成するコード

では、HMTLを作成していきます。

<!DOCTYPE html>
<html>
<head>
	<title>★電卓★</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="container">
		<div class="calculator">
			<div class="display">
				<input type="text" id="result" placeholder="0" disabled>
			</div>
			<div class="keypad">
				<button onclick="clearResult()">C</button>
				<button onclick="appendToResult('/')">／</button>
				<button onclick="appendToResult('*')">＊</button>
				<button onclick="appendToResult('-')">－</button>
				<button onclick="appendToResult('7')">７</button>
				<button onclick="appendToResult('8')">８</button>
				<button onclick="appendToResult('9')">９</button>
				<button onclick="appendToResult('+')">＋</button>
				<button onclick="appendToResult('4')">４</button>
				<button onclick="appendToResult('5')">５</button>
				<button onclick="appendToResult('6')">６</button>
				<button onclick="calculateResult()">=</button>
				<button onclick="appendToResult('1')">１</button>
				<button onclick="appendToResult('2')">２</button>
				<button onclick="appendToResult('3')">３</button>
				<button onclick="appendToResult('0')">０</button>
				<button onclick="appendToResult('.')">.</button>
			</div>
		</div>
	</div>
	<script src="dentaku.js"></script>
</body>
</html>

HTMLのコード解説

このHTMLは、3つの要素で構成されています。

1つ目は、電卓の外部レイアウトを設定するための<div class="container">要素です。

2つ目は、電卓の背景色とレイアウトを設定するための<div class="calculator">要素で、<div class="display">と<div class="keypad">という2つの子要素を持っています。

3つ目はJavaScriptファイルを読み込むための<script>要素です。

11行目

各属性	説明
type=”text”	テキストを入力できるフィールドを作成します。
id=”result”	要素に一意のIDを設定しています。このIDは、JavaScriptやCSSで要素にアクセスするために使用されます。
placeholder=”0″	デフォルトで０を表示させています。
disabled	フィールドに入力できないようにします。ユーザはフィールドの値を変更できません。この属性は、テキストフィールドを見せるが編集できない状態にすることができます。

15行目

各属性	説明
button	クリック可能なボタンを作成します。
onclick	ボタンがクリックされたときに呼び出されるJavaScript関数を指定します。
appendToResult(‘/’)	ボタンがクリックされたときに実行される関数です。この関数は、引数としてスラッシュを渡し、結果にスラッシュを追加するためにJavaScriptで定義されている必要があります。
／	ボタンのラベルとして使用されるテキストです。これはスラッシュを表すテキストです。

つまり、このHTMLは、スラッシュを表すボタンを作成し、ボタンがクリックされたときに、テキストフィールドの現在の値にスラッシュを追加するJavaScript関数を呼び出します。

16行目から30行目も同様に、異なる引数とラベルがありますが、基本的に同じ構造を持っています。

34行目

各属性	説明
script	JavaScriptコードをウェブページに埋め込むことができます。外部のJavaScriptファイルを読み込む場合は、src属性を使用してファイルのパスを指定することができます。
src=”dentaku.js”	外部JavaScriptファイルのパスを指定します。この場合、dentaku.jsという名前のファイルが同じディレクトリに存在する必要があります。

つまり、このHTMLは、dentaku.jsという名前の外部JavaScriptファイルを読み込むためのものです。このファイルは、ウェブページの動的な計算機能を実現するために、HTML内で定義されているボタンの処理を実装しています。

ステップ②　CSSを作成する

電卓のレイアウトを装飾するCSS

.container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: white;
}

.calculator {
	border: 1px solid white;
	background-color: rgb(181, 247, 246);
	border-radius: 5px;
	box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

.display {
	padding: 10px;
	text-align: right;
	border-bottom: 1px solid black;
	background-color: rgb(199, 254, 246);
}

.display input {
	width: 100%;
	height: 40px;
	padding-right: 10px;
	font-size: 30px;
	outline: none;
	border: none;
}

.keypad {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 5px;
	padding: 10px;
}

button {
	background-color: blue;
	color: white;
	padding: 10px 20px;
	font-size: 20px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

button:hover {
	background-color: #d5f632;
	color:black;
}

CSSの解説

クラス名	説明
.container	ウェブページの中央に電卓を配置するために、flexボックスの中央揃えを定義します。背景色は白に設定されています。
.calculator	電卓全体のスタイルを定義します。白い境界線と丸い角を持つ、淡い水色の背景色を設定します。また、影をつけることで、電卓の立体感を表現しています。
.display	電卓の上部にあるテキストボックスのスタイルを定義します。右揃えになっていて、黒い境界線を下に持ち、淡い緑色の背景色を持ちます。
.display input	電卓のテキストボックスのスタイルを定義します。テキストボックスの幅は100%、高さは40px、フォントサイズは30px、右側には10pxの余白を持ち、枠線がなく、フォーカスされていないときには背景色がありません。
.keypad	電卓のキーパッドのスタイルを定義します。4つの等しい幅の列があり、列間に5pxの余白を持ちます。パッディングが10pxあります。
button	電卓のすべてのボタンのスタイルを定義します。青い背景色、白い文字色、10pxの上下のパッディング、20pxの左右のパッディング、20pxのフォントサイズ、半径5pxの角丸、カーソルがポインターに変わります。また、0.3秒かけて変化するアニメーションがあります。
button:hover	ボタンにマウスを合わせると、背景色が黄緑色に変化し、文字色が黒色に変化します。

ステップ③　JavaScriptを作成する

電卓の処理を行うJavaScriptのコード

let result = document.getElementById('result');

function appendToResult(value) {
    result.value += value;
}

function calculateResult() {
    result.value = eval(result.value);
}

function clearResult() {
    result.value = '';
}

JavaScriptの解説

関数	説明
appendToResult	引数 `value` に指定された値を `result` の値に追加します。これにより、ユーザーがボタンをクリックするたびに、ディスプレイに数字や演算子が追加されます。
calculateResult	`eval` 関数を使用して `result` の式を評価します。これにより、ユーザーが “=” ボタンをクリックしたときに、ディスプレイに表示される式の結果が計算されます。
clearResult	`result` の値を空の文字列に設定します。つまり、ユーザーが “C” ボタンをクリックすると、ディスプレイの値がクリアされます。