はじめに

このチュートリアルの概要

「Bootstrap 入門」のチュートリアルでは、CSS フレームワークの概要や、CSS 設計手法という考え方の導入、そして、Bootstrap のインストール方法から簡単な Web ページ作成までを実際に行っていき、Bootstrap に関する基本的な知識とスキルを習得します。

このチュートリアルの対象受講者

• CSS フレームワークがまだ理解できていない方
• 「CSS 設計手法」の概念が理解できていない方
• Bootstrap の基本的な扱い方が知りたい方

このチュートリアルでできるようになること

このチュートリアルでは、CSS 設計手法の解説と合わせて、Bootstrap を使って実際に Web ページを作成していきます。

そのため、チュートリアル完走後には、以下の内容ができるようになっています。

• 「CSS 設計」の必要性を理解している
• Bootstrap で採用されている「OOCSS」の概要を理解している
• ゼロから Bootstrap を使う準備ができる
• Bootstrap のコンポーネントを利用して、簡単な Web ページが作成できる

必須条件

• HTML/CSS の基礎知識を理解している
• HTML/CSS で簡単な Web ページを作成できる

具体的には、以下の主要な HTML タグ、CSS による基本的なスタイリング方法を理解していれば OK です。

• HTML で頻出度の高いタグ（header, footer, nav, main, sidebar, section, h1~h6, div, span etc…）を用途によって使い分けることができる
• HTML のブロック要素とインライン要素の違いを理解している
• ID セレクタ、クラスセレクタ、要素セレクタの違いを理解し、それらを使って簡単なスタイリングができる
• CSS のスタイリングで基本的な、margin プロパティを用いたブロック要素の中央寄せができる
• CSS のスタイリングで基本的な、text-align プロパティを用いたインライン要素の中央寄せができる
• CSS が適用される優先順位（!important の扱い方など）を理解している

もし、上記内容に不安があれば、下記の参考記事を一読してみましょう。基本的なコーディングスキルに必要な知識がピンポイントで解説されており、学習の助けになります。

• 初心者向け HTML 入門：書き方の基本とタグの使い方
• div と span の違いは？使い分け方を初心者向けに解説
• 【HTML】見出しタグの使い方：h1〜h6 はどう使い分ける？
• 【HTML で箇条書き】ul・ol・li タグの使い方まとめ
• CSS のセレクタとは？覚えておきたい 25 種類と書き方
• 【CSS】display の使い方を総まとめ！inline や block の違いは？
• CSS の優先順位を理解しよう（!important の使い方も）

このチュートリアルのステップ

以下の流れで学習を進めていきます。

1. Bootstrap とは（CSS 設計手法の理解と Bootstrap の導入）
2. Bootstrap のインストール方法を理解する
3. Bootstrap のグリッドシステムを理解する
4. Bootstrap でページ作成 ①（ナビバーの実装）
5. Bootstrap でページ作成 ②（カードの実装）
6. Bootstrap でページ作成 ③（フッターの実装）

まずは CSS 設計の概念を解説して、Bootstrap で使われている OOCSS（オーオーシーエスエス）の設計手法について理解していきます。

次に、Bootstrap のインストール方法と Bootstrap コンポーネントを利用した実際のページ作成の流れを学び、具体的なコーディングのやり方まで学習する流れになっています。

このチュートリアルで作るもの

Bootstrap 入門のチュートリアルで作成するページでは、CSS のコードをいっさい書かずに、Bootstrap を読み込んだ HTML ファイルだけで以下の「料金プランページ」を作成します。

それでは、さっそく進めていきましょう！