Skip to content

Commit bf41f50

Browse files
chvmvdchvmvd
authored
HTMLの章の問題を修正 (#700)
1 parent 610b5e6 commit bf41f50

File tree

5 files changed

+22
-15
lines changed

5 files changed

+22
-15
lines changed

‎docs/1-trial-session/02-html/_samples/excursion/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="ja">
33
<head>
44
<meta charset="utf-8" />
5-
<title>Title</title>
5+
<title>遠足の持ち物リスト</title>
66
</head>
77
<body>
88
<h1>遠足の持ち物</h1>

‎docs/1-trial-session/02-html/_samples/form/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="ja">
33
<head>
44
<meta charset="utf-8" />
5-
<title>課題: HTMLのみを使用してフォームを作成する</title>
5+
<title>新規登録</title>
66
</head>
77
<body>
88
<p>新規登録</p>

docs/1-trial-session/02-html/easier-task-sample.png renamed to docs/1-trial-session/02-html/excursion-sample.png

File renamed without changes.

docs/1-trial-session/02-html/task-sample.png renamed to docs/1-trial-session/02-html/form-sample.png

File renamed without changes.

‎docs/1-trial-session/02-html/index.mdx‎

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -122,24 +122,29 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな
122122

123123
:::
124124

125-
## 課題
125+
## 演習問題
126126

127-
単一の HTML ファイルのみを使用して、遠足の持ち物リストを作成してみましょう。お弁当は何よりも重要なので太字にしましょう。
127+
### 問題 1
128128

129-
![簡単な課題の例](./easier-task-sample.png)
129+
単一の HTML ファイルのみを使用して、下のような遠足の持ち物リストを作成してみましょう。お弁当は何よりも重要なので太字にしましょう。
130130

131-
### ヒント
131+
![遠足の持ち物リストの例](./excursion-sample.png)
132132

133-
箇条書きを作るときには、単に「・」と書くのではなく箇条書き用のタグを使います。「HTML 箇条書き」などと検索してみましょう。
133+
:::info[ヒント]
134134

135-
<Answer title="持ち物リスト">
135+
- 「遠足の持ち物」という見出しがあります。`h1` タグについて調べてみてください。
136+
- 箇条書きを表現するには、単に先頭に「・」と書くのではなく箇条書きを表すタグを用います。`ul` タグと `li` タグについて調べてみてください。
137+
138+
:::
139+
140+
<Answer title="遠足の持ち物リスト">
136141

137142
```html
138143
<!doctype html>
139144
<html lang="ja">
140145
<head>
141146
<meta charset="utf-8" />
142-
<title>Title</title>
147+
<title>遠足の持ち物リスト</title>
143148
</head>
144149
<body>
145150
<h1>遠足の持ち物</h1>
@@ -157,26 +162,28 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな
157162

158163
</Answer>
159164

160-
## 課題 (時間が余った場合)
165+
### 問題 2 (時間が余った場合)
161166

162-
単一の HTML ファイルのみを使用して、下のようなフォームを作成してみましょう。いきなり飛躍した感がありますが、やることは単純で、ひたすら HTML タグを並べるのみです。
167+
下のようなフォームを作成してみましょう。いきなり飛躍した感がありますが、やることは単純で、ひたすら HTML タグを並べるのみです。
163168

164-
![課題の例](task-sample.png)
169+
![新規登録フォームの例](form-sample.png)
165170

166-
### ヒント
171+
:::info[ヒント]
167172

168173
- `ID` や `パスワード` といった文字が表形式に並んでいます。`table` タグで実現できます。
169174
- テキストボックスは `input` タグで作成できます。
170175
- 最後の箇条書きには `ul` タグや `li` タグを使用しています。
171176

172-
<Answer title="フォーム">
177+
:::
178+
179+
<Answer title="新規登録フォーム">
173180

174181
```html
175182
<!doctype html>
176183
<html lang="ja">
177184
<head>
178185
<meta charset="utf-8" />
179-
<title>課題: HTMLのみを使用してフォームを作成する</title>
186+
<title>新規登録</title>
180187
</head>
181188
<body>
182189
<p>新規登録</p>

0 commit comments

Comments
 (0)