レイアウトをスマートフォンに対応させる.

ページはスマートフォンやタブレットに自動で適応します。広い画面ではカラムが横に並び、小さい画面では縦に積まれます。このページでは自分で制御する方法を説明します。画面サイズごとにカラムレイアウトを設定し、広い画面では順序を反転させ、一部のデバイスにのみエレメントを表示します。例では4カラムのローをタブレットで2×2に変えます。

動画ではスマートフォンで写真を非表示にし、ウィンドウを狭めて消える様子を示しています。

開始前の準備

• ページ上に4等分カラムのロー。詳細はローとカラムを参照。

画面サイズごとにレイアウトを選ぶ

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サイズでのみ表示し、他ではすべて非表示にします。

画面サイズ

1つのPositioned layersエレメントには独自のResponsiveトグルがあり、初期状態はオフです。オンにするとキャンバスの高さとテキストがウィンドウ幅に合わせて拡大縮小し、構成の比率を保ちます。

変更が表示されない場合

• タブレットでもカラムが縦に積まれます。その画面サイズ用のレイアウトがローにないため、768ピクセル未満ではカラムが縦に積まれます。ローのグリッドアイコンを開き、Add screen sizeをクリックしてSmall devices (≥ 576px)を選びます。
• エレメントが全画面サイズで消えました。2つのVisible onチップが付き、互いに相手の表示箇所で非表示にしています。1つに絞るか、非表示にするサイズごとに1つのHidden onチップを使います。
• Mirror rowがスマートフォンで効きません。 Mirror rowは768ピクセル以上で機能します。スマートフォンでの順序を変えるには、エディターでカラムを移動します。

次のステップ

• ローとカラム：ここでレスポンシブ対応させるローを作る。
• スマートフォンやタブレットでページを編集する：小さい画面でページを確認・修正する。
• セクションを端から端まで広げる：コンテンツの幅を決める。