- ユーザー登録フォームの作成
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>入力要素実装</title>
</head>
<body>
<div id="form-container">
<div style="height: 300px; width: 345px; background-color: #cccccc; margin: 300px auto;">
<h3>アカウント登録</h3>
<div style="background-color: #dddddd; padding: 10px;">
ユーザー名：<input type="text" name="username"><br>
パスワード：<input type="password" name="pass"><br>
性別：<input type="radio" name="gender" value="male">男性
<input type="radio" name="gender" value="female">女性<br><br>
趣味：<input type="checkbox" name="hobby" value="write">執筆
<input type="checkbox" name="hobby" value="music">音楽
<input type="checkbox" name="hobby" value="sports">スポーツ<br>
都道府県：<select name="prefecture">
<option value="tokyo">東京都</option>
<option value="osaka">大阪府</option>
<option value="hyogo">兵庫県</option>
<option value="hokkaido">北海道</option>
<option value="kyushu">九州</option>
</select><br>
自己紹介：<textarea name="selfintro" cols="25" rows="4"></textarea><br>
</div>
<button type="submit">送信</button>
<button type="reset">リセット</button>
</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>
</head>
<body>
| 取引種別 | オンライン振込 | トランザクションID | BANK20230901123456789 |
|---|---|---|---|
| 送金先 | 氏名 | 佐藤太郎 | 送金元 | 氏名 | 田中花子 |
| 口座番号 | 123456789012345 | 口座番号 | 987654321098765 |
| 地域 | 東京 | 地域 | 大阪 |
| 支店 | 東京本支店 | 支店 | 大阪支店 |
| 通貨 | 日本円 | 即時振込 | 現金 |
| 金額 | 10,000円 | 手数料 | 500円 |
| 合計 | 日本円（大文字表記）一万千円 |
| 取引日時 | 2023/09/01 | 処理時間 | 2023-09-01-13:00:00 |
</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>
</head>
<body>
|  | 将進酒 |
|---|---|
| 君不见黄河之水天上来，奔流到海不复回 |
| 君不见高堂明镜悲白发，朝如青丝暮成雪 |
| 人生得意須尽欢，莫使金樽空对月 |
| 天生我材必有用，千金散尽还復来 |
| 烹羊宰牛且为乐，会须一饮三百杯 |
| 岑夫子，丹丘生，将進酒，杯莫停 |
| 与君歌一曲，请君为我倾耳听 |
| 鐘鼓饌玉不足貴，但願長醉不愿醒 |
| 古来聖賢皆寂寞，惟有飲者留其名 |
| 陳王昔時宴平楽，鬥酒十千恣歡谑 |
| 主人何為言少錢，徑須沽取對君酌 |
| 五花馬，千金裘，呼兒將出換美酒 |
| 與爾同銷萬古愁 |
</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>
</head>
<body>
<map name="films">
<area shape="rect" coords="76,150,332,367" href="https://www.example.com/film1" title="アクション映画1">
<area shape="rect" coords="378,166,624,441" href="https://www.example.com/film2" title="ドラマ映画2">
<area shape="rect" coords="666,222,918,501" href="https://www.example.com/film3" title="SF映画3">
<area shape="rect" coords="1016,216,789,440" href="https://www.example.com/film4" title="コメディ映画4">
<area shape="rect" coords="1282,176,1513,440" href="https://www.example.com/film5" title="ファンタジー映画5">
<area shape="rect" coords="104,572,333,816" href="https://www.example.com/film6" title="ホラー映画6">
<area shape="rect" coords="381,556,618,820" href="https://www.example.com/film7" title="アニメ映画7">
<area shape="rect" coords="685,560,920,812" href="https://www.example.com/film8" title="ドキュメンタリー8">
<area shape="rect" coords="980,560,1201,816" href="https://www.example.com/film9" title="家族劇9">
<area shape="rect" coords="1270,542,1500,800" href="https://www.example.com/film10" title="恋愛映画10">
</map>
</body>
</html>