スマートフォン
smart4meを使ったWebサイト制作 スマートフォンCMS（無料） smart4me URLバブサイトとして活用 制作物を管理する目的で構築 はてなダイアリー Jimdo 各Webサイトへのハブ機能として活用 スマートフォンで表示 PAGE TOP
バリエーション ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery Mobile Sample</title> <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属性「footer」を記述する ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery Mobile Sample</title> </meta></meta></head></html>
フルスクリーンモード data-fullscreen属性「true」 ヘッダー／フッターを固定配置した状態（data-position="fixed"）でページ要素にdata-fullscreen属性「true」を指定すると、フルスクリーンモードを利用できる フルスクリーンモードでは、ヘッダー／フッ…
リストの表示 「リスト表示」のページで解説してあるように分割リストの場合に、デフォルトではテーマ「b」が適用される 見出しのテーマを変更する data-dividertheme属性 ul要素やol要素に対してdata-dividertheme属性を設定すると、見出しのテーマを変更で…
Theme Roller スマートフォンの簡易カスタマイズUI Theme Roller 既存テーマのインポート ①「import」ボタンをクリック②「Import Default Theme」リンクをクリック③「import」ボタンを押す デフォルトテーマ PAGE TOP
URLスキーマ http://maps.google.com/maps?daddr=&saddr=現在地&dirflg=r&t=m daddr 目的地。 緯度・経度、住所やキーワードなど、 Googleマップで検索可能ならOK saddr 出発地。 現在地から出発する場合、日本語なら 「現在地」英語環境なら「Current%20Loc…
ヘッダーの基本 ページのコンテナ要素の直下にヘッダー用のコンテナを用意し、data-role属性「header」を記述する ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery Mobile Sample</title> </meta></meta></head></html>
ヘッダー／フッターのカスタマイズ data-role="header、data-role="footer"で表示したヘッダー／フッターは以下のようにカスタマイズできる 「戻るボタン」の表示 data-add-back-btn属性「true」 ページ要素（data-role="page"）にdata-add-back-btn属性「tr…
フッターにボタンを追加 フッター内に配置したa要素も自動的にボタンに変換される ただし、初期値では余白などが反映されていないため、フッター要素の内側に新たな要素を作成し、class属性「ui-bar」を指定する ソースコード【 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 </title></meta></meta></head></html>…
ボタンの数 ナビゲーションバーはボタンの数（li要素の数）で均等に分割され、数が増えるにつれてボタンは小さくなる ボタンの数（li要素の数）が6つ以上になると1行に2列ずつ、複数行に分割して表示される フッター／ヘッダーの固定配置 data-position属性…
ルート検索 任意の場所を指定してルートを検索する ルートタイプ(車)での設定 ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Google Maps ルート検索</title> </meta></meta></head></html>
見出しのテーマの変更 jQuery Mobileでは要素を均等に分割して並べる「グリッドレイアウト」の機能が用意されている 2カラム 2カラムにしたい場合は、class属性「ui-grid-a」を付けた要素の内側に、class属性「ui-block-a」とclass属性「ui-block-b」を付け…
4カラム 4カラムにするには、class属性「ui-grid-c」を親要素に適用します ソースコード【 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 グリッドレイアウト</title> </meta></meta></head></html>
見出しのテーマの変更 jQuery Mobileのリスト表示は、ul/ol要素にdata-theme属性でテーマを指定できる ソースコード【 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>
送信・キャンセルボタンの装飾 jQuery Mobileではスマートフォンで操作しやすいボタンのUIが用意されており、以下のように記述するだけで表示できる ソースコード【 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>
問い合わせフォームの作成 ２つ以上の選択肢があり複数選択可能な場合は、配列で設定 ２つ以上の選択肢があっても１つしか選択できない場合は、配列で設定しなくても可能 ひとつの値ごとに閉じれば「区切り線」がつき、全体をまとめて閉じればつかない ソー…
Maps JavaScript API パソコンと携帯端末の両方で使える地図アプリケーションのためのソリューション Google Maps JavaScript API v3 【 書式 】 http://maps.google.com/maps/api/staticmap?center=<緯度>,<軽度>&zoom=<ズーム値>&size=<画像横幅>x<画像縦…
ルート検索マップ（詳細） ソースコード【 HTML 】 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Google Maps API SDK</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.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>Google Maps API SDK</title> </meta></meta></head></html>
複数行入力ボックスの最適化 「お問い合わせ内容」は複数行入力ボックスですので、textarea要素で記述する この複数行入力ボックスは、入力したテキストの長さに応じて自動的にフォームの高さが変わる ソースコード【 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>
フリップスイッチを表示する jQuery Mobile独自のフォーム部品「フリップスイッチ」を使って「性別」の項目を作る フリップスイッチは2つの選択肢からどちらか一方を選択するUI select要素にdata-role属性「slider」を指定し、内側に2つのoption要素で項目を…
使いやすいチェックボックスの追加 「お問い合わせ種別」は、チェックボックスを使う チェックボタンはスマートフォンで非常に使いにくいフォーム部品の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>
