はじめに
<footer> タグを使用して、ウェブページ/ウェブサイトのフッターを作成できます。この実験では、HTML footer タグを使用して基本的なフッターを作成する方法を学びます。
注：
index.htmlでコーディングを練習し、Visual Studio Code で HTML を記述する方法 を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080 タブを更新して、ウェブページをプレビューできます。
ウェブページの基本構造を設定する
拡張子 .html の新しいファイルを作成し、index.html と名付けます。ここにフッターを作成するための HTML コードを追加します。
このステップでは、ウェブページの基本構造を作成します。以下がコードです。
<!doctype html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<!-- ヘッダーはここになります -->
<main>
<!-- メインコンテンツはここになります -->
</main>
<!-- フッターはここになります -->
</body>
</html>
フッターコードを追加する
基本的なフッターを作成するには、main タグの後に次のコードを追加します。
<footer>
<p>Copyright © 2021 My Webpage. All Rights Reserved.</p>
</footer>
この例では、フッターに単純な段落タグといくつかのテキストを追加しました。リンク、著作権情報、サイトマップ、その他のコンテンツを追加することで、フッターをカスタマイズできます。
index.html ファイルを保存し、Web ブラウザで開きます。画面下部にフッターがある基本的なウェブページが表示されるはずです。
フッターのカスタマイズ
このステップでは、さらにいくつかの情報を追加することでフッターをカスタマイズします。以下は例です。
<footer>
<p>Contact us:</p>
<ul>
<li>Email: info@example.com</li>
<li>Phone: 123-456-7890</li>
</ul>
<p>Follow us:</p>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
</ul>
</footer>
この例では、2 つの段落と 2 つの無順序リストを追加しました。最初のリストにはウェブサイトの連絡先情報が含まれ、2 番目のリストにはソーシャルメディアプロファイルへのリンクが含まれています。
index.html ファイルを保存し、Web ブラウザで開きます。ウェブページの下部にカスタマイズされたフッターが表示されるはずです。
まとめ
この実験では、HTML footer タグを使用して基本的なフッターを作成する方法を学びました。フッタータグは、ウェブページのフッターを定義するために使用され、ウェブページに関連するリンクや著作権データなど、さまざまな情報を保持するために使用できます。また、連絡先情報やソーシャルメディアリンクを含めるようにフッターをカスタマイズする方法も学びました。
