【CSS】flexboxで3カラムのフッターを作る。真ん中の要素は中央揃え!

【CSS】flexboxで3カラムのフッターを作る。真ん中の要素は中央揃え!

こんにちは、ゆうや(@yuyaphotograph)です!

この記事では、

  • CSSのflexboxを使って、3カラムのフッターを作れるようになりたい
  • 3カラムのコンテンツで真ん中の要素を中央揃えする方法が知りたい
  • ロゴ/コピーライト/リストメニューの構成のフッターをflexboxでコーディングしたサンプルコードが見たい

という方のお悩みを解決します!

サンプルを画像とCodePenで確認

この記事で紹介するコードを使用すると、以下のようなフッターを作ることができます!

▼▼▼

flexboxで作るフッターのサンプル

  • 左がロゴ画像
  • 真ん中はコピーライト
  • 右がリストメニュー

上記のような構成のフッターです!!

真ん中の要素が中央にピタッと寄っているのが特徴です。

 

CodePenで、表示確認もしてみましょう〜

▼▼▼

See the Pen
oNbLjEb
by 石森裕也 (@yuyaphotograph)
on CodePen.

画面幅が狭いのでクシャッとなってしまっていますが、CodePenのページへ移動してみていただければ先程の添付画像のように表示されます!

真ん中の要素は中央揃えの3カラムフッターを作るコード

HTMLとCSSのサンプルコードを紹介します!

HTML

HTML
<div class="Inner">
  <div class="Inner-Left">ロゴ</div>
  <div class="Inner-Center">&copy;Copyright2020 〇〇〇〇</div>
  <div class="Inner-Right">
    <div class="Inner-Right-Content">
      <a href="" class="Inner-Right-Content-Item">運営会社</a>
      <a href="" class="Inner-Right-Content-Item">利用規約</a>
      <a href="" class="Inner-Right-Content-Item">プライバシーポリシー</a>
    </div>
  </div>
</div><div class="Inner">
  <div class="Inner-Left">ロゴ</div>
  <div class="Inner-Center">&copy;Copyright2020 〇〇〇〇</div>
  <div class="Inner-Right">
    <div class="Inner-Right-Content">
      <a href="" class="Inner-Right-Content-Item">運営会社</a>
      <a href="" class="Inner-Right-Content-Item">利用規約</a>
      <a href="" class="Inner-Right-Content-Item">プライバシーポリシー</a>
    </div>
  </div>
</div>

CSS

CSS
.Inner{
  margin-left: auto;
  margin-right: auto;
  /* 最大幅指定 */
  max-width: 1200px;
  
  /* 子要素を横並び */
  display: flex;
  justify-content: space-between;
}
.Inner-Left{
  /* 横幅指定 */
  flex: 2;
  
  display: flex;
  align-items: center;
  background: #000;
  color: #fff;
}
.Inner-Center{
  /* 横幅指定 */
  flex: 1;
  
  display: flex;
  justify-content: center;
  align-items: center;
  background: #5bc8ac;
  color: #fff;
  font-size: 14px;
}
.Inner-Right{
  /* 横幅指定 */
  flex: 2;
  
  background: #000;
  color: #fff;
}
.Inner-Right-Content{
  /* 右寄せ */
  margin-left: auto;
  /* 最大幅指定 */
  max-width: 160px;
}
.Inner-Right-Content-Item{
  display: block;
  text-decoration: none;
  color: inherit;
  font-size: 14px;
}

左と右の要素にはflex:2;を、中央揃えしたいコピーライトにはflex:1;をそれぞれ指定してあげるのが肝です!

レスポンシブのコードは省略しましたが、実際にそれをコーディングする際は、flex: 0 1 auto;で初期値に戻してあげて、width:100%を指定してあげましょう〜

そんで、親要素には折返しを許可するflex-wrap:wrap;を指定してあげればOKです(^^)

まとめ

以上、真ん中の要素だけ中央揃えした3カラムのフッターの作り方を紹介しました。

ぼくが実際のWeb制作案件で使用したコードですので、ぜひ使ってみていただければな〜と思います!

 

「フッターのコーディングで役に立つTipsをもっと知りたい!」

という方は以下の記事も目を通してみてください〜

フッター固定メニューを作る方法【HTML・CSSをコピペで実装】フッター固定メニューを作る方法【HTML・CSSをコピペで実装】 jQueryでフッター手前で止まるボタンの実装方法【jQuery】フッター手前で止まるボタンの実装方法 【CSS フッター】コンテンツ量が少ないページで最下部に固定する方法【CSS フッター】コンテンツ量が少ないページで最下部に固定する方法

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です