Bootstrapとは？
Bootstrap（ブートストラップ）は、CSS・JavaScriptの機能があらかじめ用意された無料のフレームワークです。
- サイト全体のレイアウト
- ボタンやカードなどのデザインパーツ
- モバイル対応（レスポンシブ設計）のモバイルファースト
これらを自分でCSSを書かなくても、クラス名を指定するだけで簡単に実装できます。
- 直感的なクラス名で簡単にデザインできる
- レスポンシブ対応が標準装備
- 多くのサイトやアプリで使われているので、実務でも必須スキル
モバイルファーストとは？
Bootstrapはモバイルファースト設計が基本です。
- まずはスマホサイズでレイアウトを作り、
- 必要に応じてタブレット・PC向けに拡張するスタイルになっています。
これにより、スマホユーザーが多い現代に合った、スムーズなユーザー体験が実現できます。
- スマホに最適な読み込み速度とデザイン
- レスポンシブ対応が自然にできる
- サイト制作の現場でもスタンダードな考え方
必須要素：<meta name="viewport">
Bootstrapを使うときは、HTMLの<head>内に
viewport設定を必ず記述します。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
この一行がないと、スマホでサイトを開いたときにパソコンサイズのレイアウトが縮小表示されるため、
デザインが崩れたり、文字が小さくなりすぎたりしてしまいます。
meta viewportとは？
meta viewportは、「このページの幅をデバイスの画面幅に合わせて表示してね」
とブラウザに指示するための設定です。
ないとどうなる？
- スマホで見たときにパソコン版がそのまま縮小されて表示される
- 文字やボタンが極端に小さくなって操作しにくい
- レスポンシブデザインが正しく機能しない
この講座を始める前に
この講座はHTMLとCSSの基本を理解していると、よりスムーズに学べます。
まだ自信がない場合は、先にこちらの講座に取り組んでみましょう！
最初の準備：ファイルとフォルダを整えよう
- デスクトップ上に「
bootstrap」というフォルダを用意します。 - 01から05までの課題をトレーニング
VSCodeやSublime Textなどのテキストエディタを使うのがおすすめです。
学習を進めよう
以下のステップに従って学習を進めていきましょう。
STEP
ファイルの準備を整える
学習のスタートは環境づくりから！フォルダやエディタの準備を整えます。
STEP
Bootstrap課題01〜05にチャレンジ！
よく使うclassからブレイクポイント・グリッドレイアウトを学習
STEP
解答例と見比べてステップアップ
コードを書いたら、解答例とじっくり見比べ！違いを発見するのも大切な学びです。