レスポンシブWebデザイン

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

RSS

  • 解決済

    回答
    1

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

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

    • 0評価
    • 25PV
    monchiyuki monchiyuki 22時間前に コメント
  • 受付中

    回答
    3

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

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

    • 0評価
    • 71PV
    yoshinavi yoshinavi 1週間前に コメント
  • 解決済

    回答
    2

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

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

    • 0評価
    • 20634PV
    miwakazuo miwakazuo 2週間前に ベストアンサー
  • 解決済

    回答
    2

    クックパッド株式会社HPフッターを実装したい。参考ページ探してます。

    検索して探してるのですが。 フッター レスポンシブ デザイン bootstrap等で検索しても いまいち引っかからず、何か名称はないか探しています。 もし下記フッターのデザインに近い参考ページをご存知の方、 いらしたら、ご教授頂けると幸いです。 こういうフッターです。 クックパッド株式会社HP PC スマホ①

    • -1評価
    • 164PV
    aro10 aro10 2週間前に ベストアンサー
  • 解決済

    回答
    1

    iframeスライダーの可変について

    スライダーをiframeで読み込み、 そのiframeを可変させる方法を教えてほしいです。 スライダーはslickを使っています。 下記のように試したところ、 Androidではiframeの可変が出来ましたが、 iphoneだと崩れてしまいます。 ■試したこと <style> .movieWraper { position: relativ

    • 0評価
    • 100PV
    mmm_ mmm_ 3週間前に コメント
  • 解決済

    回答
    3

    レスポンシブデザインにリプレイスする際のテスト方法

    お世話になっております。 Webサイトを一括してレスポンシブにリプレイスする際のテスト方法はどのようなものがあるでしょうか? 例えば、pcのブラウザ(Chrome)でサイズを変えてみてデザインが崩れないかチェックするのが思いつきますが、これで網羅出来ているのでしょうか? 見た感じ、Chromeの最小サイズはスマホの画面より大きい気がします。 それから

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

    回答
    0

    レスポンシブデザインでGoogle AdSenseを使える?

    Twitter Bootstrapを使って、画面の横幅に応じてスマホ用デザインとPC用デザインが切り替わるレスポンシブデザインのサイトを作っています。このようなサイトでGoogle AdSenseは使えるのでしょうか。 画面が広い(PC用)場合は2カラムレイアウトになっておりサイドバーに広告を載せる予定ですが、画面の横幅が狭い(スマホ用)場合は、サイドバ

    • 0評価
    • 94PV
    teratailが1ヶ月前に アップデート
  • 受付中

    回答
    0

    EC-CUBE2.4系 レスポンシブ対応(スマホ無効化)

    EC-CUBEの2.4系を使用しており、 レスポンシブ対応をしたのですが、 スマホで確認するとスマホ用のテンプレが選択されてしまいます。 ネットで調べると、、 /data/class/SC_Display.phpを編集するような記事が、多数出てきますが、 そのようなファイルが2.4系では、存在しません。 2.4系でのレスポンシブ対応方法を知っていたら

    • 0評価
    • 118PV
    teratailが2ヶ月前に アップデート
  • 受付中

    回答
    1

    bxsliderでスマホ表示したときに、表示枚数を1枚にして画像サイズも幅ぴったり(100%)にした...

    ■やりたいこと。 bxsliderでPCの時は3枚表示させる幅は1020pxでセンタリング、1020pxの中に3枚表示させ、スマホでの表示の際は1枚表示にして、 その1枚をスマホの幅に合わせる。 ■できていることと ・PCでの表示は問題なくできている。 ■できていないこと。 ・スマホで表示させたときに、1枚表示にならない。(少し右側に次の画像が見

    • 0評価
    • 120PV
    onodo onodo 3ヶ月前に 回答
  • 解決済

    回答
    1

    レスポンシブでスマホレイアウトの際にmouseenter・mouseleaveの適用を解除したい

    前提・実現したいこと レスポンシブデザインの制作にて、 ナビゲーション部分の動作がうまくいかずに困っておりますので、助けていただけると幸いです。 よろしくお願い致します。 ナビゲーション部分ですが、 【 PCレイアウトの場合 】 各ナビゲーションにマウスオーバーすると、ポップアップでサブナビゲーションを表示 【 スマホレイアウトの場合 】 各ナビ

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

    回答
    1

    wordpressでシェアボタンのみをレスポンシブさせない方法はありますか?

    前提 HTML・CSS・wordpressの初心者です。 実現したいこと シェアボタンのみレスポンシブ対応前の状態を維持させたいです。 発生している問題 現在記事を投稿しているページがレスポンシブに対応しておらず、 スマホで確認をすると、画像が小さく表示されてしまっています。 そこでレスポンシブ対応はできたのですが、 シェアボタンのデザインが変わ

    • 0評価
    • 108PV
    mx3 mx3 3ヶ月前に ベストアンサー
  • 解決済

    回答
    3

    CSSで画像をトリミングしてレスポンシブ対応したい

    以下のようなコードで表示される画像を、PC閲覧時にフルサイズ表示。モバイル閲覧時に左右を200pxずつトリミングしてからフルサイズ表示したいです。 <div class="hako"> <img src="aaa.jpg"> </div> (aaa.jpgのサイズは幅1200px、高さ250px) 以下を見つけて、高さ・幅を差し替えて行なってみたの

    • 0評価
    • 153PV
    coinbura coinbura 3ヶ月前に ベストアンサー
  • 解決済

    回答
    1

    monaca iPhone viewportが効かない

    monacaにて現在、iPhone端末向けのアプリを作成しており、HTML自体はWebサーバーにアップしており、jqueryでWebサーバーで取得したHTML(body部分のみ)を取得し、bodyタグに出力しているのですが、iPhone5iS端末で確認すると画面幅が大きく横スクロールが発生してしまう状況です。下記のmonacaのJSを利用してもうまくレスポン

    • 0評価
    • 328PV
    t-morita-logic t-morita-logic 3ヶ月前に コメント
  • 解決済

    回答
    3

    スマホ画面で検証時に、コンテンツが画面に収まりきらず横スクロールが発生している症状を改善したい。

    前提・実現したいこと Google検証ツールにて各デバイスでの表示を確認しています。 現状、どのデバイス(例 iphone5,6,6plus,ipad等)で確認してもpc画面内に収まって表示されるコンテンツが、全て見切れてしまいます。常に横スクロールが発生している状態で見辛いです。 今まで下記コードをhead内に記述して、各デバイスに適した縮小が施された

    • 0評価
    • 450PV
    6111-debutant_. 6111-debutant_. 3ヶ月前に コメント
  • 解決済

    回答
    2

    投稿系のレスポンシブサイトにおける画像の扱いについて

    「投稿系のレスポンシブサイトにおける画像の扱い」についてお聞きしたいことがあります。 現在、レスポンシブのwebメディア(画像投稿機能あり)を作成しているのですが スマホ、タブレット、PCの際の画像サイズや解像度の扱いをどうするべきか悩んでおります。 PCサイズでのサムネイル画像などの投稿した場合、 スマホの場合にサイズが大きく、ページ自体が

    • 0評価
    • 272PV
    Soeji Soeji 4ヶ月前に コメント
  • 受付中

    回答
    0

    TinyMCEとelFinderとを連携して画像アップロードする仕組みのレスポンシブ化について

    TinyMCEとelFinderとを連携して画像アップロードが出来る 機能を追加したものを実装したいと考え、下記のサイトを参考に実装を行い、 実際に動かすことが出来ました。 参考サイト qiita.com ・http://qiita.com/nissuk/items/0a9c38d882c0d6315366 PCやタブレットなどの大きいデバイスでは、

    • 0評価
    • 205PV
    teratailが4ヶ月前に アップデート
  • 受付中

    回答
    1

    Wordpress記事一覧の列数のレスポンシブデザインのCSSでの実現方法

    実現したいこと 【実現したいこと】 Wordpressの投稿記事一覧画面で、以下のレスポンシブデザインを実現したいです。 ①パソコンの場合 ・投稿記事が表示が、最大5列になる。 ・ブラウザの縮小に応じて、5列→4列→3列→2列という風に列の数が減っていく。 ②スマホの場合 ・2列で固定。 ③それ以外(タブレット端末等) ・3列で固定。 http://gi

    • 0評価
    • 167PV
    miz miz 4ヶ月前に 回答
  • 解決済

    回答
    1

    Flickityで、スマホサイズの時は適用させないコード

    前提・実現したいこと ここに質問したいことを詳細に書いてください 現在、jQueryプラグインFlickityを使用して、スライダーを作成しています。 このプラグインを、500px以下の場合には停止させ、501px以上であれば動作させるように したいと思っていますが、全てのサイズで動作してしまい、困っています。 初歩的な質問かとは思いますが、どうぞよろし

    • 0評価
    • 144PV
    addonestep addonestep 5ヶ月前に 回答
  • 解決済

    回答
    1

    aspで作成されたサイトはレスポンシブできますか?

    早速質問させていただきます。 ・タイトル通りですが、aspで作成されたサイトはレスポンシブできますか? ・もしできるとしたら、方法はhtmlでのやり方と一緒ですか?(@media) ・違うのでしたら、どういった方法でしょうか?(参考ページ頂けたら幸いです) 以上となります。 すみませんが、回答宜しくお願いいたします。

    • 0評価
    • 178PV
    Kuriaki Kuriaki 5ヶ月前に コメント
  • 解決済

    回答
    3

    レスポンシブデザインの件(見やすく再送させていただきました)

    ただいま、レスポンシブデザイン中です。 widthが767px以下になったらメイン画像が可変するようにしたいのですがうまくいきません・・・。 よく、 img{ width:100%; max-width:100%; height:auto; } にしたら良いと色々書いてあったので以下のように試みましたがメイン画像が縮小されませんでした・・・。 ひよ

    • 0評価
    • 495PV
    mirainonakamura mirainonakamura 5ヶ月前に ベストアンサー
1

タグ情報

  • あなたの順位

    -

  • タグ登録者数

    156

  • 総質問数

    165

  • 今週の質問数

    1

関連するタグ

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

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