【おすすめ】Bootstrapの学習方法 2
先に学習法2が思いついてしまったので、先に公開しています。
学習法1は後ほど書こうと思います。
前置き
Webサイト制作を学習している時に必ずと言ってもいいほど遭遇するのがBootstrap。
そのBootstrapの使い方で悩んでいる人も少なくは無いと思います。
そんな時に、おすすめしたい学習方法があります。
それは、「逆引き学習」です。
簡単に説明すると、書きたいcssをbootstrap.cssから検索して、それに該当するclass名を知るという方法です。
学習の前提
- cssの知識があること
- cssを綺麗に書けること
- 調べる根気をがあること
具体的な学習方法
まず、使用したいBootstrapのcssファイルを見にいきます。
今回はv4.3.1で見ていこうと思います。
Bootstrapのcssファイルは2つあります。
1つはminify化されたファイル。
特徴として、ファイル名にminが付いており、数行で書かれています。(1行がとても長い)
1つは人が見やすく書かれたファイルです。
私たちが普段書いているCSSとなんら変わらないコードです。(行数はとても多い)
今回使用するのは後者の、bootstrap.cssを使用します。
まず、作りたい画面デザインがあると思いますが、それをBootstrapを使用しないで作成しよう考えます。
cssではどうやって書くだろうか。
もし画像を横幅いっぱいに表示したい場合、cssで書くとしたらwidth: 100%;を指定しますね。
ですが、これをbootstrapで書くとしたら、どのように書けば良いでしょうか。
実際に逆引きで調べてみましょう。
bootstrap.cssで「width: 100%」と検索します。
が、ここでポイントが2つあります。
-
:(コロン)の右側は半角スペースを開ける - 末尾の
;(セミコロン)は検索しない
;(セミコロン)を検索に入れない理由としては、bootstrapは!importantを使用していることがあるため、そのコードもちゃんと検索にヒットする様にするためです。
検索してみると、たくさんヒットすると思いますが、今回はwidth: 100%;だけを指定したいので、検索を連打して、目的のcssが書かれている場所を見つけます。
そうすると、
.w-100というclass名が付いたコードが見つかります。
ということは、bootstrapでwidth: 100%;を指定したい場合は、w-100というclassを付ければ良いことが分かりました。
基本的には、この調べ方を繰り返していくのですが、今回は学習方法なので、もう少し検索について話しておきます。
.w-100の他にも、.mw-100というclass名がヒットすると思います。
cssを読んでみると、max-width: 100% !important;と書かれています。
ということは、mがmaxでwがwidthの略ということが想像できるのでは無いでしょうか。
ということは、max-heightを指定したいときは、.mh-100って指定するのかもしれない！
と、連想ゲームのようにbootstrapの指定のルールがわかってくると思います。
また、bootstrap.cssは関連するcssが近くに書かれているので、.w-100の付近をみてみると、.w-autoや.h-25など、他の横幅の指定方法や、横といえば高さ(height)の指定方法も知ることができます。
以上が私がおすすめするBootstrapの逆引き学習法でした。
よくある(かもしれない)質問
Q. cssの知識はどれくらいあれば良いですか。
A. どれくらいでも良いです。強いていうなら、1つのサイトをBootstrapを使わないで作れるくらいはあると良いと思います。
Q. Bootstrapから学習を始めて、cssが分かりません。そこから学習する方法はありますか？
A. Bootstrapが書けるなら、class名とBootstrap.cssを辞書のように使ってみましょう。.rowにはどんなCSSが書かれているのか調べてみると良いと思います。
Q. そもそもcssもBootstrapも分かりません。どちらから学習すれば良いでしょうか。
A. cssの学習からおすすめします。今回記事も、cssがある程度知っている前提の学習方法ですので、基礎をしっかりと固めてから応用としてBootstrapの学習を進めてみましょう。
Discussion