箕面市のホームページ作成なら「エムズウェブワークス」で。
見積もりは無料
参考パーツ 画像・写真などのを扱うパーツ

画像・写真などのを扱うパーツ

画像の拡大や並べ替えなど、画像を扱うパーツの例


パターン1:サムネイル画像をクリックすると画像が拡大表示される
各画像の拡大表示を行います

  • ship01
  • ship02
  • ship03
  • ship04
  • ship05

【使いどころ】商品の説明など


パターン2:大きさが異なる画像をブロック(タイル状)に並べ替える

image06
image01
image02
image04
image05

ウィンドウのサイズに合わせて自動的に画像の配置も変えてくれます。今ご覧になられているブラウザの横サイズを縮めてみてください。画像の並びがアニメーションによって変わります。

*スマートフォン環境では上手く動作が行われないものもあります。