Bootstrapで作ったヘッダーを編集
今、作ってるアプリケーションを年末までにリファクタリングします。今日やるのはヘッダー回り。Facebookの青、インスタのピンク。Twitterの水色。ラインの黄緑。
のようにそれぞれのアプリがそれぞれの色を持っている。
今、作っているアプリケーションにそのアプリの色をつけたい。ただ、Bootstrapを使っているのでどこまで表現できるかが課題。代表的なアプリケーションを作るまでに色はいろいろ勉強しておきたい。
今回、参照させていただくサイトは下の3つ。TutorialがベースになっていてBootstrap3を使用しています。
参考サイト
1ページ目、
色のチェックはできなかったけど、以下のことがまとまっています
１）ナビゲーションバーの設定（トップ、下部への固定、固定なしなど）
２）ナビゲーションバーへのメニュー、ボタン、テキスト、フォーム、画像の設置
３）メニュー項目の位置設定
４）反転ナビゲーションバー
2ページ目
色を指定しているクラスについて記述あり。その他、以下のことがまとまっていました
１）各クラスの意味合い（1ページ目より詳しく）
２）色を指定しているクラス
３）バー内にリンクが多数あったり、リンク名が長い時にウィンドウサイズによってカラム落ちするような形で表示されることがあり、その時の対処法
3ページ目
このページではBootstrap３のダウンロードから使い方まで全部網羅されています
１）グリッドシステム（かなり詳しい）
２）bootstrap-themeについて
３）カスタマイズ（公式以外のサイトも紹介されている）
また、下のサイトでテーマを使用して簡単にカスタマイズできそうなサイトを紹介されていました。（今回は使用しませんが次回は使ってみます）
※ダウンロードしたCSSファイルをassetの中にアップロードしクラス名はそこから使用すればOK
公式サイトの色の設定方法はこちら
アプリケーション作成
上記参考にした結果、今回のアプリケーションは色を明るくし、色合いが合わないnav-pillsをnav-tabsに変更してみました。
色の選択は今後アプリを作っていく上ですごく重要だなと思いました。
今回の変更はこのような感じです。
Before
(tutorialそのまま）
After
(ボタンのbootstrap4であればoutlineを使えるのですが3では使えず、borderで設定しています。ボタンについては次の記事で）
単純な変更しかしていませんが、全体を見ると意外にまとまっているかも。
（アイデアをくださっている方と濃い目の青色にしようと話していたのですが、結果、今回ちょっと薄目にしてみました！また評価してみてくださいね）
