はじめに

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

「Bootstrap 実践」のチュートリアルでは、Web ページに動きをつける JavaScript の概要から、Bootstrap で Web ページに動きをつける、JavaScript コンポーネントの実装方法について学習していきます。

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

• JavaScript の基本的な概念を理解したい方
• JavaScript で動作する Bootstrap コンポーネントの実装方法が知りたい方

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

このチュートリアルでは、JavaScript の概念を知るところからはじめて、Bootstrap の JavaScript コンポーネントを使ってスライドショーの実装を学んでいきます。

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

• JavaScript の基本的な概念を理解している
• JavaScript で動作する Bootstrap コンポーネントを知っている
• Bootstrap の JavaScript コンポーネントを利用して、動きのある Web ページが作成できる

必須条件

本チュートリアルは Bootstrap で使われている JavaScript の解説がメインとなるため、JavaScript 自体の学習は無料サービスなどで、事前に学習するようにしてください。

• Progate - JavaScript コース

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

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

1. JavaScript について知ろう
2. Bootstrap のカルーセルを理解しよう
3. Bootstrap でページ作成 ①（ヘッダーの実装）
4. Bootstrap でページ作成 ②（カルーセルの実装）
5. Bootstrap でページ作成 ③（3 分割のグリッドレイアウト実装）
6. Bootstrap でページ作成 ④（2 分割のグリッドレイアウト実装）

まずは Web ページに動きをつけるための JavaScript の概念を学習し、Bootstrap の JavaScript コンポーネントの一つである「カルーセル」の基本的な内容について学んでいきます。

次に、Bootstrap のカルーセルコンポーネントを利用した「サービス紹介ページ」の実装を通して、実践的なページ制作の流れを学習していきます。

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

Bootstrap 実践のチュートリアルで作成するページでは、以下の「サービス紹介ページ」を作成します。

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