1. 【ページの構成編】"ド初心者"でも作れる!簡単にできるホームページの作り方パート4

【ページの構成編】"ド初心者"でも作れる!簡単にできるホームページの作り方パート4

 前回は、実際にコードを書いてみるという体験を通して、ホームページがどういうものなのかということを体で学んだと思います。今回は、ホームページの構成、実際にホームページというのはどのように構成されているのか、について見ていきたいと思います。

 また、今回からHTML5を中心に説明させていただきます。

1.全体的なホームページの構成

 パート1で紹介した通り、ホームページは簡単に言うと以下の3つのセクションに分かれています。

 ・ヘッダー
 ・フッター
 ・内容(mainのセクション)

 ですが、内容(mainのセクション)を細かく見ていくと、メニューの部分とコンテンツの部分で更に別れます。そして、HTML5ではそれらに対応したタグというものが存在します。(それ以前のバージョンでは対応したタグが存在しませんでした。)

 ホームページというのは、これらの要素をブロックのように組み合わせることにより構成されています。それでは、以下でそれぞれのセクションについて詳しく見ていきましょう。

2.ヘッダー部分

 ヘッダーというのはホームページの最上部にあるセクションで、どのページに移動しても、どこのサイトを開いているかをユーザーに認識させる役割があります。<header>というタグで表現され、そのタグ内に企業や団体のロゴを設置したりします。下の画像の赤く囲われた部分がそうです。
 ここで注意したいのが<head>タグと混同しやすいことです。<head>というのはホームページの内容には関与せず、後々説明するCSSやJavaScriptなどの挿入や、ホームページ全体の情報についてまとめて表記する部分です。

3.フッター部分

 フッターというのは、ヘッダーとは逆にホームページの最下部にあるセクションで、サイトマップやコピーライト、企業情報などを記載します。<footer>というタグで表現され、サイトマップのリンクなどを設置します。下の画像の赤く囲ってある部分ですね。
 ヘッダーほどはインパクトを与えない部分ではありますが、ここが丁寧に作ってあったりユーザー目線で欲しい機能が一通り揃っていると、ユーザーの気持ちをグッと掴むことができます。

4.内容の部分

 内容の部分は、メニューとコンテンツの2つに細分化されます。メニューはその名の通り各ページのリンクを、コンテンツはメインとなる記事について書いていくセクションになります。

 それらは<nav>と<article>のタグで表現されます。これら2つにおいて注意しなければならないのは、書く前に具体的内容についてある程度固めていかなければならないということです。


 以上の3つがホームページを構成する核となる部品となります。これらをしっかり押さえてちゃんとしたホームページを作れるようになっていきましょう。

 次回はHTML5のタグについて詳しく説明していきます

U-NOTEをフォローしておすすめ記事を購読しよう
この記事を報告する