エンジニアステップ

初心者エンジニア(1年目~3年目くらい)のための技術ブログ

DAY11.『Bootstrapの基本を学ぼう』 #30DAYSトライアル

DAY11.『Bootstrapの基本を学ぼう』 #30DAYSトライアルです。 

» 参考:【初心者からサイト制作で月5万円を稼ぐための30日間トライアル】まとめ

www.engineer-step.com

 

DAY11.『Bootstrapの基本を学ぼう』 

DAY11. 『Bootstrapの基本を学ぼう』ということで、CSSフレームワークを学びます。

 

 はっきり言って超便利でした!

 

Bootstrapとは何か?簡単に解説してみた

Bootstrap(ブートストラップ)とは何か?簡単に解説です。

  • フロントエンドWebアプリケーションフレームワーク(CSSフレームワークとも言う)
  • HTML,CSS,JavaScriptで構成される
  • 元々はTwitter社内で開発されて使われていた
  • ライセンスはMIT License(商用利用可能)
  • HTML5,CSS3ではサポートは不完全だが、主要なWebブラウザと互換性あり
  • とにかく有名!よく使われている!

 

結局Bootstrapのメリットは何か?

Bootstrapのメリットは以下の3点です(多分)

  • フレームワークなので「CSSを自分で書く手間が省ける」=既にあるものを使えば大体OK!
  • レスポンシブWebデザイン対応(自動でやってくれる)
  • Gridレイアウトが超便利

とにかく、ウェブサイトを作るのがスゴい楽になるものなんだなーという理解で大丈夫です。

 

ドットインストールでBootstrap4を学習(レッスン#01~#09)

ドットインストールでBootstrap4を学習しました。

 

範囲は「レッスン#01~#09」です。

  • BootStrapの簡単な例
  • 公式サイトのドキュメンテーションの見方
  • グリッドレイアウト

についての説明がありました。

で、動画を見ながらコーディングしました。

※LiveServerの便利さを改めて痛感…

 

以下、初心者がつまずきそうな所を解説します(私も初心者ですけどw)

 

BootStrapの記法を使うと何故デザインが変更されるの?

BootStrapの記法を使うと何故デザインが変更されるのか?

 

これはサンプルコードの中で、BootstrapのCSSを読み込んでいるからです。

ここの部分の記述ですね↓

 

 

実際URLにアクセスしてみると良いです。

確かにCSSが書かれているなあ、と分かるはず。

https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css

 

たとえば「bg-primary」と検索するとこんなCSSのクラス定義がされているのが分かります。

.bg-primary{background-color:#007bff!important}

見て分かる通り、青色が定義されていますね。

あと、動画内でも解説ありましたが、importantが付いているので、最優先で処理がされることも分かります。

 

覚えておくべきショートカットキーは「カーソル行の複製(コピー)」

動画の中でさり気なくやられていた操作気づきましたか?

ショートカットキーの「カーソル行の複製(コピー)」です。

VSCODEのショートカットキーを参考に載せました(覚えておくと良いです)

  • Windows→ Alt + Shift + ↑/↓ カーソル行をまるっとコピー(複数行対応)
  • MacOS→ ⇧⌥↓ カーソル行を下にコピー

 

以前書きましたが、大事なショートカットキーだけ印刷なり、壁紙にするなりして、見やすいようにしておいたほうが良いですよ~

www.engineer-step.com

 

CSSのfont-sizeについて(remとは?)

CSSのfont-sizeで「rem」という聞き慣れないものが出てきましたね。

 

先にCSSのフォントサイズの全体像を理解してみましょう。

  • フォントには絶対値相対値がある
  • 絶対値はpxがよく使われる
  • 相対値はemがよく使われる

というのが基本っぽいです。

 

そして、今回動画内で出てきたremは相対値です。

由来は「root + em」。

root要素(html)に対して「何倍かを指定」するものです。

 

たぶん「相対値を使うときに、複雑にならずに使える」のだと思います。

親子関係の、親側のフォントサイズ指定を気にしないでOKってことですね。

 

ちなみに、CSSの長さの単位はこれだけ種類があります、多いですねー。

em 相対単位。基準は要素のフォントサイズ

px 絶対単位。ピクセル

 

実際によく使う単位は em ,px の2種類でしょう。
デザイナーさんによってはptで指定がくることもありますが、ピクセルで割り切れず厳密に同じ長さにならないためpxで指定いただくようお願いしています。

 

remはCSS3で追加される新しい単位です。
emに似ていますが、remは親要素ではなくルート要素のフォントサイズを元に計算されます。

[CSS]長さの単位 - Qiita

qiita.com

 

ググる力を鍛えよう【余談】

ググる力を鍛えようという話がショーへーさんからTwitterで流れていました。

 

ってことで、Gridレイアウトの説明は皆さんググると思いますので、みなさんがググった内容を後で参考にしますw

※もちろん私もググって勉強なうです(灬╹ω╹灬)

 

以上、DAY11.『Bootstrapの基本を学ぼう』というお話でした。

できること増えてきたー!!!

 

【関連記事】

  1. DAY11.『Bootstrapの基本を学ぼう』 #30DAYSトライアル
  2. DAY12.『Bootstrapでレイアウトを作ろう 前編』 #30DAYSトライアル
  3. DAY13.『Bootstrapでレイアウトを作ろう後編+Bootstrapを使ってビジネスLP制作①』 #30DAYSトライアル 
  4. DAY14.『Bootstrapを使ってビジネスLP制作②』 #30DAYSトライアル
  5. DAY15.『Bootstrapを使ってビジネスLP制作③』 #30DAYSトライアル
  6. DAY16.『Bootstrapを使ってビジネスLP制作④』 #30DAYSトライアル 
  7. DAY17.『HTML5/CSS3/Bootstrap4の復習』 #30DAYSトライアル

www.engineer-step.com