Skip to content

Commit 08e0665

Browse files
chvmvdchvmvd
authored
Merge pull request #115 from chvmvd/add-html-article
Add HTML article
2 parents 053bb75 + 9a77871 commit 08e0665

File tree

1 file changed

+183
-30
lines changed

1 file changed

+183
-30
lines changed

‎docs/03extras/04website/01html/index.mdx

Lines changed: 183 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,25 @@ import InteractiveCodeEditor from "@site/src/components/InteractiveCodeEditor/In
88

99
## HTML とは
1010

11-
通常の Web サイトは、HTML を用いて作るのが一般的です。以下に HTML を用いた Hello World! の例を載せます。
11+
通常の Web サイトは、HTML を用いて作るのが一般的です。HTML(HyperText Markup Language) は、ウェブページを作成するために作られた言語で、様々なコンテンツを表現することができます。
12+
13+
## はじめての HTML
14+
15+
以下が HTML を用いた Hello World の例です。
16+
17+
```html
18+
<!DOCTYPE html>
19+
<html lang="ja">
20+
<head>
21+
<meta charset="UTF-8" />
22+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
23+
<title>Document</title>
24+
</head>
25+
<body>
26+
<p>Hello World!</p>
27+
</body>
28+
</html>
29+
```
1230

1331
<InteractiveCodeEditor
1432
language="html"
@@ -27,13 +45,43 @@ import InteractiveCodeEditor from "@site/src/components/InteractiveCodeEditor/In
2745
`}
2846
/>
2947

30-
様々なことが書いてあり非常にわかりにくいですが、重要なのは `<body>` と `</body>` の間に挟まれた部分です。HTML は、タグと呼ばれるもので内容を囲うことで要素を作ります。今回の場合は、`<body>` と `</body>` で囲まれた部分が内容になっていて、`<p>` と `</p>` で囲まれたところが段落という意味になっています。つまり、`<` と `>` で囲まれる開始タグと `</` と `>` で囲まれる終了タグで内容を挟むことで要素を作ります。終了タグのはじめには、`/` があることに注意してください。
48+
様々なことが書いてあり非常にわかりにくいですが、重要なのは `<body>` と `</body>` の間に挟まれた部分です。HTML は、タグと呼ばれるもので内容を囲うことで要素を作ります。今回の場合は、`<p>` と `</p>` で囲まれたところが段落になっています。つまり、`<` と `>` で囲まれる開始タグと `</` と `>` で囲まれる終了タグで内容を挟むことで要素を作ることができます。終了タグのはじめには、`/` があることに注意してください。
49+
50+
HTML は、タグを用いてどのように構造を表すのかがわかっていれば、後は様々なタグを覚えるだけで簡単に扱えます。
51+
52+
:::info
53+
`<body>` 要素の中身だけがわかっていれば十分ですが、それ以外のコードについても簡単に解説しておきます。
54+
55+
はじめの行の `<!DOCTYPE html>` は、ファイルの先頭に書くことでここから HTML を書くということを明示的に宣言するものです。
56+
57+
`<html lang="ja">` と `</html>` で囲まれたところが、HTML の内容になっています。その中で、`<head>` と `</head>` で囲まれたところがヘッダーで、`<body>` と `</body>` で囲まれたところは、実際にブラウザ上に表示される内容になっています。
58+
59+
`<meta charset="UTF-8" />` は、文字コードに UTF-8 を使うという意味です。`<meta name="viewport" content="width=device-width, initial-scale=1.0" />` は、パソコンやスマートフォンそれぞれに合わせた表示にするために、後々必要になるものです。`<title>Document</title>` はタイトルを定義するもので、ここに書かれた内容はブラウザのタイトルバーに表示されます。
60+
61+
これらの内容は、わかっていなくても構いません。コピペして、使ってください。
62+
63+
```mermaid
64+
flowchart TB
65+
A["&lt;html&gt;"] --> B["&lt;head&gt;"]
66+
A --> C["&lt;body&gt;"]
67+
B --> D["&lt;meta&gt;"]
68+
B --> E["&lt;title&gt;"]
69+
C --> F["&lt;p&gt;"]
70+
```
71+
72+
:::
73+
74+
## 様々なタグ
3175

3276
それでは、他のタグも見てみましょう。HTML には、非常に豊富なタグが用意されているので、大抵のことはできます。
3377

3478
### 見出し要素
3579

36-
`<h1>` タグは、見出しを表します。`<h1>Head</h1>` のようにすることで、Head という見出しになります。
80+
`<h1>` タグは、見出しを表します。`body` タグの中に以下のように書くことで、Head という見出しを作ることができます。
81+
82+
```html
83+
<h1>見出し</h1>
84+
```
3785

3886
<InteractiveCodeEditor
3987
language="html"
@@ -46,7 +94,7 @@ import InteractiveCodeEditor from "@site/src/components/InteractiveCodeEditor/In
4694
<title>Document</title>
4795
</head>
4896
<body>
49-
<h1>Head</h1>
97+
<h1>見出し</h1>
5098
</body>
5199
</html>\
52100
`}
@@ -65,12 +113,66 @@ import InteractiveCodeEditor from "@site/src/components/InteractiveCodeEditor/In
65113
<title>Document</title>
66114
</head>
67115
<body>
68-
<h1>Heading level 1</h1>
69-
<h2>Heading level 2</h2>
70-
<h3>Heading level 3</h3>
71-
<h4>Heading level 4</h4>
72-
<h5>Heading level 5</h5>
73-
<h6>Heading level 6</h6>
116+
<h1>見出し 1</h1>
117+
<h2>見出し 2</h2>
118+
<h3>見出し 3</h3>
119+
<h4>見出し 4</h4>
120+
<h5>見出し 5</h5>
121+
<h6>見出し 6</h6>
122+
</body>
123+
</html>\
124+
`}
125+
/>
126+
127+
### 強調
128+
129+
強調は、次のようにします。
130+
131+
```html
132+
<em>強調</em>
133+
```
134+
135+
:::note
136+
イタリック体になっていて違和感を覚えるかもしれませんが、HTML では論理的な構造のみを表して見た目は CSS という別の言語で表現するのが一般的です。CSS については、後で触れます。HTML で、見た目は表さないということは覚えておいてください。見た目を変えるためだけに、別のタグを使うことなどはしないでください。
137+
:::
138+
139+
<InteractiveCodeEditor
140+
language="html"
141+
defaultValue={`\
142+
<!DOCTYPE html>
143+
<html lang="ja">
144+
<head>
145+
<meta charset="UTF-8" />
146+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
147+
<title>Document</title>
148+
</head>
149+
<body>
150+
<em>強調</em>
151+
</body>
152+
</html>\
153+
`}
154+
/>
155+
156+
### 強い強調
157+
158+
さらに強い強調は、次のようにします。
159+
160+
```html
161+
<strong>さらに強い強調</strong>
162+
```
163+
164+
<InteractiveCodeEditor
165+
language="html"
166+
defaultValue={`\
167+
<!DOCTYPE html>
168+
<html lang="ja">
169+
<head>
170+
<meta charset="UTF-8" />
171+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
172+
<title>Document</title>
173+
</head>
174+
<body>
175+
<strong>さらに強い強調</strong>
74176
</body>
75177
</html>\
76178
`}
@@ -82,9 +184,9 @@ import InteractiveCodeEditor from "@site/src/components/InteractiveCodeEditor/In
82184

83185
```html
84186
<ul>
85-
<li>First Item</li>
86-
<li>Second Item</li>
87-
<li>Third Item</li>
187+
<li>アイテム1</li>
188+
<li>アイテム2</li>
189+
<li>アイテム3</li>
88190
</ul>
89191
```
90192

@@ -100,9 +202,9 @@ import InteractiveCodeEditor from "@site/src/components/InteractiveCodeEditor/In
100202
</head>
101203
<body>
102204
<ul>
103-
<li>First Item</li>
104-
<li>Second Item</li>
105-
<li>Third Item</li>
205+
<li>アイテム1</li>
206+
<li>アイテム2</li>
207+
<li>アイテム3</li>
106208
</ul>
107209
</body>
108210
</html>\
@@ -113,12 +215,12 @@ import InteractiveCodeEditor from "@site/src/components/InteractiveCodeEditor/In
113215

114216
```html
115217
<ul>
116-
<li>First Item</li>
218+
<li>アイテム1</li>
117219
<li>
118-
Second Item
220+
アイテム2
119221
<ul>
120-
<li>First Sub Item</li>
121-
<li>Second Sub Item</li>
222+
<li>サブアイテム1</li>
223+
<li>サブアイテム2</li>
122224
</ul>
123225
</li>
124226
</ul>
@@ -136,12 +238,12 @@ import InteractiveCodeEditor from "@site/src/components/InteractiveCodeEditor/In
136238
</head>
137239
<body>
138240
<ul>
139-
<li>First Item</li>
241+
<li>アイテム1</li>
140242
<li>
141-
Second Item
243+
アイテム2
142244
<ul>
143-
<li>First Sub Item</li>
144-
<li>Second Sub Item</li>
245+
<li>サブアイテム1</li>
246+
<li>サブアイテム2</li>
145247
</ul>
146248
</li>
147249
</ul>
@@ -156,9 +258,9 @@ import InteractiveCodeEditor from "@site/src/components/InteractiveCodeEditor/In
156258

157259
```html
158260
<ol>
159-
<li>First Item</li>
160-
<li>Second Item</li>
161-
<li>Third Item</li>
261+
<li>アイテム1</li>
262+
<li>アイテム2</li>
263+
<li>アイテム3</li>
162264
</ol>
163265
```
164266

@@ -174,15 +276,62 @@ import InteractiveCodeEditor from "@site/src/components/InteractiveCodeEditor/In
174276
</head>
175277
<body>
176278
<ol>
177-
<li>First Item</li>
178-
<li>Second Item</li>
179-
<li>Third Item</li>
279+
<li>アイテム1</li>
280+
<li>アイテム2</li>
281+
<li>アイテム3</li>
180282
</ol>
181283
</body>
182284
</html>\
183285
`}
184286
/>
185287

288+
### 表
289+
290+
表も書くことができます。`<tr>` タグで行を表し、`<td>` タグで列を表します。
291+
292+
:::note
293+
罫線などが表示されませんが、ちゃんと表は作れています。先程も触れたように、HTML では論理的な構造のみを表して見た目は CSS という別の言語で表現します。
294+
:::
295+
296+
```html
297+
<table>
298+
<tr>
299+
<td>1</td>
300+
<td>2</td>
301+
</tr>
302+
<tr>
303+
<td>3</td>
304+
<td>4</td>
305+
</tr>
306+
</table>
307+
```
308+
309+
<InteractiveCodeEditor
310+
language="html"
311+
defaultValue={`\
312+
<!DOCTYPE html>
313+
<html lang="ja">
314+
<head>
315+
<meta charset="UTF-8" />
316+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
317+
<title>Document</title>
318+
</head>
319+
<body>
320+
<table>
321+
<tr>
322+
<td>1</td>
323+
<td>2</td>
324+
</tr>
325+
<tr>
326+
<td>3</td>
327+
<td>4</td>
328+
</tr>
329+
</table>
330+
</body>
331+
</html>\
332+
`}
333+
/>
334+
186335
### リンク
187336

188337
リンクは次のように作れます。開始タグと終了タグの間に表示する文字を書いて、href 属性の中にリンク先の URL を記載します。
@@ -238,3 +387,7 @@ import InteractiveCodeEditor from "@site/src/components/InteractiveCodeEditor/In
238387
</html>\
239388
`}
240389
/>
390+
391+
他にも様々な記法があるので、自分で調べてみてください。HTML に関する情報は非常に豊富にあるので、すぐに見つかるはずです。
392+
393+
しかし、インターネット上には間違った情報や古い情報が非常に多いので、目的に合ったタグを見つけたら、詳細については[MDN](https://developer.mozilla.org/ja/)という Web サイトで確認することをおすすめします。このサイトには、すべてのタグの定義が詳細に書いてあります。

0 commit comments

Comments
 (0)