行・カラム

1012 views

「行」は画面を横に分割して作るエリア。行の幅は画面横幅であり、高さは中のコンテンツに応じます。

行の説明

コラム「列」

コラム「列」は、画面を縦に12分割して作るエリア。列の幅は画面幅の12分の1です。

ブレークポイント 内容
Extra Small (xs) 画面サイズが 576px未満 (スマホ)の場合に対応します。
<576px
Small (sm) 画面サイズが 576px 以上(タブレット)の場合に対応します。
≥576px
Medium (md) 画面サイズが 768px 以上(ノートPC)の場合に対応します。
≥768px
Large (lg) 画面サイズが 992px 以上(デスクトップPC)の場合に対応します。
≥992px
Extra Large (xl) 画面サイズが 1200px 以上(ウルトラワイド)の場合に対応します。
≥1200px
Extra Extra Large (xxl) 画面サイズが 1400px 以上の場合に対応します。
≥1400px

ウィジェット配置

コンテナ内に配置いたします。配置方法、サイズに関しては ウィジェットの配置についてのご参照をお願いいたします。

基本的に コンテナ > 行 > カラム > 各ウィジェット の配置となります。
Large、Extra Large ⇒ パソコン
Medium ⇒ タブレット
Extra small ⇒ スマートフォン

例えば Extra Small 12、Large 6 に設定した場合、PC では 6/12 で半分のサイズ、スマートフォンでは 12/12 で全幅になります。

  • PC(大きい画面)では、列の幅は6/12、つまり全体の半分の幅になります。
  • スマートフォン(小さい画面)では、列の幅は12/12、つまり全体の全幅になります。

 

Share this Article

行・カラム

Or copy link

CONTENTS