数値を入力すると、2進数・8進数・10進数・16進数を同時に表示する電卓風ツール
See the Pen Number Base Converter by MONO365 -Color your days- (@monoqlo365) on CodePen.
動作のしかた
- 数値を入力すると、リアルタイムで以下の結果を表示します。
- 10進数（普通の数字）
- 2進数（コンピュータが使う0と1の世界）
- 8進数（昔のプログラム表現でよく使われる）
- 16進数（色コードなどで使われる）
- たとえば「78」と入力すると：
| 表示項目 | 結果 |
|---|---|
| 10進数 | 78 |
| 2進数 | 1001110 |
| 8進数 | 116 |
| 16進数 | 4e |
発展アイデア（練習課題）
もし学習を進めたい場合は、こんな拡張もおすすめです👇
| 追加機能 | 学べること |
|---|---|
| 🔢 「変換したい基数」を選べるドロップダウンを追加 | selectタグ・イベント処理 |
| 🌓 ダークモード切り替え | CSS切替・classList操作 |
| 💾 入力履歴を保存 | localStorageの使い方 |
| 📱 スマホ対応UIに改良 | レスポンシブデザイン |
See the Pen Number Base Converter #2 by MONO365 -Color your days- (@monoqlo365) on CodePen.
リアルタイム進数変換＋背景色変更デモ
See the Pen Real-Time Number Base Conversion + Background Color Change Demo by MONO365 -Color your days- (@monoqlo365) on CodePen.
<!-- ===========================
HTML
=========================== -->
<div class="container">
<h2>🔢 進数変換ツール + カラー変換プレビュー</h2>
<div class="input-group">
<label>数値を入力：</label>
<input id="num" type="number" value="255" min="0" max="16777215">
</div>
<div class="input-group">
<label>基数を選択：</label>
<select id="radix">
<option value="2">2進数</option>
<option value="8">8進数</option>
<option value="10" selected>10進数</option>
<option value="16">16進数</option>
</select>
</div>
<div class="output">
<p id="result">結果がここに表示されます</p>
<div id="colorBox"></div>
</div>
</div>
<!-- ===========================
CSS
=========================== -->
<style>
body {
font-family: "Segoe UI", sans-serif;
background: linear-gradient(135deg, #222, #333);
color: #fff;
text-align: center;
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
background: rgba(255, 255, 255, 0.08);
border-radius: 20px;
padding: 30px 40px;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
max-width: 400px;
width: 90%;
}
.input-group {
margin: 10px 0;
}
input, select {
font-size: 1.2em;
padding: 0.3em;
border-radius: 8px;
border: none;
text-align: center;
margin-top: 5px;
}
.output {
margin-top: 20px;
}
#result {
font-size: 1.2em;
margin-bottom: 10px;
}
#colorBox {
width: 100%;
height: 60px;
border-radius: 10px;
border: 2px solid #666;
background-color: transparent;
transition: background 0.5s;
}
</style>
<!-- ===========================
JavaScript
=========================== -->
<script>
const numInput = document.getElementById("num");
const radixSelect = document.getElementById("radix");
const resultEl = document.getElementById("result");
const colorBox = document.getElementById("colorBox");
// 入力・選択が変わったら即時更新
numInput.addEventListener("input", update);
radixSelect.addEventListener("change", update);
function update() {
const num = Number(numInput.value);
const radix = Number(radixSelect.value);
// 不正な入力は無視
if (isNaN(num) || radix < 2 || radix > 36) {
resultEl.textContent = "⚠️ 無効な入力です";
colorBox.style.background = "transparent";
return;
}
// 基数変換
const converted = num.toString(radix);
resultEl.textContent = `${radix}進数表記：${converted}`;
// 16進数の場合は背景色に反映（RGBカラーとして）
if (radix === 16 && num <= 0xFFFFFF) {
const hex = num.toString(16).padStart(6, "0");
colorBox.style.background = `#${hex}`;
colorBox.title = `#${hex}`;
} else {
colorBox.style.background = "transparent";
colorBox.title = "";
}
}
// 初期表示
update();
</script>
機能一覧
✅ 入力した数値をリアルタイムで
→ 2進数 / 8進数 / 10進数 / 16進数 に変換して表示。
✅ 16進数 の場合は、値をそのまま カラーコード（#xxxxxx） として背景に反映。
✅ 数値を 0〜16777215（= 0xFFFFFF）にすれば、全カラーをプレビュー可能。
使い方のヒント
- 例）255 を選んで「16進数」にすると →
ff→ 背景が明るい赤に変化。 - 例）
65535 (0xFFFF)→ 明るい黄色。 16777215 (0xFFFFFF)→ 白。0→ 黒。
