BLOG
25年新卒 WEBエンジニア インターンシップ 受付中

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

更新日:2020/12/09

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

Footer DEMO

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

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

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

PC
ロゴとメニューが縦に並んでいるフッター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
ロゴとメニューが横に並んでいるフッター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
ロゴとメニューが横並びで、子メニューがあるフッター PC

SP
ロゴとメニューが横並びで、子メニューがあるフッター スマホ

HTML

CSS(PC)