jquery で画像遷移を作ったのですが、レスポンシブ対応にしていきたいです。

ブログサイトをみて、jqueryでクリックしたら画面が動くアプリを作りました。
widthを大きくして、その中で横に並べたボックスを動かしてく感じです。

レスポンシブ対応にしたいと思ったのですが、どうすれば良いのか...と調べてみたのですがわからなかったので質問させていただきました。

html
1<body>
2		<div id="qArea">
3		<div id="qContainer">
4	
5			<div class="qBox">
6				<div class="ques"><span class="qNum">Q1</span>　天気の良い朝、まず起きて何をする？</div>
7				<ul>
8					<li id="0_0" sc="20">軽くジョギングをする</li>
9					<li id="0_1" sc="15">ストレッチで目を覚ます</li>
10					<li id="0_2" sc="10">テレビで情報収集</li>
11					<li id="0_3" sc="5">遅刻しそうなので、すぐに出発</li>
12					<li id="0_4" sc="0">２度寝する</li>
13				</ul>
14				<div class="fig"></div>
15			</div>
16	
17			<div class="qBox">
18				<div class="ques"><span class="qNum">Q2</span>　一日の元気は朝ご飯から！さて何を食べる</div>
19				<ul>
20					<li id="1_0" sc="20">料理を作って本格朝食</li>
21					<li id="1_1" sc="15">パンとスープでシンプル朝食</li>
22					<li id="1_2" sc="10">サプリメントですませる</li>
23					<li id="1_3" sc="5">食べない</li>
24					<li id="1_4" sc="0">食べるどころか吐きそうだ...</li>
25				</ul>
26				<div class="fig"></div>
27			</div>
28			
29			<div class="qBox">
30				<div class="ques"><span class="qNum">Q3</span>　今日も電車で通勤、会社に着くまで何をする？</div>
31				<ul>
32					<li id="2_0" sc="20">目を閉じて仕事の進行をイメージ</li>
33					<li id="2_1" sc="15">新聞を読んで情報収集</li>
34					<li id="2_2" sc="10">音楽を聴いて気持ちをリフレッシュ</li>
35					<li id="2_3" sc="5">眠って体力を温存</li>
36					<li id="2_4" sc="0">ただ「ぼ～っ」としている</li>
37				</ul>
38				<div class="fig"></div>
39			</div>
40	
41			<div class="qBox">
42				<div class="ques"><span class="qNum">Q4</span>　さて会社についた、まず何をする？</div>
43				<ul>
44					<li id="3_0" sc="20">業務のプライオリティを確認</li>
45					<li id="3_1" sc="15">メールを確認</li>
46					<li id="3_2" sc="10">とりあえず業務開始</li>
47					<li id="3_3" sc="5">脳にエネルギー、プリンを食べる</li>
48					<li id="3_4" sc="0">仕事のフリしてネットサーフィン</li>
49				</ul>
50				<div class="fig"></div>
51			</div>
52	
53			<div class="qBox">
54				<div class="ques"><span class="qNum">Q5</span>　終業30分前、さて明日のために何をする？</div>
55				<ul>
56					<li id="4_0" sc="20">明日のTo doリストを作成</li>
57					<li id="4_1" sc="15">ギリギリまで業務に全力投球</li>
58					<li id="4_2" sc="10">同僚と飲みに行く打ち合わせ</li>
59					<li id="4_3" sc="5">仕事が終わらないので残業する</li>
60					<li id="4_4" sc="0">なぜか、すでに帰途についている</li>
61				</ul>
62				<div class="fig"></div>
63			</div>
64
65			<div class="qBox">
66				<div id="resultBox">
67					<div id="resultTitle">実業家級サラリーマン</div>
68					<div id="resultPoint">15</div>
69					<div id="resultLeft">
70						<div id="resultText">実業家級サラリーマンの説明文実業家級サラリーマンの説明文実業家級サラリーマンの説明文実業家級サラリーマンの説明文実業家級サラリーマンの説明文実業家級サラリーマンの説明文
71						</div>
72						<div id="againButton"></div>
73					</div>
74					<div id="resultImage"></div> 
75				</div>
76			</div>
77	
78		</div>
79		</div>
80	</body>
81ド

javascript
1function initFunc(){
2				selectArray = [-1,-1,-1,-1,-1];
3				scoreArray = [0,0,0,0,0];
4				qNum = selectArray.length;
5			}
6			
7			function preloadFunc() {
8				for(var i = 0; i< arguments.length; i++){
9					$("<img>").attr("src", arguments[i]);
10				}
11			}
12			
13			function againFunc(){
14				moveFunc(-1);
15				for (var i in selectArray){
16					var selectID = selectArray[i];
17					$("#" + i + "_" + selectID).removeClass("selected");
18				}
19				initFunc();//---初期化
20			}
21			
22			function quesFunc(){
23				var idArray = this.id.split("_");
24				var qID = Number(idArray[0]);
25				var ansID = Number(idArray[1]);
26				var selectID = selectArray[qID];
27				if (ansID == selectID) return;
28				$("#" + qID + "_" + ansID).addClass("selected");
29				$("#" + qID + "_" + selectID).removeClass("selected");
30				selectArray[qID] = ansID;
31				moveFunc(qID);
32			
33				scoreArray[qID] =  Number($(this).attr("sc"));
34				if (qID+1 >= qNum) resultFunc();
35			}
36			
37			function resultFunc(){
38				var totalScore = 0;
39				for(var i in scoreArray){
40					totalScore += scoreArray[i];
41				}
42				
43				switch (true){
44					case totalScore >= 80:
45						var lv = 4;
46						break;
47					case totalScore >= 60:
48						var lv = 3;
49						break;
50					case totalScore >= 40:
51						var lv = 2;
52						break;
53					case totalScore >= 20:
54						var lv = 1;
55						break;
56					default:
57						var lv = 0;
58				}
59				$("#resultPoint").text(totalScore);
60				$("#resultImage").css("background-image", "url('images/lv"+lv+".png')");
61				var myData = resultArray[lv];
62				$("#resultTitle").text(myData.split(",")[0]);
63				$("#resultText").text(myData.split(",")[1]);
64			}
65			
66			function moveFunc(vol){
67				var myPos = (vol+1) * -650;
68				$("#qContainer").delay(500).animate({left: myPos},500);
69			}
70			
71			$(function(){
72				initFunc();//---初期化
73				$.get("result.csv", function(myData){resultArray = myData.split("\r\n")});
74				preloadFunc("images/lv0.png","images/lv1.png","images/lv2.png","images/lv3.png","images/lv4.png", "images/againOn.png");
75				$("ul>li").click(quesFunc);
76				$("#againButton").click(againFunc);
77			});
78

css
1body{
2	
3	font-size:16px;
4}
5#qArea{
6	overflow:hidden;
7	width:700px;
8	height:500px;
9}
10#qContainer {
11	margin:115px 0px 0px 50px;
12	width:4100px;
13	position:relative; 
14}
15.qBox {
16	width:600px;
17	margin:0px 50px 0px 0px;
18	height:350px;
19	float:left;
20}
21.ques{
22	padding:35px 0px 0px 25px;
23	width:575px;
24	height:45px;
25	_width:600px;
26	_height:80px;
27}
28.qNum{
29	color:#3366FF;
30}
31.fig{
32	width:240px;
33	height:260px;
34	margin: 0px 4px 0px 0px;
35    background-color:red;
36	float:right;
37
38}
39
40
41ul{
42	list-style: none;
43	margin: 0px 0px 0px 2px;
44	padding: 0px;
45	float:left;
46}
47ul li {
48	padding: 17px 0px 0px 60px;
49	width: 290px;
50	height: 33px;
51	_width: 350px;
52	_height: 50px;
53	cursor:pointer;
54	color:#333;
55}
56ul li:hover {
57	background-position: 0px -50px;
58}
59ul li.selected {
60	background-position: 0px -100px;
61	cursor:default;
62}
63
64#resultBox{
65	width:600px;
66	margin:0px 0px 0px 0px;
67	height:350px;
68	background: url(images/resultBase.png) no-repeat 0 0;
69}
70#resultTitle{
71	margin:44px 0px 0px 20px;
72	width:400px;
73	float:left;
74	font-size:18px;
75	height:18px;
76}
77#resultPoint{
78	margin:22px 40px 0px 0px;
79	float:right;
80	color:#F00;
81	font-family:Georgia, "Times New Roman", Times, serif;
82	font-size:40px;
83	text-align:right;
84}
85#resultLeft{
86	float:left;
87	margin:20px 0px 0px 20px;
88}
89#resultText{
90	width:290px;
91	height:180px;
92	font-size:12px;
93	line-height:1.5;
94	color:#666;
95}
96#resultImage{
97	width:252px;
98	height:217px;
99	float:right;
100	margin:15px 20px 0px 0px;
101	background: url(images/lv4.png) no-repeat 0 0;
102}
103#againButton{
104	margin:0px 0px 0px 52px;
105	width:186px;
106	height:40px;
107	background: url(images/againButton.jpg) no-repeat 0 0;
108	cursor:pointer;
109}
110#againButton:hover{
111	background-position: 0px -40px;
112}

試したこと

メディアクエリでbodyに対してwidth１００％を当ててみたがうまくいかなかった

パソコンだといい感じに表示されるのですが、スマホ対応が難しいです。

足りない情報がありましたらご指摘いただけるとありがたいです。
ご教授いただきたいです????‍♂️

Lhankor_Mhy

2019/06/22 03:35

「レスポンシブ」という言葉を、どのような意味で使ってますか？ > 言い換えると、デバイスのウィンドウ幅に「responsive(良く反応)」して、見やすい表示に自動で切り替える仕組みを持つデザインのことです。 https://www.yamatofinancial.jp/learning/know-how/what-is-responsive-web-design.html 一般的な意味だと、「PCでは3カラムだけどモバイルだと見にくいから1カラムに切替」みたいなのがレスポンシブです。なので、「こんな感じのデザインにしたい」というものがないとご助言は難しいのではないかと思います。

ueda_kesuke

2019/06/22 03:41

ご指摘ありがとうございます！その通りでした。カラムから考え直してみますね！

行動規範の内容に同意します

回答1件

ベストアンサー

直接の回答ではなく「考え方」の回答になってしまうのですが、
レスポンシブ対応をしていく際の考え方って「モバイルファースト」であることが多いです。
つまり「PCでできたものをスマートフォンに適応していく」というようりも「スマートフォンでできたものをPCに適応していく」という形ですね。

一度今のコードは忘れて（捨てるというわけではありません）「スマートフォンのみでちゃんと表示されるように」やり方を変えてみては如何でしょうか。

投稿2019/06/22 03:34

m.ts10806

総合スコア80850

ueda_kesuke

2019/06/22 03:42

そうなのですか！知りませんでした。勉強不足でした。ありがとうございます。やり直してみます。

m.ts10806

2019/06/22 03:44

本末転倒かもしれませんが現在作られた「機能」を重視したいのでしたらレスポンシブ部分をCSSフレームワークに任せてしまうのもありです。

m.ts10806

2019/06/22 03:46

なぜ「モバイルファーストか」というと1点はSEO的にはGoogleの方針になってきます。モバイル向けサイトのほうを先に評価するようになったため・・ですね。 https://www.aiship.jp/knowhow/archives/30717

ueda_kesuke

2019/06/22 03:47

bootstrapなどでカラムを指定するという感じでしょうか？

ueda_kesuke

2019/06/22 03:47

サイトみてみます。ありがとうございます！

m.ts10806

2019/06/22 03:50

>bootstrapなどでカラムを指定するという感じでしょうか？組み方次第ですね。いずれにしても「モバイルファーストで構築しなおしも視野」ということだと思います。元からPC想定で作られたものをレスポンシブでモバイル向けにするのってかなり厳しいです。むしろ別HTML別CSSにしたほうが早いくらいになることもあります(実際にそのような対応をしたことがあります）

ueda_kesuke

2019/06/22 03:53

そうなのですね..早い段階で知れてよかったです。とてもありがたいです

m.ts10806

2019/06/22 03:54

何かしらのヒントになったようで何よりです。がんばってください。

行動規範の内容に同意します