.NET開発者のためのブログメディア
CSSを使ったBootstrapのカスタマイズ方法とは?基本的な使い方についても解説
- SE
- CSSを使ったBootstrapのカスタマイズ方法が知りたいです。
- PM
- CSSのカスタイズ方法や「Color Utility Generator」を使用したカスタマイズ方法について紹介しますので、一緒に見ていきましょう。
目次
CSSを使ったBootstrapのカスタマイズ方法とは?
今回は、CSSを使ったBootstrapのカスタマイズ方法について説明します。
Bootstrapはわざわざカスタマイズしなくても素晴らしいWebページを作ることができます。物足りない人向けに、CSSを使ったカスタマイズ方法を紹介します。
ここでは、CSSのカスタイズ方法に加え、「Color Utility Generator」を使用したカスタマイズ方法についても紹介します。
CSSを使ったBootstrapのカスタマイズ方法に興味のある方はぜひご覧ください。
Bootstrapのカスタマイズ方法
CSSを使ったBootstrapのカスタマイズ方法について説明します。普通は、以下のようにCSSを読み込みます。
1
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
Bootstrapをカスタマイズするには、BootstrapのCSSの後に自作のCSSを指定します。
1
2
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="./css/my-stylesheet.css">
|
後は、自作のCSSで規定の要素を上書きすればよいです。
基本的な使い方
CSSを使ったBootstrapのカスタマイズ方法について、実際のコードを紹介します。以下のように、カスタマイズなしのHTMLがあるとします。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<button type="button" class="btn">Button</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
<br><br>
<nav aria-label="パンくずリスト">
<ol class="breadcrumb mb-1">
<li class="breadcrumb-item"><a href="#">パンくずリスト 親</a></li>
<li class="breadcrumb-item"><a href="#">パンくずリスト 子</a></li>
<li class="breadcrumb-item active" aria-current="page">パンくずリスト 孫</li>
</ol>
</nav>
|
実行すると以下のようになります。
See the Pen
bootstrap_css1 by kskumd (@kskumd)
on CodePen.
ボタンとパンくずリストについて、カスタマイズしてみます。
CSSに以下を記述します。
1
2
3
4
5
6
7
8
9
10
11
12
13
|
/* button */
.btn {
border-radius: 0px;
padding: .5rem 1rem;
}
/* breadcrumb */
.breadcrumb {
background-color: lightgreen;
padding: .75rem 0;
border-radius: 2px;
margin-bottom: 0;
}
|
実行すると以下のようになります。
See the Pen
bootstrap_css2 by kskumd (@kskumd)
on CodePen.
CSSを使ってBootstrapがカスタマイズできていることが分かります。
色の変更
次は、色を変更してみます。Bootstrapでは、primaryは青色(#007bff)ですが、これを赤に変更します。
CSSに以下のように記述します。
1
2
3
|
.btn-primary {
background-color: red;
}
|
HTMLに以下のように記述します。
1
2
3
4
5
|
<button type="button" class="btn btn-primary">.btn-primary</button>
<p class="text-primary">.text-primary</p>
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="alert alert-primary" role="alert">.alert-primary</div>
<span class="badge badge-primary">.badge-primary</span>
|
実行結果は以下のようになります。
See the Pen
bootstrap_css3 by kskumd (@kskumd)
on CodePen.
ボタンの背景色だけが赤になりました。他は青のままです。すべての色を変更するには、text-primaryなどのセレクタも個別に変更する必要があります。
Color Utility Generator
先ほどの章で、すべてのセレクタをCSSで記述する必要があると述べました。それは手間なので、「Color Utility Generator」という便利なサイトがあります。
Color Nameに「primary」、色に赤を指定します。SCSSのチェックを外して「Generate」ボタンをクリックします。
すると、指定した色コードのCSSが出力されます。これをCSSに記述します。
実行結果は以下のようになります。
See the Pen
bootstrap_css4 by kskumd (@kskumd)
on CodePen.
すべての色が変更されていることが分かります。
- SE
- CSSを使ったBootstrapのカスタマイズ方法について理解できました。
- PM
- カスタマイズしたい箇所がたくさんあって手間に感じる場合は、「Color Utility Generator」を使用したカスタマイズ方法もおすすめです。
CSSを使ってBootstrapをカスタマイズしよう
いかがでしたでしょうか。CSSを使ったBootstrapのカスタマイズ方法について説明しました。
Bootstrapはわざわざカスタマイズしなくても素晴らしいWebページを作ることができます。
CSSのカスタイズ方法に加え、「Color Utility Generator」を使用したカスタマイズ方法についても紹介しました。
ぜひ自分でソースコードを書いて、理解を深めてみてください。
Search キーワード検索
Popular 人気の記事
-
【VB.NET入門】DataGridViewの使い方まとめ
公開: 更新:
reccomended おすすめ記事
-
【.NETが統合】.NET 5の概要と今後のリリース予定
公開: 更新:
Categories 連載一覧
Tags タグ一覧
Jobs 新着案件
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万~30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万~60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万~30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万~50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万~67万円東京都文京区(後楽園駅)