レスポンシブ Web ページ レイアウトの作成

レスポンシブ Web ページのデザイン

プレビュー

このトピックでは、ブログ記事のリストを表示するレスポンシブ Web ページを作成する方法を紹介します。携帯、タブレット、およびデスクトップのカスタム レイアウトを定義します。

概要

以下は手順です。

  1. レスポンシブ レイアウトの選択
  2. Bootstrap コンテナーにコンテンツを追加
  3. 他のブレークポイント用にレイアウトをカスタマイズ
  4. スクリーン プレビューの実行

詳細手順

1.レスポンシブ レイアウトの選択

  1. 新しいスクリーンで、ブラウザー ビューポートを選択します。

  2. [モバイルファースト アプローチ] ボタンをクリックします。

    Bootstrap コンテナがキャンバスに追加されます。1 行で 3 つのセルが垂直方向に配置されます。

    レスポンシブ ブレークポイント ピッカービューポート ピッカー の隣にあります。XS-Phone ブレークポイントが選択されます。

Bootstrap コンテナーのレイアウトは 12 列構造を使用します。Indigo Studio で Bootstrap コンテナーの要素は「列」の代わりに「セル」と呼ばれます。各行は、列スパンに基づいて複数のセルを垂直方向に配置できます。

2.Bootstrap コンテナーにコンテンツを追加

  1. 最初のセルにタイトルを追加します。

    最初のセルをダブルクリックして編集モードを有効にし、Alt+クリック を使用してタイトルを追加します。

    デフォルトで、タイトルはストレッチ モードに設定し、列スパンは 12 です。

    ストレッチ モードに設定される要素を側からサイズ変更すると、列スパン (左側からサイズ変更する場合にオフセットも) を変更します。

    例のタイトルは茶色、太字、余白は 15 です。また、セルの背景色は beige です。

  2. 第 2 のセルに画像を追加します。

    第 2 のセルを選択して編集モードを有効にし、Alt+クリックを使用して画像を追加します。編集モードにない場合、要素をセルに追加するには、Space キーを押してドラッグ アンド ドロップできます。

    Indigo Studio は、画像をセルの幅に合わせるためにサイズ変更します。

  3. タイトル要素、テキスト、ボタンを画像と同じセルに追加します。

    この要素のデフォルト列スパンは 12 のため、垂直方向に配置されます。デフォルトで、セルのコンテンツは高さを決定します。手動的にセルをサイズ変更すると、この設定は上書きされます。プロパティ パネル から サイズ自動調整 アクションを使用して再適用できます。

    デフォルトで、要素の下余白は 15 ピクセルに設定されます。セルに 2 つ以上の要素がある場合、セル内の要素の間にスペースを追加する際に余白は便利です。

    詳細な外観のため、セルの要素にカスタム余白設定を適用できます。

  4. セルを複製するには、セルの複製 アクションをクリックします。3 つの記事を作成するには、このアクションを 2 回実行します。

3.他のブレークポイント用にレイアウトをカスタマイズ

  1. レスポンシブ ブレークポイント ピッカー を使用して、タブレット ブレークポイントに切り替えます。

  2. 第 2 および第 3 の記事を隣に表示するために、セルの列スパン変更します。列スパンが 6 に設定されるまでドラッグします。

  3. ボタンの列スパンも変更します。

    スペース + クリックを使用して選択し、列スパンを 4 に設定します。

    レスポンシブ オプション はより小さいブレークポイントから継承されます。スマートフォンなどのブレークポイントで設定される値はタブレットなどのより大きいブレークポイントで保持されます。この場合に第 2 および第 3 のセルを隣同士に表示するには、列スパンは 6 に設定します。

  4. デスクトップ レイアウトをデザインするには、レスポンシブ ブレークポイント ピッカー を使用して、デスクトップ ブレークポイントに切り替えます。

    タブレット ブレークポイントで設定されるオプションは継承されます。

  5. 最初の記事を主な記事に設定するには、画像の列スパンを 7 に設定し、その他の要素の列スパンを 5 に設定します。

4.スクリーン プレビューの実行

  1. [スクリーンの実行] ボタンをクリックすると、プロトタイプをプレビューします。

  2. プレーヤー ツールバー で「サイズ自動調整」 オプションを選択します。

  3. デザインしたブレークポイントを確認するには、ブラウザーをサイズ変更します。

プロトタイプ

以下のサンプル プロトタイプを参照してください。

  • ブログ ページ (レスポンシブ): 表示、またはアプリケーション メニューワークスペースタブに移動します。

関連トピック