menu

Div Blockの使用(webflow)

サイト制作を進めながら学習したことを書いていきます。
今回は[Div Block]の紹介になります。

[Div Block]は、他の要素まとめてグループ化し、
要素全体に設定を行って、使用します。

「サンプルでは、見出し・段落・ボタンをグループ化し、
背景に色設定を行った帯の天地・左右センターに配置させています。」

◎Layout/[Section]をドラッグして、スライドショーの下に配置する。
・[Section]を選択した状態で、Selector:に任意の名称を設定する。
・Display Settingの設定を行う。

webflow004-02
webflow004-03

◎Basic/[Div Block]をドラッグして、[Section]の中に配置する。
・[Div Block]を選択した状態で、Selector:に任意の名称を設定する。
・Display Settingの設定を行う。
・[Div Block]の中に見出し・段落・ボタンの要素を配置する。

webflow004-04
webflow004-05
webflow004-06

◎下記画面のようなレイヤー構造になります。

webflow004-07

▽サンプル
live-preview

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

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

webflow003-01基本要素の設置(webflow)

webflow005-01Link Blockの使用(webflow)

関連記事

  1. keynote-animation02

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

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

  2. filmora-pho029-01

    Filmoraで動画編集〜スピードコントロール(Filmora)…

    Filmoraで動画編集〜スピードコントロール(Filmora) from yasuo kish…

  3. filmora-pho011-01

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

    トランジション「ベーシック編3」; from yasuo kishioka on Vimeo.…

  4. Pillow01

    枕カバーのモックアップ画像をPhotoshopで作成しました。

    枕カバーのモックアップ画像をPhotoshopで作成しました。画像の選択で拡大表示されます。…

  5. okakishi-chaya_img05

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

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

  6. filmora-pho013-01

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

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

  7. webflow003-01

    基本要素の設置(webflow)

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

  8. filmora-pho006-01

    テキスト「エンディング編」(Filmora)

    テキスト「エンディング編」(Filmora); from yasuo kishioka on V…

PAGE TOP