フッターをコーディング
フッターをコーディングしていきます。
HTML
index.htmlを以下のように修正します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サンプルサイト</title>
<link rel="stylesheet" media="all" href="css/style.css" />
<link rel="stylesheet" media="all" href="css/reset.css" />
</head>
<body>
<header class="header">
<div class="container">
<div class="header-top">
<h1 class="logo"><a href="index.html">Sample</a></h1>
<div class="tel">TEL：00-0000-0000</div>
</div>
<div class="nav">
<ul class="nav-list" role="list">
<li class="nav-item"><a href="#">ホーム</a></li>
<li class="nav-item"><a href="#">会社概要</a></li>
<li class="nav-item"><a href="#">事業内容</a></li>
<li class="nav-item"><a href="#">採用情報</a></li>
<li class="nav-item"><a href="#">お問い合わせ</a></li>
</ul>
</div>
</div>
</header>
<div>
<img src="img/mainimg.png" alt="メイン画像" class="main-img">
</div>
<div class="content">
<div class="container">
<div class="sidebar">
<ul role="list">
<li><a href="#"><img src="img/banner.png" alt="バナー画像" class="banner"></a></li>
<li><a href="#"><img src="img/banner.png" alt="バナー画像" class="banner"></a></li>
<li><a href="#"><img src="img/banner.png" alt="バナー画像" class="banner"></a></li>
</ul>
</div>
<div class="news">
<h2 class="h2">新着情報</h2>
<ul role="list">
<li>20XX.XX.XX 〜なニュースがありました</li>
<li>20XX.XX.XX 〜なニュースがありました</li>
<li>20XX.XX.XX 〜なニュースがありました</li>
</ul>
</div>
</div>
</div>
<!-- ここから -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<a href="index.html" class="logo">Sample</a>
<div class="copyright">Copyright © SAMPLE</div>
</div>
</div>
</footer>
<!-- ここまで追加 -->
</body>
</html>
HTMLの解説
1. <footer class="footer">
<footer>
ページの一番下の部分を表すタグ。 Webサイトでは、著作権やリンク、運営情報などを置くのが一般的です。 CSSでデザイン調整するため、class="footer"というクラス名を付与しています。
2. <div class="container">
<div>
コンテンツをまとめています。 CSSで中の要素を整列させたり、横幅を制限するため、class="container"のクラス名を付与しています。
3. <div class="footer-content">
フッター内のコンテンツをまとめるためclass="footer-content"のクラス名を付与しています。
フッターのコンテンツには、「ロゴ」と「著作権表示」が入っています。
4. <a href="index.html" class="logo">Sample</a>
aタグ（<a>）はリンクを表すタグです。
クリックすると別のページに移動できます。
href="index.html"を指定することで、クリックしたときに「トップページ(index.html)」へ移動するようにしています。
ロゴっぽく見せるCSSを適用するため、class="logo"を指定しています。
ロゴとして、Sampleという文字が表示されます。サイト名やブランド名に置き換えできます。
5. <div class="copyright">
Copyright © SAMPLEは著作権の表示部分です。
通常は「© + サイト名 + 年号」などを書きます。
例： Copyright © 2025 MyWebsite
CSS
style.cssには以下のcssを追加します。
.footer {
display: flex;
align-items: center;
justify-content: center;
padding: 70px 0 30px;
background-color: #000;
}
.footer .logo {
color: #fff;
margin-bottom: 20px;
}
.footer-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.copyright {
color: #ccc;
}
.copyright a {
display: inline;
}
CSSの解説
1. .footer
.footer {
display: flex;
align-items: center;
justify-content: center;
padding: 70px 0 30px;
background-color: #000;
}
-
display: flex;
フッター全体を Flexbox でレイアウトします。 -
align-items: center;
縦方向（上下）に中央揃えします。 -
justify-content: center;
横方向（左右）にも中央揃えします。 -
padding: 70px 0 30px;
フッターの上下に余白を追加します。
上：70px 左右：0px 下：30px background-color: #000;
背景色を黒にします。
2. .footer .logo
-
color: #fff;
ロゴ文字を白にします。 -
margin-bottom: 20px;
ロゴと著作権表示の間に20pxの余白を追加します。
3. .footer-content
-
display: flex;
フッター内部のレイアウトを Flexbox で設定します。 -
flex-direction: column;
子要素（ロゴと著作権表示）を縦に並べます。 -
align-items: center;
子要素を横方向の中央に配置します。 -
justify-content: space-between;
子要素の間に空白を入れてバランスを取ります。
4. .copyright
color: #ccc;
著作権表示の文字をグレー（白より少し薄い色）にしています。
5. .copyright a
display: inline;
著作権表示の中にリンクを入れても、横並びのテキストの一部として自然に表示されます。
動作確認
ブラウザで開くと以下のようになります。
