Blog

サンプルECサイトを作ってみました。~heightLineプラグインの使用~

弊社ではECサイトのシステムを開発し、サイトの制作も行なっていますが、
その関係で、ちょっとしたサンプルサイトを作ってみました。

完全に自分好みの色合い、レイアウトもいろんなサイトを見ていて、
やってみたいと思ったモノですが、
よろしければデモをご覧ください。

DEMO

jQueryを使用した部分について説明していきたいと思います。

ユーザー、ログイン、カートのアイコン部分のツールチップ

ロゴ下の各アイコンをホバーすると、
説明文がふわっと表示されます。

html

css

jQuery

ラインナップのカテゴリナビ,第二階層

html

css

jQuery

heightLineの使用方法

これは簡単で便利なプラグインでよく使用しています。
あるコンテンツの高さを揃えたい時に使用するプラグインです。

masonryといったプラグインをつかってレンガのように、並べるケースもありますが、
それだと見にくい、っていう場合にいいかと思います。

ここでは、商品の高さをすべて同じにし、レイアウトが崩れないようにしています。
(同じテキスト量なので、使わなくてもレイアウトは崩れませんが・・・)

使い方は、
headタグ内に、jQueryと、このプラグインを読み込みます。

あとは揃えたいコンテンツのclassにheightLineをつけるだけです。

例:

ひとつ縦が長いのがあると、それに合わせて他の縦も長くなるので、
空きが目立つ可能性もありますが・・・

以上、サイトについて簡単に説明させて頂きました。

もっとECサイトのサンプルを作ってまた披露できたらと思います。

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ