ウェブログラム ~学習するな実践せよ~

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

このシリーズの前記事はこちら(全5記事)

本章では、フッターのコーディングをします。

本記事では、フレックスボックスによる要素の配置の仕方を中心に解説します。文字の装飾などの細部は、全体のコードからご確認ください。

フッター要素の定義

まず、フッター全体を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の該当箇所に&copy;と記述します。

index.html
<div class="copy-right">
<p class="copy-right">&copy;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;
}

最後に、文字の装飾など全体の体裁を整えて完成です。