Bootstrap - 固定フッターのナビゲーションバーデモ

こんにちは、Web開発者の卵たち！今日は、Bootstrapを使って固定フッターのナビゲーションバーを作成する興味深い旅に出発します。あなたの近所の親切なコンピュータ教師として、私はこのプロセスをステップバイステップで案内し、私たちが書くコードのすべてを理解していただくようにします。で、お気に入りの飲み物を手に取り、リラックスして、一緒に挑戦してみましょう！

Bootstrap-Sticky footer navbar Demo

固定フッターのナビゲーションバーとは？

コードを書く前に、私たちが目指していることを理解しましょう。固定フッターのナビゲーションバーは、ページにどれだけのコンテンツがあっても、どれだけスクロールしても画面の下部に固定されたナビゲーションバーです。それは、 thick and thin であなたに寄り添う忠実な友達のようです！

固定フッターのナビゲーションバーを使う理由は？

重要なリンクやアクションに簡単にアクセスできます。
especially on mobile devices で画面スペースを節約できます。
ナビゲーションオプションを常に表示することで、ユーザー体験を向上させます。

私たちが作成するものとその有用性を理解したので、コードを書いてみましょう！

HTML構造の設定

まず、HTMLドキュメントの基本構造を設定する必要があります。HTMLが新しい方でも心配しないでください。各部分を説明しながら進めます。

<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定フッターのナビゲーションバー デモ</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="d-flex flex-column h-100">
<!-- ここにコンテンツを追加します -->

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

これを分解すると：

<!DOCTYPE html>: これはブラウザにHTML5を使用していることを伝えます。
<html lang="en" class="h-100">: ページのルート要素。h-100クラスを追加して、ビューポートの100%の高さを占めます。
<head>タグ内：

字符エンコーディングとビューポートを設定します。
ページにタイトルを設定します。
Bootstrap CSSファイルにリンクします。

<body class="d-flex flex-column h-100">: Bootstrapクラスを使用して、ボディをビューポートの100%の高さを占めるフレックスコンテナにします。
<body>の最後に、Bootstrap JavaScriptファイルを含めます。

ヘッダーの作成

次に、ページにヘッダーを追加してみましょう：

<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">固定ナビゲーションバー</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="ナビゲーションを切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">ホーム</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-outline-success" type="submit">検索</button>
</form>
</div>
</div>
</nav>
</header>

このコードは、トップに固定されたレスポンシブなナビゲーションバーを作成します。ブランド名、ナビゲーションリンク、および検索フォームを含みます。ナビゲーションバーは小さな画面ではハンバーガーメニューに折り畳まれます。

メインコンテンツの追加

次に、ページにメインコンテンツを追加してみましょう：

<main class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">固定フッターのナビゲーションバー</h1>
<p class="lead">このカスタムHTMLとCSSを使用して、デスクトップブラウザのビューポートの下部にフッターを固定します。</p>
<p>必要に応じて、<a href="#">固定ナビゲーションバー付きの固定フッター</a>も使用できます。</p>
</div>
</main>

flex-shrink-0クラスを<main>要素に追加することで、スペースが不足しても縮小しないため、フッターを下に押し下げます。

固定フッターの作成

さあ、私たちのスター、固定フッターを追加しましょう：

<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted">フッターのコンテンツをここに配置します。</span>
</div>
</footer>

mt-autoクラスは、コンテンツが少ない場合にフッターをページの下部に押し下げます。

カスタムCSSの追加

すべてが完璧に動作するために、少しのカスタムCSSを追加する必要があります。以下を<head>タグ内の<style>タグに追加してください：

<style>
main > .container {
padding: 60px 15px 0;
}

.footer {
background-color: #f5f5f5;
}
</style>

このCSSは、メインコンテンツの上部にパディングを追加し（固定ナビゲーションバーの後ろに隠れないように）、フッターの背景色を設定します。

すべてをまとめて

以下は、完全なコードです：

<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定フッターのナビゲーションバー デモ</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
main > .container {
padding: 60px 15px 0;
}

.footer {
background-color: #f5f5f5;
}
</style>
</head>
<body class="d-flex flex-column h-100">
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">固定ナビゲーションバー</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="ナビゲーションを切替">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">ホーム</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">リンク</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">無効</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="検索" aria-label="検索">
<button class="btn btn-outline-success" type="submit">検索</button>
</form>
</div>
</div>
</nav>
</header>

<main class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">固定フッターのナビゲーションバー</h1>
<p class="lead">このカスタムHTMLとCSSを使用して、デスクトップブラウザのビューポートの下部にフッターを固定します。</p>
<p>必要に応じて、<a href="#">固定ナビゲーションバー付きの固定フッター</a>も使用できます。</p>
</div>
</main>

<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted">フッターのコンテンツをここに配置します。</span>
</div>
</footer>

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

結論

そして、ここまでで、Bootstrapを使って固定フッターのナビゲーションバーを備えたウェブページを作成することができました。Web開発は料理のように、練習が大事です。初めての試みで完璧に見えることはありません。 therefore, 持続的に挑戦し、失敗を恐れずに試み続けましょう。そして、あなたもいつかマスターChefのように素晴らしいウェブページを作成できるようになります！

今日学んだことを簡単にまとめると：

コンポーネント	目的
HTML Structure	ページの基本構造を提供します
Bootstrap CSS	事前にスタイルされたコンポーネントとユーティリティクラスを提供します
Custom CSS	ページの外観を細かく調整します
Header	ナビゲーションバーを含みます
Main Content	ページの主要なコンテンツを保持します
Footer	ページの下部に固定されたフッターを提供します
Bootstrap JS	インタラクティブなコンポーネント（例：折り畳み可能なナビゲーションバー）を有効にします

忘れないでください、Web開発の鍵は練習と好奇心です。ですから、coding を続け、学び続け、そして、最も重要なのは、楽しみましょう！次回まで、happy coding！

Credits: Image by storyset

Bootstrap - 固定フッターのナビゲーションバー デモ