diff --git a/src/components/RenderFile.tsx b/src/components/RenderFile.tsx
index cba2f2a..6ca86da 100644
--- a/src/components/RenderFile.tsx
+++ b/src/components/RenderFile.tsx
@@ -2,28 +2,35 @@
 import { useEffect, useState } from "preact/hooks";
 
 type RenderHtmlProps = {
-	path: string;
+  path: string;
 };
 
 export default function RenderFile(props: RenderHtmlProps) {
-	const [htmlContent, setHtmlContent] = useState<string>(
-		readRawText(props.path),
-	);
+  const [htmlContent, setHtmlContent] = useState<string>(
+    readRawText(props.path),
+  );
 
-	useEffect(() => {
-		const text = readRawText(props.path);
-		setHtmlContent(text);
-	}, [props.path]);
+  useEffect(() => {
+    const text = readRawText(props.path);
+    setHtmlContent(text);
+  }, [props.path]);
 
-	return (
-		<div
-			style={{
-				border: "1px solid #ccc",
-				borderRadius: "8px",
-				padding: "16px",
-			}}
-		>
-			<div dangerouslySetInnerHTML={{ __html: htmlContent }} />
-		</div>
-	);
+  return (
+    <div
+      style={{
+        border: "1px solid #ccc",
+        borderRadius: "8px",
+        padding: "16px",
+        marginBottom: "var(--base-size-16, 1rem)",
+      }}
+    >
+      <iframe
+        srcDoc={htmlContent}
+        style={{
+          border: "1px solid #ccc",
+          width: "100%",
+        }}
+      />
+    </div>
+  );
 }
diff --git a/src/pages/html/02-css.mdx b/src/pages/html/02-css.mdx
index 796561e..7b114ff 100644
--- a/src/pages/html/02-css.mdx
+++ b/src/pages/html/02-css.mdx
@@ -2,17 +2,176 @@
 layout: "@/layouts/MarkdownLayout.astro"
 ---
 
+import RenderFile from "@/components/RenderFile";
+import RenderHtml from "@/components/RenderHtml";
 export const title = "HTMLを装飾するCSS";
 
 # {title}
 
-書くこと
+## CSSでスタイルを当ててみる
 
-- CSSでスタイルを当ててみる
-  - buttonタグの見た目を変えてみる
-- `id`と`class`属性
-  - タグに対してスタイルを当てると、全ての同じタグに影響が出てしまう・・・
-- `div`タグと`span`タグ
-  - タグに最初からスタイルがあたっていると、ときにそれが邪魔になることがある・・・
-- 優先順位
-  - 複数のスタイルが当たるとき、どのスタイルが優先されるのか？
+前回、fontタグで色を付けましたが、このタグは現在非推奨となっています。  
+代わりに、CSS (Cascading Style Sheets) を使って見た目を整えていきましょう。
+
+CSSは、HTMLに装飾を加えるための言語です。  
+`<style>`タグの中に書くことで、HTMLの見た目を自由に変更できます。
+
+例として、buttonタグの見た目を変えてみました。
+
+```html file=src/sample/html/button-with-style.html
+button-with-style.html
+```
+
+<RenderFile path="src/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=src/sample/html/button-with-class.html
+button-with-class.html
+```
+
+<RenderFile path="src/sample/html/button-with-class.html" />
+
+何が書かれているかを見てみましょう。  
+まずボタンタグがあり、そこに`class`という属性が付いています。その値は、各々`primary`や`danger`が設定されています。
+
+一方CSSでは、`.primary { ... }`や`.danger { ... }`と書かれています。これはHTMLの`class`の値につけられた名前と一致していますね。
+
+これが意味するのは、`class`属性で指定された名前に対応するスタイルを当てる、ということです。  
+あくまでも`class`の値しか見ていないので、このような書き方も可能です。
+
+```html file=src/sample/html/tag-with-class.html
+tag-with-class.html
+```
+
+<RenderFile path="src/sample/html/tag-with-class.html" />
+
+`button`タグとは別に、同じクラスを`a`タグにもつけてみました。  
+別物のタグにも関わらず、同じ見た目になっていますね。
+
+また、`class`属性は、値をスペースで区切ることで**複数のクラス**を指定することもできます。
+
+```html file=src/sample/html/multiple-classes.html
+multiple-classes.html
+```
+
+<RenderFile path="src/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=src/sample/html/button-with-id.html
+html-with-id.html
+```
+
+<RenderFile path="src/sample/html/button-with-id.html" />
+
+`class`属性への指定で背景色が青くなる設定を、`id`属性への指定で赤くなるように上書きされていることがわかりますね。
+
+## `div`タグと`span`タグ
+
+タグに最初からスタイルが当たっていると、ときにそれが邪魔になることがあります。  
+例えば、buttonタグは最初からボタンらしい見た目になっていますよね。
+
+そんなとき便利なのが、`div`タグと`span`タグです。  
+これらは**スタイルを持たない**空の入れ物のようなタグで、自由にスタイルを当てることができます。
+
+```html file=src/sample/html/div-and-span.html
+div-and-span.html
+```
+
+<RenderFile path="src/sample/html/div-and-span.html" />
+
+`div`は**ブロック要素**で、前後に改行が入ります。  
+`span`は**インライン要素**で、文章の中に埋め込むことができます。
+
+```html
+<div class="container">
+  これは<span class="highlight">強調</span>された文章です。
+</div>
+```
+
+## スタイル指定の組み合わせ
+
+CSSでは、要素の指定を組み合わせることもできます。
+
+```html file=src/sample/html/combined-style.html
+combined-style.html
+```
+
+<RenderFile path="src/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-javascript.mdx b/src/pages/html/03-javascript.mdx
new file mode 100644
index 0000000..fbea73a
--- /dev/null
+++ b/src/pages/html/03-javascript.mdx
@@ -0,0 +1,7 @@
+---
+layout: "@/layouts/MarkdownLayout.astro"
+---
+
+export const title = "JavaScriptで動きをつける";
+
+# {title}
diff --git a/src/sample/html/button-with-class.html b/src/sample/html/button-with-class.html
new file mode 100644
index 0000000..aba5eeb
--- /dev/null
+++ b/src/sample/html/button-with-class.html
@@ -0,0 +1,31 @@
+<style>
+  .primary {
+    background-color: blue;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+
+  .danger {
+    background-color: red;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+
+  .success {
+    background-color: green;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+</style>
+<button class="primary">送信</button>
+<button class="danger">削除</button>
+<button class="success">保存</button>
diff --git a/src/sample/html/button-with-id.html b/src/sample/html/button-with-id.html
new file mode 100644
index 0000000..0e79e1f
--- /dev/null
+++ b/src/sample/html/button-with-id.html
@@ -0,0 +1,19 @@
+<style>
+  .btn {
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    background-color: blue;
+  }
+
+  #submit {
+    background-color: red;
+  }
+</style>
+
+<button class="btn">ただのボタン</button>
+<button class="btn">ただのボタン</button>
+<button class="btn" id="submit">送信ボタン</button>
+<button class="btn">ただのボタン</button>
diff --git a/src/sample/html/button-with-style.html b/src/sample/html/button-with-style.html
new file mode 100644
index 0000000..c0ad591
--- /dev/null
+++ b/src/sample/html/button-with-style.html
@@ -0,0 +1,13 @@
+<style>
+  button {
+    background-color: blue;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+</style>
+<button>クリック!</button>
+<button>送信</button>
+<button>キャンセル</button>
diff --git a/src/sample/html/combined-style.html b/src/sample/html/combined-style.html
new file mode 100644
index 0000000..2702433
--- /dev/null
+++ b/src/sample/html/combined-style.html
@@ -0,0 +1,53 @@
+<style>
+  .share {
+    background-color: #f0f0f0;
+    color: #333;
+    padding: 10px 16px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    display: block;
+
+    width: max-content;
+  }
+
+  .icon {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    margin-right: 8px;
+    background-size: contain;
+    background-repeat: no-repeat;
+    vertical-align: middle;
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gPHBhdGggZD0iTSAxOCAyIEEgMyAzIDAgMCAwIDE1IDUgQSAzIDMgMCAwIDAgMTUuMDU0Njg4IDUuNTYwNTQ2OSBMIDcuOTM5NDUzMSA5LjcxMDkzNzUgQSAzIDMgMCAwIDAgNiA5IEEgMyAzIDAgMCAwIDMgMTIgQSAzIDMgMCAwIDAgNiAxNSBBIDMgMyAwIDAgMCA3LjkzNTU0NjkgMTQuMjg3MTA5IEwgMTUuMDU0Njg4IDE4LjQzOTQ1MyBBIDMgMyAwIDAgMCAxNSAxOSBBIDMgMyAwIDAgMCAxOCAyMiBBIDMgMyAwIDAgMCAyMSAxOSBBIDMgMyAwIDAgMCAxOCAxNiBBIDMgMyAwIDAgMCAxNi4wNjI1IDE2LjcxMjg5MSBMIDguOTQ1MzEyNSAxMi41NjA1NDcgQSAzIDMgMCAwIDAgOSAxMiBBIDMgMyAwIDAgMCA4Ljk0NTMxMjUgMTEuNDM5NDUzIEwgMTYuMDYwNTQ3IDcuMjg5MDYyNSBBIDMgMyAwIDAgMCAxOCA4IEEgMyAzIDAgMCAwIDIxIDUgQSAzIDMgMCAwIDAgMTggMiB6Ij48L3BhdGg+PC9zdmc+");
+  }
+
+  .x .icon {
+    background-image: url("data:image/svg+xml;base64,PHN2ZyBhcmlhLWxhYmVsPSJYIGxvZ28iIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDMwMCAyNzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJtMjM2IDBoNDZsLTEwMSAxMTUgMTE4IDE1NmgtOTIuNmwtNzIuNS05NC44LTgzIDk0LjhoLTQ2bDEwNy0xMjMtMTEzLTE0OGg5NC45bDY1LjUgODYuNnptLTE2LjEgMjQ0aDI1LjVsLTE2NS0yMThoLTI3LjR6Ii8+PC9zdmc+");
+  }
+
+  .line .icon {
+    background-color: #03C755;
+    background-image: url("data:image/svg+xml;base64,IDxzdmcgYXJpYS1sYWJlbD0iTGluZSBsb2dvIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZyBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGZpbGw9IndoaXRlIj48cGF0aCBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xMi45MSA2LjU3Yy4yMzIgMCAuNDIuMTkuNDIuNDIgMCAuMjMtLjE4OC40Mi0uNDIuNDJoLTEuMTd2Ljc1aDEuMTdhLjQyLjQyIDAgMSAxIDAgLjg0aC0xLjU5YS40Mi40MiAwIDAgMS0uNDE4LS40MlY1LjRjMC0uMjMuMTg4LS40Mi40Mi0uNDJoMS41OWEuNDIuNDIgMCAwIDEtLjAwMi44NGgtMS4xN3YuNzVoMS4xN3ptLTIuNTcgMi4wMWEuNDIxLjQyMSAwIDAgMS0uNzU3LjI1MWwtMS42My0yLjIxN1Y4LjU4YS40Mi40MiAwIDAgMS0uNDIuNDIuNDIuNDIgMCAwIDEtLjQxOC0uNDJWNS40YS40MTguNDE4IDAgMCAxIC43NTUtLjI0OUw5LjUgNy4zNjZWNS40YzAtLjIzLjE4OC0uNDIuNDItLjQyLjIzIDAgLjQyLjE5LjQyLjQydjMuMTh6bS0zLjgyOCAwYzAgLjIzLS4xODguNDItLjQyLjQyYS40Mi40MiAwIDAgMS0uNDE4LS40MlY1LjRjMC0uMjMuMTg4LS40Mi40Mi0uNDIuMjMgMCAuNDE4LjE5LjQxOC40MnYzLjE4ek00Ljg2OCA5aC0xLjU5Yy0uMjMgMC0uNDItLjE5LS40Mi0uNDJWNS40YzAtLjIzLjE5LS40Mi40Mi0uNDIuMjMyIDAgLjQyLjE5LjQyLjQydjIuNzZoMS4xN2EuNDIuNDIgMCAxIDEgMCAuODRNMTYgNi44N0MxNiAzLjI5IDEyLjQxLjM3NiA4IC4zNzZTMCAzLjI5IDAgNi44N2MwIDMuMjA4IDIuODQ2IDUuODk2IDYuNjkgNi40MDUuMjYuMDU2LjYxNS4xNzIuNzA1LjM5NC4wOC4yLjA1My41MTguMDI2LjcyMiAwIDAtLjA5Mi41NjUtLjExMy42ODUtLjAzNS4yMDMtLjE2Ljc5LjY5My40MzIuODU0LS4zNiA0LjYwNy0yLjcxNCA2LjI4NS00LjY0NkMxNS40NDUgOS41OTQgMTYgOC4zMDIgMTYgNi44NyI+PC9wYXRoPjwvZz48L3N2Zz4=");
+  }
+</style>
+
+<div class="share">
+  <span class="icon"></span>
+  共有する
+</div>
+
+<br />
+
+<div class="share x">
+  <span class="icon"></span>
+  共有する
+</div>
+
+<br />
+
+<div class="share line">
+  <span class="icon"></span>
+  共有する
+</div>
diff --git a/src/sample/html/css-priority.html b/src/sample/html/css-priority.html
new file mode 100644
index 0000000..5880a21
--- /dev/null
+++ b/src/sample/html/css-priority.html
@@ -0,0 +1,26 @@
+<style>
+  /* 1. タグに対するスタイル */
+  button {
+    background-color: gray;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+
+  /* 2. クラスに対するスタイル */
+  .primary {
+    background-color: blue;
+  }
+
+  /* 3. IDに対するスタイル */
+  #submit {
+    background-color: green;
+  }
+</style>
+
+<button>普通のボタン (gray)</button>
+<button class="primary">クラス指定 (blue)</button>
+<button id="submit" class="primary">ID指定 (green)</button>
+<button id="submit" class="primary" style="background-color: orange;">style属性 (orange)</button>
diff --git a/src/sample/html/div-and-span.html b/src/sample/html/div-and-span.html
new file mode 100644
index 0000000..3ca4a30
--- /dev/null
+++ b/src/sample/html/div-and-span.html
@@ -0,0 +1,29 @@
+<style>
+  .container {
+    background-color: #f0f0f0;
+    padding: 20px;
+    margin: 10px 0;
+    border-radius: 5px;
+  }
+
+  .highlight {
+    background-color: yellow;
+    font-weight: bold;
+  }
+
+  .text-blue {
+    color: blue;
+  }
+</style>
+
+<div class="container">
+  これはdivタグで囲まれた領域です。
+</div>
+
+<div class="container">
+  これは<span class="highlight">強調</span>された文章です。
+</div>
+
+<p>
+  spanタグは<span class="text-blue">文章の中</span>に埋め込めます。
+</p>
diff --git a/src/sample/html/multiple-classes.html b/src/sample/html/multiple-classes.html
new file mode 100644
index 0000000..7bb079b
--- /dev/null
+++ b/src/sample/html/multiple-classes.html
@@ -0,0 +1,27 @@
+<style>
+  .btn {
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+
+  .primary {
+    color: white;
+    background-color: blue;
+  }
+
+  .danger {
+    color: white;
+    background-color: red;
+  }
+
+  .success {
+    color: white;
+    background-color: green;
+  }
+</style>
+<button class="btn">リセット</button>
+<button class="btn primary">送信</button>
+<button class="btn danger">削除</button>
+<button class="btn success">保存</button>
diff --git a/src/sample/html/tag-with-class.html b/src/sample/html/tag-with-class.html
new file mode 100644
index 0000000..c3065fb
--- /dev/null
+++ b/src/sample/html/tag-with-class.html
@@ -0,0 +1,13 @@
+<style>
+  .primary {
+    background-color: blue;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+</style>
+
+<button class="primary">送信</button>
+<a class="primary">送信</a>