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計算機ウィジェットの作成方法を詳しく説明します。また、どんなウェブサイトにも簡単に埋め込めてすぐに使えます。さあ、どうやって作るのか見てみましょう。
- 適切なテンプレートを選ぶ。 上で見たエディターを使い続けるか、事前デザインされた計算機テンプレート一覧からあなたのケースに最も合うものを選びましょう。
- 必要な入力欄を追加する。 ウィジェットはスライダー、数字、選択肢、ドロップダウンなど多彩な入力欄を提供し、シナリオを正確に表現できます。
- スタイルをカスタマイズする。 エディターの「スタイル」タブで計算機の見た目を調整し、好みやブランド、ウェブサイトの色に合わせましょう。
- その他の設定を調整する。 「設定」タブでウィジェットの最終調整を行い、区切り文字やルールを設定します。個人的なHTMLやJSのアイデアがあれば、ここでコードを挿入できます。
- 保存して使い始める。 結果に満足したらウィジェットを公開し、計算機のHTMLコードを取得します。数行のコードを任意のウェブサイトプラットフォームに追加するだけで使えます。
ウェブサイト上で、このHTML計算機ウィジェットを必要なだけ使えます。費用や貯蓄の計画、商用サービスのプロモーション、ブログのインタラクティブ化などに活用してください。主要CMSプラットフォームへの計算機追加方法の簡単なマニュアルや、対応プラットフォーム一覧もご覧いただけます。
HTMLで作る計算機の例
ここでは、コーディングなしで5〜10分で自分で作れる計算機の例をいくつか紹介します。使いたい用途を念頭に置き、エディターで作成するときにすべてのアイデアをフォームに盛り込んでみてください。
住宅ローン計算機
ローン金額、金利、期間に基づいて月々の住宅ローン返済額を簡単に見積もれます。カスタマイズ可能な住宅ローン計算機をお試しください。
ROI計算機
投資の潜在的なリターンを簡単に計算できるようにビジネスを支援します。ROI計算機テンプレートをご覧ください。
BMI計算機
身長と体重の入力から体格指数(BMI)を計算し、健康に役立つ情報を提供します。BMI計算機で作成を始めましょう。
まとめ
まとめとして、シンプルなHTML計算機の作り方とすぐに使えるコードを紹介しました。基本的な作業や学習には最適ですが、より高度な計算や複雑なシナリオには多機能なウィジェットが適しています。
当社のウィジェットはどんなウェブサイトにもシームレスに統合でき、幅広い人気のユースケースに対応し、機能性と柔軟性を提供します。財務管理や複雑な計算にも対応できるツールをお探しなら、ぜひご利用ください。
編集者:無料でHTML計算機を作成
自分だけのカスタムHTML計算機を作り、すべての機能を試してみませんか?ページ内の計算機エディターでウィジェットの動作を体験してください!
お問い合わせ
このガイドがお役に立てれば幸いです!ウェブサイト用のカスタム計算機を作りたい場合は、どうぞお気軽にご連絡ください。Elfsightの使命は、ノーコードウィジェットを通じて簡単で成功体験を提供することです。
活発なコミュニティにもぜひ参加してください。アイデアや知見が常に共有されています。改善案があればウィッシュリストに追加してください!