レスポンシブWebデザイン

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

RSS

  • 解決済

    回答
    2

    画像の上に文字を置き、中央揃えにしたい

    前提・実現したいこと レスポンシブ対応で画像の上に文字を表示させ、文字を中央揃えにしたい 該当のソースコード <section class="conA"> <div class="container"> <ul> <li> <p>Menu</p> <a href=""><img src="img/menu-bnr.jpg" al

    • 0評価
    • 56PV
    2ico1chi 2ico1chi 1日前
  • 解決済

    回答
    2

    レスポンシブの画像が可変にならない

    レスポンシブ対応 @mediaクエリを使ってレスポンシブルデザインを作成したい 発生している問題・エラーメッセージ 画像が可変となりません。 imgに対してwidth:100% height:auto;としていますがかかりません。 該当のソースコード ■html <main> <div class="mainPhoto">

    • 0評価
    • 57PV
    2ico1chi 2ico1chi 2日前
  • 解決済

    回答
    1

    CSSでliを2カラムにしたい

    前提・実現したいこと flexを使って2カラムにしたい デザインはレスポンシブデザインで組んでいます。 該当のソースコード <section class="conA"> <div class="container"> <ul> <li> <p>Menu</p> <a href=""><img src="img/menu-bnr

    • 0評価
    • 51PV
    2ico1chi 2ico1chi 1日前
  • 解決済

    回答
    1

    スマホでテキストをドラッグすると消えてしまいます。

    詳細 以下のリンク先のサイトのスマホ表示のときに、参考画像の矢印の部分をスクロールするためにドラッグするとテキストが消えてしまいます。どうすれば消えないようにできるでしょうか? 問題のサイト http://wonect.com/ 参考画像 よろしくお願いします。

    • 0評価
    • 53PV
    h-o h-o 1週間前
  • 解決済

    回答
    2

    cssをレスポンシブデザインに

    以下のCSSをレスポンシブデザインに対応させたいと思っております。 PCでは元のデザイン、スマホ・タブレットでは画面サイズに合わせて伸縮させたデザインに、といった感じなのですが、 自分で色々とやってみたのですが、imgとh3の要素を同じ比率で表示されなかったり、上部に大きなスペースができたりと上手くいきませんでした。 ご教授よろしくお願いいたします。

    • 0評価
    • 72PV
    nosonosolife nosonosolife 2週間前
  • 受付中

    回答
    0

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

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

    • 0評価
    • 352PV
    aki8933 aki8933 1ヶ月前
  • 解決済

    回答
    1

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

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

    • 0評価
    • 73PV
    izkatie22 izkatie22 1ヶ月前
  • 解決済

    回答
    2

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

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

    • 0評価
    • 124PV
    h-o h-o 2ヶ月前
  • 解決済

    回答
    1

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

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

    • 0評価
    • 189PV
    Asibe Asibe 2ヶ月前
  • 解決済

    回答
    4

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

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

    • 0評価
    • 321PV
    nekomura nekomura 4ヶ月前
  • 解決済

    回答
    3

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

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

    • 0評価
    • 188PV
    sena_080 sena_080 3ヶ月前
  • 解決済

    回答
    2

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

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

    • 0評価
    • 128PV
    webgoto webgoto 3ヶ月前
  • 受付中

    回答
    1

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

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

    • 0評価
    • 169PV
    kihara kihara 3ヶ月前
  • 解決済

    回答
    1

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

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

    • 0評価
    • 188PV
    kotori_00 kotori_00 3ヶ月前
  • 解決済

    回答
    4

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

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

    • 0評価
    • 513PV
    TakuHosoya TakuHosoya 3ヶ月前
  • 解決済

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

    回答
    3

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

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

    • 1評価
    • 627PV
    nekomura nekomura 4ヶ月前
  • 受付中

    回答
    0

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

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

    • 0評価
    • 116PV
    FUMIHIRO FUMIHIRO 4ヶ月前
  • 解決済

    回答
    2

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

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

    • 0評価
    • 185PV
    AtsushiNakamura AtsushiNakamura 4ヶ月前
  • 解決済

    回答
    2

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

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

    • 0評価
    • 277PV
    mosin_nozomi mosin_nozomi 5ヶ月前
1

タグ情報

  • あなたの順位

    -

  • タグ登録者数

    121

  • 総質問数

    112

  • 今週の質問数

    3

関連するタグ

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