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

TOP
フレックスボックスで作る3カラムレイアウト
フレックスボックスでのフッターのコーディング

2020/04/12

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

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

フッター要素の定義

まず、フッター全体をfooterタグで囲います。style.cssで、フッターの幅および背景色を指定します。

※この時点では要素の高さ（height）を指定ませんので、ディスプレイに何も表示されません。

index.html
<footer>
</footer>

style.css
footer {
 width: 100%;
 background-color: #facd89;
}

３つの項目を横並びにする

3つのボックスが以下のように表示されるようコーディングしてみましょう。

まず、親要素となるdiv（class=footer-inner-1）を設定します。そして、この中に「関連サイト」「サイトマップ」「会社概要」の３つの項目のためのdivを作成します。これら３つのdivには、共通クラス（class=footer-inner-2）と個別クラス（left, middle, もしくは right）をそれぞれ指定します。

div（class=footer-inner-1）をフレックスボックスの親要素に指定して、上記の３要素を横並べにします。

子要素である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）を用意して、これらを横並びにします。

「関連サイト」の項と同じ要領で、h３タグ内に小見出しを、そして、それぞれの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%;
}

「会社概要」項目コーディングのポイント

左カラムの「会社概要」項目を以下のようにコーディングしてみましょう。

h３タグ内に、小見出しを記載し、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">&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;
}

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

2020/04/12