第五弾　フッターを作ってみる

2022年12月13日

WEBサイト制作

#HTML
#css

こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回は第五弾。
以前の記事の続きになります。

◆過去記事はコチラ（第四弾　コンテンツを作ってみる）

ちなみにアイキャッチ画像ですが、
今世界中がW杯で盛り上がっているので、
あやかってみました。

フッターとは

前々々々回のおさらいになります。
フッターとは、

上記画像の下部分の赤枠でfooterと書かれている箇所です。

さっそくフッターをコーディングしていこう！

さて、前回作成したヘッダーとメインビジュアルとコンテンツの記述があるHTMLを開いてみてください。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <header>
        <h1>ロゴ</h1>
        <nav>
            <ul>
                <li><a href="#">リンク1</a></li>
                <li><a href="#">リンク2</a></li>
                <li><a href="#">リンク3</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="main-visual">
            <div class="main-visual-text">
                <h2>新たな未来をつなぐ人材をあなたに</h2>
            </div>
            <div class="main-visual-img">
                <img src="./img/mv.jpg" alt="">
            </div>
        </section>
        <section class="contents">
            <div class="container">
                <h3>事業紹介</h3>
                <ul class="contents-list">
                    <li><a href="#"><img src="./img/contents01.jpg" alt=""><p>人材育成</p></a></li>
                    <li><a href="#"><img src="./img/contents02.jpg" alt=""><p>人材派遣</p></a></li>
                    <li><a href="#"><img src="./img/contents03.jpg" alt=""><p>ソリューション</p></a></li>
                </ul>
            </div>
        </section>
    </main>
</body>
</html>

こんな感じになっていますか？
では、
フッターを作りましょう！
＜/section＞の直後に記述を追加してください。

<footer>
    <h1>ロゴ</h1>
    <nav>
        <ul>
            <li><a href="#">リンク1</a></li>
            <li><a href="#">リンク2</a></li>
            <li><a href="#">リンク3</a></li>
        </ul>
    </nav>
</footer>

では、タグの解説をしていきます。

<footer></footer>

この＜footer＞はここはフッター領域ですよ、と示すためのタグです。
これ以外は過去の記事で紹介しているので、
参考にしてください。
◆過去記事はコチラ（第一弾　トップページ（基本骨格）を作ってみる）
◆過去記事はコチラ（第二弾　ヘッダーを作ってみる）
◆過去記事はコチラ（第三弾　メインビジュアルを作ってみる）
◆過去記事はコチラ（第四弾　コンテンツを作ってみる）

それではフッターのCSSを一気に書いていきましょう！

footer{
    padding: 20px 40px 80px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #272727;
}
footer h1{
    background-color: #fff;
    color: #000;
    padding: 10px;
    display: inline-block;
}
footer nav ul{
    display: flex;
    list-style: none;
}
footer ul li{
    margin: 0 20px;
}
footer ul li a{
    text-decoration: none;
    color: #fff;
}

では一つずつ解説していきます。

footer{
    padding: 20px 40px 80px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #272727;
}

セレクタは＜footer＞タグを直接指定しています。
・paddingは要素の内側に余白を持たせるプロパティです。
この場合、上に20px、右に40px、下に80px、左に40pxの余白を持たせています。
・display: flexは要素を横並びにするプロパティです。
この場合、直接の子要素＜h1＞と＜nav＞を横並びにさせています。
・justify-content: space-betweenはdisplay: flexと連なるプロパティです。
効果はdisplay: flexで括られた要素同士の間隔を指定します。
この場合、中央を基準に寄せて配置する指定をしています。
・align-items: centerはdisplay: flexと連なるプロパティです。
display: flexで横並びにした要素の横軸の並びを指定します。
centerの値は中央にするというものです。
・background-colorは背景色を指定しています。

では、次です。

footer h1{
    background-color: #fff;
    color: #000;
    padding: 10px;
    display: inline-block;
}

セレクタは＜footer＞タグの子要素の＜h1＞タグを指定しています。

・background-colorは背景色を指定しています。
・colorは文字色を指定しています。
この場合、#000なので黒文字になります。
・paddingは要素の内側に余白を持たせるプロパティです。
この場合、上下左右に10pxの余白を持たせています。
・display: inline-blockはdisplayというプロパティにinline-blockという値が入っていますが、
これは要素にはブロック要素とインライン要素という種類があるのですが、このいいとこ取りをしたようなものになります。

では、次です。

footer nav ul{
    display: flex;
    list-style: none;
}

セレクタは＜footer＞タグの子要素の＜nav＞タグの子要素の＜ul＞タグを指定しています。
・display: flexは要素を横並びにするプロパティです。
この場合、＜ul＞の直接の子要素＜li＞を横並びにさせています。
・list-styleは＜li＞要素の装飾を指定するためのプロパティです。
この場合、装飾はいらない設定をしています。

では、次です。

footer ul li{
    margin: 0 20px;
}

セレクタは＜footer＞タグの子要素の＜ul＞タグの子要素の＜li＞タグを指定しています。
・marginは要素の外側の余白を指定しています。
この場合、左右に20pxの余白を指定しています。

では、次です。

footer ul li a{
    text-decoration: none;
    color: #fff;
}

セレクタは＜footer＞タグの子要素の＜ul＞タグの子要素の＜li＞タグの子要素の＜a＞タグを指定しています。
・text-decorationはテキストの装飾を指定するプロパティです。
この場合、アンカーリンクには自動的に下線がついてしまうので無しにする指定をしています。
・colorは文字色の指定をするプロパティです。
この場合、白を指定しています。