【読書メモ】Bootstrap4 フロントエンド開発の教科書

【読書メモ】Bootstrap4 フロントエンド開発の教科書
この記事は約7分で読めます。

どうもタスです。

PHPフレームワーク Laravel入門 第2版を読み、フロントエンドのフレームワークであるBootstrapに興味を持ち本書を手に取った。875ページという、言うならば辞書とも言うべき厚さの本なのだが、まさに辞書やリファレンス本として活用するべき本だと感じた。

そこで今回は、読書習慣を始めて144冊目の本となった『Web開発の知識とコツをしっかりマスター フロントエンド開発の教科書(技術評論社)』を読了したのでお伝えする。

Bootstrap4フロントエンド開発の教科書
created by Rinker

 

著者のご紹介(本書引用)

(みやも とまや)
第1章、第2章、第7章、第8章、第10章担当。WINGSプロジェクト所属のフリーライター。専門学校在学中、Webデザインコンペで入賞したことをきっかけに、Webデザインの世界へ。卒業後、文具メーカーにてWeb開発を担当、2013年退職。現在はWebサイトの構築やコンサルティング業務を行うかたわら、執筆活動をしている他、職業訓練校やスクールにてWebやDTPに関するトレーニングを行っている。

(あさひら ふみひこ)
第3章、第4章、第5章、第6章、第9章担当。神戸芸術工科大学大学院芸術工学研究科(総合デザイン専攻)修了。建築デザイン、都市計画コンサルタントを経て、現在はWebやグラフィックなどのヴィジュアルコミュニケーション分野のコンサルティング・制作業務を行っている。また、大学や職業訓練校の講師としてクリエイター育成にも尽力している。

監修者紹介 (やまだ よしひろ)
千葉県鎌ヶ谷市在住のフリーライター。MicrosoftMVPforVisualStudioandDevelopmentTechnologies。執筆コミュニティ「WINGSプロジェクト」の代表でもある。主な著書に『改訂新版JavaScript本格入門』『Angularアプリケーションプログラミング』『RubyonRails5アプリケーションプログラミング』(以上、技術評論社)、「独習シリーズ(C

 

目次

第1章 イントロダクション
 1.1 Webアプリケーションフレームワークの基本
 1.2 Bootstrapの特徴
 1.3 Bootstrapの歴史
 1.4 Bootstrapの導入
第2章 Bootstrapのレイアウト
 2.1 Bootstrapのグリッドシステム
 2.2 列の自動レイアウト
 2.3 レスポンシブなグリッドシステム
 2.4 カラムの整列
 2.5 カラムの並べ替え
 2.6 レイアウトのためのユーティリティ
第3章 基本的なスタイリング
 3.1 タイポグラフィ
 3.2 コード
 3.3 画像
 3.4 テーブル
 3.5 図表
 3.6 Rebootによる初期設定
第4章 基本的なコンポーネント
 4.1 ジャンボトロン
 4.2 アラート
 4.3 バッジ
 4.4 プログレス
 4.5 カード
 4.6 メディアオブジェクト
第5章 ナビゲーションのコンポーネント
 5.1 ナビゲーション
 5.2 ナビゲーションバー
 5.3 パンくずリスト
 5.4 リストグループ
 5.5 ページネーション
第6章 フォームとボタンのコンポーネント
 6.1 フォーム
 6.2 入力グループ
 6.3 ボタン
 6.4 ボタングループ
 6.5 ドロップダウン
 6.6 ドロップダウンのJavaScript使用
第7章 を利用したコンポーネント
 7.1 BootstrapのJavaScriptプラグイン
 7.2 カルーセル
 7.3 カルーセルのJavaScript使用
 7.4 折り畳み
 7.5 折り畳みのJavaScript使用
 7.6 モーダル
 7.7 モーダルのJavaScript使用
 7.8 スクロールスパイ
 7.9 スクロールスパイのJavaScript使用
第8章 ユーティリティ
 8.1 Colorユーティリティ
 8.2 Borderユーティリティ
 8.3 Displayユーティリティ
 8.4 Sizingユーティリティ
 8.5 Spacingユーティリティ
 8.6 Flexユーティリティ
 8.7 Floatユーティリティ
 8.8 Positionユーティリティ
 8.9 Textユーティリティ
 8.10 Vertical alignユーティリティ
 8.11 その他のユーティリティクラス
第9章 Bootstrapでモックアップを作る
 9.1 サイト概要とファイルの準備
 9.2 新規ファイル作成
 9.3 ヘッダーの作成
 9.4 ナビゲーションバーの作成
 9.5 メインビジュアルの作成
 9.6 コンテンツ01(News)の作成
 9.7 コンテンツ02(About)の作成
 9.8 コンテンツ03(Menu)の作成
 9.9 コンテンツ04(Coupon)の作成
 9.10 コンテンツ05(Information)の作成
 9.11 フッターの作成
 9.12 リンクの設定と追加CSSの作成
 9.13 下層ページ(Contact)の作成
第10章 Bootstrapのカスタマイズ
 10.1 Bootstrapのオリジナルスタイルを上書きする
 10.2 Sassを使ってカスタマイズする
 10.3 CSS変数を利用する

 

フレームワークから基礎知識を学習する

【読書メモ】Bootstrap4 フロントエンド開発の教科書

冒頭で言ったとおり、そして目次を見れば明らかだけれど、本書は逆引きリファレンス本として活用できる、CSSのフレームワークであるBootstrapの教科書である。875ページあるが、中身は簡潔で体系的であるため順繰りに知識を入れ込みたい方には良心的な本である。

何せフレームワークゆえに、決まりを守ればある品質の表現(見た目)を実現することができる。そして、それは1から作ろうと思えば専門的知識は必要不可欠であるから、学習コストも削減できる。しかしながら、ある程度の知識が無ければフレームワークも理解できないので、フレームワークを勉強しながら、その基礎知識を蓄える、本質から入って枝葉を理解する方式も可能なのである。

 

デザインはデザイナーのものだけではない

【読書メモ】Bootstrap4 フロントエンド開発の教科書

この1冊を理解するだけで、相当のデザインが可能になると思う。むしろ、理解はハードルが高いため、索引を自分に設けるだけで引き出しはかなり増える。先ほども言ったとおり、フレームワーク云々だけでなく、デザイン手法という引き出し自体が増える。

私が扱っている業務システムというのは、デザイン性がない。こだわらないと言う方が正しいのかもしれない。機能性重視のシステムであり、外(インターネット)に公開するわけでもないから、あまり重要視しないのである。

しかし、やはり使用者含め、私はデザインは重要だと思っている。面接で第一印象が重要なように、システムも見た目が大事だと考えるのは至極最もなことなのではないかと思うからだ。そう考える以上、デザイン言語にも、このようなフレークワークが存在することは非常に嬉しいことだし、デザインはデザイナーに閉じた専門分野でないことを理解する必要がある。

 

使って楽しいシステムを作ろう

【読書メモ】Bootstrap4 フロントエンド開発の教科書

Bootstrapってなに?というのは、本書の冒頭を読めば(むしろネットでも良い)理解できる。どういうことができるのかもネットである程度知ることができるだろう。本書の使いどころは、体系的に滔々と可能なことが網羅できることである。

本書を読むことで、LinkでBootstrapのCSSさえ読み込めば、自分の望むデザインをそれほど労力掛けずに実現できることが理解できるだろう。見た目の冴えない人に映るより、少しは見栄えの良い人に映った方が得なことはある。それと同様、システムにもデザイン性を配慮する心を本書を読みながら養えれば、使って楽しいシステムが増えることは間違いない。

Bootstrap4フロントエンド開発の教科書
created by Rinker

スポンサーリンク


Pocket


SNSでもご購読できます。

コメントを残す

*

CAPTCHA