div_block_img01

STUDY

Divブロックの説明(webflow)

webflowを使用してのサイト制作を進めながら学習したことを書いていきます。
今回は「Divブロック(Div Block)」について説明します。

Divブロックは、サイト構築の際に使用する最も基本的で汎用性の高い要素です。
セクション、コンテナ、ボタンはすべて、特定のプロパティを持つDivブロックです。
サンプルでは、配置したDivブロックの幅を50%(PC以外は70%)に設定。ベースに白を引いて半調に。
その中に文章と写真を配置。ラインはDivブロックを高さ1pxで表現。

div_block_img02

▽サンプル
live-preview

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

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

columns_img01カラムの説明(webflow)前のページ

トランジションの設定(webflow)次のページtransitions_img01

関連記事

  1. webflow013-01

    STUDY

    フィルタの設定(webflow)

    webflowを使用してのサイト制作を進めながら学習したことを書いてい…

  2. okakishi-chaya_img01

    STUDY

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

    前回まで、制作方法を紹介するようなページを掲載してきましたが中々、…

  3. xd008

    Adobe XD

    自動アニメーションでスライドを動かしてみる(Adobe XD)

    バージョン13.0から搭載された「自動アニメーション」を使って、1…

  4. zakka2251-Can

    Photoshop

    飲料水の缶のモックアップ画像をPhotoshopで作成

    飲料水の缶のモックアップ画像をPhotoshopで作成しました。画…

  5. webflow003-01

    STUDY

    基本要素の設置(webflow)

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

  6. filmora-pho010-01

    Filmora

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

    トランジション「ベーシック編2」(Filmora); from y…

  1. social-sharing01

    Adobe Muse CCを使ったホームページ制作

    ソーシャルシェアボタンの掲載(Adobe Muse)
  2. studio14-01

    STUDIO

    4×4=16マスで画面全体を構成するトップページのレイアウトサンプル
  3. 26-menu-styles

    Adobe Muse CCを使ったホームページ制作

    メニューのデザインに動きのあるちょっとしたアクセントを(Adobe Muse)
  4. nav-system_05

    Adobe Muse CCを使ったホームページ制作

    簡単でバラエティ豊かなナビゲーションシステム(Adobe Muse)
  5. ch-lipthink01

    Character Animater

    シーンオーディオからリップシンクを計算(Adobe Character Anim…
PAGE TOP