- ベストアンサー
レスポンシブWEBデザイン 画像拡大
お世話になります。 レスポンシブWEBデザインに対応していて、無料で使える商用利用可能な 拡大画像表示のlightboxみたいなプラグインを探しています。 ご存知の方、いらしたら教えてください。 よろしくお願いします。
- mituru326a
- お礼率73% (47/64)
- その他([技術者向] コンピューター)
- 回答数1
- ありがとう数17
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
レスポンシブデザインにされるということは、その前に当然、リキッドデザインだと思います。 リキッドデザインで、すでにディスプレイ(ウィンドウ幅)依存しないデザインになっているはずです。それでも640px以下だと利用しにくいために、はじめてレスポンシブでウィンドウ幅によってスタイルシートを切り替えているはずです。それによって、スマホの縦置きだろうが横置きだろうが、超幅広ディスプレイだろうが、たった一つのHTMLで対応可能となっているはずですよ。 そのリキッドデザインの段階で、画像を伸縮させておけば良いです。通常はそうされているはずです。 画像要素は、HTML/スタイルシート上は、[置換インライン要素]に分類されます。内容を含まない要素ですが、属性で指定された幅ないし、画像自体の幅で描画されます。 これをdisplay:blockとすることで、直近のstaticでないブロック要素のサイズを参照できるようになります。 ⇒10.3 幅とマージンの計算( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visudet.html#Computing_widths_and_margins ) ↑ここをしっかり理解しておくこと。 static以外ですから、relative,absoluteなどの、直近の親コンテナブロックのサイズを元に%で指定できるようになるはずですよ。
関連するQ&A
- レスポンシブ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デザインのフルスクリーンスライダーに関して こちらのサイト内デモのフルスクリーンスライダーなのですが http://www.alessioatzeni.com/blog/brushed-template/ スマホ表示にするとフルスクリーン画像が切り取られ中央の一部しか表示されなくなってしまいます。 スマホ用きちんと画像のすべてを表示するにはどこをいじればいいのでしょうか？ UIが気に入っているのでぜひこちらのテンプレートを使用したいのですが これだけが難点です。 御教授ください。
- ベストアンサー
- その他([技術者向] コンピューター)
- レスポンシブWEBデザイン 背景画像の高さを
レスポンシブWEBデザインで、お知らせなどの項目の背景を画像にし、テキストの量に応じて高さが調整できないかと思っています。 “background: cover”を使えば、ウィンドウサイズに合わせて可変はしますが、高さはテキストの量に応じて調整する方法をご存知の方、いらっしゃいましたらご教授願えませんでしょうか。 よろしくお願いします。
- ベストアンサー
- CSS
- レスポンシブWEBデザイン jsの指定について
レスポンシブWEBデザインで、PC用に指定しているjQueryプラグインを、スマホでは指定しない方法を知りたいと思っています。 例えば、640px以下はjQueryプラグインを動かさない、といった感じです。 ご教授の程、よろしくお願いします。
- ベストアンサー
- 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
- レスポンシブ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デザイン p要素のついて
レスポンシブWEBデザインにチャレンジしていますが、つまづいているところがあります。 テキストを“<p>～</p>”で囲うと、縮めた時にリサイズされず、見切れてしまいます。 また、横スクロールも現れ、頭を抱えております。 ulなどはリサイズされるのですが、原因がわからずに困っています。 ご存知の方、いらっしゃいましたらご教授をお願いします。
- ベストアンサー
- CSS
- レスポンシブに出来るデザインと出来ないデザイン
レスポンシブに出来るデザインと出来ないデザインがあると聞いたのですが、 具体的にどんなデザインだと出来ないという情報が無いのですがどんなデザインは出来ないのでしょうか？ スマホがワンカラムなのでワンカラムに出来ないサイトは出来ないということでしょうか？ 380px以上でワンカラムに出来ればどんなデザインも大丈夫なのでしょうか？ またスマホやタブレット用のサイズのときはGVを下に持っていくなどそれようのUIに変形するように実務ではすべきなのでしょうか？ それともPCと同じ順番でもよいのでしょうか？ また賛否両論でこれからWEBクリエイターを目指す者がこちらを習得すべきなのでしょうか？ それともそれぞれの端末ごとの作成を習得した方がよほどよいのでしょうか？
- ベストアンサー
- CSS
