<footer>タグの解説
<footer>は、自身が所属するセクションのフッターとなるグループを表します。よく使われる場所として、ページ最下部にあたる</body>の直前や、<article>の文末が挙げられます。
例えば、ウェブページ最下部に<div id="footer">のような領域を作ってコピーライトを表記している場合に、これを置き換えることができます。また、メインコンテンツが置かれたセクションの最後に<footer>を用いて、その文章の著者や連絡先などを記載することができます。
<footer>は、ページ全体の最後に置かれるイメージがありますが、セクショニング・コンテンツを用いてアウトラインを正確に管理できていれば、設置する位置や個数に制限はありません。
<footer>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- この要素はセクショニング・コンテンツではないので、アウトラインに影響を与えません。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることは適切ではありません。
<footer>要素に指定できる属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<footer>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。<footer>は<body>要素の中に置かれます。それがコンテンツやセクションのフッターに値する内容であれば、階層化したセクションの子要素に配置することも可能です。
<body>
<footer>
// コンテンツのフッターに値する内容
</footer>
</body>
以下の例は、ページの最下部にサイト全体のフッターにあたる情報を記述したものです。
<body>
<header>
<h1>サイト名</h1>
<h2>このサイトのキャッチコピー</h2>
<nav>
<ul>
<li><a href="home">ホーム</a></li>
<li><a href="blog">ブログ</a></li>
<li><a href="contents">コンテンツ</a></li>
<li><a href="sitemap">サイトマップ</a></li>
<li><a href="contact">コンタクト</a></li>
</ul>
</nav>
</header>
<main>
<h1>コンテンツの見出し</h1>
<p>コンテンツの内容。コンテンツの内容。</p>
<p>コンテンツの内容。コンテンツの内容。</p>
</main>
<footer>
<small>コピーライト</small>
</footer>
</body>
続いて、<article>の中に<footer>を用いたサンプルです。これによりメインコンテンツの構造が明確になり、情報の意味合いが強化されます。
<article>
<header>
<h1>コンテンツの見出し</h1>
<p>序章、概要、キャッチフレーズ。</p>
</header>
<section>
<h2>セクションの見出し</h2>
<p>コンテンツの内容。コンテンツの内容。</p>
<p>コンテンツの内容。コンテンツの内容。</p>
</section>
<section>
<h2>セクションの見出し</h2>
<p>コンテンツの内容。コンテンツの内容。</p>
<p>コンテンツの内容。コンテンツの内容。</p>
</section>
<footer>
<time datetime="2045-10-10" pubdate>2045年10月10日</time>
<cite><a href="sns-url">著者</a></cite>
</footer>
</article>
上記を組み合わせて、クラス名などを本番環境に近づけてみましょう。以下のようにセクショニング・コンテンツを使ってアウトラインを明確にした場合、ひとつのページに複数の<footer>を配置することができます。
<body>
<header class="site-header">
<div class="container">
<div class="site-logo">
<img src="/" alt="Site Name">
</div>
<div class="search-form">
<form action="/search">
<input type="text" name="q" value="サイト内">
<button type="submit" name="s">検索</button>
</form>
</div>
</div><!--/=== container ===-->
<nav class="header-nav">
<ul>
<li><a href="home">ホーム</a></li>
<li><a href="blog">ブログ</a></li>
<li><a href="contents">コンテンツ</a></li>
<li><a href="sitemap">サイトマップ</a></li>
<li><a href="contact">コンタクト</a></li>
</ul>
</nav><!--/=== header-nav ===-->
</header><!--/=== site-header ===-->
<div class="contents-layout">
<main class="main-contents">
<header class="post-header">
<h1>コンテンツの見出し</h1>
<div class="post-term">
<p class="category"><a href="category">Category</a></p>
<p class="tag"><a href="tag">tag</a></p>
</div>
<figure class="post-image">
<img src="/images/file" width="800px" height="420px">
<figcaption>©picture copyright.</figcaption>
</figure>
</header><!--/=== post-header ===-->
<div class="post-contnet">
<h2>コンテンツの見出し</h2>
<p>コンテンツの内容。コンテンツの内容。</p>
<p>コンテンツの内容。コンテンツの内容。</p>
<h2>コンテンツの見出し</h2>
<p>コンテンツの内容。コンテンツの内容。</p>
<p>コンテンツの内容。コンテンツの内容。</p>
<h2>コンテンツの見出し</h2>
<p>コンテンツの内容。コンテンツの内容。</p>
<p>コンテンツの内容。コンテンツの内容。</p>
</div><!--/=== post-contnet ===-->
<footer class="post-footer">
コンテンツのフッター
</footer><!--/=== post-footer ===-->
</main><!--/=== main-contents ===-->
<aside class="sidebar">
<h2>サイドバーの見出し</h2>
<section class="ad">広告枠</section>
<nav class="side-menu">
<ul class="category">
<li><a href="cat-id">カテゴリー</a></li>
<li><a href="cat-id">カテゴリー</a></li>
<li><a href="cat-id">カテゴリー</a></li>
<li><a href="cat-id">カテゴリー</a></li>
<li><a href="cat-id">カテゴリー</a></li>
</ul>
<ul class="tag">
<li><a href="tag-id">タグ</a></li>
<li><a href="tag-id">タグ</a></li>
<li><a href="tag-id">タグ</a></li>
<li><a href="tag-id">タグ</a></li>
<li><a href="tag-id">タグ</a></li>
</ul>
</nav><!--/=== side-menu ===-->
</aside><!--/=== sidebar ===-->
</div><!--/=== contents-layout ===-->
<footer class="site-footer">
<nav class="footer-nav">
<ul>
<li><a href="home">Home</a></li>
<li><a href="about">About</a></li>
<li><a href="auther">Auther</a></li>
<li><a href="privacy">privacypolicy</a></li>
<li><a href="contact">contact</a></li>
</ul>
</nav><!--/=== footer-nav ===-->
<small>CopyRight</small>
</footer><!--/=== site-footer ===-->
</body>