HTML5 + jQuery mobileによるスマートフォン対応サイト作成(by Webサービス勉強会にて学んだことを実践)
Dreamweaver CS5.5がjQuery Mobileに正式に対応し、
事実上のスタンダードとなったといえるjQuery mobile。ますます注目ですね。
各コンテンツはいずれも同じHTMLソース内に実装しています。
そして、ページ遷移やBackボタンはjQuery mobileにて提供されるため、
ページ作成に集中できるというわけです。
１．HTML内にダウンロード・配置したjQuery mobileとCSS定義を追加。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<!-- ページ。ページごとにユニークなidを指定(同じページ内で重複させない)-->
<div id="basic" data-role="page">
<!-- ヘッダ -->
<!-- data-theme属性を変えることで色を変更可能 -->
<div data-role="header" data-theme="e"><h1>トップページ</h1></div>
<!-- コンテンツ -->
<div id="title" data-role="content">
<ul data-role="listview">
<li><a href="#about">会社案内</a></li>
<li><a href="#saiyo">採用情報</a></li>
<li><a href="#ir">IR情報</a></li>
<li><a href="#shachou">社長挨拶</a></li>
<li><a href="#service">サービス一覧</a></li>
<li><a href="#inquary">お問い合わせ</a></li>
</ui>
</div>
３．各コンテンツ作成。 ページのidを、トップページから遷移させたいidと合わせるだけ。
<!-- 会社案内 START -->
<!-- ぺージ -->
<div id="about" data-role="page">
<!-- ヘッダー -->
<div data-role="header" data-theme="e"><h1>会社案内</h1></div>
<!-- コンテンツ -->
<div id="title" data-role="content">
会社案内：我が社はhogehoge
</div>
<!-- フッター -->
<div data-role="footer" data-position="fixed">copyright hogehoge</div>
</div><!-- /about -->
<!-- 会社案内 END -->
意外と表現力のあるサイトが作れる。
AndroidやiPhoneなどハードの違いを気にすることなく、作りたいコンテンツが作れるのは大きな魅力。
0 件のコメント:
コメントを投稿