【日本語版Webflow University】 要素解説「セクション」

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

引用元：https://university.webflow.com/lesson/section

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

‍

Webflowが用意する要素の一つである『セクション』を用いることで、サイトをブロックごとに区切り、サイトに載せる情報を大まかに整理して掲載することができます。

セクションは、デフォルトでは横幅100%のレイアウト要素で、ブラウザーの横幅全体に広がります。セクションは、ページ構造の骨格を決め、レイアウトを制御する重要な要素です。基本的にサイトのボディ部分を制作する場合、まず初めにこの『セクション』要素を置きます。これによって、サイトのいわば土台が出来上がります。

レッスン概要

1. セクションを追加する
2. セクションのスタイルを設定する
3. ミニマムハイト
4. ビューポートの高さ
5. 3Dパースペクティブを追加する

セクションを追加する

エレメント追加パネル(ショートカットキー：A)からセクション要素をページに追加できます。デフォルトでは、セクションはボディの全横幅に広がります。

また、デフォルトでは、セクションにはパディングがありません。セクションとの距離感をいい感じに、セクション内にコンテンツを置くためには、セクション内にコンテナ要素をドラッグして、要素がページの中央に配置されるようにします。

一言メモ

コンテナ要素は一見レイアウトを作る際に便利に見えますが、Webflow独自の設定が施されているため、複雑な設定やレスポンシブ対応時にうまく動いてくれないことがあります。従って、当社ではコンテナは使わず例えば「ディブブロックにマージン左右120pxを設定して」コンテナと同様に配置しています。Divはただのブロックで何も設定されていないため、一から設定する手間はあるものの、予想外の挙動や設定の自動キャンセルなどがなされないというメリットがあります。

セクションのスタイルを設定する

セクションの高さは、コンテンツに合わせて自動的に調整されます。要素を追加すると、その分セクションの高さが高くなります。スタイルパネルで特定の高さを設定することもできます。

コンボクラス

コンボ クラスを使用すると、セクションの元の設定は維持しつつも、セクションごとに様々スタイルを組み合わせることができます。スタイルをオーバーライドして、コンボクラスを重ねて設定していくこともできます。

元のセクションに変更を加えると、その変更がそのセクションのすべてのインスタンスに影響します。 (但し、コンボクラスでオーバーライドされている場合はこの限りではありません)。

この性質を活用して、別のセクションを構築するときに、原型となるセクションのクラスをベースに、コンボクラスを用いることで、元のセクションの要素は維持しつつも、異なるレイアウトのセクションを作り出すことができます。

オートハイト

テキストやメディアをセクションに追加すると、高さ変化します。追加するコンテンツの量に関係なく、セクションの高さは内部のコンテンツの高さに依存します。

セクションのパディングもセクションの高さに影響を与えます。セクションの上部と下部のパディングを設定し、それに応じて調整できるようにコンテンツを追加すると、コンテンツ間がいい距離感になり、ぐっとサイトっぽくなります。

一言メモ

セクションの上下に設定するおすすめのpx数
PC：60px , 80px
Mob：20px , 40px

ミニマムハイト

セクションに特定の高さを設定するには、最小の高さ (500px など) を設定して、セクションがそのコンテンツとともに拡張できるようにするとよいでしょう。

通常のハイトを設定してしまうと、内部のコンテンツ次第ではセクションの高さが足りなくなり、途中でコンテンツがはみ出たり、途切れたりしてしまいます。

フレックスボックスを使用してコンテンツを中央に配置する

ディブブロックをセクションに配置して、セクションを選択し、それをスタイルパネルのレイアウトからディスプレイをフレックスに設定します。そして、レイアウトのアラインをセンター、ジャスティファイをセンターにすると、セクション内のコンテンツを垂直方向に中央揃えできます。

ビューポートの高さ(vh)

サイトのファーストビューなど、場合によってはセクションの高さをビューポートハイト(vh)で指定すると便利です。

1100vhは端末の画面の高さに対して100％の高さをとるという意味です。このようにビューポートハイトを用いると、ユーザーの使用する端末の画面によって、セクションの高さを変えることができます。

例えば50vhにするとビューポートの高さの50％にセクションの高さを設定できます。

一言メモ

vhを使って画面を埋めることもできれば逆に、一定埋めないようにすることもできます。例えば、ユーザーにスクロールを促したい場合、100vhを設定するよりも、あえて80vhに設定することで、次のセクションの頭をチラ見せさせます。

3Dパースペクティブを追加する

セクションに子要素がある場合、3D空間で回転または移動させることができます。各要素に同じクラスが適用されている場合は、それらすべてをまとめて設定することができます。

ただし、3Dパースペクティブによって、要素をただ回転させてみても、平面上で歪んだように見えてしまいます。

これに立体感を持たせるためには、2D & 3Dトランスフォームスの三点リーダーをクリックし、チルドレンパースペクティブの距離感を設定する必要があります。

チルドレンパースペクティブの値を大きくすると、カメラの望遠レンズの様におおよそ立体感を感じるデザインになります。値を小さくすると、広角レンズで被写体に近づいたような近接感のあるデザインになります。

チルドレンパースペクティブはカメラのような効果で要素を写し、セクション内の子要素の3D効果を強くすることができます。

‍

まとめ

いかがでしょうか。

当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。

以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。

ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。

Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。

今後とも宜しくお願い致します。

‍

Webflowとはなにか？についてはこちらで解説しています。合わせてご覧ください。

‍Webflowについての基本的な使い方について解説した他の記事はこちらからご覧ください。

Webflowのメリットについて解説した記事も投稿しています。よろしければご覧ください。

‍

‍