HTML/BODY
< HTML
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>© 2024 私のウェブサイト</p> </footer> </body> </html>
まとめ[編集]
BODY要素は、HTML文書の主要なコンテンツを定義するための最も重要な要素です。テキスト、画像、リンク、フォームなど、ユーザーが直接目にするすべてのコンテンツが含まれます。BODY要素の正しい使い方を理解し、効果的なウェブページを作成することが重要です。