---
title: "レスポンシブバンドルで作業する"
slug: "work-with-responsive-bundles"
abstract: "異なるブレイクポイントでコンポーネントの異なるバージョンを作成・設計し、レスポンシブバンドルを構築します。その後、ページビルダー内のウェブページに段階的なバージョンやレスポンシブバンドルを挿入できます。"
---
# レスポンシブバンドルで作業する

コンポーネントビルダーでは、異なるブレークポイント向けに設計されたバージョンをバンドルすることでレスポンシブコンポーネントを作成できます。ウェブページに挿入すると、コンポーネントが表示される画面サイズに応じてバンドルのレンダリングが異なります。

レスポンシブバンドルを作成して使用するには:

1.  コンポーネントを作成し、ステージングします。すべてのブレークポイントに対して1つのバージョンのみのデフォルトバンドルが自動的に作成されます。
    
2.  元のコンポーネントを好きなだけ複製し、各バージョンのブレークポイントを設定します。例えば、超小ブレークポイント用に「 *Small devices* 」、中ブレークポイント用に「 *Medium devices* 」、大、超、特大ブレークポイント用に「 *Large devices* 」というバージョンを作成できます。
    
    ![Setting breakpoints for a version](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/2023-12-07_12-44-42.png)
    
3.  各バージョンは表示されるデバイスを意図した幅に合わせて設計してください。特定のバージョンに加えられた変更は、そのバージョンで選ば [れたすべてのブレークポイントサイズ](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/prototyping-components/work-with-responsive-bundles/work-with-breakpoints.html "Work with breakpoints") に適用されます。バージョン上のラベルを使って、特定のブレークポイントでバージョンがどのようにレンダリングされるかを確認できます。
    
    ![Viewing a version at various breakpoints](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/2023-12-07_12-47-46.png)
    
4.  デザインが完成したら、バンドルに加えたいバージョンの上にある **「ステージ** 」をクリックしてください。
    
    あるいは、このコンポーネントのすべてのバージョンをステージ化するには、バージョン以外のどこかをクリックして右側のペインで **概要** を開き、その後 **「ステージアップ全体**」をクリックしてください。
    
    ![Screenshot of the Overview pane](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/2023-12-07_13-00-24.png)
    
5.  ブレークポイントが正しいバージョンで定義されているか確認するには、**概要** ペインの **レスポンシブバンドル** セクションで **「デフォルトバンドル**」をクリックします。オプションで、ドロップダウンリストで正しいバージョンをクリックして特定のブレークポイントの他のバージョンを定義することもできます。クリック可能にするには、該当するブレークポイントに合わせて設計・ステージングされている必要があります。
    
6.  特定のバージョンをPage builderでスタンドアロンのコンポーネントとして利用可能にするには(ウェブページでレスポンシブバンドルを使いたくない場合)、**概要** パネルの **「Specific versions** 」セクションで「 **Pages内で利用可能なバージョン**」をクリックし、「 **特定のバージョンとして使用を許可**する」を選択してください。
    
    ![Screenshot of the specific versions pane](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/2023-12-07_13-18-03.png)
    
7.  レスポンシブバンドルや特定のバージョンをウェブページで使いたい場合は、「Pages」に移動し、コンポーネントをページ内の該当するプレースホルダーにドラッグしてください。右側のペインで、レスポンシブバンドルまたは使いたい特定のバージョンを選択します。
    
    あるいは、レスポンシブバンドルや特定のバージョンを自分のページビルダーで作成したウェブページで使いたい場合は、「 **埋め込みコードを取得**」をクリックしてください。