このサンプルについて
このサンプルは書籍に掲載されているリストの動作を示すための参考資料です。それ以外の用途は想定しておらず、エラー対策、セキュリティ対策などは考慮されていません。また、これに収録されているサンプルは書籍に掲載されているものの一部であり、構成の都合上、改変している箇所があります。あしからずご了承ください。
このサンプルは書籍に掲載されているリストの動作を示すための参考資料です。それ以外の用途は想定しておらず、エラー対策、セキュリティ対策などは考慮されていません。また、これに収録されているサンプルは書籍に掲載されているものの一部であり、構成の都合上、改変している箇所があります。あしからずご了承ください。
スマートフォンやタブレットは機種ごとに画面の大きさやピクセル数が異なります。Media QueriesによるCSS設定の切り替えは、そうした状況への対策の1つとして有効なものといえます。
Media QueriesはCSSのMedia Typeを拡張するもので、特定の条件下でのCSS設定を定義できます。この画面では、Media Queriesを利用して、表示できる幅の違いにより、レイアウトの異なる3通りのフォームを表示できるようにします。
最近では、画面の大きさがさまざまであっても適切なコンテンツが表示されるようにするレスポンシブWebデザインという概念が普及しつつあります。
jQuery Mobileでは、テーマやウィジェットを表示する際に、HTMLタグのclasss属性にさまざまな値を設定します。この値によってHTMLタグにCSS設定が施されます。