Webサイトのfooter(フッター)のコピーライトを中央に寄せる方法

簡単なWebサイトを作っているのですが、フッターのコピーライトを中央に寄せる方法がわからなくて、調べてなんとか中央に寄せることができたのでその方法についてまとめておきます。

CSSについては仕事では見る機会があっても、なかなか自分でコーディングをしないので実際に自分でコーディングすると見えてくるものがあるなと改めて実感しました。

HTMLの中身


アイキャッチ画像にあるHTMLのソースの中身は以下のような感じです。

    <!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Good Gears</title>
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>

<body>
    <!-- ヘッダー ここから -->

    <div id="header">
    </div>
    <!-- ヘッダー ここまで-->


    <!-- メインパネル ここから -->

    <div id="main_panel">
        <p>HTML5で作成しました!</p>
        <img src="./assets/img/test.png"><br>
    </div>
    <!-- メインパネル ここまで -->




    <!-- フッター ここから -->

    <div id="footer">
        <p class="copyright">Copyright&nbsp;&nbsp;Good Gears&nbsp;All&nbsp;Rights&nbsp;Reserved.</p>
    </div>
    <!-- フッター ここまで -->

</body>

</html>



CSSの中身


アイキャッチ画像にあるCSSのソースの中身は以下のような感じです。

    @charset "utf-8";
* { 
    margin: 0px; 
    padding: 0px; 
}

body {
    margin: 0;
}

#header {
    position: fixed;
    width: 100%;
    height: 70px;
    background-color: #000000;
    margin: 0;
}

#main_panel {
    width: 960px;
    height: auto;
    margin: 0 auto;
    padding: 70px 0 0;
}

#footer{
    width: 100%;
    height: 100px;
    background-color: #000000;
    margin: 0 auto;
}

.copyright{
    color: #FFFFFF;
}


CSSの修正①


6行目にtext-align: center;を追加してみました。

    #footer{
    width: 100%;
    height: 100px;
    background-color: #000000;
    margin: 0 auto;
    text-align: center;
}

結果

コピーライトは中央に来たけど、フッターの上側によってます。
高さも含めて中央になるようにさせたいです。

CSSの修正②


6行目から8行目に以下を追加してみました。
display: flex;
justify-content: center;
align-items: center;


フレックスボックスというものがあってこれを使うと簡単にできます。
ただ、ブラウザによっては使えないものもあるので注意が必要です。
以下を参考にしました。
https://www.plusdesign.co.jp/blog/?p=8747

    #footer{
    width: 100%;
    height: 100px;
    background-color: #000000;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

結果

これで水平方向、垂直方向ともに中央に寄せることができた。
やったね。

引き続きWebサイトを作成していこうと思います。
Webサイト構築していく上で参考になれば幸いです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です