構造階層

Webflow における要素の動作を理解することは非常に重要です。ここでは、要素の階層を 3 つの側面から説明します。

• 配置 — オブジェクトが互いにどのように配置されているか（例：祖先、子孫、ピア）
• 転送されたテキストスタイル — テキストのスタイルが祖先から子孫に受け継がれる仕組み
• 次元関係 — 祖先要素と子孫要素の次元が互いにどのように影響し合うか

配置

配置とは、あるオブジェクトを別のオブジェクト内に配置することです。たとえば、タイトルが div 内に配置されていれば、そのタイトルは div 内に配置されます。ボックス モデルについて学習します。

ナビゲーターで配置を確認する

配置はナビゲーター パネルで最も明確に確認できます。

div 内に配置されたら、タイトルは div の子要素になります。追加された他の要素も div 要素の子になります。それらは互いに同等です。

 階層は、すべての Web サイトの最上位要素である body から始まります。その直下では、その子孫要素はすべてわずかにインデントされています。水平インデントは、要素が子孫であることを示します。このレベルの要素の場合、祖先要素は body です。

Body 要素内の Div は、その中にあるコンテンツの祖先要素として機能します。そのコンテンツはさらにインデントされ、これらの要素が Div の子孫であることを示します。

パンくずバーの配置を観察する

階層を表示できる 2 番目の場所は、キャンバスの下のパンくずバーです。任意の要素を選択すると、その要素の祖先との関係をすばやく識別できます。ただし、ピア要素は表示されず、その直系の祖先、その祖先の直系の祖先などのみが表示されます。

転送されたテキストスタイル

要素にフォント スタイルがある場合、これらのスタイルはその子孫要素とそれ以降の子孫要素に継承されます。たとえば、Body 要素のフォント タイプを変更すると、その子孫要素はすべて同じフォントを継承します。子孫は、祖先やそれ以前の祖先から継承したスタイルを置き換えることができます。たとえば、div を選択してフォント タイプを変更すると、その子孫はすべて同じフォントを継承します。ただし、子孫要素を選択してフォント タイプを変更すると、親 div から継承したフォントが置き換えられます。テキスト スタイルの継承について詳しくは、こちらをご覧ください。

スタイル パネルを使用すると、継承されるスタイルとその継承元を簡単に識別できます。オレンジ色のラベルとアイコンは、スタイルが祖先要素または上位のクラスやタグから継承されていることを示します。

次元関係

ほとんどの要素は、その中のコンテンツに応じてサイズが決まります。例えば、 div要素 デフォルトでは高さが設定されていません。ただし、 分割 増加します 分割の身長。

子孫は祖先要素のサイズに影響しますが、祖先要素に固定の高さまたは幅を割り当てると、これが上書きされます。つまり、コンテンツは祖先コンテナーの高さに影響を与えなくなります。その結果、そのコンテナーに追加のコンテンツがある場合、コンテンツはコンテナーを超えて拡張されます。オーバーフローを非表示にし、固定高さのコンテナーにスクロールバーを添付する方法を調べます。