bootstrap5とは

• bootstrapが流行したきっかけは、レスポンシブデザインを簡単にしたこと。スマホとPCの双方のデザインを区別することなく対応することができる。
• bootstrapを使えば、自分でCSSを一切書かずに、用意されているクラス名だけを使って、それなりのデザインのサイトができること。（デザインができない開発者には嬉しい）
• bootstrapをコピーして使う感じだと思うが、bootstrapが達成しようとしているゴールは高い。それを学ぶこで、よりよいCSSの書き方を学ぶことにつながる。きっかけとして、実務に使えるよい教材になる。
• スマホだけを対象にするサイトなら、デザインはシンプルになり、レスポンシブを考える必要がない。どちらかといえば、デザイナーの出番になる。

• ブレークポイント付きのクラスによって、デバイスごとに表示を切り替えること。つまり、今までの設定をブレークして（無くして）、新しいクラスの値を設定する。
• レスポンシブ対応のナビゲーション
• レスポンシブ対応の画像

• レイアウトだから、シンプルに考えれば、配置と余白を決めること（そのバランスで見え方、伝わり方が変わる）
• レイアウトを構成するのは、Breakpoints、コンテナ、グリッドシステム、カラム→余白を与える（コンテンツ、アイテム）
• アイテムの設置方法については、かなりバリエーションがある（いろいろな自動が増えている、マージンユーティリティも使える、オフセットやオーダー、z-index）

• レスポンシブを対応可能にするためにグリッドシステムを採用していること
• 行とカラムでレイアウトを構成する形式とも言う
• １行は、カラム（column：列）とガター（gutter：溝）で構成される
• コンテナとアイテムで構成する形式とも言う
• レスポンシブを対応可能にするために、ブレークポイントに応じた表示、非表示、ガター、幅や高さの調整、配置等の切り替え
• bootstrap4から、flexboxの適用により、面倒な設定は無くなりつつあり、自動化してくれるものが多くなり、よりシンプルに作ることが出来るようになってきている

• コンポーネンツは部品で、部品を組み込むことで完成させる仕組み
• ユーティリティは、CSSのデザインパターンで、そのデザインパターンについてbootstrapがclass名を付けてあらかじめ用意しているもの
• 出来る限り、独自にCSSを追加せずに、ユーティリティを使うことを考えることが、よいCSSとは何かを知る機会になる。

• container（コンテナ）は、荷物を積む箱。CSSでは、コンテンツを入れる箱。
• bootstrapのcontainer（コンテナ）は（widthとpaddingとmarginが設定されているシンプルなもの） 但し、mediaごとに max-widthが設定され、レスポンシブ仕様になる。
• 固定幅コンテナと可変幅コンテナ（container-fluid）があり、 リキッド（流動）レイアウト（ブランザー幅に応じてグリッドの横幅を常に100%に変化させる。

• ブロックは表示形式の１つで、ブロックとインラインからスタートした。divは、display: blockで、spanは、display: inlineになる。
• デザイナーは、デザインするにあたり、その要素をblock(ブロック)として扱うか、inline(インライン)として扱うか、どちらかに決める必要があった。
• block(ブロック)にすることにより、幅（width）と高さ（height）が指定できる、余白が指定できる。横並びにも出来る。一方、inline(インライン)は幅と高さを指定しても反映されない。また、inline(インライン)は前後に改行が入らないが。block(ブロック)では前後に改行が入る。
• また、inline(インライン)の要素（span）の中には、block(ブロック)の要素（div）を基本的に入れないという決まりもあった。
• divに対してdisplay:inlineを指定すれば、spanと同じ働きをするようにンあり、そのためdivは、便利で、divが頻繁に使用されるようになる。
• そんな歴史があったが、インライン要素という呼び方は、HTML5で廃止された。

• rowとcolから１歩進んだもの
• floatから１歩進んだもの
• フレキシブルボックスFlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組める
• 何がフレキシブルなのかと言えば、colなし、幅サイズなし、羅列するだけで、画面の大きさによって、勝手に自動整列してくれる、折り返してくれる。
• 必然的に、必要なアイテムの配置方法を決める便利な機能が用意されている

• bootstrap5からjquery依存が無くなる（jqueryが不要にになる、これは時代の流れに対応）
• javascriptを使って実現するモノをあからじめ用意してくれている。（htmlに属性を追加するだけで実現してしまう。もとろん、jsファイルは一切触る必要がなし）
• boostrapが用意しているjsファイルとPopper.jsの２つのjsファイルが必要で、これをバンドルしたものbootstrap.bundle.jsも用意されている。
• data-bs-が付いているところが、裏でjavascriptが動作して、実現される機能。とくにjavascriptを手動で書く必要はなく、ルールに応じてhtmlに属性を持てば、その属性から必要な値を取得し、勝手にイベントと機能が動作してくれる。
• bootstrapのjavascriptを使って、手動で意識的にjavascriptを制御することもできる。

• dorpdwonや通知、アイコン化されたボタンの意味、現在がアクティブやカレントの位置にいる、など裏に隠れている機能や表示について、視覚支援の属性を追加することにより、読み上げ機能などで目が不自由な人でも、間違えることなく、操作できるようにする仕組みをbootstrapは持っている。
• 具体的には、aria-で始まる属性になる

• Sassは、プログラム的な書き方でCSSを書き、コンパイルして、cssファイルを作ること。
• 全体を変えるとか、何度も書き換える場合には、すごく便利だが、そこそも覚えなければならないこともあり、特に必須ではでいいと思う。（個人的な感想）

• < < 大なり記号
• > > 小なり記号
• & & アンバーサンド
• " " ダブルクォート
•   半角スペース

CSS3で採用される予定の機能が各ブラウザで先行実装されていますが、 それらの機能を動作させるには、 先頭に-moz-や-webkit-などのベンダープレフィックスを付ける必要がありましたが、既に不要になりつつある。