スマホサイト制作 ～jQuery mobile viewportとdate属性～
今回は サイト自体の大きさを調整する「viewport」と、
様々な機能が使える、「date属性」について紹介をしていきたいと思います ＼(^o^)／
「なんか全然知らない言葉出てきたけど…こんなんできるのか…？？」
大丈夫！最初はしゃっとコピーしてぺって貼付けをしてしまえば簡単に使えてしまいます！
でもどうせ作るなら理解した上で使っていきたいですよね！
viewportの役割と使用方法
viewportとは簡単に言ってしまうと自動的にユーザのスマホにあったサイズでサイトを表示してくれるという画期的な道具です！
例えば、
「iPhone5を所有しているユーザにも見てもらいたいけど、Xperiaを持っているユーザにも快適に見てほしい…」そんな要望が出てくるかもしれません。
というか！どうせ作るならどんなスマホを持っていても快適にサイトを見てもらいたいですよね！
そんなときに活躍するのがこのviewportです！
ではさっそく使用方法について見ていきましょう！
使用方法
基本的にviewportを使用するにはhead内に記述する”metaタグ”で記述をします。
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
</head>
↑こんな感じです (^p^)
はい。後ろの方に何か余計なものがついていますね。
これはviewportプロパティといってここの設定でどのスマホに対応させるか等を決定することが出来ます！
魔法みたいですよね！ははは！
viewportプロパティについて
width 200～10,000px
サイトの幅を指定出来るプロパティです。
基本的には、width:300px のように数値とpxで指定します。
ですが！width:device-width と指定してあげると、そのデバイスの幅に自動的にしてくれます！
初期のiPhoneですと、320pxになりますね。
height 200～10.000px
サイトの高さ(？)を指定出来るプロパティです。
基本的にwidthの指定方法と同じです。
…でも…スマホのサイトに高さを指定してしまうと何かと不便なので、あまり使用することはないです！はい！
minimum-scale
ピッチイン等でページを縮小されたときの最小倍率となります。
例えば0.5と指定すると、半分の大きさまで縮小可能となります。
1と設定すると、縮小不可となります。
maximum-scale
ピッチアウト等でページが拡大されたときの最大倍率です。
例えば2.0と指定すると、最大２倍の大きさまで拡大可能となります。
1と設定すると、拡大不可となります。
ーーーーーーーーーーーーーーーーーーーーーーー
date属性について
jQuerymobileを使用する上で、普通のサイト作りと大きく異なってくるのがこの部分です！
普通、PCサイトを作る時はページごとにhtmlファイルを作り、それをリンクで繋いでアクセスさせるというのが一般的ですよね。
しかし、jQuerymobileを使用してサイトを作る際は、一つのファイルで全ページが出来てしまうんです！
そこで登場するのがdate属性です。それでは実際にコードを見ていきましょう。
<div date-role="page" id="index">
<div date-role="header">
<h1>タイトルだよ</h1>
</div>
<div date-role="content">
<p>コンテンツの内容</p>
</div>
<div data-role="footer">
<h4>©2012 スマホ制作</h4>
</div>
</div>
jQuerymobileでは
<div date-role="page">～</div>
が1ページとなります。ですのでまず始めに、page指定をしてあげます。
次にどの部分をコーディングしていきたいのか
<div date-role="×××”>
を指定してあげます
この中に指定する属性は「header」「content」「footer」の３種類があります。
headerはページの上部、
contentはページの中身、
footerはページの下部、を指定する時に使用します。
一度ブラウザで確認して見ましょう。
このような形になります。
あとはコンテンツの中身を充実させていけば1ページの完成です。
もう１ページ作りたい場合は
<div date-role="page">～</div>
を新たに設置し、同じように
<div date-role="content">
内に内容を書き込んでいけば完成です！
他にも色々！date属性
ここまでで紹介したdate属性は、必要最低限なものを抜粋して紹介しています。
他にも知っていると便利な属性があります！
listview
スマホサイトでよく見るこのようなリスト。。。
実はこれもdata属性で指定するだけで簡単に作れてしまうんです。
<div date-role="content">～</div>
<ul data-role="listview">
<li><a href="#">スマホサイトの作り方</a></li>
<li><a href="#">簡単ツールの紹介</a></li>
<li><a href="#">明日の天気</a></li>
<li><a href="#">昨日の天気</a></li>
</ul>
</div>
このように
<div date-role="content">内に<data-role="listview">というタグを埋め込み、
ul、liタグでリスト形式にしてあげるだけです (^p^)簡単ですよね。
又、
<ul data-role="listview" date-inset="true">
とすると角丸のリストを作ることが出来ます！
是非試してみてください。
