【保存版】Bootstrapナビゲーションバー：コンテンツ中央揃えの3つの方法とサンプルコード
2024-06-23
Bootstrap で レスポンシブなナビゲーションバーの中央にコンテンツを配置する方法
方法 1: Flexbox を利用する
Flexbox は、Web ページの要素を柔軟にレイアウトするための CSS レイアウトモジュールです。この方法では、ナビゲーションバーのコンテンツを Flexbox コンテナとして扱い、 justify-content: center プロパティを使用してコンテンツを中央揃えにします。
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" 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="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
上記のコードでは、justify-content-center クラスを navbar-collapse クラスに追加することで、ナビゲーションバー内のコンテンツを中央に配置しています。
方法 2: 調整用ユーティリティを使用する
Bootstrap 5 には、要素を水平方向に中央揃えするための調整用ユーティリティクラスが用意されています。この方法では、ナビゲーションバーのコンテンツに mx-auto クラスを追加することで、簡単に中央に配置することができます。
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mx-auto">
<li class="nav-item"><a class="nav-link" 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="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
補足
- 上記の方法は、いずれもレスポンシブデザインに対応しています。画面サイズが小さくなると、ナビゲーションバーのコンテンツは自動的に折り畳まれ、中央揃えが維持されます。
- コンテンツの量が多い場合は、中央揃えにすることで見にくくなる場合があります。そのような場合は、左右に余白を設けるなどの調整が必要になる可能性があります。
これらの方法を参考に、ご自身の Web サイトに合った方法でナビゲーションバーのコンテンツを中央に配置してください。
サンプルコード：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 ナビゲーションバー</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarCollapse">
<ul class="navbar-nav mx-auto">
<li class="nav-item"><a class="nav-link" 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="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
説明
このコードでは、以下の点に注目してください。
navbar-expand-smクラス：ナビゲーションバーが小さくなったときに折り畳まれるように設定します。navbar-lightクラス：ナビゲーションバーの背景色を明るくします。containerクラス：ナビゲーションバーを水平方向に中央揃えします。
実行方法
- 上記の HTML コードを
index.htmlなどのファイルに保存します。 - ブラウザで
index.htmlファイルを開きます。
ナビゲーションバーが表示され、画面サイズを変更してもコンテンツが中央に配置されていることを確認できます。
応用
このサンプルコードを参考に、以下の点のように応用することができます。
- ナビゲーションバーの背景色やフォントを変更する
- ドロップダウンメニューを追加する
- ロゴやアイコンを追加する
Bootstrap で レスポンシブなナビゲーションバーの中央にコンテンツを配置するその他の方法
text-align: center を使用する
この方法は、最も簡単でシンプルな方法です。ナビゲーションバー内の要素に text-align: center プロパティを適用するだけです。
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav text-center">
<li class="nav-item"><a class="nav-link" 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="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
利点:
- 記述が簡単でわかりやすい
短所:
- Flexbox や調整用ユーティリティほど柔軟性がない
- 垂直方向に中央揃えできない
グリッドシステムを使用する
Bootstrap のグリッドシステムを使用して、ナビゲーションバー内のコンテンツを中央に配置することもできます。
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav mx-auto">
<div class="row no-gutters">
<div class="col-sm-4"><a class="nav-link" href="#">Home</a></div>
<div class="col-sm-4"><a class="nav-link" href="#">About</a></div>
<div class="col-sm-4"><a class="nav-link" href="#">Contact</a></div>
</div>
</div>
</div>
</div>
</nav>
- 垂直方向に中央揃えすることもできる
- 記述が少し複雑になる
- グリッドシステムの知識が必要
カスタム CSS を使用する
上記の方法でうまくいかない場合は、カスタム CSS を使用してコンテンツを中央に配置することもできます。
.navbar-nav {
display: flex;
justify-content: center;
align-items: center;
}
- 完全な制御が可能
- Bootstrap のスタイルと互換性がなくなる可能性がある
最適な方法の選択
使用する方法は、個々のニーズと要件によって異なります。
- 簡単でシンプルな方法が必要な場合は、
text-align: centerを使用する。 - 柔軟性のあるレイアウトが必要な場合は、グリッドシステムを使用する。
- 完全な制御が必要な場合は、カスタム CSS を使用する。
どの方法を選択する場合も、レスポンシブデザインであることを確認してください。コンテンツは、画面サイズが変更されても中央に配置されたままになるようにする必要があります。
これらの追加オプションと、それぞれの長所と短所を理解することで、Bootstrap で レスポンシブなナビゲーションバーのコンテンツを中央に配置するのに最適な方法を選択することができます。
css twitter-bootstrap navbar
