質問編集履歴

4

ソースコード追加

2021/07/10 09:28

投稿

hasaya
hasaya

スコア4

test CHANGED
File without changes
test CHANGED
@@ -126,6 +126,8 @@
126
126
 
127
127
  <div class="main">
128
128
 
129
+     <%= image_tag 'face.png', class: 'background-image' %>
130
+
129
131
  <button class="record-btn" type="button" v-if="status=='ready'" @click="startRecording">
130
132
 
131
133
       さっそく声の成分をチェック!!!!&nbsp;<i class="fas fa-microphone fa-lg"></i><br>

3

ソースコード修正

2021/07/10 09:28

投稿

hasaya
hasaya

スコア4

test CHANGED
File without changes
test CHANGED
@@ -31,6 +31,32 @@
31
31
  #css
32
32
 
33
33
  @media screen and (max-width:500px) {
34
+
35
+ .container-fluid{
36
+
37
+ text-align: center;
38
+
39
+ }
40
+
41
+ .main {
42
+
43
+ position: relative;
44
+
45
+ display: inline-block;
46
+
47
+ width: 320px;
48
+
49
+ height: 360px;
50
+
51
+ }
52
+
53
+ .background-image {
54
+
55
+ width: 320px;
56
+
57
+ height: 360px;
58
+
59
+ }
34
60
 
35
61
  .record-btn {
36
62
 
@@ -96,23 +122,29 @@
96
122
 
97
123
  #html
98
124
 
125
+ <div class="container-fluid" v-if="screen=='recordingScreen'" key="recordingScreen">
99
126
 
127
+ <div class="main">
100
128
 
101
- <button class="record-btn" type="button" v-if="status=='ready'" @click="startRecording">
129
+ <button class="record-btn" type="button" v-if="status=='ready'" @click="startRecording">
102
130
 
103
-     さっそく声の成分をチェック!!!!&nbsp;<i class="fas fa-microphone fa-lg"></i><br>
131
+      さっそく声の成分をチェック!!!!&nbsp;<i class="fas fa-microphone fa-lg"></i><br>
104
132
 
105
-       (5秒間のマイク録音が開始されます)
133
+        (5秒間のマイク録音が開始されます)
106
134
 
107
- </button>
135
+ </button>
108
136
 
109
137
 
110
138
 
111
- <button class="recording-btn" type="button" v-if="status=='recording'">
139
+ <button class="recording-btn" type="button" v-if="status=='recording'">
112
140
 
113
-   <span id="sec"></span>&nbsp;<i class="fas fa-microphone fa-lg"></i>
141
+    <span id="sec"></span>&nbsp;<i class="fas fa-microphone fa-lg"></i>
114
142
 
115
- </button>
143
+ </button>
144
+
145
+ </div>
146
+
147
+ </div>
116
148
 
117
149
 
118
150
 

2

画像追加

2021/07/10 09:26

投稿

hasaya
hasaya

スコア4

test CHANGED
File without changes
test CHANGED
@@ -9,6 +9,16 @@
9
9
 
10
10
 
11
11
  恐れ入りますが、解決策ご教示いただけると幸いです。
12
+
13
+ ### 問題となっている箇所画像
14
+
15
+ デベロッパーツール確認時
16
+
17
+ ![デベロッパーツール](a09ffa176449869568a24d81e1882dd5.png)
18
+
19
+ iphone確認時(画質悪くてすみません)
20
+
21
+ ![iphone確認時](2f0ab64d2d471df6bfa0311a94f25bae.png)
12
22
 
13
23
 
14
24
 

1

ソースコード修正

2021/07/10 08:48

投稿

hasaya
hasaya

スコア4

test CHANGED
File without changes
test CHANGED
@@ -90,7 +90,9 @@
90
90
 
91
91
  <button class="record-btn" type="button" v-if="status=='ready'" @click="startRecording">
92
92
 
93
-     録音!!&nbsp;<i class="fas fa-microphone fa-lg"></i><br>
93
+     さっそく声の成分をチェック!!!!&nbsp;<i class="fas fa-microphone fa-lg"></i><br>
94
+
95
+       (5秒間のマイク録音が開始されます)
94
96
 
95
97
  </button>
96
98