bodyタグの使い方

`<body>`タグとは？

<body>タグは、HTMLドキュメントの本体を定義するタグです。<body>タグ内に、ページに表示される全てのコンテンツ（テキスト、画像、リンク、フォーム、など）を含めます。

`<body>`タグの基本構造

以下は、HTMLドキュメントの基本的な構造です。

<!DOCTYPE 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>

`<body>`タグ内でよく使われる要素

<body>タグ内には、さまざまなHTML要素を配置することができます。以下に、よく使われる要素をいくつか紹介します。

1. 見出し（Headings）

見出し要素は、<h1>から<h6>まであり、テキストの重要度を示します。

<h1>これは見出し1です</h1>
<h2>これは見出し2です</h2>
<h3>これは見出し3です</h3>

2. 段落（Paragraphs）

段落要素は、テキストを段落ごとに分けます。

<p>これは段落1です。</p>
<p>これは段落2です。</p>

3. 画像（Images）

画像要素は、ページに画像を表示します。

<img src="image.jpg" alt="説明文">

4. リンク（Links）

リンク要素は、他のページやリソースへのリンクを作成します。

<a href="https://www.example.com">Exampleサイトへ</a>

5. リスト（Lists）

リスト要素は、順序付きリスト（<ol>）や順序なしリスト（<ul>）を作成します。

<ul>
    <li>アイテム1</li>
    <li>アイテム2</li>
    <li>アイテム3</li>
</ul>

<ol>
    <li>アイテム1</li>
    <li>アイテム2</li>
    <li>アイテム3</li>
</ol>

6. テーブル（Tables）

テーブル要素は、データを表形式で表示します。

<table>
    <tr>
        <th>ヘッダー1</th>
        <th>ヘッダー2</th>
    </tr>
    <tr>
        <td>データ1</td>
        <td>データ2</td>
    </tr>
</table>

7. フォーム（Forms）

フォーム要素は、ユーザーがデータを入力し、送信するためのインターフェースを作成します。

<form action="/submit" method="post">
    <label for="name">名前:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="送信">
</form>

サンプルコード

以下は、これまで紹介した要素を含むサンプルHTMLです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>サンプルページ</title>
</head>
<body>
    <h1>私のウェブページへようこそ</h1>
    <p>こんにちは！これはサンプルページです。</p>
    
    <h2>私について</h2>
    <p>私はウェブ開発者です。</p>
    
    <h2>プロジェクト</h2>
    <ul>
        <li>プロジェクト1</li>
        <li>プロジェクト2</li>
        <li>プロジェクト3</li>
    </ul>
    
    <h2>ギャラリー</h2>
    <img src="example.jpg" alt="サンプル画像">
    
    <h2>リンク</h2>
    <a href="https://www.example.com">Exampleサイトへ</a>
    
    <h2>お問い合わせ</h2>
    <form action="/submit" method="post">
        <label for="name">名前:</label>
        <input type="text" id="name" name="name">
        <input type="submit" value="送信">
    </form>
</body>
</html>

まとめ

<body>タグは、HTMLドキュメントの本体部分を定義します。
ページに表示される全てのコンテンツは、<body>タグ内に記述します。
見出し、段落、画像、リンク、リスト、テーブル、フォームなど、さまざまな要素を含めることができます。

これがHTMLの<body>タグの基本的な使い方です。