レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

RSS
  • 受付中

    回答
    1

    レスポンシブデザインが実機でうまく効いてくれません

    現在、WEBページの制作を行なっているのですが、スマホ用とPC用で、 トップページの画像を切り替える、と行ったような実装を行なっております。 しかし、PCのブラウザ(chromeやsafari)のレスポンシブモードではうまく表示が切り替わるのに、 実機(iphone7)で見るとうまく表示が切り替わっていません。 (chromeやsafariのレスポンシブ

    • 0評価
    • 331PV
    sk_3122 sk_3122 3日前に 回答
  • 受付中

    回答
    1

    contact formのレスポンシブと中央・左寄せ

    前提・実現したいこと wordpressのcontact form7で、スマホなどで見るとフォームの幅が狭くなってしまいます。 スマホなどのような特に画面が小さいデバイスで見たときにフォームを幅100%にするにはどうしたらよいでしょうか。 .wpcf7-form p { text-align: center; } また、↑のようにすると全部が中央寄せに

    • 0評価
    • 55PV
    aozuki aozuki 5日前に 回答
  • 受付中

    回答
    1

    サイトで画像が入れ替わる現象

    現在WordPressでサイトを制作しているのですが画像が入れ替わってしまう問題が起きています。 テーマは自作テーマで、ベースとしてSageを使わせて頂いております。 現象の詳細を説明すると、 現在確認されているのはスマホ版においてのみ画像が入れ替わってしまう 画像の入れ替わり方はまちまち そのページ上全体に表示される画像が入れ替

    • 0評価
    • 741PV
    SatoshiSakai SatoshiSakai 3週間前に 回答
  • 受付中

    回答
    0

    colorboxのポップアップ位置を調整したい。(スマホ横回転時)

    colorboxのポップアップ位置を調整したい。 サイト内の画像表示にjQueryプラグインのcolorboxを使用しています。 画像をクリックすると、画面中央にポップアップされます。 PC、スマホ縦のときでは表示に特に問題はありませんでした。 スマホを横に回転すると、画像が中央に来ない。 レスポンシブ対応として、リキッドデザインにしており、PCでは二列

    • 0評価
    • 96PV
    rrr6 rrr6 1ヶ月前に 質問を編集
  • 受付中

    回答
    1

    アンドロイドのタブレット端末で見た場合、拡大されて表示される

    レスポンシブサイトをアンドロイドタブレットで見た場合、拡大されて表示されてしまいます。 ピンチインすると正常に収まり、他ページに移ってもそのままで問題ありません。 これはアンドロイドでのみ起こり、iphoneやipadでは正常に見えています。 解決する方法はありますでしょうか?

    • 0評価
    • 73PV
    yoshinavi yoshinavi 1ヶ月前に 回答
  • 受付中

    回答
    1

    Bootstrapで思うようにレスポンシブされない【画像有り】

    前提・実現したいこと スマホで表示させた場合に、2つのDIV要素を縦1列で表示させたいです。 発生している問題・エラーメッセージ 縦に表示はされるのですが、下のDIVの幅が異常に狭いです。 上のDIVと同じように、画面両端まで埋まってほしいです。 該当のソースコード html <body> <div class="container-flu

    • 0評価
    • 123PV
    s8_chu s8_chu 1ヶ月前に 回答
  • 受付中

    回答
    1

    レスポンシブ表示時、右側に隙間が空いてしまう

    http://tipphoto.takutyamu.net/index.php 上記URLのサイトでレスポンシブ表示時、右側に隙間が空いてしまうのですが原因が分かりません。 投稿のカードがマージンライトが効いてしまっているのは既知ですが、それは関係ないようです。 どこが悪さしているのでしょうか。

    • 0評価
    • 72PV
    s8_chu s8_chu 1ヶ月前に 回答
  • 受付中

    回答
    2

    Bootstrapの既存のcssの調べる方法が知りたい。

    昨日から、Bootstrapを勉強している者です。 Bootstrapの、既存のCSSを調べる方法(cssが書かれているホームページ)が知りたいです。 よろしくお願い致します。

    • 0評価
    • 361PV
    mts10806 mts10806 1ヶ月前に 回答
  • 解決済

    回答
    2

    レスポンシブ でナビが右端に行ってしまうのを直したい。

    現在、あるHPの採用ページをレスポンス化しているのですが、 何故かスマホで表示されるナビの画像が、右端に出てしまいうまくレスポンシブにならない。 TOPだけはレスポンス対応になっているので、それを真似てみたがうまく行かない。 ID develop PASS PassW0rd http://p53.kunokin.develop.lionheart.co.jp

    • 0評価
    • 76PV
    TomokiSugiura TomokiSugiura 1ヶ月前に コメント
  • 解決済

    回答
    2

    フォームがアンドロイドでフォーカスすると消えてしまう

    こんにちは。いつもお世話になっております。 レスポンシブでサイトを制作中で以下のjqueryプラグインを使ってドロワーメニューにしています。 http://git.blivesta.com/drawer メニュー内に設置した検索フォームがandroidだとフォーカスすると消えてしまう。 メニュー自体もcloseして消えてしまい予想検索単

    • 0評価
    • 1053PV
    blue7 blue7 1ヶ月前に ベストアンサー
  • 解決済

    回答
    1

    PC用とスマホ用のスタイルシートを別個に作るのは問題ないでしょうか?

    いつも1枚のスタイルシートに、メディアクエリを使ってPC用とスマホ用に分けて書いているのですが、cssの記述が長くなってくると、例えばmin-width:768pxの記述はどこだったっけ?とスクロールしながら探すのが非常に面倒だなと感じることがあります。 これを例えば、PC用のスタイルシートと、スマホ用のスタイルシートに分けて記述するのは問題ないのでしょ

    • 0評価
    • 85PV
    hajini10 hajini10 1ヶ月前に コメント
  • 解決済

    回答
    1

    モバイルフレンドリーテストで問題点が解消しない

    下記リンク先のページについて、モバイルフレンドリーテストの問題点が解消しなくて困っております。 モバイルフレンドリーテストのリンク先を下記に記載いたします。 スマホ上は、適切に表示されるのですが、なぜか問題点が解消されません。 インターネットで色々と調べて試しては見たものの、問題点は解消されないままです… もし、解消方法をご存知の方がいらっしゃい

    • -1評価
    • 69PV
    tarou-tanka tarou-tanka 1ヶ月前に 質問を編集
  • 解決済

    回答
    2

    PC、スマホの画面幅で背景画像を切り替える方法を教えて下さい。

    前提・実現したいこと レスポンシブレイアウトを勉強中の初心者です。 @mediaを使ってPCとスマホの画面幅を切り替えと 背景画像を切り替える方法を試しています。 不足しているソースや背景画像の設定方法を教えて下さい。 発生している問題・教えていただきたいこと ・PC画像の背景画像は横幅100%だが、高さは350pxで指定 したい場合の%で

    • 0評価
    • 542PV
    T_sa T_sa 1ヶ月前に ベストアンサー
  • 受付中

    回答
    1

    window.matchMediaで作ったレスポンシブJSが効率悪いので直したい

    JS初心者です。 Bootstrapと同じブレイクポイントで、window.matchMediaを使ったレスポンシブ用のクラス振り分けJS作りました。 xs:0~575px sm:576~767px md:768~991px lg:992~1199px xl:1200px~ Bootstrapがメディアクエリでmin-width:◯◯◯px以上とい

    • 0評価
    • 101PV
    kumakuma112 kumakuma112 2ヶ月前に コメント
  • 解決済

    回答
    1

    フッターメニューをリサイズしてアコーディオンにしたい

    前提・実現したいこと 見た目的なだけでなく可変対応させたいです。 リロードするタイプはできるのですが、 シンプルな方法でリサイズ対応をしたいです。 発生している問題 PC表示からはじめて480px以下にすると、 見た目的にはリストは非表示になるのですが、 クリックしても動かない(当然ですが) スマホ表示(480px以下)でリロードすると 動くのですが、P

    • 0評価
    • 98PV
    lingwood lingwood 2ヶ月前に コメント
  • 受付中

    回答
    0

    メディアクエリ 750px レスポンシブ用 img をwidth:90% ; margin : 0 ...

    ・箇所 レスポンシブコーディング 全体 ・事象内容 メディアクエリ 750px で設定している。 img を width:90% ; margin : 0 5%; にしたいができない。 google のプレビューでは、デバイスの幅で 100% になる。 (360や412) img に100%をつけると 360px になってしまう ・試したこと bod

    • 0評価
    • 73PV
    teratailが2ヶ月前に アップデート
  • 解決済

    回答
    1

    特定のブラウザサイズの時だけ、cssでvw単位を使ったフォントサイズが動作しない

    以下のcssでブラウザを399px以下にすると、.post_titleのフォントサイズがhtmlに設定されているサイズと同じになってしまいます。 400px以上だと、問題なく大きなフォントサイズで表示できています。 どこに問題があるでしょうか? @media screen and (min-width:400px){ html { font-si

    • 0評価
    • 96PV
    RyoUY RyoUY 2ヶ月前に コメント
  • 解決済

    回答
    1

    画像のマウスオーバーをクロスフェードさせたときにchromeのみレスポンシブがおかしくなるため対処を...

    レスポンシブでサイトを制作しています。 マウスオーバーで画像が切り替わるように、 画像名に「XXX_on.jpg」「XXX_off.jpg」をつけて(XXXは同じ名前)、 「XXX_off.jpg」にマウスオーバーすると、「XXX_on.jpg」が表示されるようにしています。 レスポンシブでサイズが変更になった際、 IEやFirefoxでは、マウスオ

    • 0評価
    • 91PV
    monchiyuki monchiyuki 2ヶ月前に コメント
  • 受付中

    回答
    3

    MacBookでも左右に余白が空くぐらいの幅は、何ピクセルぐらいなのでしょうか?

    当方ホームページ制作は、初心者に毛が生えたような感じの者です。 ホームページ自体の、widthを1100pxぐらいにすると、MacBookで検証を使った時に、ホームページの左右の余白がなくなってしまいます。 MacBookくらいの幅でも、左右に少しでも余白が出るぐらいのwidthのピクセルは、どれくらいになりますでしょうか・・・???

    • 0評価
    • 135PV
    yoshinavi yoshinavi 3ヶ月前に コメント
  • 解決済

    回答
    2

    レスポンシブにおけるjs(jQuery)の切り替えについて

    jQueryを主に使ってWebサイトの動きをごにょごにょしているのですが、 レスポンシブデザインでスマホ、タブレット、pcで用いるjQueryを切りたいと考えています! 今回の場合は、pcではlightbox(featherlight.js)で表示していた要素を、スマホではタブ切り替え(生jQueryもしくは何かプラグイン)で表示できるようにしようと思ってい

    • 0評価
    • 21230PV
    miwakazuo miwakazuo 3ヶ月前に ベストアンサー
1

タグ情報

  • あなたの順位

    -

  • タグ登録者数

    169

  • 総質問数

    179

  • 今週の質問数

    2

関連するタグ

レスポンシブWebデザインタグのよく見られている質問

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る