Bootstrapをどこまで理解するか?

Bootstrap

2案

 状態:-  閲覧数:2,048  投稿日:2015-12-24  更新日:2018-03-03
案A.bootstrap.min.css読込後、カスタマイズ
案B.Sassを理解したうえでカスタマイズ&読込


Sassカスマイズを前提としたBootstrapテーマ


「各種bootstrap.scss + テーマ用scss」をコンパイルして提供
・bootstrap.min.css + テーマ用CSSを配布しているわけではない
※設計段階から、「コンパイルしたCSSファイル配布」を想定している

問題点
・瑣末な変更は問題ないが、根本的な変更は理解していないと難しい
※少なくともファイルは肥大化する恐れがある

2極化

 閲覧数:465 投稿日:2015-12-24 更新日:2018-03-03

案A.bootstrap.min.css読込後、カスタマイズ


ドキュメントに沿って実装
・bootstrap.min.cssの中身を知る必要はない
・必要箇所だけ上書き更新


案B.Sassを理解したうえでカスタマイズ&読込


オリジナリティが高い
・如何様にでもカスタマイズ可能
・しかもある程度以上理解が進むと、別にBootstrap使用しなくても、という境地に達するかもしれない

学習方法
・1から作成しないと、理解できない
・完成ファイルから機能を削っていくやり方だと、読み込みファイル数が多いため、途中で挫折する可能性が高い

理解方法2案

 閲覧数:444 投稿日:2015-12-24 更新日:2018-03-03

案A.必要箇所だけ上書き


「bootstrap.min.css」もしくは「テーマ用」として配布されているCSSをそのまま読込
・内容は変更しない
・必要箇所だけ、上書きされるよう追加していくだけ


案B.1から作成


Sassを理解したうえでカスタマイズしていくためには、1から作成するしかない


今後の手順案


1.「bootstrap.min.css」読込
2.「テーマ用」機能をcssで一つ一つ追加していく
※難しければこの方法を諦め案Aを採用


「Bootstrap」の「js」がいつの間にか期待通り動作しなくなった際の対応案

さよならBootstrap



週間人気ページランキング / 2-7 → 2-13
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 18
2 16進数カラーコード / 2進数 17
3 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 13
4 「bgcolor」「background-color」「background」の違い | CSS 7
5 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 6
6 「東京都」のカラーコード取得は難しい | カラーコード(色) 5
6 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 5
6 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 5
7 RGB ⇔ Lab | 色変換(色) 4
8 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 3
8 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 3
9 キャラクター無料着せ替えジェネレーター Rinmaru Games / オンラインサービス | イラスト素材(デザイン) 2
9 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 2
9 カラーコード / 色コード | カラーコード(色) 2
9 16進数カラーコード 2
9 Design 0 2
9 鉄道会社毎のカラーコード | カラーコード(色) 2
9 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 2
9 RGBの種類 / ビットカラー | RGB(色) 2
9 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 2
2025/2/14 1:01 更新