BOOTSTRAP COURSE

用意されたクラスを使い、
整った画面を効率よく作る。

Bootstrapは、余白、色、レイアウト、ボタン、カードなどのデザインがあらかじめ用意されたCSSフレームワークです。HTMLへ決められたクラス名を付けながら、パソコンやスマートフォンに対応した画面を作ります。

Bootstrapが初めてでも、HTMLとCSSの基本が分かれば進められます。クラス名をすべて暗記するのではなく、見本やドキュメントを確認しながら使い方に慣れていきます。

Bootstrapの導入から始める Bootstrap講座一覧を見る

TEST SITE Bootstrap実務テストに挑戦する

BEFORE BOOTSTRAP

HTML・CSSの基本を確認してから進もう

Bootstrapは、HTMLに専用のクラス名を付けて、用意されているCSSを適用する仕組みです。HTMLのタグやクラス属性、CSSの余白、色、サイズ、レイアウトを理解していると、どの指定で見た目が変わったのか分かりやすくなります。

HTML基礎を学ぶ

CSS基礎を学ぶ

HTML応用を確認する

COURSE MAP

導入からレイアウト、UI部品へ進む

最初にBootstrapの読み込み方と基本クラスを確認します。その後、グリッドによる配置、ボタンやカード、ナビゲーション、フォーム、カルーセルへ順番に進みます。

STEP 01

Bootstrapを読み込んで使ってみよう

BootstrapをWebページへ読み込み、用意されているクラス名をHTMLへ付けて、文字や背景、余白などを変更します。

Bootstrapの導入
基本クラス
ユーティリティ

Bootstrapの導入から始める

STEP 02

Bootstrapグリッドシステムでレイアウトしてみよう

コンテナ、行、列を使うグリッドシステムを学び、パソコンやスマートフォンの幅に合わせて並び方が変わるレイアウトを作ります。

グリッド
カラム
レスポンシブ

グリッドシステムを見る

STEP 03

Bootstrapのボタン・カード・画像を使って装飾しよう

ボタン、カード、画像など、よく使う見た目があらかじめ用意された部品を使って画面を組み立てます。

ボタン
カード
画像

ボタン・カードを見る

STEP 04

Bootstrapのナビゲーションバーを作ってみよう

ナビゲーションバーを作り、画面が狭いときには開閉式のメニューへ切り替わる仕組みを学びます。

ナビゲーション
開閉メニュー
レスポンシブ

ナビゲーションを見る

STEP 05

Bootstrapの得意技！フォームを装飾してみよう

入力欄、選択欄、ボタンなどのフォーム部品へBootstrapのクラスを付け、見やすく入力しやすい画面へ整えます。

フォーム
入力部品
レイアウト

フォーム装飾を見る

STEP 06

Bootstrapで作る簡単！スライドショーを作ってみよう

カルーセルを使い、複数の画像を順番に切り替えて表示するスライドショーを作ります。

カルーセル
画像切り替え
JavaScript機能

スライドショーを見る

WHAT YOU WILL LEARN

この講座で学べること

Bootstrapのクラス名をただ暗記するのではなく、見本を確認して必要なクラスを選び、HTMLへ組み合わせて画面を作る方法を学びます。

Bootstrapを読み込む

BootstrapのCSSや必要なJavaScriptをWebページへ読み込み、用意された機能を使える状態にします。

グリッドで画面を分割する

コンテナ、行、列を使い、2列や3列などのレイアウトを作ります。

余白・文字・色を調整する

ユーティリティクラスを使い、余白、文字サイズ、色、配置などをHTML側から変更します。

用意されたUI部品を使う

ボタン、カード、画像、ナビゲーション、フォームなどの部品を組み合わせて画面を作ります。

スマートフォン表示へ対応する

画面幅ごとに使い分けるクラスを指定し、パソコンとスマートフォンで並び方を変更します。

独自CSSと使い分ける

Bootstrapのクラスで整える部分と、自分でCSSを書いて細かく調整する部分を分けて考えます。

LEARNING FLOW

学習の流れ

HTML・CSSの基本を確認してからBootstrapを読み込み、クラスを一つずつ試します。表示が変わらない場合は、クラス名や読み込み方法を確認しながら進めます。

01
HTML・CSSの基本を確認する

HTMLのタグとclass属性、CSSの余白、色、幅、Flexboxなどの基本を確認します。
02
Bootstrapを読み込んで試す

Bootstrapのファイルを読み込み、文字色や背景色、余白などの簡単なクラスから試します。
03
表示されない原因を確認する

クラス名のスペル、CSSの読み込み、HTMLの書き方、Bootstrapのバージョンなどを確認します。
04
レイアウトとUI部品を組み合わせる

グリッド、ボタン、カード、ナビゲーション、フォームなどを組み合わせ、1つのページとして整えます。

BENEFITS

Bootstrapを学ぶメリット

よく使うレイアウトや部品を用意されたクラスで組み立てられるため、すべてのCSSを最初から書くよりも効率よく画面を作れます。

少ないCSSで画面を整えられる

余白、色、配置などをクラス名で指定できるため、簡単な見た目なら独自CSSを多く書かずに作れます。

スマートフォンへ対応しやすい

グリッドと画面幅ごとのクラスを使い、パソコンとスマートフォンで並び方を変更できます。

統一感のある部品を使える

同じルールで作られたボタン、カード、フォームを使い、画面全体の見た目を揃えられます。

CSSの理解を実践で確認できる

BootstrapのクラスがどのようなCSSを適用しているのか確認することで、余白や配置の理解を深められます。

Bootstrapの基本的な使い方

用意されたクラスを使い、 整った画面を効率よく作る。