このレッスンでは、Webflowで要素を追加する方法と、その配置や構造の確認の仕方を学びます。

要素の追加方法

要素は、Add ElementsパネルやLayoutsタブからクリック、ドラッグ＆ドロップで追加できます。ショートカット（Command＋E / Control＋E）を使えば検索から素早く配置することも可能です。マーケットプレイスから追加ライブラリを活用する方法も紹介しました。

ページ構造とNavigator

追加した要素はBody要素の中に入り、Navigatorで階層構造を確認できます。入れ子状に配置されることで、裏側のHTMLコードが視覚的に理解できる仕組みです。CanvasとNavigatorは連動しており、どちらで選択しても要素の位置がハイライトされます。

まとめ

要素の配置は、選択中の要素に内包されるか、その直後に追加されます。このレッスンを通じて、要素の追加方法とページ構造の理解を深めました。次回は、要素のスタイル変更について学びます。