tableの属性cellspacing="0", cellpadding="0"をCSSで対応する

CSSによるレイアウトが普及して、table要素をレイアウト用途に使うことは少なくなったけれども、純粋な表として使うことはなくならない。

で、表とセルの隙間をなくすために<table cellspacing=”0″ cellpadding=”0″>なんてするんですが、CSSでコントロールしたほうが後々修正は楽。このやり方をすぐ忘れてしまうのでメモ。

cellspacing=”0″ cellpadding=”0を使った例

<table cellspacing="0" cellpadding="0">
	<tr>
		<th>見出し</th>
		<td>コンテンツ</td>
	</tr>
	<tr>
		<th>見出し</th>
		<td>コンテンツ</td>
	</tr>
</table>

cellspacing=”0″ cellpadding=”0″を使わない例

<style type="text/css">
table {
	border-collapse: collapse;
}
</style>

<table>
	<tr>
		<th>見出し</th>
		<td>コンテンツ</td>
	</tr>
	<tr>
		<th>見出し</th>
		<td>コンテンツ</td>
	</tr>
</table>

border-collapse: collapse;一発で隙間がなくなる。楽。多くの場合隙間は必要ないので、デフォルトで入れておき、例外として、cellpadding=”2″等の0以外のケースを対応する。これをCSSでやろうとすると下の通り。

table {
	border-collapse: separate;
	border-spacing: 2px;
}

ただ残念なことに、border-spacingはIEが対応していないので実質使えない。そういう時はどうするか。素直に<table cellspacing=”2″>としてやるのが正解。

Exciteが100円分のSkypeクーポンプレゼント中

Skypeと業務提携したExciteが先着2,000名限定で、100円分のSkypeクーポンをプレゼントしています。(Excite & Skype : 先着2,000名様限定!Skypeクーポンプレゼント!)

エキサイトIDを持っていれば、さくさくっとクーポンコードを発行してもらえます。

発行されたクーポンコードをSkypeクーポン・プリペイドカードの利用ページで有効にすれば、100円分の通話ができるようになりました。

それにしても、なかなか動きが定まらないSkype。Exciteと提携する前はLivedoorと提携していたし、Skype自身はと言うと、Ebayに買収されても有効活用されていなかったりと、事業として収益をあげるのがまだまだ難しいようです。

携帯分野へ顔を出して、Skype携帯出したり、Fonと連携してみたりしているみたいですが、いかんせんWiFiネットワークの貧弱さが目立ちすぎる。IM分野と言っても、マイクロソフト、AOL、ヤフー、Google等々、それ単体で事業をしていることろはあまりないですし。

ユーザーとしては、インターネットにさえつながっていれば無料で通話、ビデオ通話も可能というのは、非常にありがたいことです。この前も、実家とビデオ通話したしね。グループチャットも共同作業するのにとても便利。

財政基盤が危なくなっても、公共インフラとして運用してもらいたい。

アカチャンホンポ楽天市場店 送料無料キャンペーン

12/10(月)いっぱい、楽天市場のアカチャンホンポで送料無料キャンペーンが実施中です。

うちでも生まれたばっかりなので、新生児用のおむつとおしりふきコットンをごっそり購入。実店舗が近くにない訳じゃないんですが、なかなか外に長い間出られない状態なので助かりますね。

一つ余談。検索するときに、アカチャンホンポの正しい名称が分からなかったので悩んでしまった。アカチャン本舗なのか、あかちゃん本舗なのか、それとも、赤ちゃん本舗なのか。結局どのキーワードでも正しいところか、ヒントを得られたので問題なかったですが。

インターネットでは、こういう検索キーワードのブレももきっちり拾えるようにSEO, SEMをしっかりですね。

アスクル個人向けECサイト「ぽちっとアスクル」のデザイン

オフィスの事務用品からパソコン周辺機器、医療用品まで当日、もしくは翌日までに配達してくれるアスクル。そのアスクルが個人向けサービス「ぽちっとアスクル」が開始されていました。

 「ぽちっとアスクル」は、企業や店舗、医療機関など法人を中心にサービスを展開するアスクルが手がける個人向けのECサイト。アスクルが取り扱う3万点を超える商品を個人決済で購入したいなどの要望に応えスタートした。

 アスクルは、インターネットが持つコミュニケーション機能に早くから注目し、1998年にいちはやく個人向けネットショップ「ポータルアスクル」をオープンしていた。今回、よりシンプルで使い勝手のよいデザインへと変更し、ユーザービリティの向上を図った。今後は、同サイトを軸に個人向けの商品・サービスの拡充を進めていく。
MarkeZine:◎ECサイトデザインもGoogle風がトレンド?アスクル、「ぽちっとアスクル」をオープン

記事にもある通り、こんなデザインになっています。

ぽちっとアスクル

個人用とはいえ、かなり思い切ってそぎ落としてきました。Amazon楽天市場等とは設計思想が全く違い、リリースにある通り「サーチ&クイック・オーダー」に徹しています。

トップページで検索するとこんな画面。
ぽちっとアスクル 検索結果ページ

商品ページはこんな画面。
ぽちっとアスクル 商品ページ

カートにいれるとこんな画面、
ぽちっとアスクル カート
※『「もうちょっとで送料無料にできる」という方にオススメの、金額別おすすめ小額商品』がニクい

トップページが検索窓だけというECサイト。日本のほとんどのユーザーが、それほど検索に強くない&Googleに慣れていないことを考えると、最終的にどう評価されるのか気になります。さらに、インターネット上で商品を購買するという行動を考えると、確かに検索して商品に行き当たってというケースは多々あると思いますが、それは検索エンジン(つまり日本だとYahoo!検索)を利用するということ。ショップの検索エンジンを最初の段階で利用することは、多くないのではないかと想像しています。

トップページに関しては、「どうだろうなぁ」と斜めから見ていますが、それ以外のデザインは、とても気持ちよく感じました。トップページも検索に特化しているだけで、目的さえしっかりしていれば使えるんですが。。。ものを買うときにここで検索するか、と考えると、まだ想像できません。