夏場ぐらいからどんどん増えてきているスマートフォンからのアクセス数
アクセス解析を見て、少しづつ対応しなくては、不安を感じているWeb担当者は多いのでは？
ということでjquerymobileを使って簡単にできるスマートフォンサイトの作り方を解説していきます。
・公式サイト>
・リファレンス>
まずは初期設定
jquerymobileの準備
jqueryを動かすのに必要なスタイルシートとjavascriptを読み込ませます。
下記のhtmlタグをhtml内部のheadの中に埋め込みます。
… <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"> </script> </head> …
スマートフォンサイズに対応させる
今のままではホームページの大きさで表示されるのでスマートフォンに最適化された画面サイズに変更するようにmetaタグを入れます。
… <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> </head>
これで準備は完了です。
簡単なサイトを製作します。
まずはページを作る
jquerymobileでは、一つのhtmlを読み込むだけで、何ページにも分かれているように表示ができます。
ということでページを作るタグです。
<div data-role="page" id="index"> </div>
data-role"page"
のdivで囲まれた部分のhtmlが一ページとして表示されます。
id="index"
でそのページのurlを指定してあげるような形です。
例えば、idで指定したページにいきたい場合は、
<li><a href="#index">TOPへ</a></li>
でそのページに飛ぶことができるようになります。
ヘッダー、フッター、コンテンツとページを分ける
ヘッダー
<div data-role="header" data-theme="d"> <h1>Geekz</h1> </div>
data-roleに"header"と記述することでヘッダーのブロックができます。
data-theme="d"で初めから入っているデザインを使うことができます。
この場合はdパターンのデザインになっていますが、a~eまでのデザインを選ぶことができます。
フッター
<div data-role="footer" data-theme="d"> ©2012 geek </div>
ヘッダー部分と同じように
data-role="footer"でフッターのブロックを作っています。
data-theme="d"でデザインを指定しています。
フッターは別のデザインなど、違うデザインを指定することももちろん可能です。
コンテンツ
<div data-role="content"> </div>
data-role="content"でコンテンツブロックが出来上がります。
ここにサイトの内容を追加していきます。
別ページを作る
会社概要とアクセスと問い合わせのページを作るとします。
<div data-role="page" id="office"> <div data-role="header" data-theme="d"> <h1>Geekz</h1> </div> <div data-role="content"> 会社概要 </div> <div data-role="footer" data-theme="d"> ©2012 geek </div> </div>
今までの内容とほとんど同じですね。
idの部分を違うようにしてindexページの/divの下に追加します。
同じようにアクセスページと問い合わせページを作ってみてください。
トップページへ戻る
現在の状態では別ページに行っても元のページに戻れません。
<a href="#index" data-icon="arrow-l" data-direction="reverse">TOP</a>
aタグのhref="#index"でトップページに戻ります。
data-icon="arrow-l" data-direction="reverse"でアイコンのデザインを指定しています。
トップページから別ページへのアクセス
indexのページのcontentの部分に
<div data-role="content"> <ul data-role="listview" data-theme="d"> <li><a href="#office">会社概要</a></li> <li><a href="#access">アクセス</a></li> <li><a href="#contact">問い合わせ</a></li> </ul> </div>
そのページへ飛ぶリンクを書います。
href="#office"
別ページの作成時、idの文字を入れることでその別ページに飛ぶことができます。
<div data-role="page" id="office">
これで、簡単なサイトの大枠ができあがりです。
最後にページ全体
ページ全体
<div data-role="page" id="index"> <div data-role="header" data-theme="d"> <h1>Geekz</h1> </div> <div data-role="content"> <ul data-role="listview" data-theme="d"> <li><a href="#office">会社概要</a></li> <li><a href="#access">アクセス</a></li> <li><a href="#contact">問い合わせ</a></li> </ul> </div> <div data-role="footer" data-theme="d"> ©2012 geek </div> </div> <div data-role="page" id="office"> <div data-role="header" data-theme="d"> <a href="#index" data-icon="arrow-l" data-direction="reverse">TOP</a> <h1>Geekz</h1> </div> <div data-role="content"> 会社概要 </div> <div data-role="footer" data-theme="d"> ©2012 geek </div> </div> <div data-role="page" id="access"> <div data-role="header" data-theme="d"> <a href="#index" data-icon="arrow-l" data-direction="reverse">TOP</a> <h1>Geekz</h1> </div> <div data-role="content"> アクセス </div> <div data-role="footer" data-theme="d"> ©2012 geek </div> </div> <div data-role="page" id="contact"> <div data-role="header" data-theme="d"> <a href="#index" data-icon="arrow-l" data-direction="reverse">TOP</a> <h1>Geekz</h1> </div> <div data-role="content"> お問い合わせ </div> <div data-role="footer" data-theme="d"> ©2012 geek </div> </div>