【HTML5】footerタグとは？使い方についてまとめ

footerの概要

footerは直近のセクショニングルート（body, blockquote, fieldset, td）、またはセクショニングコンテンツ（article, aside, nav, section）のフッターを表します。フッターには、作者、関連文書へのリンク、著作権情報などが含まれます。

注意点

footer内に著作者や編集者の連絡先情報を載せる場合はaddress要素を使用します。footerはセクショニングコンテンツではありませんのでアウトラインは生成しません。

footerのカテゴリー

コンテンツカテゴリー

フローコンテンツ（一般的コンテンツ）

コンテンツモデル

パルパブルコンテンツ（知覚可能コンテンツ）

footerに入れられるタグ一覧

タグ早見表

a abbr address article aside audio b bdo bdi blockquote br button canvas cite code data datalist del details dfn div dl em embed fieldset figure form h1 h2 h3 h4 h5 h6 hr i iframe img input ins kbd label main map mark math menu meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong sub sup svg table template textarea time ul var video wbr area(map要素の子孫の場合) link(itemprop属性がある場合) meta(itemprop属性がある場合) style(scoped属性がある場合)

入れられるタグのカテゴリー・モデル

フローコンテンツ（一般的コンテンツ）
コンテンツモデルなし

footerに使える属性

属性とは<footer> タグ内に入れることのできるものです。属性をあてはめることにより、CSS・JavaScriptなどで操作する際に識別させることが可能になります。

よく使うグローバル属性

id	概要	要素に対してID固有の識別名を付けることができます。
id	属性の値	英字から始まる英数字
class	概要	要素に対して分類名を付けることができます。
class	属性の値	英字から始まる英数字
style	概要	要素に対して直接スタイルを指定することができます。
style	属性の値	スタイルシートのコード

グローバル属性一覧はこちら

スポンサードサーチ

footerの使い方

<header>ヘッダー</header>

<section id="container">
<main>メインコンテンツ</main>
<aside>サイドバー</aside>
</section>

<footer>
  ここがフッターエリア<br>
  <small>Copyright 2019 HTML/CSS Glossary</small>
</footer>

header{
  padding:10px 0;
  background:#e1e1e1;
}

#container{
  display:flex;
}
main{
  flex:2;
  background:#eee;
  height:150px;
}
aside{
  flex:1;
  background:#d1d1d1;
  height:150px;
}
footer{
  background:#e1e1e1;
  text-align:center;
}

ブラウザ対応状況

ブラウザの対応（PC)
Chrome	あり
Safari	あり
Internet Explorer	あり
Edge	あり
Firefox	あり
Opera	あり
ブラウザの対応（SP)
Chrome	あり
Safari	あり
Samsung Internet	あり

footerの使い方についてまとめ