03Bootstrapの基本
ここからはBootstrapの基本について学んでいきます。
それぞれとても大切な部分になるので理解して進めるようにしましょう。
グリッド
BootstrapのGridシステムは、ウェブサイトのレイアウトを綺麗に、そして様々な画面サイズに対応させるための強力なツールです。
レゴブロックのように、コンテンツを積み上げて思い通りのレイアウトを作ることができます。
このグリッド機能を使うためにBootstrapを導入することもあるくらい、重要で便利な機能になるので扱えるようになりましょう。
グリッドはFlexbox(CSS教材で解説)で構築されており、コンテンツを簡単に整列させるために用いられます。
横幅を12カラムとして考えます。あまりイメージもわかないと思うのでさっそく使いながら理解していきましょう。
新たに、以下の構造になるように「基本」ディレクトリを作成し、その中に「grid_1.html」を新規作成してください。
Lesson4_Bootstrap
├ 基本 // このディレクトリを新規作成
| └ grid_1.html // 新規作成
├ js
| └ bootstrap.min.js
├ css
| └ bootstrap.min.css
└ index.html以下のコードを「grid_1.html」にコピー＆ペーストしてください。
grid_1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<div class="container text-center border">
<div class="row">
<div class="col border border-secondary pt-2 pb-2">
カラム
</div>
<div class="col border border-success pt-2 pb-2">
カラム
</div>
<div class="col border border-danger pt-2 pb-2">
カラム
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>
</body>
</html>
grid_1.htmlをブラウザで開いてみましょう。
以下の画像のようになっていると思います。
Gridシステムではコンテンツを簡単に横並びや、複雑な並びにすることができます。
Gridシステムでは、ページを12列に分割し、グリッドクラスを使って、各列が使用するカラム数を指定します。
まだ難しいと思うので一旦はページの横幅を12個のカラムに分けて、12個のカラムを分け合うことで複雑なレイアウトを実現します。
では、詳しく見ていきましょう。
基本的な構成要素
Gridシステムを構成するのは以下の部分です。
Lesson4_Bootstrapの読み込みでも解説した通り、BootStrapでは特定のクラス名をつけることによってBootStrapが自動的にCSSを適応してくれます。
BootStrapにおいてクラス名はとても大事なものになるので、クラス名がどんな意味を成しているのかを理解しながら進めていきましょう。
それでは、クラス名について解説していきます。
<div class="container text-center border">
<div class="row">
<div class="col border border-secondary pt-2 pb-2">
カラム
</div>
<div class="col border border-success pt-2 pb-2">
カラム
</div>
<div class="col border border-danger pt-2 pb-2">
カラム
</div>
</div>
</div>コンテナ (container): 部屋全体を囲む壁のようなもの。コンテンツをGridシステムで配置する範囲を指定します。
| クラス名 | 概要 |
| container | 固定幅のコンテナ。画面サイズによって幅が変わります |
| container-fluid | 可変幅のコンテナ。常に画面幅いっぱいに広がります |
行 (Row): 部屋の中の横一列のスペース。この中にカラムを配置していきます。
Rowは横一列のスペースを意味します。
<div class="row">
<div class="col-4 border border-secondary pt-2 pb-2">
カラム
</div>
<div class="col-4 border border-success pt-2 pb-2">
カラム
</div>
<div class="col-4 border border-danger pt-2 pb-2">
カラム
</div>
</div>上記では親のdivタグに「row」クラスを付与しています。
rowクラスを付与することで、付与したdivタグの中で12個のカラムを取り合うようにレイアウトされます。
続いて子要素であるdivタグに注目しましょう。「col-4」というクラスが付与されていますが、これが12個のカラムの内4個のカラムを使います。という意味になります。
今回は、３つの子要素がそれぞれ４個づつ12個のカラムを取り合っているので、以下のような３つが均等の横幅を持ったデザインになっています。
では、コードを少し変えてみましょう。
以下のようにコードを修正し、画面を再読み込みしましょう。
<div class="row">
<div class="col-2 border border-secondary pt-2 pb-2">
カラム
</div>
<div class="col-4 border border-success pt-2 pb-2">
カラム
</div>
<div class="col-6 border border-danger pt-2 pb-2">
カラム
</div>
</div>以下のようなレイアウトになりました。
先ほどは、子要素すべてが「col-4」だったのですが、今回の変更で。それぞれ「col-2」「col-4」「col-6」に変更しています。
「col-2」は12個のカラムの内、2個を使うという意味になります。
「col-6」は12個のカラムの内、６個を使うという意味になります。なので、一番右のボックスは画面の半分の大きさになっています。
このように、Girdシステムでは、クラス名を変えるだけで、要素の大きさを変更することができます。
他にも例を見てみましょう。
以下のようにコードを修正してください。
<div class="row">
<div class="col border border-secondary pt-2 pb-2">
カラム
</div>
<div class="col-3 border border-success pt-2 pb-2">
カラム
</div>
<div class="col-3 border border-danger pt-2 pb-2">
カラム
</div>
</div>修正できたら画面を再度読み込んでみましょう。
上記の画面になっていると思います。
今回は各クラスを「col」「col-3」「col-3」にしています。
最初の要素では「col」と数字を指定していません。
この場合エラーではなく、他の要素のあまりすべてを使うことになります。
今回だと、「col-3」が２つあるので、２つの要素で、12個の内6占有しています。残りが12 – 6 = 6 なので今回は「col」は「col-6」という意味になります。
グリッド・オプション
Gridシステムには「col-」以外にもオプションがあります。
オプションによって、画面サイズに合わせたレイアウト変更が可能になります。
| クラス名 | 概要 |
| col-* | 全ての画面サイズで適用されるカラム |
| col-xs-* | 携帯画面等で適用されるカラム ※画面サイズ＜576px |
| col-sm-* | 小型画面（タブレットなど）以上で適用されるカラム ※画面サイズ≥576px |
| col-md-* | 中型画面（ノートパソコンなど）以上で適用されるカラム ※画面サイズ≥768px |
| col-lg-* | 大型画面（デスクトップなど）以上で適用されるカラム ※画面サイズ≥992px |
| col-xl-* | 超大型画面以上で適用されるカラム ※画面サイズ≥1200px |
実際に試してみましょう。
以下のコードに変更し、画面を読み込んでみましょう。
<div class="row">
<div class="col col-sm-8 border border-danger">col-sm-8</div>
<div class="col col-sm-4 border border-success">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm border ">col-sm</div>
<div class="col-sm border border-success">col-sm</div>
<div class="col-sm border border-danger">col-sm</div>
</div>上記の動画のように、「col-sm-」の場合は画面サイズ≥576pxの時のみ適応されます。
よって、画面サイズが576pxを下回った場合は、「col-sm-」は無いと同じ意味になります。
このように、外面サイズによってレイアウトを変更したい場合、Gridシステムを用いると簡単に実装することが可能です。
コメントを残す