【保存版】Bootstrapの学習方法まとめ
こんにちは、マサです。
1月の下旬頃からBootstrapを学習し、その過程と学習のまとめを記事にしてきました。
前回の記事できりのいいところまで進んだので、次の言語の学習に進む前に、自分なりのBootstrap学習ロードマップをまとめておこうと思います。
Bootstrapの学習ロードマップ
どの言語も同じなのですが、インプットしたらアウトプットするというのが大事です。
ですが、Bootstrapの機能すべてでこれを実行するにはかなり時間がかかります。
ですので、ある程度のところで見切りをつけながら効率よくやっていきましょう。
順序としては、
- ①基本的な役割の理解
- ②全体的な機能の理解
- ③必要な機能のインプットとアウトプット
- ④制作物を通してアウトプット
これでいいと思います。
順番に解説していきます。
①基本的な役割の理解
まずは、Bootstrapがどんなものなのかを理解するためのステップです。
最初に書いたこの記事でどんなものかは分かると思います。
Bootstrapは何か？という根本的な部分を掘り下げています。
また、私が学習し初めのときはYoutubeでともすたチャンネルさんを活用しました。
最初の動画だけでいいので見るとかなり理解が深まると思います。
そして、基本的な役割はこれらの記事やYoutubeをそのまま見ていけば理解ができるかと思います。
Layout、Content系のまとめ
Bootstrapのグリッドシステムへの理解は絶対に必要ですが、必ずしも完璧に理解する必要はこの段階ではないと思っていて、2つ目と3つ目に貼った記事でこういった面もあるんだな、くらい理解で頭の片隅に置いておくのがいいでしょう。サラッとでOKです。
②全体的な機能の理解
BootstrapにはComponentsと呼ばれる中に使える機能がたくさんあります。
これの中から必要な機能を選んで枠組みとしていくイメージです。
そして、その枠組の中で更に細かく記述をしていくのに、Layout、Content、Utilitiesが使えます。
最初の2つはそもそもの基本的なところなので、前述した【1. 基本的な役割の理解】で参考記事を貼ってます。
対して、残りの1つUtilitiesはComponentsの補助的な感じで使えるツールのような位置づけだと思っています。
ComponentsとUtilitiesもそれぞれ参考記事をまとめておきました。
Components系のまとめ
機能の種類で似ているものをカテゴリ分けしつつ、機能の紹介記事を書いています。
www.appatwi.com
www.appatwi.com
www.appatwi.com
www.appatwi.com
www.appatwi.com
www.appatwi.com
Utilities系のまとめ
Utilitiesに関してはComponentsに比べて量が少ないので、1記事のみです。
ここまでで単体ごとのカスタム機能の使い方はある程度理解できたかと思います。
これを深く理解するのは参考書が正直一番役立つかと思います。
私が買った参考書はこれです。
Bootstrap4ファーストガイド―CSS設計の手間を大幅に削減!
- 作者:相澤 裕介
- 発売日: 2018/05/01
- メディア: 単行本
必要機能が網羅的に解説されてあるので理解が深まります。
もう1つ最後まで迷っていたのがこれ。
Bootstrapの参考書を買うならこのどちらかで間違いないでしょう。
ただ、注意点としては1つの制作物を作っていく、という流れでは無いので、ザーッと目を通して使えそうな所に付箋をします。
そして、必要な時に確認するくらいで良いでしょう。順番にやる必要はないです。
③必要な機能のインプットとアウトプット
ざっくりと理解したら次に必要な機能の掘り下げです。
上記に貼った記事でも細かくは内容を掘り下げてないので、主観で大丈夫なので、この機能は使う場面がありそうだな、と思ったところだけをコードをコピペしつつ実際にコーディングしてみます。
私は特にグリッドレイアウトに関してはこうしました。
また、例を挙げるとカルーセルスライダーやカードやフォームなんかは定番で使いやすそうなものですから、自分でも触れておくほうがいいでしょう。
④制作物を通してアウトプット
そして最後のステップですが、制作物を作ってみることです。
私はデザインから自分で考えつつサイトコーディングを行いましたが、大変な分かなり身につきました。
www.appatwi.com
www.appatwi.com
www.appatwi.com
www.appatwi.com
www.appatwi.com
また、結局使いませんでしたがやYouTubeにも同じようなレッスンがあったので、当初はこっちをやろうと思っていました。
制作物はどれか1つをやれればいいです。Bootstrapはそこまで時間を掛けすぎないほうがいいと思いますので。
