- ベストアンサー
レスポンシブWEBデザイン p要素のついて
レスポンシブWEBデザインにチャレンジしていますが、つまづいているところがあります。 テキストを“<p>～</p>”で囲うと、縮めた時にリサイズされず、見切れてしまいます。 また、横スクロールも現れ、頭を抱えております。 ulなどはリサイズされるのですが、原因がわからずに困っています。 ご存知の方、いらっしゃいましたらご教授をお願いします。
- mituru326a
- お礼率73% (47/64)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- レスポンシブWEBデザイン 背景画像の高さを
レスポンシブWEBデザインで、お知らせなどの項目の背景を画像にし、テキストの量に応じて高さが調整できないかと思っています。 “background: cover”を使えば、ウィンドウサイズに合わせて可変はしますが、高さはテキストの量に応じて調整する方法をご存知の方、いらっしゃいましたらご教授願えませんでしょうか。 よろしくお願いします。
- ベストアンサー
- CSS
- レスポンシブWebデザインでテキストの振分について
現在あるPCサイトをスマホにも対応させたいので、スマホ用のファイルを別に作成するか、またはレスポンシブWebデザインにしようと考えております。 そこで疑問に思ったことがあります。 私が把握しているレスポンシブWebデザインのサイトは、例えば住友商事のようなサイトです。http://www.sumitomocorp.co.jp/ パソコンのブラウザで表示している場合、マウスを使ってカーソルを操作してブラウザを縮小すると、レイアウトが可変します。 ※もちろん、スマホで見れば、スマホに最適化された表示になっております。 一方、アマゾンのようなサイトの場合、パソコンでカーソルを操作してブラウザを縮小しても表示は変わりません。 しかし、PCとスマホで異なるデバイスで確認すると、表示しているテキストや画像が異なります。 私の認識では、このようなサイトはPC用とスマホ用で異なるファイルを作成し、PCとスマホで読み込ませるURLを振り分けるていると思っておりましたが、PCで確認してもスマホで確認してもアドレスバーに表記されているURLは同一の物です。 このアマゾンのようなサイトはレスポンシブWebデザインによって作られているのでしょうか？ もし、レスポンシブWebデザインならば、デバイスごとに表示させる画像を振り分けることははもちろんのこと、テキスト（文章）の振り分もできるということなのでしょうか？ レスポンシブWebデザインで画像もテキストも振り分けられるなら、PC用とスマホ用でファイルを分ける必要はないかと思うので、私が作成したPC用のサイトを、レスポンシブWebデザインにしようかと思っております。 以上となります。 どのようなご回答でも良いので、また質問の内容とはそれてしまってもよいので、なにかしらご回答を頂けると幸いです。 宜しくお願い致します。
- 締切済み
- CSS
- レスポンシブWEBデザインについて
レスポンシブWEBデザインのフルスクリーンスライダーに関して こちらのサイト内デモのフルスクリーンスライダーなのですが http://www.alessioatzeni.com/blog/brushed-template/ スマホ表示にするとフルスクリーン画像が切り取られ中央の一部しか表示されなくなってしまいます。 スマホ用きちんと画像のすべてを表示するにはどこをいじればいいのでしょうか？ UIが気に入っているのでぜひこちらのテンプレートを使用したいのですが これだけが難点です。 御教授ください。
- ベストアンサー
- その他([技術者向] コンピューター)
- レスポンシブWEBデザイン jsの指定について
レスポンシブWEBデザインで、PC用に指定しているjQueryプラグインを、スマホでは指定しない方法を知りたいと思っています。 例えば、640px以下はjQueryプラグインを動かさない、といった感じです。 ご教授の程、よろしくお願いします。
- ベストアンサー
- CSS
- レスポンシブWEBデザイン 画像拡大
お世話になります。 レスポンシブWEBデザインに対応していて、無料で使える商用利用可能な 拡大画像表示のlightboxみたいなプラグインを探しています。 ご存知の方、いらしたら教えてください。 よろしくお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
- レスポンシブ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デザインを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デザインでリンク先を変更したい
いつも助けて頂き重宝しております。 今回はレスポンシブWebデザインでご存知の方いらっしゃいましたら、 よろしくお願い致します。 トップページはレスポンシブデザインで作成しているのですが、 そこから先の着地ページがどうしてもＰＣ用とスマホ用に分かれているため、 画面サイズに応じてリンク先を変更したいのですが、そのようなことは可能でしょうか？ 「トップページ」レスポンシブデザイン 「次のページ」バナーをクリックすると ┃ ディスプレイサイズでリンク先を変更 ┏━━━┻━━━┓ スマホの場合 ＰＣの場合 ┃ ┃ リンク先Ａ リンク先Ｂ このようなイメージです。。。 できる限りスタイルシートで実現できればと思っておりますが、 難しいようであればどんな手段でも構いませんので、 ご教授の程よろしくお願い致します。
- ベストアンサー
- HTML
- レスポンシブ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
お礼
丁寧な解説、ありがとうございました。 色々わかってきたのでさらに精進します。