Bootstrapまずは何を勉強すれば良いの？

ウェブ制作の基礎勉強がある程度進んでくると、bootstrapの勉強をすることになると思います。

今回は、bootstrapについて初学者向きに、まずは何を知っておくべきかを順番に書いていきます。

この記事で分かること

• bootstrapで出来ること
• bootstrapで頭に入れておくと良いこと

bootstrapで出来ること

bootstrapを使うことで次のことが簡単に出来るようになります。

• 要素の配置位置をHTMLのみで決めることが出来る。
• わからないことがネット検索で比較的簡単に知ることができる。
• 有識者の方がネットに載せてる綺麗なレイアウトの要素をコピペで使うことができる。

思いつく感じこんなメリットがあるというところですかね。

bootstrapで頭に入れておくと良いこと

• グリットレイアウト（とりあえずこれだけは使いこなしたい）
• 困ったらみるサイト

グリットレイアウト

※画像編集初心者なので、ちょっと変なのから目をそらしていただけると嬉しいです。

イメージ的には、四角のパーツを入れていくことで、レイアウトを作っていくイメージです。

グリットレイアウトでは、基本的に

container,row,colの３つのクラス名をHTMLの要素のクラス名に書くことで配置します。

グリットレイアウトは、

画面を横幅を１２分割し、要素をその中から横幅を何割分使うのかを設定します。

グリットレイアウトは基本、「container」というクラスをもつ要素の中で設定します。
その中で、「row」というクラスの中の要素を横に並べます。（普通に書いたら、要素は縦並び）
そして、「col-数値」とクラスを設定することで、要素の横幅を決めることができます。

このように、ただの文字列もcol-6、つまり１２分割のうちの半分の６まで要素の幅ができます。

これを横幅の１２分割、colの値が１２になるようにHTMLを書くことで、うまく要素の配置を簡単に行うことができます。
colの値の合計が１２を超えると、自動で折り返して、次の行に移動します。
要素の合計が、１２でなくても、次の行に要素を配置したい時、rowをいれると、強制的に次の行へ行きます。

これらの特性を知っておくだけでも、グリットレイアウトを最低限使いこなせるようになれます。

ちなみに、containerはPCの画面だと、横一杯ではなく、ざっくり９０％位の大きさです。

困ったら見るサイト

• bootstrapの公式サイトのComponents

他にも、Techacademyさんなどありますが、今回は公式サイトさんを上げさせていただきました。

理由は,Componentsのところから、簡単に、部品のコピペができること。部品の名前を知ることができることです。

２つ目の理由の部品の名前を知ることができることで、
キーワードを知ることができます。つまり、特定のキーワード（例えば、パンクズリストとか）を知ることで、その部品の検索が簡単になります。

まとめ

以上の点を抑えるだけでも、要素の配置がかなり楽になります。

また詳しいことについては、別の記事にで書こうと思います。

ちなみに、この僕のブログもbootstrapを使って、要素を配置しています。

では、