(更新日 )
Bootstrap5 マスター講座 初心者から使いこなす！あなたもプロ並みのウェブサイトが作れるようになる【テンプレートダウンロード付】
提供：よこやま良平@1792名にプログラミング講義中
HTML・CSS・Bootstrap
（紹介料 30%
購入者のみ紹介可能 ）
紹介料とは？
Bootstrap5の基礎からBootstrap5を使ったサンプルやオリジナルデザイン作成まで学習できます
あなたは以下のことで悩んでないだろうか？
「Bootstrapを覚えたい」
「最速でWEBサイトを作りたい」
「デザインの知識がなくてもプロ並みのデザインをしたい」
「きれいなサイトを初心者でも作りたい」
「スマホ、タブレット、パソコンと自動で画面が切り替わるサイトを作りたい」
もし、これらのことで悩んでいるなら、あなたのお役に立てます。
最初に断言します
この講座は Bootstrap5 の初心者に向けた
「最強バイブル」です。
この講座の目的はたった1つ。
あなたのデザインの悩みを「解決」させることです。
世の中にはたくさんのBootstrap5の書籍やデザイン講座がありますがほとんど、どれも同じ内容です。
しかし、多くの初心者にとって
「どうやったら自分で使える様になり解決できるか」
「どうやったら実際の現場でも取り入れて使える様になるか」
これらを知ることが1番重要です。
ですので、この講座では基礎を学習しつつ、実際に手を動かして体験する実践的な内容になっています。
完全に保証します
この講座の内容を、あなたがしっかり実践することで、
Bootstrap5を使うためのスキルが身につく様になります。
いま講座をしているあなたは誰ですか？
この講座をする上であなたは誰だ？
と思っている人もいると思いますので
1分だけ自己紹介をさせてください。
こんにちは！
18年以上ITエンジニアとして活動してきたよこやま良平です。
4歳～85歳まで、年間1,792人名以上の方に
パソコンやプログラミング講座を行ってきました。
オンライン講座では100件以上のレビューを頂いており
評価は4.92/5.0と高い評価を得ています。
また18冊以上の書籍を出版しており、連続で1位を獲得しました。
その他これまでに3000以上のサービス・システム・サイトを作成。
これまでの経験を通じて、
多くの人々が情報化社会に追いつくことができるよう支援しています。
パソコンやプログラミングを学ぶことは、
将来のキャリアや個人の成長にとって非常に重要なことです。
その観点から初心者へわかりやすく解説をしています。
◆目次
ステップ1 Bootstrapの準備
1.今回使うツール
2.VSCodeのインストール
3.VSCodeの簡単なセットアップと使い方
4.ブラウザのインストール
5.WEBサーバーで確認したい場合
ステップ2 Bootstrapの基礎
1.Bootstrapとは
2.Bootstrapのインストール
3.Bootstrapの基本的な使い方
ステップ3 Bootstrapのアイコン
1.Bootstrapアイコンのインストール
2.Bootstrapアイコンの使い方
ステップ4 文字・テーブル・カラム
1.カラー
2.ブレイクポイント
3.コンテナ
4.グリッド
5.カラム
6.タイポグラフィ
7.イメージ
8.テーブル
ステップ5 フォーム
1.フォーム
2.フォームコントロール
3.セレクト
4.チェックボックス・ラジオ
5.レンジ
6.インプットグループ
7.フローティングラベル
8.レイアウト
9.バリデーション
ステップ6 コンポーネント
1.アコーディオン
2.アラート
3.バッジ
4.パンくずリスト
5.ボタン
6.ボタングループ
7.カード
8.カーセル
9.クローズボタン
10.コラプス
11.ドロップダウン
12.リストグループ
13.モーダル
14.ナビゲーションバー
15.オフキャンバス(隠しサイドバー)
16.ページネーション
17.ポップオーバー
18.スクロールスパイ
19.スピナー
20.トースト(アラートメッセージ)
ステップ7 デザインでよく使うクラス
1.カラー・背景色
2.ボーダー
3.ディスプレイ
4.カラム・フォーム
5.カード
6.オパシティ―・シャドー
7.オブジェクトフィット・サイズ・スペース
ステップ8 Bootstrapの実践
1.サンプルを使った爆速デザイン制作
2.実際にサイトを作成する
◆この講座の注意点
この講座はBootstrapの初心者に向けた講座です。
HTMLやCSSを使いますが、初心者でも達成できる様になるべく
入力する必要のない講座にしました。
ですが、講座を受講する上で
最低限「HTML」「CSS」の基礎や意味がわかるとよりスムーズです。
この講座ではBootstrapで使うClassの説明はしますが
HTML、CSSの基礎的な解説は行いませんのでご注意ください。
最後に講座で使ったテンプレートをダウンロードプレゼント致しますので活用してください。
頑張って一緒に学習してきましょう！
あなたは以下のことで悩んでないだろうか？
「Bootstrapを覚えたい」
「最速でWEBサイトを作りたい」
「デザインの知識がなくてもプロ並みのデザインをしたい」
「きれいなサイトを初心者でも作りたい」
「スマホ、タブレット、パソコンと自動で画面が切り替わるサイトを作りたい」
もし、これらのことで悩んでいるなら、あなたのお役に立てます。
最初に断言します
この講座は Bootstrap5 の初心者に向けた
「最強バイブル」です。
この講座の目的はたった1つ。
あなたのデザインの悩みを「解決」させることです。
世の中にはたくさんのBootstrap5の書籍やデザイン講座がありますがほとんど、どれも同じ内容です。
しかし、多くの初心者にとって
「どうやったら自分で使える様になり解決できるか」
「どうやったら実際の現場でも取り入れて使える様になるか」
これらを知ることが1番重要です。
ですので、この講座では基礎を学習しつつ、実際に手を動かして体験する実践的な内容になっています。
完全に保証します
この講座の内容を、あなたがしっかり実践することで、
Bootstrap5を使うためのスキルが身につく様になります。
いま講座をしているあなたは誰ですか？
この講座をする上であなたは誰だ？
と思っている人もいると思いますので
1分だけ自己紹介をさせてください。
こんにちは！
18年以上ITエンジニアとして活動してきたよこやま良平です。
4歳～85歳まで、年間1,792人名以上の方に
パソコンやプログラミング講座を行ってきました。
オンライン講座では100件以上のレビューを頂いており
評価は4.92/5.0と高い評価を得ています。
また18冊以上の書籍を出版しており、連続で1位を獲得しました。
その他これまでに3000以上のサービス・システム・サイトを作成。
これまでの経験を通じて、
多くの人々が情報化社会に追いつくことができるよう支援しています。
パソコンやプログラミングを学ぶことは、
将来のキャリアや個人の成長にとって非常に重要なことです。
その観点から初心者へわかりやすく解説をしています。
◆目次
ステップ1 Bootstrapの準備
1.今回使うツール
2.VSCodeのインストール
3.VSCodeの簡単なセットアップと使い方
4.ブラウザのインストール
5.WEBサーバーで確認したい場合
ステップ2 Bootstrapの基礎
1.Bootstrapとは
2.Bootstrapのインストール
3.Bootstrapの基本的な使い方
ステップ3 Bootstrapのアイコン
1.Bootstrapアイコンのインストール
2.Bootstrapアイコンの使い方
ステップ4 文字・テーブル・カラム
1.カラー
2.ブレイクポイント
3.コンテナ
4.グリッド
5.カラム
6.タイポグラフィ
7.イメージ
8.テーブル
ステップ5 フォーム
1.フォーム
2.フォームコントロール
3.セレクト
4.チェックボックス・ラジオ
5.レンジ
6.インプットグループ
7.フローティングラベル
8.レイアウト
9.バリデーション
ステップ6 コンポーネント
1.アコーディオン
2.アラート
3.バッジ
4.パンくずリスト
5.ボタン
6.ボタングループ
7.カード
8.カーセル
9.クローズボタン
10.コラプス
11.ドロップダウン
12.リストグループ
13.モーダル
14.ナビゲーションバー
15.オフキャンバス(隠しサイドバー)
16.ページネーション
17.ポップオーバー
18.スクロールスパイ
19.スピナー
20.トースト(アラートメッセージ)
ステップ7 デザインでよく使うクラス
1.カラー・背景色
2.ボーダー
3.ディスプレイ
4.カラム・フォーム
5.カード
6.オパシティ―・シャドー
7.オブジェクトフィット・サイズ・スペース
ステップ8 Bootstrapの実践
1.サンプルを使った爆速デザイン制作
2.実際にサイトを作成する
◆この講座の注意点
この講座はBootstrapの初心者に向けた講座です。
HTMLやCSSを使いますが、初心者でも達成できる様になるべく
入力する必要のない講座にしました。
ですが、講座を受講する上で
最低限「HTML」「CSS」の基礎や意味がわかるとよりスムーズです。
この講座ではBootstrapで使うClassの説明はしますが
HTML、CSSの基礎的な解説は行いませんのでご注意ください。
最後に講座で使ったテンプレートをダウンロードプレゼント致しますので活用してください。
頑張って一緒に学習してきましょう！