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. webflow007-01

    地図の設置(webflow)

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

  2. div_block_img01

    Divブロックの説明(webflow)

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

  3. container_img01

    コンテナの説明(webflow)

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

  4. okakishi-chaya_img01

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

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

  5. filmora-pho016-04

    ファッションコレクション/トランジション18種(Filmora)…

    ファッションコレクション/トランジション18種(Filmor; from yasuo kishi…

  6. filmora-pho022-01

    ビューティーコレクション/タイトル30種(Filmora)

    ビューティーコレクション/タイトル30種(Filmora); from yasuo kishio…

  7. webflow011-01

    ブレークポイントで画像のサイズを変更する(webflow)

    webflowを使用してのサイト制作を進めながら学習したことを書いていきます。今回はブレークポイ…

  8. photoshop-gallery004

    Photoshop Gallery 004

PAGE TOP