Bootstrapの背景色等の変更について

前提・実現したいこと

bootstrap4.3.1を使用してます
Bootstrapの背景色等の変更について
ボタンや背景色をBootstrapに用意されてるものではなく独自に変更した色を適応させたいのです。

<div class="container bg-dark"> のbg-darkの部分をもう少し明るくしたいです

該当のソースコード

html
1        <!doctype html>
2        <html lang="ja">
3          <head>
4            <!-- Required meta tags -->
5            <meta charset="utf-8">
6            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
8            <!-- Bootstrap CSS -->
9            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
10
11            <title>Hello, world!</title>
12          </head>
13          <body>
14              <div class="container bg-dark">
15                  <div class="row">
16                      <div class="col-sm-4"><a class="text-white" href="#">menu</a></div>
17                      <div class="col-sm-4"><a class="text-white" href="#">menu</a></div>
18                      <div class="col-sm-4"><a class="text-white" href="#">menu</a></div>
19                  </div>
20              </div>
21          </div><!-- /header -->
22
23            <!-- Optional JavaScript -->
24            <!-- jQuery first, then Popper.js, then Bootstrap JS -->
25            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
26            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
27            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
28

試したこと

https://teratail.com/questions/7117

上記の情報からlessフォルダに関する記述がありますが、
バージョンが古いのが原因なのかどこにlessフォルダがあるかわかりません

補足情報（FW/ツールのバージョンなど）

Windows１０　ATOM　bootstrap4.3.1 使用

C:\USERS\ユーザー名\DESKTOP\HP
│ FFFTP.lnk
│ start.bat
│
└─アップロードフォルダ
│ footer.php
│ functions.php
│ header.php
│ index.php
│ sidebar.php
│ style.css
│
├─css
│ bootstrap-grid.css
│ bootstrap-grid.css.map
│ bootstrap-grid.min.css
│ bootstrap-grid.min.css.map
│ bootstrap-reboot.css
│ bootstrap-reboot.css.map
│ bootstrap-reboot.min.css
│ bootstrap-reboot.min.css.map
│ bootstrap.css
│ bootstrap.css.map
│ bootstrap.min.css
│ bootstrap.min.css.map
│
└─js
bootstrap.bundle.js
bootstrap.bundle.js.map
bootstrap.bundle.min.js
bootstrap.bundle.min.js.map
bootstrap.js
bootstrap.js.map
bootstrap.min.js
bootstrap.min.js.map

m.ts10806

2019/03/15 02:18 編集

今はCDNで読み込ませているようですが、それをかえる必要があるというのは認識済みですか？

HozDer

2019/03/15 02:18

ごめんなさい　ど素人なので全く分からない状態です

m.ts10806

2019/03/15 02:19

ちなみにlessは提示の回答にあるようにフォルダではなくファイルです。

m.ts10806

2019/03/15 02:23

んーなるほど。では要件をもっと具体的にしてもらいたいので確認の仕方をかえます。「独自の色を」というのは、例えばBootStrapに用意されている.bg-primaryなどのデフォルトの色を変えたいということですか？それとも.bg-mythemeのように自分の機能を作って適用したいということですか？適用したいことと適用したい先も具体的に、質問に追記してください。

HozDer

2019/03/15 02:31

bg-primaryなどのデフォルトの色を変更したいという意味合いで質問してます「bg-mythemeのように自分の機能を作って適用したいということですか？」こちらの知識がないため具体的な質問できない状態です。手間かけさせて申し訳ないです。

m.ts10806

2019/03/15 02:35

適用したいことと適用したい先も具体的に、質問に追記してください。（質問は編集できますし、こちらに要件を書かれてもデフォルト非表示であるため関連性は薄く、見ない人もいます）

HozDer

2019/03/15 02:43

<div class="container bg-dark"> のbg-darkの部分をもう少し明るくしたいです

x_x

2019/03/15 03:18

Bootstrap 4 から Less ではなく Sass になっているはずです。何かの理由で Less にしたいのであれば 3 をダウンロードしてきてください。

HozDer

2019/03/15 03:29

lessでなくても色変更できれば問題ないです！ Sassですね調べてみます

行動規範の内容に同意します

回答1件

ベストアンサー

bg-primaryなどのデフォルトの色を変更したい

現在質問者のコードではBootStrapはCDNによって適用されているため、ファイルを自身の更新は出来ません。
「CDNとは何か」はそのまま調べれば出てくるので詳しくは調べてもらうとして、
要は「自分のサーバー・ローカルにあるファイルではなく、BootStrapのサイトへリンクしているから手を加えられない」ということになります。

方法は幾つかあります。
0. CDNではなく自分のサーバー・ローカルにダウンロードしたbootstrap.cssファイルをリンクさせ、直接.bg-primaryなどに設定されている値をいじる
0. CDNのままで置いておいて、自分でCSSを作って同名クラスに対して色だけ指定する
0. CDNのままで置いておいて、自分でCSSを作って.bg-primaryなどの設定値をコピーして自分でクラスを作って指定する

1.これはそのままですね。
今
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
となっているので
<link rel="stylesheet" href="/css/bootstrap.css">
のように修正し（パスは合わせてください）、bootstrap.cssの中から.bg-primaryなど、変更をかけたいクラスを調べてそこを修正する。

ただデメリットもあります。本体を修正するので全体への影響があります。
「このページだけデフォルトとしたい」とか融通がききません。

2.CSSは!importantなどがつけられていない限りは後勝ちです。
つまり下記のようにしてしまえば、指定クラスの特定の指定だけ変更することも可能です。

css
1<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
2<style>
3.bg-primary{
4  background-color:red;/*背景だけ赤に*/
5}
6</style>

※回答で分かりやすくするために直で書いてますが、外部ファイルにしても良いです。

3.2.の発展版です。
bootstrap.cssの中で「bg-primary」を見ると下記のような指定がされているようです。※バージョンによって違うかもしれませんのでお手元のファイルを確認してください

css
1.bg-primary {
2  background-color: #007bff !important;
3}
4
5a.bg-primary:hover, a.bg-primary:focus,
6button.bg-primary:hover,
7button.bg-primary:focus {
8  background-color: #0062cc !important;
9}

これを丸々コピーしてきてクラス名を変更（基本はprimaryなどbootstrapのデフォルトテーマのところを書き換えるだけだと思います。）
あとは色を適当に自分が好きなものに

css
1.bg-mytheme {
2  background-color: #007bff !important;
3}
4
5a.bg-mytheme:hover, a.bg-mytheme:focus,
6button.bg-mytheme:hover,
7button.bg-mytheme:focus {
8  background-color: #0062cc !important;
9}
10

※aまで準備する必要があるかどうかは自身のやりたいことにあわせてください。

あとは使うだけ。

html
1<div class="container bg-mytheme">
2

「bootstrap デフォルト色変更」とかで検索するとそれなりにやり方が出てきますが、BootStrap3の情報もあるのでご注意ください。
4では「Customize and download」がないみたいです。（私が見つけ切れてないだけかもしれませんが）

lessなりSassなりどちらもですが、結局のところCSSファイルにコンパイルする環境が必要です。
「素人です」と仰っている方が簡単に環境構築できるかと言うと微妙なところです。もちろん、きちんと学べば効率的にコーディングできるのは間違いなので、この際環境構築して文法も覚えるのは有益だとは思います。
※いずれにしてもCDNを読み込ませてるままではいけませんので、そこはご留意ください

投稿2019/03/15 03:36

編集2019/03/15 04:03

m.ts10806

総合スコア80850