jQuery MobileでIPhoneサイト制作＠2月6日（月） - WEBデザインを学ぶ

昨日の消えたwordpressは、以前のドメインにリンクしてるので、作り直した方が早いとの事。リンクを今のに更新出来ないだろうか？？

jQuery MobileでIPhoneサイト制作

●参考「10分でわかる！ jQuery Mobileのキホン」
◎headerに３つのファイルを読み込む

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

◎「Viewport」→スマートフォン用の解像度（一般的には横幅320px）で表示される「スマートフォンサイト」になる。
◎横と縦のサイズの最適化のために、min.maxを記述する。

<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1">

◎これが基本の１ページ。この基本構造を重複して、2.3p~を作る。
ページtopは、id="index"

<div data-role="page"id="index">
<div data-role="header">
<h1>ASCII.jp</h1>
</div>
<div data-role="content">
<p>コンテンツの内容</p>
</div>
<div data-role="footer">
<h4>&copy; 2012 ASCII </h4>
</div>

◎data-theme="b"
で色が変わる。（a b c d e )
◎ul要素に設定しているdata-role属性「listview」はリストをスマートフォン用に最適化して表示する設定
◎data-inset属性「true」はリストの周りに余白を付けて角丸にする設定

↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery Mobileで講師日和</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div data-role="page" id="index" data-theme="b">
<div data-role="header" data-theme="b">
    <h1>講師日和</h1>
 </div>
 <div data-role="content">
    <ul data-role="listview" data-inset="true">
<li><a href="#book8">jQuery Mobile スマートフォンサイト デザイン入門</a></li>
<li><a href="#book7">標準HTML5タグリファレンス</a></li>
<li><a href="#book6">リスティング広告 プロの思考回路</a></li>
<li><a href="#book5">iPhone+Android スマートフォンサイト制作入門</a></li>
<li><a href="#book4">HTML5+JavaScript アイデア＆実践サンプル</a></li>
<li><a href="#book3">プロが教えるデジカメ撮影テクニック</a></li>
<li><a href="#book2">Web制作の現場で使う jQueryデザイン入門</a></li>
<li><a href="#book1">現場でプロが培った Google Analyticsの使い方</a></li>
</ul>
  </div>
  <div data-role-"footer">
   <h4>&copy;2012 ASCII</h4>
   </div>
   </div>
   
  <div data-role="page" id="book8">
  <div data-role="header">
  <a href="#index" data-direction="reverse">TOP</a>
  <h1>講師日和</h1>
  </div>
  <div data-role="content">
     <h2>jQuery Mobile スマートフォンサイト デザイン入門</h2>
	<p>もうスマホサイトで手間取らない!　モバイルフレームワーク「jQuery Mobile」を使ったサイト制作の基本から、高度なカスタマイズまで、jQuery本売り上げNo.1の著者らが徹底解説。</p>
      <p><a href="http:///amazon.co.jp/o/ASIN/4048706691"><img src="http://images.amazon.com/images/P/4048706691.09._OU09_SCMZZZZZZZ_.jpg" alt="jQuery Mobile スマートフォンサイト デザイン入門" /></a></p>
    </div>
    <div data-role="footer">
      <h4>&copy; 2012講師日和</h4>
      </div>
      </div>
</body>
</html>

●参考「JQueryMoble日本語リファレンス，スライダーとボタンの作成
http://dev.screw-axis.com/doc/jquery_mobile/
http://dev.screw-axis.com/doc/jquery_mobile/#/doc/jquery_mobile/overview/start_guide/

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>My page</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1,maxmun-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>

<body>
<div data-role="page">
    <div data-role="header">
        <h1>MyTitle</h1>
       </div><!--/header-->
       
       <div data-role="content" data-theme="a">
       <p>Hello world</p>
       <ul data-role="listview" data-inset="true" data-filter="true">
       <li><a href="#">Acura</a></li>
       <li><a href="#">Audi</a></li>
       <li><a href="#">BMW</a></li>
       <li><a href="#">Cadillac</a></li>
       <li><a href="#">Rerrari</a></li>
       </ul>
       <form>
     <label for="slider-0">input slider:</label>
     <input type="range" nane="slider" id="slider-0" value="25" min="0" max="100" />
    </form>
    <a href="#" data-role="button" data-icon="star" data-theme="e">Star Button</a>
       </div><!--/content-->
       </div>
</body>
</html>

memo&後で読む

●safariの「開発」→「ユーザーエージョント」からも見れる。
●西畑一馬のjQuery Mobileデザイン入門
http://ascii.jp/elem/000/000/602/602620/index-2.html
●実践！iPhone＆Androidサイト制作ガイド
http://ascii.jp/elem/000/000/533/533011/