Bootstrap ビジュアルレイアウトツール

Bootstrapの行・列をコードにする

このツールでは、ページ全体ではなく、Bootstrapのグリッドを使ったレイアウト部分を組み立てます。行を追加し、その中の列数や列幅、表示幅ごとの設定、列間隔を調整すると、配置プレビューとHTMLまたはReact JSXのコードが更新されます。列の名前や仮テキスト、追加クラスも入力できます。

Bootstrapのグリッドは、コンテナの中に行を置き、その行に列を並べる仕組みです。列幅は12分割を基準にし、たとえば8と4なら主領域とサイド領域の幅をおおよそ2対1にできます。Bootstrap公式のグリッド解説では、幅区分ごとに列の振る舞いを指定する方法も説明されています。

幅区分と12列の考え方

各列にはXS、SM、MD、LG、XL、XXLの区分ごとに1〜12の幅を設定します。画面が広くなる段階に合わせて設定を変えると、狭い画面では縦並び、広い画面では横並びといった構成をコードにできます。幅指定は列の占有割合を表し、文章や画像そのものを作るものではありません。

たとえば、本文を8、補足欄を4に設定すれば、同じ行の中で主領域を広くできます。狭い画面では両方を12にすれば、上下に並ぶ幅指定になります。ある幅区分の合計が12を超える場合は、プレビューに合計値が表示されるので、意図した折り返しかどうかを確認してください。

コンテナと列間隔を選ぶ

containerは画面幅に応じた最大幅の枠、container-fluidは利用できる横幅いっぱいの枠として使われます。ページ本文を読みやすい幅に収めたいか、画面全体を使いたいかで選びます。列間隔はg-0からg-5まで選択でき、数値が大きいほど間隔用のクラス値が大きくなります。間隔の実際の見え方は、読み込むスタイルと周辺のCSSにも左右されます。詳しくはコンテナの公式説明とスペーシングの公式説明を参照してください。

配置を調整してコードをコピーする

1. 初期例を土台にするか、不要な行・列を削除し、必要な行と列を追加します。最後の行や列は最低1つ残ります。

2. 各列の名前、内容、追加クラスを入力します。表示幅区分ごとの選択欄で列幅を指定し、行の追加クラスも必要に応じて設定します。

3. コンテナ種類と列間隔を選び、プレビュー幅をXSからXXLまで切り替えます。各幅で列の並びや文字の収まりを見て、幅の合計も確認します。

4. 出力タブでHTMLかReact JSXを選び、生成コードをコピーします。HTMLはHTMLページへ、JSXはReactプロジェクトへ貼り付け、対象のBootstrapスタイルが読み込まれているか確認します。

例として、記事と目次の行を作るなら、記事列を8、目次列を4にしてMD以上の幅を設定し、XSやSMでは両方を12にします。画面幅区分の値はその区分以上の幅にも影響するため、広い画面だけ別の比率にしたい場合は該当区分も調整してください。

コード作成時によくある疑問

貼り付け先で確認すること

生成コードはグリッドの骨組みです。BootstrapのCSSが読み込まれていない場合、クラス名だけでは意図したレイアウトになりません。プロジェクトで使うBootstrapの版や独自スタイルとの互換性を確認し、複数の画面幅で実際に表示してください。入力した追加クラスや内容はコードに反映されますが、意味構造、アクセシビリティ、動作、完成ページとしての品質は別途確認が必要です。