美Deブ（美美美コムデベロッパーブログ） http://www.vi-de-bu.com 知って得するWeb情報サイト Fri, 06 Apr 2012 01:20:55 +0000 ja hourly 1 http://wordpress.org/?v=3.1.1 test http://www.vi-de-bu.com/2012/04/06/test-2/ http://www.vi-de-bu.com/2012/04/06/test-2/#comments Fri, 06 Apr 2012 01:20:55 +0000 toru http://www.vi-de-bu.com/?p=844 test

]]> http://www.vi-de-bu.com/2012/04/06/test-2/feed/ 0 jQueryで階層型メニューを作ってみる http://www.vi-de-bu.com/2011/12/29/jquery%e3%81%a7%e9%9a%8e%e5%b1%a4%e5%9e%8b%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%82%92%e4%bd%9c%e3%81%a3%e3%81%a6%e3%81%bf%e3%82%8b/ http://www.vi-de-bu.com/2011/12/29/jquery%e3%81%a7%e9%9a%8e%e5%b1%a4%e5%9e%8b%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%82%92%e4%bd%9c%e3%81%a3%e3%81%a6%e3%81%bf%e3%82%8b/#comments Thu, 29 Dec 2011 10:11:47 +0000 vi-de-bu http://www.vi-de-bu.com/?p=832 Continue reading →]]> jQuery で階層型のナビゲーションメニューを作ってみました。階層型はどちらかというと HTML のコーディングの方が複雑です。参考書にはIE7 対応の記述がしてあるのですが、省きました。 今回は、 Microsoft の jQuery を使っていますが、特に深い意味はございません。

sample：jQueryで階層型メニューを作ってみる
ダウンロード：jQueryで階層型メニューを作ってみるをダウンロード
参考書：ｊQueryデザインブック
※実際のコードは下記になります

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryで階層型メニューを作ってみる：美Deブ</title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
    $("ul.navi li").hover(function(){
	//マウスを重ねた時に発生するメソッドを記述します
        $(">ul:not(:animated)",this).slideDown("fast");
		//アニメーションが繰り返し実行ｓれないようにセレクターに ul:not(:animated) を指定しましょう
		//sildeDownの速度を"slow","nomal","fast"で指定するか、時間を指定する。時間の場合は"2000"だと2秒かけてアニメーションが行われる
    },
    function(){
        $(">ul",this).slideUp("fast");
		//マウスを外したときに発生するメソッドを記述します
    })
})
</script>
<style type="text/css">
*{
	margin:0;
	padding:0;
	list-style-type:none;
}
ul.navi li{
	float:left;
	width:250px;
	height:40px;
	background:url("images/btn_off.jpg");
	position:relative;
	margin-right: 1px;
}
ul.navi li a{
	display:block;
	width:100%;
	height:100%;
	line-height:40px;
	text-indent:30px;
	font-weight:bold;
	color:#FFF;
	text-decoration:none;
	position:relative;
}
ul.navi li a:hover{
	background:url("images/btn_on.jpg");
}
ul.sub li ul.sub{
    position:absolute;
    left:251px;
    top:0;
}
ul.sub{
    display:none;
}
ul.navi:after {
    content:".";
    display:block;
    clear:both;
    height:0;
    visibility:hidden;
}
</style>
</head>
<body>
<div id="container">
	<ul class="navi">
		<li><a href="#">WEB情報</a>
			<ul class="sub">
				<li><a href="#">2011年のトレンド</a></li>
				<li><a href="#">2012年のトレンド</a></li>
			</ul>
		</li>
		<li><a href="#">参考素材</a>
			<ul class="sub">
				<li><a href="#">Dreamweaver</a></li>
					<li><a href="#">Photoshop</a>
						<ul class="sub">
							<li><a href="#">ブラシ</a></li>
							<li><a href="#">シェイプ</a></li>
							<li><a href="#">パターン</a>
								<ul class="sub">
									<li><a href="#">JPG</a></li>
									<li><a href="#">PNG</a></li>
									<li><a href="#">GIF</a></li>
								</ul>
							</li>
						</ul>
					</li>
					<li><a href="#">Illustrator</a>
						<ul class="sub">
							<li><a href="#">シンボル</a></li>
							<li><a href="#">シェイプ</a></li>
							<li><a href="#">パターン</a>
								<ul class="sub">
									<li><a href="#">ドット</a></li>
									<li><a href="#">ライン</a></li>
									<li><a href="#">幾何学</a></li>
								</ul>
							</li>
						</ul>
					</li>
				</ul>
			</li>
		<li><a href="#">チュートリアル</a>
			<ul class="sub">
				<li><a href="#">テキストエフェクト</a>
					 <ul class="sub">
						<li><a href="#">3D</a></li>
						<li><a href="#">グラフィティ</a></li>
					</ul>
				</li>
				<li><a href="#">写真エフェクト</a></li>
				<li><a href="#">WEBレイアウト</a></li>
			</ul>
		</li>
	</ul>
</div>
</body>
</html>
]]> http://www.vi-de-bu.com/2011/12/29/jquery%e3%81%a7%e9%9a%8e%e5%b1%a4%e5%9e%8b%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%82%92%e4%bd%9c%e3%81%a3%e3%81%a6%e3%81%bf%e3%82%8b/feed/ 0 JQueryでアコーディオンメニューを作成してみる http://www.vi-de-bu.com/2011/12/29/jquery%e3%81%a7%e3%82%a2%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%82%aa%e3%83%b3%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%82%92%e4%bd%9c%e6%88%90%e3%81%97%e3%81%a6%e3%81%bf%e3%82%8b/ http://www.vi-de-bu.com/2011/12/29/jquery%e3%81%a7%e3%82%a2%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%82%aa%e3%83%b3%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%82%92%e4%bd%9c%e6%88%90%e3%81%97%e3%81%a6%e3%81%bf%e3%82%8b/#comments Thu, 29 Dec 2011 07:29:32 +0000 vi-de-bu http://www.vi-de-bu.com/?p=820 Continue reading →]]> jQuery を使って、アコーディオンメニューを作成してみました。ちなみに jQuery の参考書を買うと前半部分に記載されています。
まず、はじめに、Google もしくは Microsoft から使用する jQuery のコードを選択します。サンプルは、 Google の最新のバージョンを使っています。

▼jQuery を読み込みます
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

▼javascript でアコーディオンの記述をします

<script type="text/javascript">
$(function(){
	$("ul.menu").hide(); // .要素を[処理時間]かけて非表示にします
	$("div.category").click(function(){ // イベント用のメソッドです。要素をクリックすることでイベント処理が行われます
		$("ul.menu").slideUp();// 要素を処理時間でスライドアップします
		if($("+ul",this).css("display")=="none"){// ul要素（カテゴリー内のメニュー）カテゴリー内のメニューが表示されていないとき、メニューがsildeDownします
			$("+ul",this).slideDown();// 要素を処理時間でスライドダウンします
		}
	});
});
</script>

sample：JQueryでアコーディオンメニューを作成してみる
※実際のコードは下記になります。丸っとコピーすれば簡単に手元で確認することができます

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JQueryでアコーディオンメニューを作成してみる：美Deブ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("ul.menu").hide();
	$("div.category").click(function(){
		$("ul.menu").slideUp();
		if($("+ul",this).css("display")=="none"){
			$("+ul",this).slideDown();
		}
	});
});
</script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
body {
	font-family: Myriad, Helvetica, Arial, "Meiryo", "メイリオ", sans-serif;
	_font-family: 'ＭＳ Ｐゴシック', sans-serif;
}
div.category {
	margin:-top:5px;
	height:40px;
	line-height:40px;
	background:#B9DDE8;
	cursor:pointer;
}
ul.navi{
	width: 220px;
	margin: 0px;
	background: #e5f8ff;
}
ul.navi, ul.menu {
	padding:0;
	margin:0;
	list-style: none;
}
ul.menu li{
	padding-left:20px;
	margin:0;
	list-style: none;
}
div.category {
	margin-top: 5px;
	padding-left: 20px;
	height: 40px;
	line-height: 40px;
	background: #B9DDE8;
}
ul.menu a {
	display: block;
	height: 35px;
	line-height: 35px;
	color: #5c6e74;
}
</style>
</head>
<body>
<div>
	<ul class="navi">
		<li>
			<div class="category">パソコン</div>
			<ul class="menu">
				<li><a href="#">パソコン周辺機器</a></li>
				<li><a href="#">PCアクセサリ</a></li>
				<li><a href="#">PCパーツ</a></li>
				<li><a href="#">プリンタ</a></li>
				<li><a href="#">PCソフト</a></li>
				<li><a href="#">PCゲーム</a></li>
			</ul>
		</li>
		<li>
			<div class="category">本・マンガ・雑誌</div>
			<ul class="menu">
				<li><a href="#">本</a></li>
				<li><a href="#">洋書</a></li>
				<li><a href="#">マンガ</a></li>
				<li><a href="#">雑誌</a></li>
				<li><a href="#">古本</a></li>
			</ul>
		</li>
		<li>
			<div class="category">家電・カメラ・AV機器</div>
			<ul class="menu">
				<li><a href="#">デジタルカメラ</a></li>
				<li><a href="#">テレビレコーダー</a></li>
				<li><a href="#">オーディオ</a></li>
				<li><a href="#">携帯電話</a></li>
				<li><a href="#">生活家電</a></li>
				<li><a href="#">美容家電</a></li>
			</ul>
		</li>
		<li>
			<div class="category">生活雑貨</div>
			<ul class="menu">
				<li><a href="#">キッチン用品</a></li>
				<li><a href="#">掃除・選択用品</a></li>
				<li><a href="#">バス・トイレ用品</a></li>
				<li><a href="#">その他</a></li>
			</ul>
		</li>
	</ul>
</div>
</body>
</html>
]]> http://www.vi-de-bu.com/2011/12/29/jquery%e3%81%a7%e3%82%a2%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%82%aa%e3%83%b3%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%82%92%e4%bd%9c%e6%88%90%e3%81%97%e3%81%a6%e3%81%bf%e3%82%8b/feed/ 0 これから jQuery について学ぶ方へ http://www.vi-de-bu.com/2011/12/29/%e3%81%93%e3%82%8c%e3%81%8b%e3%82%89-jquery-%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6%e5%ad%a6%e3%81%b6%e6%96%b9%e3%81%b8/ http://www.vi-de-bu.com/2011/12/29/%e3%81%93%e3%82%8c%e3%81%8b%e3%82%89-jquery-%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6%e5%ad%a6%e3%81%b6%e6%96%b9%e3%81%b8/#comments Thu, 29 Dec 2011 03:31:21 +0000 vi-de-bu http://www.vi-de-bu.com/?p=801 Continue reading →]]> jQuery は、世界でもっとも利用されているJavaScriptライブラリのようです。仕様しているサイトも増えてきているので、これから jQuery を学ぶ方に jQuery の特徴をご説明します。

jQueryを利用するときは

【1】CDN（コンテンツ配信ネットワーク）を利用する。
【2】公式サイトからファイルをダウンロードし、それをサイト内に設置する。

CDNを利用する場合は、GoogleもしくはMicrosoftのどちらかを利用すると良いと思います。

コードが２種類あるけど？

そうなんです。jQueryには、縮小版（「min」が付いているほう）と非圧縮版があります。縮小版はファイルサイズを小さくする為に改行などなくして、変数も簡略化された物になります。

バージョンについて

最新のjQueryは、古いWebブラウザに対応しないこともあるようです。古いWebブラウザを特に意識していないのであれば、最新のバージョンを使うと良いかと思います。Webブラウザのサポートについては、jQuery公式サイトで状況を確認することができます。

JavaScriptの知識がないけど・・・

jQuery はあくまでも JavaScript でつくられたライブラリです。ただ、jQuery を利用することで、プログラミング経験のない人でも、 JavaScript を習得することなく、Webページに多彩な機能を実装することができます。

少しでも複雑な機能を追加したり、独自のカスタマイズをしたい場合は、JavaScript の基本をある程度理解する必要があります。「コードの意味をきちんと理解することで、jQuery でできることも増えてアイデアも広がる！」と聞きますので、この機会に JavaScript に触れてみるのも良いかと思います。

jQueryの基本構文

jQuery は対象となる要素をセレクターで指定し、その要素の内容やスタイルなどをメソッドで操作します。きます。基本構文は下記になります。

jQuery("セレクター").メソッド(パラメーター);

例えばクラス名「test」を持つa要素に対して、スタイル操作するcssメソッドで背景色をグレーにする場合は

jQuery("a.test").css({"background-color":"#ECECEC"});

となります。セレクターはcssの記述方法に対応しているので、スタイルシートの知識をそのまま応用できます。

]]> http://www.vi-de-bu.com/2011/12/29/%e3%81%93%e3%82%8c%e3%81%8b%e3%82%89-jquery-%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6%e5%ad%a6%e3%81%b6%e6%96%b9%e3%81%b8/feed/ 0 jQuery Mobileでサンプルサイトを作ってみた http://www.vi-de-bu.com/2011/12/27/jquery-mobile%e3%81%a7%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab%e3%82%b5%e3%82%a4%e3%83%88%e3%82%92%e4%bd%9c%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f/ http://www.vi-de-bu.com/2011/12/27/jquery-mobile%e3%81%a7%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab%e3%82%b5%e3%82%a4%e3%83%88%e3%82%92%e4%bd%9c%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f/#comments Tue, 27 Dec 2011 10:44:31 +0000 vi-de-bu http://www.vi-de-bu.com/?p=797 Continue reading →]]> jQuery Mobileをつかって、コーポレートサイトを作成してみました。cssをカスタマイズするのに苦戦しますね。ソースコードがかなり長いので、sampleをご覧ください。

sample：jQuery Mobileでコーポレートサイトを作成
ダウンロード：jQuery Mobileでコーポレートサイトを作成をダウンロード

※実際のコードは下記になります。

▼htmlソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>jQuery Mobileを使ってコーポレートサイトを作成：美Deブ</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.0.css" />
<link rel="stylesheet" href="style.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
// Google Analytics設定
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-22855204-22']);

$(document).bind('mobileinit', function(){
	// 日本語化
	$.mobile.loadingMessage = '読込み中';
	$.mobile.pageLoadErrorMessage = '読込みに失敗しました';
	$.mobile.page.prototype.options.backBtnText = '戻る';
	$.mobile.dialog.prototype.options.closeBtnText = '閉じる';
	$.mobile.selectmenu.prototype.options.closeText= '閉じる';
	$.mobile.listview.prototype.options.filterPlaceholder = '検索文字列...';

	// 戻るボタンの自動表示
	// $.mobile.page.prototype.options.addBackBtn = true;				

	// ページトラッキング
	$(':jqmData(role="page")').live('pageshow', function (event, ui) {
		_gaq.push(['_trackPageview', $.mobile.activePage.jqmData('url')]);
	});
});

$(document).ready(function(){
	// 最初のページ以外の全ページにホームボタンを追加
	$(':jqmData(role=page)').live("pagebeforecreate", function(evt){
		var page = $(this),
			home = $.mobile.firstPage;
			if ( page.attr('id') != home.attr('id') ) {
				page.find(':jqmData(role="header")').append(
					$('<a href="#' + home.attr('id') + '" data-transition="slideup" data-role="button" data-icon="home" data-iconpos="notext" class="ui-btn-right">ホームへ</a>')
			);
		}
	});

	// 地図ページ
	$('#company').bind('pageshow', function(){
		var TITLE = '東京都渋谷区恵比寿1-19-15ウノサワ東急ビル4階',
		LAT = 35.647346,
		LNG = 139.713242,
		MAP_ID = 'map';

		//地図作成
		var infowindow = new google.maps.InfoWindow(),
		latLng = new google.maps.LatLng(LAT, LNG),
		map = new google.maps.Map(document.getElementById(MAP_ID), {
			zoom: 15,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		}),
		marker = new google.maps.Marker({
			title: TITLE,
			position: latLng,
			map: map
		});

		//地図表示
		map.setCenter(latLng);
		infowindow.open(map);
	});

	// Google Analytics読み込み
	var ga = document.createElement('script'); ga.type = 'text/javascript';
	ga.async = true;
	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	var s = document.getElementsByTagName('script')[0];
	s.parentNode.insertBefore(ga, s);
});

</script>
<script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
</head>
<body>
<!--///////トップページ///////-->
<div data-role="page" id="top" data-theme="v">
	<div data-role="header" class="toppage" data-theme="v">
		<h1>株式会社 美美美コム</h1>
	</div>
	<div data-role="content">
		<h2><a href="http://www.vi-de-bu.com/">美Deブ</a>のサンプルサイトです</h2>
		<div data-role="controlgroup"> <img src="images/logo.jpg" class="wide" /> <a href="#message" data-role="button" data-icon="arrow-r" data-iconpos="right">会社について</a> <a href="#vision" data-role="button" data-icon="arrow-r" data-iconpos="right">理念・ビジョン</a> <a href="#business" data-role="button" data-icon="arrow-r" data-iconpos="right">事業内容</a> <a href="#service" data-role="button" data-icon="arrow-r" data-iconpos="right">サービス</a> <a href="#company" data-role="button" data-icon="arrow-r" data-iconpos="right">会社概要</a> <a href="#request" data-role="button" data-icon="arrow-r" data-iconpos="right">お問い合わせ</a> </div>
	</div>
	<div data-role="footer" data-theme="v">
		<div data-role="navbar">
			<ul>
				<li><a href="http://www.vi-vi-vi.jp/" data-icon="arrow-u" target="_blank">PC用サイトへ</a></li>
				<li><a href="#company" data-icon="info">会社情報</a></li>
				<li><a href="#request" data-icon="star">お問い合わせ</a></li>
			</ul>
		</div>
		<h5>Copyright(c) 株式会社美美美コム All Rights Reserved.</h5>
	</div>
</div>
<!--///////トップページ///////-->
<!--///////会社について///////-->
<div data-role="page" id="message" data-theme="v">
	<div data-role="header" data-theme="v">
		<h1>会社について</h1>
	</div>
	<div data-role="content">
	<h2><a href="http://www.vi-de-bu.com/">美Deブ</a>のサンプルサイトです</h2>
	<img src="images/sample.png" class="wide" />
		<div data-role="collapsible">
			<h3>美美美コム代表あいさつ</h3>
			<p>初めまして、こんにちは。株式会社美美美コムの代表をしております大庭邦彦（おおばくにひこ）と申します。まず私が「何故美美美コムを始めようと思ったのか」からお話させて頂きます。その当時、某IT企業にいた私は大阪支社の立ち上げに1年間ほど大阪の心斎橋の近くにワンルームマンションを借りて、そこをオフィス兼自宅として日々奮闘していました。生活環境がガラッと変わり、新しい理美容院も探さなくてはなりません。そこで当然のごとくネットで大阪の美容院を探そうと検索してみると、ほとんど情報がでてきません。それは他のエリアでも同様で、できてもちょっとした画像と住所と電話番号くらい・・・。そんな状況に唖然としました。町を歩けばおしゃれできれいな理美容院がたくさんあり、市場規模（2兆・20万店）も大きい業界なのにユー ザーが欲しい情報がほとんどネット上にはありませんでした。誰もやらないなら自分でやろうと考えた訳です。</p>
		</div>
		<div data-role="collapsible">
			<h3>ITと美容院業界について</h3>
			<p>前職で美容院のプロモーション全般の経験と不動産情報ポータルサイト「HOME'S」の運営を通してITと美容院業界の両方を勉強してきました。この2つの業界に精通する唯一の会社だと自信を持っており、業界の皆様と一緒にエンドユーザーのために役に立つ情報を提供していくことで、エンドユーザー・理美容院・弊社・その他専門学校やメーカーなど理美容業界に関係する全ての人が満足できる仕組みを考えております。そして、この知識や経験・情熱、なにより共感してくれる仲間がいればヘアサロン検索サイト【美美美コム http://www.vi-vi-vi.com】を通して「理美容業界でITナンバーワン＆オンリーワン企業になれると」と確信したのも起業のきっかけの1つです。「美容院」「ヘアサロン」「エクステ」などの検索回数をご存知でしょうか？これら理美容院を連想させるキーワード検索は合計すると月間50万回にものぼります。 これは「通販」「旅行」「不動産」などメジャーな月間キーワード検索回数に匹敵する検索数です。これだけエンドユーザーがネット上で理美容室に関連する情報を求めているのに、まだまだサロン自体の充実した情報がネット上にあまり無い業界です。どこの業界でもITを有効的に使える会社が伸びてきているという事実を考えると、近年中に理美容室もそうなる事が予想されます。そこで当社は理美容業界のWebプラットホーム・インフラになることをビジネスドメインに考えております。</p>
		</div>
		<div data-role="collapsible">
			<h3>理美容業界に充実したサービスを提案</h3>
			<p>急速な情報通信技術の進歩は、数年前には想像さえできなかったサービスを可能とし、それらを提供することが当たり前の世の中になりました。ただ残念な事に理美容業界はまだそのようになっておりません。そのような理美容業界の流れの中で、株式会社美美美コムはより豊かな生活を社会の一員として、日々変化していくエンドユーザーの要望に応え、充実した美容院に関するエンドユーザー向きの情報やサービスを企画・提案し続ける企業になりたいと思っております。またBtoCにとらわれずBtoBにも目を向けて、理美容業界の皆様と共に美美美コムを育てて行ければとも思っております。当社の提供するサービスで「ビビビッ」と感じる情報や出会いが生まれれば幸いです。どうかこれからの美美美コムに何卒ご期待下さいませ。</p>
		</div>
	</div>
	<div data-role="footer" data-theme="v">
		<div data-role="navbar">
			<ul>
				<li><a href="http://www.vi-vi-vi.jp/" data-icon="arrow-u" target="_blank">PC用サイトへ</a></li>
				<li><a href="#company" data-icon="info">会社情報</a></li>
				<li><a href="#request" data-icon="star">お問い合わせ</a></li>
			</ul>
		</div>
		<h5>Copyright(c) 株式会社美美美コム All Rights Reserved.</h5>
	</div>
</div>
<!--///////会社について///////-->

<!--///////理念・ビジョン///////-->
<div data-role="page" id="vision" data-theme="v">
	<div data-role="header" data-theme="v">
		<h1>理念・ビジョン</h1>
	</div>
	<div data-role="content">
	<h2><a href="http://www.vi-de-bu.com/">美Deブ</a>のサンプルサイトです</h2>
	<img src="images/sample.png" class="wide" />
		<p>私たちは、これからも理美容業界に特化した会社として、新しいサービスを仕掛けていきます。たとえばクーポンはもちろんネット予約の導入やモバイル、口コミ、リスティング広告SEO対策……。これまでにも、いち早い取り組みでお客さまの信頼を獲得してきました。専業特化した会社として、お客さまのためになるサービスを他社に先駆けて提供していきます。これからもその姿勢は変わりません。</p>
		<div data-role="collapsible">
			<h3>美美美コムの強み</h3>
			<div data-role="collapsible">
				<h3>■その1</h3>
				<p>ポータルサイト「美美美コム」への参画費用が安いこと。そして無駄な費用がかからないこと。初期費用は3万円。あとはコール課金制を導入。反響があった分だけお支払いが発生する仕組みを業界ではじめてとり入れました。</p>
			</div>
			<div data-role="collapsible">
				<h3>■その2</h3>
				<p>ホームページ制作「ホムログ」サービスにおいても、費用が安く、効果的なアドバイスも行えること。一般的なWeb制作会社なら100万～200万円とかかる制作費を2万円×24回に。さらにポータルサイトとの連動やブログ更新のコツ・アイデアなどの永続的なアドバイスにより、集客率をアップさせます。</p>
			</div>
			<div data-role="collapsible">
				<h3>■その3</h3>
				<p>ITの最新技術を持っていること。おかげさまで優秀なエンジニア、デザイナー、企画、営業が揃っています。オープン3カ月でビックキーワードで1位に引き上げたこともあります。これからも強みを最大限に生かしてナンバーワン＆オンリーワン企業を目指して成長していきたいと考えています。</p>
			</div>
		</div>
	</div>
	<div data-role="footer" data-theme="v">
		<div data-role="navbar">
			<ul>
				<li><a href="http://www.vi-vi-vi.jp/" data-icon="arrow-u" target="_blank">PC用サイトへ</a></li>
				<li><a href="#company" data-icon="info">会社情報</a></li>
				<li><a href="#request" data-icon="star">お問い合わせ</a></li>
			</ul>
		</div>
		<h5>Copyright(c) 株式会社美美美コム All Rights Reserved.</h5>
	</div>
</div>
<!--///////理念・ビジョン///////-->

<!--///////事業内容///////-->
<div data-role="page" id="business" data-theme="v">
	<div data-role="header" data-theme="v">
		<h1>事業内容</h1>
	</div>
	<div data-role="content">
	<h2><a href="http://www.vi-de-bu.com/">美Deブ</a>のサンプルサイトです</h2>
	<img src="images/sample.png" class="wide" />
		<div data-role="collapsible" data-collapsed="true">
			<h3>インターネットメディア事業<br>
				（各種Webサイトの企画・制作・運用）</h3>
			<p>業界初の反響課金制ヘアサロン検索サイト「美美美コム」を通じて、全国の理美容室の情報をエンドユーザーに提供しています。</p>
		</div>
		<div data-role="collapsible" data-collapsed="true">
			<h3>Webコンサルティング事業<br>
				（SEM、広告代理、Web制作ほか）</h3>
			<p>お客さまのWebマーケティング戦略の提案を行うサービスです。主にホムログ（ホームページ制作）をベースに顧客分析や企画立案、仮説検証をもとに、効果的な行動計画を提案・実施します。</p>
		</div>
		<div data-role="collapsible" data-collapsed="true">
			<h3>私たちが考えていること</h3>
			<p>ホームページを制作することは、新しい店舗をオープンする ことと同じです。経営者の方で、自分のお店をつくるのに「とりあえず」と考える方はいないでしょう。エンドユーザーがホームページを見ることは、店舗の雰囲気を感じるうえで、来店するのと同じくらいのインパクトがあるもの。ですから、集客効果を向上させるためには、実際の店舗づくりと同じくらいの気持ちでホームページ制作に取り組まなければならないと考えています。私たちはサーバー、ドメイン取得から実制作、SEO対策、来店動機づけ、新規・既存顧客の囲い込みまで、徹底してアドバイス・フォローしていきます。 たとえばブログでスタッフを紹介し、趣味の話を書き込む。お客さまの手書きのメッセージをスキャニングしアップする。お客さまと一緒に写った写真を載せる……。映画の話を書き込んだことで、その映画が好きな人が来店されたこともあります。<br/>
				このような成功体験をさまざまなお客さまにフィードバックしていくのです。また、お客様のニーズ・課題解決を行うために協力会社と連携してCRMを導入することもありますし、人材教育会社をご紹介することも行います。私たちは、お客さまの満足を創造するために、決まったワク組みにとらわれず、あらゆる方法を考えます。</p>
		</div>
	</div>
	<div data-role="footer" data-theme="v">
		<div data-role="navbar">
			<ul>
				<li><a href="http://www.vi-vi-vi.jp/" data-icon="arrow-u" target="_blank">PC用サイトへ</a></li>
				<li><a href="#company" data-icon="info">会社情報</a></li>
				<li><a href="#request" data-icon="star">お問い合わせ</a></li>
			</ul>
		</div>
		<h5>Copyright(c) 株式会社美美美コム All Rights Reserved.</h5>
	</div>
</div>
<!--///////事業内容///////-->

<!--///////サービス///////-->
<div data-role="page" id="service" data-theme="v">
	<div data-role="header" data-theme="v">
		<h1>サービス</h1>
	</div>
	<div data-role="content">
	<h2><a href="http://www.vi-de-bu.com/">美Deブ</a>のサンプルサイトです</h2>
	<img src="images/sample.png" class="wide" />
		<div data-role="collapsible" data-collapsed="true">
			<h3>理美容院ポータルサイト</h3>
			<p>全国の理美容院が検索できるヘアサロン検索サイト『美美美コム』を運営しています。誰にでも直感的にすぐ分かる優れた検索機能とSEO・SEMなどの最新のIT技術を駆使して、ユーザーに最適な美容院情報を提供しています。</p>
			<img src="images/sample.png" class="wide" />
			<h3>美美美コム</h3>
			<p>全国の理美容室/理美容院の店舗情報やクーポンをエリアやフリーワードから検索でき、クーポンの印刷や美容院への予約の電話ができるサイトです。好きな条件であなたにピッタリのヘアサロンを探せます。人気ランキング、クチコミ、クーポン、特集も充実。豊富な情報と使いやすい機能でヘアサロン探しをサポートします。</p>
			<img src="images/sample.png" class="wide" />
			<h3>メンズ美美美コム</h3>
			<p>メンズ専用の理容室/美容室/美容院の店舗情報やクーポンをエリアやフリーワードから検索でき、クーポンの印刷や理容室/美容院への予約の電話ができるサイトです。好きな条件であなたにピッタリのヘアサロンを探せます。人気ランキング、クチコミ、クーポン、特集も充実。豊富な情報と使いやすい機能でヘアサロン探しをサポートします。</p>
		</div>
		<div data-role="collapsible" data-collapsed="true">
			<h3>WEBヘアカタログサイト</h3>
			<p>カリスマ美容室の卓越した技術によって完成されたヘアスタイルが検索できる『WEBヘアカタログ Lucri』。レングス毎に「ヘアスタイルランキング」が表示されるなど機能も満載。</p>
			<img src="images/sample.png" class="wide" />
			<h3>Lucri</h3>
			<p>カリスマ美容院が発信するヘアスタイル情報サイト「WEBヘアカタログLucri（ラクリィ）」。いろいろな条件から、自分の好みのヘアスタイルを検索できる。さらにやオリジナルの特集で、様々なヘアスタイルの情報が入手できます。</p>
		</div>
		<div data-role="collapsible" data-collapsed="true">
			<h3>髪型変身シミュレーションサイト</h3>
			<p>「ヘアサロン×変身」をテーマにした新しい髪型変身シミュレーションサイトです。合成写真は保存するだけでなく、友達にメールで送ったり、TwitterやFacebookへの投稿が可能です。</p>
			<img src="images/sample.png" class="wide" />
			<h3>イメコーデ</h3>
			<p>ユーザーが携帯電話やスマートフォンから自分の顔写真を送信すると、高度な顔合成技術によって有名ヘアサロンによる最新のヘアスタイルに変身できます。流行を反映したストリートスナップでの変身や動物、絵を使った愉快な顔合成ができるようになっているのも特徴の1つです。</p>
		</div>
		<div data-role="collapsible" data-collapsed="true">
			<h3>ヘアサロン専用ホームページ制作</h3>
			<p>ホームページとブログの仕組みを兼ね備えたサロンのインターネット活用を最大限にできる理美容業界初のサービスを提供しています。精度の高いSEO対策を実現し、ブログの仕組みと同じように更新も簡単にできます。</p>
			<img src="images/sample.png" class="wide" />
			<h3>ホムログ</h3>
			<p>デザイン、コンテンツ、使いやすさ、SEO対策などを高い次元で完成させることができるブログ型ホームページの制作プランです。ブログにはMovableTypeを利用しています。料金を分かりやすくするために、すべてを定額パッケージ化。制作実績にあるように多数の理美容室さまに支持されています。</p>
		</div>
	</div>
	<div data-role="footer" data-theme="v">
		<div data-role="navbar">
			<ul>
				<li><a href="http://www.vi-vi-vi.jp/" data-icon="arrow-u" target="_blank">PC用サイトへ</a></li>
				<li><a href="#company" data-icon="info">会社情報</a></li>
				<li><a href="#request" data-icon="star">お問い合わせ</a></li>
			</ul>
		</div>
		<h5>Copyright(c) 株式会社美美美コム All Rights Reserved.</h5>
	</div>
</div>
<!--///////サービス///////-->
<!--///////会社概要///////-->
<div data-role="page" id="company" data-theme="v">
	<div data-role="header" data-theme="v">
		<h1>会社概要</h1>
	</div>
	<div data-role="content">
	<h2><a href="http://www.vi-de-bu.com/">美Deブ</a>のサンプルサイトです</h2>
	<img src="images/sample.png" class="wide" />
		<h4>社名</h4>
		<p><a href="#">株式会社美美美コム</a></p>
		<h4>設立</h4>
		<p>2007年1月</p>
		<h4>資本金</h4>
		<p>15,000,000円</p>
		<h4>代表者</h4>
		<p>代表取締役 大庭 邦彦</p>
		<h4>社員数</h4>

		<p>13人</p>
		<h4>所在地</h4>
		<p>〒150-0013<br>
			東京都渋谷区恵比寿1-19-15ウノサワ東急ビル4階<br>
		</p>
		<div id="map"></div>
	</div>
	<div data-role="footer" data-theme="v">
		<div data-role="navbar">
			<ul>
				<li><a href="http://www.vi-vi-vi.jp/" data-icon="arrow-u" target="_blank">PC用サイトへ</a></li>
				<li><a href="#company" data-icon="info">会社情報</a></li>
				<li><a href="#request" data-icon="star">お問い合わせ</a></li>
			</ul>
		</div>
		<h5>Copyright(c) 株式会社美美美コム All Rights Reserved.</h5>
	</div>
</div>
<!--///////会社概要///////-->
<!--///////お問い合わせ///////-->
<div data-role="page" id="request" data-theme="v">
	<div data-role="header" data-theme="v">
		<h1>お問い合わせ</h1>
	</div>
	<form action="#" method="post">
		<div data-role="content">
		<h2><a href="http://www.vi-de-bu.com/">美Deブ</a>のサンプルサイトです</h2>
			<div data-role="fieldcontain">
				<label for="name">名前</label>
				<input type="text" id="name">
			</div>
			<div data-role="fieldcontain">
				<label for="gender">性別</label>
				<select name="gender" id="gender" data-role="slider">
					<option value="男性">男性</option>
					<option value="女性">女性</option>
				</select>
			</div>
			<div data-role="fieldcontain">
				<fieldset data-role="controlgroup">
					<legend>お問い合わせ種別</legend>
					<input type="checkbox" name="type1" id="type1" value="HP新規作成">
					<label for="type1">HP新規作成</label>
					<input type="checkbox" name="type2" id="type2" value="HPリニューアル">
					<label for="type2">HPリニューアル</label>
					<input type="checkbox" name="type3" id="type3" value="システム開発">
					<label for="type3">システム開発</label>
					<input type="checkbox" name="type4" id="type4" value="コンサルティング">
					<label for="type4">コンサルティング</label>
				</fieldset>
			</div>
			<div data-role="fieldcontain">
				<label for="comment">お問い合わせ内容詳細</label>
				<textarea id="comment"></textarea>
			</div>
			<div data-role="fieldcontain">
				<fieldset data-role="controlgroup">
					<legend>導入希望時期</legend>
					<input type="radio" name="choice" id="choice1" value="1ヶ月以内" checked="checked" />
					<label for="choice1">1ヶ月以内</label>
					<input type="radio" name="choice" id="choice2" value="1～3ヶ月以内" />
					<label for="choice2">1～3ヶ月以内</label>
					<input type="radio" name="choice" id="choice3" value="3ヶ月以降" />
					<label for="choice3">3ヶ月以降</label>
				</fieldset>
			</div>
			<!--　SAMPLEなので念のため
			<input type="button" value="キャンセル" data-icon="delete" data-inline="true">
			<input type="submit" value="送信" data-icon="arrow-r" data-inline="true">
			-->
		</div>
	</form>
	<div data-role="footer" data-theme="v">
		<div data-role="navbar">
			<ul>
				<li><a href="http://www.vi-vi-vi.jp/" data-icon="arrow-u" target="_blank">PC用サイトへ</a></li>
				<li><a href="#company" data-icon="info">会社情報</a></li>
				<li><a href="#request" data-icon="star">お問い合わせ</a></li>
			</ul>
		</div>
		<h5>Copyright(c) 株式会社美美美コム All Rights Reserved.</h5>
	</div>
</div>
<!--///////お問い合わせ///////-->
</body>
</html>

▼jquery.mobile-1.0.cssのソースコード

/* テーマ「v」のcss （vi-de-bu）
-----------------------------------------------------------------------------------------------------------*/
.ui-bar-v {
	border:1px solid #ccc;
	background:#e4007d;
	color:#FFF;
	text-shadow:0 1px 0 #e4007d;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#e4007d), to(#e4007d));
	background-image:-webkit-linear-gradient(top, #e4007d, #e4007d);
	background-image:-moz-linear-gradient(top, #e4007d, #e4007d);
	background-image:-ms-linear-gradient(top, #e4007d, #e4007d);
	background-image:-o-linear-gradient(top, #e4007d, #e4007d);
	background-image:linear-gradient(top, #e4007d, #e4007d)
}
.ui-bar-v, .ui-bar-v input, .ui-bar-v select, .ui-bar-v textarea, .ui-bar-v button {
	font-family:Helvetica, Arial, sans-serif
}
.ui-bar-v .ui-link-inherit {
	color:#333
}
.ui-bar-v .ui-link {
	color:#0ac3e5;
	font-weight:bold
}

.ui-body-v, .ui-body-v input, .ui-body-v select, .ui-body-v textarea, .ui-body-v button {
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif,'Helvetica Neue', Arial, Helvetica, 'Nimbus Sans L', sans-serif;
}
.ui-body-v .ui-link-inherit {
	color:#333
}
.ui-body-v .ui-link {
	color:#0ac3e5;
	font-weight:bold
}
.ui-btn-up-v {
	border:1px solid #ccc;
	background:#fff;
	font-weight:bold;
	color:#444;
	text-shadow:0 1px 1px #fff;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff));
	background-image:-webkit-linear-gradient(top, #fff, #fff);
	background-image:-moz-linear-gradient(top, #fff, #fff);
	background-image:-ms-linear-gradient(top, #fff, #fff);
	background-image:-o-linear-gradient(top, #fff, #fff);
	background-image:linear-gradient(top, #fff, #fff)
}
.ui-btn-up-v a.ui-link-inherit {
	color:#333
}
.ui-btn-hover-v {
	border:1px solid #aaa;
	background:#0ac3e5;
	font-weight:bold;
	color:#FFF;
	cursor:pointer;
	text-shadow:0 1px 1px #0ac3e5;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#0ac3e5), to(#0ac3e5));
	background-image:-webkit-linear-gradient(top, #0ac3e5, #0ac3e5);
	background-image:-moz-linear-gradient(top, #0ac3e5, #0ac3e5);
	background-image:-ms-linear-gradient(top, #0ac3e5, #0ac3e5);
	background-image:-o-linear-gradient(top, #0ac3e5, #0ac3e5);
	background-image:linear-gradient(top, #0ac3e5, #0ac3e5)
}

.ui-btn-hover-v a.ui-link-inherit {
	color:#222
}
.ui-btn-down-v {
	border:1px solid #aaa;
	background:#fff;
	font-weight:bold;
	color:#111;
	text-shadow:0 1px 1px #fff;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#eee), to(#fff));
	background-image:-webkit-linear-gradient(top, #eee, #fff);
	background-image:-moz-linear-gradient(top, #eee, #fff);
	background-image:-ms-linear-gradient(top, #eee, #fff);
	background-image:-o-linear-gradient(top, #eee, #fff);
	background-image:linear-gradient(top, #eee, #fff)
}
.ui-btn-down-v a.ui-link-inherit {
	color:#e4007d
}
.ui-btn-up-v, .ui-btn-hover-v, .ui-btn-down-v {
	font-family:Helvetica, Arial, sans-serif;
	text-decoration:none
}

/* テーマ「d」のcss
-----------------------------------------------------------------------------------------------------------*/
.ui-bar-d {
	border:1px solid #ccc;
	background:#bbb;
	color:#333;
	text-shadow:0 1px 0 #eee;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#ddd), to(#bbb));
	background-image:-webkit-linear-gradient(top, #ddd, #bbb);
	background-image:-moz-linear-gradient(top, #ddd, #bbb);
	background-image:-ms-linear-gradient(top, #ddd, #bbb);
	background-image:-o-linear-gradient(top, #ddd, #bbb);
	background-image:linear-gradient(top, #ddd, #bbb)
}
.ui-bar-d, .ui-bar-d input, .ui-bar-d select, .ui-bar-d textarea, .ui-bar-d button {
	font-family:Helvetica, Arial, sans-serif
}
.ui-bar-d .ui-link-inherit {
	color:#333
}
.ui-bar-d .ui-link {
	color:#2489ce;
	font-weight:bold
}
.ui-body-d {
	border:1px solid #ccc;
	color:#333;
	text-shadow:0 1px 0 #fff;
	background:#fff;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff));
	background-image:-webkit-linear-gradient(top, #fff, #fff);
	background-image:-moz-linear-gradient(top, #fff, #fff);
	background-image:-ms-linear-gradient(top, #fff, #fff);
	background-image:-o-linear-gradient(top, #fff, #fff);
	background-image:linear-gradient(top, #fff, #fff)
}
.ui-body-d, .ui-body-d input, .ui-body-d select, .ui-body-d textarea, .ui-body-d button {
	font-family:Helvetica, Arial, sans-serif
}
.ui-body-d .ui-link-inherit {
	color:#333
}
.ui-body-d .ui-link {
	color:#2489ce;
	font-weight:bold
}
.ui-btn-up-d {
	border:1px solid #ccc;
	background:#fff;
	font-weight:bold;
	color:#444;
	text-shadow:0 1px 1px #fff;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff));
	background-image:-webkit-linear-gradient(top, #fff, #fff);
	background-image:-moz-linear-gradient(top, #fff, #fff);
	background-image:-ms-linear-gradient(top, #fff, #fff);
	background-image:-o-linear-gradient(top, #fff, #fff);
	background-image:linear-gradient(top, #fff, #fff)
}
.ui-btn-up-d a.ui-link-inherit {
	color:#333
}
.ui-btn-hover-d {
	border:1px solid #aaa;
	background:#eee;
	font-weight:bold;
	color:#222;
	cursor:pointer;
	text-shadow:0 1px 1px #fff;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#fdfdfd), to(#eee));
	background-image:-webkit-linear-gradient(top, #fdfdfd, #eee);
	background-image:-moz-linear-gradient(top, #fdfdfd, #eee);
	background-image:-ms-linear-gradient(top, #fdfdfd, #eee);
	background-image:-o-linear-gradient(top, #fdfdfd, #eee);
	background-image:linear-gradient(top, #fdfdfd, #eee)
}
.ui-btn-hover-d a.ui-link-inherit {
	color:#222
}
.ui-btn-down-d {
	border:1px solid #aaa;
	background:#fff;
	font-weight:bold;
	color:#111;
	text-shadow:0 1px 1px #fff;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#eee), to(#fff));
	background-image:-webkit-linear-gradient(top, #eee, #fff);
	background-image:-moz-linear-gradient(top, #eee, #fff);
	background-image:-ms-linear-gradient(top, #eee, #fff);
	background-image:-o-linear-gradient(top, #eee, #fff);
	background-image:linear-gradient(top, #eee, #fff)
}
.ui-btn-down-d a.ui-link-inherit {
	color:#111
}
.ui-btn-up-d, .ui-btn-hover-d, .ui-btn-down-d {
	font-family:Helvetica, Arial, sans-serif;
	text-decoration:none
}

/* 共通CSS
-----------------------------------------------------------------------------------------------------------*/
a.ui-link-inherit {
	text-decoration:none!important
}
.ui-link {
	color:#0ac3e5
}
.ui-link:hover {
	color:#0ac3e5
}
.ui-link:active {
	color:#0ac3e5
}
.ui-link:visited {
	color:#0ac3e5
}
.ui-btn-active {
	border:1px solid #155678;
	background:#0ac3e5;
	font-weight:bold;
	color:#fff;
	cursor:pointer;
	text-shadow:0 -1px 1px #145072;
	text-decoration:none;
	background-image:-webkit-gradient(linear, left top, left bottom, from(#0ac3e5), to(#0ac3e5));
	background-image:-webkit-linear-gradient(top, #0ac3e5, #0ac3e5);
	background-image:-moz-linear-gradient(top, #0ac3e5, #0ac3e5);
	background-image:-ms-linear-gradient(top, #0ac3e5, #0ac3e5);
	background-image:-o-linear-gradient(top, #0ac3e5, #0ac3e5);
	background-image:linear-gradient(top, #0ac3e5, #0ac3e5);
	outline:0;
	font-family:Helvetica, Arial, sans-serif
}
.ui-btn-active a.ui-link-inherit {
	color:#fff
}
.ui-btn-inner {
	border-top:1px solid #fff;
	border-color:rgba(255, 255, 255, .3)
}
.ui-corner-tl {
	-moz-border-radius-topleft:.6em;
	-webkit-border-top-left-radius:.6em;
	border-top-left-radius:.6em
}
.ui-corner-tr {
	-moz-border-radius-topright:.6em;
	-webkit-border-top-right-radius:.6em;
	border-top-right-radius:.6em
}
.ui-corner-bl {
	-moz-border-radius-bottomleft:.6em;
	-webkit-border-bottom-left-radius:.6em;
	border-bottom-left-radius:.6em
}
.ui-corner-br {
	-moz-border-radius-bottomright:.6em;
	-webkit-border-bottom-right-radius:.6em;
	border-bottom-right-radius:.6em
}
.ui-corner-top {
	-moz-border-radius-topleft:.6em;
	-webkit-border-top-left-radius:.6em;
	border-top-left-radius:.6em;
	-moz-border-radius-topright:.6em;
	-webkit-border-top-right-radius:.6em;
	border-top-right-radius:.6em
}
.ui-corner-bottom {
	-moz-border-radius-bottomleft:.6em;
	-webkit-border-bottom-left-radius:.6em;
	border-bottom-left-radius:.6em;
	-moz-border-radius-bottomright:.6em;
	-webkit-border-bottom-right-radius:.6em;
	border-bottom-right-radius:.6em
}
.ui-corner-right {
	-moz-border-radius-topright:.6em;
	-webkit-border-top-right-radius:.6em;
	border-top-right-radius:.6em;
	-moz-border-radius-bottomright:.6em;
	-webkit-border-bottom-right-radius:.6em;
	border-bottom-right-radius:.6em
}
.ui-corner-left {
	-moz-border-radius-topleft:.6em;
	-webkit-border-top-left-radius:.6em;
	border-top-left-radius:.6em;
	-moz-border-radius-bottomleft:.6em;
	-webkit-border-bottom-left-radius:.6em;
	border-bottom-left-radius:.6em
}
.ui-corner-all {
	-moz-border-radius:.6em;
	-webkit-border-radius:.6em;
	border-radius:.6em
}
.ui-corner-none {
	-moz-border-radius:0;
	-webkit-border-radius:0;
	border-radius:0
}
.ui-disabled {
	opacity:.3
}
.ui-disabled, .ui-disabled a {
	cursor:default
}
.ui-icon, .ui-icon-searchfield:after {
	background:#666;
	background:rgba(0, 0, 0, .4);
	background-image:url(images/icons-18-white.png);
	background-repeat:no-repeat;
	-moz-border-radius:9px;
	-webkit-border-radius:9px;
	border-radius:9px
}
.ui-icon-alt {
	background:#fff;
	background:rgba(255, 255, 255, .3);
	background-image:url(images/icons-18-black.png);
	background-repeat:no-repeat
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min--moz-device-pixel-ratio:1.5), only screen and (min-resolution:240dpi) {
.ui-icon-plus, .ui-icon-minus, .ui-icon-delete, .ui-icon-arrow-r, .ui-icon-arrow-l, .ui-icon-arrow-u, .ui-icon-arrow-d, .ui-icon-check, .ui-icon-gear, .ui-icon-refresh, .ui-icon-forward, .ui-icon-back, .ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info, .ui-icon-home, .ui-icon-search, .ui-icon-searchfield:after, .ui-icon-checkbox-off, .ui-icon-checkbox-on, .ui-icon-radio-off, .ui-icon-radio-on {
background-image:url(images/icons-36-white.png);
-moz-background-size:776px 18px;
-o-background-size:776px 18px;
-webkit-background-size:776px 18px;
background-size:776px 18px
}
.ui-icon-alt {
background-image:url(images/icons-36-black.png)
}
}
.ui-icon-plus {
	background-position:-0 50%
}
.ui-icon-minus {
	background-position:-36px 50%
}
.ui-icon-delete {
	background-position:-72px 50%
}
.ui-icon-arrow-r {
	background-position:-108px 50%
}
.ui-icon-arrow-l {
	background-position:-144px 50%
}
.ui-icon-arrow-u {
	background-position:-180px 50%
}
.ui-icon-arrow-d {
	background-position:-216px 50%
}
.ui-icon-check {
	background-position:-252px 50%
}
.ui-icon-gear {
	background-position:-288px 50%
}
.ui-icon-refresh {
	background-position:-324px 50%
}
.ui-icon-forward {
	background-position:-360px 50%
}
.ui-icon-back {
	background-position:-396px 50%
}
.ui-icon-grid {
	background-position:-432px 50%
}
.ui-icon-star {
	background-position:-468px 50%
}
.ui-icon-alert {
	background-position:-504px 50%
}
.ui-icon-info {
	background-position:-540px 50%
}
.ui-icon-home {
	background-position:-576px 50%
}
.ui-icon-search, .ui-icon-searchfield:after {
	background-position:-612px 50%
}
.ui-icon-checkbox-off {
	background-position:-684px 50%
}
.ui-icon-checkbox-on {
	background-position:-648px 50%
}
.ui-icon-radio-off {
	background-position:-756px 50%
}
.ui-icon-radio-on {
	background-position:-720px 50%
}
.ui-checkbox .ui-icon {
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px
}
.ui-icon-checkbox-off, .ui-icon-radio-off {
	background-color:transparent
}
.ui-checkbox-on .ui-icon, .ui-radio-on .ui-icon {
	background-color:#0ac3e5
}
.ui-icon-loading {
	background-image:url(images/ajax-loader.png);
	width:40px;
	height:40px;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20px;
	background-size:35px 35px
}
.ui-btn-corner-tl {
	-moz-border-radius-topleft0.51em;
	-webkit-border-top-left-radius:0.5em;
	border-top-left-radius:0.5em
}
.ui-btn-corner-tr {
	-moz-border-radius-topright:0.5em;
	-webkit-border-top-right-radius:0.5em;
	border-top-right-radius:0.5em
}
.ui-btn-corner-bl {
	-moz-border-radius-bottomleft:0.5em;
	-webkit-border-bottom-left-radius:0.5em;
	border-bottom-left-radius:0.5em
}
.ui-btn-corner-br {
	-moz-border-radius-bottomright:0.5em;
	-webkit-border-bottom-right-radius:0.5em;
	border-bottom-right-radius:0.5em
}
.ui-btn-corner-top {
	-moz-border-radius-topleft:0.5em;
	-webkit-border-top-left-radius:0.5em;
	border-top-left-radius:0.5em;
	-moz-border-radius-topright:0.5em;
	-webkit-border-top-right-radius:0.5em;
	border-top-right-radius:0.5em
}
.ui-btn-corner-bottom {
	-moz-border-radius-bottomleft:0.5em;
	-webkit-border-bottom-left-radius:0.5em;
	border-bottom-left-radius:0.5em;
	-moz-border-radius-bottomright:0.5em;
	-webkit-border-bottom-right-radius:0.5em;
	border-bottom-right-radius:0.5em
}
.ui-btn-corner-right {
	-moz-border-radius-topright:0.5em;
	-webkit-border-top-right-radius:0.5em;
	border-top-right-radius:1em;
	-moz-border-radius-bottomright:0.5em;
	-webkit-border-bottom-right-radius:0.5em;
	border-bottom-right-radius:0.5em
}
.ui-btn-corner-left {
	-moz-border-radius-topleft:0.5em;
	-webkit-border-top-left-radius:0.5em;
	border-top-left-radius:0.5em;
	-moz-border-radius-bottomleft:0.5em;
	-webkit-border-bottom-left-radius:0.5em;
	border-bottom-left-radius:0.5em
}
.ui-btn-corner-all {
	-moz-border-radius:0.5em;
	-webkit-border-radius:0.5em;
	border-radius:0.5em
}
.ui-corner-tl, .ui-corner-tr, .ui-corner-bl, .ui-corner-br, .ui-corner-top, .ui-corner-bottom, .ui-corner-right, .ui-corner-left, .ui-corner-all, .ui-btn-corner-tl, .ui-btn-corner-tr, .ui-btn-corner-bl, .ui-btn-corner-br, .ui-btn-corner-top, .ui-btn-corner-bottom, .ui-btn-corner-right, .ui-btn-corner-left, .ui-btn-corner-all {
	-webkit-background-clip:padding-box;
	-moz-background-clip:padding;
	background-clip:padding-box
}
.ui-overlay {
	background:#666;
	opacity:.5;
	filter:Alpha(Opacity=50);
	position:absolute;
	width:100%;
	height:100%
}
.ui-overlay-shadow {
	-moz-box-shadow:0 0 12px rgba(0, 0, 0, .6);
	-webkit-box-shadow:0 0 12px rgba(0, 0, 0, .6);
	box-shadow:0 0 12px rgba(0, 0, 0, .6)
}

.ui-shadow {
	-moz-box-shadow:0 1px 4px rgba(0, 0, 0, .3);
	-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, .3);
	box-shadow:0 1px 4px rgba(0, 0, 0, .3)
}
/*
.ui-bar-a .ui-shadow, .ui-bar-b .ui-shadow, .ui-bar-c .ui-shadow {
	-moz-box-shadow:0 1px 0 rgba(255, 255, 255, .3);
	-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .3);
	box-shadow:0 1px 0 rgba(255, 255, 255, .3)
}
*/
.ui-shadow-inset {
	-moz-box-shadow:inset 0 1px 4px rgba(0, 0, 0, .2);
	-webkit-box-shadow:inset 0 1px 4px rgba(0, 0, 0, .2);
	box-shadow:inset 0 1px 4px rgba(0, 0, 0, .2)
}
.ui-icon-shadow {
	-moz-box-shadow:0 1px 0 rgba(255, 255, 255, .4);
	-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, .4);
	box-shadow:0 1px 0 rgba(255, 255, 255, .4)
}
.ui-focus {
	-moz-box-shadow:0 0 12px #387bbe;
	-webkit-box-shadow:0 0 12px #387bbe;
	box-shadow:0 0 12px #387bbe
}
.ui-mobile-nosupport-boxshadow * {
	-moz-box-shadow:none!important;
	-webkit-box-shadow:none!important;
	box-shadow:none!important
}
.ui-mobile-nosupport-boxshadow .ui-focus {
	outline-width:2px
}
.ui-mobile, .ui-mobile body {
	height:100%
}
.ui-mobile fieldset, .ui-page {
	padding:0;
	margin:0
}
.ui-mobile a img, .ui-mobile fieldset {
	border:0
}
.ui-mobile-viewport {
	margin:0;
	overflow-x:hidden;
	-webkit-text-size-adjust:none;
	-ms-text-size-adjust:none;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0)
}
.ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page {
	top:0;
	left:0;
	width:100%;
	min-height:100%;
	position:absolute;
	display:none;
	border:0
}
.ui-mobile .ui-page-active {
	display:block;
	overflow:visible
}
.ui-page {
	outline:0
}
.ui-page.ui-mobile-touch-overflow, .ui-mobile-touch-overflow.ui-native-fixed .ui-content {
	overflow:auto;
	height:100%;
	-webkit-overflow-scrolling:touch;
	-moz-overflow-scrolling:touch;
	-o-overflow-scrolling:touch;
	-ms-overflow-scrolling:touch;
	overflow-scrolling:touch
}
.ui-page.ui-mobile-touch-overflow, .ui-page.ui-mobile-touch-overflow * {
	-webkit-transform:rotateY(0)
}
.ui-page.ui-mobile-pre-transition {
	display:block
}
.ui-loading .ui-mobile-viewport {
	overflow:hidden!important
}
.ui-loading .ui-loader {
	display:block
}
.ui-loading .ui-page {
	overflow:hidden
}
.ui-loader {
	display:none;
	position:absolute;
	opacity:.85;
	z-index:100;
	left:50%;
	width:200px;
	margin-left:-130px;
	margin-top:-35px;
	padding:10px 30px
}
.ui-loader h1 {
	font-size:15px;
	text-align:center
}
.ui-loader .ui-icon {
	position:static;
	display:block;
	opacity:.9;
	margin:0 auto;
	width:35px;
	height:35px;
	background-color:transparent
}
.ui-mobile-rendering>* {
	visibility:hidden
}
.ui-bar, .ui-body {
	position:relative;
	padding:.4em 15px;
	overflow:hidden;
	display:block;
	clear:both
}
.ui-bar {
	font-size:16px;
	margin:0
}
.ui-bar h1, .ui-bar h2, .ui-bar h3, .ui-bar h4, .ui-bar h5, .ui-bar h6 {
	margin:0;
	padding:0;
	font-size:12px;
	display:inline-block
}
.ui-header, .ui-footer {
	display:block
}
.ui-page .ui-header, .ui-page .ui-footer {
	position:relative
}
.ui-header .ui-btn-left {
	position:absolute;
	left:10px;
	top:.4em
}
.ui-header .ui-btn-right {
	position:absolute;
	right:10px;
	top:.4em
}
.ui-header .ui-title, .ui-footer .ui-title {
	min-height:1.1em;
	text-align:center;
	font-size:14px;
	display:block;
	margin:.6em 90px .8em;
	padding:0;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
	outline:0!important
}
.ui-content {
	border-width:0;
	overflow:visible;
	overflow-x:hidden;
	padding:15px
}
.ui-page-fullscreen .ui-content {
	padding:0
}
.ui-mobile-touch-overflow.ui-page.ui-native-fixed, .ui-mobile-touch-overflow.ui-page.ui-native-fullscreen {
	overflow:visible
}
.ui-mobile-touch-overflow.ui-native-fixed .ui-header, .ui-mobile-touch-overflow.ui-native-fixed .ui-footer {
	position:fixed;
	left:0;
	right:0;
	top:0;
	z-index:200
}
.ui-mobile-touch-overflow.ui-page.ui-native-fixed .ui-footer {
	top:auto;
	bottom:0
}
.ui-mobile-touch-overflow.ui-native-fixed .ui-content {
	padding-top:2.5em;
	padding-bottom:3em;
	top:0;
	bottom:0;
	height:auto;
	position:absolute
}
.ui-mobile-touch-overflow.ui-native-fullscreen .ui-content {
	padding-top:0;
	padding-bottom:0
}
.ui-mobile-touch-overflow.ui-native-fullscreen .ui-header, .ui-mobile-touch-overflow.ui-native-fullscreen .ui-footer {
	opacity:.9
}
.ui-native-bars-hidden {
	display:none
}
.ui-icon {
	width:18px;
	height:18px
}
.ui-fullscreen img {
	max-width:100%
}
.ui-nojs {
	position:absolute;
	left:-9999px
}
.spin {
	-webkit-transform:rotate(360deg);
	-webkit-animation-name:spin;
	-webkit-animation-duration:1s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear
}
@-webkit-keyframes spin {
from {
-webkit-transform:rotate(0deg)
}
to {
	-webkit-transform:rotate(360deg)
}
}
.in, .out {
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-duration:350ms
}
.slide.out {
	-webkit-transform:translateX(-100%);
	-webkit-animation-name:slideouttoleft
}
.slide.in {
	-webkit-transform:translateX(0);
	-webkit-animation-name:slideinfromright
}
.slide.out.reverse {
	-webkit-transform:translateX(100%);
	-webkit-animation-name:slideouttoright
}
.slide.in.reverse {
	-webkit-transform:translateX(0);
	-webkit-animation-name:slideinfromleft
}
.slideup.out {
	-webkit-animation-name:dontmove;
	z-index:0
}
.slideup.in {
	-webkit-transform:translateY(0);
	-webkit-animation-name:slideinfrombottom;
	z-index:10
}
.slideup.in.reverse {
	z-index:0;
	-webkit-animation-name:dontmove
}
.slideup.out.reverse {
	-webkit-transform:translateY(100%);
	z-index:10;
	-webkit-animation-name:slideouttobottom
}
.slidedown.out {
	-webkit-animation-name:dontmove;
	z-index:0
}
.slidedown.in {
	-webkit-transform:translateY(0);
	-webkit-animation-name:slideinfromtop;
	z-index:10
}
.slidedown.in.reverse {
	z-index:0;
	-webkit-animation-name:dontmove
}
.slidedown.out.reverse {
	-webkit-transform:translateY(-100%);
	z-index:10;
	-webkit-animation-name:slideouttotop
}
@-webkit-keyframes slideinfromright {
from {
-webkit-transform:translateX(100%)
}
to {
	-webkit-transform:translateX(0)
}
}
@-webkit-keyframes slideinfromleft {
from {
-webkit-transform:translateX(-100%)
}
to {
	-webkit-transform:translateX(0)
}
}
@-webkit-keyframes slideouttoleft {
from {
-webkit-transform:translateX(0)
}
to {
	-webkit-transform:translateX(-100%)
}
}
@-webkit-keyframes slideouttoright {
from {
-webkit-transform:translateX(0)
}
to {
	-webkit-transform:translateX(100%)
}
}
@-webkit-keyframes slideinfromtop {
from {
-webkit-transform:translateY(-100%)
}
to {
	-webkit-transform:translateY(0)
}
}
@-webkit-keyframes slideinfrombottom {
from {
-webkit-transform:translateY(100%)
}
to {
	-webkit-transform:translateY(0)
}
}
@-webkit-keyframes slideouttobottom {
from {
-webkit-transform:translateY(0)
}
to {
	-webkit-transform:translateY(100%)
}
}
@-webkit-keyframes slideouttotop {
from {
-webkit-transform:translateY(0)
}
to {
	-webkit-transform:translateY(-100%)
}
}
@-webkit-keyframes fadein {
from {
opacity:0
}
to {
	opacity:1
}
}
@-webkit-keyframes fadeout {
from {
opacity:1
}
to {
	opacity:0
}
}
.fade.out {
	z-index:0;
	-webkit-animation-name:fadeout
}
.fade.in {
	opacity:1;
	z-index:10;
	-webkit-animation-name:fadein
}
.viewport-flip {
	-webkit-perspective:1000;
	position:absolute
}
.ui-mobile-viewport-transitioning, .ui-mobile-viewport-transitioning .ui-page {
	width:100%;
	height:100%;
	overflow:hidden
}
.flip {
-webkit-animation-duration:.65s;
	-webkit-backface-visibility:hidden;
	-webkit-transform:translateX(0)
}
.flip.out {
	-webkit-transform:rotateY(-180deg) scale(.8);
	-webkit-animation-name:flipouttoleft
}
.flip.in {
	-webkit-transform:rotateY(0) scale(1);
	-webkit-animation-name:flipinfromleft
}
.flip.out.reverse {
	-webkit-transform:rotateY(180deg) scale(.8);
	-webkit-animation-name:flipouttoright
}
.flip.in.reverse {
	-webkit-transform:rotateY(0) scale(1);
	-webkit-animation-name:flipinfromright
}
@-webkit-keyframes flipinfromright {
from {
-webkit-transform:rotateY(-180deg) scale(.8)
}
to {
	-webkit-transform:rotateY(0) scale(1)
}
}
@-webkit-keyframes flipinfromleft {
from {
-webkit-transform:rotateY(180deg) scale(.8)
}
to {
	-webkit-transform:rotateY(0) scale(1)
}
}
@-webkit-keyframes flipouttoleft {
from {
-webkit-transform:rotateY(0) scale(1)
}
to {
	-webkit-transform:rotateY(-180deg) scale(.8)
}
}
@-webkit-keyframes flipouttoright {
from {
-webkit-transform:rotateY(0) scale(1)
}
to {
	-webkit-transform:rotateY(180deg) scale(.8)
}
}
@-webkit-keyframes dontmove {
from {
opacity:1
}
to {
	opacity:1
}
}
.pop {
	-webkit-transform-origin:50% 50%
}
.pop.in {
	-webkit-transform:scale(1);
	opacity:1;
	-webkit-animation-name:popin;
	z-index:10
}
.pop.in.reverse {
	z-index:0;
	-webkit-animation-name:dontmove
}
.pop.out.reverse {
	-webkit-transform:scale(.2);
	opacity:0;
	-webkit-animation-name:popout;
	z-index:10
}
@-webkit-keyframes popin {
from {
-webkit-transform:scale(.2);
opacity:0
}
to {
	-webkit-transform:scale(1);
	opacity:1
}
}
@-webkit-keyframes popout {
from {
-webkit-transform:scale(1);
opacity:1
}
to {
	-webkit-transform:scale(.2);
	opacity:0
}
}
.ui-grid-a, .ui-grid-b, .ui-grid-c, .ui-grid-d {
	overflow:hidden
}
.ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e {
	margin:0;
	padding:0;
	border:0;
	float:left;
	min-height:1px
}
.ui-grid-solo .ui-block-a {
	width:100%;
	float:none
}
.ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b {
	width:50%
}
.ui-grid-a .ui-block-a {
	clear:left
}
.ui-grid-b .ui-block-a, .ui-grid-b .ui-block-b, .ui-grid-b .ui-block-c {
	width:33.333%
}
.ui-grid-b .ui-block-a {
	clear:left
}
.ui-grid-c .ui-block-a, .ui-grid-c .ui-block-b, .ui-grid-c .ui-block-c, .ui-grid-c .ui-block-d {
	width:25%
}
.ui-grid-c .ui-block-a {
	clear:left
}
.ui-grid-d .ui-block-a, .ui-grid-d .ui-block-b, .ui-grid-d .ui-block-c, .ui-grid-d .ui-block-d, .ui-grid-d .ui-block-e {
	width:20%
}
.ui-grid-d .ui-block-a {
	clear:left
}
.ui-header, .ui-footer, .ui-page-fullscreen .ui-header, .ui-page-fullscreen .ui-footer {
	position:absolute;
	overflow:hidden;
	width:100%;
	border-left-width:0;
	border-right-width:0
}
.ui-header-fixed, .ui-footer-fixed {
	z-index:1000;
	-webkit-transform:translateZ(0)
}
.ui-footer-duplicate, .ui-page-fullscreen .ui-fixed-inline {
	display:none
}
.ui-page-fullscreen .ui-header, .ui-page-fullscreen .ui-footer {
	opacity:.9
}
.ui-navbar {
	overflow:hidden
}
.ui-navbar ul, .ui-navbar-expanded ul {
	list-style:none;
	padding:0;
	margin:0;
	position:relative;
	display:block;
	border:0
}
.ui-navbar-collapsed ul {
	float:left;
	width:75%;
	margin-right:-2px
}
.ui-navbar-collapsed .ui-navbar-toggle {
	float:left;
	width:25%
}
.ui-navbar li.ui-navbar-truncate {
	position:absolute;
	left:-9999px;
	top:-9999px
}
.ui-navbar li .ui-btn, .ui-navbar .ui-navbar-toggle .ui-btn {
	display:block;
	font-size:12px;
	text-align:center;
	margin:0;
	border-right-width:0
}
.ui-navbar li .ui-btn {
	margin-right:-1px
}
.ui-navbar li .ui-btn:last-child {
	margin-right:0
}
.ui-header .ui-navbar li .ui-btn, .ui-header .ui-navbar .ui-navbar-toggle .ui-btn, .ui-footer .ui-navbar li .ui-btn, .ui-footer .ui-navbar .ui-navbar-toggle .ui-btn {
	border-top-width:0;
	border-bottom-width:0
}
.ui-navbar .ui-btn-inner {
	padding-left:2px;
	padding-right:2px
}
.ui-navbar-noicons li .ui-btn .ui-btn-inner, .ui-navbar-noicons .ui-navbar-toggle .ui-btn-inner {
	padding-top:.8em;
	padding-bottom:.9em
}
.ui-navbar-expanded .ui-btn {
	margin:0;
	font-size:14px
}
.ui-navbar-expanded .ui-btn-inner {
	padding-left:5px;
	padding-right:5px
}
.ui-navbar-expanded .ui-btn-icon-top .ui-btn-inner {
	padding:45px 5px 15px;
	text-align:center
}
.ui-navbar-expanded .ui-btn-icon-top .ui-icon {
	top:15px
}
.ui-navbar-expanded .ui-btn-icon-bottom .ui-btn-inner {
	padding:15px 5px 45px;
	text-align:center
}
.ui-navbar-expanded .ui-btn-icon-bottom .ui-icon {
	bottom:15px
}
.ui-navbar-expanded li .ui-btn .ui-btn-inner {
	min-height:2.5em
}
.ui-navbar-expanded .ui-navbar-noicons .ui-btn .ui-btn-inner {
	padding-top:1.8em;
	padding-bottom:1.9em
}
.ui-btn {
	display:block;
	text-align:center;
	cursor:pointer;
	position:relative;
	margin:.5em 5px;
	padding:0
}
.ui-btn:focus, .ui-btn:active {
	outline:0
}
.ui-header .ui-btn, .ui-footer .ui-btn, .ui-bar .ui-btn {
	display:inline-block;
	font-size:13px;
	margin:0
}
.ui-btn-inline {
	display:inline-block
}
.ui-btn-inner {
	padding:.6em 25px;
	display:block;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
	position:relative;
	zoom:1
}
.ui-header .ui-btn-inner, .ui-footer .ui-btn-inner, .ui-bar .ui-btn-inner {
	padding:.4em 8px .5em
}
.ui-btn-icon-notext {
	width:24px;
	height:24px
}
.ui-btn-icon-notext .ui-btn-inner {
	padding:2px 1px 2px 3px
}
.ui-btn-icon-notext .ui-btn-text {
	position:absolute;
	left:-999px
}
.ui-btn-icon-left .ui-btn-inner {
	padding-left:33px
}
.ui-header .ui-btn-icon-left .ui-btn-inner, .ui-footer .ui-btn-icon-left .ui-btn-inner, .ui-bar .ui-btn-icon-left .ui-btn-inner {
	padding-left:27px
}
.ui-btn-icon-right .ui-btn-inner {
	padding-right:33px
}
.ui-header .ui-btn-icon-right .ui-btn-inner, .ui-footer .ui-btn-icon-right .ui-btn-inner, .ui-bar .ui-btn-icon-right .ui-btn-inner {
	padding-right:27px
}
.ui-btn-icon-top .ui-btn-inner {
	padding-top:33px
}
.ui-header .ui-btn-icon-top .ui-btn-inner, .ui-footer .ui-btn-icon-top .ui-btn-inner, .ui-bar .ui-btn-icon-top .ui-btn-inner {
	padding-top:27px
}
.ui-btn-icon-bottom .ui-btn-inner {
	padding-bottom:33px
}
.ui-header .ui-btn-icon-bottom .ui-btn-inner, .ui-footer .ui-btn-icon-bottom .ui-btn-inner, .ui-bar .ui-btn-icon-bottom .ui-btn-inner {
	padding-bottom:27px
}
.ui-btn-icon-notext .ui-icon {
	display:block
}
.ui-btn-icon-left .ui-icon, .ui-btn-icon-right .ui-icon {
	position:absolute;
	top:50%;
	margin-top:-9px
}
.ui-btn-icon-top .ui-icon, .ui-btn-icon-bottom .ui-icon {
	position:absolute;
	left:50%;
	margin-left:-9px
}
.ui-btn-icon-left .ui-icon {
	left:10px
}
.ui-btn-icon-right .ui-icon {
	right:10px
}
.ui-btn-icon-top .ui-icon {
	top:10px
}
.ui-btn-icon-bottom .ui-icon {
	bottom:10px
}
.ui-header .ui-btn-icon-left .ui-icon, .ui-footer .ui-btn-icon-left .ui-icon, .ui-bar .ui-btn-icon-left .ui-icon {
	left:4px
}
.ui-header .ui-btn-icon-right .ui-icon, .ui-footer .ui-btn-icon-right .ui-icon, .ui-bar .ui-btn-icon-right .ui-icon {
	right:4px
}
.ui-header .ui-btn-icon-top .ui-icon, .ui-footer .ui-btn-icon-top .ui-icon, .ui-bar .ui-btn-icon-top .ui-icon {
	top:4px
}
.ui-header .ui-btn-icon-bottom .ui-icon, .ui-footer .ui-btn-icon-bottom .ui-icon, .ui-bar .ui-btn-icon-bottom .ui-icon {
	bottom:4px
}
.ui-btn-hidden {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	-webkit-appearance:button;
	opacity:.1;
	cursor:pointer;
	background:transparent;
	font-size:1px;
	border:0;
	line-height:999px
}
.ui-collapsible {
	margin:.5em 0
}
.ui-collapsible-heading {
	font-size:16px;
	display:block;
	margin:0 -8px;
	padding:0;
	border-width:0 0 1px 0;
	position:relative
}
.ui-collapsible-heading a {
	text-align:left;
	margin:0
}
.ui-collapsible-heading a .ui-btn-inner {
	padding-left:40px
}
.ui-collapsible-heading a span.ui-btn {
	position:absolute;
	left:6px;
	top:50%;
	margin:-12px 0 0 0;
	width:20px;
	height:20px;
	padding:1px 0 1px 2px;
	text-indent:-9999px
}
.ui-collapsible-heading a span.ui-btn .ui-btn-inner {
	padding:10px 0
}
.ui-collapsible-heading a span.ui-btn .ui-icon {
	left:0;
	margin-top:-10px
}
.ui-collapsible-heading-status {
	position:absolute;
	left:-9999px
}
.ui-collapsible-content {
	display:block;
	margin:0 -8px;
	padding:10px 16px;
	border-top:0;
	background-image:none;
	font-weight:normal
}
.ui-collapsible-content-collapsed {
	display:none
}
.ui-collapsible-set {
	margin:.5em 0
}
.ui-collapsible-set .ui-collapsible {
	margin:-1px 0 0
}
.ui-controlgroup, fieldset.ui-controlgroup {
	padding:0;
	margin:.5em 0 1em
}
.ui-bar .ui-controlgroup {
	margin:0 .3em
}
.ui-controlgroup-label {
	font-size:16px;
	line-height:1.4;
	font-weight:normal;
	margin:0 0 .3em
}
.ui-controlgroup-controls {
	display:block;
	width:95%
}
.ui-controlgroup li {
	list-style:none
}
.ui-controlgroup-vertical .ui-btn, .ui-controlgroup-vertical .ui-checkbox, .ui-controlgroup-vertical .ui-radio {
	margin:0;
	border-bottom-width:0
}
.ui-controlgroup-vertical .ui-controlgroup-last {
	border-bottom-width:1px
}
.ui-controlgroup-horizontal {
	padding:0
}
.ui-controlgroup-horizontal .ui-btn {
	display:inline-block;
	margin:0 -5px 0 0
}
.ui-controlgroup-horizontal .ui-checkbox, .ui-controlgroup-horizontal .ui-radio {
	float:left;
	margin:0 -1px 0 0
}
.ui-controlgroup-horizontal .ui-checkbox .ui-btn, .ui-controlgroup-horizontal .ui-radio .ui-btn, .ui-controlgroup-horizontal .ui-checkbox:last-child, .ui-controlgroup-horizontal .ui-radio:last-child {
	margin-right:0
}
.ui-controlgroup-horizontal .ui-controlgroup-last {
	margin-right:0
}
.ui-controlgroup .ui-checkbox label, .ui-controlgroup .ui-radio label {
	font-size:16px
}
@media all and (min-width:450px) {
.ui-controlgroup-label {
vertical-align:top;
display:inline-block;
width:20%;
margin:0 2% 0 0
}
.ui-controlgroup-controls {
width:60%;
display:inline-block
}
}
.ui-dialog {
	min-height:480px
}
.ui-dialog .ui-header, .ui-dialog .ui-content, .ui-dialog .ui-footer {
	margin:15px;
	position:relative
}
.ui-dialog .ui-header, .ui-dialog .ui-footer {
	z-index:10;
	width:auto
}
.ui-dialog .ui-content, .ui-dialog .ui-footer {
	margin-top:-15px
}
.ui-checkbox, .ui-radio {
	position:relative;
	margin:.2em 0 .5em;
	z-index:1
}
.ui-checkbox .ui-btn, .ui-radio .ui-btn {
	margin:0;
	text-align:left;
	z-index:2
}
.ui-checkbox .ui-btn-inner, .ui-radio .ui-btn-inner {
	white-space:normal
}
.ui-checkbox .ui-btn-icon-left .ui-btn-inner, .ui-radio .ui-btn-icon-left .ui-btn-inner {
	padding-left:45px
}
.ui-checkbox .ui-btn-icon-right .ui-btn-inner, .ui-radio .ui-btn-icon-right .ui-btn-inner {
	padding-right:45px
}
.ui-checkbox .ui-icon, .ui-radio .ui-icon {
	top:1.1em
}
.ui-checkbox .ui-btn-icon-left .ui-icon, .ui-radio .ui-btn-icon-left .ui-icon {
	left:15px
}
.ui-checkbox .ui-btn-icon-right .ui-icon, .ui-radio .ui-btn-icon-right .ui-icon {
	right:15px
}
.ui-checkbox input, .ui-radio input {
	position:absolute;
	left:20px;
	top:50%;
	width:10px;
	height:10px;
	margin:-5px 0 0 0;
	outline:0!important;
	z-index:1
}
.ui-field-contain {
	padding:1.5em 0;
	margin:0;
	border-bottom-width:1px;
	overflow:visible
}
.ui-field-contain:first-child {
	border-top-width:0
}
@media all and (min-width:450px) {
.ui-field-contain {
border-width:0;
padding:0;
margin:1em 0
}
}
.ui-select {
	display:block;
	position:relative
}
.ui-select select {
	position:absolute;
	left:-9999px;
	top:-9999px
}
.ui-select .ui-btn {
	overflow:hidden
}
.ui-select .ui-btn select {
	cursor:pointer;
	-webkit-appearance:button;
	left:0;
	top:0;
	width:100%;
	min-height:1.5em;
	min-height:100%;
	height:3em;
	max-height:100%;
	opacity:0;
	-ms-filter:"alpha(opacity=0)";
	filter:alpha(opacity=0);
	z-index:2
}
@-moz-document url-prefix() {
.ui-select .ui-btn select {
opacity:.0001
}
}
.ui-select .ui-btn select.ui-select-nativeonly {
	opacity:1;
	text-indent:0
}
.ui-select .ui-btn-icon-right .ui-btn-inner {
	padding-right:45px
}
.ui-select .ui-btn-icon-right .ui-icon {
	right:15px
}
label.ui-select {
	font-size:16px;
	line-height:1.4;
	font-weight:normal;
	margin:0 0 .3em;
	display:block
}
.ui-select .ui-btn-text, .ui-selectmenu .ui-btn-text {
	display:block;
	min-height:1em
}
.ui-select .ui-btn-text {
	text-overflow:ellipsis;
	overflow:hidden
}
.ui-selectmenu {
	position:absolute;
	padding:0;
	z-index:100!important;
	width:80%;
	max-width:350px;
	padding:6px
}
.ui-selectmenu .ui-listview {
	margin:0
}
.ui-selectmenu .ui-btn.ui-li-divider {
	cursor:default
}
.ui-selectmenu-hidden {
	top:-9999px;
	left:-9999px
}
.ui-selectmenu-screen {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:99
}
.ui-screen-hidden, .ui-selectmenu-list .ui-li .ui-icon {
	display:none
}
.ui-selectmenu-list .ui-li .ui-icon {
	display:block
}
.ui-li.ui-selectmenu-placeholder {
	display:none
}
.ui-selectmenu .ui-header .ui-title {
	margin:.6em 46px .8em
}
@media all and (min-width:450px) {
label.ui-select {
vertical-align:top;
display:inline-block;
width:20%;
margin:0 2% 0 0
}
.ui-select {
width:60%;
display:inline-block
}
}
.ui-selectmenu .ui-header h1:after {
	content:'.';
	visibility:hidden
}
label.ui-input-text {
	font-size:16px;
	line-height:1.4;
	display:block;
	font-weight:normal;
	margin:0 0 .3em
}
input.ui-input-text, textarea.ui-input-text {
	background-image:none;
	padding:.4em;
	line-height:1.4;
	font-size:16px;
	display:block;
	width:95%
}
input.ui-input-text {
	-webkit-appearance:none
}
textarea.ui-input-text {
	height:50px;
	-webkit-transition:height 200ms linear;
	-moz-transition:height 200ms linear;
	-o-transition:height 200ms linear;
	transition:height 200ms linear
}
.ui-input-search {
	padding:0 30px;
	width:77%;
	background-image:none;
	position:relative
}
.ui-icon-searchfield:after {
	position:absolute;
	left:7px;
	top:50%;
	margin-top:-9px;
	content:"";
	width:18px;
	height:18px;
	opacity:.5
}
.ui-input-search input.ui-input-text {
	border:0;
	width:98%;
	padding:.4em 0;
	margin:0;
	display:block;
	background:transparent none;
	outline:0!important
}
.ui-input-search .ui-input-clear {
	position:absolute;
	right:0;
	top:50%;
	margin-top:-14px
}
.ui-input-search .ui-input-clear-hidden {
	display:none
}
@media all and (min-width:450px) {
label.ui-input-text {
vertical-align:top;
display:inline-block;
width:20%;
margin:0 2% 0 0
}
input.ui-input-text, textarea.ui-input-text, .ui-input-search {
width:60%;
display:inline-block
}
.ui-input-search {
width:50%
}
.ui-input-search input.ui-input-text {
width:98%
}
}
.ui-listview {
	margin:0;
	counter-reset:listnumbering
}
.ui-content .ui-listview {
	margin:-15px
}
.ui-content .ui-listview-inset {
	margin:1em 0
}
.ui-listview, .ui-li {
	list-style:none;
	padding:0
}
.ui-li, .ui-li.ui-field-contain {
	display:block;
	margin:0;
	position:relative;
	overflow:visible;
	text-align:left;
	border-width:0;
	border-top-width:1px
}
.ui-li .ui-btn-text {
	position:relative;
	z-index:1
}
.ui-li .ui-btn-text a.ui-link-inherit {
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap
}
.ui-li-divider, .ui-li-static {
	padding:.5em 15px;
	font-size:14px;
	font-weight:bold
}
.ui-li-divider {
	counter-reset:listnumbering
}
ol.ui-listview .ui-link-inherit:before, ol.ui-listview .ui-li-static:before, .ui-li-dec {
	font-size:.8em;
	display:inline-block;
	padding-right:.3em;
	font-weight:normal;
	counter-increment:listnumbering;
	content:counter(listnumbering) ". "
}
ol.ui-listview .ui-li-jsnumbering:before {
	content:""!important
}
.ui-listview-inset .ui-li {
	border-right-width:1px;
	border-left-width:1px
}
.ui-li:last-child, .ui-li.ui-field-contain:last-child {
	border-bottom-width:1px
}
.ui-li>.ui-btn-inner {
	display:block;
	position:relative;
	padding:0
}
.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
	padding:.7em 15px .7em 15px;
	display:block
}
.ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-thumb {
	min-height:60px;
	padding-left:100px
}
.ui-li-has-icon .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-icon {
	min-height:20px;
	padding-left:40px
}
.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-count {
	padding-right:45px
}
.ui-li-has-arrow .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-arrow {
	padding-right:30px
}
.ui-li-has-arrow.ui-li-has-count .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-arrow.ui-li-has-count {
	padding-right:75px
}
.ui-li-heading {
	font-size:16px;
	font-weight:bold;
	display:block;
	margin:.6em 0;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap
}
.ui-li-desc {
	font-size:12px;
	font-weight:normal;
	display:block;
	margin:-.5em 0 .6em;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap
}
.ui-li-thumb, .ui-li-icon {
	position:absolute;
	left:1px;
	top:0;
	max-height:80px;
	max-width:80px
}
.ui-li-icon {
	max-height:40px;
	max-width:40px;
	left:10px;
	top:.9em
}
.ui-li-thumb, .ui-li-icon, .ui-li-content {
	float:left;
	margin-right:10px
}
.ui-li-aside {
	float:right;
	width:50%;
	text-align:right;
	margin:.3em 0
}
@media all and (min-width:480px) {
.ui-li-aside {
width:45%
}
}
.ui-li-divider {
	cursor:default
}
.ui-li-has-alt .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-alt {
	padding-right:95px
}
.ui-li-has-count .ui-li-count {
	position:absolute;
	font-size:11px;
	font-weight:bold;
	padding:.2em .5em;
	top:50%;
	margin-top:-.9em;
	right:38px
}
.ui-li-divider .ui-li-count, .ui-li-static .ui-li-count {
	right:10px
}
.ui-li-has-alt .ui-li-count {
	right:55px
}
.ui-li-link-alt {
	position:absolute;
	width:40px;
	height:100%;
	border-width:0;
	border-left-width:1px;
	top:0;
	right:0;
	margin:0;
	padding:0;
	z-index:2
}
.ui-li-link-alt .ui-btn {
	overflow:hidden;
	position:absolute;
	right:8px;
	top:50%;
	margin:-11px 0 0 0;
	border-bottom-width:1px;
	z-index:-1
}
.ui-li-link-alt .ui-btn-inner {
	padding:0;
	height:100%;
	position:absolute;
	width:100%;
	top:0;
	left:0
}
.ui-li-link-alt .ui-btn .ui-icon {
	right:50%;
	margin-right:-9px
}
.ui-listview * .ui-btn-inner>.ui-btn>.ui-btn-inner {
	border-top:0
}
.ui-listview-filter {
	border-width:0;
	overflow:hidden;
	margin:-15px -15px 15px -15px
}
.ui-listview-filter .ui-input-search {
	margin:5px;
	width:auto;
	display:block
}
.ui-listview-filter-inset {
	margin:-15px -5px -15px -5px;
	background:transparent
}
.ui-li.ui-screen-hidden {
	display:none
}
@media only screen and (min-device-width:768px) and (max-device-width:1024px) {
.ui-li .ui-btn-text {
overflow:visible
}
}
label.ui-slider {
	display:block
}
input.ui-slider-input {
	display:inline-block;
	width:50px
}
select.ui-slider-switch {
	display:none
}
div.ui-slider {
	position:relative;
	display:inline-block;
	overflow:visible;
	height:15px;
	padding:0;
	margin:0 2% 0 20px;
	top:4px;
	width:66%
}
a.ui-slider-handle {
	position:absolute;
	z-index:10;
	top:50%;
	width:28px;
	height:28px;
	margin-top:-15px;
	margin-left:-15px
}
a.ui-slider-handle .ui-btn-inner {
	padding-left:0;
	padding-right:0
}
@media all and (min-width:480px) {
label.ui-slider {
vertical-align:top;
display:inline-block;
width:20%;
margin:0 2% 0 0
}
div.ui-slider {
width:45%
}
}
div.ui-slider-switch {
	height:32px;
	overflow:hidden;
	margin-left:0
}
div.ui-slider-inneroffset {
	margin-left:50%;
	position:absolute;
	top:1px;
	height:100%;
	width:50%
}
a.ui-slider-handle-snapping {
	-webkit-transition:left 100ms linear
}
div.ui-slider-labelbg {
	position:absolute;
	top:0;
	margin:0;
	border-width:0
}
div.ui-slider-switch div.ui-slider-labelbg-a {
	width:60%;
	height:100%;
	left:0
}
div.ui-slider-switch div.ui-slider-labelbg-b {
	width:60%;
	height:100%;
	right:0
}
.ui-slider-switch-a div.ui-slider-labelbg-a, .ui-slider-switch-b div.ui-slider-labelbg-b {
	z-index:-1
}
.ui-slider-switch-a div.ui-slider-labelbg-b, .ui-slider-switch-b div.ui-slider-labelbg-a {
	z-index:0
}
div.ui-slider-switch a.ui-slider-handle {
	z-index:20;
	width:101%;
	height:32px;
	margin-top:-18px;
	margin-left:-101%
}
span.ui-slider-label {
	width:100%;
	position:absolute;
	height:32px;
	font-size:16px;
	text-align:center;
	line-height:2;
	background:0;
	border-color:transparent
}
span.ui-slider-label-a {
	left:-100%;
	margin-right:-1px
}
span.ui-slider-label-b {
	right:-100%;
	margin-left:-1px
}

▼style.css　のソースコード

* {
  font-family: "メイリオ","Meiryo",verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
}
.wide {
  width: 100%;
}
.bold {
  font-weight: bold;
}
/* テキストを省略せずに表示する */
.ui-header .ui-title,.ui-footer .ui-title,.ui-btn-inner,.ui-li-heading,.ui-li .ui-btn-text a.ui-link-inherit,.ui-li-desc {
  overflow: visible;
  white-space: normal;
}
#map {
  width: 100%;
  height: 300px;
  border: 8px solid #ccc;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/*入力フォームの背景を調整*/
textarea.ui-body-b,input.ui-body-b {
  background-color: white;
}
/*見出しとフォーム部品の間の余白を調整*/
.ui-field-contain:first-child {
  padding-top: 0;
}
]]> http://www.vi-de-bu.com/2011/12/27/jquery-mobile%e3%81%a7%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab%e3%82%b5%e3%82%a4%e3%83%88%e3%82%92%e4%bd%9c%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f/feed/ 0 jQueryで表現するナビゲーションやボタンのネタ（その4） http://www.vi-de-bu.com/2011/12/26/jquery%e3%81%a7%e8%a1%a8%e7%8f%be%e3%81%99%e3%82%8b%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%84%e3%83%9c%e3%82%bf%e3%83%b3%e3%81%ae%e3%83%8d%e3%82%bf4/ http://www.vi-de-bu.com/2011/12/26/jquery%e3%81%a7%e8%a1%a8%e7%8f%be%e3%81%99%e3%82%8b%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%84%e3%83%9c%e3%82%bf%e3%83%b3%e3%81%ae%e3%83%8d%e3%82%bf4/#comments Mon, 26 Dec 2011 10:44:12 +0000 vi-de-bu http://www.vi-de-bu.com/?p=781 Continue reading →]]> jQueryでナビゲーションやボタンを変わった見せ方にするパート4です。パート1、パート2、パート3と同じ感じで、さらに一手間加えたナビゲーションです。ナビゲーション以外にも使いたくなるアニメーションです。

sample：jQueryで表現するナビゲーションやボタンのサンプル
ダウンロード：jQueryで表現するナビゲーションやボタンをダウンロード
記事元：desizn tech
※実際のコードは下記になります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryで表現する色アニメーション</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.color.js"></script>
<script type="text/javascript">
	// 背景色アニメーション
	$(document).ready(function(){
	// マウスオーバーでフォント色が停止する
	$('.fourth a').hover(function() { //mouseover
		var col = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
		$(this).animate({'backgroundColor': col},500);
	},function() { //mouseout
		$(this).animate({'backgroundColor': col},500);
	});
	});
</script>
<style type="text/css">
body{
	margin:0;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo','メイリオ','ＭＳ Ｐゴシック',sans-serif;
}
a {
    color:#cc2200;
}
#wrapper{
     margin:20px auto;
     width:800px;
     background:#333;
     padding:10px;
}
#wrapper h1{
     padding:2px 0px;
     color:#fff;
text-align: center;
}
#wrapper h2{
     padding:2px 0px;
     color:#fff;
text-align: center;
}
#menu{
     margin:0 auto;
     width:600px;
     height:40px;
}
#menu ul {
     margin:0;
     list-style-type:none;
}

#menu ul li{
     float:left;
     padding-left:10px;
}
.fourth a {
	font-size:24px;
	color:#fff;
	text-decoration:none;
	background-color:#00cccc;
	padding:5px;
}
</style>
</head>
<body>
<div id="wrapper">
	<h1>jQueryで表現する色アニメーションその5</h1>
	<h2>マウスオーバー色で停止</h2>
	<div id="menu" class="fourth">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Portfolio</a></li>
			<li><a href="#">Contact</a></li>
			<li><a href="#">Q＆A</a></li>
		</ul>
	</div>
</div>
</body>
</html>
]]> http://www.vi-de-bu.com/2011/12/26/jquery%e3%81%a7%e8%a1%a8%e7%8f%be%e3%81%99%e3%82%8b%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%84%e3%83%9c%e3%82%bf%e3%83%b3%e3%81%ae%e3%83%8d%e3%82%bf4/feed/ 0 jQueryで表現するナビゲーションやボタンのネタ（その3） http://www.vi-de-bu.com/2011/12/26/jquery%e3%81%a7%e8%a1%a8%e7%8f%be%e3%81%99%e3%82%8b%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%84%e3%83%9c%e3%82%bf%e3%83%b3%e3%81%ae%e3%83%8d%e3%82%bf3/ http://www.vi-de-bu.com/2011/12/26/jquery%e3%81%a7%e8%a1%a8%e7%8f%be%e3%81%99%e3%82%8b%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%84%e3%83%9c%e3%82%bf%e3%83%b3%e3%81%ae%e3%83%8d%e3%82%bf3/#comments Mon, 26 Dec 2011 10:13:14 +0000 vi-de-bu http://www.vi-de-bu.com/?p=776 Continue reading →]]> jQueryでナビゲーションやボタンを変わった見せ方にするパート3です。前回、前々回と同じ感じで、一手間加えたナビゲーションです。

sample：jQueryで表現するナビゲーションやボタンのサンプル
ダウンロード：jQueryで表現するナビゲーションやボタンをダウンロード
記事元：desizn tech
※実際のコードは下記になります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryで表現する色アニメーションその4：美Deブ</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.color.js"></script>
<script type="text/javascript">
	// 背景色アニメーション
	$(document).ready(function(){
	// フォント色を毎時間変更する
	original = $('.third a').css('background-color');
	$('.third a').hover(function() { //mouseover
		var col = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
		$(this).stop().animate({'backgroundColor': col}, 1000);
	},function() { //mouseout
		$(this).stop().animate({'backgroundColor': original},500);
	});
	});
</script>
<style type="text/css">
body{
	margin:0;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo','メイリオ','ＭＳ Ｐゴシック',sans-serif;
    background:#333;
}
#wrapper{
     margin:20px auto;
     width:800px;
     padding:10px;
}
#wrapper h1{
     padding:2px 0px;
     color:#fff;
text-align: center;
}
#wrapper h2{
     padding:2px 0px;
     color:#fff;
text-align: center;
}
#menu{
     margin:0 auto;
     width:600px;
     height:40px;
}
#menu ul {
     margin:0;
     list-style-type:none;
}

#menu ul li{
     float:left;
     padding-left:10px;
}
.third a {
	font-size:24px;
	color:#fff;
	text-decoration:none;
	background:#cc0022;
	padding:5px;
}

</style>
</head>
<body>
<div id="wrapper">
	<h1>jQueryで表現する色アニメーションその4</h1>
	<h2>マウスオーバーの色が毎回変化する</h2>
	<div id="menu" class="third">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Portfolio</a></li>
			<li><a href="#">Contact</a></li>
			<li><a href="#">Q＆A</a></li>
		</ul>
	</div>
</div>
</body>
</html>
]]> http://www.vi-de-bu.com/2011/12/26/jquery%e3%81%a7%e8%a1%a8%e7%8f%be%e3%81%99%e3%82%8b%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%84%e3%83%9c%e3%82%bf%e3%83%b3%e3%81%ae%e3%83%8d%e3%82%bf3/feed/ 0 jQueryで表現するナビゲーションやボタンのネタ（その2） http://www.vi-de-bu.com/2011/12/26/jquery%e3%81%a7%e8%a1%a8%e7%8f%be%e3%81%99%e3%82%8b%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%84%e3%83%9c%e3%82%bf%e3%83%b3%e3%81%ae%e3%83%8d%e3%82%bf2/ http://www.vi-de-bu.com/2011/12/26/jquery%e3%81%a7%e8%a1%a8%e7%8f%be%e3%81%99%e3%82%8b%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%84%e3%83%9c%e3%82%bf%e3%83%b3%e3%81%ae%e3%83%8d%e3%82%bf2/#comments Mon, 26 Dec 2011 10:04:04 +0000 vi-de-bu http://www.vi-de-bu.com/?p=769 Continue reading →]]> jQueryでナビゲーションやボタンを変わった見せ方にするパート2です。こちらも前回と同じく、ちょっとした一手間で、見栄えが変わるのでオススメです。

sample：jQueryで表現するナビゲーションやボタンのサンプル
ダウンロード：jQueryで表現するナビゲーションやボタンをダウンロード
記事元：desizn tech
※実際のコードは下記になります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryで表現する色アニメーションその2：美Deブ</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.color.js"></script>
<script type="text/javascript">
	// 背景色アニメーション
	$(document).ready(function(){
	// フォント色アニメーション
	$(".second a").stop().hover(function() {
	$(this).stop().animate({ color: "#00eeff" }, 400);
	},function() {
	$(this).animate({ color: "#ffff00" }, 500);
	});
	});
</script>
<style type="text/css">
body{
	margin:0;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo','メイリオ','ＭＳ Ｐゴシック',sans-serif;
	background:#FFFFF;
}
#wrapper{
	margin:20px auto;
	width:800px;
	padding:10px;
}
#wrapper h1{
	padding:2px 0px;
	color:#303030;
	text-align: center;
}
#wrapper h2{
	padding:2px 0px;
	color:#303030;
	text-align: center;
}
#menu{
	margin:0 auto;
	width:600px;
	height:40px;
}
#menu ul {
	margin:0;
	list-style-type:none;
}

#menu ul li{
	float:left;
	padding-left:10px;
}
.second a {
	font-size:24px;
	color:#fff;
	text-decoration:none;
	background:#303030;
	padding:5px;
}
</style>
</head>
<body>
<div id="wrapper">
	<h1>jQueryで表現するナビゲーションやボタンのネタその2</h1>
	<h2>フォント色アニメーション編</h2>
	<div id="menu" class="second">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Portfolio</a></li>
			<li><a href="#">Contact</a></li>
			<li><a href="#">Q＆A</a></li>
		</ul>
	</div>
</div>
</body>
</html>
]]> http://www.vi-de-bu.com/2011/12/26/jquery%e3%81%a7%e8%a1%a8%e7%8f%be%e3%81%99%e3%82%8b%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%84%e3%83%9c%e3%82%bf%e3%83%b3%e3%81%ae%e3%83%8d%e3%82%bf2/feed/ 0 jQueryで表現するナビゲーションやボタンのネタ http://www.vi-de-bu.com/2011/12/26/jquery%e3%81%a7%e8%a1%a8%e7%8f%be%e3%81%99%e3%82%8b%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%84%e3%83%9c%e3%82%bf%e3%83%b3%e3%81%ae%e3%83%8d%e3%82%bf1/ http://www.vi-de-bu.com/2011/12/26/jquery%e3%81%a7%e8%a1%a8%e7%8f%be%e3%81%99%e3%82%8b%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%84%e3%83%9c%e3%82%bf%e3%83%b3%e3%81%ae%e3%83%8d%e3%82%bf1/#comments Mon, 26 Dec 2011 09:48:16 +0000 vi-de-bu http://www.vi-de-bu.com/?p=767 Continue reading →]]> jQueryでナビゲーションやボタンを変わった見せ方にしたいと考えている方にオススメです。ちょっとした一手間で見え方がすごく変わるので、オススメです。

sample：jQueryで表現するナビゲーションやボタンのサンプル
ダウンロード：jQueryで表現するナビゲーションやボタンをダウンロード
記事元：desizn tech
※実際のコードは下記になります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryで表現する色アニメーション：美Deブ</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.color.js"></script>
<script type="text/javascript">
	// 背景色アニメーション
	$(document).ready(function(){
			$(".first a").hover(function() {
			$(this).stop().animate({ backgroundColor: "#00aadd" }, 600);
	},function() {
			 $(this).stop().animate({ backgroundColor: "#b8dd00" }, 400);
	});
	});
</script>
<style type="text/css">
body{
	margin:0;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo','メイリオ','ＭＳ Ｐゴシック',sans-serif;
	background:#333;
}
#wrapper{
	margin:20px auto;
	width:800px;
	padding:10px;
}
#wrapper h1{
	padding:2px 0px;
	color:#fff;
	text-align:center;
}
#wrapper h2{
	padding:2px 0px;
	color:#fff;
	text-align:center;
}
#menu{
	margin:0 auto;
	width:600px;
	height:40px;
}
#menu ul {
	margin:0;
	list-style-type:none;
}

#menu ul li{
	float:left;
	padding-left:10px;
}
.first a{
	font-size:24px;
	text-transform: normal;
	letter-spacing: -0.1;
	color:#111111;
	text-decoration:none;
	background:#ffff00;
	padding:5px;
}
</style>

</head>
<body>
<div id="wrapper">
	<h1>jQueryで表現するナビゲーションやボタンのネタ</h1>
	<h2>背景色アニメーション編</h2>
	<div id="menu" class="first">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Portfolio</a></li>
			<li><a href="#">Contact</a></li>
			<li><a href="#">Q＆A</a></li>
		</ul>
	</div>
</div>
</body>
</html>
]]> http://www.vi-de-bu.com/2011/12/26/jquery%e3%81%a7%e8%a1%a8%e7%8f%be%e3%81%99%e3%82%8b%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%84%e3%83%9c%e3%82%bf%e3%83%b3%e3%81%ae%e3%83%8d%e3%82%bf1/feed/ 0 jQueryをつかって文字をカッコイイ感じに表現 http://www.vi-de-bu.com/2011/12/26/jquery%e3%82%92%e3%81%a4%e3%81%8b%e3%81%a3%e3%81%a6%e6%96%87%e5%ad%97%e3%82%92%e3%82%ab%e3%83%83%e3%82%b3%e3%82%a4%e3%82%a4%e6%84%9f%e3%81%98%e3%81%ab%e8%a1%a8%e7%8f%be/ http://www.vi-de-bu.com/2011/12/26/jquery%e3%82%92%e3%81%a4%e3%81%8b%e3%81%a3%e3%81%a6%e6%96%87%e5%ad%97%e3%82%92%e3%82%ab%e3%83%83%e3%82%b3%e3%82%a4%e3%82%a4%e6%84%9f%e3%81%98%e3%81%ab%e8%a1%a8%e7%8f%be/#comments Mon, 26 Dec 2011 09:01:09 +0000 vi-de-bu http://www.vi-de-bu.com/?p=757 Continue reading →]]> jQueryをつかって文字をカッコイイ感じに表現したいと思います。まったく使い道が不明ですが、こんな事もできるんだという再確認の記事です。

sample：jQueryをつかって文字をカッコイイ感じに表現
配給元：3D Flying Text in jQuery
※実際のコードは下記になります。

[/html]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=1024">
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>jQueryで文字をかっこよくみせる方法：美Deブ</title>
<style type="text/css" media="screen">
body {
	background:#000;
	margin:0;
	overflow:hidden;
	padding:0;
}
li {
	color:#fff;
	font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'メイリオ', 'ＭＳ Ｐゴシック', sans-serif;
	list-style: none;
	font-weight: bold;
}
a {
	text-decoration:none;
	color: #FFF;
}
</style>
</head>
<body>
<ul>
	<li><a href="#">美Deブ</a></li>
	<li><a href="#">CSS3</a></li>
	<li><a href="#">HTML5</a></li>
	<li><a href="#">iPhone</a></li>
	<li><a href="#">javascript</a></li>
	<li><a href="#">jQuery</a></li>
	<li><a href="#">PHP</a></li>
	<li><a href="#">Twitter</a></li>
	<li><a href="#">WEB情報</a></li>
	<li><a href="#">WordPress</a></li>
</ul>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

	// 各要素（x/y/z）の配列をセットする
	var x = new Array();
	var y = new Array();
	var z = new Array();

	//listタグをitemsにセット
	var items = $('li');

	//itemsに生命を与える
	function animate()
	{

		//各項目ステップを実行
		for(i = items.length - 1; i >= 0; i--){

			//可変する動きをつけるための記述
			var xVar = 30 + x[i] 			// x value
			var yVar = 50 + y[i] * z[i]++;	// y value, 画面の下部に向かって移動する
			var zVar = 10 * z[i]++;		// z value, テキストを大きくする

			// テキストの位置が画面上に残っているかどうかを確認。
			// 100は右端または一番下、0が上または左。
			// zの値に対しての％はフォントサイズ
			if (!xVar | xVar < 0 | xVar > 90|
				yVar < 0 | yVar > 90 |
				zVar < 0 | zVar > 1500)
			{
				//画面の外なら、ランダムにスタート地点を選ぶ。
				x[i]= Math.random() * 2 - 1;
				y[i] = Math.random() * 2 - 1;
				z[i] = 2; 

			}
			else
			{
				//画面上にまだある場合は、適切なスタイルを適用します。

				$(items[i]).css("position", "absolute"); // 周りのテキストを移動できることを確認。
				$(items[i]).css("top", xVar+"%");  // y value
				$(items[i]).css("left", yVar+"%"); // x value

				$(items[i]).css("fontSize", zVar+"%"); // font size (遠近法の錯覚。)
				$(items[i]).css("opacity",(zVar)/3000); // この距離からフェードイン。.
			}
		}

		setTimeout(animate, 9);
	}

animate();
</script>
</html>
1
]]> http://www.vi-de-bu.com/2011/12/26/jquery%e3%82%92%e3%81%a4%e3%81%8b%e3%81%a3%e3%81%a6%e6%96%87%e5%ad%97%e3%82%92%e3%82%ab%e3%83%83%e3%82%b3%e3%82%a4%e3%82%a4%e6%84%9f%e3%81%98%e3%81%ab%e8%a1%a8%e7%8f%be/feed/ 0