HTMLとJavaScriptで作る重量コンバーター：kgをgに変換する方法
HTMLとJavaScriptを組み合わせれば、ブラウザ上で動作するシンプルな重量コンバーター（単位変換ツール）を簡単に作成できます。この記事では、キログラム（kg）を入力するとグラム（g）に自動変換して表示するウェイトコンバーターの実装方法を、サンプルコードとともにわかりやすく解説します。
実装コード例
以下のコードをそのままHTMLファイルとして保存し、ブラウザで開くだけで動作します。
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
input,span{
font-size: 20px;
}
</style>
</head>
<body>
<h1>重量コンバーター</h1>
<h2>キログラムを入力するとグラムに変換されます</h2>
<p>
<label>キログラム</label>
<input id="inputKG" type="number" placeholder="キログラム"
oninput="KgtoGConverter(this.value)" onchange="KgtoGConverter(this.value)">
</p>
<p>グラム：<span id="outputGrams"></span></p>
<script>
function KgtoGConverter(weight) {
document.getElementById("outputGrams").innerHTML=weight*1000;
}
</script>
</body>
</html>
コードの解説
このウェイトコンバーターは、以下の仕組みで動作しています。
- 入力フィールド： input要素に
type="number"を指定することで、数値のみを入力できるフィールドを実現しています。 - イベント処理：
oninputイベントとonchangeイベントの両方に関数を指定しているため、値を入力・変更するたびにリアルタイムで変換処理が実行されます。 - 値の受け渡し：
this.valueにより、入力された値がそのまま関数の引数として渡されます。 - 変換ロジック： JavaScriptの
KgtoGConverter()関数では、受け取った値に1000を掛けてkgからgへ変換し、document.getElementById()を使って結果を span 要素に出力しています。
実行結果
上記のコードをブラウザで開くと、次のような画面が表示されます。
キログラムの欄に数値を入力すると、グラム換算の結果が即座に表示されます。
応用ポイント
この基本構造を応用すれば、オンスやポンドなど他の単位への変換にも簡単に拡張できます。変換係数を変更するか、複数の出力用 span 要素を追加するだけで、多機能な単位変換ツールへと発展させることが可能です。
-
HTMLとJavaScriptで温度コンバーターを作成する方法をわかりやすく解説
HTMLとJavaScriptを組み合わせれば、摂氏（℃）の値を入力すると自動的に華氏（℉）へ変換してくれる温度コンバーターを簡単に作成できます。本記事では、そのまま使えるサンプルコードをもとに、仕組みや実装のポイントまで丁寧に解説します。 温度コンバーターのサンプルコード 以下が、HTMLとJavaScriptだけで実装した温度コンバーターの完全なコード例です。テキストエディターに貼り付けて拡張子「.html」で保存し、ブラウザーで開けばすぐに動作を確認できます。 <!DOCTYPE html> <html> <head> <style> &n
-
CSSとJavaScriptでアコーディオン（開閉パネル）を作成する方法をわかりやすく解説
CSSとJavaScriptを組み合わせることで、クリックすると内容が開閉する「アコーディオン（折りたたみパネル）」を簡単に実装できます。本記事では、実際に動作するサンプルコードをもとに、その作成手順と仕組みを詳しく解説します。 アコーディオンの実装例 以下は、HTML・CSS・JavaScriptを使ってアコーディオンを実装した完全なサンプルコードです。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, ini