Tool management

計算

いい · ああ
内容を更新すると新しいバージョンとして保存され、公開画面へ反映されます。

新しいindex.html（任意）

選ばない場合は現在の内容で新しいバージョンを作成します。

HTMLソース

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>数量計算ツール</title>
  <style>
    body{margin:0;background:#f4f5f1;color:#1d2922;font-family:system-ui,sans-serif}
    main{width:min(620px,90vw);margin:64px auto;padding:28px;border:1px solid #d4ddd6;border-radius:18px;background:white;box-shadow:0 12px 30px #183c2820}
    h1{margin-top:0}label{display:block;margin:16px 0 5px;font-weight:700}input{width:100%;padding:11px;border:1px solid #a9b7ad;border-radius:8px;font:inherit;box-sizing:border-box}
    button{margin-top:20px;padding:11px 18px;border:0;border-radius:8px;background:#256348;color:white;font:inherit;font-weight:700;cursor:pointer}
    output{display:block;margin-top:22px;padding:16px;border-radius:10px;background:#edf5e8;font-size:22px;font-weight:800}
  </style>
</head>
<body>
  <main>
    <h1>数量計算ツール</h1>
    <p>必要数と予備率から、準備する数量を計算します。</p>
    <label for="quantity">必要数</label><input id="quantity" type="number" min="0" value="100">
    <label for="reserve">予備率（%）</label><input id="reserve" type="number" min="0" value="5">
    <button id="calculate">計算する</button>
    <output id="result">準備数量：105</output>
  </main>
  <script>
    document.querySelector('#calculate').addEventListener('click',()=>{
      const quantity=Number(document.querySelector('#quantity').value||0);
      const reserve=Number(document.querySelector('#reserve').value||0);
      document.querySelector('#result').textContent=`準備数量：${Math.ceil(quantity*(1+reserve/100))}`;
    });
  </script>
</body>
</html>

変更内容