---
layout: "@/layouts/MarkdownLayout.astro"
---
import RenderFile from "@/components/RenderFile";
import RenderHtml from "@/components/RenderHtml";
export const title = "はじめてのHTML";
# {title}
## とりあえず書いてみよう (work)
以下の場所にファイルを作成し、中身を自由に編集してみましょう。
ルールは特にありません。
`src/playground/html/first.html`
例として、こんな感じで書いてみました。
```html file=src/sample/html/first.html
first.html
```
...
...
...
`src/playground/html/first.html` は書けましたか？
書けたらファイルをダブルクリックして、ブラウザで開いてみましょう。
例として用意したファイルの結果は、こんな感じになりました。
<RenderFile path="src/sample/html/first.html" />
なにやら非常に簡素な見た目ですね、どうやら改行もされていないようです。
## タグ
ここでHTMLのタグについて触れていきます。
タグとは、ウェブページに**意味**、**構造**、**見た目**の情報を与えるための要素です。
ところで前回用意した例では、改行が反映されていませんでした。
ここに、改行という見た目を与えるための`<br>`タグを追加してみました。
```html file=src/sample/html/first-with-br.html
first-with-br.html
```
<RenderFile path="src/sample/html/first-with-br.html" />
ちゃんと改行されましたね！
---
もう1つ、個人的に`生まれてこの方...`の部分を強調したいなと思いました。
そこで強調を意味する`<strong>`タグを追加してみました。
```html file=src/sample/html/first-with-strong.html
first-with-strong.html
```
<RenderFile path="src/sample/html/first-with-strong.html" />
何やら文字が太字になりましたね。
この強調された部分は、`<strong>`と`</strong>`で囲まれていることに気づきましたか？
範囲の終わりを示すタグ(=閉じタグ)には、タグ名の前にスラッシュ`/`が付きます。
これをすることで、効果の範囲を指定できるのです。
```html
<タグ名>範囲</タグ名>
```
---
ついでに色もつけちゃいましょう、`<font>`タグを使って赤色にしてみました。
```html file=src/sample/html/first-with-font.html
first-with-font.html
```
<RenderFile path="src/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>
```
export function SampleColor() {
return (
<div>
<font color="red">赤</font>
<font color="blue">青</font>
<font color="#008000">暗めの緑</font>
</div>
)
}
<SampleColor />
:::note info
今回説明のためにfontタグを使いましたが、fontタグは現在非推奨となっています。
実際に色を指定する場合は、後述する`CSS`を使うなどの方法を使用しましょう。
:::
