Bootstrapのカスタマイズ法
Bootstrapって？
先日、BootstrapのCSS編集で躓いたので、備忘録としてメモ。
まずは、そもそも「Bootstrapってなに？」なんて方の為に簡単に説明しますと、
BootstrapはHTMLおよびCSSベースのデザインテンプレートで、固定グリッドレイアウトの作成やレスポンシブデザインなどが比較的簡単に実装できるフレームワークのこと
です。
とはいえ、あくまでテンプレートなので、デザインを見栄え良くしたり、色やレイアウトの調整をするには、ある程度CSSの理解が必要になります。
興味のある方は、たくさんネット上に実装の仕方など情報が溢れていますので、検索してみてください。
カスタマイズのコツ
BootstrapのCSS編集（デザインのカスタマイズ）を経験したことのある方のなかで、「ちゃんと該当箇所を直したのに、思った通りのデザインにならない！」「なかなか思い通りにいかない！」みたいな事はありませんか。
意外と気付かない盲点なのですが、実はCSSには「優先順位」というものがあり、このルールを知らないでカスタマイズしていると、思わぬ時間の浪費を喰らうハメになります。。（ウェブデザイン技能士資格試験で会得済みの知識だったはずなのに…）
なので、複数箇所で同じプロパティに異なる値が指定されていたりすると、競合が起こってしまい、上手くデザインに反映されない場合があるのです。勿論この特徴はBootstrapに限ったことではなく、CSS全般に共通します。
優先順位に注意
前述したCSSの特徴を利用すると、元のCSSは変更せずデザインをカスタマイズすることだって出来るということです。
少し詳しく説明すると、CSSは
よりタグに近く、より後から読み込まれたスタイルが優先される
ので、
h1 {color:red;} /*赤色*/
h1 {color:yellow;} /*黄色で上書き*/
h1 {color:blue;} /*青色で上書き、この値が有効になる*/こんな感じに書くと、
最終的に文字色は青が適用されます。
もっと詳しく言うと、
CSSには各セレクタ（pやspan、名前をつけたclassやidなど全般）に点数が振られており、独自の計算法により合計点数が高い指定の方が有効となる。
とのことなのですが、ややこしすぎて理解不能なので、とりあえず以下の点に注意しておくと良さそうです。
・ブラウザの検証機能などで、BootstrapのCSSセレクタを確かめる。
・自前のCSSが反映されなかったら、BootstrapのCSSに上書きされている可能性あり。
・BootstrapのCSS記述法と同じ書き方で、値を変更したものを自前CSS記述位置に書く。
・自前CSSを一番最後に読み込ませる。（記述順）
CSSもjsも順番が大事
意外に知らない方もいるかも知れませんが、「順番」に限ってはjsでも同じことが言えます。
HTMLの中に複数<script>タグ（外部ファイルやインライン）やマークアップが存在する場合でも、スクリプトはHTML上での記述順序通りに処理・実行されます。ちなみに、<script>タグを<head>タグ内に書いても<body>タグ内に書いても結果は同じです。
特定のスクリプトのロードに時間が掛かってしまった場合は、そのスクリプトのロード・実行が完了するまで、次のスクリプトは実行されない事もあるので、jsも記述順が結構大事だったりします。
jsの記述位置については、また色々ありますので別の機会にしますね。
宜しければ………