簡単な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 Good Gears All Rights 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サイト構築していく上で参考になれば幸いです。
