Merge pull request #438 from ut-code/rewrite-between-html-and-if-statement-final

chvmvd · web-flow · commit e1fd3ea552b9 · 2023-10-12T14:44:15.000+09:00
変数の章でコメントの大部分を反映しました。
diff --git a/docs/1-trial-session/02-html/_samples/excursion/index.html b/docs/1-trial-session/02-html/_samples/excursion/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8" />
+    <title>Title</title>
+  </head>
+  <body>
+    <h1>遠足の持ち物</h1>
+    <ul>
+      <li><strong>お弁当</strong></li>
+      <li>水筒</li>
+      <li>タオル</li>
+      <li>レジャーシート</li>
+    </ul>
+  </body>
+</html>
diff --git a/docs/1-trial-session/02-html/easier-task-sample.png b/docs/1-trial-session/02-html/easier-task-sample.png
diff --git a/docs/1-trial-session/02-html/index.md b/docs/1-trial-session/02-html/index.md
@@ -122,6 +122,20 @@ html <Term type="element">要素</Term>の直属の子<Term type="element">要
 
 :::
 
+## 課題
+
+単一の HTML ファイルのみを使用して、遠足の持ち物リストを作成してみましょう。お弁当は何よりも重要なので太字にしましょう。
+
+![簡単な課題の例](./easier-task-sample.png)
+
+### ヒント
+
+箇条書きを作るときには、単に「・」と書くのではなく箇条書き用のタグを使います。「HTML 箇条書き」などと検索してみましょう。
+
+### 解答例
+
+<ViewSource url={import.meta.url} path="_samples/excursion" />
+
 ## 課題 (時間が余った場合)
 
 単一の HTML ファイルのみを使用して、下のようなフォームを作成してみましょう。いきなり飛躍した感がありますが、やることは単純で、ひたすら HTML タグを並べるのみです。
