Technology ホームページ作成

[Bootstrap] グリッドシステムを実際に動かしてみる。

2021-01-21

前回グリッドシステムについて理解を整理したので、今回実際にコードで動かしてみる。

動かし方に関して、参考にさせていただいたサイトはこちら


下準備

まずはBootstrapのファイルをダウンロードする。

ダウンロードはこちらからできる。

https://getbootstrap.com/

ダウンロードしたら、HTMLにファイルを読み込ませる。

読み込むファイルは二つ。あとは自分でわかりやすいように、自分のCSSファイルで装飾する。

  1. bootstrap.min.css
  2. bootstrap.min.js
<!DOCTYPE html>
<html>
 <head>
  <title>grid system</title>
  <meta charset="UTF-8">
   <link rel="stylesheet" href="./bootstrap.min.css">
 </head>
 <body>
  
 <script src="./bootstrap.min.js"></script>
 </body>
</html>


/* .colの部分は、HTMLの定義に合わせて変える*/
/* グリッドをわかりやすくするためのCSS */
.col{
  background-color:#cccccc;
  border: medium solid black;
  height:300px;
}


等幅グリッド

まずは単純にrowとcolをセット。

<div class="container">
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
  </div>
</div>
 



colの幅を指定する

colの幅を指定する。グリッドは最大12列まで。

<div class="container-fruid">
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-2">col-2</div>
    <div class="col-2">col-2</div>
  </div>
</div>



複数colを指定して、スマホに対応

複数のcolを指定して、画面の幅が異なる場合も対応できるようにする。

下記のようなイメージ。

PC画面ではlgを指定。


スマホ画面ではxsを指定。

*Bootstrap3では、Extra Smallサイズは「col-xs-○ 」という書き方だが、Bootstrap4からは、「.col-○」だけでよくなった。

詳しくはこちら。(https://getbootstrap.com/docs/4.1/layout/grid/#grid-options


<div class="container-fruid">
       <div class="row">
           <div class="col-6 col-lg-8">A</div>
           <div class="col-6 col-lg-4">B</div>
       </div>
     <div class="row">
           <div class="col-6 col-lg-3">C</div>
           <div class="col-6 col-lg-3">D</div>
           <div class="col-6 col-lg-3">E</div>
           <div class="col-6 col-lg-3">F</div>
       </div>
   </div>


Largeサイズでみてみるとこちら。


画面幅がExtra Smallサイズだと、変化している。


rowクラスの中で、colクラスを色々な方向に寄せる。

rowクラスの中で、colクラスを色々な方向に寄せることができる。


縦方向の調整 (row)

align-itemsを使うことで、rowクラスに入っているcolクラス全体に対して、縦方向に調整が可能。

  • align-items-start(上寄せ)
  • align-items-center(中央)
  • align-items-end(下寄せ)
<!-- 中央寄せの例>

<div class="container-fruid">
       <div class="row align-items-center">
           <div class="col-lg-6">A</div>
           <div class="col-lg-6">B</div>
       </div>
   </div>



縦方向の調整 (col)

.align-selfを使うことで、カラム一つ一つを調整することもできる。

  • align-self-start(上寄せ)
  • align-self-center(中央)
  • align-self-end(下寄せ)
<div class="container-fruid">
       <div class="row align-items-center">
           <div class="col-lg-4 align-self-start">1</div>
           <div class="col-lg-4 align-self-center">2</div>
           <div class="col-lg-4 align-self-end">3</div>
       </div>
   </div>



他にも、横方向に寄せたり、両サイドに寄せる方法などあるので、必要に応じて調べて使うのが良い。

-Technology, ホームページ作成