本のレビュー「Dreamweaver デザインブック CC2015対応」を Bootstrap4でやってみる。

今回の本は「Dreamweaver デザインブック CC2015対応」です。

最近の私はHTML／CSSの勉強がだいぶ進んできたので、次の段階としてBootstrap4を勉強しています。その一歩目としてBootstrapがテーマの「Dreamweaver デザインブック CC2015対応」を読み終えたのですが、この本ではBootstrap3が使用されています。
思えば、この本を買ったときの私はBootstrap3と4の違いをよく理解してませんでした。大した問題では無いだろうと読み始めたのものの、私のDreamweaver CC2017とBootstrap4での環境では、幾つかの違いでつまずきました。

そこで今回は、この本の中で私が見つけたBootstrap3→Bootstrap4の移行点を挙げていこうと思います。この本の購入を考えている方、今読んでいてつまずいている方は参考にしてみて下さい。また、Bootstrapの各classの詳細は記述しないので、不明な点は他の情報を参照してください。

1. p95、画像のレスポンシブの設定内「.img-responsive」は「.img-fluid」に。
2. p103、Bootstrapとは関係がありませんが、FontAwesomeのアイコンの形が変更になっています。
3. p165、メニューを縦並びにするには「.nav」に加え「.flex-column」を指定します。
4. p190、「.navbar-right」が廃止になったので「.ml-auto」を使用。
5. p296、「.push」が廃止になったので「.order」を使用。
6. p299、「.img-circle」が廃止になったので「.rounded-circle」を使用。

他にも何箇所か違いはあるのですが、その点はCSSの記述で合わせられるだろうと思います。

本自体の内容は、Bootstrapの機能を網羅するというよりも、レイアウトを中心に実践的な使い方に焦点を当てて書かれているので、この本をしっかり学べれば、Bootstrapの初歩的な使い方は直ぐに出来る様になると思います。

現状ではDreamweaverとBootstrapの組み合わせを学べる本は少ないので、そういった意味ではオススメです。