Dreamweaverでの設計
ページの構造を挿入
- 「ページ」をクリック
- 「ページ」を「body」内に、ドロップ&ドラッグ
- 「ヘッダー」と「フッター」を含める
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>サイトタイトル</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> </head> <body> <div data-role="page" id="page"> <div data-role="header"> <h1>ヘッダー</h1> </div> <div data-role="content">コンテンツ</div> <div data-role="footer"> <h4>フッター</h4> </div> </div> </body> </html>
リスト挿入
- 「リスト表示」を「content」内に挿入
<div data-role="content">コンテンツ <ul data-role="listview"> <li><a href="#">ページ</a></li> <li><a href="#">ページ</a></li> <li><a href="#">ページ</a></li> </ul> </div>
リストのオプションを適用
<div data-role="content">コンテンツ <ul data-role="listview" data-inset="true"> <li><a href="#"> <h3>ページ</h3> <p>Lorem ipsum</p> <span class="ui-li-count">1</span> <p class="ui-li-aside">付加情報</p> </a><a href="#">デフォルト</a></li> <li><a href="#"> <h3>ページ</h3> <p>Lorem ipsum</p> <span class="ui-li-count">1</span> <p class="ui-li-aside">付加情報</p> </a><a href="#">デフォルト</a></li> <li><a href="#"> <h3>ページ</h3> <p>Lorem ipsum</p> <span class="ui-li-count">1</span> <p class="ui-li-aside">付加情報</p> </a><a href="#">デフォルト</a></li> </ul> </div>
縮小可能ブロック
- 「縮小可能ブロック」をクリック
<div data-role="content">コンテンツ <div data-role="collapsible-set"> <div data-role="collapsible"> <h3>ヘッダー</h3> <p>コンテンツ</p> </div> <div data-role="collapsible" data-collapsed="true"> <h3>ヘッダー</h3> <p>コンテンツ</p> </div> <div data-role="collapsible" data-collapsed="true"> <h3>ヘッダー</h3> <p>コンテンツ</p> </div> </div> </div>
テキスト入力
- 「テキスト入力」をクリック
<div data-role="content">コンテンツ <div data-role="fieldcontain"> <label for="textinput">テキスト入力 :</label> <input type="text" name="textinput" id="textinput" value=""> </div> </div>
パスワード入力
- 「パスワード入力」をクリック
<div data-role="content">コンテンツ <div data-role="fieldcontain"> <label for="passwordinput">パスワード入力 :</label> <input type="password" name="passwordinput" id="passwordinput" value=""> </div> </div>
テキストエリア
- 「テキスト領域」をクリック
<div data-role="content">コンテンツ <div data-role="fieldcontain"> <label for="textarea">テキストエリア :</label> <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea> </div> </div>
メニューを選択
- 「メニューを選択」をクリック
<div data-role="content">コンテンツ <div data-role="fieldcontain"> <label for="selectmenu" class="select">オプション :</label> <select name="selectmenu" id="selectmenu"> <option value="option1">オプション 1</option> <option value="option2">オプション 2</option> <option value="option3">オプション 3</option> </select> </div> </div>
チェックボックス
- 「チェックボックス」をクリック
<div data-role="content">コンテンツ <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>オプション</legend> <input type="checkbox" name="checkbox1" id="checkbox1_0" class="custom" value=""> <label for="checkbox1_0">オプション</label> <input type="checkbox" name="checkbox1" id="checkbox1_1" class="custom" value=""> <label for="checkbox1_1">オプション</label> <input type="checkbox" name="checkbox1" id="checkbox1_2" class="custom" value=""> <label for="checkbox1_2">オプション</label> </fieldset> </div> </div>
ラジオボタン
- 「ラジオボタン」をクリック
<div data-role="content">コンテンツ <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>オプション</legend> <input type="radio" name="radio1" id="radio1_0" value=""> <label for="radio1_0">オプション</label> <input type="radio" name="radio1" id="radio1_1" value=""> <label for="radio1_1">オプション</label> <input type="radio" name="radio1" id="radio1_2" value=""> <label for="radio1_2">オプション</label> </fieldset> </div> </div>
ボタン
- 「ボタン」をクリック
<div data-role="content">コンテンツ <div data-role="controlgroup" data-type="horizontal"><a href="#" data-role="button">ボタン</a><a href="#" data-role="button">ボタン</a></div> </div>
スライダー
- 「スライダー」をクリック
<div data-role="content">コンテンツ <div data-role="fieldcontain"> <label for="slider">値 :</label> <input type="range" name="slider" id="slider" value="0" min="0" max="100"> </div> </div>