Bootstrap

Bootstrapでオリジナルのコンポーネント一覧を作る（導入編）

Web開発をしていると、デザインにこだわりたいけど、デザイナーではないし、どこまで作り込むべきか悩むことってありませんか？
また、ルールがしっかり決まっていないチームだと、各メンバーがバラバラなデザインを作ってしまい、結果として統一感のないUIになってしまうことも…。

そこで役立つのが Bootstrap。
あらかじめ洗練されたデザインが用意されているので、手っ取り早く、それっぽいUIを作れるのが最大のメリットです。

とはいえ、デフォルトのままだと「どこかで見たようなデザイン」になりがち。
そこで、Bootstrapをベースにオリジナルのコンポーネントを作ることで、統一感を保ちつつ、自分たちのプロジェクトに合ったデザインにカスタマイズできます。

本記事では、Bootstrapを活用して 非デザイナーでも簡単に、迷子にならずにオリジナルコンポーネントを作る方法 を解説します！

Bootstrapの基本を押さえる

Bootstrapは、HTML・CSS・JavaScriptを使って、簡単に統一感のあるデザインを作れるフレームワークです。
公式のコンポーネントを活用すれば、ボタン・ナビゲーション・フォームなどがほぼコードを書かずに実装できます。

ここでは、Bootstrapを使うための基本的な方法を押さえていきましょう！

Bootstrapの導入方法

① CDN（手軽に導入する方法）

一番簡単なのは、BootstrapのCDN（Content Delivery Network）を使う方法です。
以下のコードをHTMLのヘッダー部分に追加するだけで、すぐにBootstrapが使えます。

<link rel="stylesheet"  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">

この方法なら、ダウンロード不要で手軽に試せるのがメリットです！

npmでインストール（開発環境で管理する方法）

本格的にカスタマイズするなら、npmでインストールする方法がおすすめです。

今回はhtdocs に「bootstrap」フォルダを作成をして、http://localhost/bootstrapで表示の角煮ができるようにします
フォルダ作成の場所は任意の場所で問題ありませんがこの記事ではC:\xampp\htdocs¥にbootstrapというフォルダを作成して実行していきます。

1.npmの初期化

package.json を作成します。

npm init -y

今回は、Bootstrapをnpmで管理するので、まず最初に「このフォルダはnpmを使ってますよ！」という設定をする必要があります。

それが npm init です。

npm init -y と入力すると、プロジェクトの説明書である package.json というファイルが自動で作られます。

ここに、これからインストールするBootstrapや、必要なライブラリの情報がまとめられます。

チームで作業したり、あとから別の環境で同じプロジェクトを再現したりするときにとても便利です！

2.Bootstrapをインストール
npm install bootstrap

実行結果が以下のようになればOK

フォルダ構成を整理

作業がわかりやすくなるように、自分用のCSSやHTMLを整理します。

mkdir css js components
type nul > index.html
type nul > css\custom.css
type nul > js\custom.js

最終的なフォルダ構成イメージは下のようになります。

node_modulesはBootstrap関連ファイルが大量に入っているので省略してますが、このようになっていればOK

コンポーネント一覧を作る

先ほど作ったindex.htmlにとりあえずコンポーネント一覧を作ります。

Bootstrapでよく使うのは

  • Buttons（ボタン）
  • Cards（カード）
  • Breadcrumb（パンくずリスト）
  • Headings （見出し：H1～H6）
  • Forms（フォーム：入力欄・セレクト・ボタングループ）
  • Navbar（ナビバー）
  • Alerts（アラート）
  • Modal（モーダル）
  • Badges（バッジ）
  • Progress bar（プログレスバー）
  • Tables（テーブル）
  • List group（リストグループ ）
  • Tabs（タブ）
  • Toggle（トグル）

Bootstrapカスタムコンポーネント 一覧用HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Custom Components</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
  <!-- カスタムCSS -->
  <link rel="stylesheet" href="./css/custom.css">
</head>
<body>
  <div class="container my-5">
    <h1 class="mb-4">Bootstrap オリジナルコンポーネント一覧</h1>

    <!-- ボタン -->
    <section class="mb-5">
      <h2>ボタン</h2>
      <button class="btn btn-primary">標準ボタン</button>
      <button class="btn btn-custom">カスタムボタン</button>
    </section>

    <!-- カード -->
    <section class="mb-5">
      <h2>カード</h2>
      <div class="card custom-card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">カスタムカード</h5>
          <p class="card-text">オリジナルデザインのカード。</p>
        </div>
      </div>
    </section>

    <!-- パンくずリスト -->
    <section class="mb-5">
      <h2>パンくずリスト</h2>
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#">Home</a></li>
          <li class="breadcrumb-item"><a href="#">Library</a></li>
          <li class="breadcrumb-item active" aria-current="page">Data</li>
        </ol>
      </nav>
    </section>

    <!-- 見出し -->
    <section class="mb-5">
      <h2>見出し</h2>
      <h1>H1見出し</h1>
      <h2>H2見出し</h2>
      <h3>H3見出し</h3>
      <h4>H4見出し</h4>
      <h5>H5見出し</h5>
      <h6>H6見出し</h6>
    </section>

    <!-- フォーム -->
    <section class="mb-5">
      <h2>フォーム</h2>
      <form>
        <div class="mb-3">
          <label for="exampleInputEmail1" class="form-label">メールアドレス</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="name@example.com">
        </div>
        <div class="mb-3">
          <label for="exampleSelect" class="form-label">セレクトボックス</label>
          <select class="form-select" id="exampleSelect">
            <option>選択1</option>
            <option>選択2</option>
            <option>選択3</option>
          </select>
        </div>
        <div class="mb-3">
          <label class="form-label">ボタングループ</label>
          <div class="btn-group" role="group" aria-label="Button group">
            <button type="button" class="btn btn-secondary">左</button>
            <button type="button" class="btn btn-secondary">中央</button>
            <button type="button" class="btn btn-secondary">右</button>
          </div>
        </div>
      </form>
    </section>

    <!-- ナビバー -->
    <section class="mb-5">
      <h2>ナビバー</h2>
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Navbar</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <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 active" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </section>

    <!-- アラート -->
    <section class="mb-5">
      <h2>アラート</h2>
      <div class="alert alert-success" role="alert">
        これは成功メッセージのアラートです！
      </div>
    </section>

    <!-- バッジ -->
    <section class="mb-5">
      <h2>バッジ</h2>
      <h3>通知 <span class="badge bg-danger">4</span></h3>
    </section>

    <!-- モーダル -->
    <section class="mb-5">
      <h2>モーダル</h2>
      <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
        モーダルを開く
      </button>
      <!-- Modal -->
      <div class="modal fade" id="exampleModal" tabindex="-1">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">モーダルタイトル</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
              ここはモーダルの中身です。
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
              <button type="button" class="btn btn-primary">保存する</button>
            </div>
          </div>
        </div>
      </div>
    </section>

  </div>

  <!-- Bootstrap JS -->
  <script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  <script src="./js/custom.js"></script>
</body>
</html>

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です