Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
BEST
Programming

/

Front-end

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

ブートストラップ5(Bootstrap5)のクラス、コンポーネントなどの概念を理解し、それに基づいてアプリケーション、変形、実習で3つのプロジェクトを制作してみます。

  • codingdiy
DIY
기본부터 착실히
Bootstrap
HTML/CSS
JavaScript
Web Design

学習した受講者のレビュー

こんなことが学べます

  • 最新のブートストラップ5の基本的なクラスの概念を学びます。

  • 理解されたブートストラップの概念に基づいて変形して応用できます。

  • 実際のプロジェクトにより、ブートストラップ5の全体的な機能と構造を理解できます。

  • 結局、ブートストラップのデザインや機能などを元に、独自の特色あるウェブサイトをFront-endで実装できます。

  • 後で、フロントエンド開発だけでなくバックエンド開発にもブートストラップを活用できます。

ウェブサイト、誰でも作れる!
ブートストラップ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開発の入門または初心者の段階をすばやく学ぶことができるように計画され、作成されました。


bootstrap 5

ブートストラップ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
予想される質問

Q. コンピュータ関連の専攻者ではないのに聞ける講義ですか?

もちろんです。この講義はそれほど難しくありません。コンピュータ工学、Webに対する硬い理論や歴史を勉強するのではなく、Web開発の基礎の中でhtml、CSS、Javascriptを統合したブートストラップライブラリをプロジェクトを通じて勉強する講義です。
また、優れたWeb開発者の中には、非専攻者も多い。私もコンピュータ関連の非専攻者です!

Q. htmlとCSSについて本当に少ししか(または全く)知らないのに講義に従えますか?

もちろんです。 htmlとCSSという用語だけでも聞いたことがあれば勉強を始めるのに十分です。ただし、すべての勉強がそうであるように、やや忍耐と忍耐、そして好奇心はなければなりません。

Q. 講義を聞く前に準備すべきことはありますか?

まず、インターネットが接続されているコンピュータが必要です。 PC、Mac、Notebookなどの種類や仕様は関係ありません。
html、CSS、Javascriptなどのプログラミング言語を少し理解している方が良いでしょう。これについての知識がない場合は、YouTubeで無料のビデオ講義を検索してください! 2~3時間ほど勉強すれば十分です。
Webブラウザでは、Chrome(Chrome、最も推奨)またはFirefox(FireFox、general or developer edition)を使用することをお勧めします。
また、コーディングができるコードエディタ(Visual studio code editor、sublime text editor、atom editorなど)なら何でも構いません。このレッスンでは、最近使用されているVisual studio code editor(レッスンで使用)を紹介します。

Q. PC(Windowsオペレーティングシステム)でも講義を聞いてコーディングできますか?

もちろんです。この講義はMACオペレーティングシステムを使用してコーディングを進めていますが、Windows、Linuxなど、どのオペレーティングシステムでも問題なく講義を受講してコーディングできます。


この講義
知識共有者は

Self-coding

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

こんな方に
おすすめです

学習対象は
誰でしょう?

  • ブートストラップの基本構造と概念、そしてコンポーネントを勉強したい方

  • Webコーディングに初めて触れた方の中で、簡単かつ迅速にWeb開発をしたい方

  • ブートストラップの基本内容は知っていますが、これを変形して応用したい方

前提知識、
必要でしょうか?

  • html、CSS、Javascriptなど、コンピュータ言語を少し理解していれば、より良いです。

  • ブートストラップという名前を聞いたことがある場合は、このコースを受講することに問題はありません。

こんにちは
です。

702

受講生

44

受講レビュー

63

回答

4.8

講座評価

2

講座

カリキュラム

全体

84件 ∙ (14時間 38分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

30件

4.6

30件の受講レビュー

  • donghyunpark9221님의 프로필 이미지
    donghyunpark9221

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    Good...

    • mandu00님의 프로필 이미지
      mandu00

      受講レビュー 18

      平均評価 4.8

      5

      24% 受講後に作成

      • nggag님의 프로필 이미지
        nggag

        受講レビュー 5

        平均評価 5.0

        5

        61% 受講後に作成

        This course efficiently delivers the core of Bootstrap 5. First, you learn the main basic grammar, and then you learn step-by-step through 3 practical projects. With each project, the basics are repeated and the difficulty level increases, and new advanced techniques are added to naturally strengthen the use of basic grammar. I dare to say that this course has very high learning efficiency. Thank you for providing a useful course.

        • wooggy75님의 프로필 이미지
          wooggy75

          受講レビュー 9

          平均評価 4.9

          5

          38% 受講後に作成

          • mazel님의 프로필 이미지
            mazel

            受講レビュー 8

            平均評価 5.0

            5

            100% 受講後に作成

            The lecture is very helpful.

            • codingdiy
              知識共有者

              Thank you~

          期間限定セール、あと6日日で終了

          ¥13

          25%

          ¥2,694

          codingdiyの他の講座

          知識共有者の他の講座を見てみましょう!

          似ている講座

          同じ分野の他の講座を見てみましょう!