2013-04-01から1ヶ月間の記事一覧
使いやすいチェックボックスの追加 「お問い合わせ種別」は、チェックボックスを使う チェックボタンはスマートフォンで非常に使いにくいフォーム部品の1つだが、jQuery Mobileを利用すると指で選択しやすい形状に最適化できる チェックボックスは、type属性…
リストの表示 画像付きのリスト 各リスト項目内のimg要素を記述すると、左側に画像が表示される画像付きリストを利用できる img要素で指定した画像は80×80pxに自動的にリサイズされる ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery Mobile Sample</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </meta></meta></head></html>
フォームUIの課題とjQuery Mobileによる解決 スマートフォンのブラウザーに標準で用意されているフォーム部品はどれもサイズが小さく、そのままでは指による操作に適さない スマートフォンサイトの制作ではフォームをスマートフォンに最適化することが重要 …
入力フォームの装飾と調整 ページの見出し（h2要素）とフォームの間には不自然な余白があり、入力フォームの背景色がやや暗いので、デザインを少し調整する ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1"> <title>jQuery Mobile Sample</title> </meta></meta></head></html>
腰・膝・肩・首・指の症状でお困りの肩へ 膝が曲がらない、正座ができない 腰が痛くて長時間座っていられない 肩が痛くて手が挙がらない、後ろに回らない 手、指、腕、脚やお尻など痺れがある 交通事故等の後遺症で首が痛い、重い、だるい ムチウチかも スノ…
ページ遷移のアニメーションエフェクト トップページ（#index）から各ページへのリンクをタップすると、ページが左右にスライドしながら遷移する jQuery Mobileではさまざまなページ遷移のアニメーションエフェクトが用意されており、a要素に対してカスタム…
リストの表示 スマートフォンサイトで多用されるのが、リスト表示 jQuery Mobileではさまざまなリスト表示のUIが用意されている 一般的なリスト data-role属性「listview」 ul、ol/li要素などのリストでマークアップされた項目にdata-role属性「listview」を…
リストの表示 一般的なリスト data-role属性「listview」入れ子状態のリストでは、最初にメイン（親）のリストが表示され、リストをタップするとページが遷移して子リストが表示されます ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>リストの表示</title> </meta></meta></head></html>
分割リスト li内に2つのリンクを記述すると、1つのリスト項目に2つのリンクを設定できる分割リストも作成できる 分割リストでは、2番目のリンクはリンクアイコンだけが表示される ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery Mobile Sample</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </meta></meta></head></html>
説明付きのリスト ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <title>説明付きのリスト</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css"> </link></meta></meta></head></html>
リスト表示 リストは、コンテンツ領域内（data-role="content"）にul要素を記述し、ul要素に対してカスタムデータ属性「data-role="listview"」を指定することで表示できる ブロックリンク XHTMLではa要素の内側にh3要素などのブロックレベル要素を記述でき…
リスト見出し リスト表示では、li要素にカスタムデータ属性「data-role="list-divider"」を付けることでリストを区切る「見出し」も表示できる ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ページ遷移</title> </meta></meta></head></html>
角丸の立体的なメニュー ul要素にカスタムデータ属性「data-inset="true"」を付けると、角丸の立体的なメニューにもできる ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ページ遷移</title> </meta></meta></head></html>
サイト構造 サイト構造のイメージ図 aboutページの作成 ソースコード【 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" /> </link></meta></meta></head></html>
Backボタン ヘッダー領域に「戻る」ボタンを追加 ページのコンテナ要素に「data-add-back-btn="true"」を設定する ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ページ遷移</title> <style> .ui-content .h1{ color: #5E87B0; font-size: 18px; text-…</meta></meta></head></html>
テーマの切り替え jQuery MobileではCSS3を利用したCSSフレームワークが採用されている ページ要素に対してdata-theme属性「a」〜「e」を指定すると、デザインテーマを切り替えられる <div data-role="page" id="page1" data-theme="b"> jQuery Mobileの各UIパーツは指定したテーマに沿ったカラーリングで表示</div>…
jQuery Mobile 1.3.0 旧バージョンで次ページ以降に自動生成された「戻る」ボタンが、自動生成されない 自動生成するには、以下の２つの方法がある JavaScriptで記述する場合 <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> $(document).bind("mobileinit"…</link>
jQueryMobile入門 ASCII.jp jQuery Mobileデザイン入門 西畑一馬のjQuery Mobileデザイン入門 jQuery Mobileにおけるページの考え方 一般的なWebサイトの場合は1ページ＝1HTMLファイルだが、jQuery Mobileではカスタムデータ属性「data-role="page"」を持つd…
ページ内リンク jQuery Mobileでは複数のページを1つのHTMLに記述するので、ページ遷移にはページ内リンクを利用する #（ハッシュ）を利用する リンクをタップするとスライドしてページが切り替わる jQueryとjQuery mobileのバージョンが新しいとアニメーシ…
デザインテーマ デザインは、デフォルトでは黒を基調としたテーマ（スキン）が適用されているが、ページ要素に対してカスタムデータ属性「data-theme」を指定することでテーマを変更できる 「data-theme」の値に「b」を指定すると、iPhoneの標準UIのような見…
基本設計 日本語に翻訳されたiOSのドキュメントです。 日本語ドキュメント - Apple Developer ページサイズは「横幅320px」を基準に設計 iPhoneの縦幅は、480pxですが上下に「URL表示」「ナビゲーションバー」があるため、ページ内容が表示できる領域は「縦…
ページの作成 jQuery Mobileでは、1つのHTMLに複数のページのコンテンツをまとめて記述する ページの区切りやページ内のレイアウトは、カスタムデータ属性のdata-role属性で定義する ページの作成 data-role="page" div要素などにdata-role属性「page」を指…
ダイアログ表示 data-rel="dialog" jQuery Mobileの特殊なページとして、ダイアログがある ページへのリンクに対してdata-rel属性「dialog」を指定すると、リンク先のコンテンツがページ上に浮いているようにして表示される ダイアログページは拡大しながら…
ボタン 「ボタン」をクリック ソースコード【 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" /> <…</link></meta></meta></head></html>
スライダー 「スライダー」をクリック ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>スライダー</title> </meta></meta></head></html>
スリップトグルスイッチ 「スリップトグルスイッチ」をクリック ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>スリップトグルスイッチ</title> </meta></meta></head></html>
メニューを選択 「メニューを選択」をクリック ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>メニューを選択<</title> </meta></meta></head></html>
チェックボックス 「チェックボックス」をクリック ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>チェックボックス</title> </meta></meta></head></html>
ラジオボタン 「ラジオボタン」をクリック ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>テキストエリア</title> </meta></meta></head></html>
縮小可能ブロック 「縮小可能ブロック」をクリック ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>縮小可能ブロック</title> </meta></meta></head></html>
