初心者でも安心!ビジネスに役立つBootstrap 5・HTML・CSS・レスポンシブWebデザイン 入門
WebフレームワークBootstrap 5 を用いて、Webページ作成に必要なスキルを習得します。HTML・CSS・Bootstrapの基本から応用的なトピックまで、丁寧に解説していきます。
Description
本コースは、HTML、CSS、JavaScriptで構成されるWebフレームワークであるBootstrapを用いて、Webページ作成に必要なスキルを習得することを目的としたコースになります。
Webフレームワークとは、Webページを作るための機能を提供し、比較的簡単にWebページを作ることができるものです。
Bootstrapでは、Webページをデザインするのに必要なテンプレートも予め豊富に用意されており、専門的な知識やスキルがなくてもデザイン性の高い Web ページを作成することができます。Webページを初めて作成する方にも学びやすくなっています。
【このコースで扱うトピック】
このコースの最後では、会社用のホームページを作成していきます。しかし、人によって作成したいWebページは異なりますし、また流行のWebページも日々変化していきます。
このコースの基本的なコンセプトとして、これらの違いや変化にも柔軟に対応し他のWebページの作成にも応用できるよう、ビジネスに利用するWebページの作成においてポイントとなる箇所と対応方法をできるだけ幅広く解説しながら進めていきます。
このコースで扱うトピックは、これらのものになります。
1. HTML・CSSの基本
HTML・CSSの基礎と、これらの技術を用いてWebベージの構造を作成し、見た目を整える方法を学びます。
2. Bootstrapの基本的な使い方
応用的なトピックに入る前にBootstrapの基本的な使い方を学びます。
3. BootstrapによるWebデザイン
BootstrapにはグリッドシステムやFlexユーティリティなど、Webページを自由にレイアウトするための機能が豊富に用意されています。またテキストや色、余白などに関する基本的なスタイルが予め用意されています。これらBootstrapのレイアウトに関する機能やスタイルを利用し、洗練されたデザインのWebページを作成する方法を学んでいきます。
また近年、ユーザーがWebサイトへアクセスするのに利用する端末は、デスクトップパソコンやノートパソコンだけでなく、スマホやタブレットなどのモバイル端末からのアクセスが急増しています。これら異なるデバイスの画面サイズに応じて表示を自動的に最適化するデザイン手法であるレスポンシブデザインは、ビジネスに関連するWebサイトを作成する上で、非常に重要なトピックになります。
4. Bootstrap の部品
Bootstrapには、ボタンやフォーム、メニューなど、様々な部品が用意されており、これらを利用することで洗練されたデザインのWebページを作成することができます。さらに各部品にもいくつかのパターンがあり、それらを組み合わせることでデザインのバリエーションも広がります。
またBootstrapにはJavaScriptを活用し、よりダイナミックな動作を伴った部品も用意されています。これらは簡単な設定だけですぐに利用することができます。
これらのトピックを通じて、洗練されたデザインのWebページを実装するのに欠かせない、Bootstrapの部品の設定方法を学んでいく予定です。
5. 総合プロジェクト
このコースの最後には、実践的な知識を身に付けて頂けるよう、総合プロジェクトとして会社用のホームページを作成していきます。
このようにこのコースでは、これらのWebページの作成に欠かせないトピックをカバーすることにより、他のWebページにも応用の利く技術を身に付けて頂けるようデザインされています。また知識が定着するようポイント、ポイントで演習も用意しております。
What You Will Learn!
- WebフレームワークBootstrapの高度な機能を用いて、効率的にWebページの作成ができるようになります。
- HTML・CSS・Bootstrapを用いて、Webアプリをデザインする方法を理解することができます。
- 異なるデバイスの画面サイズに応じて表示を自動的に最適化するレスポンシブデザインを学ぶことができます。
- Flexboxやグリッドレイアウトの実現方法を理解し、自由度の高いデザインを実現することができます。
- 実践的な演習問題を通じてBootstrap・HTML・CSSの理解を深めることができます。
Who Should Attend!
- Webページの作成をビジネスや副業、趣味に活用されたい方
- Webページの作成に興味があるが、始め方がわからない方
- HTMLやCSSの基礎的なことは学び終わり、次に何か実用的なことを学びたい方