CSS / Bootstrap4 / Sassで実現！Twitter Bootstrap ナビゲーションバーの色変更
Twitter Bootstrapでナビゲーションバーの色を変更する
方法1: CSSのbackground-colorプロパティを使う
これは最も簡単な方法です。ナビゲーションバーの背景色を変更したい場合は、以下のコードをstyle.cssファイルに追加します。
.navbar {
background-color: #your_color;
}
#your_colorの部分を、好きな色コードに置き換えます。例えば、青色にしたい場合は#0000ff、緑色にしたい場合は#00ff00のように指定します。
方法2: Bootstrapのテーマを使う
Bootstrapには、いくつかのテーマが用意されています。これらのテーマを使うと、ナビゲーションバーの色を含む、サイト全体のデザインを変更することができます。
Bootstrapのテーマを使うには、以下の手順を行います。
- ダウンロードしたテーマファイルを、プロジェクトフォルダに解凍します。
- HTMLファイルの
<head>タグ内に、以下のコードを追加します。
<link rel="stylesheet" href="path/to/theme.css">
path/to/theme.cssの部分を、ダウンロードしたテーマファイルのCSSファイルへのパスに置き換えます。
方法3: Sassを使う
Sassを使えば、ナビゲーションバーの色をより細かくカスタマイズすることができます。
Sassを使うには、以下の手順を行います。
style.scssファイルを作成し、以下のコードを追加します。
$navbar-bg-color: #your_color;
.navbar {
background-color: $navbar-bg-color;
}
#your_colorの部分を、好きな色コードに置き換えます。
3. style.scssファイルをコンパイルして、style.cssファイルを作成します。
これらの方法のいずれかを使って、Twitter Bootstrapのナビゲーションバーの色を好きな色に変更することができます。
方法1: CSSのbackground-colorプロパティを使う
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Bootstrap ナビゲーションバーの色変更</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">サイト名</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
</body>
</html>
.navbar {
background-color: #0000ff;
}
style.cssファイルに上記のコードを追加することで、ナビゲーションバーが青色になります。
方法2: Bootstrapのテーマを使う
例：
<link rel="stylesheet" href="path/to/bootstrap.min.css">
<link rel="stylesheet" href="path/to/cerulean.css">
path/to/bootstrap.min.cssの部分は、Bootstrap 4.0.0のCSSファイルへのパスに置き換えます。
path/to/cerulean.cssの部分は、ダウンロードしたテーマファイルのCSSファイルへのパスに置き換えます。
上記のコードを追加することで、ナビゲーションバーを含むサイト全体のデザインが、Ceruleanテーマに変更されます。
方法3: Sassを使う
$navbar-bg-color: #0000ff;
.navbar {
background-color: $navbar-bg-color;
}
上記のコード
ナビゲーションバーの色を変更する他の方法
方法4: JavaScriptを使う
JavaScriptを使って、ナビゲーションバーの背景色を動的に変更することができます。
<script>
function changeColor() {
var navbar = document.getElementsByClassName("navbar")[0];
navbar.style.backgroundColor = "#0000ff";
}
</script>
<button onclick="changeColor()">ボタン</button>
上記のコードは、ボタンをクリックすると、ナビゲーションバーの背景色が青色に変わる例です。
方法5: 画像を使う
ナビゲーションバーの背景画像として、好きな色の画像を使うことができます。
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">サイト名</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
上記のコードは、ナビゲーションバーの背景画像として、bg.jpgという画像を使う例です。
.navbar {
background-image: url("bg.jpg");
}
bg.jpgの部分は、好きな画像ファイルへのパスに置き換えます。
方法6: CSSフレームワークを使う
これらのCSSフレームワークは、ナビゲーションバーの色を変更するための様々なクラスやユーティリティを提供しています。
Twitter Bootstrapのナビゲーションバーの色を変更するには、様々な方法があります。
上記の方法を参考に、自分のサイトに合った方法でナビゲーションバーの色を変更してみてください。
css twitter-bootstrap bootstrap-4
