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. xd005

    自動アニメーションで目を左右に動かしてみる(Adobe XD)

    バージョン13.0から搭載された「自動アニメーション」を使って、イラストの目をボタンで左右に動か…

  3. dimension001

    コーヒーカップを作る(Adobe Dimension CC)

    Adobe Dimension CCを使って、コーヒーカップのシーンを作りました。コーヒーカップ…

  4. okakishi-chaya_img01

    架空のサイトを制作開始(webflow)

    前回まで、制作方法を紹介するようなページを掲載してきましたが中々、これが飽いてきまして(笑)、や…

  5. webflow013-01

    フィルタの設定(webflow)

    webflowを使用してのサイト制作を進めながら学習したことを書いていきます。今回はフィルタの設…

  6. keynote-animation03-04

    Keynote Animation Sample03(Keyno…

    企業などの解説動画作成に【Keynote】が使用されるケースが増えているということなので、30秒…

  7. webflow01

    『Webflow』始めました。(webflow)

    Muse CCの開発が終了した事もあり、将来的なことを考えて別の制作方法を探していたところ『Webf…

  8. columns_img01

    カラムの説明(webflow)

    webflowを使用してのサイト制作を進めながら学習したことを書いていきます。今回は「カラム(C…

PAGE TOP