- 締切済み
レスポンシブ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も教えて頂けますと幸いです。 よろしくお願いいたします。
- chile5583
- お礼率73% (108/147)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
スタイルシートを選択できるなら代替スタイルシートですが・・そのメッセージが必要 わかりやすく簡単なのはCGIを使う方法です。 スタイルシートを選択して、その選択をcookieで保存する。path_infoなどでの方法も考えられますがSEO的にはcookieでしょうね。 [例] ⇒コンテンツ( http://hpcgi1.nifty.com/Iruka/contents.html ) の右側のボタン
関連する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とjQuery Mobile
WebDesigning誌のバックナンバーを追って 独学しています。 別の号の特集でそれぞれ レスポンシブWebデザインとjQuery Mobileが 出てきたのですが、 レスポンシブWebデザインは端末によって 違うCSSを適用させてレイアウトを 変えるので、スマートフォン向けにすることも できるということだと思うのですが、 jQuery Mobileもスマートフォン向けのようで、 ２つのやり方を、どう使い分けたらよいのか わかりませんでした。 それぞれが、どのような用途に適しているのか 教えてください。
- ベストアンサー
- その他（プログラミング・開発）
- レスポンシブのコーディングについて
初めまして。 初心者ながらレスポンシブサイトを作っていて、 つまづいてしまった箇所があるので教えて頂きたいです。 １：左右中央寄せのcss記述について iPhone（320px）とAndroid（推定360px）の実機で表示確認をしながら Media Queriesのcssを記述を書いてたのですが、画面サイズが異なる為か cssの書き方が悪いのか、画面の左右中央寄せにしたくて 片方のスマホサイズに合わせると、片方ずれてしまいます。 cssでどの画面サイズでも左右中央に寄る書き方はありますか？ ２：Media Queriesについて １のcssの書き方がわからないので、画面サイズによって Media Queriesを書き分ければ早いかなと思い、 iPhone用とAndroid用で別で記述してみたのですが、 画面サイズを指定してるにも関わらず、片方のMedia Queriesが 両方のスマホに反映してしまいます。 下記、Media Queriesの記述内容です。 iPhone用（幅320px） @media screen and (max-width: 320px) { Android用（幅：360px） @media screen and (max-width: 360px) and (min-width: 321px) { 上記の書き方は間違っておりますでしょうか。 以上、2点について教えて頂けると助かります。 初心者なため、これで何時間も調べたり試行錯誤してしまっています。。 ちなみに、実機はiPhoneはiPhone4S、AndroidはF-01F です よろしくお願いします。 よろしくお願いします。
- 締切済み
- 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
- レスポンシブに出来るデザインと出来ないデザイン
レスポンシブに出来るデザインと出来ないデザインがあると聞いたのですが、 具体的にどんなデザインだと出来ないという情報が無いのですがどんなデザインは出来ないのでしょうか？ スマホがワンカラムなのでワンカラムに出来ないサイトは出来ないということでしょうか？ 380px以上でワンカラムに出来ればどんなデザインも大丈夫なのでしょうか？ またスマホやタブレット用のサイズのときはGVを下に持っていくなどそれようのUIに変形するように実務ではすべきなのでしょうか？ それともPCと同じ順番でもよいのでしょうか？ また賛否両論でこれからWEBクリエイターを目指す者がこちらを習得すべきなのでしょうか？ それともそれぞれの端末ごとの作成を習得した方がよほどよいのでしょうか？
- ベストアンサー
- CSS
- レスポンシブＷｅｂデザインに詳しい方
ＰＣ、スマホサイトを運営しています。A業者さんに、レスポンシブwebデザインで制作していただきました。今回、リニューアルをする予定なんですが、B業者に、PC版のみ制作してもらった場合、自動でスマホ版も更新されるのでしょうか？もしされない場合、B業者が作ったHPを、別の業者にレスポンシブwebデザインにて変更していただくことは可能なんでしょうか？諸事情で、A業者さんには頼めません。B業者は、レスポンシンブでは作れないとのことです。
- 締切済み
- CSS
- webレスポンシブ
新たに問題が出てきまして、 iphoneの表示で確認した所、 footerの画像が消えてくれません。 [問題の箇所] Media QueriesにてCSS /*=============================================== 画面の横幅が320pxまで ===============================================*/ @media screen and (max-width:320px){ footer{ background-image: url(images/footer/footer_wood.jpg); display:none; } どうぞ宜しくお願いします。
- 締切済み
- デザイナー・クリエイティブ職
- レスポンシブWebデザインでテキストの振分について
現在あるPCサイトをスマホにも対応させたいので、スマホ用のファイルを別に作成するか、またはレスポンシブWebデザインにしようと考えております。 そこで疑問に思ったことがあります。 私が把握しているレスポンシブWebデザインのサイトは、例えば住友商事のようなサイトです。http://www.sumitomocorp.co.jp/ パソコンのブラウザで表示している場合、マウスを使ってカーソルを操作してブラウザを縮小すると、レイアウトが可変します。 ※もちろん、スマホで見れば、スマホに最適化された表示になっております。 一方、アマゾンのようなサイトの場合、パソコンでカーソルを操作してブラウザを縮小しても表示は変わりません。 しかし、PCとスマホで異なるデバイスで確認すると、表示しているテキストや画像が異なります。 私の認識では、このようなサイトはPC用とスマホ用で異なるファイルを作成し、PCとスマホで読み込ませるURLを振り分けるていると思っておりましたが、PCで確認してもスマホで確認してもアドレスバーに表記されているURLは同一の物です。 このアマゾンのようなサイトはレスポンシブWebデザインによって作られているのでしょうか？ もし、レスポンシブWebデザインならば、デバイスごとに表示させる画像を振り分けることははもちろんのこと、テキスト（文章）の振り分もできるということなのでしょうか？ レスポンシブWebデザインで画像もテキストも振り分けられるなら、PC用とスマホ用でファイルを分ける必要はないかと思うので、私が作成したPC用のサイトを、レスポンシブWebデザインにしようかと思っております。 以上となります。 どのようなご回答でも良いので、また質問の内容とはそれてしまってもよいので、なにかしらご回答を頂けると幸いです。 宜しくお願い致します。
- 締切済み
- CSS
- レスポンシブｗ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デザイン 背景画像の高さを
レスポンシブWEBデザインで、お知らせなどの項目の背景を画像にし、テキストの量に応じて高さが調整できないかと思っています。 “background: cover”を使えば、ウィンドウサイズに合わせて可変はしますが、高さはテキストの量に応じて調整する方法をご存知の方、いらっしゃいましたらご教授願えませんでしょうか。 よろしくお願いします。
- ベストアンサー
- CSS
お礼
ありがとうございます