【Vue/コピペで即解決】公式っぽいフッターを5分で作成する方法を解説

template

早速フッターを作っていきましょう

下記コードをtemplateタグ内にコピペしてください

<footer>
 <div id="nav">
  <router-link to="/" class="tab" exact>Home</router-link>
  <router-link to="/profile" class="tab" exact>Profile</router-link>
  <router-link to="/gallery" class="tab" exact>Gallery</router-link>
  <router-link to="/contact" class="tab" exact>Contact</router-link>
  <p>© プロジェクト名とか All rights reserved.</p>
 </div>
</footer>

router-link toのところはナビゲーション部分なので開発中のタブに合ったリンクを挿入してくれればオッケーです

はい次はstyleタグです

style

こちらも同じく下記コードをstyleタグへコピペしましょう

footer {
 min-height: 50vh;
 position: relative;
}
#nav {
 width: 100%;
 padding: 20px 10px 10px 0;
 text-align: center;
 background-color: rgb(241, 241, 241);
 bottom: 0;
 position: absolute;
}

#nav .tab {
 padding-right: 30px;
 color: black;
 font-weight: bold;
 font-size: 10px;
}

#nav a.router-link-exact-active {
 color: rgb(163, 163, 163);
}

#nav p {
 font-size: 7px;
}

これで画面最下部に固定されたそれなりに公式っぽいデザインのフッターが完成したと思います

念のため参考までに完成イメージを貼っときます

以上です

参考

そもそもWebデザインの基礎がわからない。。
そんなあなたにはこれ!

ふたご


でもなあ、独学だと心配だしプログラミングスクールで学びたい!。かといってお金はかけたくないし。。
そんなあなたにはこれ!

ふたご

完全無料で一人前のエンジニアになれるプログラミングスクールあります
  1. プログラミング学習&サポートが無料!
  2. 誰もが知っている超優良企業への就職サポート付き!
  3. 学習言語:Java、PHP、HTML、CSSなど

 

   話だけ聞いてみる