ログインフォームの作成
角丸デザインのログインフォームを作成する実装例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ログインフォーム</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f5f5f5;
}
.login-panel {
background-color: #e8f4f8;
padding: 2rem;
text-align: center;
}
.login-form {
border: 15px solid #e0f2f2;
border-radius: 15px;
padding: 1.5rem;
}
.login-form input {
margin: 0.5rem 0;
padding: 0.5rem;
width: 200px;
}
.login-btn {
padding: 0.75rem;
width: 220px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="login-panel">
<form class="login-form">
<label for="username">ユーザー名:</label>
<input type="text" id="username" placeholder="ユーザー名を入力" required>
<br>
<label for="password">パスワード:</label>
<input type="password" id="password" placeholder="パスワードを入力" required>
<br>
<button type="button" class="login-btn" onclick="handleLogin()">ログイン</button>
</form>
</div>
</div>
</body>
</html>
タスク管理テーブルの実装
チェックボックス付きの編集可能なタスクリストを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タスク管理</title>
<style>
body {
background-color: #d9d7e7;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.task-container {
background: white;
padding: 2rem;
border-radius: 8px;
}
.task-table {
border-collapse: collapse;
width: 100%;
}
.task-table td {
padding: 12px;
border: 1px solid #ddd;
text-align: center;
}
.task-title {
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 1rem;
}
.delete-btn {
background-color: #ff4757;
color: white;
border: none;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="task-container">
<div class="task-title">タスク一覧</div>
<table class="task-table">
<tr>
<td><input type="checkbox"></td>
<td contenteditable="true">タスクを編集</td>
<td><button class="delete-btn">削除</button></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td contenteditable="true">タスクを編集</td>
<td><button class="delete-btn">削除</button></td>
</tr>
</table>
</div>
</body>
</html>
ラジオボタンによる単一選択
科目選択用のラジオボタングループを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>科目選択</title>
<style>
body {
background-color: #d9d7e7;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.selection-panel {
background: white;
padding: 2rem;
border-radius: 8px;
font-family: Arial, sans-serif;
}
.selection-title {
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 1.5rem;
}
.option-item {
margin: 12px 0;
}
.submit-btn {
margin-top: 1rem;
padding: 8px 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="selection-panel">
<div class="selection-title">科目選択</div>
<form>
<div class="option-item">
<input type="radio" name="subject" value="probability" id="prob">
<label for="prob">確率論</label>
</div>
<div class="option-item">
<input type="radio" name="subject" value="statistics" id="stats">
<label for="stats">数理統計学</label>
</div>
<div class="option-item">
<input type="radio" name="subject" value="complex" id="complex">
<label for="complex">複素関数論</label>
</div>
<div class="option-item">
<input type="radio" name="subject" value="calculus" id="calc" checked>
<label for="calc">高等数学</label>
</div>
<button type="submit" class="submit-btn">決定</button>
</form>
</div>
</body>
</html>
地域選択ドロップダウンメニュー
3段階の地域選択を行うセレクトボックスを実装します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>地域選択</title>
<style>
body {
background-color: #d9d7e7;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.region-form {
background: white;
padding: 2rem;
border-radius: 8px;
}
.form-title {
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 1.5rem;
}
.select-group {
margin: 1rem 0;
}
.select-group label {
display: inline-block;
width: 60px;
margin-right: 10px;
}
select {
padding: 6px;
border: 1px solid #ccc;
border-radius: 4px;
margin-right: 20px;
}
</style>
</head>
<body>
<div class="region-form">
<div class="form-title">所在地選択</div>
<form>
<div class="select-group">
<label for="country">国:</label>
<select id="country" name="country">
<option value="uk">イギリス</option>
<option value="china" selected>中国</option>
<option value="russia">ロシア</option>
<option value="germany">ドイツ</option>
<option value="other">その他</option>
</select>
</div>
<div class="select-group">
<label for="province">省:</label>
<select id="province" name="province">
<option value="jiangsu">江蘇省</option>
<option value="shanghai" selected>上海市</option>
<option value="hunan">湖南省</option>
<option value="shandong">山東省</option>
<option value="other">その他</option>
</select>
</div>
<div class="select-group">
<label for="city">市:</label>
<select id="city" name="city">
<option value="qingdao">青島市</option>
<option value="jinan">済南市</option>
<option value="zibo">淄博市</option>
<option value="dongying">東営市</option>
<option value="other">その他</option>
</select>
</div>
</form>
</div>
</body>
</html>