10分でできるかな

jQuery

ASCII.jpの「10分でわかる！ jQuery Mobileのキホン」を元に、
本当に10分でわかってできるか挑戦。した結果。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>10分でできるjQueryMobileに挑戦</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css">
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>
</head>

<body>
<div data-role="page" id="index">
<div data-role="header"><h1>10分でできるかな</h1></div>
<div data-role="content">
<h2>3分目まではzen-codingでテンプレ化</h2>
<p>zen化してどーする○|￣|_＞リストはちゃんとタグ打ち。</p>
<ul data-role="listview" data-inset="true">
<li><a href="#list01">jQueryMobileの0分目</a></li>
<li><a href="#list02">jQueryMobileの1分目</a></li>
<li><a href="#list03">jQueryMobileの3分目</a></li>
<li><a href="#list04">jQueryMobileの5分目</a></li>
<li><a href="#list05">jQueryMobileの8分目</a></li>
</ul>
</div>
<div data-role="footer"><h4>2012 &copy; fight2012</h4></div>
</div>
<div data-role="page" id="list01">
<div data-role="header">
<a href="#index" data-direction="reverse">TOP</a>
<h1>10分でできるかな</h1>
</div>
<div data-role="content">
<h2>jQueryMobileの0分目</h2>
<p>基本のHTML5の記述に追記。</p>
<blockquote>jQuery Mobileは、HTMLのhead要素で、<br>
（1）jQueryのスクリプトファイル<br>
（2）jQuery Mobileのスクリプトファイル<br>
（3）jQuery MobileのCSSファイル<br>
を読み込むだけで利用できます。</blockquote>
<p>外部ファイルを読み込みに行っても、<br>
自分のサーバにダウンロードしてリンクさせても可。</p>
</div>
<div data-role="footer"><h4>2012 &copy; fight2012</h4></div>
</div>
<div data-role="page" id="list02">
<div data-role="header">
<a href="#index" data-direction="reverse">TOP</a>
<h1>10分でできるかな</h1>
</div>
<div data-role="content">
<h2>jQueryMobileの1分目</h2>
<p>基本HTML5＋jsファイル読み込みリンクを記述、<br>
ができたら、metaタグ追加で「Viewport」を記述する。</p>
<blockquote>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;</blockquote>
<p>これでhead内に追記する部分は完成。</p>
</div>
<div data-role="footer"><h4>2012 &copy; fight2012</h4></div>
</div>
<div data-role="page" id="list03">
<div data-role="header">
<a href="#index" data-direction="reverse">TOP</a>
<h1>10分でできるかな</h1>
</div>
<div data-role="content">
<h2>jQueryMobileの3分目</h2>
<blockquote>
jQuery Mobileでは、data-role属性「page」を指定したdiv要素の内側にページの中身を記述します<br>
data-role「page」の内側に書くのは、「ヘッダー」「コンテンツ」「フッター」の3つ<br>
ヘッダーはdata-role属性「header」、コンテンツはdata-role属性「content」、フッターはdata-role属性「footer」を、指定したdiv要素でそれぞれ作成できます
</blockquote>
<p>このpageの雛形も追記してから、<br>
zenでスパッと記述できるように設定。</p>
</div>
<div data-role="footer"><h4>2012 &copy; fight2012</h4></div>
</div>
<div data-role="page" id="list04">
<div data-role="header">
<a href="#index" data-direction="reverse">TOP</a>
<h1>10分でできるかな</h1>
</div>
<div data-role="content">
<h2>jQueryMobileの5分目</h2>
<blockquote>コンテンツ領域（&lt;div data-role="content"&gt;〜&lt;/div&gt;内）を記述</blockquote>
<p>zen化したりの寄り道で、listタグを打ち始める時点で10分を迎えている。</p>
</div>
<div data-role="footer"><h4>2012 &copy; fight2012</h4></div>
</div>
<div data-role="page" id="list05">
<div data-role="header">
<a href="#index" data-direction="reverse">TOP</a>
<h1>10分でできるかな</h1>
</div>
<div data-role="content">
<h2>jQueryMobileの8分目</h2>
<p>5分目でlistをつくり、リンクも作ったので、<br>
リンク先のコンテンツを作る段階。<br>
この先はコンテンツ内容でいくらでも時間がかかってくる。<br>
ちなみにこのデータは、<br>
5分目listタグ打ちからここまでで65分。<br>
全工程75分。</p>
</div>
<div data-role="footer"><h4>2012 &copy; fight2012</h4></div>
</div>
</body>
</html>