--- url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/design/responsive-design' title: 'レイアウトをスマートフォンに対応させる | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:27:47+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- ページはスマートフォンやタブレットに自動で適応します。広い画面ではカラムが横に並び、小さい画面では縦に積まれます。このページでは自分で制御する方法を説明します。画面サイズごとにカラムレイアウトを設定し、広い画面では順序を反転させ、一部のデバイスにのみエレメントを表示します。例では4カラムのローをタブレットで2×2に変えます。 動画ではスマートフォンで写真を非表示にし、ウィンドウを狭めて消える様子を示しています。 tags: - Ontwerpgidsen image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T11:27:47+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: レイアウトをスマートフォンに対応させる description: |- ページはスマートフォンやタブレットに自動で適応します。広い画面ではカラムが横に並び、小さい画面では縦に積まれます。このページでは自分で制御する方法を説明します。画面サイズごとにカラムレイアウトを設定し、広い画面では順序を反転させ、一部のデバイスにのみエレメントを表示します。例では4カラムのローをタブレットで2×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:47+0000' dateModified: '2026-10-24T11:27:47+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/responsive-design' articleSection: Ontwerpgidsen - '@type': WebPage '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/design/responsive-design' description: |- ページはスマートフォンやタブレットに自動で適応します。広い画面ではカラムが横に並び、小さい画面では縦に積まれます。このページでは自分で制御する方法を説明します。画面サイズごとにカラムレイアウトを設定し、広い画面では順序を反転させ、一部のデバイスにのみエレメントを表示します。例では4カラムのローをタブレットで2×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 --- [Help Center](/ja/node/75)/[Documentation](/ja/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/hc/documentation/learn-dxpr-builder/element-settings) /[Ontwerpgidsen](/hc/documentation/learn-dxpr-builder/design/overview) # レイアウトをスマートフォンに対応させる. Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen ## In this guide Related guides - [ローを追加する](/ja/hc/documentation/learn-dxpr-builder/layout/rows-and-columns) - [Mobile editing](/hc/documentation/learn-dxpr-builder/editing/mobile-editing) - [セクションを端から端まで広げる](/ja/hc/documentation/learn-dxpr-builder/design/full-width-layouts) ページはスマートフォンやタブレットに自動で適応します。広い画面ではカラムが横に並び、小さい画面では縦に積まれます。このページでは自分で制御する方法を説明します。画面サイズごとにカラムレイアウトを設定し、広い画面では順序を反転させ、一部のデバイスにのみエレメントを表示します。例では4カラムのローをタブレットで2×2に変えます。 動画ではスマートフォンで写真を非表示にし、ウィンドウを狭めて消える様子を示しています。 ## 開始前の準備 - ページ上に4等分カラムのロー。詳細は[ローとカラム](/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)を参照。 ## 画面サイズごとにレイアウトを選ぶ 1. ローにホバーしてコントロールバーのグリッドアイコンをクリックします。レイアウトダイアログが**Medium devices (≥ 768px)**パネル付きで開きます。 2. クリックするのは**Add screen size**です。2つ目のパネルが**Extra small (< 576px)**に設定されて開きます。 3. そのパネルのドロップダウンで**Small devices (≥ 576px)**を選びます。 4. クリックするのは**Custom Layout**で、`1/2 + 1/2 + 1/2 + 1/2`と入力して**Save**をクリックします。 5. ツールバーの**Save**をクリックします。 4つの半分指定で4カラムを保ったまま1行に2つずつ配置します。2等分カラムのタイルでは全画面サイズでローが2カラムになります。 ## 表示内容 デスクトップでは4カラムが1行に並んだままです。ブラウザウィンドウを768ピクセル未満に狭めると2×2に折り返します。576ピクセル未満では1行1つずつ縦に積まれ、エディターで見る順序通りになります。 レイアウトはその画面サイズから上向きに適用され、より大きい画面サイズに独自レイアウトがあるまで続きます。新しいローはすべて**Medium devices (≥ 768px)**用の1レイアウトから始まるため、スマートフォンや小型タブレットではカラムが縦に積まれます。パネルの**Remove screen size**でそのレイアウトを再び削除します。 ## 広い画面で順序を反転させる ローの**More**メニューを開き、**Settings**を選んで**Mirror row**をオンにします。768ピクセル以上ではカラムが逆順で表示され、小さい画面ではエディターの順序で縦に積まれます。 画像とテキストを交互に並べたローに使います。エディターでは画像を先に置くことでスマートフォンではテキストの上に表示され、1行おきに反転させることでデスクトップでは画像が右に表示されます。 ## 画面サイズごとにエレメントを表示・非表示する 1. エレメントの**More**メニューを開き、**Settings**を選びます。 2. 下にある**HTML classes**で**Responsive Visibility**グループからチップを選びます(例：**Hidden on extra small devices, phones (<576px)**)。 3. クリックするのは**Save**です。 それぞれの**Hidden on**チップは1つの画面サイズでのみエレメントを非表示にします。それぞれの**Visible on**チップはその1サイズでのみ表示し、他ではすべて非表示にします。 ## 画面サイズ | レイアウトダイアログのラベル | 画面幅 | |---|---| | **Extra small (< 576px)** | 縦向きのスマートフォン | | **Small devices (≥ 576px)** | 大型のスマートフォン、小型のタブレット | | **Medium devices (≥ 768px)** | タブレット | | **Large devices (≥ 992px)** | ラップトップ | | **Extra large (≥ 1200px)** | デスクトップ | | **Extra extra large (≥ 1400px)** | 大型のデスクトップ | 1つの**Positioned layers**エレメントには独自の**Responsive**トグルがあり、初期状態はオフです。オンにするとキャンバスの高さとテキストがウィンドウ幅に合わせて拡大縮小し、構成の比率を保ちます。 ## 変更が表示されない場合 - **タブレットでもカラムが縦に積まれます。**その画面サイズ用のレイアウトがローにないため、768ピクセル未満ではカラムが縦に積まれます。ローのグリッドアイコンを開き、**Add screen size**をクリックして**Small devices (≥ 576px)**を選びます。 - **エレメントが全画面サイズで消えました。**2つの**Visible on**チップが付き、互いに相手の表示箇所で非表示にしています。1つに絞るか、非表示にするサイズごとに1つの**Hidden on**チップを使います。 - **Mirror rowがスマートフォンで効きません。** **Mirror row**は768ピクセル以上で機能します。スマートフォンでの順序を変えるには、エディターでカラムを移動します。 ## 次のステップ - [ローとカラム](/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)：ここでレスポンシブ対応させるローを作る。 - [スマートフォンやタブレットでページを編集する](/hc/documentation/learn-dxpr-builder/editing/mobile-editing)：小さい画面でページを確認・修正する。 - [セクションを端から端まで広げる](/hc/documentation/learn-dxpr-builder/design/full-width-layouts)：コンテンツの幅を決める。