BLOG

【保存版】レスポンシブサイトでよく見かける「あのフッター」どうやって作っているの? デザイン別パターン6種類

2020/06/23

レスポンシブサイトでよく見かける「あのフッター」どうやって作っているの? デザイン別パターン

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

Footer DEMO

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

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

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

PC

SP

HTML

CSS(PC)

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

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

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

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

PC

SP

HTML

CSS(PC)

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

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

CSS(SP)

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

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

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

PC

SP

HTML

CSS(PC)

前回までと同様に、ロゴ&ナビゲーション、ナビゲーション&ボタンに対して大枠のdivがあります。今回は「制作実績」メニューに子メニューが増えていますが、これは制作実績のliタグの中に、新たにulを追加すると実現できるとてもシンプルなものとなっています。子メニューのulタグに新たなクラスを当てて、メニューの横に飾りをつけるなどして差別化を図ることができます。今回は、nav-childというクラスにしました。こちらのCSSを見てみると分かりやすいかと思います。

CSS(SP)

jQuery

また、この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

CSS(PC)

4列になっているメニューはそれぞれ.cont-itemで囲っています。今回のようにブロックごとに分けておくと、SP時では左右や上下に詰みたいときに展開しやすいという利点があります。幅はwidth: calc(100% / 4);とありますが、これは幅100%を4分割した幅にする、という記述です。width: 25%;と同じ意味になりますが、例えば.cont-itemに属するものが5個、6個と増えていったときに、毎回割合を計算せずとも、width: calc(100% / 6);と数字を変えるだけで反映できるので使いどころによってはとても便利です。

CSS(SP)

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

CSS(PC)

画像のエリアとメニューのエリアをflexなどで横並びにすると実現できます。これまでは、メニューエリアに対して.inner-blockでというクラスでwidth: 1120px決め打ち、margin: auto;で真ん中に表示されるよう指定されていました。これによりコンテンツが中央に表示されていましたが、今回の2つのエリアはwidth: 50%; と幅がpx決め打ちで指定されていません。こうすることで画面幅いっぱいに二つの要素を並べることができるようになります。

CSS(SP)

SPでは横並びにしていたCSSを解除して、縦に詰んでいるシンプルなものとなっています。ここまでのフッターを見てきた方なら簡単にレスポンシブ化できるのではないでしょうか。今回のメニューは文字数が多く、SPでは2行になってしまうこともあったので、aタグ内をdisplay: flex;/align-items: center;にし、テキストが1行でも2行でも、aタグの高さに対して真ん中にくるようにしました

6ロゴとメニューが縦に並んでいて、横に地図があるフッター【難易度★★☆】

最後はメニューの横にGoogle Mapが埋め込まれているフッターです。会社へのアクセス方法や位置をよりわかりやすく伝えることができるので、店舗や病院といったウェブサイトで使われていることが多いようです。Google Mapの埋め込みソースは公式サイトからすぐにもってこれるので活用してみてください。やり方はこちらからどうぞ。

PC

SP

HTML

CSS(PC)

メニューのエリアと地図のエリアを横並びにするだけで実現できます。.mapで幅と高さを指定し、iframeの幅と高さを100%にすると表示サイズの調整がとても楽です。特に特別なこともしていないので、ソースもすっきりとしています。住所の横にアクセントとして縦線をつけていますが、これはborderでも疑似要素でもどちらでもいいかと思います。凝ったデザインにしやすいのは疑似要素なので使い分けていただければと思います。

CSS(SP)

SPでは横並びを解除し、メニューや地図のサイズなどを調整する程度で完成することができます。

上記で取り上げたフッターは以下のデモページに全てまとめていますので、細かなソースをご覧になりたい場合はこちらのサイトを参考にしていただければと思います。

Footer DEMO

終わりに

PCのコーディングをするときからSPの展開を考えられるようになると、効率的なウェブサイト作りができるようになります。今回のフッターの作り方のソースを参考に、多くの人が初心者コーダーを脱却してより凝ったデザインのものも作れるようになることを祈っています。

また、近年のWEB制作では、今回の記事で取り上げたようなレスポンシブ対応が主流になっています。BRISKでは、フッターの他にもテーブルやフォームなどをレスポンシブにする方法も紹介していますので、以下の記事もぜひ合わせてご覧ください。

▼これまでのレスポンシブ記事はこちら
もう悩まない。CSSでレスポンシブなtableデザイン&コーディングカンタン!CSSでフォームをレスポンシブにしよう