フレームワーク

フレームワーク（CSSフレームワークとも呼ばれる）は、レイアウトを整理するためのプレゼンテーション属性です。フレームワークコンテンツの再配置やサイズ変更の柔軟性を提供し、動的で受容性の高いデザインを生成します。フレームワークは表示オプションであるため、 指令.

このセッションでは、次のことを学びます。

1. フレームワークを確立し調整する方法
2. フレームワーク内でコンテンツを配置する方法
3. フレームワークのコンテンツをシフト、拡張、調整する方法
4. レスポンシブなフレームワークを作成する方法

フレームワークを確立し調整する方法

フレームワークを確立するには、フレームワークをサポートする要素（セグメント、divブロックなど）をワークスペースに導入します。 パネルを追加その後、その要素を選択し、 スタイルパネル > レイアウト > 画面、そして選択する フレームワーク.

フレームワークを直接編集することができます。 スタイルパネル またはフレームワーク編集モードに入ります。フレームワーク編集モードに入るには、「レンチ”アイコンの横にある コラム そして 行 フィールドを選択するか、ワークスペースでフレームワークを選択して「グリッド編集”アイコンをクリックします。フレームワーク編集モードを終了するには、 終わり ワークスペースオーバーレイの「近いフレームワーク設定の「 」アイコンをクリックします。

列と行を組み込む

フレームワークに新しい列と行を追加するには、 スタイルパネル > レイアウト > 画面 「増加対応する 列 そして 行 フィールド。次のこともできます。

• 列と行のフィールドに数値を挿入します
• フレームワーク編集モードにアクセスし、「プラス”アイコン スタイルパネル > フレームワーク設定
• フレームワーク編集モードを起動し、「プラスワークスペースの「」アイコン

列と行を複製して削除する

列と行を削除するには、次の 3 つの方法があります。

• 「減少”ボタンをクリックすると 列 そして 行 田畑
• フレームワーク編集モードにアクセスし、列または行にマウスを移動します。 スタイルパネル > フレームワーク設定を押して、「ごみ” アイコン
• フレームワーク編集モードにアクセスし、ワークスペースの列または行ヘッダーをクリックまたは右クリックして、 消去

フレームワーク編集モードで列と行を複製するには2つの方法があります。 スタイルパネル > フレームワーク設定 「重複”アイコンをクリックするか、ワークスペースの列または行のヘッダーを右クリックして 重複.

列と行を並べ替える

フレームワーク編集モードでは、列と行を並べ替えることができます。移動したい行または列の上にマウスを置き、左側に表示されるハンドルを目的の位置までドラッグします。

列と行の間のスペースを変更する

スペースを使用すると、余白やパディングを追加せずに列と行の間の距離を指定できます。列と行の間のギャップのサイズを調整するには、 スタイルパネル > レイアウト > ギャップ 値を入力します。

デフォルトでは、列と行の余白は同期されています。つまり、列の間隔サイズを変更すると、行の間隔サイズも自動的に同じ値に調整されます。列と行の間隔を個別に変更するには、「ロック」アイコンをクリックしてロックを解除します。

インサイダーヒント: 隙間のサイズを素早く拡大または縮小するには、 ギャップ レバーまたは押す オプション (Macの場合) または 代替 (Windows の場合) マウスを列フィールドまたは行フィールド上で左または右に移動します。 

列と行のサイズを調整する

フレームワーク編集モードでグリッドの列と行の比率を変更するには、ワークスペース上で列または行のヘッダーを選択して目的のサイズにドラッグします。行または列のヘッダーをクリックして、列または行のカスタム サイズを指定することもできます。

フレームワークのサイズ設定

フレームワークのサイズを決定する際に、標準単位（px、em、remなど）を使用するか、 FRユニットFR 単位は、フレームワーク内で使用可能なスペースの割合を表します。行と列の長さをパーセンテージまたはピクセル単位で指定するために使用しますが、固定パーセンテージまたはピクセル単位とは異なり、FR 単位はギャップを考慮しながら行と列のスペースを自動的に計算します。

設定することもできます 最小/最大 行と列が指定された最小値を下回ったり、規定の最大値を超えて拡張したりしないようにするために、値を設定します。たとえば、行の高さを 200 ピクセル以上に保ちたい場合は、最小値を 200 ピクセルに設定し、最大値を自動に設定します。その後、行は行内のコンテンツに基づいて拡張され、200 ピクセルを下回ることはなくなります。

フレームワーク内でコンテンツを配置する方法

フレームワーク内にさまざまな子要素 (見出し、画像、div ブロックなど) を挿入できます。デフォルトでは、新しいフレームワークの子はそれぞれ個別のフレームワーク セルを埋め、左から右の順に次の使用可能なセルを占有します。行に空きセルがなくなった場合は、新しいフレームワークの子を収容するために新しい行が作成されます。

フレームワークコンテンツの流れの方向を変える

フレームワークの子の方向を変更するオプションがあります スタイルパネル > 方向ここで選択できるのは 水平、これは子供を左から右に並べます、または 垂直、上から下へ子供を配置します。

グリッド内にコンテンツを手動で配置する

グリッド内でコンテンツを手動で配置するには、 シフト キーを押しながら要素をグリッドにドラッグします。既存のグリッドの子要素の位置設定を手動に変更することもできます。これを行うには、グリッドの子要素を選択し、 スタイルパネル > グリッドチャイルド > 位置を次のように変更します。 マニュアル.

手動で配置されたグリッドの子は割り当てられたグリッド セル内に残りますが、自動的に配置されたグリッドの子は、次のセルに移動して新しいグリッドの子に合わせて調整されます。

グリッドセルにさまざまな要素をネストする方法

グリッドの子要素内に要素をネストすることで、1つのグリッドセルに複数の要素を挿入できます。これを実現するには、まず構造要素（divブロックなど）をグリッドの直接の子要素としてグリッドに追加します。構造要素をグリッドの子要素として追加したら、 指示 (Macの場合) または コントロール (Windows の場合) 要素をグリッド セルにドラッグします。または、構造要素を選択し、クイック検索を使用して要素を追加することもできます。

グリッド内のコンテンツを複製する

グリッドの子を複製して、複数のグリッド セルで同じコンテンツを再利用するには、次の 2 つのオプションがあります。

• 押し続ける オプション (Macの場合) または 代替 （Windowsの場合）コンテンツをドラッグして複製し、新しいグリッドセルに再配置します。
• コンテンツをコピーし、グリッドを選択してコンテンツを貼り付けます

グリッド内のコンテンツの移動、スパン、配置を管理する

グリッド内にコンテンツを配置したら、そのコンテンツのデザインをカスタマイズできます。コンテンツを別のセルに移動して位置を調整したり、複数のセルにまたがるようにしたり、グリッド内でコンテンツを揃えたりすることもできます。

グリッドの子の再配置

グリッド内でコンテンツを移動するには、グリッドの子を選択してキャンバス上または ナビゲーター.

グリッドの子の順序を並べ替える

グリッドの子を選択して、 スタイルパネル > グリッドチャイルド > 注文.

コンテンツをグリッドに整列させる

すべてのグリッドの子の配置を変更するには、グリッドを選択して スタイルパネル > レイアウト > 整列。 使用 配置ボックス （3 x 3グリッド）を使用して、グリッドコンテンツを素早く整列させることができます。 バツ そして はい 軸は、 配置ボックス配置ボックスの利用について詳しくは、こちらをご覧ください。

特定のグリッド子の配置を調整するには、グリッド子を選択して、 スタイルパネル > グリッドチャイルドそこから、グリッドの子要素の配置や位置揃えを設定できます。 整列 そして 正当化する.

グリッドの子の拡張

自動的に配置されたグリッド子を複数のグリッドセルに拡張するには、グリッド子を選択し、 スタイルパネル > グリッドチャイルド > 位置、そして数を指定します 列 そして 行 グリッドの子要素がまたがる必要があること。

手動で配置したグリッド子を伸ばすには、グリッド子を選択し、 スタイルパネル > グリッドチャイルド > 位置、開始と終了を示す 列 そして 行 グリッドの子用。

セキュアグリッドの子の配置

負の値を使用すると、グリッドの端を基準にグリッドの子要素を配置できます。つまり、右から左、または下から上のセルを参照します。

負のグリッドの子の配置は、次の場合に役立ちます。

• 新しい列が追加されるたびにナビゲーションバーの位置を変更するのではなく、最初の列と最後の列の間にナビゲーションバーの位置を維持したい
• 追加される行数に関係なく、フッターをグリッドの一番下の行に維持したい場合は、フッターを行 -1/-1 に配置します。
• メイン コンテンツ セクションを、両側に等しい列を配置して、グリッドの中央に常に配置することを目標とします。そのためには、「終了」値を「開始」値の負の値 (例: 3/-3) に設定します。これにより、小さいブレークポイントで列が削除されても、子が中央に維持されます。

グリッドの子構成をリセット

グリッドの子設定は選択された要素に固有のものであり、クラスには保存されません。変更された設定は、 スタイルパネル 現在のブレークポイントで選択された要素にのみ適用されます。これらの設定は下位のブレークポイントにカスケードされ、オレンジ色のラベルで示されます。継承された (つまりオレンジ色の) 設定を下位のブレークポイントで上書きすると、インジケーターはピンク色に戻ります。

適用されたグリッドの子設定を削除するには、設定のピンクのラベルをクリックしてから、 リセット.

グリッドチルドレン間の重複

手動で配置されたグリッドの子要素は、同じセル内で交差すると自動的に重なり合います。これらの重なり合う要素の積み重ね順序は、ナビゲータで再調整するか、配置と Z インデックスの設定を変更することで管理できます。

空いているグリッドセルを埋める

グリッドの子が連結されている場合、グリッド内に空のセルが残ることがあります。これらのセルにコンテンツを自動的に入力するには、 スタイルパネル > レイアウト > 方向 「密」アイコンを選択します。

注記： 「密」設定を有効にすると、グリッドの空のセルにグリッドの子要素を収めようとします。ただし、これは項目の表示にのみ影響し、ページ上の実際の位置には影響しないため、アクセシビリティの問題が発生する可能性があります。

レスポンシブグリッドデザインの作成

グリッド デザインがさまざまな画面サイズに適応するようにするには、小さいブレークポイントで列を手動で削除するか、自動調整を有効にして小さい画面に合わせて列と行を自動的に生成します。

グリッドレイアウトをレスポンシブにカスタマイズ

グリッド デザインがすべてのデバイスで応答性があることを保証するには、ブレークポイントを小さくするために必要に応じて列の数を調整します。

小さいブレークポイントで列を変更することが不可能な場合は、次の操作を行います。

• グリッドを変更してみてください 方向 に 行
• これらの列内に手動で配置されたグリッドの子がないことを確認します。
• これらの列にまたがる子要素がないことを確認します

自動調整を実装する

自動調整はグリッドの強力な機能であり、列を自動的に繰り返して折り返し、ブレークポイントごとに調整することなく、すべての画面サイズで応答性を確保します。

自動調整を有効にするには、グリッド内の列と行を1つだけ維持します。グリッド編集モードに切り替え、列ヘッダーをクリックして、列の最小寸法と最大寸法を指定して、 自動調整追加の列が自動的に生成され、繰り返され、グリッド内でコンテンツがレスポンシブに分散されます。