プログラミング日記#10 bootstrap4を学ぶ

こんにちは。よっしーです。

今回はプログラミング学習10日目！いつものように学習を振り返ります。

学習内容

・ドットインストール「Bootstrap4入門(全22回)」10回まで視聴

以前までサイト模写に励んでいましたが、ちょっと方向転換してbootstrapを学んでいます。

bootstrapとは

bootstrapとは、簡単にいうと「CSSデザインをめっちゃ簡単にしてくれる機能」です。

bootstrapを使えば、これまでCSSファイルにごっそり書いていた記述が必要なくなり、あらかじめ決められたデザインを使ってそれっぽく見せることができます。

たとえば、表を作成するときは、以下のコードでそれっぽい表ができます。

/*head部分は省略*/

<table class="table">
     <thead>
       <tr>
         <th scope="col">#</th>
         <th scope="col">First</th>
         <th scope="col">Last</th>
         <th scope="col">Handle</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <th scope="row">1</th>
         <td>Mark</td>
         <td>Otto</td>
         <td>@mdo</td>
       </tr>
       <tr>
         <th scope="row">2</th>
         <td>Jacob</td>
         <td>Thornton</td>
         <td>@fat</td>
       </tr>
       <tr>
         <th scope="row">3</th>
         <td>Larry</td>
         <td>the Bird</td>
         <td>@twitter</td>
       </tr>
     </tbody>
   </table>
   
  

CSSはなにも付け加えていません。HTMLへの記述だけで上図のようなカッコイイ表が作れます。

ほかにも、HTMLの記述のみで、色とりどりなボックスを作れたり、

 <div class="box text-center bg-primary">BOX1</div>
   <div class="box text-center bg-info">BOX2</div>
   <div class="box text-center bg-dark text-light">BOX3</div>
   <div class="box text-center bg-danger">BOX4</div>
 </div>

btnクラスを指定すれば、いい感じの形になったボタンがたった1行でつくれます。もちろん色を変えることも可能（今回はbtn-primaryなので青です）

しかもこれ、ホバーしたときの色も決められています。

神だ！！

<button class="btn btn-primary">OK!</button>

 まとめ

今回はbootstrapについてでした。まだまだ勉強半ばなので、魅力を伝えきれてないと思います。

これから随時発信していきますね！

それじゃっ！