CSS フッター デザインテンプレート2選

ウェブサイトのメインレイアウトで使われるよくあるフッターをHTMLとCSSをテンプレートで用意しました。

コピペで自由に使ってください。

店舗・中小企業版

See the Pen
css footer
by kura (@kuranopen)
on CodePen.

コンテンツがまだ少ない店舗や中小企業向けのフッターです。

特徴

  • 問い合わせしやすい、店舗の場所が分かりやすい(Google Mapにリンクするよ尚良し)
  • ユーザーを迷わせないようにナビゲーション
  • SNSに対応

HTML&CSS

See the Pen
css footer
by kura (@kuranopen)
on CodePen.

仕様

  1. Fontawesome使用
  2. レスポンシブ対応

コンテンツが充実している店舗・中小企業版

See the Pen
css footer
by kura (@kuranopen)
on CodePen.

コンテンツがまだ多い店舗や中小企業向けのフッターです。

  • 問い合わせしやすい、店舗の場所が分かりやすい(Google Mapにリンクするよ尚良し)
  • 全コンテツを網羅できるナビゲーション
  • SNSに対応

HTML&CSS

See the Pen
css footer
by kura (@kuranopen)
on CodePen.

仕様

  1. Fontawesome使用
  2. レスポンシブ対応

いいフッターとはを考える

目的

  • 迷わせないナビゲーション
  • 運営者を明確にする表記
  • 企業情報
  • ナビゲーション
  • 住所、地図
  • プライバシーポリシーなどへのリンク
  • SNSへのリンク
  • Copyright

専門店

  • 電話番号/FAX
  • 住所、地図

デザイナーのUIメモ帳

レイアウト

ヒーローエリア

フォーム

画像

テキスト

ナビゲーション

コンテンツ

CSSデザインサンプル

モバイルサイト

Javascript

Google Map

Youtube

  • このエントリーをはてなブックマークに追加

プロフィール

kura

WEBで食べていきたいWEBデザイナーです。
WEBデザイン初心者向けになるべく分かりやすいように解説しています。 そのほか、WEBデザインの便利ツール紹介、開発したりしています。