メインコンテンツにスキップ

ボックスをコピー&ペーストする

スクリーンに追加したボックスを複製し、同じデザイン要素を再利用する手順を説明します。単一または複数のボックスをコピー&ペーストできます。

コピー&ペーストのショートカットキー

コピー&ペーストはショートカットキーを利用して行います。

OSごとのコピー&ペーストのショートカットキーは次のとおりです。

OS

コピー

ペースト

Windows

Ctrl + C

Ctrl + V

Mac

⌘ + C

⌘ + V


ボックスをコピー&ペーストする方法

次の手順でコピー&ペーストします。

階層構造を持つボックス(親ボックス)を選択した場合は、階層構造が維持された状態でコピー&ペーストがされます。

  1. コピーしたいボックスを選択します。

  2. ショートカットキーでコピーしてペーストします。

    通常は、コピーしたボックスの下に新しいボックスがペーストされます。

    任意の要素を選択した状態でペーストすると、その要素と同じ階層にペーストされます。

Tips: レイヤーパネルを使用したコピー&ペースト

ボックスをクリックで選択しづらい場合は、レイヤーパネルから選択すると便利です。レイヤーパネルを使うと、階層構造から正しいボックスを選びやすくなります。

  1. デザインエディタ左のナビゲーションで、レイヤーパネルをクリックします。

  2. レイヤーパネルで対象の要素を選択します。

  3. 選択後、ショートカットキーでコピー&ペーストをします。


複数のボックスをコピー&ペーストする方法

複数のボックスを同時にコピーすると、まとまったデザインを効率よく再利用できます。事前に複数選択をしてからコピー&ペーストします。

  1. Shiftキーを押しながらボックスをクリックして複数選択します。

  2. 選択後、ショートカットキーでコピー&ペーストします。

Tips:コンポーネント機能を利用する

複数のボックスをプロジェクト内で繰り返し利用したい場合は、コンポーネント機能が便利です。

コンポーネントは、プロジェクト内で共通して使うデザイン要素を登録し、効率的に管理・再利用できる機能です。サイト全体で共通パーツをまとめて管理したい場合に適しています。

詳しい使い方は、コンポーネントの記事を参照してください。


プロジェクトをまたいで要素をコピー&ペーストする場合の注意点

プロジェクトをまたいでコピー&ペーストを行った際、ペースト先のプロジェクトでレイアウトが崩れることがあります。
プロジェクト間でレスポンシブデザインの設定ブレイクポイントの設定が異なると、ボックスに設定されたサイズ・配置・方向・表示設定などがペースト先の前提と一致せず、特定のデバイス幅のみでデザインが崩れるなどの事象が発生します。

プロジェクトをまたいだコピー&ペーストを行う場合は、各ブレイクポイントを切り替えながら表示を確認し、必要に応じて右パネルでサイズや方向、配置などを調整してください。


コピー&ペーストができない場合

PC環境やブラウザ拡張機能の影響により、コピー&ペーストが正しく動作しない場合があります。

詳細は、コピー & ペーストができないを参照してください。

こちらの回答で解決しましたか?