Vue.jsとBootstrapでおしゃれなヘッダーとフッターを表示しよう!NavbarやNavsの使い方を解説!

ヘッダーを作ろう!
  • URLをコピーしました!

今回は、Vue.jsとBootstrapVueを使ってヘッダーとフッターを作成していこうと思います!
BootstrapのNavbarやNavsを使って実装していきますので、使い方がいまいちわからない方や気になっていた方は、ぜひ参考にしてみてください!

学習に使った本はこちら!

¥2,406 (2022/06/24 13:58時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥3,718 (2022/06/24 16:08時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥3,346 (2022/06/24 13:25時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥3,520 (2022/06/24 16:57時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
クマじい

Amazon Kindle Unlimited でもVue.jsの本はいっぱいあるんじゃ!!

  • 技術書をたくさん読みたい!
  • 色々な技術を学びたい!
初回30日間無料体験があるので、どのような参考書があるか確認してみよう!

Kindle Unlimitedで技術書を読むならタブレットがあるとさらに便利ですよ!
10インチあるとより見やすいと思いますが、7インチでも十分見やすくなります!

¥9,980 (2022/06/23 23:52時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥15,980 (2022/06/24 09:39時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場

まだVue.jsの環境構築をしていない方は、こちらの記事を参考にして構築してみてください!

Vue.jsにBootstrapを導入していない方は、こちらの記事を参考にして導入してみてください!

では、早速ヘッダーとフッターを作っていこうと思います!

クマじい

わしでもおしゃれなヘッダーが作れるかのう?

目次

Navbarを使ってヘッダーを作ろう!

では早速、実装していこうと思います!!

フォルダ構成を整理しておこう!

前回の「Vue.jsにBootstrapを導入してみよう!」を参考にしてくれた方だと、現在のフォルダ構成はこのような感じになっていると思います!

v sample-client 
) node modules 
> public 
v components 
V He IoWoddvue 
V App.vue 
main js 
.gitignore 
b abeLconfig.js 
O package-json 
READMEmd

基本的には、実装したものを「components」に格納していくのですが、このまま全て「components」に格納してしまうと後々大変になってしまいます。

今回は、あまり大きな開発をするわけではないので、components配下に「modules」と「pages」を作成することにします!
「modules」と「pages」の目的は、それぞれこのようにします!

pages

modulesを活用してページを格納します。1画面毎にファイルができてくる想定です!

modules

画面を構成するパーツを格納していくフォルダ。どんどんここに入れていきます!

フォルダの作成は、「components」で右クリック>NewFolderで作成が可能です!
pagesとmodulesを作成してこのようになっていればOKです!

v sample-client 
) node mu)dules 
> assets 
v Com POI" entS 
> rncdules 
> pages 
V App .vue 
JS main js 
O .gitignore 
Babel -config j s 
O 
package-lock.j„. M 
O 
packagejson 
READMEmd

では、早速ヘッダー用のVueファイルを作成していきましょう!
ヘッダーは、App.vueにて使われるのもですのでmodulesに作成していきます!

modulesで右クリック>New Fileでファイルを作成し、名前を「Header.vue」としましょう!
このようになっていれば、大丈夫です!

< sanvle-cl•ent 
@ README-rn•d 
pa 」 50n M 
、 con js 
》 node modules 
main-Js 
V 工 2 = OWOI ; M 
"'tignore 
( modules 
V Header.vue u

ヘッダーを実装していこう!

今回のヘッダーは、BootstrapVueのnavbarを使って実装します。

Header.vueとApp.vueをそれぞれ下のように変更してみてください!
もし、BootstrapVueのサンプルで気に入ったのがあれば、Header.vueの中身を好きなように変更してもらっても大丈夫です!

App.vueは、追加した行に一応コメントを振ってます!
「margin-top: 60px; 」の記載がある方は、ヘッダーを作る上では邪魔なので、消してしまって問題ないです。
(今回は「/* margin-top: 60px; */」とコメントアウトしています!)

Header.vue

<template>
  <div>
    <b-navbar type="dark" variant="dark">
      <b-navbar-nav>
        <b-nav-item href="#">Home</b-nav-item>
        <!-- Navbar dropdowns -->
        <b-nav-item-dropdown text="Lang" right>
          <b-dropdown-item href="#">EN</b-dropdown-item>
          <b-dropdown-item href="#">ES</b-dropdown-item>
          <b-dropdown-item href="#">RU</b-dropdown-item>
          <b-dropdown-item href="#">FA</b-dropdown-item>
        </b-nav-item-dropdown>
        <b-nav-item-dropdown text="User" right>
          <b-dropdown-item href="#">Account</b-dropdown-item>
          <b-dropdown-item href="#">Settings</b-dropdown-item>
        </b-nav-item-dropdown>
      </b-navbar-nav>
    </b-navbar>
  </div>
</template>

App.vue

<template>
  <div id="app">
    <!-- <Header />でHeader.vueを表示 -->
    <Header />
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
// Header.vueをインポート
import Header from "./components/modules/Header";
// components にHeader追加する
export default {
  name: "App",
  components: {
    HelloWorld,
    Header,
  },
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* margin-top: 60px; */
}
</style>

ここまでできたら一旦確認してみましょう!!
下の画面のようにヘッダーが表示されていたらOKです!!

Home Lang • User 
Welcome to Your Vue.js App 
For a guide and recipes on how to configure / customize this project, 
check Out the vue-cli documentation. 
Installed CLI Plugins 
Core Docs 
babel eslint 
Essential Links 
Forum Community Chat Twitter 
Ecosystem 
News 
vue-router 
local host 8080/# 
vuex vue-devtools vue-loader awesome-vue 
bootstrap-btn bootstrap-vue-btn
クマじい

おお!かっこいいのう!

【おまけ】ヘッダーを上部に固定させる

今のままだと、ヘッダーがスクロールすると隠れてしまいます。
もし、画面上部に固定したい場合は、Header.Vueの「b-navbar」に「fixed=”top”」を追加してください!

Header.vue

<template>
  <div>
    <b-navbar type="dark" variant="dark" fixed="top">
      <b-navbar-nav>
        <b-nav-item href="#">Home</b-nav-item>
        <!-- Navbar dropdowns -->
        <b-nav-item-dropdown text="Lang" right>
          <b-dropdown-item href="#">EN</b-dropdown-item>
          <b-dropdown-item href="#">ES</b-dropdown-item>
          <b-dropdown-item href="#">RU</b-dropdown-item>
          <b-dropdown-item href="#">FA</b-dropdown-item>
        </b-nav-item-dropdown>
        <b-nav-item-dropdown text="User" right>
          <b-dropdown-item href="#">Account</b-dropdown-item>
          <b-dropdown-item href="#">Settings</b-dropdown-item>
        </b-nav-item-dropdown>
      </b-navbar-nav>
    </b-navbar>
  </div>
</template>

Navsを使ってフッターを作ろう!

続いてフッターを作っていこうと思います!
フッターは、Navsを使っていきますので、気になる方はBootstrapVueでサンプルを確認してみてください!

modules配下に「Footer.vue」を作成しましょう!

Footer.vueとApp.vueを下のように変更していきましょう!

Footer.vue

<template>
  <footer class="border-top">
    <b-nav align="center">
      <b-nav-item active>Active</b-nav-item>
      <b-nav-item>Link</b-nav-item>
      <b-nav-item>Another Link</b-nav-item>
      <b-nav-item disabled>Disabled</b-nav-item>
    </b-nav>
    <p>Copyright 2021 sample.</p>
  </footer>
</template>

App.vue

<template>
  <div id="app">
    <!-- <Header />でHeader.vueを表示 -->
    <Header />
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <!-- <Footer />でHeader.vueを表示 -->
    <Footer />
  </div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
import Header from "./components/modules/Header";
import Footer from "./components/modules/Footer"; // add
// add Footer
export default {
  name: "App",
  components: {
    HelloWorld,
    Header,
    Footer
  },
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

ここまでできたら確認してみましょう!!

うまくヘッダーが表示されたと思います!
少しボタンと被ってますが、今後ボタンは消しますのでこのままでいいかなと思います!

まとめ

今回は、BootstrapVueを使ってヘッダーとフッターを実装してみました!

学習に使った本はこちら!

¥2,406 (2022/06/24 13:58時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥3,718 (2022/06/24 16:08時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥3,346 (2022/06/24 13:25時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥3,520 (2022/06/24 16:57時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
クマじい

Amazon Kindle Unlimited でもVue.jsの本はいっぱいあるんじゃ!!

  • 技術書をたくさん読みたい!
  • 色々な技術を学びたい!
初回30日間無料体験があるので、どのような参考書があるか確認してみよう!

Kindle Unlimitedで技術書を読むならタブレットがあるとさらに便利ですよ!
10インチあるとより見やすいと思いますが、7インチでも十分見やすくなります!

¥9,980 (2022/06/23 23:52時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥15,980 (2022/06/24 09:39時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場

ヘッダーとフッターがあるだけでおしゃれな画面に見えてきませんか?笑
BootstrapVueを使えば、簡単におしゃれに装飾できるので色々試してみてください!

ヘッダーを作ろう!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

東京在住で20代のエンジニアです。
特に特技があるわけではありませんが、誰もが楽しくプログラミングができたらいいと思い、「teech lab.」を開設いたしました。

Enjoy Diaryという、ガジェットや雑貨を紹介しているブログもあります!
ぜひ、みてください!!

目次
閉じる