「Bootstrap 4 フロントエンド開発の教科書」のレビュー

技術評論社の「Bootstrap 4 フロントエンド開発の教科書」を読んだのでレビューいたします。
今回はWINGSプロジェクト様の書籍レビュアーに応募し、献本していただきました。
この度は書籍レビュアーに参加させていただき、誠にありがとうございます。

ここからは「Bootstrap 4 フロントエンド開発の教科書」を読んで良かったところ、悪かったところに分けて書いていこうと思います。

良かったところ

まずは「Bootstrap 4 フロントエンド開発の教科書」を読んでみて、良かったところを挙げていきます。

  • リファレンス本として役立つ
  • 機能の説明だけでなく、実践もある
  • 表紙のデザインが好き

リファレンス本として役立つ

Bootstrapの歴史から導入方法、グリッドシステムや各コンポーネントの説明などひとつひとつがしっかりと詳しく書かれているので、とてもわかりやすくて役立ちます。すでにBootstrapについてある程度理解している方は公式サイトを見ればわかるでしょうから、あまり必要ないかもしれませんが、はじめて勉強する方や私のように英語が苦手な人にとってはありがたい存在。手元にこの本を置いておいて、つまずいたりしたときなどに手を取って調べながら使ってみるのが良いかもしれません。

また、要素の説明のとき表示される結果だけでなく、定義されているスタイルまで書かれていたのも、どのように設定されているのかすぐに知ることができて好ポイント。

そして何より私が良かったと感じたのは、アクセシビリティについての配慮・説明がなされていたところです。
中にはただBootstrapの機能の紹介をするだけのところもあったりしますが、この書籍ではスクリーンリーダーなどの支援技術に伝えるためにsr-onlyクラスを使いましょう、であるとか、role属性などのWAI-ARIAについての説明などがページの各所に書かれてあったりと、アクセシビリティに関してだけでも十分勉強になります。

機能の説明だけでなく、実践もある

この書籍の良いところは機能の説明・紹介だけでなく、実践もちゃんとあるところです。第9章の「Bootstrapでモックアップを作る」では、これまで説明のあったコンポーネントなどをつかってカフェのWebサイトのモックアップをつくることができます。

実際に手を動かしながらつくっていくことでどのように実装していくのか具体的に理解しやすくなりますし、より習熟度も上がるのではないでしょうか。
これからこの書籍を読んで覚えようとしている方へのおすすめとしては、まず第1章のBootstrapの導入の仕方を読み、次に第2章のBootstrapのキモともいえるグリッドシステムについての説明を読んだら、一気にこの第9章へと飛ばして早速つくりはじめてみるのが良いかと思います。

ただ前から順に読んでいくだけじゃ勉強していてもあまり面白くないですし、理解もしづらいですから、まずは自分で手を動かしてとりあえず最後までつくってみて、後でわからなかった箇所を調べて勉強するとか、つくりながらその都度前のページに戻りながら理解していくというやり方のほうが頭に入ってくるでしょうし、面白いのではないでしょうか。

表紙のデザインが好き

今回この書籍のレビュアー募集に応募しようと思い、まずはじめの気になるきっかけとなったのが表紙のデザイン。
表紙の白と紺の色使いが好きなのと、背景のサイトのイラストがかわいらしかったので、どんな内容なのだろうかと気になったのです。
そして目次をチェックしてみてBootstrap 4についても個人的に勉強してみたいと思っていたので、応募させていただきました。

技術書といってもやはり本の表紙のデザインは気になりますし、デザインが素敵なほうが目に留まり、手にしてみたくなることも多いですからね。
また、この書籍は480ページと結構なボリュームがありますが、それを感じさせない重さと厚みで読みやすかったのも良かったところです。

悪かった(良くなかった)ところ

正直言って、この書籍を読んで私にはほとんど悪いところは見当たらなかったのですが、あえてしぼり出して挙げてみたいと思います。

全ページカラーではない

唯一気になったところといえば、全ページカラーではなかったところです。
ボタンや背景などといったカラーの説明のところではカラーページで表示されており、それは非常にわかりやすくて良かったのですが、やはりカラーページのほうが読んでみて読みやすいなと感じたので、どうせなら全ページカラーにしてもらえるとありがたかったかなと思います。

私が読んだのはレビュー用に送っていただいた書籍なので、実際に店舗で販売されているものはもしかしたら違っていたりするかもしれませんが、ご了承ください。

Bootstrapの知識がサイト設計にも役立つ

この「Bootstrap 4 フロントエンド開発の教科書」を読んでBootstrapを学習してみて感じたのは、サイト制作の設計をするときにもしBootstrapを使わなかったとしても学んだ知識が役に立つのではないかということです。
アクセシビリティへの配慮もそうですし、マージンの設定であるとか、自分でサイトを設計するときにもBootstrapで覚えた知識が活かせそうな気がしています。

私は今後、Bootstrapをつかって新たなポートフォリオサイトを立ち上げたり、WordPressにBootstrapを組み込んだテーマをつくってみようかと思案しており、その際にはこの書籍を見ながら参考にしたいと思います。


Bootstrapについてだけでなく、HTMLやCSSについてなどの理解もより深まると思いますので、これからBootstrapを勉強してみようと考えている方はぜひ一度読んでみることをおすすめします。

BootstrapからMaterial Design Liteに乗り換えてみた[WordPress]

これまでこのサイトのWordPressのテーマにはBootstrapを使っていたのですが、今回はMaterial Design Liteというフレームワークを使って、テーマを作成してみました。

※2015年9月現在、私のサイトでは動作がおかしくなるのが気になったため、Material Design Liteを使うのをやめてしまいました。

Material Design Liteとは

Material Design LiteはGoogleが公開している、お手軽にマテリアルデザインを扱うことができるフレームワークです。

Material Design Lite

Bootstrapと同じようにグリッドシステムやボタンなどのパーツが揃っています。
ですが、Bootstrapにはあったパンくずリストやページネーションといったあたりはないので、より簡素的なものになっています。

Material Design Liteを使ってみた理由

ここではなぜ私が、Material Design Liteを使ってみたかったかということを書いていきます。

コードサイズが小さい

約27キロバイトとBootstrapよりもかなり軽量だということ。

おしゃれ!

なんといってもこれがいちばんの理由です!
サイトの各部品を見ていたのですが、どれもおしゃれで使ってみたくなりました。

特にいちばんやりたかったが、ボタンのエフェクトです。

クリックすると、波紋のように広がっていくエフェクトがかっこいいですよね。
クリックする位置によって動作がかわるところも素敵です。
ネットで調べれば、やり方も載っているのでしょうが、Googleのが公式で使えるならそっちを使いたいよね~ってことで選びました。

Material Design Liteを使ってみて

ここからはMaterial Design Liteを、WordPressのテーマに組み込んでいったときのお話です。

情報が少ない

有名なBootstrapだとネットや本でも情報が載っていますが、Material Design Liteについての情報はまだ少ないようです。
調べていても、Material Design Liteを使っている人も少ない気がします。

あまり情報が載ってないので、Material Design Liteのサイトからコードを調べてたのですが、全部英語…
Material Design Liteはシンプルなほうだとは思いますが、英語が大の苦手な私にとっては、これでも理解するのに時間がかかるし、しんどいです。

ニュースでもやってますけど、技術者が足りない理由って英語が分からないからというのが一番大きいのでは?

うまくいかないことだらけ

私の技術不足なだけかもしれませんが、Material Design Liteを使ってあれこれやろうとしてみたんですけど、うまくいかないことが多かったです。

スクロール関係がうまくできない

LINEブログの関連記事のように、スマホ画面だと横スクロールできるようにさせたいと思い、overflow-x: auto;を記述してみたのですが、私のスマホでみるとうまくいかない…

パソコンのブラウザを小さくしてみると、ちゃんと横スクロール画面が出てくるし、スマホでも読み込んでる途中までは横スクロールできてるみたいなので、Material Design Liteの何かが悪さしてるはずだと思います。

でもどうやったら解決できるか、今の私にはまったくわからない…

あとフロントページでスクロールすると、要素が動いてアニメーションするようにさせたくて、WOW.jsを使ってみたのですがそれもうまくいかない…
私のサイトにこれまであった、トップに戻るボタンもうまくなりませんでした…

試行錯誤しても全然うまくならないから、Material Design Liteのことがちょっと嫌いになりましたよ。

でもかっこいい

Material Design Liteのスクロールうまくいかないんだって
もぅ 全然わかんないよね
いいよね!(by レ○クのCMより)

いろいろと文句もありますが、それでも実装してみればかっこいい!
私はこれまでテーマは毎回自作しているのですが、今まででいちばんおしゃれ~なサイトになってるんじゃないかな?

正直、自作でテーマなんか作るより、すでに提供されているテーマを利用したほうが時間も労力もかからず楽だと思います。
Material Design Liteを使っているテーマもあります。

まぁ、私はもともとHTML&CSSの勉強するためにWordPressをはじめたようなものですし、自分で作ってるほうが楽しいですからね。
今回は、Material Design LiteのソースをWordPressに合わせるのにも苦戦しまして、カスタムメニューなど使わず主に直書きになってるのが情けないですが、とりあえずちゃんとなっていればオッケーでしょ(笑)

最後にひとこと

多少の問題もありましたが、使い方次第ではおしゃれでかっこいいサイトをお手軽につくれるので、ぜひ試してみてください。

Bootstrapを使って、サイトを組み直しました

WordPressデザインブックを元に作ったこのサイトを、Bootstrapを用いて組み直してみました。

組み直したといっても、ボックスレイアウトをfloat:leftで行っていたところを、Bootstrapに置き換えた程度ですが…

サイトのデザインについても、少しばかりというか、実は結構変更を加えています。
ヘッダーの色の変更や、文字サイズ・フォントの変更など…
トップページもがらりと変えてしまいました。

ブログを書くよりも、サイトを作ってるほうが面白いので、ブログを投稿するのがおろそかになっているのですが、文章をあんまり肩肘張らずに、気軽な気持ちでこれからは書いていこうかなと思ってます。

今後は、WordPressのテーマを自分でデザインして作ること、静的サイトの作成の2つを目指していきたいです。

Bootstrapを学ぶときに参考にした本

Bootstrapについての学べる本ってなかなか見かけないのですが、これらの本ではBootstrapをつかってサイト制作しているので参考になりました。

こちらの本ではBootstrap以外にもFoundationについても学ぶことができます。

Jqueryを活用していたりと、上で紹介した本よりも一歩踏み込んで学びたい方におすすめ。