📝

bootstrap ～レイアウトの基本のき

2023/06/14に公開

Bootstrap

初心者

アウトプット

tech

今日はbootstrapのレイアウト方法について練習がてらまとめていきます。
※まだまだよくわかっていない部分も多いので、勘違い箇所ありましたらごめんなさい。

bootstrapとは？

Bootstrapとは、Webサイト制作等におけるフロントエンドの実装をサポートするフレームワークです。
Webサイトでよく使われるフォーム・メニュー・ボタンなどのパーツが、テンプレートとして用意されています。1からCSSを書かずとも、デザイン性が高くかつレスポンシブなサイトを作成できます。

導入方法

導入方法は「ダウンロード」と「リンクを記述(CDN)」の2種類があります。
詳しくは公式ページを参照。

container、row、col

bootstrapのレイアウト方法の基本はcontainerとrowとcolの組み合わせです。

container
大きな入れ物。セクション毎のまとまりを入れるために使う模様。
row
行。この中に囲ったものは全て横並びになる。
col
列。rowの中に入れると、colの数に応じてwidthが均等になる。

では、試しに下記のようにrowとcolを配置してみます。
※見やすくなるようcontainerとcolにCSSで設定を追加してます。

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

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

.container {
  margin-top: 100px;
  background-color: azure;
}

.col {
  border: 1px solid grey;
  height: 100px;
}

ビューはこのようになります。
container(水色のゾーン)の横幅いっぱいにrowが広がり、中身のcolは均等に配置されます。

bootstrapではこのcolの中に写真や文章などのコンテンツを入れてレイアウトしていくようです。また、現状では均等割りに配置されているcolですが、幅を指定することでより柔軟にレイアウトができます。このレイアウトに必要不可欠なグリッドシステムについてはまた明日以降まとめていきます。

bootstrapとは？

導入方法

container、row、col

Discussion