DAY11の課題は「Bootstrapの基本を学ぼう」になります。
環境構築編も終わり、BootstarpでのLP制作編に入っていきいます。まずはドットインストールでBootstrapの基礎を学ぶところからスタートです。
DAY11はドットインストールのBootstarp編の#1〜#9までを学習することになっているので、その動画で学習した内容をまとめていきます。
Bootstarpとは？
BootstarpはCSSフレームワークの1種で世界で最も使用されているCSSフレームワークです。
ちなみにCSSフレームワークとはWebページで使用する部品(要素)をあらかじめclassとして定義されたCSSになります。使用する場合は、その提供されたCSSを読み込んで各要素にフレームワークで定義されているclassを指定してWebページを作成していきます。
CSSフレームワークを使用することで、一つ一つスタイルを指定しなくて良くなるので開発のスピードが上がったり、デザインに統一感が出たりといったメリットがあります。その一方オリジナリティのあるデザインにはしにくかったりするデメリットがあります。
CSSフレームワークのメリット、デメリットなどは以下のサイトで分かりやすくまとめられています。
【初心者向け】CSSフレームワークとは？メリットや使い方を解説
Bootstrap以外のCSSフレームワークは以下のサイトで紹介されていますので、Bootstrapから初めてみて、自分に合うものを探すのもいいかもしれません。
ラクするWeb制作「フレームワークなにソレ？」な初心者へおすすめの7選
Bootstarpの基本的なclass定義
Bootstrapのclass定義は公式HPの「Documentation」に記載されています。その中でドットインストールの学習で実際に使用したものをまとめます
-
- 文字の配置text-center、text-left、text-right
- 背景色の指定：bg(background)-[color]
[color]部分にはカラーコードの指定ではなく、Bootstarpで定義されているもの(primary、secondaryなど)を定義する。これは背景色だけでなく、文字色なども同様。
色の定義は公式HPの「Documentation > Utilities > Colors」に記載されている。
-
- 要素の幅指定：w(width)-[size]、h(height)-[size]
[size]には数値を指定することで、指定した数値%のサイズとなる。
例）w-25 → widht: 25%;、h-100 → height: 100%;
-
- padding、marginの指定：[p(padding)/m(margin)][location]-[size]
[location]にはt(top)、b(bottom)、l(left)、r(right)、x(left + right)、y(top + bottom)を指定する
[size]には0、1(0.25rem)、2(0.5rem)、3(1.0rem)、4(1.5rem)、5(3.0rem)、auto(marginのみ)を指定する。
rem(root em)はhtmlのルート要素(html要素)のフォントサイズを基準に計算される。
例)html要素のフォントサイズが32pxの場合に「pt-4」と指定した場合はpadding-topの値が48px(32 * 1.5)になる。
-
- ボタン：btn-[color]
ボタンの色だけでなく、hover時などのスタイルも指定される。buttonタグだけでなく、divタグなどにも使用可能。
paddingやwidth、heightなどには「important」が指定されていて、独自に追加したクラスなどでスタイルを上書きでないようになっているものもあるので、注意が必要。
Gridを使用する
そもそもGridとはっていうのは以下のQita記事が分かりやすかったです。
上記の記事でよくある例としてあげられいる2カラムレイアウト、3カラムレイアウトをBootstrapを使用して記述してみました。
2カラムレイアウト
See the Pen
Grid_Bootstarp_2カラムレイアウト by Jyu2 (@Jyu2)
on CodePen.
3カラムレイアウト
See the Pen
Grid_Bootstrap_3カラムレイアウト by Jyu2 (@Jyu2)
on CodePen.
を使わなかったらCSSの指定がかなり面倒ですが、Bootstrapを使うすっきり、Gridの完成図をイメージしながらかけますね。
まとめ
- Bootstarpは世界で一番使用されているCSSフレームワーク
- CSSフレームワークを使用するにはメリット、デメリットがあるので状況によって使用の有無を考える必要がある
- 公式HPの「Documentation」にて定義されているclassの説明が記載されているので、開発時に参照する
- ドットインストールの動画を見ながらプログラミングする時に、VSCodeのショートカットキー、Emmetを意識すれば復習にもなる
