Bootstrap - サイドバーダemo

こんにちは、Web開発者の卵さんたち！今日は、Bootstrapのサイドバーの世界に踏み出す興奮的な旅に陪你びます。近所の親切なコンピュータサイエンスの先生として、このトピックをあなた们に案内するのを楽しみにしています。お気に入りの飲み物を手に取り、リラックスして、一緒に潜りましょう！

Bootstrap - Sidebars Demo

サイドバーとは？

コードを書く前に、サイドバーが実際に何かを理解しましょう。本を読んでいると、ページの横に狭い栏があって、追加情報やクイックリンクがあることを想像してみてください。それは、Webデザインにおけるサイドバーと基本的に同じです！

サイドバーは、通常、ウェブページの左側または右側に配置される垂直な栏です。ナビゲーションリンク、追加情報、またはメインコンテンツエリアを補完する他のコンテンツを含むことが多いです。サイドバーは情報を整理し、重要な要素に簡単にアクセスできるようにすることで、ユーザー体験を向上させます。

Bootstrapで基本的なサイドバーを作成する

サイドバーが何かを理解したので、Bootstrapを使って一つ作成してみましょう。まずはシンプルな例から始めて、段階的に拡張します。

ステップ1: HTML構造を設定する

まず、HTML構造を設定します。以下は基本的なテンプレートです：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Sidebar Demo</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- サイドバー -->
<div class="col-md-3 sidebar">
<!-- サイドバーのコンテンツはここに入ります -->
</div>
<!-- メインコンテンツ -->
<div class="col-md-9 main-content">
<!-- メインコンテンツはここに入ります -->
</div>
</div>
</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

このテンプレートでは、コンテナに2つの列を作成しています：サイドバー（3ユニット幅）とメインコンテンツ（9ユニット幅）。Bootstrapは12列のグリッドシステムを使用しているので、これらの数は合計12になります。

ステップ2: サイドバーにコンテンツを追加する

サイドバーにコンテンツを追加してみましょう：

<!-- サイドバー -->
<div class="col-md-3 sidebar bg-light">
<h3 class="mt-3">サイドバー メニュー</h3>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">ホーム</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">关于</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">サービス</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">連絡先</a>
</li>
</ul>
</div>

ここでは、タイトルとナビゲーションリンクのリストをサイドバーに追加しています。bg-lightクラスは、ライトな背景色を追加します。

ステップ3: メインコンテンツを追加する

メインエリアにコンテンツを追加してみましょう：

<!-- メインコンテンツ -->
<div class="col-md-9 main-content">
<h1 class="mt-3">私たちのウェブサイトへようこそ</h1>
<p>これはメインコンテンツエリアです。ページの主要な情報が表示される場所です。</p>
</div>

サイドバーの強化

基本的なサイドバーができたので、いくつかの追加機能で強化してみましょう。

検索ボックスの追加

<div class="col-md-3 sidebar bg-light">
<h3 class="mt-3">サイドバー メニュー</h3>
<form class="d-flex mb-3">
<input class="form-control me-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-outline-success" type="submit">検索</button>
</form>
<!-- ... サイドバーの残りのコンテンツ ... -->
</div>

これにより、サイドバーの上部に検索ボックスが追加され、ユーザーがコンテンツを簡単に検索できるようになります。

ドロップダウンメニューの追加

サイドバーにドロップダウンメニューを追加してみましょう：

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
プロダクト
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">プロダクト1</a></li>
<li><a class="dropdown-item" href="#">プロダクト2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">特別オファー</a></li>
</ul>
</li>

このコードをサイドバーの<ul class="nav flex-column">内に追加します。これにより、「プロダクト」のドロップダウンメニューが作成されます。

サイドバーのレスポンシブ化

サイドバーをモバイルデバイスでよく動作させるのは課題です。サイドバーをレスポンシブにしてみましょう：

<div class="container-fluid">
<div class="row">
<!-- サイドバー -->
<div class="col-md-3 sidebar bg-light" id="sidebar">
<button class="btn btn-primary d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarContent">
サイドバーを切り替える
</button>
<div class="collapse d-md-block" id="sidebarContent">
<!-- ... サイドバーのコンテンツ ... -->
</div>
</div>
<!-- メインコンテンツ -->
<div class="col-md-9 main-content">
<!-- ... メインコンテンツ ... -->
</div>
</div>
</div>

ここでは、小さなスクリーンでは表示されないトグルボタン（d-md-none）を追加し、サイドバーのコンテンツを折り畳むためのdivを追加しています。大きなスクリーンではサイドバーは常に表示されます（d-md-block）。

サイドバーのスタイル

最後に、サイドバーにカスタムCSSを追加して、見た目をさらに良くしましょう：

<style>
.sidebar {
min-height: 100vh;
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
.sidebar .nav-link {
color: #333;
}
.sidebar .nav-link.active {
color: #007bff;
}
</style>

これをHTMLの<head>に追加します。このCSSにより、サイドバーが全高 become になり、ややした影が追加され、ナビゲーションリンクのスタイルが設定されます。

結論

おめでとうございます！あなたは完全に機能し、レスポンシブなBootstrapサイドバーを作成しました。実践が完璧を生むことを忘れないでください。 therefore 実験を恐れずに、さまざまなレイアウトやスタイルを試してみてください。

以下は、私たちが使用した主要なBootstrapクラスの表です：

クラス	目的
container-fluid	全幅のコンテナを作成します
row	水平な列のグループを作成します
col-md-3	中程度のスクリーンでは3ユニット幅の列を作成します
bg-light	ライトな背景色を追加します
nav	ナビゲーションコンポーネントを示します
nav-item	ナビゲーションアイテムのスタイルを設定します
nav-link	ナビゲーションリンクのスタイルを設定します
dropdown	ドロップダウンメニューを作成します
btn	ボタンのスタイルを設定します
form-control	フォーム入力のスタイルを設定します

引き続きコードを書き、学び続けてください。そして、最も重要なのは、楽しむことです！すべての名人もかつて初心者でした。あなたのWeb開発の旅がどこに導くのか、私はとても楽しみにしています！

Credits: Image by storyset

前のチュートリアル:

Bootstrap - 特別なデモ

次のチュートリアル:

Bootstrap - ドロップダウンデモ