ヘッダー部分の解説
1.スマートフォン画面での表示方法を指定している部分から解説します。「viewport」はコンテンツを表示するピクセル幅を決める概念です。スマートフォンは画面解像度が機種によってまちまちで、viewportの指定をしないと、コンテンツが小さく表示されるなど見えづらくなることがあります。
viewportを指定するにはmetaタグを用います。「meta name="viewport"」の後に「content="width=device-width"」という指定を行います。contentの中は「"名前=値;名前=値;～"」と指定していきます。この指定によりスマートフォンの画面解像度に応じて、コンテンツが同じピクセル幅にレンダリングされます。どんな画面解像度でも横スクロールなどすることなく、画面の中にコンテンツがおさまり、非常に見やすくなりますので、通常スマートフォンサイトでは、この設定値を指定します。また、「initial-scale=1」は拡大縮小の初期値の設定であり、初期表示時に拡大・縮小表示をしない場合は通常1を指定します。
2.CSSの読み込みでは、jQuery Mobile標準のCSSの読み込みを行います。そして必ず3.jQueryの読み込みを行ってから、4.jQuery Mobileの読み込みを行います。
ボディ部分の解説
jQuery Mobileでは、HTML5の「カスタムデータ属性」という機能を活用して決められたスタイルを適用するのが大きな特徴です。カスタムデータ属性とは、本来要素値であるデータをタグの中の属性として記述する仕組みです。jQuery Mobileは文字列「data-」で始まる属性名が確認されると、属性名に従ってさまざまなスタイルを適用することができます。5.ページの設定では「div data-role="page"」という記述でこのdiv要素はページであることを定義していて、決められたスタイルが自動的に適用されます。
「data-theme="b"」は「テーマ」のカラーバリエーション定義「スウォッチ」を定義しています。jQuery MobileはさまざまなUIパーツのスタイルを一括定義する「テーマ」という機能があり、特に何も組み込まなくても標準のテーマが用意されています。標準のテーマには5つの「スウォッチ」というカラーバリエーションがあり、aからeまで色のパターンがあります。aは黒が基調、bはグレーとブルー基調、cはグレー基調、dは白基調、eは黄色基調となっています。a、c、dはほぼ単色ですが、bはコンポーネントをブルーで示すことで、コントラストが強調されます。また、eは黄色を用いているため比較的目立つ色使いです。
6.ヘッダーの設定の「div data-role="header"」は、ヘッダーであることを表し、スマートフォンサイトでよく見られるヘッダーのスタイルを呼び出すことができます。divタグで囲んだ文字列をヘッダーに表示できます。
7.ページ内容の設定「div data-role="content"」は、このページの中身であることを表します。
さまざまなコンポーネントを用いたスマートフォンサイトの作成
次に、ヘッダーとフッダーの間のコンテンツ部分にさまざまなコンポーネントを用いたサイトを作成してみます。
パソコンで見るとこうした形になります。
