IT・WEB・PC事業を行う9BOX IT・WEB・PC事業を行う9BOX

フッターとは?書き方とデザインサンプル

フッターとは?書き方とデザインサンプル

Webサイトのフッターとは?

役割、ホームページで使われるHTMLとCSSを用いたフッターの作り方、デザインサンプルをご紹介します。

フッターとは?

ホームページのフッターとはページ最下部に配置されるロゴや会社情報、サイトマップなどのリンクが配置される箇所を言います。

フッターがページごとに異なると違うサイトと錯覚する恐れなどある為原則ホームページのフッターは共通で使うことが非常に多いです。

フッターの役割

フッターはユーザを誘導する役割をもっています。

ページを最後まで読み終えてフッター部分まできたら、関連する記事を見てもらうようにリンクを張ったり、スクロールして一番上に戻るときに面倒を省くために「トップへ戻る」ボタンを設置してユーザの気遣いをすることでページ離れを極力抑えることができます。

これは検索エンジンの順位付けの評価に離脱率、直帰率が含まれる為フッターで行うべき戦略と言えます。

最後まで読んでくれたユーザにあと一押し

共通フッターの場所

フッターにたどり着くということはコンテンツを見てくれた可能性が非常に高くなります。

ページを最後まで読み終えてフッター部分まできたということは、興味をもってくれている可能性が高いので「どのような会社で他にどのようなことをしてるのだろう?」と会社情報など見る場合があります。

人は足元をみられると言いますが、ホームページでもフッターはその価値があります。

いくらデザインや良い内容が書かれていてもフッターにあと一押しの内容を書いているか書いていないかで集客や、見る人の印象が変わる要因となっています。

リンク数はシンプルがベスト

フッターに地域などのリンクがずらっと表示されているサイトをたまにみかけますが、地域をSEOの観点で強化したい場合、逆効果になってしまいます。それは、ページ内のテーマ性が薄れる為です。

検索エンジンはテーマに沿ったホームページを好みます。それは人がホームページを見るときと同じで調べたいことが専門的であればあるほど有益な情報が得られるからです。

この為、フッターのリンク数は読んで下さる方が有益となる情報だけを絞って設置することがシンプルかつベストな手法と言えます。

フッターの書き方

このページのフッター部分を元に書き方を説明していきます。

htmlソースコード

  1. <div id="footer">
  2.  <div class="bg-dark">
  3.   <div class="footer_inner container">
  4.    <div class="footer_sub">
  5.     <ul class="footer_list">
  6.      <li class="footer_item"><a class="footer_col" href="http://~">9BOX</a></li>
  7.      <li class="footer_item"><a class="footer_col" href="http://~">9BOX</a></li>
  8.      <li class="footer_item"><a class="footer_col" href="http://~">9BOX</a></li>
  9.     </ul>
  10.    </div>
  11.    <div class="footer_main">
  12.     <div class="footer_flex">
  13.      <div class="footer_Logo"></div>
  14.      <span class="footer_flexName">会社名等</span>
  15.      <span class="footer_flexName">電話番号等</span>
  16.     </div>
  17.    </div>
  18.   </div>
  19.  </div>
  20. </div>
#footer
  • フッターの領域
  1. #footer{
  2.  border-top: none;
  3.  padding-top: 0;
  4.  margin-top: 20px;
  5. }
.footer_inner
  • フッター全体のフレキシブルボックス
  1. .footer_inner{
  2.  color: #FFFFFF;
  3.  padding: 20px;
  4. }
  5. @media screen and (min-width:768px) and ( max-width:1024px){
  6.  .footer_inner{
  7.   display: -webkit-flex;
  8.   display: -ms-flexbox;
  9.   display: flex;
  10.   -webkit-flex-direction: row-reverse;
  11.   -ms-flex-direction: row-reverse;
  12.   flex-direction: row-reverse;
  13.   -webkit-justify-content: space-between;
  14.   -ms-flex-pack: justify;
  15.   justify-content: space-between;
  16.   -webkit-flex-wrap: wrap;
  17.   -ms-flex-wrap: wrap;
  18.   flex-wrap: wrap;
  19.   overflow: hidden;
  20.   padding: 25px 0;
  21.  }
  22. }
  23. @media screen and (min-width:1024px){
  24.  .footer_inner{
  25.   display: -webkit-flex;
  26.   display: -ms-flexbox;
  27.   display: flex;
  28.   -webkit-flex-direction: row-reverse;
  29.   -ms-flex-direction: row-reverse;
  30.   flex-direction: row-reverse;
  31.   -webkit-justify-content: space-between;
  32.   -ms-flex-pack: justify;
  33.   justify-content: space-between;
  34.   -webkit-flex-wrap: wrap;
  35.   -ms-flex-wrap: wrap;
  36.   flex-wrap: wrap;
  37.   overflow: hidden;
  38.   padding: 25px 0;
  39.  }
  40. }
  41. }
.footer_sub
  • 会社情報やお問合せなどリンクを設置する箇所を確保
  1. .footer_sub{
  2.  width: 100%;
  3.  display: inline-block;
  4. }
  5. @media screen and (min-width:768px) and ( max-width:1024px){
  6.  .footer_sub{
  7.    width: 350px;
  8.  }
  9. }
  10. @media screen and (min-width:1024px){
  11.  .footer_sub{
  12.    width: 350px;
  13.  }
  14. }
  15. }
.footer_list
  • リンクを設置するフッターリスト
  1. .footer_list{
  2.  width:100%;
  3. }
.footer_item
  • フッターリストのアイテム
  1. .footer_item{
  2.   width: 50%;
  3.   height: 40px;
  4.   float:left;
  5.   margin: 0;
  6.   text-align: center;
  7. }
.footer_main
  • 会社のロゴ、電話番号や住所を設置する箇所を確保
  1. .footer_main{
  2.  width:100%;
  3. }
  4. @media screen and (min-width:768px) and ( max-width:1024px){
  5.  .footer_main{
  6.    width: 300px;
  7.  }
  8. }
  9. @media screen and (min-width:1024px){
  10.  .footer_main{
  11.    width: 300px;
  12.  }
  13. }
  14. }
.footer_flex
  • footer_mainのフレキシブルボックス
  1. .footer_flex{
  2.  display: -ms-flexbox;
  3.  display: flex;
  4.  -webkit-flex-direction: column;
  5.  -ms-flex-direction: column;
  6.  flex-direction: column;
  7. }
.footer_flexName
  • 会社名など強調したい箇所
  1. .footer_flexName{
  2.  font-weight: bold;
  3. }
a.footer_col
  • フッターリンクの幅、リンク色設定
  1. a.footer_col{
  2.  color:#fff;
  3. }
  4. @media screen and (min-width:768px) and ( max-width:1024px){
  5.  .footer_col{
  6.   width: 160px;
  7.   margin-right: 10px;
  8.  }
  9. }
  10. @media screen and (min-width:1024px){
  11.  .footer_col{
  12.   width: 160px;
  13.   margin-right: 10px;
  14.  }
  15. }
  16. }
.footer_Logo
  • フッターロゴの画像やサイズ設定
  1. .footer_Logo{
  2.  width: 300px;
  3.  height: 100px;
  4.  background-image: url(https://9box.jp/images/9boxitweb.png);
  5.  background-size: contain;
  6.  background-repeat: no-repeat;
  7. }

デザインサンプル

パソコンで見た時のフッター

パソコンで見た時のフッター

スマートフォンで見た時のフッター

スマートフォンで見た時のフッター

ホームページの作り方

お問合せ

お気軽にお問合せ下さい。

  • 電話番号 0285-35-4987
  • メール info@9box.jp