BODY要素の基本

編集

BODY要素は、HTML文書の主要なコンテンツを含む部分です。この要素の中に、テキスト、画像、リンク、フォームなど、ウェブページに表示されるすべての内容が含まれます。BODY要素は、ユーザーがブラウザで直接目にする部分を構成します。

BODY要素の構文

編集

BODY要素は、通常以下のように記述されます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>BODY要素の例</title>
</head>
<body>
    <h1>こんにちは、世界!</h1>
    <p>これはHTML文書の例です。</p>
</body>
</html>

BODY要素に含まれる主要な要素

編集

BODY要素の中には、さまざまなHTML要素を含めることができます。以下に、一般的な要素の例を示します。

見出し要素
<h1>から<h6>までの要素を使用して、異なるレベルの見出しを定義します。
<h1>メイン見出し</h1>
<h2>サブ見出し</h2>
段落要素
<p>要素を使用して、段落を定義します。
<p>これは段落です。</p>
リンク要素
<a>要素を使用して、他のページやリソースへのハイパーリンクを作成します。
<a href="https://www.example.com">Example</a>
リスト要素
<ul>(順序なしリスト)および<ol>(順序付きリスト)要素とその中の<li>(リスト項目)要素を使用します。
<ul>
      <li>リスト項目1</li>
      <li>リスト項目2</li>
</ul>
画像要素
<img>要素を使用して、画像を埋め込みます。src属性で画像のURLを指定し、alt属性で画像の説明を提供します。
<img src="image.jpg" alt="サンプル画像">
フォーム要素
<form>要素とその内部の<input><textarea><button><select>などの要素を使用して、ユーザーからの入力を収集します。
<form action="/submit-form" method="post">
      <label for="name">名前:</label>
      <input type="text" id="name" name="name">
      <button type="submit">送信</button>
</form>

BODY要素の属性

編集

BODY要素には、さまざまなグローバル属性を使用してスタイルや動作を制御できます。

id属性
要素に一意の識別子を付与します。CSSやJavaScriptで要素を特定するのに使用されます。
<body id="main-body">
class属性
要素にクラス名を付与し、複数の要素に共通のスタイルを適用します。
<body class="content-body">
style属性
インラインCSSを使用して要素のスタイルを直接指定します。
<body style="background-color: lightblue;">

BODY要素の例

編集

以下は、さまざまな要素を含むBODY要素の具体的な例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>BODY要素の例</title>
</head>
<body>
    <header>
        <h1>私のウェブサイト</h1>
        <nav>
            <ul>
                <li><a href="#home">ホーム</a></li>
                <li><a href="#about">私について</a></li>
                <li><a href="#contact">お問い合わせ</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="home">
            <h2>ホームページ</h2>
            <p>ようこそ私のウェブサイトへ!</p>
            <img src="welcome.jpg" alt="ウェルカム画像">
        </section>
        <section id="about">
            <h2>私について</h2>
            <p>このサイトについての情報です。</p>
        </section>
        <section id="contact">
            <h2>お問い合わせ</h2>
            <form action="/submit-form" method="post">
                <label for="name">名前:</label>
                <input type="text" id="name" name="name">
                <label for="message">メッセージ:</label>
                <textarea id="message" name="message"></textarea>
                <button type="submit">送信</button>
            </form>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 私のウェブサイト</p>
    </footer>
</body>
</html>

まとめ

編集

BODY要素は、HTML文書の主要なコンテンツを定義するための最も重要な要素です。テキスト、画像、リンク、フォームなど、ユーザーが直接目にするすべてのコンテンツが含まれます。BODY要素の正しい使い方を理解し、効果的なウェブページを作成することが重要です。