ウェブ学のすすめ

Study of Web Design & Programing

jQueryMobileで作るプレゼン資料

jQueryMobileで第2回サイトプレゼン資料を作ってみました。

プレビュー


↓別ウィンドウを開いて見る
第2回プレゼンテーション


QRコード

※おすすめ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>&copy; 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>&copy; 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>&copy; 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>&copy; 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&amp;up_url=http%3A%2F%2Fwebgaku.hotcom-web.com%2Fkifu%2FKifu.swf%20&amp;up_background=%23ffffff&amp;up_cache=0&amp;up_swfver=9&amp;synd=open&amp;w=580&amp;h=500&amp;title=&amp;border=%23ffffff%7C0px%2C1px+solid+%2399BB66%7C0px%2C2px+solid+%23AACC66%7C0px%2C2px+solid+%23BBDD66&amp;output=js"></script>
    </div>
</div>
<div data-role="footer" data-theme="g">
    <h4>&copy; 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>&copy; 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>&copy; 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>&copy; 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>&copy; 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;
}