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

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

新規登録して質問してみよう
ただいま回答率
85.51%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

3回答

40268閲覧

bootstrap で背景や文字の色を変えたい

Qoo

総合スコア1249

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

3クリップ

投稿2015/02/23 12:46

下記のbootstrapをダウンロードし、背景、ナビゲーションバー、ハイライト、文字などの
色を変更したいのですが、cssのどこを変更すれば良いのでしょうか?

http://startbootstrap.com/template-overviews/sb-admin/

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

こんにちは。

Bootstrapのスタイルは、CSSファイルではなく、lessファイルで変更するようになっています。

lessは、CSSにプログラムの利点を取り入れてコーディングしやすくしたもので、Source code(DLリンク)の lessフォルダにまとめられています。

色や文字のサイズ、フォント、余白などのスタイルを変更したい場合は、スタイルの初期設定ファイルである variables.lessを編集してください。

たとえば、

lang

1//== Colors 2// 3//## Gray and brand colors for use across Bootstrap. 4 5@gray-base: #000; 6@gray-darker: lighten(@gray-base, 13.5%); // #222 7@gray-dark: lighten(@gray-base, 20%); // #333 8@gray: lighten(@gray-base, 33.5%); // #555 9@gray-light: lighten(@gray-base, 46.7%); // #777 10@gray-lighter: lighten(@gray-base, 93.5%); // #eee 11 12@brand-primary: darken(#428bca, 6.5%); // #337ab7 13@brand-success: #5cb85c; 14@brand-info: #5bc0de; 15@brand-warning: #f0ad4e; 16@brand-danger: #d9534f;

上記は、variables.lessの冒頭に記述されている Bootstrap カラーテーマの初期設定です。

背景色や文字の色を変更したい場合には、直後につづく背景色と文字色の初期設定を変更します。

lang

1//== Scaffolding 2// 3//## Settings for some of the most global styles. 4 5//** Background color for `<body>`. 6@body-bg: #fff; //背景色はここで変更します。 7//** Global text color on `<body>`. 8@text-color: @gray-dark;

なお、Customize and downloadリンク)のページを使用することで、おなじことを Web上で行うことができます。

変更したい要素ごとに用意されたフィールドの値(参考:下図ページ部分SS)を変更した後、最下段の Compile and Downloadをクリックするだけでカスタマイズされた Bootstrapのファイルセットを入手することが可能です。
![イメージ説明]WIDTH:600

以上、ご参考いただければ幸いです。

投稿2015/02/24 01:40

編集2015/02/24 01:50
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Qoo

2015/02/26 12:22

回答ありがとうございます! こんなに細かく設定できるんですね。 項目が沢山あって難しいですが、とりあえず希望通りの変更を行うことができました
退会済みユーザー

退会済みユーザー

2015/02/26 23:38

Qooさん、コメント(返信)をいただきありがとうございます。 ご希望どおりの変更ができてよかったです。 今後ともよろしくお願いします。
guest

0

ええと、上手く説明出来るかどうかはわからないですが、トライしてみます!

上のテンプレートは見ていませんが、bootstrapはほとんどが複雑なソースで組まれていると思います。
そこで、私は、Firefoxのアドオン、Firebugを入れてチェックしています。

![イメージ説明]WIDTH:600

このように、チェックしたい場所にマウスを置くと(その前に、グレーのバー左から2番目にある、□に↑のアイコンをクリックしてくださいね)、どのCSSにどんな風に書き込まれているのが反映されているか確認することが出来て、とても便利です。
慣れるまでちょっと時間が掛かるかもしれませんが、やってみてください。

投稿2015/02/23 16:08

kaban888

総合スコア16

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Qoo

2015/02/26 12:25

回答ありがとうございます! この方法も知らなかったので、とても参考になりました。 有益な情報頂きありがとうございます
guest

0

私は、背景を変えただけですが、別のcssファイルに、

lang

1body{ 2 background-color:#000 ; 3 }

と書いて、読み込ませて対応しました。
bootstrapのcssファイルを書き換えて対応する方法は知らないので、方法があるのなら、私も是非知りたいです。

投稿2015/02/23 13:15

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Qoo

2015/02/26 12:26

回答ありがとうございます! カスタムCSSを後から読み込むという方法ですね。 こちらもとても参考になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問