jQueryMobileって便利ですねぃ

2014年2月6日 watana.404 WEB Tips, その他, WEB作成, ネタ, 日々徒然 0

ココ最近スマートフォン用のサイトを考える事をしてまして、、、
力技であれこれいじくっていたのですが、「jQueryMobile」を使ってみてはどうかとデザインをしている方に言われましてどのようなものかをいじってみました。

導入方法はいたって簡単で、
jQueryMobileのサイトに行ってサイトの一番下にある部分

jq_samp2_1サイトを開いて・・・
↓↓↓
jq_samp2_2
「Quick Access」の所にある
CDN CSS・CDN JS・CDN JS と3つ縦に並んでるのをそのままhtmlのヘッダー部分へとぶち込む。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" >
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>



↑こんな感じで入れとく。



※そのままコピー＆ペーストすると「http:」が抜けてるので一応入れといたほうがいいと思う。


1枚のhtmlの構成としては非常に簡単で、


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>\r\n<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" type="text/css" media="screen, all" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<title>てけとう</title>
</head>
<body>
	<div data-role="page">
		<div data-role="header">
			<h1>ページのヘッダ部分</h1>
		</div><!-- /header-->
		<div data-role="content">
			ここに中身が入る
		</div><!-- /content -->
		<div data-role="footer">
			<h2>ページのフッタ部分</h2>
		</div><!-- /footer-->
	</div><!-- /page -->
</body>
</html>



と、こんな感じで出来ている。
 この状態だけでもちゃんとヘッダとフッタが出来ている。

「data-role=”content”」の領域の部分にコンテンツが入ることになる。


ちょこっといじってみた感じ、一々ページの動きがどうとかこうとかを頭を悩ませながらやらなくていいのは助かる・・・

実際動いてるのを見たい場合は、風俗の店舗のサイトで利用している所もあるみたいなので探してみるといいかもしれない。


また、ざっくりとある程度の見栄えを決めれるサイトもあるので、開発作業の短縮が出来る。

テーマーローラー


デザイン画面（ブラウザ上で利用できるのでらくちん）


jq_samp1

・・・これってもしかして、、、デザイナー要らなくね？？？(´・ω・｀)


Σ(´・ω・｀)＜もしかして、てめーでデザインしとけやﾎｹﾞｪ・・・って事か！？