Webフレームワークとは
ライブラリとか、フレームワークとか聞きなれない言葉かもしれません。
簡単に言うと、
便利なプログラムの部品をいっぱい集めて、ひとまとめにしたファイルのこと
です。テンプレート群です。
世の中にはたくさんのライブラリ、フレームワークがあります。
CSSのみに特化したフレームワークもありますし、いろいろな機能をひと纏めにしたものなど様々です。
簡単に利用でき、見た目も良かったりというメリットもありますが、
デメリットとしては、bootstrapっぽいとか、使用したライブラリっぽい
似通ったものになるという点でしょうか。
BootStrap（ブートストラップ）のサイトを見てみよう
部品を見る
サンプルページを見る
Matrial UI（マテリアルユーアイ）のサイトを見てみよう
BootStrapを使ってみよう
Bootstrapのページにアクセスしダウンロードボタンをクリックします。
コンパイルされたCSSとJSソースをダウンロードします。
フォルダを作成し（任意）、CSSとJSのフォルダを作成フォルダに移動します。
また、index.htmlを同じ階層に作成しておきます。
以下は、VSCode作成フォルダを開いた状態です。
いつものように!＋TabキーでHTMLソースを生成し、
headタグの最後の方に2行追加しCSSとJSを読み込ませます。
（link＋Tabキーでテンプレートが出ます。script＋Tabキーで同様にテンプレートが出ます。）
Bootstrapのコンポーネントはたくさんありますが、まずは一つ試してみましょう。
Bootstrapページの左側メニューのComponentsからAccordionを選択しソースをコピーして
index.htmlのbodyタグ内に貼り付けて実行してみましょう。
Bootstrapページ同様のコンポーネントが表示されたと思います。
これらの部品（コンポーネント）を組み合わせて、独自のページを作成していきます。