[17-5] フッタを表す<footer>と、連絡先をまとめる<address>

今回はフッタを表す<footer>と、連絡先をまとめる<address>を使ってみましょう。

使用する要素 <footer> 〜 </footer>
<address> 〜 </address>

本日のサンプルは[ 17-1 ]と同じです

★サンプルは [ 17-1 ] と同じです。まだ見てない方はこちらからどうぞ。
★このサンプル画像をクリックすると、HTMLファイルが開きます。
★開いたHTMLのソースを見てもらえばOKですが、下記から一式をzipでダウンロードできます。
→本日のサンプル(sample17set.zip (3k))をダウンロード

★ブラウザでHTMLやCSSのソースを見るには…「ほんっとにはじめてのHTML-[14-1] ブラウザでソースを見る」をご覧ください

<footer>要素は、フッタを表す

まず<footer>。サンプルページのフッタ部分はコレ↓ このソースは下記のようになっています。

<footer>
Copyright © <a href="http://honttoni.blog74.fc2.com/" target="_blank">ほんっとにはじめてのHTML</a> All Rights Reserved.
<address>
by : <a href="http://honttoni.blog74.fc2.com/blog-entry-67.html" target="_blank">yuki★hata</a>
</address>
</footer>

フッタとしてまとめたい部分を<footer>と</footer>で囲んでいます。

ウェブページのフッタ部分は以前は<div id="footer"></div>というふうに囲んでいましたが、HTML5から<footer>要素が出来たので、記述が簡単になりました。

★ただし、IE8まではHTML5をサポートしていませんので、前にもやった「IE8までのブラウザにHTML5の新要素を理解させるオープンソース」のリンクを貼る必要があります。「Google code」提供。下記を<head>〜</head>の中にれます。

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

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

<footer>に入る内容と、配置する場所

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

普通はページの最後や、セクション内の1番最後に置きますが、配置位置は決まってなくて、先頭に配置しても良いんです。

前に紹介したブログの場合は、このように ↓<article>の先頭に<footer>を置いてます。ここにはコメントを書く人の名前や書いた時間が記入されるから<footer>を使っていますよ。

<article>
	<header><h1>ブログ記事のタイトル</h1><p><time pubdate datetime="○"></time></p></header>
	<p>ブログ記事の本文</p>
	<section>
		<h1>コメント</h1>
			<article>
			<footer><p>名前</p><p><time pubdate datetime="○"></time></p></footer>
			<p>コメントの本文</p>
			</article>
			<article>
			<footer><p>名前</p><p><time pubdate datetime="○"></time></p></footer>
			<p>コメントの本文</p>
			</article>
	</section>
</article>

上のソースで<time>という要素が使用されています。
これもHTML5からの新しい要素で「ブラウザや検索ロボットに正確な日時を読み取らせる」ことを目的として作られた要素です。上記の例ではコメントの公開日時を記述する役目です。
<time>要素については後日まとめます。

<time>要素について、記事を掲載しました。 [25] 新しい要素<time>で正確な日時を記述しようをご覧ください。(20011.09.20追記)

<address>要素は連絡先を表す

<footer>の中に、<address>要素が入っています。
<address>要素はHTML5から「そのHTML文書(または文書のセクション)に関する連絡先」以外の内容は入れてはいけない事になったそうです。「住所」のための要素ではないということです。
以前は、住所や更新日時など<address>内に入れてましたが、「連絡先」しか入れてはいけなくなったらしいので、外に出しちゃいましょう。

<footer>
Copyright © <a href="http://honttoni.blog74.fc2.com/" target="_blank">ほんっとにはじめてのHTML</a> All Rights Reserved.
<address>
by : <a href="http://honttoni.blog74.fc2.com/blog-entry-67.html" target="_blank">yuki★hata</a>
</address>
</footer>

このサンプルでは、本ブログのPROFILE記事にリンクさせてます。メールフォームを設置してますので連絡先になってますよね。
メールフォームのページのほかに、問合せページ、企業サイトなら会社案内(メールアドレスや電話番号がある)ページ等にリンクさせます。

次回予告

いかがでしたか? 今回でヘッダ・フッタに関わる要素は終わりです。

次回から、またHTML要素からちょっと離れちゃいますが、CSSを使ってみましょう。
今回までのサンプルHTMLを、CSS3で下のプレビューのようにレイアウトしてみましょう。

CSS3から、画期的な「ボックスの角を丸くする」「ボックスやテキストにシャドウをつける」などが使えるようになりました。
これに以前紹介したグラーデーションも加えると、画像なしでも見栄えのするページレイアウトができます。
グラデーションは「線形グラデーション」しか紹介していませんでしたが、「円形グラデーション」もやってみましょう。

来週から4回ぐらいに分けて掲載する予定です。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
03 | 2017/04 | 05
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 - - - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.