css 演習問題3の解答を修正

Yokomi422 · Yokomi422 · commit 3878e6b0d765 · 2025-12-06T20:08:37.000+09:00
diff --git a/docs/1-trial-session/03-css/_samples/foo/index.html b/docs/1-trial-session/03-css/_samples/foo/index.html
@@ -2,19 +2,10 @@
 <html lang="ja">
   <head>
     <meta charset="utf-8" />
+    <link rel="stylesheet" href="./style.css" />
     <title>Title</title>
   </head>
   <body>
-    <div
-      style="
-        border: 1px solid #aaa;
-        border-radius: 10px;
-        margin: 30px;
-        padding: 30px;
-        box-shadow: 0px 0px 2px 1px #aaa;
-      "
-    >
-      Foo
-    </div>
+    <div id="foo">Foo</div>
   </body>
 </html>
diff --git a/docs/1-trial-session/03-css/_samples/foo/style.css b/docs/1-trial-session/03-css/_samples/foo/style.css
@@ -0,0 +1,7 @@
+#foo {
+  border: 1px solid #aaa;
+  border-radius: 10px;
+  margin: 30px;
+  padding: 30px;
+  box-shadow: 0px 0px 2px 1px #aaa;
+}
diff --git a/docs/1-trial-session/03-css/index.mdx b/docs/1-trial-session/03-css/index.mdx
@@ -6,6 +6,7 @@ import { Sandpack } from "@codesandbox/sandpack-react";
 import yellowHelloCssHtml from "!!raw-loader!./_samples/yellow-hello-css/index.html";
 import yellowHelloCssCss from "!!raw-loader!./_samples/yellow-hello-css/style.css";
 import fooHtml from "!!raw-loader!./_samples/foo/index.html";
+import fooCss from "!!raw-loader!./_samples/foo/style.css";
 
 この節では、Web開発で用いられるもう一つの言語である、CSSについて学びます。CSSはWebサイトの「見た目」をつかさどる言語です。多くの<Term>HTML要素</Term>は、<Term>CSS</Term>を用いることで、その見た目を細かくカスタマイズすることができます。
 
@@ -196,6 +197,7 @@ HTMLファイルとCSSファイルを分けて作成する場合、`style`属性
   template="static"
   files={{
     "/index.html": fooHtml,
+    "/style.css": fooCss,
   }}
   options={{
     activeFile: "/index.html",
