学習ガイド一覧 - Bootstrap入門ガイド

BootstrapはCSSフレームワークの1つです。Bootstrapに用意されてるCSSを利用することで、簡単にWebサイトの見栄えを調整できるようになります。

Bootstrapは2011年頃に登場して、Web開発の世界に瞬時に広がりました。当時はわたしもエンジニアとして仕事をしていましたが、HTMLやCSSを記述するのはあまり好きではありませんでした。正確に言えば、画面の余白を微調整したり、配色を考えたり、機能開発とは異なる細かな調整作業にかかる時間が好きではなかったのです。

Bootstrapを利用することで、このような調整作業の多くから開放されます。Bootstrapは画面のレイアウト定義やボタンなどのコンポーネントが適度に抽象化されています。Bootstrapの流儀(やり方)を覚えることで、画面のデザインの大枠を短時間で簡単に実装することができるようになります。

Bootstrrapは画面をデザインすることの楽しさに気づかせてくれるフレームワークです。

学習時間の目安

  • 60分程度です。
  • 動画を見るだけなら6分程度です。
  • コスパよいです。

学習後の成果

  • Bootstrapのインストールや使い方がわかります。
  • テーブルやボタン、ナビゲーションバーの表示方法がわかります。
  • コンテナやグリッドシステムを使って画面レイアウトを調整できるようになります。

対象者

  • HTML/CSSの基礎知識がある方
    • JavaScriptやPHPの知識は不要です
  • Webサイトを短時間でデザインしたい方
    • テキストエディタを使って簡単にWebサイトをデザインできます
  • Webプログラミングに興味を持っている方
    • HTML/CSSで画面をデザインするのでWebアプリの開発にも役立ちます

Agenda

  1. Bootstrapのインストール: 10分
  2. テーブルの表示: 10分
  3. ボタンの表示: 10分
  4. コンテナによるレイアウトの設定: 10分
  5. ナビゲーションバーの表示: 10分
  6. グリッドシステムによるレイアウトの設定: 10分