column

ITコラム

Webpage layout

プログラミングノウハウ

2016.12.13

HTML5【 レイアウト 】4~headerとfooter

今回は、HTML5から新たに加わったheader要素とfooter要素についてまとめたいと思います。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。


 

1.header要素

 
下のようなレイアウトのページで話を進めます。
HTML5 レイアウト header footer プログラマカレッジ

ヘッダ部分はこのような表示です。
HTML5 レイアウト header footer プログラマカレッジ

このHTMLは下のようになっています。

<header>
<h1>HTML5 【 レイアウト 】</h1>
<p><article> <aside> <section> <nav>の使い方</p>
</header>

ヘッダとしてまとめたい部分を<header>と</header>で囲んでいます。

以前は「<div id=”header”>(ヘッダ部分)</div>」というように<div>を使ったりしていましたが、この新要素ができたおかげで、特に意識しなくてもヘッダとして認識できるようになり、CSSの指定もしやすくなりました。

<header>は、ページ全体のヘッダ部分だけでなく、セクションのヘッダにも使えます。
各セクションで、導入部分や前置き的な部分は<header>要素でグループ化できます。

※IE8まではHTML5をサポートしていないので、HTML5の新要素を使う場合は「IE8までのブラウザにHTML5の新要素を理解させるオープンソース(Google codeが提供)」のリンクを貼る必要があります。下記を<head> ~ </head>の中に入れるだけですが、忘れないように気を付けましょう。

[if lt IE 9] と [endif] で囲まれていますが、これはIEだけの仕様で「もしIE9未満だった場合にのみ実行する」という意味です。

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

▲目次へ戻る

 

2.footer要素

 
さきほどのレイアウトのフッタ部分はこのような表示になっています。
HTML5 レイアウト header footer プログラマカレッジ

このHTMLは下の通りです。

<footer>
Copyright ©HTML5 【 レイアウト 】 All Rights Reserved.
</footer>

フッタとしてまとめたい部分を<footer>と</footer>で囲んでいます。
Webページのフッタ部分は、ヘッダと同様に以前は<div id=”footer”></div>というように<div>を使ったりしていましたが、HTML5から<footer>要素が使えるようになったので、書きやすくなりました。

●footer要素の内容
<footer>には、コピーライト(著作権情報)、関連リンク、制作者の名前、索引、付録データ、使用許諾、ライセンスなどが入ります。コンテンツ全体が索引でできているページなどは、全体が <footer>要素でもOKです。

●footer要素の位置
一般的にはページの最後や、セクション内の1番最後に書きますが、配置位置に特に決まりはなく、先頭に配置してもOKです。

※footer要素もHTML5の新要素ですので、header要素と同様に、HTML5をサポートしていないIE8までのブラウザ対策を忘れないようにしましょう。下記を<head> ~ </head>の中に書き込みます(意味は、もしIE9未満だったら、HTML5の新要素対応のためのファイルを読み込むという指示です)。

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

▲目次へ戻る

 

3.address要素の新ルール

 
さきほどのフッタ部分にはアドレスの表示はありませんでしたが、下のように、<footer>の中に<address>を入れる場合もあると思います。

<footer>
Copyright ©HTML5 【 レイアウト 】 All Rights Reserved.
<address>
by : <a href="https://programmercollege.jp/" target="_blank">プログラミング入門レシピ</a>
</address>
</footer>

address要素はHTML5の新要素ではありませんが、HTML5から「そのHTML文書や文書のセクションに関する連絡先」以外の内容は入れてはいけないルールとなりました。住所のための要素ではないということです。
以前は、住所や更新日時などを <address> ~ </address> 内に入れることも多くありましたが、今後は連絡先以外は <address> ~ </address> の外に出すようにしましょう。

▲目次へ戻る

無料説明会

SHARE

最新記事

無料説明会に参加してみる

INTERNOUS,inc. All rights reserved.

無料オンライン説明会へ