コンテンツへスキップ

Bootstrapでカラムを作る方法

Bootstrap

BootstrapはレスポンシブWebデザインを効率的に構築できるフレームワークです。HTMLにBootstrapのクラスを指定するだけで予めBootstrapが用意しているCSSを読み取り簡単にレイアウトを組むことができます。

Bootstrapの導入は先に以下の記事を読んでください。

Bootstrapの導入のしかた

カラムとは

Webでいうカラムとは段組みのことです。コンテンツを見やすいレイアウトにするためのデザインの骨格となる重要なものです。

1カラム：スマホでの表示を意識したレイアウト

2カラム：ブログやECサイトなどで多く見られるレイアウト

3カラム：情報量が多いプラットフォームなどで多く見られるカラム

Bootstrapでのカラムの作り方

  1. 大枠にclass="container"を入れます。
  2. 大枠の中にclass="row"を入れて「行」を作ります。
  3. 行の中にclass="col-[数字]"を入れて「列」を作ります。
<!-- 書き方の例 -->

<div class="container">
	<div class="row">
		<div class="col-9">Contents</div>
		<div class="col-3">Side navi</div>
	</div>
</div>

カラムは12分割を基準に構成する

<div class="container">
	<div class="row">
		<div class="col-1">1</div>
		<div class="col-1">2</div>
		<div class="col-1">3</div>
		<div class="col-1">4</div>
		<div class="col-1">5</div>
		<div class="col-1">6</div>
		<div class="col-1">7</div>
		<div class="col-1">8</div>
		<div class="col-1">9</div>
		<div class="col-1">10</div>
		<div class="col-1">11</div>
		<div class="col-1">12</div>
	</div>
</div>

均等に6分割する場合の書き方

<div class="container">
	<div class="row">
		<div class="col-2">1</div>
		<div class="col-2">2</div>
		<div class="col-2">3</div>
		<div class="col-2">4</div>
		<div class="col-2">5</div>
		<div class="col-2">6</div>
	</div>
</div>

2:8:2で分割した場合

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

デバイスに合わせてカラムを切り替える

classの指定だけでスマートフォン、タブレット、PC様々なサイズでカラムの表示の仕方を切り替える方法があります。

行に入れたclassの「col-」と「数字」の間にプレフィックスを追加するだけです。

詳しくは以下の表を見てください。

デバイス全体向けスマホ
向け		タブレット
向け		PC向けPC向け
ブレーク
ポイント		576px
未満		576px
以上		768px
以上		992px
以上		1200px
以上
classcol-col-sm-col-md-col-lg-col-xl-

書き方は以下のようになります。

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-md-2">A</div>
    <div class="col-sm-4 col-md-8">B</div>
    <div class="col-sm-4 col-md-2">C</div>
  </div>
</div>

スマホ向け(576px以上)で表示した時のカラム

PC向け(992px以上)で表示した時のカラム

タグ: