Bootstrapを使ってヘッダーとフッターを作った話

こんにちは。今日はWebアプリ作成のためにBootstrapを使ってみました。過去にWebサイト、アプリを作ったことがありますが、フレームワークを一切使わないでhtml、cssを全て自分で書いていました。

今考えると非常に時間がかかっていましたね。楽しかったので苦ではありませんでしたが、できるだけ効率的に行いたいため今回はフレームワークを使うことにしました。

こちらのサイトに作成したアプリをデプロイする予定です。その時点での進捗を反映していきます。

Bootstrapインストール
ヘッダー作成
フッター作成
おわりに

Bootstrapインストール

Bootstrapのインストール方法は主に2つあります。こちらからファイルをダウンロードして追加する方法と、Web上に既にあるBootstrapのURLをコピーペーストする方法です。

私はBootstrapのcssをちょこちょこ書き換えたいと思ったのでダウンロードしてローカルに保存して使うことにしました。cssディレクトリ下に保存しました。

<link href="css/bootstrap.css" rel="stylesheet">

これでBootstrapのcssの利用が可能になりました。あとはひたすらBootstrapのclassを調べ、覚えながらコードを書いていきます。

ヘッダー作成

ヘッダーにはnavigation barをつけます。またトグルを実装してブラウザ幅によってメニューの表示を変化させます。

Bootstrapを使うと自前でcssを書かなくてもclassを指定するだけで簡単に実装できてしまいました。

<nav class="navbar navbar-expand-sm navbar-dark bg-dark mb-3">
     <a class="navbar-brand" href="#">miyacleApp</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav4" aria-controls="navbarNav4" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse justify-content-end" id="navbarNav4">
          <ul class="navbar-nav">
              <li class="nav-item active">
                  <a class="nav-link" href="#">トップ<span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#">使い方</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#">サイトについて</a>
              </li>
         </ul>
     </div>
</nav>

<!-- bodyタグを閉じる直前に記述 -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

bg-darkで色を指定しているので、bootstrap.cssを書き換えることで色を変更しました。

.bg-dark {
  background-color: #c65d4f !important;
}

はじめに実装したときはトグルボタンを押してもメニューが動きませんでした。id=”navbarNav4″というIDを指定し忘れていました。idを追記したら正常に動きました。

なんて便利なんだ。ものの数分でできてしまいました。

フッター作成

フッターは最下層に固定されるsticky footerというものを実装します。Bootstrapでテンプレートが公開されているのでそれを利用します。

はじめにフッター用のcssを作成します。

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #312d2a;
}
.container {
  width: auto;
  max-width: 680px;
  padding: 0 15px;
}
.container .text-muted {
  margin: 20px 0;
}

そしてcssを読み込みます。

<link href="css/sticky-footer.css" rel="stylesheet">

footerタグを記述します。phpを使って年を取得し、コピーライトを表示しています。

<?php
　　　　　$year = date('Y');
?>

<footer class="footer">
	<div class="container text-center">
	  <p class="text-muted">©︎<?php echo $year;?> miyacle</p>
	</div>
</footer>