学習内容

• CDNを利用したBootstrapの導入方法を学びます。
• Gridシステムというサイトの横幅を均等に分けるガイドライン活用してレイアウトを構成する仕組みを学びます。
• マルチデバイスに対応する方法を学びます。
• サンプルサイトの作成を通じて、Bootstrapによるレイアウトの方法を学びます。

受講における必要条件

• HTML/CSSの基礎知識

HTML/CSSを一度も触ったことがない方は、まずは書籍等で基礎の学習からはじめることをオススメします。

教材内容

ウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークであるBootstrapを使って、Gridシステムの基礎を学んだあと、Bootstrapの公式サイトにあるサンプルサイトを2つ作ります。

作成するサンプルページには、下記のアドレスからアクセスできます。

サンプルページ1：https://getbootstrap.com/docs/4.3/examples/pricing/
サンプルページ2：https://getbootstrap.com/docs/4.3/examples/carousel/

本教材は、BootstrapのGridシステムを理解して使いこなせるようになることや、Bootstrapを使って要求されたデザインを作ることができるようになることを目的としております。 Bootstrapで、本格的なデザインを簡単に実装できるようになりましょう！

この教材の対象者

• HTML/CSSの基礎はprogate等で触れたことがある
• Bootstrapを使ったことがない

学ばないこと

本教材はBootstrapの解説をメインとしているので、HTML・CSSの解説は詳しくしていません。細かく知りたい方はご自身で調べていただければと思います。

本教材で質問対応可能なOSや環境

• Mac OS
• Windows

本教材ではBrackets を使っているので、MacでもWindowsでも質問対応可能です。

この教材を執筆した理由、きっかけ

Bootstrapを使って、手軽にレスポンシブWEBデザインができるようになりたいと思っている学習者さんに助けになればと思いこの教材を作成しました。Bootstrapは実際の業務の現場でも役に立つスキルなので、この機会に是非学んでいただけると幸いです。