Bootstrapについて知ろうイベント

# Bootstrapについて知ろう ## 本日の目的 - Bootstrapについてちょっと理解する - 自分の意思でデザインを当てれるようにするにはどんな感じでやれば良さげかなんとなく理解する - グリッドシステムとフレックスについてしってなんとなくいろんな画面が作れそうな気分になる - ついでにBootstrap Iconsもなんか聞いたことあるってなる ## BootStrapってなに？ ### 大まかな説明 - 公式サイトによると > 世界で一番人気のあるフロントエンドライブラリ Bootstrap > モバイルファーストなレスポンシブウェブを素早くデザイン・カスタマイズできます。 > Sass変数と mixin、レスポンシブグリッドシステム、豊富なコンポーネント、強力な JavaScript プラグインを備えています。だそうです。よくわからないと思うので実際に触ってみましょう ### Codepen Bootstrapが使えるCodePenの環境を用意したのでこれをいじいじしながら説明していきます https://codepen.io/kenchasonakai/pen/jOZyjbo ### ちょっと試してみよう色を黄色に書き換えてみよう https://getbootstrap.jp/docs/5.0/utilities/colors/ ``` <h1 class="text-warning">Hello Bootstrap!</h1> ``` ### Bootstrapのレスポンシブグリッドシステムについて知る公式サイトによると > グリッドシステムは、12 カラムのシステムと 5 段階のレスポンシブ、Sass と mixin、いくつかの定義されたクラスですべての図形とサイズのレイアウトを作成可能です。簡単にcontainerとrowとcolについて説明します ```html <div class="container"> <div class="row"> <div class="col"> カラム </div> <div class="col"> カラム </div> <div class="col"> カラム </div> </div> </div> ``` これだとわかりにくいので色をつけてみましょう ```html <body> <div class="container bg-white"> <div class="row"> <div class="col bg-primary"> カラム1 </div> <div class="col bg-warning"> カラム2 </div> <div class="col bg-danger"> カラム3 </div> </div> </div> </body> ``` 増やしてみましょう ```html <body> <div class="container"> <div class="row"> <div class="col bg-primary"> カラム1 </div> <div class="col bg-warning"> カラム2 </div> <div class="col bg-danger"> カラム3 </div> </div> <div class="row"> <div class="col bg-primary"> カラム1 </div> <div class="col bg-warning"> カラム2 </div> <div class="col bg-danger"> カラム3 </div> </div> </div> </body> ``` colに値を持たせてみましょう ```html <body> <div class="container"> <div class="row"> <div class="col-8 bg-primary"> カラム1 </div> <div class="col-2 bg-warning"> カラム2 </div> <div class="col-2 bg-danger"> カラム3 </div> </div> <div class="row"> <div class="col-1 bg-primary"> カラム1 </div> <div class="col-1 bg-warning"> カラム2 </div> <div class="col-10 bg-danger"> カラム3 </div> </div> </div> </body> ``` containerクラスの中にrowで横１列で表示したいものを配置して colでどのくらいの幅を持たせたいのかを決定するみたいなイメージが持てればOKです ## CSSのFlexboxについて知る ### Flexboxってなに？ > CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 https://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html より引用簡単に(乱暴に)言うとなんかこの要素横並びにしてえなあとか高さ合わせてえなあって思った時に結構簡単に書けるCSSです FlexboxもBootStrapを使うとより簡単に書けます ### 基本的なflexboxを見てみよう HTMLにはブロック要素(pとかdivとか)とインライン要素(spanとかaとか)がありますインライン要素は勝手に横並びになりますがブロック要素は末尾に改行が入ります ```html <body> <p>おはようございます</p> <p>こんにちは</p> <p>こんばんは</p> <span>おにぎり</span> <span>味噌汁</span> <span>お茶</span> <a href="https://school.runteq.jp/v2/top">RUNTEQ</a> <a href="https://sites.google.com/startup-technology.com/portalsite/home">スタテク</a> </body> ``` ### flexboxを使ってブロック要素を横並びにしてみます ```html <body> <div class="d-flex"> <p>おはようございます</p> <p>こんにちは</p> <p>こんばんは</p> </div> <span>おにぎり</span> <span>味噌汁</span> <span>お茶</span> <a href="https://school.runteq.jp/v2/top">RUNTEQ</a> <a href="https://sites.google.com/startup-technology.com/portalsite/home">スタテク</a> </body> ``` たったこれだけで横並びになりました ### flexboxを使って要素配置を決める(横) justify-contentを使うと要素の配置を割と自由に決められますまずは左詰 ```html <body> <div class="d-flex justify-content-start"> <p>おはようございます</p> <p>こんにちは</p> <p>こんばんは</p> </div> </body> ``` とくになにも変わらないですね次は右詰 ```html <body> <div class="d-flex justify-content-end"> <p>おはようございます</p> <p>こんにちは</p> <p>こんばんは</p> </div> </body> ``` さっきと逆になりましたね次は中央詰 ```html <body> <div class="d-flex justify-content-center"> <p>おはようございます</p> <p>こんにちは</p> <p>こんばんは</p> </div> </body> ``` 次は当幅配置 ```html <body> <div class="d-flex justify-content-between"> <p>おはようございます</p> <p>こんにちは</p> <p>こんばんは</p> </div> </body> ``` ### flexboxを使って要素の配置を決める(縦) ```html <body> <div class="d-flex"> <span>おはようございます</span> <span>こんにちは</span> <span>こんばんは</span> <a href="https://school.runteq.jp/v2/top" class="btn btn-primary">RUNTEQ</a> <a href="https://sites.google.com/startup-technology.com/portalsite/home" class="btn btn-warning">スタテク</a> </div> </body> ``` span要素とbutton要素の縦配置を合わせてみます ```html <body> <div class="d-flex align-items-center"> <span>おはようございます</span> <span>こんにちは</span> <span>こんばんは</span> <a href="https://school.runteq.jp/v2/top" class="btn btn-primary">RUNTEQ</a> <a href="https://sites.google.com/startup-technology.com/portalsite/home" class="btn btn-warning">スタテク</a> </div> </body> ``` ## 時間余ったらBootstrap Iconsも紹介します ### Bootstrap Iconsってなに？公式サイトによると > フリー、高品質、オープンソース、そして1500以上のアイコンを持つアイコンライブラリです。SVG や SVG スプライト、Web フォントなど多様な方法で利用できます。Bootstrapと合わせても、合わせなくても使えます。 https://icons.getbootstrap.jp/ ### 実際に適当に使ってみよう Bootstrapのclassを当てると(Bootstrapじゃなくて普通にCSSでも可)簡単に色をつけたり大きさを変えたり出来ます https://icons.getbootstrap.jp/icons/youtube/ ```html <body> <i class="bi bi-youtube"></i> <i class="bi bi-youtube text-danger h1"></i> </body> ```