こんにちは、ユーキです。
今回は、『Bootstrap 4 フロントエンド開発の教科書』という書籍を読み、実践したのでその内容と成果物、そして今後の学びについて記します。
「ポートフォリオ製作をしているが手っ取り早くキレイなデザインにしたい」
「RubyやPHPなどのサーバーサイド言語をメインに使っていてフロントエンドに疎い」
という方には、おすすめできる書籍ですよ！
『Bootstrap 4 フロントエンド開発の教科書』目次と内容
本書の目次は下記の通り。
第1章 イントロダクション
第2章 Bootstrapのレイアウト
第3章 基本的なスタイリング
第4章 基本的なコンポーネント
第5章 ナビゲーションのコンポーネント
第6章 フォームとボタンのコンポーネント
第7章 JavaScript を利用したコンポーネント
第8章 ユーティリティ
第9章 Bootstrapでモックアップを作る
第10章 Bootstrapのカスタマイズ
構成としては、第1~8章でBootstrapの構成とレイアウトを学び、第9章でモックアップを作成する流れです。
ざっくりと内容を分けると下記の通り。
基本的な構成が網羅されているので「リファレンス」としても使えますし、初学者の場合は第9章を「チュートリアル形式」で進めながら網羅的に各構成を確認していくという流れでも良いでしょう。
僕はまず、後者の使い方をしました。
Bootstrap 4 フロントエンド開発の教科書の学び
成果物
GitHubはこちら
コーヒーショップのホームページ制作を行いました。
制作したページは「トップページ」と「お問い合わせページ」の2つです。
どちらのページもレスポンシブに対応しています。
PC画面のトップページ
PC画面のお問い合わせページ
スマートフォン画面のトップページ
スマートフォン画面のお問い合わせページ
実装した機能
チュートリアル形式より、かなり多くの機能を実装することができました。今までは、Ruby on RailsなどとBootstrapを利用していると「nav,nav-bar」や「form-group」などよく分からなかったコンポーネントについての理解が深まりました。
具体的に実装した機能は下記の通り。
【トップページ】
・ヘッダー
・ナビゲーションバー
・カルーセル
・ボタン
・カード
・モーダル
・タブ付きナビゲーション
・テーブル
・埋め込み
・フッター
【お問い合わせページ】
・パンくずリスト
・各種フォーム
・バッジ
機能のの種類はかなり多いですが、基本的な構成はどれも似ており、「全体の定義→部品の定義」なので、すんなり理解できました
今後の活かし方
個人のアプリケーション（ポートフォリオ）製作では、Bootstrapの既存テンプレートを利用する予定です。
今回学んだ各コンポーネントの挙動をしっかりと把握し、既存のテンプレートをうまく編集しながら、効率よくデザイン面を調整していきたいですね。
リファレンスとして、『Bootstrap 4 フロントエンド開発の教科書』を手元に置いて、分からないコンポーネントは逐一調べることで理解を深めることができそうです。
・1〜9章：＜基本・基本＞構成・コンポーネントの網羅
・9章：＜実践＞チュートリアル形式のモックアップ制作
・10章：＜応用＞既存Bootstrapのカスタマイズ