【Day10】【Day11】Bootstrap

chapter1 : Bootstrapとは

BootstrapはCSSのフレームワークです。
「フレームワーク」が初耳の人は書きブログを読んでみてください。

プログラミングにおけるフレームワークとは？特徴と使い方、コードの具体例を解説！

今までBootstrapの存在は知ってたんですけど特に勉強したことなかったんですよね。

でも実際に使ってみるとまあ凄い。
通常だとコーディングするときはCSSに書かないといけないですよね。
でもBootstrapを使えばHTMLに直接コードを書くだけでデザインできちゃうんです。

使い方はとっても簡単。
chromeで「Bootstrap」と検索して公式サイトを開くだけ。
あとは公式サイトから必要に応じて必要なコードを検索し、それをHTMLに記述するだけなんです。

Live serverで確認しながら試してみてください！きっと感動するはずです！

公式サイト貼っときます↓↓

Bootstrap

chapter2 : Bootstrapならではの略語

Bootstrapでは下記のような書き方をします。

<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>

これは
width→50
padding→3
background-color→#eee
にする記述なんですけど「w」や「p」などの略語があるんですよね。
この場合は「w」がwidthで「p」がpaddingです。

そのほかの略語は以下の通りです。

w : width
h : height
p : padding
pt : padding-top
pr : padding-right
pb : padding-bottom
pl : padding-left
py : paddingを縦方向にだけ効かせたいとき
px : paddingを横方向にだけ効かせたいとき
m : margin
mt/mr/mb/ml : paddingの考え方と一緒
text : text-align
d : display

こんな感じです。
略語はめっちゃあるみたいなので、どんなものがあるのか気になる方は下記サイトを見てみてください。

Bootstrapのよく使うクラスまとめておいた！！！！ - Qiita

chapter3 : Gridレイアウト

Gridレイアウトはホームページのデザイン手法の一つで、画面やページを縦横に分断する直線で格子状に分割し、これを組み合わせてブロック内の要素の大きさや配置を決定していく方法のことです。これはコーディングの際にとても重要になってくる考え方です。

こんなイメージです。(※Bootstrapの公式ページより引用)

Gridレイアウトを用いることで、ユーザー目線で考えた時にぱっと見の情報が整理されていて見やすかったり、たくさんの情報を載せても統一感を持たせることができたりなど、いろいろなメリットがあります。

情報量が多いページで使うのに向いてますね。情報量が少ないページだとそもそもブロック数が成立しないので1カラムで作るのがいいと思います。

ちなみに上記のGridを成立させたい時のコードはこちらです。

<div class="container">
 <div class="row">
   <div class="col">
     1 of 3
   </div>
   <div class="col-6">
     2 of 3 (wider)
   </div>
   <div class="col">
     3 of 3
   </div>
 </div>
 <div class="row">
   <div class="col">
     1 of 3
   </div>
   <div class="col-5">
     2 of 3 (wider)
   </div>
   <div class="col">
     3 of 3
   </div>
 </div>
</div>

<!-- colはcolumnの略です -->

下記ブログにわかりやすくまとめてあったので参考にして見てください。

Webデザインの基本。グリッドレイアウトの魅力と参考になるWebサイト | Web Design Trends

それでは今日はこの辺で終わります。
ありがとうございました。
けけ丸