コーディングを始めたてのころは誰でもPCのサイトを作ることに精一杯になり、スマートフォン用の展開をおこないやすいコードを書くことが頭から抜け落ちてしまいますよね。今回の記事では、レスポンシブサイトでよく見かけるフッターを、どのようにレスポンシブ化するかを理解していただくことが目的となっています。より理解しやすいようコードを丸っと貼っておりますので、記事が長くなっています。予めご了承ください。また、今回の記事に登場するフッターは、以下のデモページより確認していただけます。こちらも合わせてご覧ください。
目次
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: -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; } } |
前回までと同様に、ロゴ&ナビゲーション、ナビゲーション&ボタンに対して大枠のdivがあります。今回は「制作実績」メニューに子メニューが増えていますが、これは制作実績のliタグの中に、新たにulを追加すると実現できるとてもシンプルなものとなっています。子メニューのulタグに新たなクラスを当てて、メニューの横に飾りをつけるなどして差別化を図ることができます。今回は、nav-childというクラスにしました。こちらのCSSを見てみると分かりやすいかと思います。
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 36 37 38 39 40 41 42 43 |
@media only screen and (max-width: 640px) { #footer03 .inner-block { padding: 30px 10px 10px; } #footer03 .logo .ja { font-size: 12px; } #footer03 .address { margin: 20px 0; } #footer03 .nav { width: calc(100% + 20px); margin-left: -10px; } #footer03 .nav li { border-top: 1px solid #555; } #footer03 .nav li a { display: block; padding: 12px 20px; background-size: 6px auto; } #footer03 .footer-btn-wrap { display: flex; align-items: flex-start; justify-content: space-around; padding-top: 15px; border-top: 1px solid #ebebeb; } #footer03 .js-aco li a { padding-left: 40px; } #footer03 .nav .footer-btn-wrap a { padding: 10px; width: 40%; } #footer03 .copyright { font-size: 10px; text-align: center; } } |
jQuery
|
1 2 3 4 5 6 7 8 |
/* アコーディオンメニュー ------------------------------*/ $('.nav .js-aco').click(function () { $(this).next().stop().slideToggle(); $(this).toggleClass('is-active'); }); |
また、このnav-childの親に当たるaタグ（制作実績）にjs-acoというクラスをつけ、タップするとSPでメニューが開閉するというjQueryの記述をつけています。slideToggle()を用いたこの書き方ですと、複雑なコードを書かなくても要素の表示・非表示の設定をおこなえるのでぜひ試してみてください。また、nav-childの親にもしnav-childがタップされたら.is-openというクラスがつくようにしています。もし.is-openがついたら、.ico-openという要素がプラスやマイナスのアイコンに切り替わるようにしています。
4メニューが多いフッター【難易度★★★】
下層ページが多いサイトに使われやすいフッターデザインとなっています。親メニューを太字、子メニューを細字にし、サイトマップを一目で確認できるような構成になっています。また、4列だったメニュが－SP時には2列になっています。1列でも良いかと思いますが、縦に長いフッターとなってしまうのであまりコンテンツの高さを取りたくないときはこちらのコーディングを参考にしてみてください。
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 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 |
<footer id="footer04" class="outer-block footer"> <div class="inner-block"> <div class="cont"> <div class="cont-item"> <div class="nav"> <div class="ttl"><span>社長日記</span></div> <ul> <li><a href="https://b-risk.jp/category/president-diary/">社長日記一覧</a></li> </ul> <div class="ttl"><span>新卒ブログ</span></div> <ul> <li><a href="https://b-risk.jp/category/new-grad/">新卒ブログ一覧</a></li> </ul> <div class="ttl"><a href="https://b-risk.jp/engineer_recruit/">エンジニア採用2020</a></div> <div class="ttl"><a href="https://b-risk.jp/faq/">よくある質問</a></div> <div class="ttl"><a href="https://b-risk.jp/contact/">お問い合わせ</a></div> </div> </div> <div class="cont-item"> <div class="nav"> <div class="ttl"> <a href="https://b-risk.jp/about/">会社概要</a> </div> <ul> <li><a href="https://b-risk.jp/about/">株式会社BRISKとは</a></li> </ul> <div class="ttl"> <span>制作実績</span> </div> <ul> <li> <a href="https://b-risk.jp/works/">コーポレートサイト</a> <ul> <li><a href="https://b-risk.jp/works/">制作事例</a></li> <li><a href="https://b-risk.jp/works/">制作事例</a></li> </ul> </li> <li> <a href="https://b-risk.jp/works/">ポータルサイト</a> <ul> <li><a href="https://b-risk.jp/works/">制作事例</a></li> <li><a href="https://b-risk.jp/works/">制作事例</a></li> </ul> </li> <li><a href="https://b-risk.jp/contact/">無料相談はこちら</a></li> </ul> </div> </div> <div class="cont-item"> <div class="nav"> <div class="ttl"><a href="https://b-risk.jp/works/">制作実績</a></div> <ul> <li><a href="https://b-risk.jp/works/">制作実績1</a></li> <li><a href="https://b-risk.jp/works/">制作実績2</a></li> <li><a href="https://b-risk.jp/works/">制作実績3</a></li> <li><a href="https://b-risk.jp/works/">制作実績4</a></li> <li><a href="https://b-risk.jp/works/">制作実績5</a></li> </ul> <div class="ttl"><span>ブログ</span></div> <ul> <li> <a href="https://b-risk.jp/blog/">ブログ一覧</a> </li> </ul> </div> </div> <div class="cont-item"> <div class="nav"> <div class="ttl"><a href="https://b-risk.jp/company/">会社概要</a></div> <ul> <li><a href="https://b-risk.jp/about/">沿革</a></li> <li><a href="https://b-risk.jp/about/">沿革</a></li> <li><a href="https://b-risk.jp/about/">沿革</a></li> </ul> </div> <div class="company"> <a href="https://b-risk.jp/" class="logo"> <img src="img/logo.svg" alt="BRISK"> </a> <div class="address"> 〒135-0002<br> 東京都江東区住吉1丁目17-20<br> 住吉ビル7F </div> </div> </div> </div> </div> <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 |
#footer04 { background: #222; } #footer04 .cont { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 30px 0; } #footer04 .cont-item { display: block; width: calc(100% / 4); } #footer04 .nav a { display: block; color: #ccc; } #footer04 .nav .ttl { display: block; margin: 30px 0 6px; font-size: 12px; font-weight: bold; color: #ccc; } #footer04 .nav .ttl:first-child { margin-top: 0; } #footer04 .nav .ttl + .ttl { margin-top: 10px; } #footer04 .nav ul { display: block; font-size: 12px; line-height: 2; } #footer04 .nav li { display: block; font-size: 12px; line-height: 2; } #footer04 .nav li:first-child { margin-top: 0; } #footer04 .nav li ul { margin: 0 0 0 2em; } #footer04 .nav li li { position: relative; } #footer04 .nav li li:before { position: absolute; top: 50%; left: -10px; content: ""; display: block; width: 4px; height: 1px; background-color: #fff; } #footer04 .company { display: block; margin-top: 62px; } #footer04 .logo img { width: 120px; } #footer04 .address { display: block; margin: 28px 0 0; font-size: 12px; line-height: 2; color: #ccc; } |
4列になっているメニューはそれぞれ.cont-itemで囲っています。今回のようにブロックごとに分けておくと、SP時では左右や上下に詰みたいときに展開しやすいという利点があります。幅はwidth: calc(100% / 4);とありますが、これは幅100%を4分割した幅にする、という記述です。width: 25%;と同じ意味になりますが、例えば.cont-itemに属するものが5個、6個と増えていったときに、毎回割合を計算せずとも、width: calc(100% / 6);と数字を変えるだけで反映できるので使いどころによってはとても便利です。
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 screen and (max-width: 640px) { #footer04 .cont { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; justify-content: space-between; } #footer04 .cont-item { display: block; width: 48%; } #footer04 .cont-item:nth-child(n+3) { margin-top: 30px; } #footer04 .nav ul { margin: 0; font-size: 10px; } #footer04 .nav ul + .ttl { margin-top: 10px; } #footer04 .nav li { font-size: 10px; } #footer04 .company { margin-top: 30px; } #footer04 .address { margin: 10px 0 0; font-size: 10px; } } |
PCではwidth: calc(100% / 4);と指定した.cont-itemをwidth: 50%;に変えることで2列にできます。また、3つ目の.cont-itemからmargin-topで上に適度な余白を作るとさらに見やすくなるでしょう（.cont-item:nth-child(n+3)箇所）。ほかのフッターのように、幅100%で上下に線をつけることも可能です。その場合は、Footer03で紹介したtoggleのjQueryを使うと良いと思います。
5会社概要エリアとメニューが50%ずつ並んでいるフッター【難易度★★☆】
これまでは暗めの背景のコンテンツエリアにメニューやボタンがまとまっていましたが、今回は画像が背景のエリアとメニューのエリアが分断されているフッターです。以下のように画像を背景に貼って会社のイメージを視覚的に伝えるのもありでしょうし、住所やお問い合わせボタンなどのコンテンツをより目立たせることも可能になるかと思います。
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 |
<footer id="footer05" class="footer outer-block"> <div class="main"> <div class="left"> <div class="inner"> <div class="head clearfix"> <div class="logo"> <a href="https://b-risk.jp/"><img src="img/logo.svg" alt="BRISK"></a> </div> <p class="address">〒135-0002<br>東京都江東区住吉1丁目17-20 <br class="sp">住吉ビル7F</p> </div> <div class="c-btn"> <a href="https://b-risk.jp/contact/"><span>お問い合わせ</span></a> </div> </div> </div> <div class="right"> <div class="inner"> <ul class="nav"> <li><a href="https://b-risk.jp/about/">会社概要</a></li> <li><a href="https://b-risk.jp/works/">制作実績1</a></li> <li><a href="https://b-risk.jp/works/">制作実績2</a></li> <li><a href="https://b-risk.jp/works/">制作実績3</a></li> <li><a href="https://b-risk.jp/works/">制作実績4</a></li> <li><a href="https://b-risk.jp/blog/">ブログ</a></li> <li><a href="https://b-risk.jp/plan-photo/">写真撮影付きホームページ制作プラン</a></li> <li><a href="https://b-risk.jp/engineer_recruit/">エンジニア採用2020</a></li> <li><a href="https://b-risk.jp/contact/">ご依頼・お問い合わせ・無料相談はこちら</a></li> <li><a href="https://b-risk.jp/faq/">よくあるご質問</a></li> </ul> </div> </div> </div> <div class="copyright"> COPYRIGHT © BRISK Inc. All rights Reserved. </div> </footer> <pre><code> |
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 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 |
#footer05 {ｆ position: relative; } #footer05 .main .left { background: url(../img/footer04/bg.jpg) no-repeat center / cover; padding: 50px 40px; } #footer05 .main .logo { margin-bottom: 16px; text-align: center; } #footer05 .main .logo > a { display: inline-block; } #footer05 .main .address { color: #fff; font-size: 14px; line-height: 1.6; margin-bottom: 17px; text-align: center; } #footer05 .main .right { background: #222; } #footer05 .main .nav a { color: #ccc; } #footer05 .main .c-btn { margin-top: 10px; } @media only screen and (min-width: 641px) { #footer05 .main { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } #footer05 .main .left { width: 50%; } #footer05 .main .left > .inner { margin-left: auto; text-align: center; width: 500px; } #footer05 .main .head { display: inline-block; font-size: 0; } #footer05 .main .logo { display: inline-block; margin-bottom: 0; vertical-align: middle; } #footer05 .main .logo > a { width: 100px; } #footer05 .main .address { display: inline-block; margin-bottom: 0; margin-left: 20px; padding-left: 20px; position: relative; text-align: left; vertical-align: middle; } #footer05 .main .address::before { background-color: #fff; bottom: 0; content: ''; height: 30px; left: 0; margin: auto; position: absolute; top: 0; width: 1px; } #footer05 .main .btn-wrap { margin: 0 auto; margin-top: 20px; width: 280px; } #footer05 .main .btn-wrap > .btn-contact { border-radius: 5px; } #footer05 .main .btn-wrap > .btn-contact > span { height: 48px; line-height: 50px; } .ie #footer05 .main .btn-wrap > .btn-contact > span { line-height: 52px; } #footer05 .main .right { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 50%; } #footer05 .main .right > .inner { padding-left: 40px; width: 600px; } #footer05 .main .nav { font-size: 0; margin-bottom: -20px; } #footer05 .main .nav > li { display: inline-block; font-size: 13px; margin-bottom: 20px; margin-right: 15px; } #footer05 .main .nav a { padding-right: 10px; position: relative; } #footer05 .main .nav a::before { content: '>'; position: absolute; height: 3px; right: 0; top: 0; width: 5px; font-size: 12px; } #footer05 .main .nav a:hover { color: #c4341a; opacity: 1; } #footer05 .main .nav a:hover::before { color: #c4341a; } } |
画像のエリアとメニューのエリアをflexなどで横並びにすると実現できます。これまでは、メニューエリアに対して.inner-blockでというクラスでwidth: 1120px決め打ち、margin: auto;で真ん中に表示されるよう指定されていました。これによりコンテンツが中央に表示されていましたが、今回の2つのエリアはwidth: 50%; と幅がpx決め打ちで指定されていません。こうすることで画面幅いっぱいに二つの要素を並べることができるようになります。
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 |
@media only screen and (max-width: 640px) { #footer05 .main .nav { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-wrap: wrap; } #footer05 .main .nav > li { width: 50%; border-bottom: 1px solid #ccc; display: inline-block; } #footer05 .main .nav > li:nth-child(odd) { border-right: 1px solid #ccc; } #footer05 .main .nav a { font-size: 11px; padding: 20px 10px; padding-right: 15px; 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; height: 60px; } } |
SPでは横並びにしていたCSSを解除して、縦に詰んでいるシンプルなものとなっています。ここまでのフッターを見てきた方なら簡単にレスポンシブ化できるのではないでしょうか。今回のメニューは文字数が多く、SPでは2行になってしまうこともあったので、aタグ内をdisplay: flex;／align-items: center;にし、テキストが1行でも2行でも、aタグの高さに対して真ん中にくるようにしました。
6ロゴとメニューが縦に並んでいて、横に地図があるフッター【難易度★★☆】
最後はメニューの横にGoogle Mapが埋め込まれているフッターです。会社へのアクセス方法や位置をよりわかりやすく伝えることができるので、店舗や病院といったウェブサイトで使われていることが多いようです。Google Mapの埋め込みソースは公式サイトからすぐにもってこれるので活用してみてください。やり方はこちらからどうぞ。
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 |
<footer id="footer06" class="footer outer-block"> <div class="inner-block"> <div class="cont-wrap"> <div class="cont"> <div class="info"> <a href="https://b-risk.jp/" class="logo"> <img src="img/logo.svg" alt=""> </a> <p class="address"> 〒135-0002<br> 東京都江東区住吉1丁目17-20 <br>住吉ビル7F<br> TEL: 03-6659-5220 </p> </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> </div> <div class="map"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.5130389450183!2d139.80963531525907!3d35.68899068019239!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x601888df84325def%3A0x785b1a31dcab5275!2z5qCq5byP5Lya56S-QlJJU0s!5e0!3m2!1sja!2sjp!4v1591680197693!5m2!1sja!2sjp" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe> </div> </div> </div> <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 |
#footer06 { background: #222; } #footer06 .cont-wrap { padding: 40px 0; } #footer06 .info .address { margin: 20px 0; padding-left: 20px; border-left: 1px solid #fff; color: #ccc; } #footer06 .cont .nav a { color: #ccc; } #footer06 .cont-wrap .map { width: 700px; height: 300px; } #footer06 .cont-wrap .map iframe { width: 100%; height: 100%; } @media only screen and (min-width: 641px) { #footer06 .cont-wrap { 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; } } |
メニューのエリアと地図のエリアを横並びにするだけで実現できます。.mapで幅と高さを指定し、iframeの幅と高さを100%にすると表示サイズの調整がとても楽です。特に特別なこともしていないので、ソースもすっきりとしています。住所の横にアクセントとして縦線をつけていますが、これはborderでも疑似要素でもどちらでもいいかと思います。凝ったデザインにしやすいのは疑似要素なので使い分けていただければと思います。
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 |
@media only screen and (max-width: 640px) { #footer06 .cont-wrap { padding: 30px 0; } #footer06 .cont .logo img { width: 120px; } #footer06 .nav { width: calc(100% + 40px); margin-left: -20px; } #footer06 .nav li { border-top: 1px solid #555; } #footer06 .nav li:last-child { border-bottom: 1px solid #555555; } #footer06 .nav li a { display: block; padding: 12px 20px; background-size: 6px auto; } #footer06 .cont-wrap .map { margin-top: 20px; width: 100%; height: 200px; } } |
SPでは横並びを解除し、メニューや地図のサイズなどを調整する程度で完成することができます。
上記で取り上げたフッターは以下のデモページに全てまとめていますので、細かなソースをご覧になりたい場合はこちらのサイトを参考にしていただければと思います。
終わりに
PCのコーディングをするときからSPの展開を考えられるようになると、効率的なウェブサイト作りができるようになります。今回のフッターの作り方のソースを参考に、多くの人が初心者コーダーを脱却してより凝ったデザインのものも作れるようになることを祈っています。
また、近年のWEB制作では、今回の記事で取り上げたようなレスポンシブ対応が主流になっています。BRISKでは、フッターの他にもテーブルやフォームなどをレスポンシブにする方法も紹介していますので、以下の記事もぜひ合わせてご覧ください。
▼これまでのレスポンシブ記事はこちら
もう悩まない。CSSでレスポンシブなtableデザイン＆コーディングカンタン！CSSでフォームをレスポンシブにしよう
