【日本語版Webflow(ウェブフロー) University】 要素の階層について

この投稿はWebflow社が提供する「 Element Hierarchy」の内容を元に作成しています。

引用元：https://university.webflow.com/lesson/element-hierarchy

日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。

‍

階層をしっかりと理解しよう

階層（ヒエラルキー）は、ドイツ語に由来する興味深い単語の1つです。

今回は、階層について次の3つの方法で説明します

1. オブジェクトがお互いにネストされて親、子、兄弟になる方法。
2. テキストスタイルがこの階層を通じて伝達される方法。
3. 親要素と子要素のサイズがお互いに影響を与える方法。

ネスティング

まず、ネスティングについて見てみましょう。

ネスティングとは、単に1つのオブジェクトを別のオブジェクトの中に配置することです。

例えば、プロジェクトにセクションを追加し、その中に見出しを追加すると、その見出しはセクションの中に配置されます。

ナビゲーターでこれを非常に明確に見ることができます。

セクションがあります...そして見出しがあります。見出しはセクションの子要素になります。

そして、ここにパラグラフとボタンを追加してみましょう。

それらもセクション要素の子要素になります。それらは兄弟要素です。

では、階層はどうなっていますか？

最上位レベルでは、Bodyをクリックし、ビューがページの上部にスライドします。これが最上位要素です。

そして、すぐにその下にあるすべての子要素は少しインデントされています。

水平のインデントは、これらがBodyの子要素であることを示しています。

このレベルの要素にとって、親要素はBodyです。

次に新しいセクションはどうですか？それはBodyの子要素であることはわかっていますが、その中に入れたコンテンツに対しても親要素になります。

そして、そのコンテンツはさらにインデントされています。水平のインデントは、これらの要素がセクションの子要素であることを示しています。

階層の2番目の視覚的な表現は、キャンバスの下にあるボトムナビゲーションにアクセスできます。

任意の要素を選択し、親要素との関係をすぐに確認できます... Bodyまで遡ります。

兄弟要素は表示されません。例えば、新しい見出しをクリックすると、段落やボタンは表示されませんが、直接の親要素は表示されます。

そして、直接の親要素。ナビゲーターと同様に、これらの要素は完全にクリックでき、階層内の任意の要素にアクセスできます。それがネスティングです。

テキストスタイリング

次はテキストスタイリングです。テキスタイリング（textiling）やテックスタイリング（tech styling）とは混同しないようにしましょう。

セクションを選択します。そして、いくつかのタイポグラフィオプションを調整し始めると、それがそのまま下に伝達されることがわかります。

タイポグラフィスタイルだけがこのように動作します。親要素のタイポグラフィスタイルを変更すると、その子要素、そしてこの場合は子要素の子要素に影響を与えることができます。これはどんどん深くなります。

子要素はこれらのスタイルをオーバーライドできます。たとえば、セクションを選択してその中のタイポグラフィを調整することができます。

これらの変更が本文に加えた変更をオーバーライドしていることに注意してください。

子要素は、親によって設定されたタイポグラフィスタイルを上書きできます。さらに深く行ってみましょう。見出しを選択し、そこでタイポグラフィを調整します。同じです。

子要素はこれらのスタイルをオーバーライドできます。そして、スタイルパネルは、何が起こっているかを判断しようとしているときに最も役立つツールです。

要素を選択してスタイルを継承している場合は？インジケータを押すだけで、そのスタイルを取得している場所がわかります。

これが、プロジェクトに関連する階層とテキストスタイリングです。

サイズ

最後に、サイズについてです。ほとんどの要素は、その中のコンテンツによってサイズが決まります。

このセクションは定義された値がありません。さらにコンテンツを追加すると、セクションが高くなります！

ただし、親要素は自然なドキュメントの流れをオーバーライドすることがあります - これは、固定値を設定した場合に発生します。

たとえば、高さを定義する場合、または幅を定義する場合。

子要素は親要素のサイズに影響を与えますが、親要素に固定サイズを設定することで自然なドキュメントの流れをオーバーライドできます。

それが要素の階層に関連する3つの側面です。

‍

まず、ネスティングでは、親要素が他の要素を含んで子要素になることがあります。

これはナビゲーターとキャンバスの下のボトムナビゲーションで見ることができます。

次に、テキストスタイリングでは、親オブジェクトからテキストにスタイリングが伝達されることがあります。

または、その子要素やその子要素の子要素に対してもスタイリングが伝達されることがあります。

そしてもちろんサイズです。親要素のサイズは、内部にある内容によって決まる場合があります。

親要素の子要素は親要素のサイズを決定します...ただし、親要素のサイズを覆す場合もあります。

これが、プロジェクトに関連する要素の階層です。

‍

Webflowでは、パッとみて階層がわかりやすいように表示されており、子要素への影響なども把握しやすくなっています。

コーディング知識がある方なら、インデントのおかげで直感的に理解できると思います！

‍