はじめに

所要時間:10分

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

「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 の扱い方など)を理解している

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

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

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

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

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

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

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

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

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

おめでとうございます!🎉
このチュートリアルはこれで終了です。
次のコースを探す