HTMLでウェブサイトを作成する

最終更新： 03/03/2025

1分未満

HTML（HyperText Markup Language）は、ウェブページを作成するための基本的な言語であり、ウェブサイトの構造を定義するために使用されます。この記事では、HTMLの基本的な概念から始め、実際にウェブサイトを作成するために必要な手順について説明します。

1. HTMLの基本構造

HTML文書は、以下の基本的な構造を持っています。

html
html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ウェブページのタイトルtitle>
head>
<body>
  
body>
html>

: この行は、HTML5文書を定義します。
: ドキュメントが日本語であることを示すタグです。
: メタデータやタイトル、CSSなどが含まれる部分です。
: 実際に表示されるコンテンツが含まれる部分です。

2. 基本的なタグ

HTMLの基本的なタグには、いくつかの重要なタグがあります。

見出しタグ

見出しタグ（

〜

）は、コンテンツを段階的に整理するために使用します。

が最も重要で、

が最も小さな見出しになります。

html
<h1>ウェブサイトのタイトルh1>
<h2>サブタイトルh2>
<h3>さらに詳しくh3>

段落タグ

段落を定義するために使用するタグは

です。

html
<p>これは段落の例です。p>

リストタグ

リストを作成するために、順不同リスト（

タグで囲みます。

順不同リストの例：
```
html
<ul>
  <li>項目1li>
  <li>項目2li>
  <li>項目3li>
ul>
```
順序付きリストの例：
```
html
<ol>
  <li>最初の項目li>
  <li>次の項目li>
  <li>最後の項目li>
ol>
```
リンクタグ

リンクを作成するためにはタグを使用します。リンク先のURLはhref属性で指定します。
```
html
<a href="https://www.example.com">こちらをクリックa>
```
画像タグ

画像をウェブページに挿入するために使用するタグはです。src属性で画像ファイルのパスを指定します。
```
html
<img src="image.jpg" alt="画像の説明">
```
3. フォームの作成

ウェブページにフォームを追加することができます。フォームタグ（
）を使用して、ユーザーから情報を収集します。以下は簡単なフォームの例です。
```
html
<form action="/submit" method="POST">
  <label for="name">名前:label>
  <input type="text" id="name" name="name">
  <br>
  <label for="email">メールアドレス:label>
  <input type="email" id="email" name="email">
  <br>
  <input type="submit" value="送信">
form>
```
- : フォームの入力フィールドにラベルを付けるために使用します。
- : ユーザーが入力できるフォームのフィールドを定義します。
- type属性: 入力フィールドの種類を指定します（例えば、textやemail）。
- : フォームの開始タグです。action属性は送信先のURLを指定し、method属性は送信方法を指定します。
4. CSSの基本

HTMLだけでは、ウェブページは非常にシンプルで地味に見えます。スタイルを加えるためにはCSS（Cascading Style Sheets）を使用します。CSSは、HTML要素の見た目を定義するための言語です。

HTML内に直接CSSを記述する方法として、

HTMLでウェブサイトを作成する

1. HTMLの基本構造

2. 基本的なタグ

見出しタグ

が最も重要で、
が最も小さな見出しになります。

html
`<h1>ウェブサイトのタイトルh1> <h2>サブタイトルh2> <h3>さらに詳しくh3>`

段落タグ

段落を定義するために使用するタグは
です。

html
`<p>これは段落の例です。p>`

が最も小さな見出しになります。

html
`<h1>ウェブサイトのタイトルh1> <h2>サブタイトルh2> <h3>さらに詳しくh3>`

段落タグ

リストタグ

リンクタグ

画像タグ

3. フォームの作成

4. CSSの基本

1. HTMLの基本構造

2. 基本的なタグ

見出しタグ

が最も重要で、 が最も小さな見出しになります。 htmlCopyEdit<h1>ウェブサイトのタイトルh1> <h2>サブタイトルh2> <h3>さらに詳しくh3> 段落タグ 段落を定義するために使用するタグは です。 htmlCopyEdit<p>これは段落の例です。p>

が最も小さな見出しになります。 htmlCopyEdit<h1>ウェブサイトのタイトルh1> <h2>サブタイトルh2> <h3>さらに詳しくh3>

段落タグ

リストタグ

リンクタグ

画像タグ

3. フォームの作成

4. CSSの基本

が最も重要で、
が最も小さな見出しになります。

html
`<h1>ウェブサイトのタイトルh1> <h2>サブタイトルh2> <h3>さらに詳しくh3>`

段落タグ

段落を定義するために使用するタグは
です。

html
`<p>これは段落の例です。p>`

が最も小さな見出しになります。

html
`<h1>ウェブサイトのタイトルh1> <h2>サブタイトルh2> <h3>さらに詳しくh3>`