こんにちは、ユキです。
新卒で大企業のSIerに入社し、現在は大手の業務システムWebアプリケーションを開発しています。
body要素っていつ使うの？
文書の内容を記述するときに使うよ！
結論からいうと、body要素は文書を記述するときに使います。
今回はbody要素についてと使い方について解説していきます。
コーヒーでも飲みながらゆっくり読んでみてください。
スポンサーリンク
１： HTML5について
HTML5とは、HTMLバージョン5のことです。
過去HTMLは少しずつ改訂されていき、2014年にHTML5が発表されました。
みなさんが普段聞いてるHTMLはHTML5と同じ意味です。
ホームページを作るならHTML5といわれるほど、過去のHTML4と比べると格段に機能が多くなりました。
スマホ対応が簡単になったり、アニメーションが作れたりします。
つまりHTML5は、「今まで難しかった処理を簡単にしてくれた」ものというわけです。
２： body要素とは
body要素とは、文書を記述するときに必ず使用する要素です。
区分化ルートともいい、HTML文書の中で一つだけ設置することができます。
bodyという名の表す通りに、HTML文書の体を構築する部分です。これがないとHTMLでは何も表現できなくなってしまいます。
h1要素やp要素などの子要素を持つ親要素として子要素をレンダリングします。親がいないと子どもはできないように、body要素がないとh1要素やp要素は存在することができないのです。
まさに要素の中の要素、親分とも呼べる存在でしょう。
bodyはDOMでも参照することができ、document.bodyで操作することができます。これはJavaScriptの知識がないとできないことなので、初心者には少し難しい技術となるでしょう。
また、bodyはオプション属性もたくさん持っています。
代表的なものを表に例としてあげます。
| 属性 | 機能 |
|---|---|
| alink | クリックされた際のリンクテキスト色を指定 |
| link | クリックされていないリンクテキスト色を指定 |
| vlink | 訪問済リンクのテキスト色を指定 |
| text | テキスト色を指定 |
| bgcolor | 背景色を指定 |
| background | 背景画像を指定。アニメーションGIFファイルも指定可能 |
３： body要素の使い方
<body link="blue"> <h1>ユキのIT教室</h1> <p>初心者に優しいIT情報を発信します。</p>
</body>body要素は親要素としてh1要素やp要素などの子要素を囲むようにして記述します。
h1要素はこの時見出しとして使用できます。自身のWebサイトのタイトルなどをここに記述するようしましょう。
p要素は段落として文章を表現することができます。p要素をもう一つ足した場合は段落が一つ下がり、読みやすい文章を作ることができます。
属性にはlink属性を指定しました。これでクリックされていないリンクテキストは青色として表示されるようになります。
このようにbody要素は各要素を組み合わせてサイトの根幹となるコンテンツを作成することができる要素だと認識してください。
まとめ
今回はbody要素についてと使い方について解説しました。
body要素は文書を記述するときに必ず使用する要素です。これがないと今後使用するa要素やimg要素も使えないので忘れずに記述するようにしましょう。
これからもユキのIT教室では初心者・未経験者向けのIT情報を発信していくのでよろしくお願いします。
以上、ユキでした！
スポンサーリンク
