カラムレイアウト

カラムレイアウトは、Bootstrap のグリッドレイアウトを使用しています。

Bootstrapは、twitterの開発者が使用していたデザインコンポーネントをオープンソースとして提供しているものです。

これを使用することで、コーディングを格段にスピードアップすることができます。

Bootstrap で提供されているコンポーネントの全ては以下のURLです。

https://getbootstrap.jp/docs/4.5/getting-started/introduction/

カラムレイアウトの基本

rowクラスを指定した行の中にcolクラスを指定したカラムを配置するだけで、自動的に等分されたカラムが表示されます。

				
					<div class="row">
	<div class="col">カラム</div>
	<div class="col">カラム</div>
	<div class="col">カラム</div>
</div>
カラム
カラム
カラム

レスポンシブ対応

上記のコーディングだと、PCもスマホも同様に３カラムとなります。

これを以下のようにすることで、PCでは３カラム、スマホでは縦並びカラム（行）とするみとができます。

				
					<div class="row">
	<div class="col-sm">カラム</div>
	<div class="col-sm">カラム</div>
	<div class="col-sm">カラム</div>
</div>
カラム
カラム
カラム

カラム幅

カラムは1行を12等分で表示することが可能です。

col-○○とすることで、○○/12の幅になります。

				
					<div class="row">
	<div class="col-2">カラム</div>
	<div class="col-4">カラム</div>
	<div class="col-6">カラム</div>
</div>
カラム
カラム
カラム

レスポンシブ×カラム幅応用編

以下のような複雑なレイアウトを組むことも可能です。

				
					<div class="row">
	<div class="col-sm-2 col-6">カラム</div>
	<div class="col-sm-4 col-6">カラム</div>
	<div class="col-sm-6 col-12">カラム</div>
</div>
カラム
カラム
カラム