Bootstrapでできること
サクッとサイトを作りたいときは、下記のような理由からBootstrapを使うと便利です。
1. Layout: レスポンシブサイトを実現するためのGridシステムが用意されている。
2. Content / Component: ボタンやリストやテーブル、カードといったコンポーネントが用意されている。
3. Utility: 幅や線のありなし等細かい見た目を調整するためのユーティリティが用意されている。
と、CSS・jsに関する様々な要素がパーツ化されており、それらを組み合わせるだけでデザインが苦手な人であっても普通のUI、使い勝手が良いUXを簡単に実現できます。
使い方としては、1.Layoutは基本的にGridシステムやレスポンシブ対応に関する理解をすればよく、2.Content/Componentは該当するコンポーネントを使いたい度に本家のサイトのDocumentationを見てHTMLをコピペすれば事足ります。
しかし3.Utilityに関しては微調整できる対象が多岐にわたるため、Bootstrapでできるのかそれとも自分でCSSを書かないといけないのかわからなくなることがちょこちょこあります。その度に
毎回調べるでも良いんですが、なかなか手間なので個人的によく使う、よく調べるもの一覧をチートシートにしました。大事だと考える順で並べています。
よく使うUtility一覧｜微調整チートシート
| 効果 | Classの書き方 |
|---|---|
| Paddingの全体もしくは一部の幅を5段階で規定する |
p-0,pt-1,pr-2,pb-3,pl-4,p-5など、Top,Right,Bottom,Leftと5段階の幅の組み合わせ |
| Marginの全体もしくは一部の幅を5段階で規定する |
m-0,mt-1,mr-2,mb-3,ml-4,m-5など、Top,Right,Bottom,Leftと5段階の幅の組み合わせ |
| PaddingとMarginのレスポンシブ対応 |
m-sm-0,pl-xl-4など上記の中間にデバイスの数値を挿入するとそのデバイスでのみスタイルが適応される |
| 文字の大きさ1 |
h1~h6をタグとは別に独立したClassとして利用できる |
| 文字の大きさ2 |
h1よりも大きな文字はdisplay-1~display-4で指定できる |
| 文字を小さく(80%に)する | small |
| 文章(Inline要素)の左・中央・右寄せ |
text-left,text-center,text-right
|
| 文字の太さを変える |
font-weight-bold,font-weight-normal,font-weight-light
|
| 改行があっても文字間の間隔を均等にする | text-justify |
| 文字の色を変える |
text-primaryなどtext-につなげて色を指定する。text-mutedは文字色を薄くできる |
| 背景の色を変える |
bg-primaryなどbg-につなげて色を指定する |
| 全体もしくは一部を枠線で囲む |
border,border-top,border-right,border-bottom,border-left
|
| 全体もしくは一部の枠線をなくす |
border-0,border-top-0,border-right-0,border-bottom-0,border-left-0
|
| 適用されている枠線の色を変える |
border-primaryなどborder-につなげて色を指定する |
| 全ての角を丸める | rounded |
| すべての角を直角にする | rounded-0 |
| 角を完全に丸めて円にする | rounded-circle |
| 影の幅を4段階で規定する |
shadow-none(影なし),shadow-sm,shadow,shadow-lg
|
| 横幅の広さを4段階で規定する。25%から100%まで |
w-25,w-50,w-75,w-100,w-auto
|
| Widthより長い文章でも改行しない | text-nowrap |
| Widthより長い文章(Block要素)を切り落として『...』 | text-truncate |
| 要素の上・中央・下揃え(Inline要素) |
align-top,align-middle,align-bottom
|