ECサイト・ネットショップで使える「css・javascript」まとめてみた
このページでは「ネットショップ運営の気になる備忘録」内で今までに紹介したcss、javascript、jQueryなど動作デモをまとめて掲載しています。たくさんの動作デモを掲載しているため、表示が重たくなる可能性もありますが動きがすぐに確認できた方が良いかと思い同じページ内に設置してみました。とりいそぎ、このページではCSSとjavascriptのデモを集めてみました。
各デモの動きを確認して気になるものがあれば、実装方法について詳細記事へのリンクも掲載しているので参考にしてみてください。
ネットショップで使えそうなCSS・Javascriptの動作サンプルをまとめてみた
ページ更新、作成する際にはHTMLの知識が必要です。ホームページ作成ソフトなど使えばタグについて意識せずに作成することはできますが、ネットショップ等の管理ツールから編集する際にはタグの記述が必要な場面も出てきます。そのため、必要最低限のHTMLタグについては覚える必要があります。
HTMLタグをある程度覚えて使えるようになると、次にCSSで見た目を整えたりできることが増えていきます。さらにjavascriptを使えばもっとできることの幅が広がっていきます。このブログでもネットショップで使えそうなCSSやJavascriptについて紹介していますが、このページでは過去に紹介したサンプルをまとめてみました。思ったより少ないな・・・というのがまとめてみた感想です。足りない内容など今後記事として紹介した内容も追加していきますので、ぜひ参考にしてみてください。
画像マウスオーバー時に別の画像に表示を切り替える方法
ショップに掲載しているバナーや商品画像をマウスオーバーした際に違う画像に表示を切り替える方法についてのサンプルです。
CSSでのサンプル
javascriptでのサンプル
上記記事ではCSS、javascriptそれぞれでの実装方法を紹介しています。
画像のマウスオーバー時にランダムに画像切り替える方法
さきほどの画像を切り替える方法はあらかじめ決めた画像にしか、切り替えることが出来ませんでしたが、次に紹介するサンプルは、マウスオーバー時にあらかじめ準備した複数の画像の中から１つの画像にランダムに切り替わります。
マウスオーバー時にランダムに画像を変えるサンプル
上記の記事では１ページ内で複数個所利用する方法も紹介しています。
画像マウスオーバー時の見せ方いろいろCSSのみでもかっこいい
続けて画像のマウスオーバーに関する内容ですが、CSSだけでも見せ方が色々実装することが出来ます。まずは、下記のサンプルにてマウスオーバーしてみてください。
透過させる・半透明にする
枠線をつける
縦・横の画像サイズを変える
位置をずらす
角度をつけて傾ける
角丸にする
円・楕円にする
複数の組み合わせ：枠線をつけて、透過させて、角丸にする
アニメーションさせながら切り替える
上記記事にサンプルソースを掲載しています。
ページを読み込む度に表示する内容をランダムに変える方法
ページを読み込む度に表示する内容をランダムに変えたいことがあるかもしれません。
リロードボタンを押すごとにランダムに表示内容が変わります。このサンプルでは、5つの候補から3つをランダムに表示しています。
上記記事にサンプルソースを掲載しています。
特定の期間、特定の曜日、特定の時間帯だけ表示する方法
特定期間だけ開催されるイベントや毎週土曜日のタイムセールといった際に、バナー、イベントページへのリンクなど掲載する情報を書き換えて更新するのは非常に手間です。
特定の曜日だけ表示する方法
上記記事にサンプルソースを掲載しています。時間帯を組み合わせたサンプルもあります。毎週土曜日の19：00から22:00はタイムセールを開催など
楽天のスーパーセール、お買い物マラソンといった特定の期間だけ表示する方法は下記記事を参考にしてみてください。
あらかじめ開始日時、終了日時がわかっているものは、余裕があるタイミングで設置しておくと楽かもしれません。
それでも手作業で更新するという場合は、下記記事が参考になるかもしれません。
カウントダウン表示の実装方法について
イベント開始、終了までをカウントダウンして表示する方法です。
上記記事にてサンプルソースを掲載しています。
画像に吹き出しを重ねて表示する方法
並んだ画像の中からワンポイントで目立たせたい場合に使える方法です。
上記サンプルでは、すべてに吹き出しをつけていますが、目立たせたい画像だけに吹き出しをつける方が良いかもしれません。
上記記事にてサンプルソースを掲載しています。
テキストを目立たせたいなら蛍光ペン風の表示
テキストを目立たせたい時に使えそうな方法として蛍光ペンで線を引いてあるように見せる方法です。
1.蛍光ペンで線を引いた風
2.蛍光ペンで線を引いた風
3.蛍光ペンで線を引いた風
蛍光ペン風の実装方法は上記記事
CSS・javascriptのみでタブ表示を実装
ネットショップでよく見かけるタブ表示です。jqueryプラグインなどを使えばタブ表示を実装することもできますが外部ファイルなど準備する必要が出てきます。このサンプルはCSSとJavascriptでの実装なので1つのファイルで簡潔させることも可能です。
javascript・cssで続きを表示・見るの実装方法
コンテンツの一部を表示しておいて、「続きを見る」「もっと見る」といったリンク、ボタンをクリックしてもらいその先の情報を見てもらうコンテンツの実装方法について調べてみました。シンプルに別ページのリンクとしてページを切り替える方法が一番シンプルですが、ページの移動が発生してしまいます。そのため、再度ページ情報の読み込みが必要になり回線状況によっては待ち時間が発生します。
できれば、さくっと続きの情報を表示したいのでここでは、同一ページ内で続きの情報を表示する方法についての解説となります。
検索・問合せフォームのplaceholder属性 CSSやJavascriptでアニメーションも可能
placeholder属性って何？って方もいるかもしれませんが、検索窓や問い合わせフォームの入力部品にヒントを表示するための仕組みです。通常は、動きもない状態なのですが、scriptでアニメーションを付けることができます。
実証法などについての詳細は上記記事をご確認ください。
画像を振り子のように動かす方法
使う場面は限られてしまいますが、見せ方としては面白いのではないでしょうか。実はこれCSSのみで実装することができます。
上記記事にてサンプルソースを掲載しています。
TABLEデザイン(CSS)の参考
TABLEタグを使って表形式でレイアウト、コンテンツを配置することもあるかと思います。そんな時に参考になるのが下記の記事です。かっこいいTABLEデザインやシンプルなTABLEなど紹介されている記事をまとめています。
上記記事を参考にしてみてください。
楽天市場に特化したCSSについて
楽天市場に特化したCSSについての記事もありますので参考にしてみてください。
ファイルを修正したのに反映されないって時の対処方法
楽天に限ったことではありませんが、CSS、javascript等などを修正してファイルをアップロードしてもキャッシュに残ってしまい修正内容が中々ページが反映されないことがあります。そんな時にすぐに修正内容を確認できる便利な方法があります。
Yahooトリプルの場合は、仕様上アップロードしてから反映されるのにタイムラグがありますので、そちらも注意して下さい。
jQueryのデモについてまとめたページは下記からどうぞ
Webサービス・ツールについてまとめたページは下記からどうぞ
