フレックスボックスでのフッターのコーディング

本章では、フッターのコーディングをします。
本記事では、フレックスボックスによる要素の配置の仕方を中心に解説します。文字の装飾などの細部は、全体のコードからご確認ください。
フッター要素の定義
まず、フッター全体をfooterタグで囲います。style.cssで、フッターの幅および背景色を指定します。
※この時点では要素の高さ(height)を指定ませんので、ディスプレイに何も表示されません。
index.html
<footer>
</footer>
style.css
footer {
width: 100%;
background-color: #facd89;
}
3つの項目を横並びにする
3つのボックスが以下のように表示されるようコーディングしてみましょう。

まず、親要素となるdiv(class=footer-inner-1) を設定します。そして、この中に「関連サイト」「サイトマップ」「会社概要」の3つの項目のためのdivを作成します。これら3つのdivには、共通クラス(class=footer-inner-2)と個別クラス(left, middle, もしくは right)をそれぞれ指定します。
div(class=footer-inner-1)をフレックスボックスの親要素に指定して、上記の3要素を横並べにします。
子要素であるdiv(class=footer-inner-2)に高さと横幅を指定し、さらに、このdivの右サイドにのみボーダーを表示させることで、完成図通りのデザインになります。
※「クラスの”footer-inner-2”かつ”left”」を指定してスタイルを記述する方法については、別の記事をご参照ください。
index.html
<footer>
<div class="footer-inner-1">
<div class="footer-inner-2 left"></div>
<div class="footer-inner-2 middle"></div>
<div class="footer-inner-2 right"></div>
</div>
</footer>
style.css
.footer-inner-1 {
width: 960px;
height: 300px;
margin: 0 auto;
display: flex;
align-items: center;
}
.footer-inner-2 {
height: 90%;
border-right: 1px dotted #766550;
}
.footer-inner-2:last-child {
border: none;
}
.footer-inner-2.left {
width: 25%;
}
.footer-inner-2.middle {
width: 40%;
}
.footer-inner-2.right {
width: 35%;
}
内容を記載する準備
3つのdiv(class=footer-inner-2)内に、タイトルを記述するためのh3タグを用意します。さらに、小項目を入れるためのdiv(class=footer-inner-3)を指定します。
index.html
<footer>
<div class="footer-inner-1">
<div class="footer-inner-2 left">
<h3></h3> <!--この部分を追加-->
<div class="footer-inner-3"></div> <!--この部分を追加-->
</div>
<div class="footer-inner-2 middle">
<h3></h3> <!--この部分を追加-->
<div class="footer-inner-3"></div> <!--この部分を追加-->
</div>
<div class="footer-inner-2 right">
<h3></h3> <!--この部分を追加-->
<div class="footer-inner-3"></div> <!--この部分を追加-->
</div>
</div>
</footer>
「関連サイト」項目コーディングのポイント
右カラムの「関連サイト」項目を以下のようにコーディングしてみましょう。

h3タグ内に、小見出しを記載します。そして、div(class=footer-inner-3)内に、小項目をリスト要素として記述します。なお、リスト要素内の各項目は、本来は該当のページへのリンクにしますが、今回はリンク先を全てトップページに指定しておきます。
※h1タグおよびh2タグは、ヘッダーおよび本文で使用します。
次に、style.cssでdiv(class=footer-inner-3)のマージンを指定して、より見やすいレイアウトにします。
リスト文字の装飾は記事内では省略しますので、ダウンロード版のコードでご確認ください。
index.html
<div class="footer-inner-2 left">
<h3>関連サイト</h3>
<div class="footer-inner-3">
<ul>
<li><a href="#">東北グルメ総まとめ</a></li>
<li><a href="#">北海道グルメ総まとめ</a></li>
<li><a href="#">関西グルメ総まとめ</a></li>
<li><a href="#">沖縄グルメ総まとめ</a></li>
</ul>
</div>
</div>
style.css
.footer-inner-2 h3 {
padding-left: 20px;
margin-bottom: 0;
}
.footer-inner-3 {
margin-left: 40px;
}
「サイトマップ」項目コーディングのポイント
中央カラムの「サイトマップ」項目を以下のようにコーディングしてみましょう。

この項目では、小項目が3列に横並びになっています。このレイアウトを作るために、div(class=footer-inner-3)をフレックスボックスの親要素に指定し、この中に新たに3つの子要素div(class=footer-inner-4)を用意して、これらを横並びにします。
「関連サイト」の項と同じ要領で、h3タグ内に小見出しを、そして、それぞれのdiv(class=footer-inner-4)中に小項目をリスト要素として記述していきます。
index.html
<div class="footer-inner-2 middle">
<h3>サイトマップ</h3>
<div class="footer-inner-3">
<div class="footer-inner-4">
<ul>
<li><a href="#">和食</a></li>
<li><a href="#">中華</a></li>
<li><a href="#">イタリアン</a></li>
<li><a href="#">フレンチ</a></li>
<li><a href="#">エスニック</a></li>
</ul>
</div>
<div class="footer-inner-4">
<!--省略-->
</div>
<div class="footer-inner-4">
<!--省略-->
</div>
</div>
</div>
style.css
.footer-inner-3 {
margin-left: 40px;
display: flex; /*この部分を追加*/
}
.footer-inner-4 {
width: 100%;
}
「会社概要」項目コーディングのポイント
左カラムの「会社概要」項目を以下のようにコーディングしてみましょう。

h3タグ内に、小見出しを記載し、div(class=footer-inner-3)内に、会社概要の本文を記載します。なお会社概要の本文はadressタグ内に入れるのがよいでしょう。
index.html
<div class="footer-inner-2 right">
<h3>会社概要</h3>
<div class="footer-inner-3">
<address>
<!--省略-->
</address>
</div>
</div>
コピーライト

最後に、コピーライトを記載します。コピーライトのdiv(class=copy-right)を、div(footer-inner-1)の内に記載しないよう注意しましょう。©︎を表示させるには、index.htmlの該当箇所に©と記述します。
index.html
<div class="copy-right">
<p class="copy-right">©2020 created by webrogram</p>
</div>
style.css
.copy-right {
background-color: #FFF;
width: 100%;
text-align: center;
height: 50px;
}
.copy-right p {
line-height: 50px;
}
最後に、文字の装飾など全体の体裁を整えて完成です。