diff --git a/src/pages/html/03-work.mdx b/src/pages/html/03-work.mdx index 21331cf..0f22d8f 100644 --- a/src/pages/html/03-work.mdx +++ b/src/pages/html/03-work.mdx @@ -2,6 +2,8 @@ layout: "@/layouts/MarkdownLayout.astro" --- +import RenderFile from "@/components/RenderFile.tsx"; + export const title = "ワーク1"; # {title} @@ -10,3 +12,101 @@ - [はじめてのHTML](./01-my-first-html) - [HTMLを装飾するCSS](./02-css) + +これまで学んだ知識を使って、実際にHTMLとCSSを書いてみましょう。 + +## 演習1: 自己紹介カードを作ろう + +`src/playground/html/`フォルダに`profile-card.html`を作成して、自分の自己紹介カードを作成してください。 + +### 要件 + +- 名前、趣味、好きな食べ物の3つの情報を表示する +- `div`タグで全体を囲む +- ` + + + +
保存に成功しました!
+
入力内容を確認してください。
+
エラーが発生しました。もう一度お試しください。
+ + + diff --git a/src/sample/html/navigation.html b/src/sample/html/navigation.html new file mode 100644 index 0000000..bbec858 --- /dev/null +++ b/src/sample/html/navigation.html @@ -0,0 +1,37 @@ + + + + + + + ナビゲーションメニュー + + + + +
+ ホーム + お知らせ + お問い合わせ +
+ + + diff --git a/src/sample/html/profile-card.html b/src/sample/html/profile-card.html new file mode 100644 index 0000000..b54dfeb --- /dev/null +++ b/src/sample/html/profile-card.html @@ -0,0 +1,34 @@ + + + + + + + 自己紹介カード + + + + +
+ 名前: もつにさん
+ 趣味: プログラミング
+ 好きな食べ物: カレーライス +
+ + +