<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>スマホ電卓</title>
<style>
/* 基本設定 */
* {
box-sizing: border-box;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent; /* タップ時のハイライトを消す */
}
body {
margin: 0;
padding: 0;
/* dvhを使うことでアドレスバーの変動に対応 */
height: 100dvh;
width: 100vw;
display: flex;
flex-direction: column;
background-color: #000;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
overflow: hidden;
}
/* 計算結果画面 */
#display-container {
/* 画面上部の余白を確保 */
flex: 1;
display: flex;
justify-content: flex-end;
align-items: flex-end;
padding: 20px;
padding-top: 50px; /* 上部のノッチ対策 */
}
#display {
width: 100%;
background: transparent;
border: none;
color: white;
font-size: 4rem; /* 数字をかなり大きく */
text-align: right;
outline: none;
font-weight: 300;
}
/* ボタンエリア */
.buttons {
/* ボタンエリアの高さを確保しつつ、下に余白を作る */
height: 65%;
padding-bottom: 80px; /* 【重要】ここを増やしてボタンを上に持ち上げる */
padding-bottom: calc(80px + env(safe-area-inset-bottom)); /* iPhone X以降の下部バー対策も追加 */
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, 1fr);
gap: 12px; /* ボタン同士を離してアプリっぽく */
padding-left: 15px;
padding-right: 15px;
}
button {
border: none;
font-size: 2rem;
border-radius: 50px; /* 丸いボタンにする */
cursor: pointer;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.2s;
box-shadow: 0 4px 6px rgba(0,0,0,0.3); /* 立体感 */
}
button:active {
opacity: 0.7;
}
/* 数字ボタン */
.number {
background-color: #333333;
}
/* 演算子ボタン（右側） */
.operator {
background-color: #ff9f0a;
font-size: 2.2rem;
}
/* 機能ボタン（上段） */
.func {
background-color: #a5a5a5;
color: black;
font-weight: 500;
}
/* 0ボタンの特別配置 */
.zero-btn {
grid-column: span 2;
border-radius: 40px; /* 横長のカプセル型 */
justify-content: flex-start;
padding-left: 30px;
}
/* 「時間」ボタンを目立たせる */
.time-btn {
background-color: #a5a5a5;
color: black;
font-size: 1.2rem; /* 文字数が多いので少し小さく */
font-weight: bold;
}
</style>
</head>
<body>
<div id="display-container">
<input type="text" id="display" readonly value="0">
</div>
<div class="buttons">
<button class="func" onclick="clearDisplay()">C</button>
<button class="func" onclick="deleteLast()">←</button>
<button class="time-btn" onclick="convertToHours()">時間</button>
<button class="operator" onclick="appendDisplay('/')">÷</button>
<button class="number" onclick="appendDisplay('7')">7</button>
<button class="number" onclick="appendDisplay('8')">8</button>
<button class="number" onclick="appendDisplay('9')">9</button>
<button class="operator" onclick="appendDisplay('*')">×</button>
<button class="number" onclick="appendDisplay('4')">4</button>
<button class="number" onclick="appendDisplay('5')">5</button>
<button class="number" onclick="appendDisplay('6')">6</button>
<button class="operator" onclick="appendDisplay('-')">−</button>
<button class="number" onclick="appendDisplay('1')">1</button>
<button class="number" onclick="appendDisplay('2')">2</button>
<button class="number" onclick="appendDisplay('3')">3</button>
<button class="operator" onclick="appendDisplay('+')">+</button>
<button class="number zero-btn" onclick="appendDisplay('0')">0</button>
<button class="number" onclick="appendDisplay('.')">.</button>
<button class="operator" onclick="calculateResult()">=</button>
</div>
<script>
const display = document.getElementById('display');
const operators = ['/', '*', '-', '+'];
// 数字や記号を追加
function appendDisplay(input) {
const currentVal = display.value;
const lastChar = currentVal.slice(-1);
// 0始まりの処理
if (currentVal === '0' && !operators.includes(input) && input !== '.') {
display.value = input;
return;
}
// 記号連打防止（前回のロジック）
if (operators.includes(input) && operators.includes(lastChar)) {
return;
}
display.value += input;
}
// Cボタン
function clearDisplay() {
display.value = "0";
}
// ←ボタン
function deleteLast() {
if (display.value.length > 1) {
display.value = display.value.slice(0, -1);
} else {
display.value = "0";
}
}
// 【新機能】時間を計算するボタン
// ロジック：表示されている数字（分）を60で割って「時間」にする
function convertToHours() {
try {
// 現在の画面の数字を取得
// もし計算式の途中なら一旦計算してしまう（例: 30+30 → 60）
let currentValue = eval(display.value);
// 60で割る（分 → 時間）
let hours = currentValue / 60;
// 小数点以下が長すぎると見づらいので、最大4桁くらいに丸める処理を入れるか迷いますが
// 計算の正確さ優先でそのまま出します（必要なら .toFixed(2) などを使います）
display.value = hours;
} catch (e) {
display.value = "Error";
}
}
// =ボタン
function calculateResult() {
try {
let expression = display.value;
// セキュリティ対策付き計算実行
display.value = new Function('return ' + expression)();
} catch (error) {
display.value = "Error";
}
}
</script>
</body>
</html>
使用変数
| appendDisplay -------( Function ) | |
| calculateResult -------( Function ) | |
| charset | |
| class | |
| clearDisplay -------( Function ) | |
| content | |
| convertToHours -------( Function ) | |
| currentVal | |
| currentValue | |
| deleteLast -------( Function ) | |
| display | |
| expression | |
| fit | |
| hours | |
| id | |
| lang | |
| lastChar | |
| name | |
| onclick | |
| operators | |
| scalable | |
| scale | |
| type | |
| value | |
| width |