スマートフォンっぽいUIを、JQueryを使わずに作ってみる3

みたいなボタンを作成しました。

指の大きさの制約を受ける
・Webとスマホを比較した場合、最大の違い。
・ピクセル単位でクリック位置を制御できるマウスポインタと違い、指は大雑把にしかタップ位置を指定できない。
・このためAppleはボタンの最小サイズとして44pxというガイドラインを作っている。
・視覚的に44px以下のボタンも実際のヒットエリアは大きめにする。

と紹介されており、スマフォ用のボタンをつくるときには最低限44pxが必要みたいなのですが、サイトデザインの都合上、どうしても44px以下のボタンを作らねばならぬのだ。。。。

ってときのために、

・視覚的に44px以下のボタンも実際のヒットエリアは大きめにする。

を、HTMLで書いてみました。

<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル3</title>
<meta name="viewport" content="width=320px">
<style type="text/css">
a.button_link_small {
	display:block;
	margin:10px auto;
	width:70%;
	text-align:center;	
	text-decoration:none;
}

a.button_link_small span {
	display:block;
}
span.button_wrapper {
	line-height:50px;
	height:10px;
}

span.button_name {
	line-height:30px;
	height:30px;
	color:gray;
	text-shadow: white 0px -1px 1px;
	font-weight:bold;
	font-size:15px;
	-webkit-border-radius:7px;
}

.yellow {
	background: -webkit-gradient(linear, left top, left bottom, from(#ffff99),  color-stop(0.50, #ffff99), color-stop(0.51, #ffd700), to(#ffd700));
	border: solid 3px #ffd700;
}

</style>
<body>

<a class="button_link_small" href="01.html">
	<span class="button_wrapper ">&#160;</span>
	<span class="button_name yellow">ボタン1</span>
	<span class="button_wrapper ">&#160;</span>
</a>

</body>
</html>

ヒットエリアの余白部分は、spanに空白行を入れることで誤魔化しています。

ボタン自体のサイズは30pxですが、余白が上下に10pxごとあるので、タッチエリアは実質50pxとなっています。