シンプルなHTML電卓の作り方

HTMLで作るシンプルな電卓の作り方をわかりやすく解説したガイドを読んでみてください。使いやすいエディターで自分で作成することも、記事からコードをコピーするだけでもOKです。あなたのウェブサイトで使えるシンプルなHTML電卓のコードを手に入れましょう。

計算機ウィジェットを作成する

Valeria Polyakova

4週間前

HTMLで計算機を作る方法

足し算、引き算、掛け算、割り算といった基本的な機能を備えたシンプルで手早い計算機が必要なら、以下のコードを使ってください。この計算機のHTMLコードをあなたのHTMLファイルに入れて、動作を確認できます。コード内には動作の仕組みやスタイルやレイアウトの変更方法がわかるコメントも含まれています。

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Simple Calculator</title>  <style>    /* ページ全体のスタイル、計算機を中央に配置 */    body {      font-family: Arial, sans-serif;      display: flex;      justify-content: center;      align-items: center;      height: 100vh;      background-color: #f0f0f0;    }    /* 計算機コンテナのスタイル */    .calculator {      background-color: white;      padding: 20px;      border-radius: 10px;      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);    }    /* 表示エリアのスタイル */    .display {      width: 160px;      height: 40px;      text-align: right;      margin-bottom: 10px;      font-size: 1.5em;      padding: 5px;    }    /* 計算機ボタンのグリッドレイアウト */    .buttons {      display: grid;      grid-template-columns: repeat(4, 40px);      gap: 10px;    }    /* ボタンのスタイル */    .buttons button {      width: 40px;      height: 40px;      font-size: 1.2em;      border: none;      background-color: #4CAF50;      color: white;      border-radius: 5px;      cursor: pointer;    }    /* ボタンのホバー効果 */    .buttons button:hover {      background-color: #45a049;    }    /* イコールボタンの特別なスタイル */    .buttons .equals {      grid-column: span 2; /* 2列分を占める */      background-color: #2196F3;    }    /* イコールボタンのホバー効果 */    .buttons .equals:hover {      background-color: #0b7dda;    }  </style></head><body>  <div class="calculator">    <!-- 計算結果を表示する入力フィールド -->    <input type="text" class="display" id="display" disabled>        <!-- グリッドで配置された計算機ボタン -->    <div class="buttons">      <button onclick="appendNumber('1')">1</button>      <button onclick="appendNumber('2')">2</button>      <button onclick="appendNumber('3')">3</button>      <button onclick="setOperator('+')">+</button>      <button onclick="appendNumber('4')">4</button>      <button onclick="appendNumber('5')">5</button>      <button onclick="appendNumber('6')">6</button>      <button onclick="setOperator('-')">-</button>      <button onclick="appendNumber('7')">7</button>      <button onclick="appendNumber('8')">8</button>      <button onclick="appendNumber('9')">9</button>      <button onclick="setOperator('*')">*</button>      <button onclick="clearDisplay()">C</button>      <button onclick="appendNumber('0')">0</button>      <button onclick="calculate()" class="equals">=</button>      <button onclick="setOperator('/')">/</button>    </div>  </div>  <script>    /* 現在の入力、前の入力、演算子を保存する変数 */    let currentInput = '';    let operator = '';    let previousInput = '';    /* 数字を現在の入力に追加する関数 */    function appendNumber(number) {      currentInput += number; // クリックされた数字を現在の入力に追加      document.getElementById('display').value = currentInput; // 表示を更新    }    /* 演算子を設定し、次の入力に備える関数 */    function setOperator(op) {      operator = op; // 選択された演算子を保存      previousInput = currentInput; // 現在の入力を前の入力として保存      currentInput = ''; // 次の数字のために現在の入力をクリア    }    /* 演算子に基づいて計算を実行する関数 */    function calculate() {      let result;      // 演算子に応じて適切な計算を実行      if (operator === '+') {        result = parseFloat(previousInput) + parseFloat(currentInput);      } else if (operator === '-') {        result = parseFloat(previousInput) - parseFloat(currentInput);      } else if (operator === '*') {        result = parseFloat(previousInput) * parseFloat(currentInput);      } else if (operator === '/') {        result = parseFloat(previousInput) / parseFloat(currentInput);      }      document.getElementById('display').value = result; // 結果を表示      currentInput = result.toString(); // 結果を新しい現在の入力として保存      operator = ''; // 演算子をリセット    }    /* 表示をクリアし、計算機をリセットする関数 */    function clearDisplay() {      currentInput = '';      previousInput = '';      operator = '';      document.getElementById('display').value = ''; // 表示をクリア    }  </script></body></html>

主要セクションの説明

計算機の管理や調整をしやすくするために、機能についての説明を追加しました：

HTML構造

計算機は calculator クラスのdiv要素内に収められています。
input 要素が計算機の表示用に使われており、ユーザーが直接入力できないように無効化されています。
ボタンは buttons divでグリッド形式に整理され、計算機の形に配置されています。

CSSスタイリング

ページのbodyは計算機を縦横中央に配置するようにスタイル設定されています。
計算機本体は白背景で角が丸く、カードのような影が付けられています。
ボタンはサイズや色が統一され、ホバー時に視覚的なフィードバックがあるようにデザインされています。

JavaScriptの機能

appendNumber() はユーザーがボタンをクリックしたときに数字を表示に追加します。
setOperator() は選択された演算子（＋、−、＊、／）を保存し、現在の入力を前の入力として記憶します。
calculate() は選択された演算子に基づいて計算を行い、結果を表示します。
clearDisplay() はすべての入力と表示をクリアして計算機をリセットします。

これは基本的なHTML、CSS、JSを使ったシンプルな計算機です。そのため、見た目や機能はかなり限定的です。

複雑な計算用の計算機の作り方

上記のシンプルなHTML計算機は基本的な操作に適しており、シンプルで機能的なデザインです。コーディング学習の進捗を確認したり、ちょっとした遊びに使うのに良いでしょう。しかし、プロフェッショナルな用途やより複雑な計算には、より高度なものが必要になるかもしれません。家計の予算を立てたり旅行の計画をしたりする場合、計算機能が充実していると大きな助けになります。では、どんな選択肢があるでしょうか？

さらにコーディングを学ぶ

より複雑なプロジェクトに取り組む最善の方法は、HTML、CSS、JavaScriptをさらに深く学ぶことです。高度な知識があれば、複数の入力欄やオプション、条件、変数を使った計算を作成できます。その時点で、単なる基本的なHTML計算機を作る以上のコーディングスキルを身につけているでしょう。道のりは長いですが。

コーディング不要のHTML計算機ウィジェットを試す

もしまだコーディングスキルが十分でなく、今すぐ強力な解決策が必要なら、朗報です。コーディング不要でカスタムのHTML計算機ウィジェットを作成できます。多数の入力欄を追加し、条件を調整し、シナリオに合わせてわかりやすく名前を付けられます。続ける前に、下のエディターでぜひ試してみてください。

このセクションでは、カスタムHTML計算機ウィジェットの作成方法を詳しく説明します。また、どんなウェブサイトにも簡単に埋め込めてすぐに使えます。さあ、どうやって作るのか見てみましょう。

適切なテンプレートを選ぶ。 上で見たエディターを使い続けるか、事前デザインされた計算機テンプレート一覧からあなたのケースに最も合うものを選びましょう。
必要な入力欄を追加する。 ウィジェットはスライダー、数字、選択肢、ドロップダウンなど多彩な入力欄を提供し、シナリオを正確に表現できます。
スタイルをカスタマイズする。 エディターの「スタイル」タブで計算機の見た目を調整し、好みやブランド、ウェブサイトの色に合わせましょう。
その他の設定を調整する。 「設定」タブでウィジェットの最終調整を行い、区切り文字やルールを設定します。個人的なHTMLやJSのアイデアがあれば、ここでコードを挿入できます。
保存して使い始める。 結果に満足したらウィジェットを公開し、計算機のHTMLコードを取得します。数行のコードを任意のウェブサイトプラットフォームに追加するだけで使えます。