menu

セクションの説明(webflow)

webflowを使用してのサイト制作を進めながら学習したことを書いていきます。
今回は「セクション(Section)」について説明します。

セクション(Section)はレイアウトを組んでいく際に
一番最初にベースに100%の幅で配置します。

webflow018-02

セクションの中にコンテナ(Container)を入れることによって、
ブラウザの中央にコンテンツが揃うようになります。

☆セクションの高さアレンジ
デフォルトでのセクションの高さは自動的に広がりますが
高さ設定:minの欄に「100VH」と入力するとサンプルのように
セクションの高さをブラウザ天地100%で設定することができます。
※「50VH」と入力すると天地50%で掲載されます。

webflow018-03

▽サンプル
live-preview

▷Adobe Museでホームページの制作/岸岡デザイン事務所
http://y-kishioka.com

▷Movie Web Magazine/KISHIOKA.DESIGN
http://kishioka.design

webflow017-01フレックスアイテムの設定(webflow)

container_img01コンテナの説明(webflow)

関連記事

  1. angle-05

    特定の領域に画面を自動的に配置するプラグインのご紹介(Adobe…

    レイアウトを行ったページを別ページで作成した多角形の領域に自動的に比率や角度を調節して配置することが…

  2. filmora-pho002-01

    テキスト「オープニング編」(Filmora)

    テキスト「オープニング編」(Filmora); from yasuo kishioka on V…

  3. keynote-animation02

    トランジションエフェクトのアニメーション(Keynote Ani…

    【Keynote】をプレゼンテーション用としての利用以外に、ネット上などで掲載をするための動画作…

  4. filmora-pho013-01

    トランジション「ベーシック編5」(Filmora)

    トランジション「ベーシック編5」(Filmora); from yasuo kishioka o…

  5. okakishi-chaya_img05

    中面3ページにインタラクションとライトボックスを設定(webfl…

    架空サイト【岡岸茶屋】に「お店の紹介」「甘味メニュー」「おみやげ」ページを作成。お店の紹介ページ…

  6. xd001

    バージョン13.0になって、ようやく取り組む(Adobe XD)…

    世の中に登場したから中々、具体的な使い道が見つからず取り組んでいなかったのですが、先日のAdob…

  7. webflow004-01

    Div Blockの使用(webflow)

    サイト制作を進めながら学習したことを書いていきます。今回はの紹介になります。は、他の要素…

  8. ch-lipthink01

    シーンオーディオからリップシンクを計算(Adobe Charac…

    Character Animaterを試作品を作りながら学習中 !!「タイムライン/シーンオーデ…

PAGE TOP