ソーシャルゲーム(だけとは限りませんが)で頻繁に使用されるスタミナや行動力、経験値などの数字で表現する場所に一緒に用いられるゲージの部分。
このようなものをしばらく作っていない為、作り方を忘れそうなので作り方を思い出しながら再確認しつつ備忘録としてメモ。

スポンサーリンク

まずは基本的なゲージ作成から。

1.divの中にdivを作ります。
2.外側のdivにはゲージの箱となる背景部分、内側のdivにはゲージの本体にあたる中身の部分を、それぞれ作ります。

サンプルページを表示

html

<ul class="gauge_wrap">
<li>
<div><div class="gauge_main" style="width: 80%;"></div></div>
</li>
</ul>
css

.gauge_wrap li > div {
	background: -moz-linear-gradient(top, #555, #222);
	background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#222));
	border: solid 5px #000;
	width: 300px;
	height: 32px;
}

.gauge_wrap .gauge_main {
	background: -moz-linear-gradient(top, #9FF, #0FF);
	background: -webkit-gradient(linear, left top, left bottom, from(#9FF), to(#0FF));
	height: 22px;
}

ゲージの本体にあたる中身の部分のwidthに関しては、cssで指定するのではなくタグにstyleとして指定しています。
これは、数字の増減が動的に起こるための対応です。

ソーシャルゲームを意識したゲージの作成

その1.ゲージタイトルを付け、並列に2つを並べる

AP(アクションポイント)とEXP(経験値)という2つのゲージを並列にしています。
また、APやEXPのゲージタイトルの横についている三角形の部分は擬似要素(:after)で作っています。

サンプルページを表示

html

<ul class="gauge_wrap2">
<li>
<div class="gauge_ttl"><span>AP</span></div>
<div class="gauge_bg"><div class="gauge_main" style="width: 100%;"></div></div>
</li>
<li>
<div class="gauge_ttl"><span>EXP</span></div>
<div class="gauge_bg"><div class="gauge_main gauge_exp" style="width: 60%;"></div></div>
</li>
</ul>
css

.gauge_wrap2 li {
	position: relative;
	display: inline-block;
}

.gauge_wrap2 li:first-child {
	margin-right: 10px;
}

.gauge_wrap2 .gauge_ttl {
	background-color: #000;
	width: 82px;
}

.gauge_wrap2 .gauge_ttl:after {
	content: "";
	position: absolute;
	left: 82px;
	width: 0;
	height: 0;
	border: 22px solid transparent;
	border-left: 22px solid #000;
	border-bottom: 22px solid #000;
}

.gauge_wrap2 .gauge_ttl span {
	padding-left: 5px;
	color: #FFF;
	font-size: 1.2rem;
}

.gauge_wrap2 .gauge_bg {
	position: relative;
	background: -moz-linear-gradient(top, #555, #222);
	background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#222));
	border: solid 5px #000;
	width: 300px;
	height: 32px;
}

.gauge_wrap2 .gauge_main {
	background: -moz-linear-gradient(top, #9FF, #0FF);
	background: -webkit-gradient(linear, left top, left bottom, from(#9FF), to(#0FF));
	height: 22px;
}

.gauge_wrap2 .gauge_exp {
	background: -moz-linear-gradient(top, #FC9, #FF8000);
	background: -webkit-gradient(linear, left top, left bottom, from(#FC9), to(#FF8000));
}

その2.もっとソーシャルゲームを意識したゲージ
もう少しソーシャルゲームにありそうな感じに近づけてみました。
LVの部分の六角形の部分は擬似要素(:before、:after)で作っています。
六角形が左にくるので、各ゲージはその分右にずらしています。

サンプルページを表示

html

<div class="gauge_all_wrap">
<ul class="gauge_wrap3">
<li>
<div class="gauge_bg"><div class="gauge_main" style="width: 100%;"></div></div>
<div class="gauge_num"><span>100/100</span></div>
<div class="gauge_ttl"><span>AP</span></div>
</li>
<li>
<div class="gauge_bg"><div class="gauge_main gauge_exp" style="width: 50%;"></div></div>
<div class="gauge_num"><span>2000/4000</span></div>
<div class="gauge_ttl"><span class="ttl_exp">EXP</span></div>
</li>
</ul>
<div class="symbol_level"><span class="level_ttl">LV.</span><span class="level_num">78</span></div>
</div>
css

.gauge_all_wrap {
	position: relative;
}

.gauge_wrap3 {
	margin-left: 62px;
}

.gauge_wrap3 li {
	position: relative;
	width: 362px;
	margin-bottom: 2px;
}

.gauge_wrap3 li:last-child {
	margin-bottom: 0;
}

.gauge_wrap3 .gauge_bg {
	position: relative;
	background: -moz-linear-gradient(top, #555, #222);
	background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#222));
	border: solid 5px #000;
	width: 300px;
	height: 31px;
}

.gauge_wrap3 .gauge_main {
	background: -moz-linear-gradient(top, #73B9FF, #006DD9);
	background: -webkit-gradient(linear, left top, left bottom, from(#73B9FF), to(#006DD9));
}

.gauge_wrap3 .gauge_exp {
	background: -moz-linear-gradient(top, #FF4D4D, #D90000);
	background: -webkit-gradient(linear, left top, left bottom, from(#FF4D4D), to(#D90000));
	height: 21px;
}

.gauge_wrap3 .gauge_num {
	position: absolute;
	top: 8px;
	right: 73px;
	text-align: right;
	color: #FFF;
	font-size: 1.2rem;
	font-weight: bold;
	text-shadow: 1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000;
}

.gauge_wrap3 .gauge_ttl {
	position: absolute;
	top: 0;
	right: 0;
	background-color: #000;
	width: 62px;
	height: 31px;
	text-align: center;
	padding: 5px;
}

.gauge_wrap3 .gauge_ttl span {
	display: block;
	border: solid 1px #006DD9;
	color: #FFF;
	font-size: 1.2rem;
}

.gauge_wrap3 .gauge_ttl .ttl_exp {
	display: block;
	border: solid 1px #D90000;
	color: #FFF;
	font-size: 1.2rem;
}

.symbol_level {
	position: absolute;
	top: 0;
	left: 16px;
	width: 48px;
	height: 64px;
	background-color: #000;
	text-align: center;
}

.symbol_level:before{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: -16px;
	border-top: 32px solid transparent;
	border-bottom: 32px solid transparent;
	border-right: 16px solid #000;
}

.symbol_level:after{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: -16px;
	border-top: 32px solid transparent;
	border-bottom: 32px solid transparent;
	border-left: 16px solid #000;
}

.symbol_level span {
	display: block;
	color: #FFF;
}

.symbol_level .level_ttl {
	position: relative;
	top: 6px;
	left: -10px;
	font-size: 1.2rem;
}

.symbol_level .level_num {
	font-size: 2.8rem;
	font-weight: bold;
}

今回はすべてHTMLとCSSで表現しましたが、ゲージやその周辺部分にもっと装飾を施すようでしたら、画像できちんと作ったほうが効率的ですね。
というか、時と場合によっては画像で作ったほうが早いし、ソースがごちゃごちゃすることは少ないかなと思います。

だって、これCSS長いよ(汗

参考
CSSで六角形を表現する | SAITEI no CHINJUU!!!（最低の珍獣）
http://met.hanatoweb.jp/archives/276/

The Shapes of CSS
http://css-tricks.com/examples/ShapesOfCSS/

CSSのみで三角形を作る方法を解説するよ！｜ついでに扇型や吹き出しも作ってみる | アイデアハッカー
http://ideahacker.net/2013/07/26/5962/

PAGE TOP