HTMLのfooter作成例
Webページには、最後にリンクや留意事項を記述した部分があります。
本ページでは、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部分は記事ページも作りは同じです。
これで、デザインから始めたトップページと記事ページの作成は完成です。
最初のページ「デザイン」