Bootstrap - ナビゲーションとタブ

序論

こんにちは、Web開発者の卵さんたち！今日は、Webデザインで最もよく使われるコンポーネントの1つに潜り込んでみましょう：那就是ナビゲーションメニューとタブです。これらの要素は、あなたのウェブサイトの道標のように、ユーザーを異なるセクションやコンテンツに案内します。Bootstrapのナビとタブコンポーネントを使えば、全デバイスで動作するスリムで応答性のあるナビゲーションシステムを作成できます。では、腕をまくって、コーディングを始めましょう！

基本ナビ

まず基本から始めましょう。Bootstrapは、.navクラスを使ってナビゲーションメニューを作成するシンプルな方法を提供しています。以下は基本的な例です：

<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Contact</a>
</li>
</ul>

このコードは、ナビゲーションリンクの水平リストを作成します。activeクラスは現在のページを強調表示し、disabledクラスはクリック不可のリンクをグレーアウトします。

利用可能なスタイル

Bootstrapはナビゲーション için様々なスタイルを提供しています。ここで2つの人気のあるスタイルを見てみましょう。

ナビタブ

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Messages</a>
</li>
</ul>

これは、コンテンツを異なるセクションに整理するのに最適なタブ形式のナビゲーションメニューを作成します。

ナビピル

<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Messages</a>
</li>
</ul>

ピルスタイルは、ナビゲーションリンクにボタンのような外観を与えます。

水平アラインメント

ナビアイテムのアラインメントを簡単に変更できます。以下の方法で：

<ul class="nav justify-content-center">
<!-- ナビアイテムここに -->
</ul>

<ul class="nav justify-content-end">
<!-- ナビアイテムここに -->
</ul>

justify-content-centerクラスはナビアイテムを中央に配置し、justify-content-endクラスは右端に配置します。

フレックスユーティリティの使用

Bootstrapのフレックスユーティリティは、ナビレイアウトに対してさらに細かい制御を提供します：

<nav class="nav flex-column">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#">Disabled</a>
</nav>

これは、flex-columnクラスを使って垂直ナビゲーションメニューを作成します。

アクセシビリティに関する考慮

ナビを作成する際には、アクセシビリティを考慮することが重要です。適切な場所では<nav>要素を使用し、アクティブなアイテムにaria-current="page"を追加します：

<nav class="nav">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<!-- 他のナビアイテム -->
</nav>

ドロップダウンの使用

ナビには、より複雑なナビゲーション構造のためのドロップダウンメニューを含めることができます：

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</li>
<!-- 他のナビアイテム -->
</ul>

このコードは、ドロップダウンメニューを含むナビを作成します。data-bs-toggle="dropdown"属性がドロップダウン機能を有効にします。

タブとドロップダウン

タブスタイルのナビにもドロップダウンを含めることができます：

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<!-- ドロップダウンアイテム -->
</ul>
</li>
<!-- 他のナビアイテム -->
</ul>

ピルとドロップダウン

同じ原則がピルスタイルのナビにも適用されます：

<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<!-- ドロップダウンアイテム -->
</ul>
</li>
<!-- 他のナビアイテム -->
</ul>

JavaScriptの動作

BootstrapのJavaScriptプラグインは、ナビやタブに動的挙動を追加できます。以下は、タブとコンテンツパネルを作成する方法です：

<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home content here...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile content here...</div>
</div>

このコードは、クリックすると異なるコンテンツパネルを表示するタブセットを作成します。

アクセシビリティ

タブをアクセシブルにするためには、role、aria-controls、aria-selected、およびaria-labelledby属性を使用します。

データ属性の使用

データ属性を使用することで、JavaScriptを書かずにタブの動作を制御できます：

<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<!-- 他のタブボタン -->
</ul>

data-bs-toggle="tab"およびdata-bs-target="#home"属性がタブ機能を有効にします。

JavaScriptを使用

JavaScriptを使用してタブをアクティブ化することもできます：

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab button'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)

triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
})
})

このコードは、各タブボタンにクリックイベントリスナーをアタッチし、クリック時に対応するタブをアクティブ化します。

フェード効果

タブにフェード効果を追加するには、fadeクラスを使用します：

<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
</div>

これは、タブ間の切り替え時にスムーズな遷移効果を作成します。

そして、それで終わりです！Bootstrapを使ってナビゲーションメニューとタブを作成しカスタマイズする方法を学びました。実践が完璧を生むことを忘れずに、これらのコンポーネントを自分のプロジェクトで実験してみてください。ハッピーコーディング！

Credits: Image by storyset