レスポンシブWebデザイン

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

RSS

  • 受付中

    回答
    4

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

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

    • 0評価
    • 151PV
    nekomura nekomura 1ヶ月前
  • 解決済

    回答
    3

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

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

    • 0評価
    • 78PV
    sena_080 sena_080 2週間前
  • 解決済

    回答
    2

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

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

    • 0評価
    • 61PV
    webgoto webgoto 2週間前
  • 受付中

    回答
    1

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

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

    • 0評価
    • 52PV
    kihara kihara 2週間前
  • 解決済

    回答
    1

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

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

    • 0評価
    • 104PV
    kotori_00 kotori_00 1週間前
  • 解決済

    回答
    4

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

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

    • 0評価
    • 409PV
    TakuHosoya TakuHosoya 1ヶ月前
  • 解決済

    回答
    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評価
    • 36PV
    rainbowsix rainbowsix 1ヶ月前
  • 解決済

    回答
    3

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

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

    • 1評価
    • 415PV
    nekomura nekomura 2ヶ月前
  • 受付中

    回答
    0

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

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

    • 0評価
    • 40PV
    FUMIHIRO FUMIHIRO 1ヶ月前
  • 解決済

    回答
    2

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

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

    • 0評価
    • 100PV
    AtsushiNakamura AtsushiNakamura 2ヶ月前
  • 解決済

    回答
    2

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

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

    • 0評価
    • 171PV
    mosin_nozomi mosin_nozomi 2ヶ月前
  • 解決済

    回答
    1

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

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

    • 0評価
    • 53PV
    may88seiji may88seiji 2ヶ月前
  • 受付中

    回答
    0

    再考します

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

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

    回答
    0

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

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

    • 0評価
    • 186PV
    token_regain token_regain 2ヶ月前
  • 受付中

    回答
    0

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

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

    • -3評価
    • 179PV
    webpage webpage 2ヶ月前
  • 解決済

    回答
    1

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

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

    • 0評価
    • 102PV
    nnahito nnahito 3ヶ月前
  • 受付中

    回答
    0

    twitterの埋め込みタイムラインについて

    お世話になります。 ウェブサイトを作成しているのですが、ツイッターの埋め込みタイムラインについて質問させてください。 レスポンシブサイトを作成していて、埋め込みタイムラインをiphone6sで表示確認したところ、文字が飛び出してしまいました。横幅を100%にする方法はありませんか?

    • 0評価
    • 138PV
    ishipp ishipp 3ヶ月前
  • 解決済

    回答
    1

    レスポンシブ対応の写真ギャラリー

    下記のソースをもとに写真のギャラリーページを作成しています。 http://tympanus.net/Tutorials/ResponsiveImageGallery/ ●実現したいこと ブラウザのウインドウ幅を小さくした際に、サムネイルの横幅を縮小したいです。 ●質問 gallery.js の 91行目「imageW : 65」で幅を指定

    • -1評価
    • 123PV
    TKojima TKojima 3ヶ月前
  • 解決済

    回答
    3

    wordpress のtwentythirteenを改造したレスポンシブが反映されません

    twentythirteenのレスポンシブは暖色系でまとめられているはずですが、何故か設定した覚えがない青系のヘッダー、フッターが表示されます。 パソコンではフッター部分のProudly powered by wordpress を消したので表示されませんが、iphoneからはどこからの記述なのか分からず、Proudly powered by wordpr

    • 0評価
    • 112PV
    Emi. Emi. 3ヶ月前
  • 解決済

    回答
    2

    レスポンシブデザインのimgタグをsrcsetで設定しても、画像の切り替えができない

    srcsetによるPCサイトとSPサイトの画像の切り替えソースを入力したのですが、切り替わりませんでした。。。 同じように質問している方(URL:https://teratail.com/questions/8678)の内容も確認をしたのですが、わかりかねたので質問させていただきます。 <img src="images/hoge.png" src

    • 0評価
    • 251PV
    ami15821 ami15821 3ヶ月前
1

もっと見る

タグ情報

  • あなたの順位

    -

  • タグ登録者数

    106

  • 総質問数

    103

  • 今週の質問数

    0

関連するタグ

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