「税込金額しか書いてないけど、税抜はいくら？」という場面、経費精算や請求書のチェックで毎回電卓を叩いていませんか？
このページで紹介するHTMLアプリ1つで、税込→税抜の計算とコピーが一瞬で完了します。
このページで紹介するHTMLアプリ1つで、税込→税抜の計算とコピーが一瞬で完了します。
▼ このページで今すぐ使えます
💴 税込 → 税抜 計算機
税抜金額
—
📌 こんな場面で役立つ
税込・税抜の変換が必要になる場面は意外と多いです。以下のようなシーンで特に重宝します。
経費精算・領収書の確認
会計ソフトへの入力
請求書・見積書の作成
仕入れ価格の計算
軽減税率8%品の仕分け
スマホからすぐ使いたい
日本の消費税は現在 標準税率10% と 軽減税率8%（食品・飲料など）の2種類。このツールは両方に対応しています。
🔢 計算式の仕組み
税込価格から税抜価格を求める計算式はシンプルです。
税抜金額 ＝ 税込金額 ÷ (1 ＋ 税率)
消費税10%の場合：税込1,100円 ÷ 1.10 ＝ 1,000円（税抜）
| 税率 | 割る数 | 計算例（税込1,100円） |
|---|---|---|
| 標準税率 10% | 1.10 | 1,100 ÷ 1.10 ＝ 1,000円 |
| 軽減税率 8% | 1.08 | 1,100 ÷ 1.08 ＝ 1,019円（端数切捨） |
端数処理については法令上の定めはなく、切捨て・切上げ・四捨五入いずれも適法です。本ツールは四捨五入を採用しています。
⚡ アプリの機能一覧
シンプルながら実用的な機能を4つ搭載しています。
⌨️
リアルタイム計算
金額を入力するたびに即時計算。ボタンを押す手間なし。
🔄
税率切替（10% / 8%）
ボタン1つで標準税率と軽減税率を切替。食品の仕分けも楽々。
📋
コピーボタン
税抜金額をクリップボードへ即コピー。会計ソフトへの貼り付けが一瞬。
💡
消費税額も表示
税抜金額と同時に消費税の金額も表示。明細確認に便利。
📖 使い方
操作はたった3ステップ。難しい設定は一切不要です。
1
税込金額を入力
入力欄に税込金額（例：1100）を入力します。入力と同時に税抜金額が表示されます。
2
税率を選択（必要な場合）
標準税率10%が初期値。食品・飲料など軽減税率の品目は「軽減税率 8%」ボタンをクリック。
3
「税抜金額をコピー」ボタンを押す
ボタンが緑色に変わり「コピーしました！」と表示されます。そのまま会計ソフトや表計算に貼り付けできます。
HTMLファイルを保存してブラウザで開くだけで使えます。インストール不要・インターネット接続不要・完全無料です。
💻 HTMLソースコード
以下のコードをメモ帳などに貼り付けて tax-calc.html という名前で保存し、ブラウザで開くだけで動作します。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>税込→税抜 計算機</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: ‘Segoe UI’, ‘Hiragino Kaku Gothic ProN’, Meiryo, sans-serif;
background: #f0f4f8;
display: flex; align-items: center; justify-content: center;
min-height: 100vh;
}
.card {
background: #fff; border-radius: 16px;
box-shadow: 0 4px 24px rgba(0,0,0,0.10);
padding: 40px 36px; width: 100%; max-width: 420px;
}
h1 { font-size: 20px; font-weight: 800; text-align: center; margin-bottom: 28px; }
label { display: block; font-size: 13px; font-weight: 700; color: #4a5568; margin-bottom: 6px; }
input[type=”number”] {
width: 100%; padding: 12px 14px; font-size: 18px;
border: 2px solid #e2e8f0; border-radius: 10px; outline: none;
}
input[type=”number”]:focus { border-color: #0078d4; }
.rate-group { display: flex; gap: 10px; margin: 16px 0 24px; }
.rate-btn {
flex: 1; padding: 10px; font-size: 15px; font-weight: 700;
border: 2px solid #e2e8f0; border-radius: 10px;
background: #f7fafc; color: #4a5568; cursor: pointer;
}
.rate-btn.active { background: #0078d4; border-color: #0078d4; color: #fff; }
.result-box {
background: #f0f7ff; border: 2px solid #bfdbfe;
border-radius: 12px; padding: 20px 18px; margin-bottom: 14px;
}
.result-label { font-size: 12px; font-weight: 700; color: #2563eb; margin-bottom: 6px; }
.result-value { font-size: 34px; font-weight: 800; }
.result-value span { font-size: 18px; font-weight: 600; color: #4a5568; }
.result-sub { font-size: 13px; color: #718096; margin-top: 6px; }
.copy-btn {
width: 100%; padding: 14px; font-size: 16px; font-weight: 700;
background: #0078d4; color: #fff; border: none;
border-radius: 10px; cursor: pointer;
}
.copy-btn.copied { background: #16a34a; }
</style>
</head>
<body>
<div class=”card”>
<h1>💴 税込 → 税抜 計算機</h1>
<label for=”price-input”>税込金額（円）</label>
<input type=”number” id=”price-input” placeholder=”例：1100″ min=”0″ oninput=”calc()”>
<div class=”rate-group”>
<button class=”rate-btn active” onclick=”setRate(10, this)”>消費税 10%</button>
<button class=”rate-btn” onclick=”setRate(8, this)”>軽減税率 8%</button>
</div>
<div class=”result-box”>
<div class=”result-label”>税抜金額</div>
<div class=”result-value” id=”result-main”><span style=”color:#a0aec0″>—</span></div>
<div class=”result-sub” id=”result-sub”></div>
</div>
<button class=”copy-btn” id=”copy-btn” onclick=”copyResult()”>
📋 <span id=”copy-label”>税抜金額をコピー</span>
</button>
</div>
<script>
let rate = 10, resultNum = null;
function setRate(r, btn) {
rate = r;
document.querySelectorAll(‘.rate-btn’).forEach(b => b.classList.remove(‘active’));
btn.classList.add(‘active’);
calc();
}
function calc() {
const raw = document.getElementById(‘price-input’).value;
const main = document.getElementById(‘result-main’);
const sub = document.getElementById(‘result-sub’);
resultNum = null;
if (raw === ” || isNaN(raw) || Number(raw) < 0) {
main.innerHTML = ‘<span style=”color:#a0aec0″>—</span>’;
sub.textContent = ”; return;
}
const taxIn = parseFloat(raw);
const taxOut = taxIn / (1 + rate / 100);
const taxAmt = taxIn – taxOut;
resultNum = Math.round(taxOut);
main.innerHTML = resultNum.toLocaleString() + ‘<span>円</span>’;
sub.textContent = ‘消費税額：’ + Math.round(taxAmt).toLocaleString() + ‘円（’ + rate + ‘%）’;
}
function copyResult() {
if (resultNum === null) return;
const btn = document.getElementById(‘copy-btn’);
const label = document.getElementById(‘copy-label’);
navigator.clipboard.writeText(String(resultNum)).then(() => {
btn.classList.add(‘copied’);
label.textContent = ‘コピーしました！’;
setTimeout(() => { btn.classList.remove(‘copied’); label.textContent = ‘税抜金額をコピー’; }, 2000);
});
}
document.getElementById(‘price-input’).focus();
</script>
</body>
</html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>税込→税抜 計算機</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: ‘Segoe UI’, ‘Hiragino Kaku Gothic ProN’, Meiryo, sans-serif;
background: #f0f4f8;
display: flex; align-items: center; justify-content: center;
min-height: 100vh;
}
.card {
background: #fff; border-radius: 16px;
box-shadow: 0 4px 24px rgba(0,0,0,0.10);
padding: 40px 36px; width: 100%; max-width: 420px;
}
h1 { font-size: 20px; font-weight: 800; text-align: center; margin-bottom: 28px; }
label { display: block; font-size: 13px; font-weight: 700; color: #4a5568; margin-bottom: 6px; }
input[type=”number”] {
width: 100%; padding: 12px 14px; font-size: 18px;
border: 2px solid #e2e8f0; border-radius: 10px; outline: none;
}
input[type=”number”]:focus { border-color: #0078d4; }
.rate-group { display: flex; gap: 10px; margin: 16px 0 24px; }
.rate-btn {
flex: 1; padding: 10px; font-size: 15px; font-weight: 700;
border: 2px solid #e2e8f0; border-radius: 10px;
background: #f7fafc; color: #4a5568; cursor: pointer;
}
.rate-btn.active { background: #0078d4; border-color: #0078d4; color: #fff; }
.result-box {
background: #f0f7ff; border: 2px solid #bfdbfe;
border-radius: 12px; padding: 20px 18px; margin-bottom: 14px;
}
.result-label { font-size: 12px; font-weight: 700; color: #2563eb; margin-bottom: 6px; }
.result-value { font-size: 34px; font-weight: 800; }
.result-value span { font-size: 18px; font-weight: 600; color: #4a5568; }
.result-sub { font-size: 13px; color: #718096; margin-top: 6px; }
.copy-btn {
width: 100%; padding: 14px; font-size: 16px; font-weight: 700;
background: #0078d4; color: #fff; border: none;
border-radius: 10px; cursor: pointer;
}
.copy-btn.copied { background: #16a34a; }
</style>
</head>
<body>
<div class=”card”>
<h1>💴 税込 → 税抜 計算機</h1>
<label for=”price-input”>税込金額（円）</label>
<input type=”number” id=”price-input” placeholder=”例：1100″ min=”0″ oninput=”calc()”>
<div class=”rate-group”>
<button class=”rate-btn active” onclick=”setRate(10, this)”>消費税 10%</button>
<button class=”rate-btn” onclick=”setRate(8, this)”>軽減税率 8%</button>
</div>
<div class=”result-box”>
<div class=”result-label”>税抜金額</div>
<div class=”result-value” id=”result-main”><span style=”color:#a0aec0″>—</span></div>
<div class=”result-sub” id=”result-sub”></div>
</div>
<button class=”copy-btn” id=”copy-btn” onclick=”copyResult()”>
📋 <span id=”copy-label”>税抜金額をコピー</span>
</button>
</div>
<script>
let rate = 10, resultNum = null;
function setRate(r, btn) {
rate = r;
document.querySelectorAll(‘.rate-btn’).forEach(b => b.classList.remove(‘active’));
btn.classList.add(‘active’);
calc();
}
function calc() {
const raw = document.getElementById(‘price-input’).value;
const main = document.getElementById(‘result-main’);
const sub = document.getElementById(‘result-sub’);
resultNum = null;
if (raw === ” || isNaN(raw) || Number(raw) < 0) {
main.innerHTML = ‘<span style=”color:#a0aec0″>—</span>’;
sub.textContent = ”; return;
}
const taxIn = parseFloat(raw);
const taxOut = taxIn / (1 + rate / 100);
const taxAmt = taxIn – taxOut;
resultNum = Math.round(taxOut);
main.innerHTML = resultNum.toLocaleString() + ‘<span>円</span>’;
sub.textContent = ‘消費税額：’ + Math.round(taxAmt).toLocaleString() + ‘円（’ + rate + ‘%）’;
}
function copyResult() {
if (resultNum === null) return;
const btn = document.getElementById(‘copy-btn’);
const label = document.getElementById(‘copy-label’);
navigator.clipboard.writeText(String(resultNum)).then(() => {
btn.classList.add(‘copied’);
label.textContent = ‘コピーしました！’;
setTimeout(() => { btn.classList.remove(‘copied’); label.textContent = ‘税抜金額をコピー’; }, 2000);
});
}
document.getElementById(‘price-input’).focus();
</script>
</body>
</html>
コードをそのままコピーして
.html 拡張子で保存するだけ。Windowsならメモ帳、Macならテキストエディットで作成できます。サーバーへのアップロードも不要です。
📊 計算例まとめ
よくある税込金額の税抜換算をまとめました。
| 税込金額 | 税率 | 税抜金額 | 消費税額 |
|---|---|---|---|
| 110円 | 10% | 100円 | 10円 |
| 1,100円 | 10% | 1,000円 | 100円 |
| 5,500円 | 10% | 5,000円 | 500円 |
| 11,000円 | 10% | 10,000円 | 1,000円 |
| 110,000円 | 10% | 100,000円 | 10,000円 |
| 108円 | 8% | 100円 | 8円 |
| 1,080円 | 8% | 1,000円 | 80円 |
| 5,400円 | 8% | 5,000円 | 400円 |
✅ まとめ
税込→税抜の変換ツール、ポイントをまとめます。
- 税込金額を入力するだけでリアルタイムに税抜金額が表示される
- 消費税10%・軽減税率8%をボタン1つで切替可能
- 「税抜金額をコピー」ボタンでクリップボードへ即座にコピー
- 消費税額も同時表示されるので明細確認も楽
- HTMLファイル1つで動作、インストール・ネット接続不要
- スマートフォンのブラウザでもそのまま使える
上のHTMLコードをコピーして保存するだけで今すぐ使えます。経費精算や請求書作業のスピードアップにぜひ活用してください！