Bootstrap4のグリッドでスマホ対応の段組を簡単に作成(画像)

西村 文宏

西村 文宏

ホームページ作成 ガイド

応用情報技術者

初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。

...続きを読む
1段目「col-md-7」→2段目「col-md-3」→3段目「col-md-2」で3段組
1段目「col-md-7」→2段目「col-md-3」→3段目「col-md-2」で3段組
col-xs-12→col-xs-12→col-xs-12
col-xs-12→col-xs-12→col-xs-12
最新バージョンのCSSファイルをCDNサーバから読み込む記述を、そのままコピー&ペーストする
最新バージョンのCSSファイルをCDNサーバから読み込む記述を、そのままコピー&ペーストする
12分割されたグリッドを4個ずつ(=3分の1ずつ)使えば、均等幅な3段組になる
12分割されたグリッドを4個ずつ(=3分の1ずつ)使えば、均等幅な3段組になる
Bootstrap3での段組作成サンプルページ1
Bootstrap3での段組作成サンプルページ1
12分割されたグリッドを4個ずつ(=3分の1ずつ)使えば、均等幅な3段組になる
12分割されたグリッドを4個ずつ(=3分の1ずつ)使えば、均等幅な3段組になる
閲覧者の端末(画面サイズ)別に使用グリッド数を指定する形でレスポンシブにできる
閲覧者の端末(画面サイズ)別に使用グリッド数を指定する形でレスポンシブにできる
Bootstrap4での段組作成サンプルページ1
Bootstrap4での段組作成サンプルページ1
Bootstrap4で外側を囲むコンテナのclass名2種類の違い
Bootstrap4で外側を囲むコンテナのclass名2種類の違い
段組を構成する段の中に、さらに小さな段組を含めることも可能
段組を構成する段の中に、さらに小さな段組を含めることも可能
Bootstrapでの段組レイアウト作成サンプルページ2
Bootstrapでの段組レイアウト作成サンプルページ2
この写真の記事を読む
1段目「col-md-7」→2段目「col-md-3」→3段目「col-md-2」で3段組
col-xs-12→col-xs-12→col-xs-12
最新バージョンのCSSファイルをCDNサーバから読み込む記述を、そのままコピー&ペーストする
12分割されたグリッドを4個ずつ(=3分の1ずつ)使えば、均等幅な3段組になる
Bootstrap3での段組作成サンプルページ1
12分割されたグリッドを4個ずつ(=3分の1ずつ)使えば、均等幅な3段組になる
閲覧者の端末(画面サイズ)別に使用グリッド数を指定する形でレスポンシブにできる
Bootstrap4での段組作成サンプルページ1
Bootstrap4で外側を囲むコンテナのclass名2種類の違い
段組を構成する段の中に、さらに小さな段組を含めることも可能
Bootstrapでの段組レイアウト作成サンプルページ2
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

カテゴリー一覧

All Aboutサービス・メディア

All About公式SNS
日々の生活や仕事を楽しむための情報を毎日お届けします。
公式SNS一覧
© All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます