Bootstrap 3 でドロップダウンメニュー付きのナビゲーションバーを作成する
2024-04-17
Bootstrap 3 でロゴ付きナビゲーションバーを作成する
必要なもの
- Bootstrap 3 (CSS と JavaScript)
- ロゴ画像 (PNG または JPEG 形式)
手順
- HTML 構造を作る
以下の HTML コードは、基本的なナビゲーションバーの構造を定義します。
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="logo.png" alt="ロゴ">
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</div>
</div>
</nav>
このコードを説明します。
<nav class="navbar navbar-default">: ナビゲーションバーの要素です。<div class="container">: ナビゲーションバーを水平方向に中央揃えにします。<div class="navbar-header">: ロゴとメインメニューを格納する要素です。<a class="navbar-brand" href="#">: ロゴをクリックするとホームページに遷移するリンクです。<img src="logo.png" alt="ロゴ">: ロゴ画像を表示します。<li><a href="#">: ナビゲーション項目の要素です。
- ロゴの配置を調整する (CSS)
ロゴの位置やサイズを調整するには、以下の CSS コードを追加します。
.navbar-brand img {
max-height: 50px; /* ロゴの高さ */
margin-top: 10px; /* ロゴと上部の余白 */
}
このコードは、以下の設定を行います。
max-height: 50px;: ロゴの最大高さを 50px に設定します。
上記の CSS コードはあくまで一例なので、ご自身のデザインに合わせて調整してください。
- レスポンシブメニューを調整する (CSS)
画面サイズが小さくなった場合に、ナビゲーション項目が折りたたみ式になるようにするには、以下の CSS コードを追加します。
@media (max-width: 768px) {
.navbar-nav .dropdown {
display: block; /* ドロップダウンメニューをブロック表示 */
}
.navbar-nav .dropdown-menu {
margin-top: 0; /* ドロップダウンメニューの位置 */
}
}
@media (max-width: 768px): 画面幅が 768px 以下の場合にのみ適用されます。.navbar-nav .dropdown { display: block; }: ナビゲーション項目内のドロップダウンメニューをブロック表示にします。.navbar-nav .dropdown-menu { margin-top: 0; }: ドロップダウンメニューをナビゲーション項目の下に表示します。
補足
- ロゴ画像以外にも、アイコンやテキストをナビゲーションバーに配置することができます。
- Bootstrap 3 は古いバージョンなので、新しいプロジェクトでは Bootstrap 5 を使用する方が推奨されます。
Bootstrap 3 でロゴ付きナビゲーションバーを作成するサンプルコード
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 3 ナビゲーションバー</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="logo.png" alt="ロゴ">
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
CSS
.navbar-brand img {
max-height: 50px;
margin-top: 10px;
}
@media (max-width: 768px) {
.navbar-nav .dropdown {
display: block;
}
.navbar-nav .dropdown-menu {
margin-top: 0;
}
}
.navbar-brand img { max-height: 50px; margin-top: 10px; }: ロゴの最大高さを 50px に設定し、上部の余白を 10px に設定します。
- ロゴ画像は
logo.pngに置き換えてください。
このサンプルコードで、Bootstrap 3 でロゴ付きナビゲーションバーを簡単に作成することができます。
- Bootstrap 5 でロゴ付きナビゲーションバーを作成する場合は、以下のコードを参照してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<
Bootstrap 3 でロゴ付きナビゲーションバーを作成するその他の方法
<nav class="navbar navbar-default">
<div class="container">
<img src="logo.png" alt="ロゴ" class="navbar-brand">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</div>
</div>
</nav>
この方法では、<a class="navbar-brand" href="#"> 要素を使用せずに、直接ロゴ画像を <img> タグで配置します。この方法でロゴを配置すると、ロゴをクリックするとホームページに遷移するようになります。
ナビゲーションバーの背景画像にロゴ画像を使用する
<nav class="navbar navbar-default" style="background-image: url('logo.png'); background-repeat: no-repeat; background-position: left center;">
<div class="container">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</div>
</div>
</nav>
この方法では、ナビゲーションバーの背景画像にロゴ画像を使用します。この方法でロゴを配置すると、ロゴをクリックしても何も起こりません。
カスタム CSS を使用してロゴを配置する
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<div class="navbar-brand">
<img src="logo.png" alt="ロゴ">
</div>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</div>
</div>
</nav>
.navbar-brand {
position: relative;
left: 50%;
transform: translateX(-50%);
}
.navbar-brand img {
max-height: 50px;
margin-top: 10px;
}
css twitter-bootstrap twitter-bootstrap-3
