diff --git a/src/pages/html/00-introduction.mdx b/src/pages/html/00-introduction.mdx
deleted file mode 100644
index 3532828..0000000
--- a/src/pages/html/00-introduction.mdx
+++ /dev/null
@@ -1,14 +0,0 @@
----
-layout: "@/layouts/MarkdownLayout.astro"
----
-
-import Toc from "../../components/Toc.astro";
-
-export const title = "HTMLってなに？";
-
-# {title}
-
-HTML (HyperText Markup Language) は、ウェブページを作成するための標準的なマークアップ言語です。  
-あなたが普段インターネットで閲覧している全てが、HTMLで構築されていると言っても過言ではありません。  
-
-これから、このHTMLの基本的な構造や要素について学んでいきましょう。
diff --git a/src/pages/html/000-introduction.mdx b/src/pages/html/000-introduction.mdx
new file mode 100644
index 0000000..3532828
--- /dev/null
+++ b/src/pages/html/000-introduction.mdx
@@ -0,0 +1,14 @@
+---
+layout: "@/layouts/MarkdownLayout.astro"
+---
+
+import Toc from "../../components/Toc.astro";
+
+export const title = "HTMLってなに？";
+
+# {title}
+
+HTML (HyperText Markup Language) は、ウェブページを作成するための標準的なマークアップ言語です。  
+あなたが普段インターネットで閲覧している全てが、HTMLで構築されていると言っても過言ではありません。  
+
+これから、このHTMLの基本的な構造や要素について学んでいきましょう。
diff --git a/src/pages/html/01-my-first-html.mdx b/src/pages/html/01-my-first-html.mdx
deleted file mode 100644
index 71c1af4..0000000
--- a/src/pages/html/01-my-first-html.mdx
+++ /dev/null
@@ -1,130 +0,0 @@
----
-layout: "@/layouts/MarkdownLayout.astro"
----
-
-import RenderFile from "@/components/RenderFile";
-import RenderHtml from "@/components/RenderHtml";
-export const title = "はじめてのHTML";
-
-# {title}
-
-## TOC
-
-## とりあえず書いてみよう (work)
-
-以下の場所にファイルを作成し、中身を自由に編集してみましょう。  
-ルールは特にありません。
-
-`src/playground/html/first.html`
-
-例として、こんな感じで書いてみました。
-
-```html file=public/sample/html/first.html
-first.html
-```
-
-...
-
-...
-
-...
-
-`src/playground/html/first.html` は書けましたか？  
-書けたらファイルをダブルクリックして、ブラウザで開いてみましょう。
-
-例として用意したファイルの結果は、こんな感じになりました。
-
-<RenderFile path="public/sample/html/first.html" />
-
-なにやら非常に簡素な見た目ですね、どうやら改行もされていないようです。
-
-## タグ (Element)
-
-ここでHTMLのタグについて触れていきます。  
-タグとは、ウェブページに**構造**や**見た目**などの情報を与えるための要素です。
-
-なお、英語圏ではタグのことをElement(エレメント)と呼びます。  
-別の単語でややこしいですが、両方とも同じ意味ですので覚えておきましょう。  
-ここでは基本的に、タグという呼び方で統一します。
-
-ところで前回用意した例では、改行が反映されていませんでした。  
-ここに、改行という見た目を与えるための`<br>`タグを追加してみました。
-
-```html file=public/sample/html/first-with-br.html
-first-with-br.html
-```
-
-<RenderFile path="public/sample/html/first-with-br.html" />
-
-ちゃんと改行されましたね！
-
----
-
-もう1つ、個人的に`生まれてこの方...`の部分を強調したいなと思いました。  
-そこで強調を意味する`<strong>`タグを追加してみました。
-
-```html file=public/sample/html/first-with-strong.html
-first-with-strong.html
-```
-
-<RenderFile path="public/sample/html/first-with-strong.html" />
-
-何やら文字が太字になりましたね。
-
-この強調された部分は、`<strong>`と`</strong>`で囲まれていることに気づきましたか？  
-範囲の終わりを示すタグ(=閉じタグ)には、タグ名の前にスラッシュ`/`が付きます。  
-これをすることで、効果の範囲を指定できるのです。
-
-```html
-<タグ名>範囲</タグ名>
-```
-
-ここで、さっきの`<br>`には閉じタグが無いことに気が付きましたか？  
-このような、閉じタグを持たないタグも存在し、これを空要素(Void Element)と呼んだりします。
-
-このような空要素の書き方として、末尾にスラッシュ`/`を付ける書き方があるので覚えておきましょう。
-
-```html
-<br>
-<br />
-```
-
----
-
-ついでに色もつけちゃいましょう、`<font>`タグを使って赤色にしてみました。
-
-```html file=public/sample/html/first-with-font.html
-first-with-font.html
-```
-
-<RenderFile path="public/sample/html/first-with-font.html" />
-
-ちゃんと赤色になりましたね！  
-赤色にしたい範囲を`<font color="red">`と`</font>`で囲みました。
-
-よく見ると、開始のタグには`color="red"`という部分がありますね。  
-このfontタグにはcolorという**属性**が用意されており、これを使うことで色を指定できるのです。
-
-```html
-<タグ名 属性名="値">対象</タグ名>
-```
-
-```html
-<font color="red">赤</font>
-<font color="blue">青</font>
-<font color="#008000">暗めの緑</font>
-```
-
-<font color="red">赤</font>
-<font color="blue">青</font>
-<font color="#008000">暗めの緑</font>
-
-:::note info
-今回説明のためにfontタグを使いましたが、fontタグは現在非推奨となっています。
-実際に色を指定する場合は、後述する`CSS`を使うなどの方法を使用しましょう。
-:::
-
-今回登場したタグの他にも、様々なタグが存在します。  
-主要なものをTipsにまとめてありますので、ぜひ参考にしてください。
-
-[いろいろなタグ](../tips/tag)
diff --git a/src/pages/html/010-my-first-html.mdx b/src/pages/html/010-my-first-html.mdx
new file mode 100644
index 0000000..71c1af4
--- /dev/null
+++ b/src/pages/html/010-my-first-html.mdx
@@ -0,0 +1,130 @@
+---
+layout: "@/layouts/MarkdownLayout.astro"
+---
+
+import RenderFile from "@/components/RenderFile";
+import RenderHtml from "@/components/RenderHtml";
+export const title = "はじめてのHTML";
+
+# {title}
+
+## TOC
+
+## とりあえず書いてみよう (work)
+
+以下の場所にファイルを作成し、中身を自由に編集してみましょう。  
+ルールは特にありません。
+
+`src/playground/html/first.html`
+
+例として、こんな感じで書いてみました。
+
+```html file=public/sample/html/first.html
+first.html
+```
+
+...
+
+...
+
+...
+
+`src/playground/html/first.html` は書けましたか？  
+書けたらファイルをダブルクリックして、ブラウザで開いてみましょう。
+
+例として用意したファイルの結果は、こんな感じになりました。
+
+<RenderFile path="public/sample/html/first.html" />
+
+なにやら非常に簡素な見た目ですね、どうやら改行もされていないようです。
+
+## タグ (Element)
+
+ここでHTMLのタグについて触れていきます。  
+タグとは、ウェブページに**構造**や**見た目**などの情報を与えるための要素です。
+
+なお、英語圏ではタグのことをElement(エレメント)と呼びます。  
+別の単語でややこしいですが、両方とも同じ意味ですので覚えておきましょう。  
+ここでは基本的に、タグという呼び方で統一します。
+
+ところで前回用意した例では、改行が反映されていませんでした。  
+ここに、改行という見た目を与えるための`<br>`タグを追加してみました。
+
+```html file=public/sample/html/first-with-br.html
+first-with-br.html
+```
+
+<RenderFile path="public/sample/html/first-with-br.html" />
+
+ちゃんと改行されましたね！
+
+---
+
+もう1つ、個人的に`生まれてこの方...`の部分を強調したいなと思いました。  
+そこで強調を意味する`<strong>`タグを追加してみました。
+
+```html file=public/sample/html/first-with-strong.html
+first-with-strong.html
+```
+
+<RenderFile path="public/sample/html/first-with-strong.html" />
+
+何やら文字が太字になりましたね。
+
+この強調された部分は、`<strong>`と`</strong>`で囲まれていることに気づきましたか？  
+範囲の終わりを示すタグ(=閉じタグ)には、タグ名の前にスラッシュ`/`が付きます。  
+これをすることで、効果の範囲を指定できるのです。
+
+```html
+<タグ名>範囲</タグ名>
+```
+
+ここで、さっきの`<br>`には閉じタグが無いことに気が付きましたか？  
+このような、閉じタグを持たないタグも存在し、これを空要素(Void Element)と呼んだりします。
+
+このような空要素の書き方として、末尾にスラッシュ`/`を付ける書き方があるので覚えておきましょう。
+
+```html
+<br>
+<br />
+```
+
+---
+
+ついでに色もつけちゃいましょう、`<font>`タグを使って赤色にしてみました。
+
+```html file=public/sample/html/first-with-font.html
+first-with-font.html
+```
+
+<RenderFile path="public/sample/html/first-with-font.html" />
+
+ちゃんと赤色になりましたね！  
+赤色にしたい範囲を`<font color="red">`と`</font>`で囲みました。
+
+よく見ると、開始のタグには`color="red"`という部分がありますね。  
+このfontタグにはcolorという**属性**が用意されており、これを使うことで色を指定できるのです。
+
+```html
+<タグ名 属性名="値">対象</タグ名>
+```
+
+```html
+<font color="red">赤</font>
+<font color="blue">青</font>
+<font color="#008000">暗めの緑</font>
+```
+
+<font color="red">赤</font>
+<font color="blue">青</font>
+<font color="#008000">暗めの緑</font>
+
+:::note info
+今回説明のためにfontタグを使いましたが、fontタグは現在非推奨となっています。
+実際に色を指定する場合は、後述する`CSS`を使うなどの方法を使用しましょう。
+:::
+
+今回登場したタグの他にも、様々なタグが存在します。  
+主要なものをTipsにまとめてありますので、ぜひ参考にしてください。
+
+[いろいろなタグ](../tips/tag)
diff --git a/src/pages/html/02-css.mdx b/src/pages/html/02-css.mdx
deleted file mode 100644
index 4908585..0000000
--- a/src/pages/html/02-css.mdx
+++ /dev/null
@@ -1,179 +0,0 @@
----
-layout: "@/layouts/MarkdownLayout.astro"
----
-
-import RenderFile from "@/components/RenderFile";
-import RenderHtml from "@/components/RenderHtml";
-export const title = "HTMLを装飾するCSS";
-
-# {title}
-
-## TOC
-
-## CSSでスタイルを当ててみる
-
-前回、fontタグで色を付けましたが、このタグは現在非推奨となっています。  
-代わりに、CSS (Cascading Style Sheets) を使って見た目を整えていきましょう。
-
-CSSは、HTMLに装飾を加えるための言語です。  
-`<style>`タグの中に書くことで、HTMLの見た目を自由に変更できます。
-
-例として、buttonタグの見た目を変えてみました。
-
-```html file=public/sample/html/button-with-style.html
-button-with-style.html
-```
-
-<RenderFile path="public/sample/html/button-with-style.html" />
-
-`<style>`タグの中に`button { ... }`と書くことで、全てのbuttonタグにスタイルを当てることができます。  
-中括弧`{}`の中には、様々なプロパティ(見た目の設定)を書くことができます。
-
-```css
-button {
-  background-color: blue; /* 背景色 */
-  color: white; /* 文字色 */
-  padding: 10px 20px; /* 内側の余白 */
-  border: none; /* 枠線なし */
-  border-radius: 5px; /* 角を丸く */
-}
-```
-
-## CSSと`class`属性
-
-さて、buttonタグにスタイルを当てると、全てのbuttonが同じ見た目になってしまいました。  
-でも実際には、ボタンごとに違う見た目にしたいことがありますよね。
-
-そんなときに便利なのが`class`属性です。
-
-```html file=public/sample/html/button-with-class.html
-button-with-class.html
-```
-
-<RenderFile path="public/sample/html/button-with-class.html" />
-
-何が書かれているかを見てみましょう。  
-まずボタンタグがあり、そこに`class`という属性が付いています。その値は、各々`primary`や`danger`が設定されています。
-
-一方CSSでは、`.primary { ... }`や`.danger { ... }`と書かれています。これはHTMLの`class`の値につけられた名前と一致していますね。
-
-これが意味するのは、`class`属性で指定された名前に対応するスタイルを当てる、ということです。  
-あくまでも`class`の値しか見ていないので、このような書き方も可能です。
-
-```html file=public/sample/html/tag-with-class.html
-tag-with-class.html
-```
-
-<RenderFile path="public/sample/html/tag-with-class.html" />
-
-`button`タグとは別に、同じクラスを`a`タグにもつけてみました。  
-別物のタグにも関わらず、同じ見た目になっていますね。
-
-また、`class`属性は、値をスペースで区切ることで**複数のクラス**を指定することもできます。
-
-```html file=public/sample/html/multiple-classes.html
-multiple-classes.html
-```
-
-<RenderFile path="public/sample/html/multiple-classes.html" />
-
-`.btn`クラスに対しては共通のスタイルを当てています。  
-これに加えて、`.primary`や`.danger`クラスで文字色や背景色を変えていることがわかりますね。
-
-## CSSと`id`属性
-
-HTMLには、`class`属性の他に`id`属性というものもあります。  
-`id`属性は、表示しているページのなかで**特定の一つの要素**を指し示すために使います。
-
-なお、このidは**ページ内で一意**である必要があります。
-
-```html
-<button id="submit">送信</button>
-```
-
-```css
-#submit {
-  background-color: green;
-}
-```
-
-CSSで`id`を指定すると、そのスタイルを当てる優先順位が`class`よりも高くなります。
-
-```html file=public/sample/html/button-with-id.html
-html-with-id.html
-```
-
-<RenderFile path="public/sample/html/button-with-id.html" />
-
-`class`属性への指定で背景色が青くなる設定を、`id`属性への指定で赤くなるように上書きされていることがわかりますね。
-
-## `div`タグと`span`タグ
-
-タグに最初からスタイルが当たっていると、ときにそれが邪魔になることがあります。  
-例えば、buttonタグは最初からボタンらしい見た目になっていますよね。
-
-そんなとき便利なのが、`div`タグと`span`タグです。  
-これらは**スタイルを持たない**空の入れ物のようなタグで、自由にスタイルを当てることができます。
-
-```html file=public/sample/html/div-and-span.html
-div-and-span.html
-```
-
-<RenderFile path="public/sample/html/div-and-span.html" />
-
-`div`は**ブロック要素**で、前後に改行が入ります。  
-`span`は**インライン要素**で、文章の中に埋め込むことができます。
-
-```html
-<div class="container">
-  これは<span class="highlight">強調</span>された文章です。
-</div>
-```
-
-## スタイル指定の組み合わせ
-
-CSSでは、要素の指定を組み合わせることもできます。
-
-```html file=public/sample/html/combined-style.html
-combined-style.html
-```
-
-<RenderFile path="public/sample/html/combined-style.html" />
-
-見慣れない指定が多いかもしれませんが、ここで注目してほしいのはこの部分です。
-
-```css
-.x .icon {
-  ...
-}
-.line .icon {
-  ...
-}
-```
-
-これは、`.x`クラスの中にある`.icon`クラス、`.line`クラスの中にある`.icon`クラス、という意味です。  
-そのため同じ`.icon`クラスでも、親要素のクラスによって見た目が変わっていますね。
-
-他に最もよく使う組み合わせとして、以下のようなものがあります。
-
-```css
-/* a と b 両方のクラスを持つ要素 */
-.a.b {
-  ...
-}
-
-/* a クラスの直下にある b クラスの要素 */
-.a > .b {
-  ...
-}
-```
-
-## 名称
-
-検索エンジンなどで調べるときに便利なように、今回出てきた用語の名称をまとめておきます。
-
-```css
-セレクタ {
-  プロパティ: 値;
-}
-```
diff --git a/src/pages/html/020-css.mdx b/src/pages/html/020-css.mdx
new file mode 100644
index 0000000..4908585
--- /dev/null
+++ b/src/pages/html/020-css.mdx
@@ -0,0 +1,179 @@
+---
+layout: "@/layouts/MarkdownLayout.astro"
+---
+
+import RenderFile from "@/components/RenderFile";
+import RenderHtml from "@/components/RenderHtml";
+export const title = "HTMLを装飾するCSS";
+
+# {title}
+
+## TOC
+
+## CSSでスタイルを当ててみる
+
+前回、fontタグで色を付けましたが、このタグは現在非推奨となっています。  
+代わりに、CSS (Cascading Style Sheets) を使って見た目を整えていきましょう。
+
+CSSは、HTMLに装飾を加えるための言語です。  
+`<style>`タグの中に書くことで、HTMLの見た目を自由に変更できます。
+
+例として、buttonタグの見た目を変えてみました。
+
+```html file=public/sample/html/button-with-style.html
+button-with-style.html
+```
+
+<RenderFile path="public/sample/html/button-with-style.html" />
+
+`<style>`タグの中に`button { ... }`と書くことで、全てのbuttonタグにスタイルを当てることができます。  
+中括弧`{}`の中には、様々なプロパティ(見た目の設定)を書くことができます。
+
+```css
+button {
+  background-color: blue; /* 背景色 */
+  color: white; /* 文字色 */
+  padding: 10px 20px; /* 内側の余白 */
+  border: none; /* 枠線なし */
+  border-radius: 5px; /* 角を丸く */
+}
+```
+
+## CSSと`class`属性
+
+さて、buttonタグにスタイルを当てると、全てのbuttonが同じ見た目になってしまいました。  
+でも実際には、ボタンごとに違う見た目にしたいことがありますよね。
+
+そんなときに便利なのが`class`属性です。
+
+```html file=public/sample/html/button-with-class.html
+button-with-class.html
+```
+
+<RenderFile path="public/sample/html/button-with-class.html" />
+
+何が書かれているかを見てみましょう。  
+まずボタンタグがあり、そこに`class`という属性が付いています。その値は、各々`primary`や`danger`が設定されています。
+
+一方CSSでは、`.primary { ... }`や`.danger { ... }`と書かれています。これはHTMLの`class`の値につけられた名前と一致していますね。
+
+これが意味するのは、`class`属性で指定された名前に対応するスタイルを当てる、ということです。  
+あくまでも`class`の値しか見ていないので、このような書き方も可能です。
+
+```html file=public/sample/html/tag-with-class.html
+tag-with-class.html
+```
+
+<RenderFile path="public/sample/html/tag-with-class.html" />
+
+`button`タグとは別に、同じクラスを`a`タグにもつけてみました。  
+別物のタグにも関わらず、同じ見た目になっていますね。
+
+また、`class`属性は、値をスペースで区切ることで**複数のクラス**を指定することもできます。
+
+```html file=public/sample/html/multiple-classes.html
+multiple-classes.html
+```
+
+<RenderFile path="public/sample/html/multiple-classes.html" />
+
+`.btn`クラスに対しては共通のスタイルを当てています。  
+これに加えて、`.primary`や`.danger`クラスで文字色や背景色を変えていることがわかりますね。
+
+## CSSと`id`属性
+
+HTMLには、`class`属性の他に`id`属性というものもあります。  
+`id`属性は、表示しているページのなかで**特定の一つの要素**を指し示すために使います。
+
+なお、このidは**ページ内で一意**である必要があります。
+
+```html
+<button id="submit">送信</button>
+```
+
+```css
+#submit {
+  background-color: green;
+}
+```
+
+CSSで`id`を指定すると、そのスタイルを当てる優先順位が`class`よりも高くなります。
+
+```html file=public/sample/html/button-with-id.html
+html-with-id.html
+```
+
+<RenderFile path="public/sample/html/button-with-id.html" />
+
+`class`属性への指定で背景色が青くなる設定を、`id`属性への指定で赤くなるように上書きされていることがわかりますね。
+
+## `div`タグと`span`タグ
+
+タグに最初からスタイルが当たっていると、ときにそれが邪魔になることがあります。  
+例えば、buttonタグは最初からボタンらしい見た目になっていますよね。
+
+そんなとき便利なのが、`div`タグと`span`タグです。  
+これらは**スタイルを持たない**空の入れ物のようなタグで、自由にスタイルを当てることができます。
+
+```html file=public/sample/html/div-and-span.html
+div-and-span.html
+```
+
+<RenderFile path="public/sample/html/div-and-span.html" />
+
+`div`は**ブロック要素**で、前後に改行が入ります。  
+`span`は**インライン要素**で、文章の中に埋め込むことができます。
+
+```html
+<div class="container">
+  これは<span class="highlight">強調</span>された文章です。
+</div>
+```
+
+## スタイル指定の組み合わせ
+
+CSSでは、要素の指定を組み合わせることもできます。
+
+```html file=public/sample/html/combined-style.html
+combined-style.html
+```
+
+<RenderFile path="public/sample/html/combined-style.html" />
+
+見慣れない指定が多いかもしれませんが、ここで注目してほしいのはこの部分です。
+
+```css
+.x .icon {
+  ...
+}
+.line .icon {
+  ...
+}
+```
+
+これは、`.x`クラスの中にある`.icon`クラス、`.line`クラスの中にある`.icon`クラス、という意味です。  
+そのため同じ`.icon`クラスでも、親要素のクラスによって見た目が変わっていますね。
+
+他に最もよく使う組み合わせとして、以下のようなものがあります。
+
+```css
+/* a と b 両方のクラスを持つ要素 */
+.a.b {
+  ...
+}
+
+/* a クラスの直下にある b クラスの要素 */
+.a > .b {
+  ...
+}
+```
+
+## 名称
+
+検索エンジンなどで調べるときに便利なように、今回出てきた用語の名称をまとめておきます。
+
+```css
+セレクタ {
+  プロパティ: 値;
+}
+```
diff --git a/src/pages/html/03-work.mdx b/src/pages/html/03-work.mdx
deleted file mode 100644
index 9e27505..0000000
--- a/src/pages/html/03-work.mdx
+++ /dev/null
@@ -1,114 +0,0 @@
----
-layout: "@/layouts/MarkdownLayout.astro"
----
-
-import RenderFile from "@/components/RenderFile.tsx";
-
-export const title = "ワーク1";
-
-# {title}
-
-このワークは、以下の内容を含みます。
-
-- [はじめてのHTML](./01-my-first-html)
-- [HTMLを装飾するCSS](./02-css)
-
-これまで学んだ知識を使って、実際にHTMLとCSSを書いてみましょう。
-
-## TOC
-
-## 演習1: 自己紹介カードを作ろう
-
-`src/playground/html/`フォルダに`profile-card.html`を作成して、自分の自己紹介カードを作成してください。
-
-### 要件
-
-- 名前、趣味、好きな食べ物の3つの情報を表示する
-- `div`タグで全体を囲む
-- `<style>`タグでCSSを記述する
-- 以下のCSSプロパティを使ってスタイリングする:
-  - `background-color`: 背景色
-  - `padding`: 内側の余白
-  - `border`: 枠線
-  - `border-radius`: 角を丸くする
-
-<details>
-<summary>ヒント</summary>
-
-```html
-<div class="card">
-  名前: もつにさん<br>
-  趣味: ...<br>
-  好きな食べ物: ...
-</div>
-```
-
-CSSで`.card`のスタイルを指定してみましょう。
-
-</details>
-
-### 完成例
-
-<RenderFile path="public/sample/html/profile-card.html" />
-
----
-
-## 演習2: メッセージボックスを作ろう
-
-`src/playground/html/`フォルダに`message-box.html`を作成して、3種類のメッセージボックスを作成してください。
-
-### 要件
-
-- 成功メッセージ(緑)、警告メッセージ(黄)、エラーメッセージ(赤)の3つを作る
-- 複数のclassを組み合わせて使う(例: `class="message success"`)
-- `.message`クラスで共通のスタイルを定義する
-- `.success`, `.warning`, `.error`クラスでそれぞれ異なる色を指定する
-
-<details>
-<summary>ヒント</summary>
-
-```html
-<div class="message success">
-  保存に成功しました!
-</div>
-```
-
-共通部分と個別部分を分けて考えると、効率的にスタイルを書けます。
-
-</details>
-
-### 完成例
-
-<RenderFile path="public/sample/html/message-box.html" />
-
----
-
-## 演習3: ナビゲーションメニューを作ろう
-
-`src/playground/html/`フォルダに`navigation.html`を作成して、シンプルなナビゲーションメニューを作成してください。
-
-### 要件
-
-- 「ホーム」「お知らせ」「お問い合わせ」の3つのメニュー項目を作る
-- `div`で全体を囲み、各項目を`span`で作る
-- 子孫セレクタを使ってスタイルを指定する(例: `.nav .item`)
-- メニュー項目にマウスを乗せたときの見た目を変える(`:hover`を使う)
-
-<details>
-<summary>ヒント</summary>
-
-```html
-<div class="nav">
-  <span class="item">ホーム</span>
-  <span class="item">お知らせ</span>
-  <span class="item">お問い合わせ</span>
-</div>
-```
-
-`span`はインライン要素なので、横に並びます。`.nav .item:hover`でマウスを乗せたときのスタイルを指定できます。
-
-</details>
-
-### 完成例
-
-<RenderFile path="public/sample/html/navigation.html" />
diff --git a/src/pages/html/090-work.mdx b/src/pages/html/090-work.mdx
new file mode 100644
index 0000000..9e27505
--- /dev/null
+++ b/src/pages/html/090-work.mdx
@@ -0,0 +1,114 @@
+---
+layout: "@/layouts/MarkdownLayout.astro"
+---
+
+import RenderFile from "@/components/RenderFile.tsx";
+
+export const title = "ワーク1";
+
+# {title}
+
+このワークは、以下の内容を含みます。
+
+- [はじめてのHTML](./01-my-first-html)
+- [HTMLを装飾するCSS](./02-css)
+
+これまで学んだ知識を使って、実際にHTMLとCSSを書いてみましょう。
+
+## TOC
+
+## 演習1: 自己紹介カードを作ろう
+
+`src/playground/html/`フォルダに`profile-card.html`を作成して、自分の自己紹介カードを作成してください。
+
+### 要件
+
+- 名前、趣味、好きな食べ物の3つの情報を表示する
+- `div`タグで全体を囲む
+- `<style>`タグでCSSを記述する
+- 以下のCSSプロパティを使ってスタイリングする:
+  - `background-color`: 背景色
+  - `padding`: 内側の余白
+  - `border`: 枠線
+  - `border-radius`: 角を丸くする
+
+<details>
+<summary>ヒント</summary>
+
+```html
+<div class="card">
+  名前: もつにさん<br>
+  趣味: ...<br>
+  好きな食べ物: ...
+</div>
+```
+
+CSSで`.card`のスタイルを指定してみましょう。
+
+</details>
+
+### 完成例
+
+<RenderFile path="public/sample/html/profile-card.html" />
+
+---
+
+## 演習2: メッセージボックスを作ろう
+
+`src/playground/html/`フォルダに`message-box.html`を作成して、3種類のメッセージボックスを作成してください。
+
+### 要件
+
+- 成功メッセージ(緑)、警告メッセージ(黄)、エラーメッセージ(赤)の3つを作る
+- 複数のclassを組み合わせて使う(例: `class="message success"`)
+- `.message`クラスで共通のスタイルを定義する
+- `.success`, `.warning`, `.error`クラスでそれぞれ異なる色を指定する
+
+<details>
+<summary>ヒント</summary>
+
+```html
+<div class="message success">
+  保存に成功しました!
+</div>
+```
+
+共通部分と個別部分を分けて考えると、効率的にスタイルを書けます。
+
+</details>
+
+### 完成例
+
+<RenderFile path="public/sample/html/message-box.html" />
+
+---
+
+## 演習3: ナビゲーションメニューを作ろう
+
+`src/playground/html/`フォルダに`navigation.html`を作成して、シンプルなナビゲーションメニューを作成してください。
+
+### 要件
+
+- 「ホーム」「お知らせ」「お問い合わせ」の3つのメニュー項目を作る
+- `div`で全体を囲み、各項目を`span`で作る
+- 子孫セレクタを使ってスタイルを指定する(例: `.nav .item`)
+- メニュー項目にマウスを乗せたときの見た目を変える(`:hover`を使う)
+
+<details>
+<summary>ヒント</summary>
+
+```html
+<div class="nav">
+  <span class="item">ホーム</span>
+  <span class="item">お知らせ</span>
+  <span class="item">お問い合わせ</span>
+</div>
+```
+
+`span`はインライン要素なので、横に並びます。`.nav .item:hover`でマウスを乗せたときのスタイルを指定できます。
+
+</details>
+
+### 完成例
+
+<RenderFile path="public/sample/html/navigation.html" />