レスポンシブWebデザインに関連する質問一覧

新着
アクティブ
未回答
未解決
注目
解決済

受付中

回答

1
PHP5からPHP7環境へのWebコンテンツ移行での「Fatal error」で画面生成が出来ない事象

前提・実現したいことタイトル通りですが、PHP5.4で正常動作しているWebサイトのコンテンツを PHP7.2の環境に移行する作業を行っておりまり、PHP7については修正作業者レベルです。 PHP5から7への変更点を参照しながら、ソースコード41行目のような修正を行っておりましたが、72行目の修正方法について「var_dump」で確認しながら読み進めても解決策を見つける事ができません。
- 0評価
- 0クリップ
- 71PV
naizawa 4日前にコメント
受付中

回答

0
【fancybox3】スマホでの閲覧時に画像領域外をタップで閉じたい

WordPressにfancybox3を設置しています。 fancybox3公式ページスマホで閲覧時に画像外の部分をタップでclose動作を実装したいのですが、公式を見てもそのようなオプションが用意されていませんでした。 PCなら領域外クリックでcloseが実装できているのですが、どなたか方法をご存知でしょうか？現在のoption設定 $(document).ready(function(
- 0評価
- 0クリップ
- 67PV
teratailが 5日前にアップデート
受付中

回答

1
CSS_sassを使い、レスポンシブ対応がわかりません

前提・実現したいこと CSS_sassを使い、レスポンシブ対応させて、完成させる。この際のBPは768px、PC向けの幅は1000pxとする。完全模写する必要はなく、似た様な色で似た様な動きをすればOK。下記の画像通りにレスポンスする 1) ネスト 2) @mixin 3) @content を最低１回は使用すること。 ](a26ce2cf1ff18f14a095212cd70f
- 0評価
- 0クリップ
- 85PV
rai_mugi 1週間前に質問を編集
解決済

回答

2
【HTML/CSS】擬似要素before下の要素の割り込みを消したい

擬似要素を使って、Q&Aを作成しています。アイコンの下に文字が割りこんでしまっていて、この要素を下に潜り込まないCSSを作りたいのですが方法が思いつきません。どなたか知恵をお貸しいただけないでしょうか。 <li class="item"> <p class="question bold">質問A</p> <p class="answer">回答です回答です回答です回答です回
- 0評価
- 1クリップ
- 141PV
yuri1333 1週間前にコメント
受付中

回答

0
display:flexで型崩れをしてしまいなおせなくなりました

過去に同じ質問がないか検索した？ A.自分が検索した中だと出ませんでした。エラーが出ている箇所のソースコードまたは周辺ソースコード全体下記参照聞きたいことの概要スクロールしてもサイドバー全部を固定させたいです。起きている問題（起きている現象の詳細 / エラーメッセージ）ヘッダーは固定できました。結論、サイドバーを固定させたいのですが、position:fixedを使うと
- 0評価
- 0クリップ
- 95PV
yakiringo 2週間前に回答
解決済

回答

2
レスポンジブ対応ができないデザインについて

PCとモバイルでデザインが大きく違っていてレスポンシブコーディングできないときモバイル対応はどうやってするのですか？
- 0評価
- 0クリップ
- 392PV
nogamir 2週間前にコメント
解決済

回答

1
iphone11で@mediaが効かない

Google CromeでPCでページを表示させた場合のようになり、画面幅を縮小した場合のように、背景の1枚目が変わり、Responsiveという文字が真ん中にくるデザインです。これをiphone11で表示した場合のようになってしまい、@mediaが効きません。このページです resoponsive.html <!DOCTYPE html>
- 0評価
- 0クリップ
- 82PV
rumi45 2週間前にベストアンサー
解決済

回答

1
レスポンシブデザインに対応させたい

PCで表示すると図のような画面になります。これをスマホ(iphone11)で表示させると下図のようになります。下に空白が空いてしまいます。背景を縦いっぱいに表示したいのですが、 cssにどう記述したらいいかわかりません。 <!DOCTYPE html> <html> <head></head> <meta charset="utf-8"> <title
- 0評価
- 0クリップ
- 105PV
rumi45 2週間前にコメント
解決済

回答

2
レスポンシブサイトの不具合で困っています。URLあり。

現在、コーディング練習をしているところなのですが、レスポンシブサイトにて横幅指定、中央揃えがうまくできません。 URLは https://mystyle.xrea.jp/practis/ です。メディアクエリにて767pxで横幅指定をしているのですが、610pxくらいでレスポンシブサイトに適応します。またレスポンシブサイトではヘッダーメニューが中央揃えにならないので、是非ご回答いただけれ
- 0評価
- 1クリップ
- 177PV
marton 3週間前にコメント
解決済

回答

1
svg画像とテキストが重なってしまう。

前提・実現したいことタイトルの下にsvg画像を配置したい発生している問題・エラーメッセージタイトルとSVG画像が重なってしまう。エラーメッセージ該当のソースコード htmlソースコード <h1 class="responsive">works</h1> <div class="works-group"> 　<div class="sample-icon"> 　　<a href=
- 0評価
- 0クリップ
- 108PV
hope_mucci 3週間前にベストアンサー
解決済

回答

1
画面を小さくしていく時に、ブレイクポイント付近でナビゲーションメニューの中身が見えてしまうのをなくしたい。

練習用にPCサイトでは２カラムのサイトのデザインで、タブレット・モバイルは１カラムのハンバーガーメニューに変わるサイトを作っているのですが。画面を小さくしていきタブレットのブレイクポイント付近になると、画面の上部にナビゲーションメニューの中身がちょい見えしてししまいます。し”opacity:０;”と設定すると、中身は見えなくなるのですがナビゲーションメニューが開閉時にフェードイン/フェ
- 0評価
- 0クリップ
- 107PV
Kinomaru 1ヶ月前にコメント
受付中

回答

0
クロームのディべロッパーツールについてレスポンシブ１００％表示の時に全ての画面を見るには

実現したいことグーグルクロームのディべロッパーツールのレスポンシブ対応の各デバイスの大きさを１００％表示で見ると、一番したまでスクロールできないのですが、正確な大きさで確かめたいので、１００％の状態で一番下まで、スクロールしたいのですが、可能なのでしょうか？付属画像参考結構小さいPC横幅２２㎝　縦１６㎝のものを使っています。８５％表示とかなら下まで見れるのですが、正確な大
- -1評価
- 0クリップ
- 88PV
teratailが 1ヶ月前にアップデート
受付中

回答

2
表を見本の通り間隔を広げたい

前提・実現したいこと表を見本の通りに広げたいです。レスポンシブで柔軟に対応できるようにpxでの固定以外でなにか表現できる方法はないでしょうか？（見本の画像を添付しますのでご覧ください。）該当のソースコード  <section class="section-wrapper bg-sky"> <div class="content-wrapp
- 0評価
- 0クリップ
- 410PV
Lhankor_Mhy 1ヶ月前にコメント
解決済

回答

1
クロームのデベロッパーツールについて

デベロッパーツールについて前々から思っていたのですが、グーグルクロームのデベロッパーツールでレスポンシブ対応などを確認するときに、付属画像のようにスマホの大きさ（種類の項目）をクリックすると、どれも初めは１００％の大きさで表示されず、例えば、iPhone6は項目を選択したときに８５％の大きさで表示されるのですが、１００％が本来の画面の大きさなのでしょうか？それとも、通常その対応のスマホ（こ
- 0評価
- 0クリップ
- 127PV
ghtew2 1ヶ月前にベストアンサー
解決済

回答

2
レスポンシブ対応で個別にデザインや大きさが変更されない。

実現したいことレスポンシブ対応のコードを別の端末用の大きさのコードを書くの初めてになります。 @media screen and (max-width : 480px) @media screen and (max-width : 768px) の二つのレスポンシブ対応の入力フォームのコードを書いているのですが、 480pxのレスポンシブ対応は大きさが丁度よく揃えられたのですが、768pxの方の
- 0評価
- 0クリップ
- 131PV
ghtew2 1ヶ月前にベストアンサー
解決済

回答

1
レスポンシブ対応　セレクトボックスの長さを揃えたい。

実現したいことクロームのデベロッパーツールで、レスポンシブ対応で、４８０px以下の画面で付属画像①のように支払方法のセレクトボックスをその上にある「メールアドレス」の入力フォームと同じように、画面の端から端まで揃えたいのですが、付属画像①のようにセレクトボックスの長さが短くなってしまいます。PC表示では長さは同じです。これをレスポンシブ対応でも、入力フォームと同じ長さで表示させたいです。試
- 0評価
- 0クリップ
- 122PV
ghtew2 1ヶ月前にベストアンサー
受付中

回答

1
bootstrapのnavbar-brandをレスポンシブで表示した際に位置がずれてしまう

bootstrapのnavbar-brandをレスポンシブで表示した際に位置がずれてしまうのですが、なぜでしょうか。トップにもっていきたいです。 <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" d
- 0評価
- 0クリップ
- 82PV
Lhankor_Mhy 1ヶ月前にコメント
解決済

回答

1
@media screen and (max-width:○○px)　で指定したpx値の75%のpx値でレスポンシブ対応になる（Google chrome）

前提・実現したいこと Google chromeを使用したレスポンシブ対応の質問です。 @media screen and (max-width:○○px)　で指定した数値の75%の数値ところで、なぜかレスポンシブ対応になってしまいます。私の場合、○○のところに1000を入力しているのですが、Google chrome上では750pxのところでレスポンシブ対応に切り替わります。firefoxで試し
- Chrome
- レスポンシブWebデザイン
- 0評価
- 0クリップ
- 116PV
koikoiSS 1ヶ月前に回答
解決済

回答

2
レスポンシブデザイン　フォームが中央に配置されないものがある。

実現したいこと画面幅（〜480px）までのスマホのレスポンシブ対応のコードを書いているのですが、初心者なのでまずこれ１つから。入力フォームをスマホの横幅いっぱいにして、中央に配置させるコードを書いているのですが上手くいきません。ｐｈｐのフォイルにＨＴＭＬのコードを書いて、ＣＳＳのコードとスタイルシートで別にも書いてあります。クロームでレスポンシブを確認する機能を使って確認しているのですが、横
- 0評価
- 0クリップ
- 212PV
ghtew2 1ヶ月前に回答を編集
解決済

回答

1
React, Material-UIでレスポンシブ対応したいが、PCの縮小版のように表示される

実現したいこと ReactのMaterial-UIを利用しWebアプリケーションを作成しており、スマホ対応をしようとしています。そこで、レスポンシブ対応をしようとしているのですが、ChromeのDeveloper Toolで見た時の表示がおかしくなる理由が分からずご教授いただけると嬉しいです。前提技術スタック Ruby on Rails TypeScripot Material-UI
- 0評価
- 0クリップ
- 246PV
Romay 1ヶ月前にベストアンサー