コピペでOK！HTML・CSSでよくあるfooterテンプレート

footerのデザインってどこも似ていて同じだったりしますよね。あまり重要度が高くないためサクッとfooterを作りたい時用にfooterのテンプレートを作ってみました。

Tailwind CSSやBootstrapとかは使わず、そのままのHTML・CSSで作ります。

細かいスタイルの指定はサイトによって異なると思うので、環境に合わせて編集してください。

分かりやすくするために色も指定しているので、不要な場合や変えたい場合は編集してください。

クラスの命名は適当なので、プロジェクトに合わせて変更してください。

レスポンシブなのでディスプレイサイズを広げたり縮めたりしながらご確認ください。

シンプルなフッターテンプレート

基本的なシンプルなデザインのフッターです。
文字数やナビの項目数によって少し変わるかも知れませんね。

See the Pen footer2 by JAJAAAN Dev.01 (@jajaaan_dev01) on CodePen.

上記フッターデザインのコピーライトとナビを逆にしたバージョンです。

See the Pen footer by JAJAAAN Dev.01 (@jajaaan_dev01) on CodePen.

ロゴありフッター

フッターにはサイトロゴなどを入れるケースが多いですよね。以下はロゴありのfooterになります。

See the Pen footer3 by JAJAAAN Dev.01 (@jajaaan_dev01) on CodePen.

色を変えたバージョン

背景が濃色の場合のフッターです。

See the Pen Untitled by JAJAAAN Dev.01 (@jajaaan_dev01) on CodePen.

情報を増やしたフッター

よく見る形のfooterですね。

See the Pen footer5 by JAJAAAN Dev.01 (@jajaaan_dev01) on CodePen.

主なサービス内容や、会社案内などをフッターに記載することは多いと思います。そういった場合にはこのようにナビゲーションを付けると良いですね。

display: grid;プロパティでモバイルサイズだとナビゲーションが2カラムになります。

カラム数は、grid-template-columnsでナビゲーションの数に合わせて変更してください。

連絡先要素追加したパターン

See the Pen footer6 by JAJAAAN Dev.01 (@jajaaan_dev01) on CodePen.

連絡先を追加したパターンのfooterです。

連絡先などの情報はaddressタグで囲みます。

住所などが長い場合は、閲覧サイズによって改行される場合があるので注意します。

電話番号などを設置する場合はスマホでタップできることが分かるように色を変えたり、下線を入れるといいかもしれません。

PCなどのデバイスではこのリンク機能はいらないので、下線を消したり、pointer-events: none;でクリックができないようにします。

SNSへのリンクを追加したパターン

See the Pen footer7 by JAJAAAN Dev.01 (@jajaaan_dev01) on CodePen.

アイコンでSNSへのリンクを追加したパターンです。
アイコンは画像でも良いですし、アイコンフォントでもいいでしょう。サービスにはアイコン使用のガイドラインなどがあるのでそちらを確認してデザインするようにします。

情報を一覧表示したフッター

今度はサイトロゴを消して情報を一覧表示させたフッターを作ってみます。

下記サンプルの場合、ナビゲーションリストが1024px以上の横幅で5カラム、1024px〜768pxで3カラム、768以下で2カラムとなっています。
サイトの情報が多い場合は、こちらのほうがユーザーにとって便利かもしれませんね。

See the Pen footer8 by JAJAAAN Dev.01 (@jajaaan_dev01) on CodePen.

それぞれの文字数や、どのサイズでカラムを変化させるのかなどに注意が必要です。

項目が多くなる場合は、スマホなどではアコーディオンコンテンツにするなどすると良いかもしれません。

お店やクリニックなどで使えるフッター

お店やクリニックなどで使えるフッターです。

See the Pen footer8 by JAJAAAN Dev.01 (@jajaaan_dev01) on CodePen.

少し作り込みが荒いので細かい調整が必要になるかもしれません。

まとめ

いかがでしたでしょうか。

基本的なhtml・cssのfooterについて見てきました。

実際にはページ全体とデザインを合わせる必要があるため、このままでは使えないですが、色味を変えたり、微調整をすれば汎用的に使えるデザインかと思います。

サクッとfooterを作りたいというときによければ使ってください。