フッターを作る－初心者もできる！プログラミング基礎講座【第10回】

2021年4月26日
2023年9月6日
プログラミング, ホームページ

ホームページ

シリーズ第10回は、簡単なフッターの作り方です。フッターメニューとコピーライトだけのシンプルなフッターをHTMLとCSSで作成してみましょう。

1 フッターについて
2 HTML
3 CSS
- 3.1 余白のリセット
- 3.2 スタイルの指定
4 コピーライトについて
5 まとめ

フッターについて

一般的にフッターには、以下の情報を含めることが多いです。もちろん、サイトの目的によって内容は変わってきます。

フッターメニュー
お問い合わせ情報
重要ページやSNSへのリンク
コピーライト

今回は上の画像のように、フッターメニューとコピーライトだけの簡単なフッターを作ってみましょう。メニューへのリンクの設定は次回で解説します。

HTML

<footer>
　<div class="footer-menu">
　　<ul class="footer-menu-list">
　　　<li>ホーム</li>
　　　<li>HTML</li>
　　　<li>CSS</li>
　　　<li>お問い合わせ</li>
　　</ul>
　</div>
　<div class="copyright">
　　<p>© 2021 わっくわくプログラミング講座</p>
　</div>
</footer>

footerタグの中に、div要素を使ってフッターリストとコピーライトのレイアウトを作り、それぞれにclass名をつけています。フッターメニューは、ヘッダーメニューの時と同じようにリストとして記述します。

CSS

ブラウザにはデフォルトで基本的なCSSが指定されています。例えば、HTMLで任意のテキストをh1（見出し）としてマークアップしてブラウザで表示してみましょう。ほとんどのブラウザで、CSSを指定していなくても大きめのフォントで太字表示されると思います。これは、ユーザーエージェントスタイルシートとも呼ばれ、ブラウザ側の親切な設定です。しかし、逆にこの設定が邪魔をして、思ったようにスタイルが指定できないことがあります。

どこにどんなスタイルがデフォルトで指定されているかは、開発者ツールを使って確認できます。この点は今後の回で解説します。今回のフッターを作成する時にも、余白についてデフォルトのスタイルが邪魔をしました。それで、まずは余白のデフォルトのスタイルをリセットしたいと思います。

余白のリセット

以前にも開設した通り、余白には大きく分けて2つの設定があります。

内側の余白：padding（パディング）
外側の余白：margin（マージン）

正確に言えば、要素の枠線の内側・外側になります。どの要素にも、表示されているかにかかわらず枠線（border：ボーダー）がひかれています。この内外の余白が、ブラウザのデフォルトCSS設定で指定されていることがあるというわけです。

リセットの方法は簡単です。CSSで次のように記述します。

* {
　margin: 0; padding: 0;
}

セレクタ―として * を書いています。これはファイル内のすべての要素を選択するセレクタ―です。プロパティでmarginとpaddingを0（ゼロ）にすることでリセットできます。CSSファイルの最初にこの記述をしておきましょう。

スタイルの指定

CSSファイルに次のように記述しました。

/* フッター */
footer {
　background-color: darkred;
　color: whitesmoke;
}

.footer-menu {
　height: 60px;
}

.footer-menu-list {
　list-style: none;
　text-align: center;
　line-height: 60px;
}

.footer-menu-list li {
　margin: 10px;
　display: inline;
}

.copyright {
　text-align: center;
}

今回のスタイル指定のポイントです。

左右の中央寄せの指定：text-align: center;
上下の中央寄せの指定：line-height
リストをインライン要素にする：display: inline;

2の line-height についてです。.footer-menuでheightが60pxに指定されています。なおかつ、リストがdisplay: inline;によってインライン要素となり、1行として認識されます、この場合、line-heightプロパティで、親要素となる.footer-menuと同じheightを指定すると上下の中央に位置づけされます。line-heightは行の高さを指定するプロパティなので、高さが60pxの1行であれば、その中央に要素をもってきてくれるというイメージです。このため、複数行の場合はこの方法が使えないことを覚えておきましょう。

コピーライトについて

コピーライトとは、改めて説明するまでもないですが著作権のことです。実際には、これを記載しなくても著作権は発生しています。著作物を創作して時点で著作権が発生しているのです。ただ、この意識を持たない方も多いので、サイトのフッター部分にコピーライトを記すことが一般的になっています。

この点を踏まえてですが、コピーライト表示含めるべき情報は基本的に以下の3つです。

著作権者
発行年

まとめ

シリーズ記事初心者もできる！プログラミング基礎講座【第10回】はいかがでしたか。今回は簡単なフッターの作り方について解説してきました。こうやって目標物を作っていくたびに、HTMLやCSSについて理解が深まっていきますね。

次回は、メニューリストにリンクを付ける方法をご紹介します。次回もお楽しみに！