レスポンシブWebデザイン

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

RSS

  • 解決済

    回答
    3

    レスポンシブデザインにおける画像と文字の重ね合わせ

    レスポンシブ対応のwebsiteを作ろうとしているのですが、分からないことが出てきたため、質問させていただきます。 下記の画像を見てもらえば、分かるとは思うのですが、上側のフォームの中に「ここに文章を入れます」を入れたいのですが、なぜか重ね合わすことができず困っています。 websiteで調べた結果、絶対位置、相対位置を利用したposition:

    • 0評価
    • 74PV
    ShimpeiHorikawa ShimpeiHorikawa 23時間前
  • 解決済

    回答
    1

    画像と文字の重ね合わせ

    レスポンシブデザインにおける画像と文字の重ね合わせがわからないところがあるため、ここで質問させていただきます。 質問 ズームした際、画像①のようにテキストがずれてしまいます。 インターネットで調べた結果、相対位置と絶対位置を用いた「position:relative;。position:absolute;」を用いて、画像②のように一時的にするこ

    • 0評価
    • 55PV
    ShimpeiHorikawa ShimpeiHorikawa 1日前
  • 受付中

    回答
    0

    参考になりましたか?という機能を付けたいです。

    実現したいこと ■カスタマーレビューサイトを作っています。 そこで下記のような機能を追加したいのですが、うまくできません。というか方法がわかりません。 ご教示頂けると幸いです。 [Amazonのスマホでのカスタマーレビュー]にある このレビューは参考になりましたか? 役に立った 役に立たなかった https://www.

    • -5評価
    • 238PV
    masahirock1209 masahirock1209 1日前
  • 解決済

    回答
    1

    スマホのブラウザの戻るボタンで戻ると、メイン画像の動画が再生されない

    前提・実現したいこと スマホの戻るボタンで戻ってもメインの動画が再生された状態にしたい リンク内容 発生している問題・エラーメッセージ TOP→menu→(ブラウザの戻るボタン)→TOPと遷移するとメインの動画が固まって再生されない。 該当のソースコード <html lang="ja"> <head> <meta charset="UTF

    • 0評価
    • 41PV
    ryota0315 ryota0315 3日前
  • 受付中

    回答
    0

    ハンバーガーメニュー(ドロワーメニュー)が押せない。

    発生している問題・エラーメッセージ ハンバーガーメニューが押せません。押しても動作しません。 デベロッパーツールでは、問題なく動作しています。 h1の右横になるようにしています。 重なってはいないと思うのですが・・・ 該当のソースコード <nav id="nav" class="fixed"> <h1><a href="index.html

    • 0評価
    • 20PV
    identity0xx identity0xx 3日前
  • 解決済

    回答
    3

    ヘッダーメニューのレスポンシブ化

    現在作成しているWebページのヘッダーを、画面サイズに合わせて子要素(logo,menu1~menu4)の比率を変えずに、かつ、背景画像が見切れることなく縮小したいのですが、どうすればいいでしょうか。 要素headerには幅、高さの指定はなし headerの子要素のheadermenuのmax-widthは1034px headermenuの子要素

    • 0評価
    • 124PV
    nosonosolife nosonosolife 1週間前
  • 受付中

    回答
    1

    CSSのみでスライドショーにしたいのですが、PCとスマホで動作が異なってしまいます

    前提・実現したいこと CSSのみでメイン画像5枚をスライドショーをで表示させたい 発生している問題・エラーメッセージ PCではやりたいことが実現できましたがスマホ(iphone)で確認をすると動作が異なってしまいます。 レスポンシブで対応を行いたいです。 該当のソースコード <div class="mainPhoto">

    • 0評価
    • 44PV
    ryota0315 ryota0315 1週間前
  • 解決済

    回答
    1

    レスポンシブ以外のスマホ、PC表示切り替えについて

    一般的なレスポンシブデザインでは、アクセスしている環境の画面のサイズでCSSの表示を切り替えることが多いと思います。(metaのviewportとCSSのmedia query) そのため、PCのブラウザでも幅を狭めるとスマホ表示用のCSSに切り替わります。 その他の方法として.htaccessで端末を識別して切り分ける方法もあるかと思います。 そ

    • 0評価
    • 68PV
    r_iida r_iida 1週間前
  • 解決済

    回答
    1

    レスポンシブデザインでのselect要素のoptionが長い場合の対処ってどうしてます?

    レスポンシブデザインでのselect要素のoptionが長い場合の対処ってどうしてます? 今まであまり長い文字列を使用した事がないので、焦ってます オススメの対処法などないでしょうか? selectのwidthで幅を制限しても全て表示されないのはどうかと思いますし 省略も同様かと

    • 0評価
    • 357PV
    hyksm hyksm 2週間前
  • 解決済

    回答
    1

    CSSのみで画像とテキストをスライドショーにしたい

    前提・実現したいこと CSSのみでスライドショーを実現させたいのですが、うまく行きません。 画像の上に乗っているテキストも同じようにスライドショーにしたいです。 何がうまくいかない原因なのかを教えていただきたいです。 <div class="mainPhoto"> <p>違<span>いのわかる</span>大人<span

    • -3評価
    • 79PV
    ryota0315 ryota0315 1週間前
  • 解決済

    回答
    1

    cssフレームワークBulmaのモバイル対応について

    お世話になっております。 CSSフレームワークのBlumaを利用して、レスポンシブ対応のサイトを作成しています。 navの部分ですが、PCでブラウザ幅を変更した場合には反応するのですが、chromeでiPhoneやiPad等の見え方を確認すると反応しておらず、見にくいですしタップもしにくいです。(iPhoneの実機でも同じ状況でした) bulmaの

    • 0評価
    • 316PV
    ao_love ao_love 2週間前
  • 解決済

    回答
    1

    CSSのレイアウトについて

    前提・実現したいこと rails4で開発中。 CSSでページのレイアウト構成をしていて2カラムの構成を実装したいと思っています。 実現したいのは上記の画像のような構成です。 発生している問題・エラーメッセージ 通常の2カラムの構成はできるのですが、メインとなる中央のカラムの中身が今回はeachメソッドで記述していて、そのeachメソ

    • 0評価
    • 46PV
    lapi lapi 2週間前
  • 解決済

    回答
    2

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

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

    • 0評価
    • 85PV
    ryota0315 ryota0315 3週間前
  • 解決済

    回答
    2

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

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

    • 0評価
    • 81PV
    ryota0315 ryota0315 3週間前
  • 解決済

    回答
    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評価
    • 80PV
    ryota0315 ryota0315 3週間前
  • 解決済

    回答
    1

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

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

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

    回答
    2

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

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

    • 0評価
    • 81PV
    nosonosolife nosonosolife 1ヶ月前
  • 受付中

    回答
    0

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

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

    • 0評価
    • 418PV
    aki8933 aki8933 2ヶ月前
  • 解決済

    回答
    1

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

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

    • 0評価
    • 88PV
    izkatie22 izkatie22 2ヶ月前
  • 解決済

    回答
    2

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

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

    • 0評価
    • 160PV
    h-o h-o 3ヶ月前
1

タグ情報

  • あなたの順位

    -

  • タグ登録者数

    128

  • 総質問数

    124

  • 今週の質問数

    5

関連するタグ

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