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

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

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

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

スマートフォンECサイトデザインの基本~スマートフォンCSS活用基礎(18)~

  • 2012.08.17
  • 2012.10.03
  • 技術
スマートフォンECサイトデザインの基本~スマートフォンCSS活用基礎(18)~
こんにちは、aishipの松井です。

前回の記事に引き続き、リンクリストのデザイン調整についてのご案内になります。

今までにご案内した中から、リンクボタンの作り方に関する記事と背景画像のサイズ指定に関する記事を利用して、このようなリンクを作成しました。

CSSはこんな風に書いています

a {
	background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#EFEFEF));
	background: -moz-linear-gradient(top, #FFFFFF, #EFEFEF);
	background-image: url(../img/arrow.gif);
	background-size: 13px 13px;
	-webkit-background-size: 13px 13px;
	background-position: 98% 50%;
	background-repeat: no-repeat;
	color: #333333;
	display: block;
	height: 40px;
	line-height: 40px;
	text-decoration: none;
}

これはAndoroid端末で見ると問題ないのですが、iPhoneで見るとグラデーションのエリアまでもが背景画像と一緒に小さくなっているのです。

矢印の画像を実寸大で作成してしまえば済む話なのですが、画像の質を下げたくない!という場合には、このような書き方をすることで解決できます。

[HTML]
<div><a href=”#”>リンクA</a></div>
<div><a href=”#”>リンクB</a></div>
<div><a href=”#”>リンクC</a></div>
 
[CSS]
div {
	background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#EFEFEF));
	background: -moz-linear-gradient(top, #FFFFFF, #EFEFEF);
	height: 40px;
}

a {
	background-image: url(../img/arrow.gif);
	background-size: 13px 13px;
	-webkit-background-size: 13px 13px;
	background-position: 98% 50%;
	background-repeat: no-repeat;
	color: #333333;
	display: block;
	line-height: 40px;
	text-decoration: none;
}

これは外側のdivに背景としてグラデーションをもたせ、aに矢印を背景画像として設定しています。背景を分けて別々の要素に指定することで解決させました。HTML上は一手間増えてしまいますが、書き足す内容もさほど多くはなく、比較的容易に行える方法です。

もし他にもっとシンプルでスマートな書き方があったら、こっそり教えて下さい(汗)

( スマートフォンECクラウド型ASP『aiship(アイシップ)』 松井 )

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