第4章 - jQuery Mobileサンプル


このサンプルについて

このサンプルは書籍に掲載されているリストの動作を示すための参考資料です。それ以外の用途は想定しておらず、エラー対策、セキュリティ対策などは考慮されていません。また、これに収録されているサンプルは書籍に掲載されているものの一部であり、構成の都合上、改変している箇所があります。あしからずご了承ください。

リスト4-1

jQuery Mobileのページへ

画面の幅でレイアウトを変える(リスト4-7)

画面の幅にあったレイアウトで表示する

スマートフォンやタブレットは機種ごとに画面の大きさやピクセル数が異なります。Media QueriesによるCSS設定の切り替えは、そうした状況への対策の1つとして有効なものといえます。

Media QueriesはCSSのMedia Typeを拡張するもので、特定の条件下でのCSS設定を定義できます。この画面では、Media Queriesを利用して、表示できる幅の違いにより、レイアウトの異なる3通りのフォームを表示できるようにします。

最近では、画面の大きさがさまざまであっても適切なコンテンツが表示されるようにするレスポンシブWebデザインという概念が普及しつつあります。

リスト4-8、リスト4-9は<style>内を参照

CSSフレームワーク(リスト4-10)

リスト4-11

リスト4-12

リスト4-13

jQuery MobileのCSSフレームワーク

jQuery Mobileでは、テーマやウィジェットを表示する際に、HTMLタグのclasss属性にさまざまな値を設定します。この値によってHTMLタグにCSS設定が施されます。

リスト4-14(page-1)

ページ2へ

リスト4-14(page-2)

ページ1へ