Yuki Watanabe's Blog

Yuki Watanabe's Blog

2019年に経理からエンジニアに転身した人のブログ

『Bootstrap 4 フロントエンド開発の教科書』を読んだ記録

2019年に『Bootstrap 4 フロントエンド開発の教科書』を読み、サンプルを作りながら学んだ内容を振り返ります。サーバーサイドの学習が中心で、画面のレイアウトや見た目を整える知識を補いたいと思っていました。

本で取り組んだこと

本書では、基本的なレイアウトやコンポーネントを学んだ後、モックアップ制作とカスタマイズに取り組む構成でした。概念を読むだけでなく、実際に画面を組み立てて各部品の使い方を確かめられた点が役立ちました。

扱った主な項目は次のとおりです。

  • レイアウトと基本的なスタイリング
  • ナビゲーション、フォーム、ボタンなどのコンポーネント
  • JavaScriptを使うコンポーネント
  • ユーティリティとカスタマイズ
  • サンプルのモックアップ制作

学んだのはBootstrap 4です。書籍の内容やサンプルは現行版の使い方を説明するものではありません。

作成した画面の例

Bootstrapで作成したPC向けページ上部

Bootstrapで作成したPC向け問い合わせフォーム

Bootstrapで作成したスマートフォン向けページ上部

Bootstrapで作成したスマートフォン向け問い合わせフォーム

今振り返って

完成した画面だけでなく、既存の部品を組み合わせて試すことで、HTMLとCSSの役割を意識できました。これから学ぶ場合は、Bootstrapの公式サイトで現行のドキュメントを確認し、使用するバージョンに合った資料を選ぶのがよさそうです。

本書: Bootstrap 4 フロントエンド開発の教科書