パーセント計算、意外とよくやるんだよね。割引率とか、達成率とか。そのたびに電卓アプリ探したり、Googleで「〇〇の△%」って検索したり。正直、ちょっと面倒。
特に自分のブログとかサイトで、何かを説明してるとき。「ここで30%オフの計算をしてみましょう」ってなっても、読者を別のサイトに飛ばすのは気が引ける。流れが切れちゃうし。
先說結論
そういう時のために、コピペ一発で自分のサイトに埋め込める、多機能なパーセント計算ツール。HTML、CSS、JavaScriptが全部セットになってるから、これだけで動く。うん、かなり便利だと思う。
これがコードの全部
とりあえず、コードはこれ。全部。長いけど、これをまるっとコピーすればOK。中身をいじる必要は、基本的にはない。
<div class="percentage-calculator-wrapper">
<style>
.percentage-calculator-wrapper { font-family: Arial, sans-serif; margin: 20px auto; max-width: 600px; background-color: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); }
.percentage-calculator-header { background-color: #f2f2f2; color: #333; padding: 20px; text-align: center; border-bottom: 1px solid #e0e0e0; }
.percentage-calculator-header h2 { font-size: 1.5em; margin: 0; }
.percentage-tab-container { display: flex; flex-wrap: wrap; background-color: #f0f0f0; padding: 10px; }
.tab-row { display: flex; width: 100%; justify-content: space-around; margin-bottom: 5px; }
.percentage-tab { flex: 1 1 20%; max-width: 20%; padding: 10px 15px; border: none; background-color: #ddd; color: #555; font-weight: 600; cursor: pointer; transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); text-align: center; box-sizing: border-box; position: relative; z-index: 1; }
.percentage-tab.active { color: #007bff; background-color: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
.percentage-tab:hover { background-color: #ccc; }
.percentage-tab-content { padding: 20px; display: none; border-top: 1px solid #e0e0e0; }
.percentage-tab-content#calculate { display: block; }
.percentage-label { display: block; margin-bottom: 8px; color: #333; font-weight: 500; }
.percentage-input[type="number"] { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
.percentage-button { background-color: #007bff; color: white; padding: 12px 20px; border: none; border-radius: 5px; cursor: pointer; width: 100%; transition: background-color 0.3s; font-size: 1em; }
.percentage-button:hover { background-color: #0056b3; }
.percentage-result { margin-top: 20px; font-weight: bold; color: #4CAF50; }
.percentage-example { font-style: italic; color: #777; margin-top: 5px; }
.percentage-error { color: #f44336; }
@media (max-width: 600px) {
.percentage-tab { font-size: 0.9em; padding: 8px 0; }
.percentage-calculator-header h2 { font-size: 1.2em; }
}
</style>
<div class="percentage-calculator-header">
<h2>パーセント計算機</h2>
</div>
<div class="percentage-tab-container">
<div class="tab-row">
<button class="percentage-tab active" data-tab="calculate">計算</button>
<button class="percentage-tab" data-tab="add">加算</button>
<button class="percentage-tab" data-tab="subtract">減算</button>
<button class="percentage-tab" data-tab="compare">比較</button>
<button class="percentage-tab" data-tab="ratio">比率</button>
</div>
<div class="tab-row">
<button class="percentage-tab" data-tab="initialIncrease">増加前の値</button>
<button class="percentage-tab" data-tab="initialDecrease">減少前の値</button>
<button class="percentage-tab" data-tab="increaseDecrease">増減率</button>
<button class="percentage-tab" data-tab="percentageIncrease">増加後の値</button>
<button class="percentage-tab" data-tab="percentageDecrease">減少後の値</button>
</div>
</div>
<div class="percentage-tab-content" id="calculate">
<label class="percentage-label" for="value1">数値入力:</label>
<input type="number" class="percentage-input" id="value1">
<label class="percentage-label" for="percentage1">パーセント入力:</label>
<input type="number" class="percentage-input" id="percentage1">
<button class="percentage-button" onclick="calculatePercentage()">計算する</button>
<p class="percentage-result" id="result1"></p>
<p class="percentage-example">例: 200 の 25% は 50</p>
</div>
<div class="percentage-tab-content" id="add" style="display: none;">
<label class="percentage-label" for="value2">数値入力:</label>
<input type="number" class="percentage-input" id="value2">
<label class="percentage-label" for="percentage2">パーセント入力:</label>
<input type="number" class="percentage-input" id="percentage2">
<button class="percentage-button" onclick="addPercentage()">加算する</button>
<p class="percentage-result" id="result2"></p>
<p class="percentage-example">例: 100 + 10% は 110</p>
</div>
<div class="percentage-tab-content" id="subtract" style="display: none;">
<label class="percentage-label" for="value4">数値入力:</label>
<input type="number" class="percentage-input" id="value4">
<label class="percentage-label" for="percentage4">パーセント入力:</label>
<input type="number" class="percentage-input" id="percentage4">
<button class="percentage-button" onclick="subtractPercentage()">減算する</button>
<p class="percentage-result" id="result4"></p>
<p class="percentage-example">例: 100 - 10% は 90</p>
</div>
<div class="percentage-tab-content" id="compare" style="display: none;">
<label class="percentage-label" for="value3">比較する値:</label>
<input type="number" class="percentage-input" id="value3">
<label class="percentage-label" for="total3">全体の値:</label>
<input type="number" class="percentage-input" id="total3">
<button class="percentage-button" onclick="comparePercentage()">比較する</button>
<p class="percentage-result" id="result3"></p>
<p class="percentage-example">例: 25 は 100 の 25%</p>
</div>
<div class="percentage-tab-content" id="ratio" style="display: none;">
<label class="percentage-label" for="ratioValue1">元の値:</label>
<input type="number" class="percentage-input" id="ratioValue1">
<label class="percentage-label" for="ratioValue2">後の値:</label>
<input type="number" class="percentage-input" id="ratioValue2">
<button class="percentage-button" onclick="calculateRatioPercentage()">計算する</button>
<p class="percentage-result" id="resultRatio"></p>
<p class="percentage-example">例: 100 が 150 になると 50% 増加</p>
</div>
<div class="percentage-tab-content" id="initialIncrease" style="display: none;">
<label class="percentage-label" for="initialIncreaseFinalValue">増加後の値:</label>
<input type="number" class="percentage-input" id="initialIncreaseFinalValue">
<label class="percentage-label" for="initialIncreasePercentage">増加率(%):</label>
<input type="number" class="percentage-input" id="initialIncreasePercentage">
<button class="percentage-button" onclick="calculateInitialIncrease()">計算する</button>
<p class="percentage-result" id="resultInitialIncrease"></p>
<p class="percentage-example">例: 25% 増加して 100 になった場合、元の値は 80</p>
</div>
<div class="percentage-tab-content" id="initialDecrease" style="display: none;">
<label class="percentage-label" for="initialDecreaseFinalValue">減少後の値:</label>
<input type="number" class="percentage-input" id="initialDecreaseFinalValue">
<label class="percentage-label" for="initialDecreasePercentage">減少率(%):</label>
<input type="number" class="percentage-input" id="initialDecreasePercentage">
<button class="percentage-button" onclick="calculateInitialDecrease()">計算する</button>
<p class="percentage-result" id="resultInitialDecrease"></p>
<p class="percentage-example">例: 25% 減少して 75 になった場合、元の値は 100</p>
</div>
<div class="percentage-tab-content" id="increaseDecrease" style="display: none;">
<label class="percentage-label" for="increaseDecreaseInitialValue">元の値:</label>
<input type="number" class="percentage-input" id="increaseDecreaseInitialValue">
<label class="percentage-label" for="increaseDecreaseFinalValue">後の値:</label>
<input type="number" class="percentage-input" id="increaseDecreaseFinalValue">
<button class="percentage-button" onclick="calculateIncreaseDecrease()">計算する</button>
<p class="percentage-result" id="resultIncreaseDecrease"></p>
<p class="percentage-example">例: 100 が 130 になると 30% の増加</p>
</div>
<div class="percentage-tab-content" id="percentageIncrease" style="display: none;">
<label class="percentage-label" for="percentageIncreaseValue">数値入力:</label>
<input type="number" class="percentage-input" id="percentageIncreaseValue">
<label class="percentage-label" for="percentageIncreasePercentage">増加率(%):</label>
<input type="number" class="percentage-input" id="percentageIncreasePercentage">
<button class="percentage-button" onclick="calculatePercentageIncrease()">計算する</button>
<p class="percentage-result" id="resultPercentageIncrease"></p>
<p class="percentage-example">例: 100 が 25% 増加すると 125</p>
</div>
<div class="percentage-tab-content" id="percentageDecrease" style="display: none;">
<label class="percentage-label" for="percentageDecreaseValue">数値入力:</label>
<input type="number" class="percentage-input" id="percentageDecreaseValue">
<label class="percentage-label" for="percentageDecreasePercentage">減少率(%):</label>
<input type="number" class="percentage-input" id="percentageDecreasePercentage">
<button class="percentage-button" onclick="calculatePercentageDecrease()">計算する</button>
<p class="percentage-result" id="resultPercentageDecrease"></p>
<p class="percentage-example">例: 100 が 25% 減少すると 75</p>
</div>
<script>
const tabs = document.querySelectorAll('.percentage-tab');
const tabContents = document.querySelectorAll('.percentage-tab-content');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
tabs.forEach(t => t.classList.remove('active'));
tabContents.forEach(c => c.style.display = 'none');
tab.classList.add('active');
const tabId = tab.dataset.tab;
document.getElementById(tabId).style.display = 'block';
});
});
function getNumber(id) { return parseFloat(document.getElementById(id).value); }
function setResult(id, text) { document.getElementById(id).textContent = text; }
function validate(...values) { return values.every(v => !isNaN(v)); }
function calculatePercentage() {
const v = getNumber("value1"), p = getNumber("percentage1");
if (!validate(v, p)) { setResult("result1", "数値を入力してください。"); return; }
setResult("result1", `${p}% of ${v} is ${(p / 100) * v}`);
}
function addPercentage() {
const v = getNumber("value2"), p = getNumber("percentage2");
if (!validate(v, p)) { setResult("result2", "数値を入力してください。"); return; }
setResult("result2", `${v} + ${p}% is ${v * (1 + p / 100)}`);
}
function subtractPercentage() {
const v = getNumber("value4"), p = getNumber("percentage4");
if (!validate(v, p)) { setResult("result4", "数値を入力してください。"); return; }
setResult("result4", `${v} - ${p}% is ${v * (1 - p / 100)}`);
}
function comparePercentage() {
const v = getNumber("value3"), t = getNumber("total3");
if (!validate(v, t) || t === 0) { setResult("result3", "有効な数値を入力してください。"); return; }
setResult("result3", `${v} is ${((v / t) * 100).toFixed(2)}% of ${t}`);
}
function calculateRatioPercentage() {
const i = getNumber("ratioValue1"), f = getNumber("ratioValue2");
if (!validate(i, f) || i === 0) { setResult("resultRatio", "有効な数値を入力してください。"); return; }
const diff = ((f - i) / i) * 100;
setResult("resultRatio", `From ${i} to ${f} is a ${diff.toFixed(2)}% ${diff >= 0 ? 'increase' : 'decrease'}`);
}
function calculateInitialIncrease() {
const f = getNumber("initialIncreaseFinalValue"), p = getNumber("initialIncreasePercentage");
if (!validate(f, p) || (1 + p / 100) === 0) { setResult("resultInitialIncrease", "有効な数値を入力してください。"); return; }
setResult("resultInitialIncrease", `Before growing by ${p}%, the value was ${(f / (1 + p / 100)).toFixed(2)}`);
}
function calculateInitialDecrease() {
const f = getNumber("initialDecreaseFinalValue"), p = getNumber("initialDecreasePercentage");
if (!validate(f, p) || (1 - p / 100) === 0) { setResult("resultInitialDecrease", "有効な数値を入力してください。"); return; }
setResult("resultInitialDecrease", `Before decreasing by ${p}%, the value was ${(f / (1 - p / 100)).toFixed(2)}`);
}
function calculateIncreaseDecrease() {
const i = getNumber("increaseDecreaseInitialValue"), f = getNumber("increaseDecreaseFinalValue");
if (!validate(i, f) || i === 0) { setResult("resultIncreaseDecrease", "有効な数値を入力してください。"); return; }
const diff = ((f - i) / i) * 100;
setResult("resultIncreaseDecrease", `From ${i} to ${f} is a ${diff.toFixed(2)}% ${diff >= 0 ? 'increase' : 'decrease'}`);
}
function calculatePercentageIncrease() {
const v = getNumber("percentageIncreaseValue"), p = getNumber("percentageIncreasePercentage");
if (!validate(v, p)) { setResult("resultPercentageIncrease", "数値を入力してください。"); return; }
setResult("resultPercentageIncrease", `If ${v} grows by ${p}%, it becomes ${(v * (1 + p / 100)).toFixed(2)}`);
}
function calculatePercentageDecrease() {
const v = getNumber("percentageDecreaseValue"), p = getNumber("percentageDecreasePercentage");
if (!validate(v, p)) { setResult("resultPercentageDecrease", "数値を入力してください。"); return; }
setResult("resultPercentageDecrease", `If ${v} decreases by ${p}%, it becomes ${(v * (1 - p / 100)).toFixed(2)}`);
}
</script>
</div>実装指引
使い方は大きく分けて2つ。
- 単体ファイルとして使う場合：
メモ帳とかのテキストエディタに上のコードを全部コピペして、「calculator.html」みたいな感じでファイル名を「.html」で終わるようにして保存。そのファイルをダブルクリックすればブラウザで開けて、もう使える。一番手軽。 - WordPressに埋め込む場合：
投稿画面で「カスタムHTML」ブロックを追加して、その中にコードを全部コピペするだけ。プレビューすればちゃんと表示されてるはず。簡単だよね。
これ、いつ使うのがいいの？
でも、casioのkeisanみたいな専門サイトを使えばいいじゃん？って思うかもしれない。うん、それもそう。だから、どっちがいいか、ちょっと考えてみた。
| 項目 | このコードを使う | 外部の計算サイト（例：casio） |
|---|---|---|
| 用途 | 自分のブログ記事の流れを止めずに、読者に計算させたい時。例えば金融や不動産系の記事とか。 | 一回だけ、さっと計算したい時。ブックマークしとけばいいし。 |
| カスタマイズ性 | まあまあ。CSSがわかる人なら、色とかデザインを自分のサイトに合わせられる。 | ゼロ。当たり前だけど、提供されてるものをそのまま使うしかない。 |
| 依存性・速度 | 外部サイトに依存しない。自分のサイトが表示されれば、すぐ使える。オフラインでも動くし。 | 相手のサイトが落ちてたら使えない。広告が多いと重いことも。 |
| 手間 | コピペだけ。でも、自分のサイトのCSSと干渉したら、ちょっと直すのが面倒かも。 | リンクを貼るだけ。楽。でも読者はページを離れることになる。 |
要するに、自分のコンテンツの一部として計算機能を提供したいなら、このコードはかなり良い選択肢だと思う。ただ計算したいだけなら、専用サイトの方が早い。
で、何ができるの？
このツール、タブがいっぱいあって、思ったより多機能。メモがてら書き出してみる。
- 「XはYの何%？」みたいな基本的な計算。
- ある数値にパーセントを足したり、引いたり。
- 2つの数値を比較して、片方がもう片方の何パーセントか。
- 増加率・減少率の計算。「売上が100万から120万になった。何%増？」みたいなやつ。これが一番使うかも。
- 「20%増えた結果120になった。元の数値は？」みたいな、逆算もできる。地味に便利。
そういえば、日本の政府統計データが見れる「e-Stat」とか見てると、もうパーセントのオンパレードだよね。前年比、構成比、増減率…。ああいうデータを解説するブログ記事とか書くなら、こういう計算ツールを横に置いておくと、読者はすごく助かるだろうな、って思った。
いくつか注意点
一応、気をつけるべきことをいくつか。
まず、セキュリティ。このコードは、入力された数値をどこかのサーバーに送ったりはしない。全部ブラウザの中だけで計算が終わる（クライアントサイドってやつ）。だから、入力した数値が漏れる心配は基本ない。でも、まあ、ものすごく機密性の高い計算に使うのは避けた方が無難。
あと、デザインの崩れ。自分のサイトにもともとあるCSSと、このコード内のCSSがケンカして、表示が崩れる可能性はゼロじゃない。もしそうなったら、CSSをちょっと調整する必要があるかも。そこだけ、少し注意が必要。
最後に
結局は、ただの道具。でも、こういうちょっとした道具が、作業をすごく楽にしてくれることもある。もし何かの記事でパーセント計算が必要になったら、使ってみるといいかもしれない。
ふと思ったけど、あなたが一番よくやる計算って何です？ 消費税の計算？ それとも、仕事の進捗率？ 人によって全然違いそうで、ちょっと興味ある。
