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

よろしければこちらもご覧ください

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

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

[html] <br clear="all" />

[html] <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(アイシップ)』 松井 )

=============================
掲載元のブログではわかりやすい画像つきで公開しています。
■aishipスマートフォン&モバイルEC事例・ノウハウ集
http://www.aiship.jp/knowhow/archives/1892
=============================

よろしければこちらもご覧ください
この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

Web業界の転職情報

もっと見る
Sponsored by

今日の用語

GTA
社会調査などにおける質的調査データなどの分析手法の1つ。インタビューなどによって ...→用語集へ

連載/特集コーナーから探す

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

data-sprite-position-y="250" data-image-original-width="200" data-image-original-height="125">株式会社ブレインパッド株式会社サイバーエージェント株式会社フレームワークスソフトウェア
[SPONSOR]
株式会社キノトロープ株式会社アイレップユーザーグラム富士通株式会社Sitecore株式会社ミツエーリンクス