HTMLのfooter作成例

footerとは？

HTMLのfooter要素は、多くの場合にページのフッターとして使われます。フッターには、リンクや留意事項、著作者の情報などが記述されます。

「デザイン」で作成したトップページでは、以下の赤枠部分が該当します。

footer要素は、ページのフッターだけで使われるのではなく、以下のようにarticle内で使うこともできます。

<article>

<header>
<h1>テント</h1>
<p>　テントについて説明しています。</p>
</header>

<section>
<h2>テントとは</h2>
<p>　テントが何かを説明しています。テントは、キャンプで寝る時に使います。2人用や4人用などさまざまです。1人用もあります。</p>
</section>

<footer>
<p>Copyright (C)</p>
</footer>

</article>

section、aside、nav内で使うこともできます。このため、1ページに複数のfooter要素が使われることもあります。

今回は、ページのフッター部分の作り方を説明します。

footerのHTML

デザインしたフッターをHTMLで記述すると、以下になります。

<footer id="footer">

<ul>
<li><a href="cat1/index.html">カテゴリ1</a></li>
<li><a href="cat2/index.html">カテゴリ2</a></li>
<li><a href="cat3/index.html">カテゴリ3</a></li>
<li><a href="cat4/index.html">カテゴリ4</a></li>
</ul>

<p>Copyright (C) All Rights Reserved.</p>

</footer>

footerのCSS

以下は、footerのためのCSSです。

#footer {
  border-top: solid 1px lightgray;
  padding-bottom: 10px;
}

#footer ul {
  text-align: center;
}

#footer ul li {
  padding: 0 4px;
  display: inline;
}

#footer p {
  text-align: center;
}

display:inlineは、li要素を横に並べて表示するようになります。#footer ulでdisplay:flexと宣言してフレックスボックスを利用しても、同様に横に並べて表示できますが、text-align:centerが効かなくなります。このため、marginやjustify-content:center(フレックスアイテムを中央寄せ)などで調整する必要があります。

ここまでの作成結果

「HTMLのsection作成例」までの作成結果と、このページのHTMLとCSSを組み合わせたトップページの表示結果は、以下のとおりです。

上記は、今回の作成部分が見えるように、少し下にスライドした後の画面です。また、footer部分は記事ページも作りは同じです。

これで、デザインから始めたトップページと記事ページの作成は完成です。