ソーシャルゲームで、CSS3を利用したよくありそうなパーツ

スマートフォン向けのソーシャルゲームでよくあるCSS3を利用したパーツを再現してみました。かなり、唐突なんですけれど。

行動ポイントとか、HPのゲージ

ソーシャルゲームを見ていると、行動ポイント（呼び方は様々ですが）があります。
このポイントが無いと、ゲームが出来ません。
行動ポイントを示すために、ゲージのようなものを表示しています。

HTMLとして表すなら...ってdiv要素かなあ。
CSSでのグラデーションは、webkitだけ対応してみました。
角丸は8pxと書きましたけれど、%でも指定可能なので、そちらの方が画面に違いを吸収できて良いと思います。

<div class="hp_max"><div class="hp"></div></div>

.hp_max
{
-webkit-border-radius: 8px;
margin: auto;

height:1em;
width:90%;
background: -webkit-gradient(linear, left top, left bottom,
	from(rgba(33, 33, 33,1)),
	to(rgba(181, 181, 181,1))
);
}

.hp
{
-webkit-border-radius: 8px;

height:1em;
width:50%;
background: -webkit-gradient(linear, left top, left bottom,
	from(rgba(191, 220, 252,1)),
	to(rgba(73, 127, 188,1))
);
}

iPhone風ボタン

大きめのボタンが押し易いので、iPhone風ボタンがよく出てきます。

HTMLが良くないのです。p要素で囲むとか...ね。フィーチャーフォンの移植のことが多いのかa要素をそのまま置いてあることが多いです。そこで、a要素に対してclass指定することでiPhone風ボタンにします。
今回は、赤いボタンと、黒いボタンを用意してみました。

<a href="#" class="button_a">ボタンです</a>
<a href="#" class="button_b">ボタンです</a>

.button_a{
display: block;
width:90%;

text-align:center;
text-decoration: none;

margin: 0 auto 1em auto;
padding:0.6em;

border:2px solid white;
-webkit-border-radius: 8px;

background: -webkit-gradient(linear, left top, left bottom,
	from(rgba(255, 00, 00, 1)),
	color-stop(47%, rgba(255, 00, 00, 1)),
	color-stop(52%, rgba(180, 00, 00, 1)),
	to(rgba(180, 00, 00,1))
);

}

.button_b{
display: block;
width:90%;

text-align:center;
text-decoration: none;

margin: 0 auto 1em auto;
padding:0.6em;

border:2px solid #e7e7e7;
-webkit-border-radius: 8px;

background: -webkit-gradient(linear, left top, left bottom,
	from(rgba(66, 66, 66, 1)),
	color-stop(47%, rgba(66, 66, 66, 1)),
	color-stop(52%, rgba(44, 44, 44, 1)),
	to(rgba(44, 44, 44, 1))
);
}

パネル？

呼び方がわからないのですが、アイコンなどを利用してパネル風のインタフェースを見たことがあります。ゲームが複雑になると、メニューが多いのでまとめるために作ったのかも。

<table class="panel">
	<tr>
		<td>
あれこれ	
		</td>
		<td>
あれこれ	
		</td>
		<td>
あれこれ	
		</td>
	</tr>

	<tr>
		<td>
あれこれ	
		</td>
		<td>
あれこれ	
		</td>
		<td>
あれこれ	
		</td>
	</tr>
</table>

.panel {
border-collapse: collapse;
border:1px solid #666666;
width:100%;
}

.panel td{
text-align:center;
border:1px solid #666666;
padding:0.6em;
background-image:
-webkit-gradient(linear, left top, left bottom,
	from(rgba(33, 33, 33, 1)),
	to(rgba(66, 66, 66,1))
);
background-repeat: no-repeat;
}

タブ

タブ切り替えは、XHTML/CSSで、IE6対応もと言われると、「ああ、ズレた〜」という事が多いです（と思っているのは、ワタシだけかもしれません）。

不勉強で初めて知ったんですが、displayにinline-blockというのがあるんですね。
inline要素でありながら、blockの性質も持つというもの。横並びにblock要素を並べたい時に、floatしなくてもいい！となります。

<ul class="tabs">
<li class="tab">タブです</li>
<li class="tab on_tab"><a href="#">タブですよ</a></li>
</ul>
<div class="tabs_bottom_body">
</div>

.tab{
display: inline-block;
text-align:center;

padding:0.4em 1em 0.5em 1em;
margin:0 0.5em 0 0.5em;

-webkit-border-radius: 8px 8px 0 0;

background: -webkit-gradient(linear, left top, left bottom,
	from(rgba(99, 99, 99,1)),
	to(rgba(44,44,44,1))
);
}

.on_tab{
background: -webkit-gradient(linear, left top, left bottom,
	from(rgba(0, 93, 192,1)),
	to(rgba(44,44,44,1))
);
}

.tabs_bottom_body{
background: -webkit-gradient(linear, left top, left bottom,
	from(rgba(44, 44, 44,1)),
	color-stop(5%, rgba(20, 20, 20, 1)),
	to(rgba(0, 0, 0,1))
);
}

ページャー

ソーシャルゲームで、ページャーが使われていることは多いです。
アイテムが増えてくると、大体ページャーが必要です。
ところが、スマートフォンだと、画面横が意外と狭いのと、タッチしにくいというのがあって、ページャーは困っているゲームが多いようです。
パターンがあって

• 前/次とだけ表示
• 前/次と、現在ページ、全体ページ数を表示
• 最初の5ページぐらいは直接リンク

というのが多いようです。というわけで、場合で違いそうです。

おまけ

iPhoneのメールなどで使われている赤い丸に白抜きの数字の表示。
結構使われていると思うのですが、配置が難しいのでした。

<span class="number">12</span>

.number {
font-size: 80%;
display:inline-block;
border:2px solid white;
border-radius: 50%;
padding:0.4em;

position:absolute;
top: -5px;
left:10%;
z-index: 10;

background: -webkit-gradient(linear, left top, left bottom,
	from(rgba(255, 00, 00,1)),
	to(rgba(100, 00, 00,1))
);

}