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

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

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

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

CSS Media Queriesでレスポンシブにコンテンツを切り替える

CSS Media Queriesでレスポンシブにコンテンツを切り替える

Media Queries

最近はやりのワード「レスポンシブWEBデザイン」。いざ取り組もうと思っても実際には何をどう進めればいいのかさっぱりです。本記事ではレスポンシブWEBデザインでECサイトを制作することについて、注意点やアイデアなどをご紹介させていただきます。

前回の記事の最後に、コンテンツの表示/非表示の切り替え、異なる画像の表示の実現についてご案内しました。今回はコンテンツの表示/非表示の切り替えについてご紹介します。

Media Queriesで表示/非表示を切り替える

CSSのMedia Queries(メディアクエリ)については、過去に本ブログにてご紹介させていただきました。今回はこれを使って、コンテンツの表示/非表示の切り替えを実現したいと思います。

スマートフォンサイト制作のコツ:レスポンシブウェブデザイン
レスポンシブウェブデザイン制作で悩むブレイクポイントのまとめ

下記の例では、スマートフォンなど小型のモバイル端末では閲覧できず、PCやタブレットなどの大型モバイル端末では閲覧できるコンテンツを作成します。

1.任意のclassを作成

まずは任意のclassを作成し、(ここではclass名を「.spNone」としています) このclassに「display:none」を指定します。

<div class="spNone">こちらが消える予定</div>
2.CSSにMedia Queriesを記述

次にCSS内にメディアクエリを記述します。今回は横幅480px以下の端末では非表示にしたいと思います。

CSS

body {
       background-color: #FFFFFF;
       margin: 0;
       padding: 0;
}

#all {
       background-color: #FFFFFF;
       max-width: 800px;
       margin: 10px auto;
}

div {
       border: #000000 1px solid;
       margin: 10px;
       padding: 10px:
       background-color: #CCCCCC;
}      

@media screen and (max-width: 480px){
.spNone {       display:none;}
}

この
@media screen and (max-width: 480px){
というのは、アクセスしたスクリーンサイズが480px以下の時に以下のスタイルを適用するという指示です。

また以下のように記述することもできます。

@media only screen and (min-width: 480px)
    and (max-width: 768px){
        /* style */
}

こうすると、スクリーンサイズが 480px〜768pxの時のスタイルを指定することができます。

3.class名を指定

HTMLソース内に、小型のモバイル端末では見せたくないコンテンツに作成したclass名を指定します。

HTML

<body>

<div id="all">
       <div class="spNone">こちらが消える予定</div>
       <div>こちらは消えない予定</div>
</div>
</body>

操作は以上です。あとは実際にこのページへ複数の端末からアクセスしてみましょう。同じモバイル端末でも、縦にして見ると480px以下で、横にしてみると480px以上である場合は、該当のコンテンツを閲覧することが出来ます。

また、PCや大型のモバイル端末で閲覧させたくないコンテンツがある場合は、別のclass名を設けて同様の手順で非表示となるよう指定を行いましょう。

いかがでしたか? 今回の手順はCSSのみを利用するので比較的簡単に実現することができます。お手元の端末でぜひ試してみてくださいね。

”スマホで売れる”ためには必須の「レスポンシブ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
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+