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

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

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

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

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

  • 2012.02.17
  • 2012.03.23
  • 技術
スマートフォンECサイトデザインの基本~スマートフォンCSS活用基礎(12)~

スマートフォンサイトの制作を進めている時、回りこみの解除に悩んだり戸惑ったりしたことはありませんか?
私事ですが、仕事ではじめてHTMLやCSSを使ってサイト制作をやり始めた頃、回り込みの解除の記述に悩んだことがしばしばありました。

以前からよく見かける方法として

 <br clear="all" />
 <div class="clear"></div>
[CSS]
div.clear {
	width: 1px;
	height: 1px;
	clear: both;
}

などの記述方法がありますが、いずれの方法もHTML内に何らかの追加記述が必要になります。
CSS3の新ワザ、というわけではありませんがCSSだけでスマートに回り込みを解除する方法をご案内させていただきます。

PCサイトでよく見かけるレイアウトですが、上記のように左右にコンテンツを幅寄せしていた場合。
通常であれば左右のカラムの最後にHTMLでclear記述を追加するところですが、左右のコンテンツを囲むdivタグに「:after」という要素を持たせて、回り込みや幅寄せの解除を行ってみましょう。

[CSS]
div.kakomi:after {
	width: 0.1px;
	height: 0.1px;
	content: ".";
	font-size: 0.1em;
	line-height: 0;
	display: block;
	visibility: hidden;
	clear: both;
}

これは「.kakomi」というdivタグの後(after)に、幅寄せを解除できる見えない「.」を追加する、というような書き方をしています。このようにしていただくことで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
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+