- ベストアンサー
レスポンシブWEBデザインについて
レスポンシブWEBデザインのフルスクリーンスライダーに関して こちらのサイト内デモのフルスクリーンスライダーなのですが http://www.alessioatzeni.com/blog/brushed-template/ スマホ表示にするとフルスクリーン画像が切り取られ中央の一部しか表示されなくなってしまいます。 スマホ用きちんと画像のすべてを表示するにはどこをいじればいいのでしょうか？ UIが気に入っているのでぜひこちらのテンプレートを使用したいのですが これだけが難点です。 御教授ください。
- lukeylukey13
- お礼率100% (7/7)
- その他([技術者向] コンピューター)
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
＞スマホ用きちんと画像のすべてを表示するには スマホを横向きにすると・・ 背景画像の縦横比(アスペクト比)を変えずに背景を覆う設定にされていると思います。 横長でも縦長--縦や横のいずれが切り取られてもよいような背景画像を選択しましょう。 background-size:をcontainからcoverに変更すると、すべてが表示されるが、上下や左右の何れかが切り取られるでしょう。 100% 100%にすると、伸縮(アスペクト比を変更)して表示されるのでは？？
関連するQ&A
- レスポンシブWebデザインでテキストの振分について
現在あるPCサイトをスマホにも対応させたいので、スマホ用のファイルを別に作成するか、またはレスポンシブWebデザインにしようと考えております。 そこで疑問に思ったことがあります。 私が把握しているレスポンシブWebデザインのサイトは、例えば住友商事のようなサイトです。http://www.sumitomocorp.co.jp/ パソコンのブラウザで表示している場合、マウスを使ってカーソルを操作してブラウザを縮小すると、レイアウトが可変します。 ※もちろん、スマホで見れば、スマホに最適化された表示になっております。 一方、アマゾンのようなサイトの場合、パソコンでカーソルを操作してブラウザを縮小しても表示は変わりません。 しかし、PCとスマホで異なるデバイスで確認すると、表示しているテキストや画像が異なります。 私の認識では、このようなサイトはPC用とスマホ用で異なるファイルを作成し、PCとスマホで読み込ませるURLを振り分けるていると思っておりましたが、PCで確認してもスマホで確認してもアドレスバーに表記されているURLは同一の物です。 このアマゾンのようなサイトはレスポンシブWebデザインによって作られているのでしょうか？ もし、レスポンシブWebデザインならば、デバイスごとに表示させる画像を振り分けることははもちろんのこと、テキスト（文章）の振り分もできるということなのでしょうか？ レスポンシブWebデザインで画像もテキストも振り分けられるなら、PC用とスマホ用でファイルを分ける必要はないかと思うので、私が作成したPC用のサイトを、レスポンシブWebデザインにしようかと思っております。 以上となります。 どのようなご回答でも良いので、また質問の内容とはそれてしまってもよいので、なにかしらご回答を頂けると幸いです。 宜しくお願い致します。
- 締切済み
- CSS
- レスポンシブに出来るデザインと出来ないデザイン
レスポンシブに出来るデザインと出来ないデザインがあると聞いたのですが、 具体的にどんなデザインだと出来ないという情報が無いのですがどんなデザインは出来ないのでしょうか？ スマホがワンカラムなのでワンカラムに出来ないサイトは出来ないということでしょうか？ 380px以上でワンカラムに出来ればどんなデザインも大丈夫なのでしょうか？ またスマホやタブレット用のサイズのときはGVを下に持っていくなどそれようのUIに変形するように実務ではすべきなのでしょうか？ それともPCと同じ順番でもよいのでしょうか？ また賛否両論でこれからWEBクリエイターを目指す者がこちらを習得すべきなのでしょうか？ それともそれぞれの端末ごとの作成を習得した方がよほどよいのでしょうか？
- ベストアンサー
- CSS
- レスポンシブWebデザインでファビコンの切り替え
レスポンシブWebデザインをしているのですが、 パソコンの場合、スマホの場合などでファビコンの画像を 変えることは可能なのでしょうか。
- 締切済み
- CSS
- レスポンシブwebデザイン
レスポンシブwebデザインで スマホの時は <img src="http://1.png"> <img src="http://2.png"> の様に2つの画像を表示し PCの時は <img src="http://1.png"> <img src="http://2.png"> <img src="http://3.png"> の様に3つの画像を表示する事は出来ますか? 実際のタグはどちらも <img src="http://1.png"> <img src="http://2.png"> <img src="http://3.png"> のように同じで スマホの場合は <img src="http://3.png">だけ 高さや横幅を0にして小さくするしかないのでしょうか?
- ベストアンサー
- HTML
- レスポンシブＷｅｂデザインに詳しい方
ＰＣ、スマホサイトを運営しています。A業者さんに、レスポンシブwebデザインで制作していただきました。今回、リニューアルをする予定なんですが、B業者に、PC版のみ制作してもらった場合、自動でスマホ版も更新されるのでしょうか？もしされない場合、B業者が作ったHPを、別の業者にレスポンシブwebデザインにて変更していただくことは可能なんでしょうか？諸事情で、A業者さんには頼めません。B業者は、レスポンシンブでは作れないとのことです。
- 締切済み
- CSS
- レスポンシブWEBデザイン 画像拡大
お世話になります。 レスポンシブWEBデザインに対応していて、無料で使える商用利用可能な 拡大画像表示のlightboxみたいなプラグインを探しています。 ご存知の方、いらしたら教えてください。 よろしくお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
- レスポンシブｗ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デザイン jsの指定について
レスポンシブWEBデザインで、PC用に指定しているjQueryプラグインを、スマホでは指定しない方法を知りたいと思っています。 例えば、640px以下はjQueryプラグインを動かさない、といった感じです。 ご教授の程、よろしくお願いします。
- ベストアンサー
- CSS
- レスポンシブwebデザイン PC背景とスマホ背景変
レスポンシブwebデザイン PCの背景とスマホの背景を別々に変更したいのですが、 どうやっても上手くいかない状況です。 どなたか解決できる方法をお教えくださませんでしょうか。
- 締切済み
- CSS
- レスポンシブWEBデザイン 背景画像の高さを
レスポンシブWEBデザインで、お知らせなどの項目の背景を画像にし、テキストの量に応じて高さが調整できないかと思っています。 “background: cover”を使えば、ウィンドウサイズに合わせて可変はしますが、高さはテキストの量に応じて調整する方法をご存知の方、いらっしゃいましたらご教授願えませんでしょうか。 よろしくお願いします。
- ベストアンサー
- CSS
お礼
横向き！ ページに入る前に注釈でスマホは横にして見てくださいと書いておけばすべてが解決しそうです。 縦しか考えてませんでした。 ありがとうございます。 ベストアンサーとさせて頂きます。