初心者向け！HTMLの基礎＜構造編＞

こんにちは！にんじんです🥕

本日は、HTMLのbody要素について書いていきたいと思います！

body要素
おわりに

body要素

<body>〜</body>

body要素内に記述した見出しや文章、画像などが実際のWEBサイト上に表示されます。

WEBサイトの本体で、コードが1番長くなる部分です。

HTMLの基本構造については「初心者向け！HTMLの基礎＜構造編＞」をご覧ください！

bodyタグ内の構造

head要素がWEBページの情報を伝えるエリアだったのに対し、body要素は、WEBページの内容を表示するエリアになります。

私たちがWEBサイトとして見ているのは全て<body>タグ内に書かれています。

代表的なレイアウト

body要素の中は大きく「header要素」「main要素」「footer要素」の3つに分けることができます。

今回は「header要素」と「footer要素」についてまとめていきます。

header要素

ヘッダーはロゴマークやナビゲーションメニューなど、ページの共通部分になります。

視線が最初にいく左上に「ロゴマーク」や「社名」などを配置するデザインが一般的で、サイトの第一印象にも影響します。

ヘッダーには、多くのWEBサイトでメニューや目次などが設定されており、見たいページや目的の箇所にすぐに移動できるようになっています。

header要素のサンプルコード

ヘッダー部分の簡単なサンプルコードを書いてみました。

<header>
 <h1><img src="../img/logo.png" alt="にんじん奮闘日記"></h1>
 <nav>
  <ul>
   <li><a href="about.html">概要</a></li>
   <li><a href="services.html">サービス</a></li>
   <li><a href="news.html">お知らせ</a></li>
   <li><a href="contact.html">お問い合わせ</a></li>
  </ul>
 </nav>
</header>

このコードをWEBサイト上で表示すると、以下のようになります。

HTMLのみでCSSを指定していないので装飾は何もない状態です。

(注釈)CSSとは、文字の色や大きさなど、デザインやレイアウトを設定する言語です。

nav要素

<nav>〜</nav>

目次やメニューリンクなど、WEBサイトの案内メニューのことを「ナビゲーション」と呼びます。

グローバルナビゲーションやページ内リンク、他ページへのリンクをまとめた部分を<nav>タグで囲うことで、そこがナビゲーションであることを示すことができます。

ヘッダーやフッターなど共通エリアに表示しておくと、WEBサイト内のどこからでもページを移動できます。

footer要素

フッターもヘッダー同様、WEBサイトの共通部分です。

ロゴマークやナビゲーションメニュー、住所や連絡先を掲載することが多いです。

ほかにも、お問い合わせ先、サイトマップ、コピーライト情報などがよく掲載されます。

footer要素のサンプルコード

簡単なフッターのサンプルコードをご紹介します。

<footer>
 <div>
  <img src="../img/logo.png" alt="にんじん奮闘日記">
 </div>
 <nav>
　 <ul class="footer-menu">
　  <li><a href="index.html">ホーム</a></li>
　  <li><a href="about.html">概要</a></li>
  　<li><a href="services.html">サービス</a></li>
  　<li><a href="news.html">お知らせ</a></li>
  　<li><a href="contact.html">お問い合わせ</a></li>
 　</ul>
 </nav>
 <div class="copyright">
　 <p>© 2025 コピーライト情報</p>
 </div>
</footer>

このコードをWEBサイト上で表示するとこのようになります。