【Bootstrap】よく使うコードをまとめてテンプレート化してみた【コピペ可】

こんにちは朱夏です。

今回はコードのテンプレート化のお話です。
練習などで何度かコーディングをしていくと、こんなことを考えるようになると思います。

朱夏

サイトを作るたびに使うナビゲーションバーやカラムは、毎回１から作ると大変だなぁ。

すぐコピペできるようにテンプレートを作ったら効率がいいんじゃないかな？

ということで、よく使うコードをテンプレート化して、いつでもコピペで使えるようにしてみました。
作成したテンプレートの特徴は以下です。

Bootstrapを使用（重要）
表示エリアが解りやすいように背景色を色分け
細かいコメントを挿入

今回紹介するテンプレートは、勝手にコピペして使ってもらっても構いませんが、一つだけ注意が必要です。
それは、「私が良く使う形にテンプレート化している」ということです。
そのまま使うよりも、自分好みにカスタマイズして利用する事をお勧めします。

あと、

それでは紹介していきます。

[おしながき]
ナビゲーションバー
トップ画像
メインコンテンツ
フッター

ナビゲーションバー

ナビゲーションバーの特徴としては以下。

レスポンシブ対応済のものをベースに作成
画面上端に固定
ブランドにロゴ画像、テキスト両方表示
リンクの装飾は最低限に

コードはこちらです。

<!-- ナビゲーションバー　画面上端で固定 -->
<!-- bg-********で背景色、navbar-*******でリンクテキストの色を変更可能 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-secondary fixed-top">

   <!-- ブランドロゴ　イメージとテキスト -->
   <a class="navbar-brand" href="#">
      <img src="ロゴ画像パス" width="50" height="50" class="d-inline-block align-top" alt="ブランド">
      <span class="h1 text-light">ブランド</span>
   </a>
   <!-- ブランドロゴ終わり -->

   <!-- レスポンシブメニューボタン　スマホ表示用 -->
   <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="ナビゲーションの切替">
      <span class="navbar-toggler-icon"></span>
   </button>
   <!-- レスポンシブメニューボタン終わり -->

   <!-- メニューリンク -->
   <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
         <li class="nav-item">
            <a class="nav-link text-light" href="#">ホーム</a>
         </li>
         <li class="nav-item">
            <a class="nav-link text-light" href="#">リンク1</a>
         </li>
         <li class="nav-item">
            <a class="nav-link text-light" href="#">リンク2</a>
         </li>
      </ul>
   </div>
   <!-- メニューリンク終わり -->

</nav>
<!-- ナビゲーションバー終わり -->

トップ画像

サイトトップに表示するアイキャッチ画像です。
ナビゲーションバーを使用する場合、セットで使用した方がいいです。

理由は、画面上端で固定する機能を使っていると、ナビゲーションバーに重なって隠れる部分が出来てしまうためです。
ナビゲーションバーを常時固定させる場合、基本的には重なってしまうので、以下の様な方法で回避する必要があります。

margin-topで余白を取って隠れない様に調整する
多少隠れても支障ない画像などを配置して埋める
ナビゲーションバーの背景を透過させる

今回は隠れても支障のない画像を配置する事で重なっている部分に情報が隠れる事を回避しています。

<!-- Topアイキャッチ画像　横幅自動調整 -->
<img class="img-fluid" src="トップ画像パス" alt="アイキャッチ">
<!-- アイキャッチ終わり -->

メインコンテンツ

メインコンテンツを表示します。
コンテンツタイトル、画像、テキストの構成で準備しています。

コンテンツの表示は1カラム、2カラム、3カラムを用意しました。

<!----- メインコンテンツ ----->
<div class="container">
   <div class="row">

      <!-- 1カラム -->
      <div class="col-12 p-3">
         <div class="p-3 bg-light">
            <h2>1カラムコンテンツ</h2>
            <img class="img-fluid" src="画像パス" alt="コンテンツ画像">
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
         </div>
      </div>
      <!-- 1カラム終わり -->

      <!-- 2カラム -->
      <div class="col-md-6 col-12 p-3">
         <div class="p-3 bg-light">
            <h2>コンテンツタイトル1</h2>
            <img class="img-fluid" src="画像パス" alt="2カラム画像1">
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
         </div>
      </div>
      <div class="col-md-6 col-12 p-3">
         <div class="p-3 bg-light">
            <h2>コンテンツタイトル2</h2>
            <img class="img-fluid" src="画像パス" alt="2カラム画像2">
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
         </div>
      </div>
      <!-- 2カラム終わり -->

      <!-- 3カラム -->
      <div class="col-md-4 col-12 p-3">
         <div class="p-3 bg-light">
            <h2>コンテンツタイトル1</h2>
            <img class="img-fluid" src="画像パス" alt="3カラム画像1">
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
         </div>
      </div>
      <div class="col-md-4 col-12 p-3">
         <div class="p-3 bg-light">
            <h2>コンテンツタイトル2</h2>
            <img class="img-fluid" src="画像パス" alt="3カラム画像2">
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
         </div>
      </div>
      <div class="col-md-4 col-12 p-3">
         <div class="p-3 bg-light">
            <h2>コンテンツタイトル3</h2>
            <img class="img-fluid" src="画像パス" alt="3カラム画像3">
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
         </div>
      </div>
      <!-- 3カラム終わり -->

   </div>
</div>
<!----- メインコンテンツ END ----->

フッター

フッターは、3カラムの枠だけ用意したイメージです。
この枠でよく使うのは、Twitter埋め込み、プロフィール、MAP、内部リンク、概要紹介などでしょうか。

<!----- フッター ----->
<footer class="bg-secondary">
   <div class="container">
      <div class="row text-light">

         <!----- フッター1 ----->
         <div class="col-md-4 col-12 p-3">
            <h4>フッター要素1</h4>
            <hr>
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
         </div>
         <!----- フッター1終わり ----->

         <!----- フッター2 ----->
         <div class="col-md-4 col-12 p-3">
            <h4>フッター要素2</h4>
            <hr>
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
         </div>
         <!----- フッター2終わり ----->

         <!----- フッター3 ----->
         <div class="col-md-4 col-12 p-3">
            <h4>フッター要素3</h4>
            <hr>
            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
         </div>
         <!----- フッター3終わり ----->

      </div>
   </div>
   <!----- コピーライト ----->
   <p class="mb-0 text-center text-light"><small>(c)20200206@syunatsu1</small></p>
</footer>
<!----- フッター END ----->