日付
- 2019-05-09 (Thu.)
目的
- うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。 を試してみる。
- 但し、2016年の記事なので内容が古くなっている可能性がある。
- 本ページで試す（あなたが見ているこのページです！）。
環境
- Bootstrap v4.3 by npm
- 以下のコマンドで CSS ファイルを生成している。
$ sass path/to/main.scss css/main.cssmain.scssファイル内では、Bootstrap のscss/bootstrap.scssファイルを@importしている。- また、font-family には以下をセットしている。
SCSSコード
$font-family-sans-serif: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "ＭＳ Ｐゴシック", sans-serif;変更点
1. line-heightで行間にゆとりを。
SCSSコード
$headings-line-height: 1.5;
$line-height-base: 1.65;
$headings-line-heightのデフォルト値は、1.2 だった。$headings-line-heightは少し大きくした方がよいと感じた。$line-height-baseのデフォルト値は、1.5 だった。$line-height-baseは body の line-height に影響する。- line-height の調整は必要だと思うが、すべての場所で必要だとは思わない。
2. letter-specingで文字の美しさを引き立てる。
CSSコード
* {
letter-spacing: .1em;
}- あったほうが良い。
- 画面の小さなモバイル環境では無駄にスペースをとってしまう（特に見出し）。
3. text-alignで和文の特性を活かす。
CSSコード
* {
text-align: justify;
}- あったほうが良い。
- ないと右側の余白が変に大きくなる。
4. font-familyで欧文との統一感を。
今の Bootstrap では対策済みのようだ。
5. modal-paddingで細部まで美しく。
SCSSコード
$modal-inner-padding: 30px;
$modal-title-padding: 30px;
- 見やすくなってよい。
デモ
6. body-colorを調和のとれたカラーに。
SCSSコード
$gray-900: #546E7A;- 今の Bootstrap に、
$gray-darkという変数はない。 $body-colorには、$gray-900が適用されている。$gray-900のデフォルト値は、#212529 !defaultになっている。（ブラックではない。つまりこの項目に関しては、既に対策済みであると言える。）- 記事にある
#546E7Aは薄いので、#212529の方がよさそう。
7. レスポンシブグリッドで余白を活かす。
- 省略
サンプル
Cards
英語のカード
Dummy text
Some quick example text to build on the card title and make up the bulk of the card's content.
日本語のカード
日本語の文章
日本国民は、正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民との協和による成果と、わが国全土にわたつて自由のもたらす恵沢を確保し、政府の行為によつて再び戦争の惨禍が起ることのないやうにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。
結論
- 現行の Bootstrap では対策済みの項目もあったが、それ以外は指定したほうが良いものが多かった。
メモ
- Bootstrap 4.3 は、Flexbox のクラスが各種用意されており便利。（上のカードのところで使っている）