新しくなったBootstrap 5を使用して、管理画面のUIを実装する方法を解説

サイト構築 -制作

Post on:2020年9月8日

はじめに

2020年6月にBootstrap 5 alphaがリリースされ、いろいろ変更点がありますが、中でも大きなニュースが2つありました。

jQueryが依存関係として削除されたこと
IE10/11のサポートが終了されたこと

私はこの新しいバージョンのBootstrapをいじってみましたが、Utility APIやバニラJavaScriptとの連携など他にも魅力的な機能があり、ワクワクしています。

Bootstrap 5で実装した管理画面のデモページ

このチュートリアルでは、新しいBootstrap 5を使用してシンプルな管理画面のインターフェイスを実装する方法を紹介したいと思います。構築する前にどんなインターフェイスができるかチェックしたい場合は、デモページをご覧ください。

チュートリアルでは、下記のセクションを実装します。

ユーザー設定を含むナビゲーションバー
ナビゲーションアイテムを含むサイドバー
現在のページのタイトル、キャッチ、パンくずを含むセクション
ウィジェットカードを含むメインコンテンツ
最後にフッタ

Bootstrap 5の準備

管理画の実装を始める前に、Bootstrap 5の準備をする必要があります。ここでは簡単にするために、CDNを使用して依存関係のすべてを取得します。

まずは、基本的なマークアップをしたindex.htmlファイルを作成します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Simple Admin Dashboard</title>
    <!-- スタイルシートはココに入れる -->
</head>
<body>
    <h1>Hello world!</h1>
    <!-- スクリプトはココに入れる -->
</body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap 5 Simple Admin Dashboard</title>

</head>

<body>

<h1>Hello world!</h1>

</body>

</html>

次にスタイルシートを<head>タグ内にコピーして貼り付けます。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

1	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

</body>タグの直前に、スクリプトもコピーして貼り付けます。

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>

簡単ですね！
これであなたのプロジェクトでBootstrap 5が利用できるようになり、管理画面のインターフェイスの実装を始めることができます。

ユーザー設定を含むナビゲーションバーの実装

このセクションには3つの主要な部分があります。

ロゴ
検索バー
ユーザー設定

ナビゲーションバー

まず、<body>タグの直後に<nav>アイテムを作成する必要があります。マークアップは、下記の通りです。

<nav class="navbar navbar-light bg-light p-3">
  <div class="d-flex col-12 col-md-3 col-lg-2 mb-2 mb-lg-0 flex-wrap flex-md-nowrap justify-content-between">
      <a class="navbar-brand" href="#">
          Simple Dashboard
      </a>
      <button class="navbar-toggler d-md-none collapsed mb-3" type="button" data-toggle="collapse" data-target="#sidebar" aria-controls="sidebar" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
      </button>
  </div>
  <div class="col-12 col-md-4 col-lg-2">
      <input class="form-control form-control-dark" type="text" placeholder="Search" aria-label="Search">
  </div>
  <div class="col-12 col-md-5 col-lg-8 d-flex align-items-center justify-content-md-end mt-3 mt-md-0">
      <div class="mr-3 mt-1">
          <a class="github-button" href="https://github.com/themesberg/simple-bootstrap-5-dashboard" data-color-scheme="no-preference: dark; light: light; dark: light;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star /themesberg/simple-bootstrap-5-dashboard">Star</a>
      </div>
      <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
            Hello, John Doe
          </button>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <li><a class="dropdown-item" href="#">Settings</a></li>
            <li><a class="dropdown-item" href="#">Messages</a></li>
            <li><a class="dropdown-item" href="#">Sign out</a></li>
          </ul>
        </div>
  </div>
</nav>

Simple Dashboard

</a>

</button>

</div>

</div>

</div>

Hello, John Doe

</button>

<li><a class="dropdown-item" href="#">Settings</a></li>

<li><a class="dropdown-item" href="#">Messages</a></li>

</ul>

</div>

</nav>

このコードは、ビューポートの幅全体におよぶナビゲーションバーを作成します。ナビゲーションバーには、ロゴ・検索バー・ユーザー設定、ハンバーガーアイコンが含まれています。

ナビゲーションアイテムを含むサイドバーの実装

サイドバーにメインのナビゲーション部分が追加され、スマホ端末ではハンバーガーメニューで切り替えが可能になります。ただし、サイドバーを作成する前に、メインコンテンツのレイアウトを流体コンテナで実装する必要があります。

サイドバー

ダッシュボードのレイアウトを定義するために、ナビゲーションの後に以下のマークアップを追加します。

<div class="container-fluid">
  <div class="row">
      <nav id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
          <!-- sidebar content goes in here -->
      </nav>
      <main class="col-md-9 ml-sm-auto col-lg-10 px-md-4 py-4">
          <h1 class="h2">Dashboard</h1>
      </main>
  </div>
</div>

</nav>

<h1 class="h2">Dashboard</h1>

</main>

</div>

これでレスポンシブに対応した流体コンテナを実装できたので、サイドバーの構築を始めることができます。<nav>タグ内に以下のマークアップを追加します。

<div class="position-sticky pt-md-5">
  <ul class="nav flex-column">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
          <span class="ml-2">Dashboard</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
          <span class="ml-2">Orders</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
          <span class="ml-2">Products</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
          <span class="ml-2">Customers</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart-2"><line x1="18" y1="20" x2="18" y2="10"></line><line x1="12" y1="20" x2="12" y2="4"></line><line x1="6" y1="20" x2="6" y2="14"></line></svg>
          <span class="ml-2">Reports</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
          <span class="ml-2">Integrations</span>
        </a>
      </li>
    </ul>
</div>

<span class="ml-2">Dashboard</span>

</a>

</li>

<span class="ml-2">Orders</span>

</a>

</li>

<span class="ml-2">Products</span>

</a>

</li>

<span class="ml-2">Customers</span>

</a>

</li>

<span class="ml-2">Reports</span>

</a>

</li>

<span class="ml-2">Integrations</span>

</a>

</li>

</ul>

</div>

カスタムスタイルシートを作成するか、Bootstrapのスタイルシートの後に<style>タグを追加して、サイドバーのスタイルを追加します。

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  padding: 90px 0 0;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
  z-index: 99;
}

@media (max-width: 767.98px) {
  .sidebar {
    top: 11.5rem;
    padding: 0;
  }
}

.navbar {
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1);
}

@media (min-width: 767.98px) {
  .navbar {
    top: 0;
    position: sticky;
    z-index: 999;
  }
}

.sidebar .nav-link {
  color: #333;
}

.sidebar .nav-link.active {
  color: #0d6efd;
}

.sidebar {

position: fixed;

top: 0;

bottom: 0;

left: 0;

z-index: 100;

padding: 90px 0 0;

box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);

z-index: 99;

}

@media (max-width: 767.98px) {

.sidebar {

top: 11.5rem;

padding: 0;

}

.navbar {

box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1);

}

@media (min-width: 767.98px) {

.navbar {

top: 0;

position: sticky;

z-index: 999;

}

.sidebar .nav-link {

color: #333;

}

.sidebar .nav-link.active {

color: #0d6efd;

}

これらのスタイルは、下にスクロールしたときにサイドバーが固定され、ビューポートの高さ全体を占めるようにします。また、アクティブなナビゲーションアイムをより目立つ色で表示します。

これで、管理画面のメインセクション（ナビゲーションバー、サイドバー、メインコンテンツ）の準備が整いました。メインコンテンツのエリアにウィジェットを追加してみましょう。

タイトル、キャッチ、パンくずを含むセクションの実装

管理画面の各ページには、タイトル、キャッチ、ページの場所を示すパンくずが必要です。

コンテンツの上部

<main>タグの先頭に以下のマークアップを追加するだけです。

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Overview</li>
  </ol>
</nav>
<h1 class="h2">Dashboard</h1>
<p>This is the homepage of a simple admin interface which is part of a tutorial written on Themesberg</p>

<li class="breadcrumb-item active" aria-current="page">Overview</li>

</ol>

</nav>

<h1 class="h2">Dashboard</h1>

<p>This is the homepage of a simple admin interface which is part of a tutorial written on Themesberg</p>

簡単ですよね？
これで管理画面のページ間を移動するときに、ユーザーは自分がどこにいるのか簡単に理解できます。

いくつかのカードを含むメインコンテンツ

ここからはプロジェクト次第で、ユーザーに何を表示するかによります。チャート・統計・TODOリスト・リマインダーなどです。管理画面のダッシュボードには、ウィジェットと呼ばれるビルディングブロックを使用して、さまざまな情報を整理できます。

コンテンツ

まずは、それらの要素を作成することから始めましょう。

<div class="card">
  <h5 class="card-header">Customers</h5>
  <div class="card-body">
    <h5 class="card-title">345k</h5>
    <p class="card-text">Feb 1 - Apr 1, United States</p>
    <p class="card-text text-success">18.2% increase since last month</p>
  </div>
</div>

<h5 class="card-header">Customers</h5>