要素をコンテナまたはアンカーブロックで囲む

Webflow で Web サイトを作成する際、外観をより便利にカスタマイズするために、コンテナやアンカー ブロックなどの包含要素内に要素を囲むことを検討する場合があります。これで、コンテナまたはアンカー ブロック内に要素をすばやく囲むオプションが利用できるようになり、クリック回数が減り、デザイン プロセスの効率が向上します。 

このチュートリアルでは、次のことを理解します。 

1. 要素をコンテナブロックで囲むプロセス
2. 要素をアンカーブロックで囲むプロセス
3. H FlexまたはV Flexコンポーネントで要素を囲むプロセス
4. 要素の囲みを解除する方法

ご注意ください： これらのテクニックを使用して、CMS にリンクされた要素も含め、任意の要素を囲むことができます。メイン コンポーネントを除く、個々のコンポーネント インスタンスとコンポーネント内の要素を囲むこともできることに注意してください。

コンテナブロックで要素を囲む方法

コンテナ ブロックは、Web デザインの基本的かつ多用途の要素です。スペースを作成したり、区切りとして機能したりするなど、さまざまな目的に使用できますが、主に要素をグループ化するために使用されます。 

要素をコンテナ内に囲むには: 

1. デザイナーキャンバスで囲む要素を選択します
2. プレス 指示 + オプション + グ (Macの場合) または コントロール + 代替 + グ (Windowsの場合)

要素をコンテナー内に囲む別の方法は、キャンバス上のメニューを使用することです。 

1. デザイナーキャンバス上で囲む要素を右クリックします。
2. 覆いかぶさる 包む
3. クリック コンテナブロック

要素が囲まれると、新しいコンテナー (コンテナー ブロック) が自動的に選択され、ナビゲーター パネルで展開されます。

‍トップチップ： 要素をコンテナブロックで囲んだら、 指示 + 入力 (Macの場合) または コントロール + 入力 (Windows の場合) クラスを追加します。

アンカーブロックで要素を囲む方法

アンカー ブロックは、構造とレイアウトの点ではコンテナー ブロックと同様に機能しますが、アンカー ブロックの内部はハイパーリンクに変換されます。 

要素をアンカー ブロックで囲むには: 

1. デザイナーキャンバスで囲む要素を選択します
2. プレス 指示 + オプション + あ (Macの場合) または コントロール + 代替 + あ (Windowsの場合) 

キャンバス上のメニューを使用して要素をアンカー ブロックで囲むには: 

1. デザイナーキャンバス上で囲む要素を右クリックします。 
2. 覆いかぶさる 包む
3. クリック アンカーブロック 

囲まれると、新しいコンテナー (つまり、アンカー ブロック) が自動的に選択され、ナビゲーター パネルで展開されます。

プロのヒント: 押すと 指示 + 入力 (Macの場合) または コントロール + 入力 (Windows の場合) 要素をアンカー ブロックで囲んだ後にクラスを適用します。

H Flex または V Flex コンポーネントで要素を囲む方法

H Flex コンポーネントで要素をラップするには: 

1. デザイナーキャンバスで囲む要素を選択します
2. プレス 指示 + H (Macの場合) または コントロール + H (Windowsの場合) 

V Flex コンポーネントで要素をラップするには: 

1. デザイナーキャンバスで囲む要素を選択します
2. プレス 指示 + グ (Macの場合) または コントロール + グ (Windowsの場合) 

キャンバス上のメニューを使用して H Flex または V Flex コンポーネント内の要素を囲むには: 

1. デザイナーキャンバス上で囲みたい要素を右クリックします。 
2. 覆いかぶさる 包む
3. 選ぶ Hフレックス または Vフレックス

要素の囲みを解除する方法

親要素 (コンテナー、セクション、アンカー ブロックなど) から要素を囲み解除するオプションもあります。囲み解除すると、子要素は現在の位置を保持します。

要素を親コンテナーから切り離すには:

1. 削除したい親コンテナを選択してください
2. プレス 指示 + シフト + グ (Macの場合) または コントロール + シフト + グ (Windowsの場合)

注記： 子要素がキャンバス上に親コンテナーを必要とする場合 (フォーム入力フィールド、リスト項目など)、子要素を囲まないでおくことはできません。