30DAYSトライアル1st

30DAYSトライアルのまとめ【DAY11】

DAY11の課題は「Bootstrapの基本を学ぼう」になります。

DAY11課題

環境構築編も終わり、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記事が分かりやすかったです。

CSS Grid Layout を極める!(基礎編)

上記の記事でよくある例としてあげられいる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を意識すれば復習にもなる
ABOUT ME
Jyu2
【PC1台で稼ぐブロガー兼Webエンジニアを目指し中】IT情報やWebサービス、アプリなどの情報を発信/SIerで10年以上勤務→ストレスMAXで休職中→ブログとWebの学習を行い脱サラ計画中/ #30DAYSトライアル 1st完了→2nd実施中 / 日々の学習内容をブログにアウトプット / まずは月収5万円を目指す