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
• 住所、地図

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選