HTML/BODY

HEAD

HTML
BODY

ハイパーリンク

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要素の正しい使い方を理解し、効果的なウェブページを作成することが重要です。

HEAD

HTML
BODY

ハイパーリンク