BLOG ブログ

ホームページ制作
BLOG
フッターデザイン【レスポンシブサイトのサンプルソース】

フッターデザイン【レスポンシブサイトのサンプルソース】

更新日：2020/12/09

コーディングを始めたてのころは誰でもPCのサイトを作ることに精一杯になり、スマートフォン用の展開をおこないやすいコードを書くことが頭から抜け落ちてしまいますよね。今回の記事では、レスポンシブサイトでよく見かけるフッターを、どのようにレスポンシブ化するかを理解していただくことが目的となっています。より理解しやすいようコードを丸っと貼っておりますので、記事が長くなっています。予めご了承ください。また、今回の記事に登場するフッターは、以下のデモページより確認していただけます。こちらも合わせてご覧ください。

Footer DEMO

ロゴとメニューが縦に並んでいるフッター【難易度★☆☆】
横並びを縦並びにするテーブルレスポンシブ【難易度★☆☆】
ロゴとメニューが横並びで、子メニューがあるフッター【難易度★★☆】
メニューが多いフッター【難易度★★★】
会社概要エリアとメニューが50%ずつ並んでいるフッター【難易度★★☆】
ロゴとメニューが縦に並んでいて、横に地図があるフッター【難易度★★☆】
終わりに

1ロゴとメニューが縦に並んでいるフッター【難易度★☆☆】

ロゴが上にあり、その下にナビゲーションメニューが横並びになっているだけのシンプルなものです。こちらのHTMLを見ると分かりますが、logoのdivとnavのulが上下に並んでいるシンプルな作りになっています。このタイプのフッターをコーディングするためにはリストを横並びにする必要があります。親にFlexboxを当てるか、liタグにinline-blockを設定することで横並びになります。

PC

SP

HTML


    <footer id="footer01" class="footer outer-block">
      <div class="logo">
        <a href="https://b-risk.jp/">
          <img src="img/logo.svg" alt="">
        </a>
      </div>
      <ul class="nav">
        <li><a href="https://b-risk.jp/works/">WORKS</a></li>
        <li><a href="https://b-risk.jp/blog/">BLOG</a></li>
        <li><a href="https://b-risk.jp/recruit/">RECRUIT</a></li>
        <li><a href="https://b-risk.jp/company/">COMPANY</a></li>
        <li><a href="https://b-risk.jp/contact/">CONTACT</a></li>
      </ul>
      <p class="copyright">
        COPYRIGHT © BRISK Inc. All rights Reserved.
      </p>
    </footer>

</a>

</div>

<li><a href="https://b-risk.jp/works/">WORKS</a></li>

<li><a href="https://b-risk.jp/recruit/">RECRUIT</a></li>

<li><a href="https://b-risk.jp/company/">COMPANY</a></li>

<li><a href="https://b-risk.jp/contact/">CONTACT</a></li>

</ul>

</p>

</footer>

CSS（PC）



ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#footer01 {
  position: relative;
  background: #222;
}

#footer01 .logo {
  text-align: center;
  padding: 20px 0;
  border-bottom: 1px solid #111;
}

#footer01 .logo a {
  display: inline-block;
}

#footer01 .logo img {
  width: 120px;
}

#footer01 .nav a {
  display: block;
  padding: 0 10px;
  color: #ccc;
}

@media only screen and (min-width: 641px) {
  //PCのみ
  #footer01 .nav {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 20px 0;
  }
  #footer01 .nav a:hover {
    color: #ca353b;
  }
}

ul {

list-style: none;

margin: 0;

padding: 0;

}

#footer01 {

position: relative;

background: #222;

}

#footer01 .logo {

text-align: center;

padding: 20px 0;

border-bottom: 1px solid #111;

}

#footer01 .logo a {

display: inline-block;

}

#footer01 .logo img {

width: 120px;

}

#footer01 .nav a {

display: block;

padding: 0 10px;

color: #ccc;

}

@media only screen and (min-width: 641px) {

//PCのみ

#footer01 .nav {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

padding: 20px 0;

}

#footer01 .nav a:hover {

color: #ca353b;

}

リストに初期からついている黒丸（ドット）が表示されないよう、list-styleをnone（なし）にしておきましょう。あとはliタグの中にあるaタグをblock要素にし、paddingを当てるなどしてクリック範囲を広げ、左右の余白を調整します。liタグの左右にmarginを当てても良いですが、クリック範囲は文字の上だけになるので、aタグにpaddingを当てるほうが親切です。



@media only screen and (max-width: 640px) {
  //SPのみ
  #footer01 {
    text-align: center;
  }

  #footer01 .nav li {
    border-top: 1px solid #555555;
  }

  #footer01 .nav li:last-child {
    border-bottom: 1px solid #555555;
  }

  #footer01 .nav li a {
    padding: 12px 20px;
    text-align: left;
  }
}

@media only screen and (max-width: 640px) {

//SPのみ

#footer01 {

text-align: center;

}

#footer01 .nav li {

border-top: 1px solid #555555;

}

#footer01 .nav li:last-child {

border-bottom: 1px solid #555555;

}

#footer01 .nav li a {

padding: 12px 20px;

text-align: left;

}

レスポンシブ化に対応するため、スマートフォン時（今回は640px以下）では、Flexboxやinline-blockなどリストを横並びにしたCSSを解除します。そして、liタグの上にのみborder-topを引き、liタグの最終要素だけli:last-childで指定してborder-bottomを引くと、画像のようにボタンの上下に区切り線が引かれてタップする場所を明確に伝えることができす。シンプルで基本的なフッターはこれで完成です。

2ロゴとメニューが横に並んでいるフッター【難易度★☆☆】

ロゴとナビゲーションメニューが横並びになっているフッターです。シンプルで分かりやすく、コンテンツの高さも大きくとらないため、多くのサイトでこのようなデザインのものが使われている傾向にあると思います。また、今回はほかのメニューと差別化できるよう、ビビッドな色のお問い合わせボタンを置いています。こちらも先ほどのフッターと同じくらい簡単に作ることができます。

PC

SP

HTML


<footer id="footer02" class="outer-block">
      <div class="inner-block">
        <div class="wrap">
          <div class="logo">
            <a href="https://b-risk.jp/"><img src="img/logo.svg" alt=""></a>
          </div>
          <div class="cont">
            <div class="c-btn">
              <a href="https://b-risk.jp/contact/">CONTACT</a>
            </div>
            <ul class="nav">
              <li><a href="https://b-risk.jp/works/">WORKS</a></li>
              <li><a href="https://b-risk.jp/blog/">BLOG</a></li>
              <li><a href="https://b-risk.jp/recruit/">RECRUIT</a></li>
              <li><a href="https://b-risk.jp/company/">COMPANY</a></li>
            </ul>
          </div>
        </div>
      </div><!-- /inner-block -->
      <div class="copyright">
        COPYRIGHT © BRISK Inc. All rights Reserved.
      </div>
    </footer>

</div>

<a href="https://b-risk.jp/contact/">CONTACT</a>

</div>

<li><a href="https://b-risk.jp/works/">WORKS</a></li>

<li><a href="https://b-risk.jp/recruit/">RECRUIT</a></li>

<li><a href="https://b-risk.jp/company/">COMPANY</a></li>

</ul>

</div>

</div>

</div>

</footer>

CSS（PC）



#footer02 {
  background: #222;
}

.ie #footer02 .logo img,
#footer02 .logo {
  display: inline-block;
  width: 120px;
}

#footer02 .nav li a {
  padding: 15px;
  color: #ccc;
}

#footer02 .c-btn {
  margin-left: 25px;
}


@media screen and (min-width: 641px) {
  #footer02 .logo {
    padding: 10px 0;
  }

  #footer02 .wrap {
    padding: 20px 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #footer02 .cont {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
  }

  #footer02 .nav {
    display: inline-block;
  }

  #footer02 .nav li {
    display: inline-block;
  }

  #footer02 .nav li a:hover {
    color: #ca353b;
  }
}

#footer02 {

background: #222;

}

.ie #footer02 .logo img,

#footer02 .logo {

display: inline-block;

width: 120px;

}

#footer02 .nav li a {

padding: 15px;

color: #ccc;

}

#footer02 .c-btn {

margin-left: 25px;

}

@media screen and (min-width: 641px) {

#footer02 .logo {

padding: 10px 0;

}

#footer02 .wrap {

padding: 20px 0;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

justify-content: space-between;

align-items: center;

}

#footer02 .cont {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

flex-direction: row-reverse;

align-items: center;

}

#footer02 .nav {

display: inline-block;

}

#footer02 .nav li {

display: inline-block;

}

#footer02 .nav li a:hover {

color: #ca353b;

}

前回までと異なる点として、ロゴとナビゲーションに対して大枠のdiv（今回は”wrap”というクラスがついているもの）が増えています。HTMLを確認すると分かりやすいかと思います。また、メニューの横に、他のメニューと差別化できるようなボタンがついているフッターデザインも良くあるかと思いますが、その場合もメニューとボタンに対してdivで囲い、横並びにさせると画像のような見た目になります。

今回は、ロゴ&ナビゲーション、ナビゲーション&ボタンのそれぞれにFlexboxを使っています。ここまで読むとなんとなくやり方を掴んできたかもしれませんが、基本的にスマホで縦に積みがちな要素には、Flexboxやinline-blockで横並びにするとコーディングをとてもおこないやすくなります。divタグなどが増えていくかと思いますが、ためらわずにたくさん使っていくと案外コーディングが楽になることもあります。

CSS（SP）


@media only screen and (max-width: 640px) {
  #footer02 {
    padding: 20px 0 0;
  }

  #footer02 .inner-block {
    padding: 0;
  }

  .ie #footer02 .logo img,
  #footer02 .logo {
    display: block;
    margin: 0 auto 20px;
  }

  #footer02 .c-btn {
    margin-bottom: 20px;
  }

  #footer02 .nav li {
    border-top: 1px solid #555;
  }

  #footer02 .nav li a {
    padding: 12px 20px;
    display: block;
    background-size: 5px auto;
  }

  #footer02 .nav li:last-child {
    border-bottom: 1px solid #555;
  }
}

@media only screen and (max-width: 640px) {

#footer02 {

padding: 20px 0 0;

}

#footer02 .inner-block {

padding: 0;

}

.ie #footer02 .logo img,

#footer02 .logo {

display: block;

margin: 0 auto 20px;

}

#footer02 .c-btn {

margin-bottom: 20px;

}

#footer02 .nav li {

border-top: 1px solid #555;

}

#footer02 .nav li a {

padding: 12px 20px;

display: block;

background-size: 5px auto;

}

#footer02 .nav li:last-child {

border-bottom: 1px solid #555;

}

HTMLでは「ボタンのc-btn→メニューのul」という書き順になっていますが、横並びにした際には「メニューのul→ボタンのc-btn」と逆になっています。これはCSSの43行目にある「flex-direction: row-reverse;」というFlexboxの順序を変えるCSSをPCにのみ当てることで、Flexboxを解除するスマートフォン時にはHTMLの順序通り、ボタンがメニューの上に来るようになります。

3ロゴとメニューが横並びで、子メニューがあるフッター【難易度★★☆】

ロゴとメニューが横に並んでいて、子メニューがあるフッターです。ロゴの横には会社名、ロゴの下には住所の記載も増えています。また、お問い合わせボタンのほかに、もう一色ビビッドなボタンを増やしました。こちらのボタンは縦に詰んでいるだけなので、特にアレンジをせずとも何個にでも増やせますが、多くなりすぎてもユーザが迷ってしまうので、最大でも3個程度が望ましいかと思っています。

HTML


<footer id="footer03" class="outer-block">
      <div class="inner-block">
        <div class="area">
          <div class="info">
            <a href="https://b-risk.jp/" class="logo">
              <img src="img/logo.svg" alt="">
              <span class="ja">株式会社BRISK</span>
            </a>
            <div class="address">
              〒135-0002<br>
              東京都江東区住吉1丁目17-20　住吉ビル7F
            </div>
          </div>
          <ul class="nav">
            <li><a href="https://b-risk.jp/about/">会社概要</a></li>
            <li>
              <a class="js-aco">制作実績<span class="ico-open"></span></a>
              <ul class="nav-child">
                <li><a href="https://b-risk.jp/works/"><span>制作実績1</span></a></li>
                <li><a href="https://b-risk.jp/works/"><span>制作実績2</span></a></li>
                <li><a href="https://b-risk.jp/works/"><span>制作実績3</span></a></li>
              </ul>
            </li>
            <li><a href="https://b-risk.jp/blog/">ブログ</a></li>
            <li><a href="https://b-risk.jp/recruit/">採用情報</a></li>
            <li><a href="https://b-risk.jp/faq/">よくあるご質問</a></li>

            <li class="footer-btn-wrap">
              <a class="contact-btn" href="https://b-risk.jp/contact/">お問い合わせ</a>
              <a class="login-btn" href="https://b-risk.jp/simulation/">お見積もり</a>
            </li>
          </ul>
        </div>
      </div><!-- /inner-block -->
      <div class="copyright">
        COPYRIGHT © BRISK Inc. All rights Reserved.
      </div>
    </footer>

<span class="ja">株式会社BRISK</span>

</a>

〒135-0002<br>

東京都江東区住吉1丁目17-20　住吉ビル7F

</div>

<li>

</ul>

</li>

<li><a href="https://b-risk.jp/faq/">よくあるご質問</a></li>

<a class="contact-btn" href="https://b-risk.jp/contact/">お問い合わせ</a>

<a class="login-btn" href="https://b-risk.jp/simulation/">お見積もり</a>

</li>

</ul>

</div>

</div>

</div>

</footer>

CSS（PC）



#footer03 {
  background: #222;
}

#footer03 .inner-block {
  padding: 30px 0;
}

#footer03 .logo {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

#footer03 .logo > img {
  width: 120px;
}

#footer03 .logo .ja {
  padding-left: 20px;
  color: #ccc;
  font-size: 14px;
  font-weight: bold;
}

#footer03 .address {
  margin-top: 20px;
  color: #ccc;
}

#footer03 .nav li a {
  padding: 10px 0;
  color: #ccc;
  font-weight: bold;
}

#footer03 .nav .footer-btn-wrap .contact-btn {
  background-color: #0077bb;
  color: #fff;
  text-align: center;
}

#footer03 .nav .footer-btn-wrap .login-btn {
  background: #c4341a;
  color: #fff;
  text-align: center;
}

#footer03 .js-aco li a {
  padding-left: 15px;
}

#footer03 .js-aco li a span {
  position: relative;

}

#footer03 .js-aco li a span::before {
  display: inline-block;
  position: absolute;
  content: '';
  width: 10px;
  height: 1px;
  background-color: #ccc;
  top: 0;
  bottom: 0;
  right: calc(100% + 5px);
  margin: auto;
}

@media only screen and (min-width: 641px) {
  #footer03 .nav .footer-btn-wrap a {
    display: block;
    width: 150px;
    border: 2px solid transparent;
  }
  #footer03 .nav .footer-btn-wrap a + a {
    margin-top: 10px;
  }
  #footer03 .nav .footer-btn-wrap .contact-btn:hover {
    background: #fff;
    color: #0077bb;
    opacity: 1;
  }
  #footer03 .nav .footer-btn-wrap .login-btn:hover {
    background: #fff;
    color: #c4341a;
    opacity: 1;
  }
  #footer03 .area {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  #footer03 .nav {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 800px;
  }

  #footer03 .nav li a {
    font-size: 14px;
  }

  #footer03 .nav li a:hover {
    opacity: 1;
    color: #c4341a;
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

#footer03 {

background: #222;

}

#footer03 .inner-block {

padding: 30px 0;

}

#footer03 .logo {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

}

#footer03 .logo > img {

width: 120px;

}

#footer03 .logo .ja {

padding-left: 20px;

color: #ccc;

font-size: 14px;

font-weight: bold;

}

#footer03 .address {

margin-top: 20px;

color: #ccc;

}

#footer03 .nav li a {

padding: 10px 0;

color: #ccc;

font-weight: bold;

}

#footer03 .nav .footer-btn-wrap .contact-btn {

background-color: #0077bb;

color: #fff;

text-align: center;

}

#footer03 .nav .footer-btn-wrap .login-btn {

background: #c4341a;

color: #fff;

text-align: center;

}

#footer03 .js-aco li a {

padding-left: 15px;

}

#footer03 .js-aco li a span {

position: relative;

}

#footer03 .js-aco li a span::before {

display: inline-block;

position: absolute;

content: '';

width: 10px;

height: 1px;

background-color: #ccc;

top: 0;

bottom: 0;

right: calc(100% + 5px);

margin: auto;

}

@media only screen and (min-width: 641px) {

#footer03 .nav .footer-btn-wrap a {

display: block;

width: 150px;

border: 2px solid transparent;

}

#footer03 .nav .footer-btn-wrap a + a {

margin-top: 10px;

}

#footer03 .nav .footer-btn-wrap .contact-btn:hover {

background: #fff;

color: #0077bb;

opacity: 1;

}

#footer03 .nav .footer-btn-wrap .login-btn:hover {

background: #fff;

color: #c4341a;

opacity: 1;

}

#footer03 .area {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: justify;

-webkit-justify-content: space-between;

-ms-flex-pack: justify;

justify-content: space-between;

}

#footer03 .nav {

display: -webkit-box;

display: </