レスポンシブWebデザイン

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

RSS

  • 解決済

    回答
    1

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

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

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

    回答
    1

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

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

    • 0評価
    • 50PV
    mx3 mx3 1日前に コメント
  • 受付中

    回答
    0

    flagcssにおけるプロパティ及びjQueryの不安定な挙動(スライドメニューが収納されない)に関して

    前提・実現したいこと ①商品詳細ページおいて、header部分にコンテンツが重なる症状を改善したいです。 ②pc以外の各デバイス(iphone6s / 6 / 5等)において、トップページの背景画像を縦横比を保ち、画像全体 がぴったり収まるレイアウトにしたいです。 ③jQueryによるスライドメニューがレスポンシブデザインでは不安定な挙動を見せるため

    • 0評価
    • 75PV
    teratailが4日前に アップデート
  • 解決済

    回答
    1

    monaca iPhone viewportが効かない

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

    • 0評価
    • 223PV
    t-morita-logic t-morita-logic 1週間前に コメント
  • 解決済

    回答
    3

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

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

    • 0評価
    • 396PV
    6111-debutant_. 6111-debutant_. 1週間前に コメント
  • 解決済

    回答
    2

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

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

    • 0評価
    • 204PV
    Soeji Soeji 3週間前に コメント
  • 受付中

    回答
    2

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

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

    • 0評価
    • 19875PV
    miwakazuo miwakazuo 3週間前に 回答
  • 受付中

    回答
    0

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

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

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

    回答
    1

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

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

    • 0評価
    • 68PV
    miz miz 1ヶ月前に 回答
  • 解決済

    回答
    1

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

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

    • 0評価
    • 71PV
    addonestep addonestep 1ヶ月前に 回答
  • 解決済

    回答
    1

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

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

    • 0評価
    • 101PV
    k3n1 k3n1 1ヶ月前に コメント
  • 解決済

    回答
    3

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

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

    • 0評価
    • 429PV
    mirainonakamura mirainonakamura 1ヶ月前に ベストアンサー
  • 解決済

    回答
    1

    レスポンシブデザインの画像が可変しないのですが、なぜでしょう…

    前提・実現したいこと レスポンシブデザイン中です。 widthが767px以下になったらメイン画像を可変させたいのですが。--- 発生している問題・エラーメッセージ メイン画像が可変してくれません・・・ 該当のソースコード <div id="header"> <p><img src="main-img.jpg" width="1366" height

    • 0評価
    • 393PV
    TONGARI TONGARI 1ヶ月前に ベストアンサー
  • 解決済

    回答
    2

    -webkit-transformと@media screen について

    お世話になっております。 今回はcssで-webkit-transformについての問題です。@media screenを使い、スマホ版に対応するようプログラミングしてみましたがうまくいきません。 CSS .menu-trigger, .menu-trigger span { display: inline-block; tran

    • 0評価
    • 206PV
    kuroishi kuroishi 1ヶ月前に コメント
  • 解決済

    回答
    1

    jQueryを使った画像の動作処理(レスポンシブwebデザイン)

    お世話になっております。毎度大変様々な方から助言をいただき、本当にありがとうございます。 今回ですが、CSSでではなく、javascriptを使用し表示、非表示を操作したいと以下のコードを書きました。 HTML <div id="picture"> <img id="1" src="./img/Practice_picture/1.JPG" alt="

    • 0評価
    • 107PV
    kuroishi kuroishi 2ヶ月前に 回答
  • 解決済

    回答
    1

    cssのメディアクエリがよくわかりません。

    現状・問題点 初心者です。 レスポンシブページの修正をしています。 ページ内には画像や文章、cssで吹き出しを作成して表示している箇所があります。 画像や文章は可変しますが、吹き出し部分と画像の位置が、iPhone5~7それぞれのバージョン?によって異なります。 iPhone6と6Plusではきれいに修正し、iPhone5用でも記述しても iPhone6

    • 0評価
    • 159PV
    T_sa T_sa 2ヶ月前に ベストアンサー
  • 解決済

    回答
    1

    スマホでリンクボタンが2回タップしないと飛ばない

    レスポンシブサイトを作っており質問です。 スマホでボタンを1度タップするとhoverが効いて2回目のタップでリンクへ飛ぶのですがそれは @media (max-width: 767px) { a:hover img { opacity:1.0; } これで対応できたのですが、下にある内容でどうすれば1度のタップでリンクへ飛ばすことができるのでしょうか? ht

    • 0評価
    • 139PV
    yuki84web yuki84web 2ヶ月前に ベストアンサー
  • 解決済

    回答
    1

    レスポンシブwebデザイン、スマホの画像のwidthの変更について

    現在の問題点 現在、私はレスポンシブwebデザインを使い一つのサイトを完成させようとしている初心者です。 今回、問題になっている点はスマートフォンで見た際に起きる現象です。現在私は友人のサーバーを借りてスマホではどのように見えているかを試しながら作っています。 <div id="top_all_work"> <!--loadi

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

    回答
    1

    CSS テーブルをレスポンシブ対応で、横スクロールしたい

    CSS テーブルをレスポンシブ対応で、横スクロールしたいです テーブルを<div class="table_scroll">で囲み、そのクラスに、スクロールをつけてみたつもりなのですが、 ヘッダ行だけが縦に並んで表示されてしまいます。 どこを修正すれば良いか、ご教授いただけると助かります。 よろしくお願いいたします。 <H2>テストテーブル</H2>

    • 0評価
    • 191PV
    hitoekiaruko hitoekiaruko 2ヶ月前に ベストアンサー
  • 受付中

    回答
    0

    くWordpress Sydneyについて

    ワードプレスのテーマSydneyでHP作成しています。 スマホ表示の際のメニューがロゴなしの状態だとtopに余白があるので無くしたいです。 css mobile navigationの mainnav-mobi ul { display: block; list-style: none; margin-top: -50px; padding: 0;

    • -3評価
    • 121PV
    YujiTakemura YujiTakemura 2ヶ月前に 質問を編集
1

タグ情報

  • あなたの順位

    -

  • タグ登録者数

    147

  • 総質問数

    156

  • 今週の質問数

    3

関連するタグ

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