jQueryMobileで作るプレゼン資料
jQueryMobileで第2回サイトプレゼン資料を作ってみました。
プレビュー
↓別ウィンドウを開いて見る
第2回プレゼンテーション
※おすすめQRコード読み取りアプリ
お父さんQR
カテゴリ: ユーティリティ
サイズ: 2.3 MB
価格: 無料
コード
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>第2回プレゼンテーション</title> <link rel="stylesheet" href="g.min.css"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css"> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> </head> <body> <div data-role="page" id="index" data-theme="g"> <div data-role="header" data-theme="g"> <a href="#page1" data-icon="arrow-r" class="ui-btn-right" data-iconpos="right" data-transition="slide">次へ</a> <h1>2012年8月10日</h1> </div> <div data-role="content" data-theme="g"> <div align="center"> <h2 class="h1">第2回サイトプレゼン</h2> </div> </div> <div data-role="footer" data-theme="g"> <h4>© 2012 vinton </h4> </div> </div> <div data-role="page" id="page1" data-theme="g"> <div data-role="header" data-theme="g"> <h1>テーマは・・・</h1> <a href="#index" data-direction="reverse" data-icon="arrow-l" class="ui-btn-left" data-iconpos="left" data-transition="slide">戻る</a> </div> <div data-role="content" data-theme="g"> <div align="center"> <a href="#page2" data-transition="pop"><h2 class="h1">2回目のテーマは・・・</h2></a> </div> </div> <div data-role="footer" data-theme="g"> <h4>© 2012 vinton </h4> </div> </div> <div data-role="page" id="page2" data-theme="g"> <div data-role="header" data-theme="g"> <a href="#page3" data-icon="arrow-r" class="ui-btn-right" data-iconpos="right" data-transition="slide">次へ</a> <h1>テーマ</h1> <a href="#page1" data-direction="reverse" data-icon="arrow-l" class="ui-btn-left" data-iconpos="left" data-transition="slide">戻る</a> </div> <div data-role="content" data-theme="g"> <div align="center"> <h2 id="sitetheme" class="h1">"将棋のポータルサイト"</h2> </div> <ul data-role="listview" data-inset="true" data-theme="g" data-divider-theme="g"> <li data-role="list-divider">メニュー</li> <li>将棋ニュース</li> <li>将棋用品の紹介</li> <li>将棋本の紹介</li> <li>今日の詰め将棋</li> <li>棋譜ビューワ</li> </ul> </div> <div data-role="footer" data-theme="g"> <h4>© 2012 vinton </h4> </div> </div> <div data-role="page" id="page3" data-theme="g"> <div data-role="header" data-theme="g"> <a href="#page4" data-icon="arrow-r" class="ui-btn-right" data-iconpos="right" data-transition="slide">次へ</a> <h1>サイトイメージ</h1> <a href="#page2" data-direction="reverse" data-icon="arrow-l" class="ui-btn-left" data-iconpos="left" data-transition="slide">戻る</a> </div> <div data-role="content" data-theme="g"> <div align="center"> <h2 class="h1">目指すサイト</h2> <p>YAHOO!JAPANやlivedoorなどのポータルサイト</p> <a href="#siteimage" data-rel="dialog" data-transition="pop"><img src="http://jsrun.it/assets/v/2/9/W/v29WH.jpg" ></a> </div> </div> <div data-role="footer" data-theme="g"> <h4>© 2012 vinton </h4> </div> </div> <div data-role="page" id="siteimage" data-theme="g"> <div data-role="content" data-theme="g"> <div align="center"> <a href="#page3"><img src="http://webgaku.hotcom-web.com/images/0809-4.jpg" width="100%"></a> </div> </div> </div> <div data-role="page" id="page4" data-theme="g"> <div data-role="header" data-theme="g"> <a href="#page5" data-icon="arrow-r" class="ui-btn-right" data-iconpos="right" data-transition="slide">次へ</a> <h1>棋譜ビューワ</h1> <a href="#page3" data-direction="reverse" data-icon="arrow-l" class="ui-btn-left" data-iconpos="left" data-transition="slide">戻る</a> </div> <div data-role="content" data-theme="g"> <div align="center"> <h2 class="h1">Kifu for Flash</h2> </div> <div align="center"> <a href="http://webgaku.hotcom-web.com/kifu/example.html" target="_blank">実際の動きはこちら</a> <script src="http://www.gmodules.com/ig/ifr?url=http://nitoyon.googlepages.com/embed_flash.xml&up_url=http%3A%2F%2Fwebgaku.hotcom-web.com%2Fkifu%2FKifu.swf%20&up_background=%23ffffff&up_cache=0&up_swfver=9&synd=open&w=580&h=500&title=&border=%23ffffff%7C0px%2C1px+solid+%2399BB66%7C0px%2C2px+solid+%23AACC66%7C0px%2C2px+solid+%23BBDD66&output=js"></script> </div> </div> <div data-role="footer" data-theme="g"> <h4>© 2012 vinton </h4> </div> </div> <div data-role="page" id="page5" data-theme="g"> <div data-role="header" data-theme="g"> <a href="#page6" data-icon="arrow-r" class="ui-btn-right" data-iconpos="right" data-transition="slide">次へ</a> <h1>ページ構成</h1> <a href="#page4" data-direction="reverse" data-icon="arrow-l" class="ui-btn-left" data-iconpos="left" data-transition="slide">戻る</a> </div> <div data-role="content" data-theme="g"> <div align="center"> <h2 class="h1">ページ構成</h2> </div> <ul data-role="listview" data-inset="true" data-theme="g" data-divider-theme="g"> <li data-role="list-divider">全4ページを予定</li> <li>トップページ</li> <li>リンク集ページ</li> <li>将棋のルールページ</li> <li>戦法別解説ページ</li> </ul> </div> <div data-role="footer" data-theme="g"> <h4>© 2012 vinton </h4> </div> </div> <div data-role="page" id="page6" data-theme="g"> <div data-role="header" data-theme="g"> <a href="#page7" data-icon="arrow-r" class="ui-btn-right" data-iconpos="right" data-transition="slide">次へ</a> <h1>使用jQuery&API</h1> <a href="#page5" data-direction="reverse" data-icon="arrow-l" class="ui-btn-left" data-iconpos="left" data-transition="slide">戻る</a> </div> <div data-role="content" data-theme="g"> <div align="center"> <h2 class="h1">使用jQuery&API</h2> </div> <ul data-role="listview" data-inset="true" data-theme="g" data-divider-theme="g"> <li data-role="list-divider">jQuery</li> <li>jQuery UI(タブメニュー)</li> <li>easySlider(横スライダー)</li> </ul> <ul data-role="listview" data-inset="true" data-theme="g" data-divider-theme="g"> <li data-role="list-divider">API</li> <li>Amazon API</li> <li>Google API</li> </ul> </div> <div data-role="footer" data-theme="g"> <h4>© 2012 vinton </h4> </div> </div> <div data-role="page" id="page7" data-theme="g"> <div data-role="header" data-theme="g"> <a href="#page8" data-icon="arrow-r" class="ui-btn-right" data-iconpos="right" data-transition="slide">次へ</a> <h1>製作工程・期間</h1> <a href="#page6" data-direction="reverse" data-icon="arrow-l" class="ui-btn-left" data-iconpos="left" data-transition="slide">戻る</a> </div> <div data-role="content" data-theme="g"> <div align="center"> <h2 class="h1">製作工程予定</h2> </div> <ul data-role="listview" data-inset="true" data-theme="g" data-divider-theme="g"> <li data-role="list-divider">期間(14日)</li> <li>1.レンタルサーバー&ドメインの確保:1日</li> <li>2.HTML5の構築:2日</li> <li>3.CSSの適用:3日</li> <li>4.jQueryの設置:2日</li> <li>5.各種APIの設置:4日</li> <li>6.調整:4日</li> </ul> </div> <div data-role="footer" data-theme="g"> <h4>© 2012 vinton </h4> </div> </div> <div data-role="page" id="page8" data-theme="g"> <div data-role="header" data-theme="g"> <h1>最後に</h1> <a href="#page7" data-direction="reverse" data-icon="arrow-l" class="ui-btn-left" data-iconpos="left" data-transition="slide">戻る</a> </div> <div data-role="content" data-theme="g"> <div align="center"> <h2 class="h1">ご清聴ありがとうございました。</h2> </div> </div> <div data-role="footer" data-theme="g"> <h4>© 2012 vinton </h4> </div> </div> </body> </html>
CSS
a { text-decoration:none; } .h1 { font-size:42px; } #sitetheme { font-size:36px; color:#f60; } .ui-li-divider, .ui-li-static { font-size: 26px; }