footer要素の使い方は?HTML5の要素を使いこなそう【HTML編】

Pikisuperstar - jp.freepik.com によって作成された technology ベクトル

こんにちは、ユキです。
新卒で大企業のSIerに入社し、現在は大手の業務システムWebアプリケーションを開発しています。

ペン子
ペン子

footer要素ってどうやって使うの?

ユキ
ユキ

主にbody要素内の最後で使うことになるよ!

結論からいうと、footer要素は著作権やナビゲーションを表示するために使います。

footer要素はWebサイトを作成する際には必ず使用するものになります。
今回は、footer要素についてと使い方について解説していきます。
コーヒーでも飲みながら読み進めてみてください。


スポンサーリンク

1: footer要素とは

footer要素は記事のフッター部をつけるためのものです。

一般的にはbody要素内の最後のブロックで使われます。
使いたい場合はarticle要素、aside要素などの他のセクション内でも使うことはできます。
body要素内で使う場合はページフッター、セクション内で使う場合はセクションフッターとして呼び名が変わります。
footerにはid属性やclass属性をつけることもできます。CSSでのデザイン指定もできるので自分なりにカスタマイズしてみましょう。

2: footer要素の使い方

2.1 ページフッター

body要素内で使うページフッターとして使用する場合は、著作権、個人名、会社情報、ナビゲーション、コピーライトなどを記載します。

<body> <header> ページヘッダー </header> <main> メインコンテンツ </main> <footer> ページフッター </footer>
</body>

ページヘッダーやメインコンテンツを記述して、最後にページフッターをつけましょう。
このページフッターでコピーライトを記述します。コピーライトはこのWebサイトは誰に著作権があるかというものを示すための大事なものとなるので必ずつけましょう。

コピーライトの記述仕方などの詳しい情報は下記の記事に記載しています。

Katemangostar - jp.freepik.com によって作成された banner ベクトル HTMLでフッターに著作権表示をする方法は?コピーライト記号をsmall要素でつけよう【HTML編】


2.2 セクションフッター

article要素やaside要素などで使うセクションフッターとして使用する場合は、投稿日時や更新日時を記載します。

<aside> <footer> 更新日時 </footer>
</aside>

投稿日時や更新日時を表示することでユーザーに最新の情報だということが伝わりやすくなります。
私のブログのトップページにも投稿日時が表示される仕様になっているので確認してみてください。

Pikisuperstar - jp.freepik.com によって作成された technology ベクトル aside要素の使い方は?HTML5の要素を使いこなそう【HTML編】

まとめ

今回は、footer要素についてと使い方について解説しました。

footer要素は著作権表示やナビゲーションを表示するために使うもので、Webサイトを作成する際には必ず使うものです。
この機会にfooter要素をコーディングして慣れておきましょう。

これからもユキのIT教室では初心者・未経験者向けのIT情報を発信していくのでよろしくお願いします。

以上、ユキでした!