6日目のゴールと今日やること
引用元：なし（本教材はオリジナル解説です）
6日目のテーマは
「タイマーの“見た目”と“操作性”をさらにアプリらしく整える」
ことです。
1〜5日目であなたはすでに、
- setTimeout を使った 1 秒ごとのカウント
- isRunning による状態管理
- 開始・停止・リセットの基本動作
- 00:00 表示の整形
- ボタンの状態制御（UI/UX）
ここまで理解できています。
6日目はここに、
- タイマーのデザイン（CSS）を整える
- ボタンの見た目をアプリ風にする
- 状態に応じて色や雰囲気を変える
- 「動いている感」を演出する
という、“アプリとしての完成度”を一段上げる作業を行います。
タイマーの見た目を整える理由
見た目は「機能の一部」
タイマーアプリは、
数字が動けば最低限は成立します。
しかし、実際に使うアプリでは、
- 数字が見やすい
- ボタンが押しやすい
- 状態がひと目で分かる
こうした「見た目の品質」が、
アプリの使いやすさを大きく左右します。
今日のテーマは、
「見た目を整えることで、機能をより分かりやすくする」
ということです。
HTML の構造を少し整理する
タイマー部分とボタン部分を分ける
まずは HTML を少し整理します。
<div id="timer-container">
<div id="display">00:00</div>
<div id="buttons">
<button id="startBtn" onclick="startTimer()">開始</button>
<button id="stopBtn" onclick="stopTimer()">停止</button>
<button id="resetBtn" onclick="resetTimer()">リセット</button>
</div>
</div>
ここでのポイントは、
- タイマー表示（display）
- ボタン群（buttons）
を分けておくことで、
CSS でデザインしやすくなることです。
CSS でタイマーを“アプリ風”にする
タイマー表示を大きく、中央に配置する
#timer-container {
width: 200px;
margin: 40px auto;
text-align: center;
font-family: sans-serif;
}
#display {
font-size: 48px;
font-weight: bold;
padding: 20px;
border: 3px solid #333;
border-radius: 10px;
margin-bottom: 20px;
background-color: #f8f8f8;
}
ここでの深掘りポイント。
深掘り①：数字は「大きく・太く」が基本
タイマーは「数字を見るアプリ」です。
数字が小さいと、使いにくくなります。
- font-size: 48px
- font-weight: bold
この2つだけで、
一気に“タイマーらしさ”が出ます。
深掘り②：背景色と枠線で「画面っぽさ」を出す
- border
- border-radius
- background-color
これらを使うと、
「ただの文字」から「アプリの画面」に変わります。
ボタンをアプリ風にデザインする
ボタンを横並びにして、押しやすくする
#buttons button {
font-size: 16px;
padding: 10px 20px;
margin: 5px;
border-radius: 8px;
border: none;
cursor: pointer;
}
ここでの深掘りポイント。
深掘り①：ボタンは「押しやすさ」が命
- padding を大きめに
- border-radius で角を丸く
- cursor: pointer で「押せる感」を出す
これだけで、
アプリとしての操作性が大きく向上します。
状態に応じてボタンの色を変える
開始中は「開始ボタンをグレー」にする
button:disabled {
background-color: #ccc;
color: #666;
cursor: not-allowed;
}
これにより、
- 押せないボタンはグレー
- 押せるボタンは色付き
という視覚的な区別ができます。
深掘り：視覚的フィードバックは UX の基本
人間は「見た目」で状態を判断します。
- 押せる → 色が濃い
- 押せない → グレー
この違いがあるだけで、
操作ミスが大幅に減ります。
状態に応じて display の色を変える
タイマーが動いているときは背景色を変える
JavaScript に少し追加します。
function updateDisplayStyle() {
const display = document.getElementById("display");
if (isRunning) {
display.style.backgroundColor = "#e0ffe0"; // 薄い緑
} else {
display.style.backgroundColor = "#f8f8f8"; // 元の色
}
}
そして、
startTimer / stopTimer / resetTimer の最後に呼びます。
updateButtons();
updateDisplayStyle();
深掘り：色は「状態を伝える最強の手段」
- 動いている → 緑
- 止まっている → 白
このように色で状態を伝えると、
ユーザーは「今どうなっているか」を直感的に理解できます。
6日目のミニ完成版：デザイン付きタイマー
HTML（省略なし）
<div id="timer-container">
<div id="display">00:00</div>
<div id="buttons">
<button id="startBtn" onclick="startTimer()">開始</button>
<button id="stopBtn" onclick="stopTimer()">停止</button>
<button id="resetBtn" onclick="resetTimer()">リセット</button>
</div>
</div>
CSS（重要部分）
#timer-container {
width: 200px;
margin: 40px auto;
text-align: center;
font-family: sans-serif;
}
#display {
font-size: 48px;
font-weight: bold;
padding: 20px;
border: 3px solid #333;
border-radius: 10px;
margin-bottom: 20px;
background-color: #f8f8f8;
}
#buttons button {
font-size: 16px;
padding: 10px 20px;
margin: 5px;
border-radius: 8px;
border: none;
cursor: pointer;
}
button:disabled {
background-color: #ccc;
color: #666;
cursor: not-allowed;
}
JavaScript（追加部分のみ）
function updateDisplayStyle() {
const display = document.getElementById("display");
if (isRunning) {
display.style.backgroundColor = "#e0ffe0";
} else {
display.style.backgroundColor = "#f8f8f8";
}
}
6日目で特に深く理解してほしいこと
1つ目：見た目は「機能の一部」
数字が見やすい
ボタンが押しやすい
状態が色で分かる
これらはすべて「機能」です。
2つ目：CSS はアプリの“表情”を作る
border
padding
background-color
これらを変えるだけで、
アプリの印象が劇的に変わります。
3つ目：状態管理は UI にも反映する
isRunning を UI に反映することで、
アプリ全体が一貫した動きをします。
7日目へのつなぎ
7日目は、
「このタイマーをひとつの完成アプリとしてまとめる」
日です。
- コードの整理
- コメントの追加
- 使いやすいデザインの最終調整
- 自分だけのカスタム機能を追加する
という、仕上げの工程に入ります。
ここまで来たあなたなら、
もう「自分のアプリを作れる人」です。
