webflow018-01

STUDY

セクションの説明(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)前のページ

コンテナの説明(webflow)次のページcontainer_img01

関連記事

  1. div_block_img01

    STUDY

    Divブロックの説明(webflow)

    webflowを使用してのサイト制作を進めながら学習したことを書いてい…

  2. filmora-pho003-01

    Filmora

    テキスト「タイトル編」(Filmora)

    テキスト「タイトル編」(Filmora); from yasuo …

  3. filmora-pho028-01

    Filmora

    8つのカメラシェイクエフェクト(Filmora)

    〜Filmoraで動画編集〜8つのカメラシェイクエフェクト(Fil…

  4. webflow009-01

    STUDY

    タブの使用(webflow)

    webflowを使用してのサイト制作を進めながら学習したことを書いてい…

  5. filmora-002

    Filmora

    15種類の海外映画・ドラマ風色調効果を試してよう!(Filmora9)

    Filmora9で動画編集!!色調の統一を行うために3D LUTと…

  6. angle-05

    Adobe XD

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

    レイアウトを行ったページを別ページで作成した多角形の領域に自動的に比率…

  1. webflow004-01

    STUDY

    Div Blockの使用(webflow)
  2. studio14-01

    STUDIO

    4×4=16マスで画面全体を構成するトップページのレイアウトサンプル
  3. filmora-pho017-02

    Filmora

    ファッションコレクション/フィルター10種(Filmora)
  4. animated-rollovers

    Adobe Muse CCを使ったホームページ制作

    イメージロールオーバー(Adobe Muse)
  5. carousel-gallery

    Adobe Muse CCを使ったホームページ制作

    メリーゴーランドギャラリー(Adobe Muse)
PAGE TOP