フッターデザイン【レスポンシブサイトのサンプルソース】
更新日:2020/12/09
コーディングを始めたてのころは誰でもPCのサイトを作ることに精一杯になり、スマートフォン用の展開をおこないやすいコードを書くことが頭から抜け落ちてしまいますよね。今回の記事では、レスポンシブサイトでよく見かけるフッターを、どのようにレスポンシブ化するかを理解していただくことが目的となっています。より理解しやすいようコードを丸っと貼っておりますので、記事が長くなっています。予めご了承ください。また、今回の記事に登場するフッターは、以下のデモページより確認していただけます。こちらも合わせてご覧ください。
- ロゴとメニューが縦に並んでいるフッター【難易度★☆☆】
- 横並びを縦並びにするテーブルレスポンシブ【難易度★☆☆】
- ロゴとメニューが横並びで、子メニューがあるフッター【難易度★★☆】
- メニューが多いフッター【難易度★★★】
- 会社概要エリアとメニューが50%ずつ並んでいるフッター【難易度★★☆】
- ロゴとメニューが縦に並んでいて、横に地図があるフッター【難易度★★☆】
- 終わりに
1ロゴとメニューが縦に並んでいるフッター【難易度★☆☆】
ロゴが上にあり、その下にナビゲーションメニューが横並びになっているだけのシンプルなものです。こちらのHTMLを見ると分かりますが、logoのdivとnavのulが上下に並んでいるシンプルな作りになっています。このタイプのフッターをコーディングするためにはリストを横並びにする必要があります。親にFlexboxを当てるか、liタグにinline-blockを設定することで横並びになります。
PC
SP
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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> |
CSS(PC)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
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を当てるほうが親切です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
@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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<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> |
CSS(PC)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
#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)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
@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個程度が望ましいかと思っています。
PC
SP
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<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> |
CSS(PC)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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: |