今回の記事は、前回書いたbootstrapの記事で、
- bootstrapは、まずはグリットレイアウトを理解すること
- 困ったら見ると良いサイトがあると、コピペができたり、わからないことがすぐに見つけられる。
ざっくりと言うと、こんな感じの記事を書きました。
今回は、グリットレイアウトを実際に使って、いろんな形のサイトをコーディングしていきます。
このサイトで分かること。
- bootstrapのグリットレイアウトの使い方の具体的なイメージ
- 公式サイトから、部品を少し抜粋
これらについて書いていこうと思います。
グリットレイアウトの使い方
グリットレイアウトは前回も書きましたが、
「container」、「row」、「col-グリット数」
これらのクラスを使います。
「container」：グリットレイアウトを使うための要素を囲うもの。
「row」：要素を横並びにするもの。（行を作るもの）
「col-グリット数」：ここで、１２分割された横幅をどれだけ使うかを決める。
では、実際にコードを書いて、その結果を載せていきます。
見にくくてごめんなさい。
まだ、ソースコードをそのままブログに貼り付ける方法を模索中でして😅
そして、この結果はこちら。
色と高さはcssでめちゃ適当変えています。
真ん中の「全てcol-3」は画像編集ソフトで書き足したものなので、参考程度にお願いします。
このコードで、４つのボックスを普通に４つ並べることができます。
4×3=12となり、グリットレイアウトでいっぱいの要素を横に並べることができます。
これを例えば、一番左の要素のcolの値を4とかにしてみると…
このように、colのグリット数を超えると、自動で次の行に折り返します。
少し縦に離れているのは、marginを縦に50pxほど入れているためです。見易さを考えたのですがどうでしょう？
ここまでが、グリットレイアウトの基本的なところです。
ちょっとわかってきましたかね？
では、今度はそれっぽい形のものを作っていきます。
ここからは、cssのスクショも載せますね。（情報を全て載せた方が、読者の方も理解がしやすいと思うので）
html
css
box1：赤 box2：青 box3：黄色 box4：緑
赤ボックスの高さを600pxにし、その高さに合わせて他のボックスの高さを３等分にしました。
今度は、colの中にcolをいれる方法（入れ子構造）の具体例を挙げてみます。
少し複雑かももしれませんが、これを使えるかどうかで、cssの記述量も変わると思うので、頑張ってください。
わかりやすく２つの大きなボックス（big-box1とbig-box2を持つ要素）をそれぞれ、col-6ずつ分けてその中に小さなボックスを入れ子構造で入れます。
左のボックスは、横並びなので、左のbig-boxのなかにrowクラスを入れます。
右のボックスは、縦並びなので、右の中身の要素をrowで囲いません。
入れ子構造については、
big-boxのcolは６で、この中にボックスを作る時、中身をさらに１２等分したボックスを作ると言うことになります。
左のボックスを例として挙げると、
左のbig-boxはcol-6です。そして、その中身のボックス１とボックス２は半分で、big-boxを12等分して考えるので、ボックス１とボックス２のcolの値は６です。
右のボックスでも解説します。
右のbig-boxもcol-6です。そして、中身は横並びにしていないので、rowでは囲まずに、その中に直接colのクラスを持つ要素を入れます。
この中のボックス…ボックス３とボックス４はそれぞれ、colの値は、４と１２です。
つまり、ボックス３はbig-boxの12÷4＝3分の１の大きさです。
ボックス４はcol-12つまり、big-boxの横幅いっぱいに横幅が広がります。
このような感じで、グリットレイアウトの入れ子構造を使うことで、データをいれるボックスの大きさを変えたり、もっと自由なレイアウトを作ることができるようになります。
読んでいる方で、なんとなくわかったかも？と思ったら、どんな形でも良いので、自力で作ってみましょう。
実際に作ってみた方が、理解が早いと思います。
Bootstrapの公式サイトから、いくつか部品を抜粋
・ボタン
・ドロップダウンメニュー
こんな感じで、コピペで、カッコイイ部品を公式ページのComponents（日本語翻訳だと、部品）のところから下の部分に載っている部品が使えるので、使ってみてください。
まとめ
以上で、Bootstrapのグリットレイアウトの具体的な使い方と公式ページの部品を紹介しました。
今回の記事は、個人的に理解が難しいな、と思った内容をわかりやすく書いていきました。
また、ブログの中にコードを直接載せることができるようになったら、コードの画像を入れ替えておきたいと思います。
この記事が誰かのためになれれば嬉しいです。
次は、かなりメジャーな内容になってしまいますが、
Bootstrapのレスポンシブデザインについて書いていきたいと思います。
では、
