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. filmora-pho013-01

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

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

  2. webflow001-01

    ナビゲーションの設置。(webflow)

    サイト制作を進めながら学習したことを書いていきます。◎Componets/Navbar を画…

  3. webflow018-01

    セクションの説明(webflow)

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

  4. filmora-pho008-01

    動画を分割表示させてドラマ仕立てに(Filmora)

    動画を分割表示させてドラマ仕立てに(Filmora); from yasuo kishioka …

  5. photoshop-art005

    Photoshop Art 005

  6. webflow017-01

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

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

  7. filmora018

    ファッションコレクション/オーバーレイ10種(Filmora)

    ファッションコレクション/オーバーレイ10種(Filmora); from yasuo kish…

  8. filmora-001

    63種類のモーション効果を試してよう!(Filmora9)

    Filmora9で動画編集!!☆63種類あるモーションの効果を確認するためのサンプル動画を作成し…

Adobe Muse

Adobe Museならスピードアップ&コストダウン

My Portfolio

kishioka-design.myportfolio.com
PAGE TOP