---
url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/editing/drag-and-drop'
title: 'エレメントをドラッグで配置する | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:20:13+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'エレメント、ロー、セクションはドラッグで好きな場所に置けます。カラム内で上下に動かすことも、別のカラムやセクションに移すこともできます。新しいエレメントはカラムの一番上に追加されるため、並べ替えにはドラッグが手早くなります。例ではBook a free consultationボタンを、関係するテキストの下にドラッグしています。'
tags:
  - 'Edit a page'
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: エレメントをドラッグで配置する
      description: 'エレメント、ロー、セクションはドラッグで好きな場所に置けます。カラム内で上下に動かすことも、別のカラムやセクションに移すこともできます。新しいエレメントはカラムの一番上に追加されるため、並べ替えにはドラッグが手早くなります。例ではBook a free consultationボタンを、関係するテキストの下にドラッグしています。'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T14:20:13+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/editing/drag-and-drop'
      articleSection: ページを編集
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/editing/drag-and-drop'
      description: 'エレメント、ロー、セクションはドラッグで好きな場所に置けます。カラム内で上下に動かすことも、別のカラムやセクションに移すこともできます。新しいエレメントはカラムの一番上に追加されるため、並べ替えにはドラッグが手早くなります。例ではBook a free consultationボタンを、関係するテキストの下にドラッグしています。'
      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/editing) # エレメントをドラッグで配置する.

 DXPR Builderを学ぶページを作るページを編集

   ## このガイドの内容

 関連ガイド

- [エレメントのコピーと貼り付け](/ja/hc/documentation/learn-dxpr-builder/editing/copy-paste)
- [編集したい箇所の選択](/ja/hc/documentation/learn-dxpr-builder/editing/selecting-elements)
- [ローを追加する](/ja/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)

エレメント、ロー、セクションはドラッグで好きな場所に置けます。カラム内で上下に動かすことも、別のカラムやセクションに移すこともできます。新しいエレメントはカラムの一番上に追加されるため、並べ替えにはドラッグが手早くなります。例では**Book a free consultation**ボタンを、関係するテキストの下にドラッグしています。

  ## エレメントのドラッグ

1. エレメントにカーソルを合わせてコントロールバーを表示します。
2. ドラッグハンドル（コントロールバー左にあるエレメント名付きの点状グリップ）を押したままにします。
3. エレメントを新しい場所までドラッグします。縞模様のプレースホルダーが配置先を示します。
4. マウスボタンを離してドロップします。
5. ツールバーの**Save**をクリックして、ページを保存します。

例では、各エレメントにStyleパネルで48ピクセルの上マージンも付けています。

## ドロップできる場所

エレメントは、同じカラム内の2つのエレメントの間、別のカラム、別のセクションのいずれにも置けます。タブやCollapseパネルのようなコンテナエレメントの中にも入れられます。同じページ内のDXPR Builder領域なら、どこでも受け付けます。

## セクション、ロー、カラムの移動

セクションとローは、コントロールバーに同じハンドルがあります。セクションはページ内で上下にドラッグし、ローは別のセクションにドラッグします。カラムはロー内に留まります。カラムのハンドルを左右にドラッグして、隣と入れ替えます。

## ドラッグなしでの移動

コントロールバーのエレメント名をクリックして選択します。Ctrl+UpキーまたはCtrl+Downキー（MacではCmdキー）を押して1つ分移動します。カラムの場合はCtrl+LeftキーまたはCtrl+Rightキーを押します。**More**メニューにも、**Move Up**と**Move Down**として同じ移動があります。

## 表示内容

ドラッグ中はエレメントのコピーがポインターに付いてきて、縞模様のプレースホルダーがドロップ位置を示します。ドロップ後はエレメントが新しい場所に収まり、カラムの残りが周りで詰まります。**Save**ボタンのドットは、変更がまだ保存されていないことを示します。

## エレメントが動かない場合

- **ドラッグしても何も動かない。** エレメント自体を押しており、ハンドルではありません。エレメント名の付いた点状グリップを押したままにします。
- **置きたい場所が画面外にある。** ページは、ポインターがウィンドウの端に近い間だけスクロールします。ポインターを上端や下端の近くに寄せて待ちます。
- **カラムがローから出られない。** カラムはロー内での入れ替えのみです。代わりに、カラム内のエレメントを他のローにドラッグします。
- **Positioned layers内のエレメントにプレースホルダーが出ない。** それらのエレメントはキャンバス上に自由配置です。[Positioned layers](/ja/hc/documentation/learn-dxpr-builder/layout/positioned-layers)をご覧ください。
- **エレメントが違う場所に落ちた。** Ctrl+Zキー（MacではCmd+Zキー）を押してドロップを取り消します。

## 次のステップ

- [エレメントのコピーと貼り付け](/ja/hc/documentation/learn-dxpr-builder/editing/copy-paste)：動かす代わりにエレメントを繰り返します。
- [編集したい箇所の選択](/ja/hc/documentation/learn-dxpr-builder/editing/selecting-elements)：カラム、ロー、セクションのハンドルにたどり着きます。
- [ローとカラム](/ja/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)：ローのカラムレイアウトを変えます。