- ベストアンサー
レスポンシブWebとjQuery Mobile
WebDesigning誌のバックナンバーを追って 独学しています。 別の号の特集でそれぞれ レスポンシブWebデザインとjQuery Mobileが 出てきたのですが、 レスポンシブWebデザインは端末によって 違うCSSを適用させてレイアウトを 変えるので、スマートフォン向けにすることも できるということだと思うのですが、 jQuery Mobileもスマートフォン向けのようで、 ２つのやり方を、どう使い分けたらよいのか わかりませんでした。 それぞれが、どのような用途に適しているのか 教えてください。
- furnace
- お礼率90% (128/141)
- その他（プログラミング・開発）
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
http://www.slideshare.net/shumpei/j-query-mobile-14227660 これが参考になるかな。 余談だけど それとレスポンシブデザインは環境によって適用させるCSSを変えてって言うのやり方だけど これだと確かに簡単にいろいろな端末に最適化させたWebサイトはできるけど PCとモバイル端末で見た場合、1ページに収めるべき必要な情報量って違う。 モバイル端末の方のユーザビリティを考えると情報量が多いページでPCページでは1ページに収めた分量を モバイル端末では情報量としては1ページに収めると見にくくなる。 そう考えるとレスポンシブデザインだけに頼った作り方は問題がある。 でもモバイル用にhtmlをまた用意するというのは確かにめんどくさい。 というわけでPCやモバイル端末の表示に対応していたり機能拡張で対応させることができる CMSなんかを使った方がユーザにとって使いやすいサイトを構築できる。
その他の回答 (1)
JQuery Mobileは、レスポンシブレイアウトフレームワークの一つに過ぎない！ たくさんの方法があります。
お礼
ご回答いただき、ありがとうございました。 知識が不足しすぎているようです。 体系的に学びたいと思います。
関連するQ&A
- レスポンシブwebデザインでのIE対応について
レスポンシブwebデザインでサイト制作する際、CSSのIE対応はどこまでやるべきか悩んでいます。 お詳しい方々、是非アドバイスをお願いします。 現状の対応としては・・・ IE9 → 他ブラウザ同様にレスポンシブ対応 IE8 → レスポンシブ非対応・IE専用CSS（PCサイズ版）を適用 IE7 → 完全無視 （IE7はttp://www.ajike.co.jp/2012/08/browse_share201207/やその他複数のデータを基に、完全無視で問題ないと判断しました） としております。 そこで作っていてふと想ったのですが、タブレット端末やスマートフォン端末では実質的にIEではなくなるので、結局IE9をレスポンシブ対応させる意味がないのではないか？ なら、IE8と同様にIE用のCSSを適用させるだけで良いのではないか？ と想ったのですが、どうなんでしょうか？ ここはやはり将来性を鑑みてIE9は現状のままレスポンシブ対応させておくべきなのか・・・ それともIEは9だろうと8だろうと一括でIE専用CSSを適用させてレスポンシブ対応させないのか・・・ 初心者の私にはIE用のCSSですら恐ろしくめんどくさいというか難しく、IE9をレスポンシブ対応させるだけでも四苦八苦しております。。。 いったいどうしたら良いでしょうか？ 是非ぜひ、ご教授願います。
- ベストアンサー
- CSS
- レスポンシブwebデザインでユーザに選択肢を与える
解像度別でスタイルが自動適用されるレスポンシブwebデザインについて、詳しい方へお伺いいたします。 例： http://www.webdesignerwall.com/demo/media-queries/ ※上の参考URLは違いますが、Media QueriesはjQuery Media Queries Plugin利用利用・W3C準拠前提。別の方法があればその方法も知りたいです。 端末別に4種類ほどデザインを用意した場合で、 例 http://mediaqueri.es/ ・携帯ユーザが最初にアクセスした時自動適用されたのが携帯用デザインで、 ・しかし携帯ユーザがその端末でく別サイズ用デザインを望んだとき、 ・携帯端末でも任意にCSSを選ぶことができ、 ・一度選んだら画面遷移後もPCサイズのCSSを適用 とすることはできるのでしょうか。 できるとしたら、そのためにはどのような方法（Javascript/Plugin）があるでしょうか。 そのようなサイトがあれば、参考URLも教えて頂けますと幸いです。 よろしくお願いいたします。
- 締切済み
- CSS
- レスポンシブWebデザイン習得へのステップ
レスポンシブWebデザインを習得したいと考えています。 現在、実務で使っている手法は2005年ごろ「ウェブ標準」という言葉が流行していた頃の XHTML+CSSをなんとなく使っている程度（極めていない）なのですが、 ステップとしては、 1. HTML5+CSS3の基礎 2. スマートフォン向けサイト構築の基礎（モバイルファーストという観点から） 3. レスポンシブWebデザインの具体的な手法 という風に身につけていく必要があると考えています。 手順として正しいでしょうか？
- ベストアンサー
- CSS
- jQuery Mobile バージョン
jQuery Mobileでスマホサイトを作成しているのですが 現在は <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"> </script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"> </script> と言うソースを使っていたのですが http://www.buildinsider.net/web/jquerymobileref/24 を見たら、私と違いました。 私のバージョンが古いのでしょうか？ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"> </script> へ 書き換えたほうが良いのでしょうか？
- ベストアンサー
- CSS
- レスポンシブWEBデザイン jsの指定について
レスポンシブWEBデザインで、PC用に指定しているjQueryプラグインを、スマホでは指定しない方法を知りたいと思っています。 例えば、640px以下はjQueryプラグインを動かさない、といった感じです。 ご教授の程、よろしくお願いします。
- ベストアンサー
- CSS
- jquery.mobile-1.1.1.min.c
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQueryMobile Test</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css"> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.js"></script> </head> ・ ・ ・ 以下省略 のようにＨＰを作っているのですが、 jquery.mobile-1.1.1.min.cssの部分で設定されているcssの値を変更することは出来ないのでしょうか？ 例えば、 .ui-content .ui-listview { margin: -15px; } の値を、 margin: -15px; ではなく、 margin: 50px; にしたい場合、 どうすればいいですか？ ul.ul_test { margin-top: 50px; } を作って、 <ul class="ul_test" としてみましたが、 適用されませんでした。
- ベストアンサー
- CSS
- レスポンシブWebデザインでテキストの振分について
現在あるPCサイトをスマホにも対応させたいので、スマホ用のファイルを別に作成するか、またはレスポンシブWebデザインにしようと考えております。 そこで疑問に思ったことがあります。 私が把握しているレスポンシブWebデザインのサイトは、例えば住友商事のようなサイトです。http://www.sumitomocorp.co.jp/ パソコンのブラウザで表示している場合、マウスを使ってカーソルを操作してブラウザを縮小すると、レイアウトが可変します。 ※もちろん、スマホで見れば、スマホに最適化された表示になっております。 一方、アマゾンのようなサイトの場合、パソコンでカーソルを操作してブラウザを縮小しても表示は変わりません。 しかし、PCとスマホで異なるデバイスで確認すると、表示しているテキストや画像が異なります。 私の認識では、このようなサイトはPC用とスマホ用で異なるファイルを作成し、PCとスマホで読み込ませるURLを振り分けるていると思っておりましたが、PCで確認してもスマホで確認してもアドレスバーに表記されているURLは同一の物です。 このアマゾンのようなサイトはレスポンシブWebデザインによって作られているのでしょうか？ もし、レスポンシブWebデザインならば、デバイスごとに表示させる画像を振り分けることははもちろんのこと、テキスト（文章）の振り分もできるということなのでしょうか？ レスポンシブWebデザインで画像もテキストも振り分けられるなら、PC用とスマホ用でファイルを分ける必要はないかと思うので、私が作成したPC用のサイトを、レスポンシブWebデザインにしようかと思っております。 以上となります。 どのようなご回答でも良いので、また質問の内容とはそれてしまってもよいので、なにかしらご回答を頂けると幸いです。 宜しくお願い致します。
- 締切済み
- CSS
- レスポンシブwebデザインをIEに対応させる方法
レスポンシブwebデザインのIEへの対応について質問です。 XHTMLで作成したHPをメディアクエリを使用して、レスポンシブwebデザインにしたのですが、 IE8以下で全くCSSを読み込みません。 いくつかのHPを見て、header内に <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> を記述しているのですが、それでもうまくいきません。 CSSは外部ファイルで読み込ませてあり、 <link rel="stylesheet" media="only screen and (min-width: 481px)" href="style.css" /> このような形で記述してあります。ですので、 http://www.imaginationdesign.jp/blog/html5css3/1592/ これとも違うようですし、原因がわかりません。 どなたか原因がお分かりになられる方おりますでしょうか？
- 締切済み
- CSS
- デザインが目を引くレスポンシブなサイトは？
ギフトやおもてなし系？などでデザインが目を引くレスポンシブなwebサイト、スマートフォンを教えてください。 今年IT業者に入社して、SEやWEBコーダ-業務をおこなってましたが、 急遽。デザインをするようにと上司に命じられて、てんやわんやです＞＜； ギフトやおもてなし系の綺麗なサイトをあまり知らないので教えて欲しいです！
- 締切済み
- デザイナー・クリエイティブ職
- レスポンシブｗebデザインでの画像表示について
私はサイト制作初心者なんですが、なんとかレスポンシブｗebデザインでのサイトを作っています。 そこで、画像の表示方法について悩んでいたので、アドバイスをお願いします。 今現状やっていた画像表示処理は・・・ ＜パターンA＞ １つの大きな画像を％で縮小させ、あくまで１枚だけで全サイズに対応する というものです。 ところが最近、ネットでたくさんのプロの方々のブログを拝見していると、どうやらRetinaディスプレイに対応した画像は必須なんじゃないか？となり、悩んでおります。 もしRetinaディスプレイに対応した画像の場合は、表示サイズの倍サイズで作ったものを縮小して表示させなければいけないため、重くなるのは必定。 となると、さすがにパターンAでは厳しいと思い下記のパターンBを検討しています。 ＜パターンB＞ １つの画像につき ・PCディスプレイ用画像 （・タブレット・高解像度スマホ用画像） ・通常スマホの縦向用画像 の、２つないしは３つのサイズ別で対応する そこで、もしこのパターンBで画像を表示する際は、一体どのような変換方法を使うのが現在では適切なのでしょうか？ 初心者なりに調べてみたりして考えていたのが↓ (1)htmlに画像を入れ、それをjQueryで横幅サイズ毎に表示される画像を変える (2)htmlには画像を入れず、横幅サイズ毎に読み込ませるcssファイルで、divなりなんなりのbackground-imageとしてそれぞれの画像を表示する でした。 個人的には余計なjQueryを使いたくないため、初心者なりに考えてみた結果(2)に行き着いたんですが、そもそも(2)での画像表示は、どうなんでしょうか？ どなたかお詳しい方、レスポンシブｗebデザインでの画像表示方法について、アドバイスをください。 よろしくお願いいたします。
- ベストアンサー
- CSS
お礼
ご回答をいただき、ありがとうございました。 レスポンスWebデザインのデメリットは、 私が読んだ記事にも書いてありました。 多数あるCMSについても調べて もっと、知識の幅を広げて、 その事案にあったやり方を選択できるよう、 体系的になるように学びたいと思いました。