---
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="src/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="src/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="src/sample/html/navigation.html" />