「bodyタグってなんだろう」や「bodyタグはどうやって使うの」と悩んでいませんか？
ここでは、bodyタグの基本的な使い方を初心者に分かりやすく解説します。
ホームページは、bodyタグで囲った内容が表示されます。
ここでは、bodyタグのことを詳しくお伝えするので、ぜひ最後までご覧ください。
■ 【目次】このページを読んで分かること
- bodyタグの基本知識
- bodyタグの使い方と書き方
- bodyタグの属性
- bodyタグとSEO対策の関係
- bodyタグに関するよくある質問（FAQ）
- 【まとめ】bodyタグとは
|
bodyタグの基本知識
まずは、bodyタグの基本知識からお伝えします。
bodyタグとは
bodyタグは、ホームページの本文を表示するためのタグです。
ホームページのソースの中で、bodyタグの中に書いたものが、実際に画面に表示されます。
bodyタグを書く場所
bodyタグは、headタグの後に書きます。
なお、headタグは、ホームページの見えない部分にあり、ホームページの情報や設定を書く場所です。
そして、headタグの後に bodyタグを書いて、ホームページに表示したい部分をすべて bodyタグの中に書きます。
bodyタグの使い方と書き方
ここでは、bodyタグの使い方と書き方をお伝えします。
bodyタグの書き方
bodyタグの中に書いた情報は、ホームページに表示されます。
そのため、下記のように、見出しや文章、画像など、ホームページに表示したいすべての情報を書きます。
<!DOCTYPE html>
<html>
<head>
<title>私のホームページ</title>
</head>
<body>
<h1>私のホームページへようこそ！</h1>
<p>ここでは、私の好きなことについて紹介します。</p>
<img src="image.jpg" alt="素敵な景色">
<p>これは、私が旅行で撮った写真です。</p>
</body>
</html>
|
bodyタグの中に書いた情報がホームページに表示されるため、下記の情報が画面上に表示されます。
- <h1>：大きな見出しです。「私のホームページへようこそ！」と表示されます。
- <p>：段落です。文章をまとめるために使います。「ここでは、私の好きなことについて紹介します。」と「これは、私が旅行で撮った写真です。」という文章が表示されます。
- <img>：画像を表示するためのタグです。「image.jpg」というファイルを表示し、画像が見えないときには「素敵な景色」と表示されます。
bodyタグの中に、このような情報を順番に書くことで、ホームページの内容が決まります。
bodyタグを使って、ホームページに見せたい内容をすべて書くようにしましょう。
bodyタグの属性
bodyタグには、いくつかの属性を追加して、ホームページの見た目や動きを変えることができます。
ここでは、bodyタグの属性について、お伝えします。
style属性
style属性を使うと、bodyタグの中のすべての要素にスタイルをつけることができます。
たとえば、背景色を変えることができます。
<body style="background-color: lightblue;">
<h1>こんにちは！</h1>
<p>これはサンプルページです。</p>
</body>
|
この例では、ホームページの背景色が、「lightblue（薄い青色）」になります。
onload属性
onload属性を使うと、ホームページが読み込まれたときに何かを実行することができます。
たとえば、メッセージを表示することができます。
<body onload="alert('ホームページが読み込まれました！')">
<h1>こんにちは！</h1>
<p>これはサンプルページです。</p>
</body>
|
この例では、ホームページが読み込まれたときに「ホームページが読み込まれました！」というメッセージが表示されます。
class属性と id属性
class属性と id属性を使うと、特定の要素にスタイルをつけたり、JavaScriptで操作したりすることができます。
具体的には、class属性は複数の要素に同じスタイルを適用するときに使って、id属性は特定の要素にだけ適用します。
<body class="main-body" id="home-page">
<h1>こんにちは！</h1>
<p>これはサンプルページです。</p>
</body>
|
この例では、bodyタグに「main-body」というクラスと「home-page」というIDがついています。
スタイルシートやJavaScriptで、これらを使って特定の操作を行うことができます。
bodyタグとSEO対策の関係
SEO対策とは、ホームページを検索エンジンの上位に表示させるために行う方法のことです。
ここでは、bodyタグとSEO対策の関係について、お伝えします。
重要なキーワードを含めること
bodyタグの中に書く内容には、ホームページのテーマに関係する重要なキーワードを入れることが大切です。
たとえば、ペットについてのホームページなら、「犬」「猫」「ペット」などの言葉を使います。
これによって、検索エンジンが内容を理解しやすくなり、上位に表示されやすくなります。
<body>
<h1>犬と猫の育て方</h1>
<p>このホームページでは、犬と猫の育て方について詳しく紹介します。</p>
</body>
|
見出しを使うこと
見出しタグ（h1、h2、h3など）を使うと、内容が整理されて読みやすくなります。
検索エンジンも見出しを重視するので、重要なキーワードを見出しに使うと良いです。
<body>
<h1>犬の飼い方</h1>
<h2>犬の食事</h2>
<p>犬にはバランスの良い食事が必要です。</p>
</body>
|
画像に alt属性を使うこと
bodyタグの中に画像を入れるときは、imgタグにalt属性をつけると良いです。
alt属性は、画像が表示されないときに、代わりに表示されるテキストです。
検索エンジンはこのテキストを読んで、画像の内容を理解します。
<body>
<h1>私のペット</h1>
<img src="dog.jpg" alt="かわいい犬">
</body>
|
モバイル対応にすること
ホームページがスマートフォンやタブレットでも見やすいようにすることも大切です。
これを「モバイル対応」といいます。
検索エンジンは、モバイル対応のホームページを優先して表示します。
たとえば、ホームページの文字サイズは、16px にすると良いです。
<body style="font-size:16px;">
<h1>ペットの世話</h1>
<p>犬と猫の世話についての情報を紹介します。</p>
</body>
|
bodyタグに関するよくある質問（FAQ）
最後に、bodyタグに関するよくある質問（FAQ）をご紹介します。
Q1: bodyタグって何ですか？
bodyタグは、ホームページの本文を表示するためのタグです。これがないと、ホームページの内容が表示されません。
Q2: bodyタグはどこに書きますか？
bodyタグは、headタグのあとに書きます。ホームページのソースの中で、実際に画面に表示される部分をすべて含みます。
Q3: bodyタグの中には何を書けますか？
bodyタグの中には、見出しや文章、画像、リンクなど、ホームページに表示したいすべての情報を書けます。
Q4: style属性って何ですか？
style属性は、bodyタグの中の内容全てにスタイル（見た目）をつけるためのものです。たとえば、背景色を変えたり、文字の大きさを変えたりできます。
Q5: bodyタグの中でエラーが出たらどうしますか？
まずは、bodyタグの始まりと終わりが正しく書かれているかを確認します。次に、属性や内容が正しく書かれているかチェックします。
Q6: bodyタグを使うとSEOにいい影響がありますか？
はい、正しい使い方をするとSEOに良い影響があります。重要なキーワードを使ったり、見出しを上手に使うことで、検索エンジンが内容を理解しやすくなります。
Q7: どのブラウザでも同じように見えますか？
ほとんどのブラウザで同じように見えますが、ブラウザごとの違いもあります。いくつかのブラウザでテストして確認することが大切です。
Q8: bodyタグに他の属性を追加できますか？
はい、いろいろな属性を追加できます。たとえば、onload属性を使ってホームページが読み込まれたときに何かを実行させることもできます。
【まとめ】bodyタグとは
bodyタグとは？基本的な使い方を初心者に分かりやすく解説の内容は、いかがでしたでしょうか？
bodyタグは、ホームページの本文を表示するためのタグです。
ホームページのソースの中で、bodyタグの中に書いたものが、実際に画面に表示されます。
基本的には、「bodyタグで囲った内容がホームページ上に表示される」ということだけ覚えておけば問題はありません。
大切なことは、どのような情報をホームページに掲載するのか、ということなので、HTMLタグを使って、しっかりとホームページを作っていくようにしましょう！
