CSSがすごい苦手なので、作るアプリはフレームワークのBootstrapに統一しようと思います。Bootstrapなら解説しているサイトや本も多いので、調べやすいのが最大のメリットです。
リンク
Bootstrap 5 フロントエンド開発の教科書 という本を買って勉強したんですが、Bootstrapの初心者である私にとってはすごく分かりやすかったです。
画像のスライドショー（カルーセルと言うらしい）とかも結構簡単に作れるんだなというのが分かり、大変参考になりました。
ただ、個人的にBootstrapの配色が好きじゃないので、配色だけ変えたいんです。本にも配色を変更する方法が載っていましたが、本に書いてある通りに設定しても上手くいきません。$theme-colorsがどうしても上書きされてしまいます。仕様が変わったのかもしれません。
色々試していると、結果的には、配色を変更・追加することは出来ました。しかし、このコードは信用しないでください。とりあえず動くというレベルです。私はcssもscssもsassも無知であるため、このコードが正しいのか判断できません。あくまでも自己流の備忘録です。
もくじ
ダウンロード
https://getbootstrap.jp/docs/5.0/getting-started/download/からソースファイルをダウンロードします。
階層
ダウンロードしたBootstrap5のscssファイルは、scssディレクトリにすべて突っ込んであります。
├─css
│ └─custom.scss
└─scsscustom.scss（コメントあり）
// 変数を上書きする場合は@importよりも前に書く
$secondary: #0e5fb1;
$info: #00ff62;
$enable-gradients: true;
$enable-rounded: false;
// scssディレクトリにあるファイルをインポート
// $theme-colorsの変更には以下の2つが必要
@import "../scss/functions"; // _functions.scssのこと
@import "../scss/variables"; // _variables.scssのこと
// カスタムカラーを設定
// variablesをimportしているため、bootstrapの変数も利用可
$custom-colors: (
"pink": $pink,
"indigo": $indigo,
"cpink": #f023c3
);
// $theme-colorsに先ほど設定した$custom-colorsを追加
// VSCodeでmap-mergeを入力すると、自動で$map1:と$map2:が出力されたが書かなくても良いっぽい
// $theme-colors: map-merge($theme-colors, $custom-colors);
$theme-colors: map-merge($map1: $theme-colors, $map2: $custom-colors);
// 最後にbootstrap.scssをインポート
@import "../scss/bootstrap";
// 独自CSSを追加する場合は、bootstrap.scssのインポート後？
section {
margin-top: -60px;
padding-top: 60px;
}
// custom.scssを置いているディレクトリでターミナルからscssをコンパイル
// 例） sass custom.scss custom.css
custom.scss（コメントなし）
$secondary: #0e5fb1;
$info: #00ff62;
$enable-gradients: true;
$enable-rounded: false;
@import "../scss/functions";
@import "../scss/variables";
$custom-colors: (
"pink": $pink,
"indigo": $indigo,
"cpink": #f023c3
);
$theme-colors: map-merge($map1: $theme-colors, $map2: $custom-colors);
@import "../scss/bootstrap";
section {
margin-top: -60px;
padding-top: 60px;
}
