質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.97%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 2,479

HozDer

score 14

前提・実現したいこと

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

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

該当のソースコード

        <!doctype html>
        <html lang="ja">
          <head>
            <!-- Required meta tags -->
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

            <!-- Bootstrap CSS -->
            <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">

            <title>Hello, world!</title>
          </head>
          <body>
              <div class="container bg-dark">
                  <div class="row">
                      <div class="col-sm-4"><a class="text-white" href="#">menu</a></div>
                      <div class="col-sm-4"><a class="text-white" href="#">menu</a></div>
                      <div class="col-sm-4"><a class="text-white" href="#">menu</a></div>
                  </div>
              </div>
          </div><!-- /header -->

            <!-- Optional JavaScript -->
            <!-- jQuery first, then Popper.js, then Bootstrap JS -->
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

試したこと

https://teratail.com/questions/7117

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

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

Windows10 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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • HozDer

    2019/03/15 11:43

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

    キャンセル

  • x_x

    2019/03/15 12:18

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

    キャンセル

  • HozDer

    2019/03/15 12:29

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

    キャンセル

回答 1

checkベストアンサー

+2

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

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

方法は幾つかあります。

  1. CDNではなく自分のサーバー・ローカルにダウンロードしたbootstrap.cssファイルをリンクさせ、直接.bg-primaryなどに設定されている値をいじる
  2. CDNのままで置いておいて、自分でCSSを作って同名クラスに対して色だけ指定する
  3. 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などがつけられていない限りは後勝ちです。
つまり下記のようにしてしまえば、指定クラスの特定の指定だけ変更することも可能です。

<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">
<style>
.bg-primary{
  background-color:red;/*背景だけ赤に*/
}
</style>


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

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

.bg-primary {
  background-color: #007bff !important;
}

a.bg-primary:hover, a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
  background-color: #0062cc !important;
}

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

.bg-mytheme {
  background-color: #007bff !important;
}

a.bg-mytheme:hover, a.bg-mytheme:focus,
button.bg-mytheme:hover,
button.bg-mytheme:focus {
  background-color: #0062cc !important;
}


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

あとは使うだけ。

<div class="container bg-mytheme">

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/15 13:20

    詳しい解説ありがとうございます。

    1.2.3.の内容はざっくりではありますが、理解することができました

    最後の方にある環境構築にもチャレンジしてみます。

    とても助かりました、頑張ります。

    キャンセル

  • 2019/03/15 13:25

    まずは私が回答したような泥臭い手続き的な方法で対応して、
    できて、余裕があったらSassのほうに行くと良いと思います。
    Sassで触る場合も結局1.で「自分が修正したい指定を探す作業」ができないと
    対応できませんので。

    キャンセル

  • 2019/03/15 15:17

    了解しました!
    細かなアドバイスまでありがとうございます!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.97%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる