デザインを重視したコーディングの場合は、Bootstrapを使わないケースも多いです。Bootstrapの向き不向き、Bootstrapを使わない時に最初に考えておくポイントを紹介します。
Bootstrapを使うか考えてみる
これまでのSkillhubのレッスンや課題では、Bootstrapを使ったコーディングを中心に行ってきました。
しかし、実際のWebコーディングのお仕事ではBootstrapを使わないことも多いです。
理由は、Bootstrapは12分割グリッドがベースのため。
デザインによってはグリッドに上手く収まらない・収まりが悪いというケースもあるのです。同じグリッドデザインでも、Bootstrapのcol幅と合致しないと調整が大変なのですね。逆にBootstrapのルールが邪魔をしてコーディングに手間がかかってしまいます。
このためBootstrapの使用を前提にしたデザイン以外の場合、Bootstrapを使ってコーディングすることは少ないです。
【Bootstrapが向いているもの】
- 開発にかけられる時間が少ない案件
- 管理画面など機能重視のページコーディング
- シンプルかつ柔軟性を重視したグリッドデザイン
【Bootstrapが向いていないもの】
- ピクセルパーフェクトが求められるような案件
- フレームワークの範疇を超えた複雑なデザイン
- スマホ、タブレット、デスクトップでデザインが大きく異なる案件
Bootstrapを使わない時に必要なこと
Bootstrapコーディングに向いていないデザインの場合は、cssをすべて自作することになります。
基本的な考え方はヘアサロンサイト（bee）の作成課題と一緒です。
ですが、お仕事レベルのコーディングとして行っておきたい下準備が2点あります。
1.ブレイクポイントの設定
Bootstrapでは下図のようなブレイクポイントが決められており、それに沿ったクラスを設定することでレスポンシブ化を行いました。
| Extra small | Small | Medium | Large | Extra large | |
|---|---|---|---|---|---|
| 画面幅 | ～575px | 576～767px | 768～991px | 992～1199px | 1200px～ |
Bootstrapを使わずにコーディングする場合は、コーディング要件でブレイクポイントを確認し、メディアクエリを使って各幅ごとのスタイル指定をすべて自分で書いていきます。
スマホ、タブレットなどアバウトな指定しかなされていない場合は、Bootstrapに準じた設定で良いでしょう。
●メディアクエリの書き方
レスポンシブデザインのコーディングにメディアクエリの設定は不可欠です。
WORDPRESS基礎講座【後編】https://ai.skillhub.jp/courses/202
メディアクエリの設定はPCレイアウトから作るか、モバイルレイアウトから作るかで書き方が変わってきます。
大きいサイズから指定していく方法を“デスクトップファースト”、小さいサイズから順々に指定いく方法を“モバイルファースト”と呼びます。
PC幅を992px以上とした場合を例に見てみましょう。
デスクトップファーストの場合
/* -------------------------------------------------------- */
/* 全環境で共通、PC表示時のスタイル
/* -------------------------------------------------------- */
/* スタイル記述 */
/* ------------------------------------------------------- */
/* 768以下の場合 - タブレット幅で上書きするスタイル
/* ------------------------------------------------------- */
@media (max-width: 768px) {
/* スタイル記述 */
}
/* ------------------------------------------------------- */
/* 576px以下の場合 - スマホ幅で上書きするスタイル
/* ------------------------------------------------------- */
@media (max-width: 576px) {
/* スタイル記述 */
}
モバイルファーストの場合
/* -------------------------------------------------------- */
/* 全環境で共通、モバイル表示時のスタイル
/* -------------------------------------------------------- */
/* スタイル記述 */
/* ------------------------------------------------------- */
/* 768px以上 - タブレット用に上書きするスタイル
/* ------------------------------------------------------- */
@media (min-width: 768px) {
/* スタイル記述 */
}
/* ------------------------------------------------------- */
/* 992px以上 - PC用に上書きするスタイル
/* ------------------------------------------------------- */
@media (min-width: 992px) {
/* スタイル記述 */
}
このように順番に区切っていきます。
また、下記のように記述することで特定の幅間のみ適用させるスタイルを指定したり、端末の向きに応じてスタイルを切り替えたりすることも可能です。
必要に応じてこのように細かい設定をする場合もあります。
/* 画面幅が 768～1280pxの場合に適用 */
@media (min-width: 768px) and (max-width: 1280px){
}
/* 端末が縦向き、かつ画面の横幅が 576px 以下の場合 */
@media screen and (orientation:portrait) and (max-width: 576px) {
}
/* 端末が横向き、かつ画面の横幅が 768px 以下の場合 */
@media screen and (orientation:landscape) and (max-width: 768px){
}
メディアクエリの書き方は、案件（コーディング要件・デザイン）によって様々です。検索すれば各端末のブレイクポイントをまとめたチートシート等もたくさん発表されています。必要に応じて利用しましょう。
2.リセットcss類導入の検討
リセットcssとは、ブラウザがデフォルトで持っているcssを打ち消すCSSです。
【ブラウザがデフォルトで持っているcss例】 * h1タグで囲うとフォントサイズが大きくなる * リスト形式にするとインデント(padding-left)が付く * aタグで囲った文字が青くなる
実はこうしたブラウザのデフォルトcssは、ブラウザによって若干の違いがあります。
異なるブラウザを使っても、同じようにWebサイトが表示されるようにするために、cssのリセット・共通化を行うのがリセットCSSです。
コーディングをはじめる前に、リセットCSSの導入が必要か、導入する場合はどういったタイプのcssを読み込ませるかを考える必要があります。
なお、リセットcssの種類や導入方法は次のレッスンで詳しく紹介します。
実習
上で紹介した「モバイルファーストの場合」のメディアクエリを設定してみましょう。
１.練習用のファイルを作ります。名前はtest.htmlとtest.cssにします。
２.htmlに空のdivを１つ作り、test1というクラスを指定します。
３.cssファイルを作ります。 空divが見えるよう.test1に幅と高さも設定し、背景色をピンクにします。
４．タブレット幅(768px以上)で背景色が赤、PC幅（992px以上)で背景色が青になるようにスタイルを設定してください。
５.ブラウザで、それぞれの幅の設定が適用されているか確認します。
※今回作成したtest.htmlとtest.cssは次回の実習でも使用します。
まとめ
Bootstrapは万能なコーディング用フレームワークではなく、条件が合う時にのみ役立ちます。コーディングするデザインがBootstrapを想定していないものであれば、使用せずにイチから自分でCSSを書いた方が効率が良いです。
Bootstrapを使用せずにコーディングする場合は、最初にブレイクポイントとブラウザ標準スタイルをとうするかを決めておくと進めやすいでしょう。 次回はリセットCSSの種類・導入方法について紹介します。