.net column
.NET開発者のためのブログメディア

Webデザイン

Bootstrapでのcolの使い方とは?カラムの指定・順序と水平方向の配置

2020年12月04日
SE
colを使ったレイアウト方法にはどういった方法があるのか教えてください。
PM
まずはグリッドシステムから理解していきましょう。

Bootstrapでのcolの使い方とは?


今回は、Bootstrapでのグリッドシステムの使い方を説明します。

グリッドシステムでは、 containersやrowsおよびcol でレイアウト調整します。

レイアウトを格子状に分解して配置するデザイン手法です。

Bootstrapでのグリッドシステムに興味のある方はぜひご覧ください。

基本的な使い方

Bootstrapでのグリッドシステムの基本的な使い方を紹介します。

.row や .col を用いて、画面を等分割できます。

See the Pen
bootstrap_col1
by kskumd (@kskumd)
on CodePen.

カラム指定

Bootstrapでは、画面の横幅を12分割したグリッドシステムを採用しています。

ここでは、カラム幅の指定方法を紹介します。

See the Pen
bootstrap_col2
by kskumd (@kskumd)
on CodePen.

カラム順序

Bootstrapでのグリッドシステムでは、カラム順序を指定できます。

orderの順番で表示されます。

See the Pen
bootstrap_col3
by kskumd (@kskumd)
on CodePen.


このようにBootstrapでのグリッドシステムでは、カラム順序を指定できます。

水平方向の配置

Bootstrapでのグリッドシステムでは、水平方向の配置を指定できます。

See the Pen
bootstrap_col4
by kskumd (@kskumd)
on CodePen.

SE
基本は格子状に配置された画面をどうレイアウトしていくかが基本の考え方なんですね。
PM
そうですね。スマホでもパソコンでも見やすいデザインを作ることができるので、ぜひマスターしてください。

まとめ

Bootstrapでのグリッドシステムの使い方を説明しました。

グリッドシステムでは、 containersやrowsおよびcol でレイアウト調整します。

レイアウトを格子状に分解して配置するデザイン手法です。

ぜひご自身でBootstrapのソースコードを書いて、理解を深めてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags