Bootstrap

・bootstrap→使うとしたら４系がいい。

・新しいの使わないとサポートが切れることある。

・なるべく最新のバージョン使ってキャッチアップする姿勢の方がいい

・bootstrapの最大のメリットはレスポンシブデザイン

・bootstrapの読み込みはCSS,JS,JQueryの３つがセット。なぜならbootstrapはjsを使ってcssの見た目をブラウザ幅によって切り替えることをしているから。

・「min」はbootstrapに限らずminimumのminが書かれている。拡張子でもなんでもなくてただのファイル名。jsでもhtmlでも改行するとファイルのサイズが大きくなる。改行だけでも一文字と同じ扱いになる。単純に読み込むための文字数が多くなる。min→「コメント」や「改行」を削ったもの。min.cssやmin.jsを開いたときに一行に圧縮されたものがある。もはや人間が見てもよくわからないが、通信料を少しでも少なくして早く表示できるように圧縮されている。中を解析しようとしても全くわからないやつ。カスタマイズとかしないのであれば、min.jsと書かれているものを使うのが一番良い。

・本来のwebの考えではheadの中にjs、css入れるのがベースとしてあった。なぜかというとブラウザがwebページを表示するときに一番最初に見るのがheadなので、headでcssやjsを読み込めんでbodyを読み込むって順であれば見た目が最初から整って表示されるはず。だから、headに入れるのがもともとのベースだった。bodyの中でも構わない。

・bootstrap4以前は4段階扱いだったが、4からは５段階扱いになる。xsがない。デスクトップ向けに作られていたmdというサイズがタブレット扱い。xlという特大サイズがある。

https://cccabinet.jpn.org/bootstrap4/layout/grid ここがちょっと注意が必要。

・下のようなdiv class container とdiv class rowと　div class (サイズを書く)、のような３重の構造がベースになる

例)





col-md-6

・cotainer→画面の真ん中にする要素 ⇨なぜこのようにするか？？ ページを作るうえで横幅が固定されているデザイン（例：yahoo japan）が多々あるのでそういう用途のためにcontainerが用意されている。 ただ、最近のデザインで横幅いっぱいのデザイン(LPに多いかも）なんかを作る時はcontainer使わなくていい。逆に使うと横幅が固定されてしまう。

・div class=“row” のdiv要素で囲ったものの範囲が12カラムで分割された範囲になる。div class=“row”の中だけが12分割される。

・offset→指定したいものの左側に隙間を開けることができる。指定したカラム分、スキマを空ける。書き方としてはcol-画面サイズ-offset-カラム数。 例えば、下の場合、どうなるかというとまずoffset-3なので３カラム分空ける。空けて、６カラム分描画する。だから行でいうと残り３余る。 だから、結果的には６の幅の中央揃え。 


・レスポンシブを考えた時にfloatは結構気をつけないと大変になる。気軽にやるには大変な領域になる。

・もともとfloatは画像の横に文字を出したい、とか回り込みをさせたいときに使うような要素で作られている。

練習