コピペOK・簡単・シンプルでオシャレなフッターデザイン【レスポンス対応・CSSのみ】

こんにちは、今回はシンプルでオシャレなフッターを作っていきます。簡単に作れて仕込みも簡単なので小規模のHPにむいていると思います。それではやっていきます。

HTMLでフッターを作る
CSSで装飾

HTMLでフッターを作る

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <script src="https://use.fontawesome.com/926fe18a63.js"></script>
  <title>Document</title>
</head>
<body>
  <footer>
    <div class="container">
      <nav class="footB">
        <ul>
          <li><a href="https://yotamatsumaru.jp/blog/used_car_1/">TOP</a></li>
          <li><a href="https://yotamatsumaru.jp/blog/used_car_1/">MENU</a></li>
          <li><a href="https://yotamatsumaru.jp/blog/used_car_1/">CONCEPT</a></li>
          <li><a href="https://yotamatsumaru.jp/blog/used_car_1/">NEWS</a></li>
          <li><a href="https://yotamatsumaru.jp/blog/used_car_1/">SNS</a></li>
          <li><a href="https://yotamatsumaru.jp/blog/used_car_1/">ACCESS</a></li>
          <li><a href="https://yotamatsumaru.jp/blog/used_car_1/">CONTACT</a></li>
          <li><a href="https://yotamatsumaru.jp/blog/used_car_1/">TAKE OUT</a></li>
        </ul>
      </nav>
      <div class="footA">
        <div class="foot_img">
          <img src="https://yotamatsumaru.jp/img/logo.png" alt="" width="250px" />
        </div>
      </div>
      <nav class="footC">
        <ul>
          <li><a href="https://www.facebook.com/spoonkokubunji/"><span class="fa fa-facebook"></span></a></li>
          <li>
            <a href="https://twitter.com/kokubunnjispoon"><span class="fa fa-twitter"></span></a>
          </li>
        </ul>
      </nav>
  </footer>
  <script src="./app.js"></script>
</body>
</html>

HTMLのコードをざっくり載せます。構造としては「footB」「footA」「footC」と別れており。項目、ロゴ、SNSとなっています。このまま順番を変えることも可能です。コピペでもOKです。

アイコンはfontawesomeを使用しています。

CSSで装飾

* {
  margin: 0;
}

footer {
  height: auto;
  color: #fff;
  background-color: #000;
}

footer .container {
  max-width: 1200px;
  padding: 20px 20px;
  margin: 0 auto;
}

/* ----------------------------- */

.footA {
  display: flex;
  align-items: center;
  justify-content: center;
}

.footA p {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 14px;
}

/* ----------------------------- */

.footB {
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footB ul {
  text-align: center;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.footB a {
  display: block;
  padding: 0;
  padding-bottom: 2px;
  margin-bottom: 10px;
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  margin-right: 0px;
  line-height: 20px;
  border-bottom: 3px solid #000;
  transition: 0.5s;
  letter-spacing: 3px;
}

.footB a:hover {
  border-bottom: 3px solid #fff;
}

@media(min-width:1024px) {
  .footB ul {
    display: flex;
  }

  .footB a {
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 0;
  }
}

/* ----------------------------- */

.footC {
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footC ul {
  display: flex;
  text-align: center;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.footC a {
  display: block;
  border-radius: 20px;
  padding: 5px;
  background-color: #000;
  font-size: 25px;
  color: #fff;
  width: 30px;
  height: 30px;
}

.footC a {
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 0;
}

CSSも先にのせてしまいます。解説がいらないという方はコピペで機能します。

フッターの幅を決める

footer {
height: auto;
color: #fff;
background-color: #000;
}

footer .container {
max-width: 1200px; //幅を指定
padding: 20px 20px;
margin: 0 auto;
}

footerの基本的な設定をしてあげます。paddingや全体的な幅、色など基本的な設定です。

ロゴを入れる

.footA {
display: flex;
align-items: center;
justify-content: center;
}

.footA p {
margin-top: 0;
margin-bottom: 0;
font-size: 14px;
}

画像の場合はHTMLの方で幅を決めていますが、<P>タグでの文字の場合は大きさなど設定してください。

.foot内の子要素をflexにして中央に寄せています。

フッターメニューをつくる

.footB {
padding: 20px 0;
display: flex;
align-items: center;
justify-content: center;
}

.footB ul {
text-align: center;
margin: 0 auto;
padding: 0;
list-style: none;
}

footBに対してflexとしていします。footB同様中央寄せします。

.footB a {
display: block;
padding: 0;
padding-bottom: 2px;
margin-bottom: 10px;
color: #fff;
font-size: 18px;
text-decoration: none;
margin-right: 0px;
line-height: 20px;
border-bottom: 3px solid #000;
transition: 0.5s;
letter-spacing: 3px;
}

.footB a:hover {
border-bottom: 3px solid #fff;
}

このように縦一列に並べ中央寄せにします。

border-bottomを背景と同じ色にしておいて、hover時に白になるように設定します。

あとは細かい文字の大きさや間隔の設定なので自由に決めてください。

フッターメニューのレスポンシブ対応

このままでもフッターメニューとして機能しますが、パソコンで見たとき横に並べたいので、footBのメニューを画面はば1024px以上の場合に横並びになるように設定しましょう！

@media(min-width:1024px) {
  .footB ul {
    display: flex;
  }

  .footB a {
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 0;
  }
}

メディアクエリを使いフッターメニューに対してflexを入れましょう！↓横並びになります

こちらのサンプルは記事の関係で少し間隔を詰めています。お好みでmarginを設定してください。

SNSアイコンをいれる

最後にSNSアイコンを入れますSNSアイコンはfootBと同じやり方です。違う点として、常に横並びにするので、メディアクエリを使わず常にflexさせます。

.footC {
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footC ul {
  display: flex;
  text-align: center;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.footC a {
  display: block;
  border-radius: 20px;
  padding: 5px;
  background-color: #000;
  font-size: 25px;
  color: #fff;
  width: 30px;
  height: 30px;
}

.footC a {
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 0;
}

こんな感じにロゴが使えればOKです！hoverを追加してもいいと思います。

まとめ

以上で完成です。あとはお好みにアレンジしてオリジナルフッターを作ってみてください！

今回のデータ↓

yotamatsumaru/futter_simple

futter_simple HTMKcode. Contribute to yotamatsumaru/futter_simple development by creating an account on GitHub.

このフッターを使用して作ったサイト↓

欧風カレー工房すぷーん