Zenn
🫠

#3 入力欄を設計する – 時間をどう入力する？

に公開
Java
個人開発
webアプリケーション
ui設計
idea

#3 入力欄を設計する – 時間をどう入力する？

今回は、タイマーに必要な**入力欄の設計と基本的なUI配置（CSS）**を行います。

🎯 今回の目的

  • 入力する項目を整理し、最小限のフォームを設計する
  • Stop/Resetボタンを含めたUI構成を決める
  • 簡単なCSSを適用して、見やすく扱いやすい画面を作る

⌛ 入力する内容

このアプリでユーザーが入力するのは、以下の3つです：

入力項目 内容 例
作業時間 タイマーA 25分
休憩時間 タイマーB 5分
セッション回数 作業＋休憩の繰り返し回数 4回

🧱 入力フォームとボタン（HTML&CSS構成案）

<form id="timer-form">
  <label>作業時間（分）: <input type="number" min="1" required /></label><br />
  <label>休憩時間（分）: <input type="number" min="1" required /></label><br />
  <label>セッション回数: <input type="number" min="1" max="20" required /></label><br />

  <div class="button-group">
    <button type="button" id="stop-btn">Stop</button>
    <button type="submit" id="start-btn">Start</button>
    <button type="button" id="reset-btn">Reset</button>
  </div>
</form>

CSS

form {
  max-width: 400px;
  margin: 2rem auto;
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 12px;
  background-color: #f9f9f9;
  font-family: sans-serif;
}

label {
  display: block;
  margin-bottom: 1rem;
}

input {
  margin-left: 0.5rem;
  padding: 4px;
  width: 60px;
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

button {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background-color: #007acc;
  color: white;
  font-weight: bold;
}

button:hover {
  background-color: #005fa3;
}

✅ バリデーションとインタラクションの設計メモ

  • required属性で空入力を防止
  • min/maxで極端な値を制限
  • StopとResetは type="button" でフォーム送信を回避
  • 今回はJavaScriptのロジックは未実装、次回で構築予定！

🔜 次回予告：「#4 タイマーのロジックを作る」

いよいよ、入力された値を使ってタイマー機能を動かすフェーズに入ります。
JavaScriptでの時間計測のしくみなどを実装していきます！

📌 今回の位置づけ（シリーズ進行）

最後まで御覧いただきありがとうございます！次回もお待ちしております。

Discussion