デイトラ1期 DAY11『Bootstrapの基本を学ぼう』【30DAYSトライアル1st】

デイトラ30DAYSトライアルの感想・体験

こんにちは、タキ(@engineeraru)です。

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

デイトラ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を読み込んでいるからです。

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

<link rel=“stylesheet”
href=“https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.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→ ⇧⌥↓ カーソル行を下にコピー

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

9日目の記事はこちら

 

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

 

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

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

ってことで、Gridレイアウトの説明は皆さんググると思いますので、みなさんもググった内容があったらリツイートしてくださいw

 

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

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