レスポンシブWebデザイン

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

RSS

  • 受付中

    回答
    0

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

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

    • 0評価
    • 318PV
    aki8933 aki8933 1週間前
  • 解決済

    回答
    1

    メディアクエリが正常に動作しません。

    TumblrでBootstrap3を導入してウェブサイトを作成しています。 問題はcssにてメディアクエリで調整を試みたところ、 「記述した順番で1番上にあるものが読み込まれない」というものです。 cssにて、とある要素に対して以下のコードを記述しました。 @media (min-width: 991px) {...} /* PC */ @

    • 0評価
    • 55PV
    izkatie22 izkatie22 3週間前
  • 解決済

    回答
    2

    HTML5のsrcset属性で画面幅によって画像を切り替えたいのですがうまくいきません…

    以下のようにコード書きましたが画像が切り替わりません。なぜでしょうか? コード <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <p>画像切り替えをつくるぞ!!</p> <img src="img/example-img.

    • 0評価
    • 97PV
    h-o h-o 1ヶ月前
  • 解決済

    回答
    1

    レスポンシブでアコーディオン・タブのブレークポイント時のリセット関数について

    現在、レスポンシブでWebページを作成しており、自分では解決できそうもないので質問をさせていただきます。皆様のお力をお貸しください・・・よろしくお願いいたします。 前回の質問:https://teratail.com/questions/54584 やりたいこと ブレークポイント時に非表示状態になった要素がリセット関数で初期状態に戻っており、選

    • 0評価
    • 108PV
    Asibe Asibe 1ヶ月前
  • 解決済

    回答
    4

    ログイン画面テキストエリア<input type="text"  ・・・/>の中に、アイコンを表示さ...

    よろしくお願いいたします。 現在、レスポンシブ対応のweb画面を製作中です。 現在は某サイトのUIを参考に、ログイン部分を作っています。 参考サイト テキストエリアの部分に、下記画像のように左端部分にアイコンをつけたいと思っています。 参考サイトを検証ツール(Chromeデベロッパーツール)で調べたり、ソースを見たりしているのですが、

    • 0評価
    • 273PV
    nekomura nekomura 3ヶ月前
  • 解決済

    回答
    3

    jQueryでウィンドウリサイズ時に画面のリロードを行いたいのですが、Firefoxでのみエラーが出...

    レスポンシブサイトの制作でウィンドウリサイズ時に画面のリロードを行いたいのですが、下記のようなコードで実装しようとしたところFirefoxでのみエラーが出てしまいリロードがされません。 $(document).ready(function(){ var timer = false; $(window).on("load

    • 0評価
    • 162PV
    sena_080 sena_080 2ヶ月前
  • 解決済

    回答
    2

    ブラウザがviewportをサポートしているか調べる

    <meta name="viewport" content="width=360"> を指定することで画面の表示域を指定できますが 基本的にモバイルブラウザ向けの設定であり、PCのブラウザでは設定内容は反映されません。 javascriptなどを使用して、使用中のブラウザがviewport設定の表示に対応しているのか、いないのかを判別する方法はあ

    • 0評価
    • 116PV
    webgoto webgoto 2ヶ月前
  • 受付中

    回答
    1

    スマホでアドレスバーが出てきてレイアウトがずれる

    前提・実現したいこと fullpage.jsを使ってサイトをフルスクリーン表示にしたいのですが、 スマホだとアドレスバーが出てしまい表示が崩れてしまいます。 しかもスクロールすると次の内容に移ってしまう為、 見ているユーザー自身でも消すことが全くできないです。 アドレスバーをjQuery等で非表示にすることは 出来ないのでしょうか? 詳しい方教

    • 0評価
    • 141PV
    kihara kihara 2ヶ月前
  • 解決済

    回答
    1

    wordpress レスポンシブ jQuery width();が反映されない

    解決したいこと wordpressのオリジナルテーマ製作でjQueryにてウィンドウの幅を変えた時にウィジェットにクリックイベントでアコーディオン機能をつけたいのですが動作してくれません。きちんと動作するようにするにはどうしたらよいでしょうか。 jQuery <?php wp_deregister_script('jquery'); ?>

    • 0評価
    • 169PV
    kotori_00 kotori_00 2ヶ月前
  • 解決済

    回答
    4

    スマホにのみ一部のCSSが反映されません

    PCでは意図した通りにCSSが効くのですが、スマートフォンで表示した場合に一部のCSSのみが効いてくれません。 ブラウザはPC、スマホ共にChromeで確認しています。 ~効かないCSS~ <div class="eyecatch-box"> <img class="eyecatch" src="hogehoge.jpg"> </d

    • 0評価
    • 486PV
    TakuHosoya TakuHosoya 2ヶ月前
  • 解決済

    回答
    1

    右、左flaot,それぞれwidth 45%にしてiphoneで見ると余白がでてしまう。

    .l{ width:45%; float:left; } .r{ width:45%; float:right; } <div class="clearfix"> <div class="l"> <select> <option>hogehoge</option> </se

    • 0評価
    • 82PV
    rainbowsix rainbowsix 3ヶ月前
  • 解決済

    回答
    3

    レスポンシブ対応web画面 レイアウト 画像をTOP画面とコンテンツ部分にかかるように表記したい

    よろしくお願いいたします。 現在、レスポンシブ対応のweb画面を製作中です。 レイアウトについて、有職者の皆様からお知恵やアドバイス、実現方法をご教示いただきたく存じます。 下記画像が、実現したいレイアウト(デザイン原案)です。 主に、カラーの楕円でマークしている部分を実現させるコーディングがうまくできません。 私が作ったものは以下

    • 1評価
    • 596PV
    nekomura nekomura 3ヶ月前
  • 受付中

    回答
    0

    画面チェックエラー時の画面表示

    RailsでCarrierWaveを使用して画像を保存しています。入力画面の項目でエラーが発生した際、入力画面にもどり、 画面項目は入力した状態にもどるように、 パラメータを設定して表示するようにしました。 しかし、画面のイメージが選択前の状態にもどってしまいます。 選択後の状態に設定するよい方法をご教授願います。 <p> <%= f.fil

    • 0評価
    • 101PV
    FUMIHIRO FUMIHIRO 3ヶ月前
  • 解決済

    回答
    2

    cakephpで作ったサイトがスマホでレスポンシブにならない

    レスポンシブにならない 現在、レシポンシブデザインで開発しているサイトが iphone6とchromeのデバイスチェックで確認するとレスポンシブにならない問題が起きました。 ブラウザチェックツールの【screenfly】http://quirktools.com/screenfly/ を使って開発しているときは問題なく全デバイスレスポンシブが

    • 0評価
    • 163PV
    AtsushiNakamura AtsushiNakamura 3ヶ月前
  • 解決済

    回答
    2

    javascriptとphpで画面サイズを取得し、htmlをechoする

    Webデザイン初心者です。 現在、レスポンシブデザインにするため、画面サイズをJavaScriptで取得し、それをPHPに渡し、if文でHTMLをechoするか否かを決める、というプログラムを実装したいのですが、なかなかうまくいきません。 以下のサイトを参考にしました。 http://muumv.com/section-windowsize/

    • 0評価
    • 231PV
    mosin_nozomi mosin_nozomi 3ヶ月前
  • 解決済

    回答
    1

    tableレイアウト スマートフォンの対応

    前提 個人のプロフィールを表示する部分をhtmlで組みました。 実現したいこと スマートフォン表示の対応として下のスクリーンショットのように組みたいとおもっております。 メディアクエリーの使い方はわかっています。 スマートフォン用のcssの記述の方法をお教えいただければ幸いです。 該当のソースコード table tr th, #

    • 0評価
    • 95PV
    may88seiji may88seiji 4ヶ月前
  • 受付中

    回答
    0

    再考します

    こちらの質問が他のユーザから「問題・課題が含まれていない質問」という指摘を受けましたので、再考します

    • -2評価
    • 136PV
    re97 re97 4ヶ月前
  • 受付中

    回答
    0

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

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

    • 0評価
    • 256PV
    token_regain token_regain 4ヶ月前
  • 受付中

    回答
    0

    レスポンシブでSPのみコンテンツを減らす場合、display:none;で非表示にするのが主流ですか...

    レスポンシブでSPのみコンテンツを減らす場合、display:none;で非表示にするのが主流ですか? それとも鷹野氏の言うように消す要素があるような、設計をすること自体を避けるべきでしょうか? ECでおすすめ商品ベスト6がPCであり、SPは長くなるので3までにするということは、 問題ないと思いますか? それともそれなら初めからPCも3までに

    • -3評価
    • 220PV
    webpage webpage 4ヶ月前
  • 解決済

    回答
    1

    【CSS】レスポンシブデザインで、スマフォ表示の時にdivの要素の大きさを変えたい

    質問概要 PC表示の時は、画面の80%まででページを表示し、スマフォ表示の時は100%でページを表示したい。 質問詳細 フロントエンド苦手です。 一緒にbootstrapを使っているのですが、グリッドシステム(?)くらいしか使っていません。 ナビゲーションメニューバーに不満があったため、そこを自作しております。 今、グリッドシステムの

    • 0評価
    • 147PV
    nnahito nnahito 4ヶ月前
1

もっと見る

タグ情報

  • あなたの順位

    -

  • タグ登録者数

    113

  • 総質問数

    107

  • 今週の質問数

    1

関連するタグ

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