ブートストラップ5（Bootstrap 5） - 基礎からWebプロジェクトを作成する

ウェブサイト、誰でも作れる！
ブートストラップ5で作成するWebプロジェクト

講義
始める前に

ブートストラップ？

ブートストラップ（Bootstrap）は、フロントエンド（Front-End）でウェブサイトの構成コードであるhtmlとCSSそしてJavascriptを一つに統合して整形化されたインターフェースを提供してくれる一種のフレームワークライブラリです。
ブートストラップを使用すると、誰でもウェブサイトをすばやく簡単に作成できます。ブートストラップなしでWebサイトを作成するには、html、CSS、JavascriptをWeb開発者が別々に作成して互いに統合する必要があります。しかし、ブートストラップフレームワークはそれを一定の形で作られて配布されているので、私たちはこのコード（クラスやコンポーネントなど）を利用してより簡単にウェブサイトを制作することができます。

なぜブートストラップを学ぶべきですか？

ブートストラップがあれば、コーディングに入る人が初歩的なhtml、CSSの知識でまともなウェブサイトを作ることができます。
実際にWebコーディングに初めて入門し、htmlやCSSなどの知識を学び、実際にhtmlフロントエンドコーディングをするときに非常に漠然とした経験をしてみたかもしれません。この時点で、ブートストラップは非常に強力で効率的なWebコーディングを支援します。
また、ブートストラップは、初めてモバイルのTwitterを開発したときに始まったライブラリであるため、モバイルやタブレットなどに反応的に表示されるという利点があります。

なぜこの講義で学ぶべきですか？

このレッスンでは、ブートストラップの構造とコンテンツについて集中的に勉強します。個々のコンポーネントは、実際のプロジェクトを作成しながら、包括的で繰り返しコーディングを練習します。いくつかの実用的なプロジェクトを最初から最後まで製作してみると、Webコーディングの技術は飛躍的に発展し、これをもとに、今後Javascript、Backendの構築など深化されたWeb開発を行う上で非常に堅固な基盤を固めることができます。
要するに、このレッスンは、Web開発の入門または初心者の段階をすばやく学ぶことができるように計画され、作成されました。

ブートストラップ5
基礎からWebプロジェクトを作成する

これでいつホームページを完成しないのですか？

Web開発に入門すると、順番に次のような段階的なジレンマに陥ります。

1. ウェブサイト・ホームページを制作したい GoogleとYouTubeでhtmlについて勉強した。しかし、コンテンツの情報を出力することで終わるだけで、素敵なウェブサイトを作るのは容易ではない！
2. それでウェブサイトにきれいなデザインを塗るためにCSSを勉強し始めた。文字サイズや色の変更など以外にはまったく理解できない！
3. スライド、スクロール、ドロップダウン、ポップアップなど、よりダイナミックにWebで文字や画像が変化する機能を作りたい。しかし、このようなことをするにはJavaScript言語を学ぶ必要があります！
4. ホームページを作成するには、html、CSS、Javascriptを学ぶ必要がありますか？これでいつホームページを完成しないのですか？

Web開発を学んでも悩みは続く

上記の悩みが解決されても、Web開発では数え切れないほどの尾に尾をつける疑問や悩みが生じることになります。たとえば、毎回htmlファイルを作成しないで、基本的なデザインテンプレートだけを作成し、さまざまなコンテンツも効率的かつ経済的に入れることができないだろうか？また、このコンテンツデータを保存して管理する方法はないだろうか？ウェブサイトの速度を素早くウェブページをレンダリングする方法はないだろうか？など、さまざまな質問が浮上し続けます。

しかし、ブートストラップを学ぶなら？

しかし、すべての学習と経験はステップがあるように、フロントエンドだけでなくバックエンドをカバーするフルスタックWeb開発の第一歩はhtmlとCSSになります。したがって、html / CSSの完全な理解が必要であり、それを自由に活用できる必要があります。すぐにブートストラップは、これらの初期の悩みをきれいに解決することができます。
〈ブートストラップ5：基礎からプロジェクト制作〉講義を受講していただきたいと思います！

この講義
紹介します

Webコーディング初心者

初心者の開発者とhtml、
css、Javascript
学んだウェブコーディング入門者

ブートストラップ5が気になる

基本的な使い方はわかりますが
クラス、コンポーネントなど
応用法が気になるとき

早くできませんか？

ウェブサイト開発時に
フロントエンド開発
早く終わりたい方

実務ではどうですか？

実務プロジェクトでは
ブートストラップの適用法
気になる方

こんな方におすすめです！

• ウェブコーディングを開始してから数少ない初心者開発者
• ある程度html、css、Javascriptを学んだ方
• ブートストラップ5の基本クラスの概念、そしてコンポーネントを勉強したい方
• ブートストラップの基本内容は知っていますが、これを変形して応用したい方
• 実際のプロジェクトでどのようにブートストラップが適用されるのか疑問に思った人
• フロントエンドWeb開発を早くしたい方
• 短時間で以上の知識をコンパクトに学びたい方

この講義を聞いた後は？

• html、cssなどのWeb開発の基礎を固めることができます。
• 簡単かつ迅速にフロントエンドのWebデザインを行うことができます。お好みのウェブコーディングをフロントエンドで行うことができ、これをもとに様々な活用ができます。
• その後、WordPressのようなCMSやNodeJSのようなサーバー構築などの深化学習を通じて、最終的にWeb開発の専門家になるでしょう。

この講義では
このような特徴があります。

このように進行されます！

この講義は大きくブートストラップ5の基礎編とプロジェクト制作編に分かれています。

• 基礎編
  • ブートストラップのGrid、Display、Box、Position、およびContentsのクラスの概念を学びます。
• プロジェクト
  • 合計3つで構成されています。
  • 最初のプロジェクトよりも2番目が、2番目より3番目が少しずつカスタマイジングを通じて難易度が高くなります。
  • 最も基本的な概念から始めて、実際の活用と応用を経て、最終的に私が望むウェブサイトをコーディングする能力を繰り返し、段階的に習得することができます。
• 各レッスンで使用されるコードはファイルとして提供されます。

講義内容紹介

1. 基礎編：ブートストラップ5の概念とよく使われるクラスとコンポーネントについて学習します。
2. プロジェクト1 ：One-page Websiteで、CSSは最小限に活用してブートストラップのクラスとコンポーネントだけで製作してみます。
3. プロジェクト2 ：ブートストラップのクラスとコンポーネントに加えて、CSS（SCSS）とJavascriptをカスタマイズしてマルチページWebサイトを構築します。さらに、カカオマップAPIを使用して地図をJavaScriptにコーディングする方法を学びます。
4. プロジェクト3 ：基本的なブートストラップはもちろんのこと、SCSSとJavascriptモジュール化により、より高度なフロントエンドWebコーディングを学びます。このプロジェクトで使用するマップは、ネイバーマップAPIを使用してコーディングします。

Q&A
予想される質問

この講義
知識共有者は

Self-coding

• フロントエンド(WordPress) Developer
• Medipressウェブサイトの制作と教育（フリーランサー）
• Udemy Instructor