menu

タブの使用(webflow)

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

◎Components/[Tabs]をドラッグして、画面上に配置します。

webflow009-02
webflow009-03

◎[Tabs Menu]と[Tabs Content]にパートが分割されています。

webflow009-04

◎[Tabs Menu]の編集作業
・タブの名称はText BlockをWクリックして編集する。
webflow009-05
・タブの数は「+」を選択して増やせます。
webflow009-06

◎[Tabs Content]の編集作業
・コンテンツを配置したい[Tab Pane]を選択する。
webflow009-07
・テキストや画像を配置して編集していく。
webflow009-08

◎[Tabs Menu]のデザインを変更する。
・タブを選択した状態で、Selector:で名称を設定。(例)Tab Link
・残り2つについても同名称を選択する。
・デフォルト、マウスオーバーなどそれぞれの状態の設定を行う。

webflow009-09
webflow009-10
webflow009-11

▽サンプル
live-preview

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

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

webflow008-01リッチテキストの使用(webflow)

webflow010-01ライトボックスの使用(webflow)

関連記事

  1. Chocolate-Pack

    チョコレートバーのパッケージモックアップ画像をPhotoshop…

    チョコレートバーのパッケージモックアップ画像をPhotoshopで作成しました。画像の選択で拡大…

  2. filmora035-01

    旅の素敵な動画を飾る28種類のタイトル(前編)(Filmora)…

    旅の素敵な動画を飾る28種類のタイトル(前編)(Filmora) from KISHIOKA.D…

  3. simpleshow01

    simpleshow試作その1(Adobe Premiere P…

    Adobe Premiere Pro CC/Adobe After Effects CCの学習用に…

  4. filmora-pho026-03

    ビジネスコレクション/トランジション11種(Filmora)

    ビジネスコレクション/トランジション11種(Filmora); from yasuo kishi…

  5. filmora018

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

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

  6. filmora-010

    ホラー映画風のタイトルを演出してみよう!(Filmora9)

    Filmora9で動画編集!!シネマオープナーVol2から「Hit Series Pack Op…

  7. photoshop-art005

    Photoshop Art 005

  8. okakishi-chaya_img01

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

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

PAGE TOP