5.5 フッター

戻る

コピーライトやライセンスなどの情報を表示するためのパーツです。ページの一番下に配置することが多いです。

<footer>
<p>Copyright © 2007-2020 Gadget Technology inc. All Rights Reserved.</p>
</footer>

/* フッター */
footer p { margin: 0;
           color: #888888;
           font-size: 14px; }

完成例

ページのシメにあたるコピーライト表示ができたら完成です。ちょっと色が薄く見えるはずです。

HTML部分の解説

ライセンスなどの情報は、段落として <p> で一つにまとめます。全体は <footer> で１つにまとめ、スタイルシートでデザインを指定しやすいようにしています。

CSS部分の解説

文字と余白の調整

文字の色をグレーにし、文字サイズを14ピクセルにするため、<p> の color と font-size をそれぞれ「#888888」と「14px」に設定しています。

また、コンパクトなデザインにするために margin を「0」に設定し、文字の周囲の余白を完全に削除しています。

/* フッター */
footer p { margin: 0;
           color: #888888;
           font-size: 14px; }