CSS

【bootstrap】バージョン4.3.1のボタンのカラーコードのメモ

CSS-アイキャッチ

こんにちは!ゆーたろうです。

ホームページを作る際に皆さん考えるであろうカラーコードについての備忘録です。

今、物販会社と共同で開発中のWebアプリケーションで使うボタンの色を決めるときに、ブートストラップのカラーを使おうと思ったので、その時のメモです。

※なお、技術メモと同様に調査フローを残すことで私の今後の成長につなげていきたい(=より効率的に調査できるようになるなど)ので、どのように調べたかの思考プロセスも書いています。ご了承ください。

結論:bootstrap 4.3.1のボタンの色は「#007bff」だった

結論から言うと、カーソルが合わされてないときのカラーコードは

「#007bff」

カーソルが乗っかった時のカラーコードは

「0069d9」

でした。

以下、調査フローです

使用バージョンは、4.3.1

今使っているbootstrapはこちらです。

https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css

そして、ボタンのクラス設定はこちらです。

class="btn btn-primary"

これを設定したボタンの画像がこちらです。

bootstrap-btn-color-default

※「取得開始する」という文言は私が設定したのでスルーしてください。

このボタンの色が今回使いたかったのですが、色のカラーコードが分からなかったので、CSS内を調べてみました。

調査1:ソースを見る

CSSコードから「btn」を調べます。

bootstrap-btn-color-find-code-2

一番右側のバーで、黄色くなっている部分に「btn」があるのでその部分のみをサクラエディタにコピペします。

調査2:対象の文字列を抜き出す

そして、以下を置換します。※正規表現で置き換えていることに注意!

  • 置換前:color
  • 置換後:\r\n\r\ncolor
bootstrap-btn-color-find-code

そうするとこのように見やすくなるので、ここから探しました。

調査3:抜き出したカラーコードを一つひとつこのサイトで照らし合わせる

色検索 – 原色大辞典

これで無事、欲しいカラーコードを調べることができました!

実質調査時間:10分程度 でした。

最後に所感

今まではどうやって調べていいかや、何を使えばいいかなど分からないことが多くありましたが、知識がついてきたおかげか、最近はピンと来たりやり方がわかったりしてきてます。

継続は力なりとはよく言ったもので、最近すごいそれを実感しています。