【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

【jQuery】スマホで擬似クラスのhoverを有効にする3ステップ

【jQuery】スマホで擬似クラスのhoverを有効にする3ステップ

jQueryを使いスマホでhoverを効かせよう

8月末から9月にかけて連続して台風がやってきています。残暑と重なり蒸し暑い日々が続いていますが、体調などは崩されてないでしょうか?サポート部の本田です。

さて、いきなりですがCSSなどで実装される擬似クラスの、【hover】って聞いたことありませんか?カーソルなどが乗った際に、色を変えたり画像を切り替えたりできる疑似クラスです。

しかしこの【hover】、通常ではタッチスクリーンでは効かずカーソルが乗った際にしか動作せず、モバイルでのインターネットアクセスがPCより多いこの時代においては、普通に実装してはあまり意味がありません。。

本日は、その【hover】をスマホでも実装する方法をご案内します。

動きはこちらのデモサイトで確認できます。(スマートフォンで見てください)

以下、実装のためのステップとコードをご紹介します。

ステップ1:HTMLの実装

まずはHTMLです。ECサイトの商品カテゴリの表示を想定してカテゴリという文言を入れています。

<ul>
<li><p>カテゴリ1</p></li>
<li><p>カテゴリ2</p></li>
<li><p>カテゴリ3</p></li>
</ul>

ステップ2:CSSの実装

次にCSSです。

ul {
    text-align: center;
    margin-top: 30px;
}
 
li {
    display: inline-block;
    margin: 0 12px;
    width: 93%;
}
 
p {
    background-color: black;
    border: solid 1px white;
    border-radius: 4px;
    color: #FFF;
    display: block;
    width: 100%;
    line-height: 44px;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: (0,0,0,0);
    cursor: pointer;
}
 
.hover {
    background-color: #F90;←hoverした際の色の設定
    border: solid 1px #FC0;
}

ステップ3:jQueryの実装

最後にjQueryの実装です。タッチした際(touchstart)にpタグに対してhoverというクラスを付与しタッチが離れた際(touched)にhoverというクラスを削除するという動きになります。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
    $( 'p')
      .bind( 'touchstart', function(){
        $( this ).addClass( 'hover' );
    }).bind( 'touchend', function(){
        $( this ).removeClass( 'hover' );
    });
});
</script>

終わりに

スマートフォンでサイトを見ている際に、リストメニューなどでどのリストを押しているのかわかりにくくなり、また押し間違いなどがあると思います。今回のようにタッチした際に色を変えるといった動きをつけることで、ユーザーがどのリストを押しているのかわかりやすくなります。

この動きは、文字を切り替えたり画像を切り替えたりといった動きにも応用することができますので、今後紹介していきたいと思います。

本田

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+