webflow011-01

STUDY

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

webflowを使用してのサイト制作を進めながら学習したことを書いていきます。
今回はブレークポイントで画像のサイズを変更する方法を紹介します。

◎変更したい画像を選択した状態でDisplay Setting「Block」を選択し、画像サイズを変更する。

webflow011-02

◎サンプルではデスクトップとスマホの横向きは「Block」を選択し、
タブレットとスマホの縦向きは「Inline Block」を選択。

■Display Setting
 ・Block
 ・Inline Block
 ・Inline
 ・None

▽デスクトップ
webflow011-03

▽タブレット
webflow011-04

▽スマホ横
webflow011-05

▽スマホ縦
webflow011-06

▽サンプル
live-preview

表示設定(ブロック、インラインブロック、インライン、フレックス) – Webデザインチュートリアル

Webflow(およびWebデザイン全般)では、要素を設定する表示設定がレイアウト内の動作を決定します。一般的に言えば、どの表示設定が使用されているかに応じて、要素は互いの上に積み重なり(縦に)積み重なるか、横に並べて(水平に)配置されます。美しさは、要素の表示を変更できることです。このビデオでは、利用可能な5つの表示設定について説明します:1.ブロック2.インラインブロック3.インライン4.フレックス5.なし———- Webflow:

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

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

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

不透明度の設定(webflow)次のページwebflow012-01

関連記事

  1. webflow001-01

    STUDY

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

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

  2. filmora-007

    Filmora

    古い映画風の効果を試してみよう!(Filmora9)

    Filmora9で動画編集!!エフェクト/古い映画を使うと映像に1…

  3. keynote-animation02

    Keynote Animation

    トランジションエフェクトのアニメーション(Keynote Animation)

    【Keynote】をプレゼンテーション用としての利用以外に、ネット…

  4. filmora034-01

    Filmora

    旅の素敵な動画を飾る10種類のオーバーレイ(Filmora)

    旅の素敵な動画を飾る10種類のオーバーレイ(Filmora) fr…

  5. ch-lipthink01
  6. Chocolate-Pack

    Photoshop

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

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

  1. minimal-titles-img

    After Effects

    Filmstocksが提供しているAfter Effectsのエフェクト「Min…
  2. animated-text01

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

    74種類のテキストアニメーションをAdobe Museで表現(Adobe Mus…
  3. webflow011-01

    STUDY

    ブレークポイントで画像のサイズを変更する(webflow)
  4. carousel-image-slider01

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

    カルーセル画像スライダ2.0(Adobe Muse CC)
  5. slide-reel01

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

    フルスクリーン表示のスライドショー(Adobe Muse)
PAGE TOP