--- url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/design/bootstrap-grid' title: 'Bootstrapグリッドでレイアウトを計画する | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:27:24+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 追加するローはすべてBootstrapグリッド上に配置されます。カラムが共有する12本の等幅トラックです。1/3 + 2/3のようなレイアウトでは、1つのカラムが4トラック、もう1つが8トラックを使います。合計が合う幅の計画や、小画面用の2つ目のレイアウト設定にこのページを使います。ローの追加自体はRowの追加をご覧ください。 動画では4カラムのローにタブレット用の2つ目のレイアウトを設定し、ウィンドウを狭めています。 tags: - 'Design guides' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: Bootstrapグリッドでレイアウトを計画する description: |- 追加するローはすべてBootstrapグリッド上に配置されます。カラムが共有する12本の等幅トラックです。1/3 + 2/3のようなレイアウトでは、1つのカラムが4トラック、もう1つが8トラックを使います。合計が合う幅の計画や、小画面用の2つ目のレイアウト設定にこのページを使います。ローの追加自体はRowの追加をご覧ください。 動画では4カラムのローにタブレット用の2つ目のレイアウトを設定し、ウィンドウを狭めています。 image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:27:24+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/design/bootstrap-grid' articleSection: デザインガイド - '@type': WebPage '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/design/bootstrap-grid' description: |- 追加するローはすべてBootstrapグリッド上に配置されます。カラムが共有する12本の等幅トラックです。1/3 + 2/3のようなレイアウトでは、1つのカラムが4トラック、もう1つが8トラックを使います。合計が合う幅の計画や、小画面用の2つ目のレイアウト設定にこのページを使います。ローの追加自体はRowの追加をご覧ください。 動画では4カラムのローにタブレット用の2つ目のレイアウトを設定し、ウィンドウを狭めています。 breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: ホーム item: 'https://dxpr.com/ja' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: ja --- [ヘルプセンター](/ja/node/75)/[ドキュメント](/ja/hc/documentation) /[DXPR Builderを学ぶ](/ja/hc/documentation/learn-dxpr-builder) /[ページを作る](/ja/hc/documentation/learn-dxpr-builder/build) /[エレメントのスタイル](/ja/hc/documentation/learn-dxpr-builder/element-settings) /[デザインガイド](/ja/hc/documentation/learn-dxpr-builder/design/overview) # Bootstrapグリッドでレイアウトを計画する. DXPR Builderを学ぶページを作るエレメントのスタイルデザインガイド ## このガイドの内容 関連ガイド - [ローを追加する](/ja/hc/documentation/learn-dxpr-builder/layout/rows-and-columns) - [レイアウトをスマートフォンに対応させる](/ja/hc/documentation/learn-dxpr-builder/design/responsive-design) - [ネストレイアウトを追加する](/ja/hc/documentation/learn-dxpr-builder/layout/nesting) 追加するローはすべてBootstrapグリッド上に配置されます。カラムが共有する12本の等幅トラックです。1/3 + 2/3のようなレイアウトでは、1つのカラムが4トラック、もう1つが8トラックを使います。合計が合う幅の計画や、小画面用の2つ目のレイアウト設定にこのページを使います。ローの追加自体は[Rowの追加](/ja/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)をご覧ください。 動画では4カラムのローにタブレット用の2つ目のレイアウトを設定し、ウィンドウを狭めています。 ## 分数がトラックになる仕組み | 分数 | トラック数 | 典型的な用途 | |---|---|---| | 1/1 | 12 | 全幅1カラム | | 1/2 | 6 | 等幅2カラム | | 1/3 | 4 | 等幅3カラム、または2/3横のサイドバー | | 2/3 | 8 | 1/3サイドバー横のメインコンテンツ | | 1/4 | 3 | 等幅4カラム、または3/4横のサイドバー | | 3/4 | 9 | 1/4サイドバー横のメインコンテンツ | | 1/6 | 2 | 小さな6カラム(例: ロゴの並び) | | 5/12 and 7/12 | 5 and 7 | ほぼ等幅の2カラム | ローのトラック合計は12です。超える場合は余分なカラムが新しい行に折り返します。整数トラックになる分数を使います。2分の1、3分の1、4分の1、6分の1、12分の1です。1/5のような分数に対応するBootstrapクラスはありません。 カラム内のローはそのカラムを独自の12トラックに分割します。詳しくは[ネスト](/ja/hc/documentation/learn-dxpr-builder/layout/nesting)をご覧ください。 ## タブレット用の別レイアウトをローに設定する 新しいローに選ぶレイアウトは**Medium devices (≥ 768px)**以上に適用されます。その幅未満ではカラムが積み重なります。次の手順でデスクトップでは4カラムを維持し、タブレットでは1行に2つずつ表示します。 1. ローにホバーしてコントロールバーのグリッドアイコンをクリックします。レイアウトダイアログは**Medium devices (≥ 768px)**パネルで開きます。 2. 4等分カラムのタイルを選びます。 3. クリックするのは**Add screen size**です。レイアウトのコピーを持つ2つ目のパネルが開きます。 4. 新しいパネルの画面サイズ一覧で**Small devices (≥ 576px)**を選びます。 5. クリックするのは**Custom Layout**で、`1/2 + 1/2 + 1/2 + 1/2`と入力して**Save**をクリックします。 6. ツールバーの**Save**をクリックします。 4つの2分の1で4カラムすべてを維持し、1行に2つずつ配置します。2カラムのタイルでは代わりにローが2カラムに減ります。 ## 表示内容 広い画面ではローに4カラムが横並びで表示されます。ブラウザーウィンドウを768ピクセルより狭くすると1行2つに折り返します。576ピクセル未満ではすべてのカラムが全幅になります。 ## 画面サイズ レイアウトダイアログの各パネルは1つの画面サイズ用のカラムを設定します。レイアウトはより大きな画面にも適用され、独自パネルを持つ次のサイズまで有効です。 | パネル | 適用開始 | |---|---| | **Extra small (< 576px)** | 最小のスマートフォン以上 | | **Small devices (≥ 576px)** | 576ピクセル | | **Medium devices (≥ 768px)** | 768ピクセル。新しいローの最初のパネル | | **Large devices (≥ 992px)** | 992ピクセル | | **Extra large (≥ 1200px)** | 1200ピクセル | | **Extra extra large (≥ 1400px)** | 1400ピクセル | **Remove screen size**はパネルとそのレイアウトを削除します。**Custom Layout**は分数の一覧なら何でも受け付けます(例: `1/4 + 1/2 + 1/4`)。パネルのレイアウトがタイルのいずれでもない場合、ダイアログは**Custom Layout**をマークし、その上にレイアウト名を表示します(例: **Custom Layout (1/2 + 1/2 + 1/2 + 1/2)**)。クリックするとカスタムレイアウトボックスでそのレイアウトを編集できます。 ## サイト上のBootstrap グリッドにはページ上のBootstrap 5が必要です。サイト管理者は取得元を**DXPR Studio** > **DXPR Builder** > **General Settings** (`/admin/dxpr_studio/dxpr_builder/settings`)の**Bootstrap**配下で選びます。**Sideload Bootstrap files**は**Bootstrap 5**(ビルダーが自ら読み込む)または**None (theme provides Bootstrap)**を提供します。 ## レイアウトが表示されない場合 - **すべての画面サイズでカラムが積み重なります。**Bootstrapが読み込まれていません。設定は**None (theme provides Bootstrap)**で、テーマも読み込んでいません。選ぶのは**Bootstrap 5**です。**Sideload Bootstrap files**配下の`/admin/dxpr_studio/dxpr_builder/settings`で設定します。 - **デスクトップのレイアウトでカラムが減りました。**別の画面サイズにカラムの少ないタイルを選んだため、ビルダーは等幅レイアウトを合わせて減らしました。[取り消しとやり直し](/ja/hc/documentation/learn-dxpr-builder/editing/undo-redo)の説明どおりに変更を取り消し、カラムごとに1つの分数で**Custom Layout**を使います。 - **最後のカラムが新しい行に落ちます。**分数の合計が12トラックの1行分を超えています。合計が1になるようにします(例: `1/4 + 3/4`)。 - **カスタムカラムに明確な幅がありません。**1/5のような分数にはBootstrapクラスがありません。2分の1、3分の1、4分の1、6分の1、12分の1を使います。 ## 次のステップ - [Rowの追加](/ja/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)：ローを追加してカラムプリセットを選ぶ。 - [レスポンシブデザイン](/ja/hc/documentation/learn-dxpr-builder/design/responsive-design)：スマートフォン、タブレット、デスクトップでの表示・非表示を切り替える。 - [ネスト](/ja/hc/documentation/learn-dxpr-builder/layout/nesting)：カラム内にローを配置して細かいレイアウトを作る。