ライフマップ開発者ブログ: 4月 2022

お疲れ様です。
ライフマップ開発チームの大城です。

本日は、Bootstrapを使って簡単なヘッダーメニューをWebサイトに追加しようと思います。
Bootstrap導入編はこちらをご覧ください！
https://tech-lifemap.blogspot.com/2022/04/bootstrap.html

# Webサイト作成

ヘッダーメニュー

早速サイトの上部にメニューを追加していきましょう。
ドキュメントだとこの部分です。

こんな感じでコードを追加しましょう。

  <header>
      <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
          <h1 class="navbar-brand mb-0">Navbar</h1>
        </div>
      </nav>
    </header>

クラスの説明

navbar: ナビゲーションバー用装飾適応
navbar-light: メニューの文字色の指定。背景色に合わせてlightかdarkを選びます。
bg-light: 背景色の指定。今回は薄い灰色。
container-fluid: レイアウトの指定。横幅いっぱいに要素を表示します。
navbar-brand: ロゴやサイト名に使用します。文字色の指定だけみたい...？

ヘッダーメニューが追加されましたね。

次は適当なメニュー項目を追加しましょう。
以下のコードを追加してください。

    <nav class="navbar navbar-expand-lg navbar-light bg-light">

クラスの説明

navbar-expand-lg: レスポンシブ設定。ブラウザのサイズによってメニューの表示を切り替えます。

        <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>
              <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
              </li>
            </ul>
          </div>

クラスの説明

navbar-toggler: メニュー開閉ボタンの装飾
navbar-toggler-icon: メニュー開閉ボタンのアイコン
collapse: コラプス機能を使う場合設定します。
navbar-collapse: メニュー開閉エリアの装飾
navbar-nav: メニューの装飾
nav-link: メニューの装飾
active: nav-linkに付ける事でメニューを強調します。
disabled: nav-linkに付ける事でメニューを非活性化します。

属性の説明

data-bs-toggle="collapse": このボタンはコラプス機能のトグルです、と指定する
data-bs-target="#navbarNav": コラプスする対象は〇〇(id)です、と指定する

これでメニュー項目が追加されたと思います！

コラプス機能が使われているので、幅が狭くなるとメニューも開閉式に変わるかと。
簡単にレスポンシブ対応できて便利ですよね〜

今回はここまでとします！

それではまた次回〜
大城でした。

お疲れ様です。
ライフマップ開発チームの大城です。

初めの記事を上げてからだいぶ時間が経ってしまいました...お恥ずかしい限りです。

本日はBootstrapの使い方を説明したいと思います。
簡単にオシャレなWebサイトが作成できるので、デザインできないよ〜なんて悩んでる方はぜひBootstrapを使ってみてください。

なんだか難しい...とか、これ間違ってるよ！等あればコメントでご指摘いただけると助かります。m（＿＿）m

# 準備

作業場所の作成

まずは作業するディレクトリを作成しましょう。
後々絶対やって良かった！と思うはずなので、お勧めです。

ディレクトリ構成はこんな感じになります。

~/Developments/bootstrap
┗index.html

HTMLファイル1個だけですね。

HTMLテンプレートファイル作成

次はBootstrapが使えるHTMLファイルを作成しましょう。
公式ドキュメントにスターターテンプレートが用意されているので、そのまま使っちゃいます。
https://getbootstrap.jp/docs/5.0/getting-started/introduction/#%E3%82%B9%E3%82%BF%E3%83%BC%E3%82%BF%E3%83%BC%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88

わかりやすいように、使わない部分を省いたものを載せておきます。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap CSSファイル読み込み -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
  <h1>Hello, world!</h1>
  <!-- Bootstrap JSファイル読み込み -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

これで準備は完了です！
実際にブラウザで開いてみて、『Hello, world!』と表示されているか確認してください。

こんな感じで、今回は終わりたいと思います。
短くてしょーもない内容ですが、Bootstrapは便利で使いやすいよ！って事を伝えたかったので、許してください。（；；）

続きは次回、Bootstrapを使って簡単なWebサイトを作るところから書きたいと思います。

大抵はドキュメントのサイドメニューにある『Components』カテゴリにあるので、自分で試してみたい！という方はドキュメント見た方が楽しいかもです。

https://getbootstrap.jp/docs/5.0/getting-started/introduction/

それではまた次回〜
大城でした。

ライフマップ開発者ブログ

Bootstrap実践編 - ヘッダーメニューの追加

# Webサイト作成

ヘッダーメニュー

Bootstrap導入編

# 準備

作業場所の作成

HTMLテンプレートファイル作成

ブログ移行のお知らせ。