質問編集履歴
4
ソースコード追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -62,6 +62,7 @@
|
|
|
62
62
|
#html
|
|
63
63
|
<div class="container-fluid" v-if="screen=='recordingScreen'" key="recordingScreen">
|
|
64
64
|
<div class="main">
|
|
65
|
+
<%= image_tag 'face.png', class: 'background-image' %>
|
|
65
66
|
<button class="record-btn" type="button" v-if="status=='ready'" @click="startRecording">
|
|
66
67
|
さっそく声の成分をチェック!!!! <i class="fas fa-microphone fa-lg"></i><br>
|
|
67
68
|
(５秒間のマイク録音が開始されます)
|
3
ソースコード修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -15,6 +15,19 @@
|
|
|
15
15
|
```
|
|
16
16
|
#css
|
|
17
17
|
@media screen and (max-width:500px) {
|
|
18
|
+
.container-fluid{
|
|
19
|
+
text-align: center;
|
|
20
|
+
}
|
|
21
|
+
.main {
|
|
22
|
+
position: relative;
|
|
23
|
+
display: inline-block;
|
|
24
|
+
width: 320px;
|
|
25
|
+
height: 360px;
|
|
26
|
+
}
|
|
27
|
+
.background-image {
|
|
28
|
+
width: 320px;
|
|
29
|
+
height: 360px;
|
|
30
|
+
}
|
|
18
31
|
.record-btn {
|
|
19
32
|
-webkit-appearance: none;
|
|
20
33
|
background: #e96e63;
|
|
@@ -47,16 +60,19 @@
|
|
|
47
60
|
```
|
|
48
61
|
```
|
|
49
62
|
#html
|
|
63
|
+
<div class="container-fluid" v-if="screen=='recordingScreen'" key="recordingScreen">
|
|
64
|
+
<div class="main">
|
|
65
|
+
<button class="record-btn" type="button" v-if="status=='ready'" @click="startRecording">
|
|
66
|
+
さっそく声の成分をチェック!!!! <i class="fas fa-microphone fa-lg"></i><br>
|
|
67
|
+
(５秒間のマイク録音が開始されます)
|
|
68
|
+
</button>
|
|
50
69
|
|
|
51
|
-
|
|
70
|
+
<button class="recording-btn" type="button" v-if="status=='recording'">
|
|
52
|
-
|
|
71
|
+
<span id="sec"></span> <i class="fas fa-microphone fa-lg"></i>
|
|
53
|
-
(５秒間のマイク録音が開始されます)
|
|
54
|
-
|
|
72
|
+
</button>
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
55
75
|
|
|
56
|
-
<button class="recording-btn" type="button" v-if="status=='recording'">
|
|
57
|
-
<span id="sec"></span> <i class="fas fa-microphone fa-lg"></i>
|
|
58
|
-
</button>
|
|
59
|
-
|
|
60
76
|
```
|
|
61
77
|
|
|
62
78
|
### 試したこと
|
2
画像追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -4,6 +4,11 @@
|
|
|
4
4
|
ちなみに２つボタンがあるうち、.record-btnの方だけレイアウトが崩れてしまいます。
|
|
5
5
|
|
|
6
6
|
恐れ入りますが、解決策ご教示いただけると幸いです。
|
|
7
|
+
### 問題となっている箇所画像
|
|
8
|
+
デベロッパーツール確認時
|
|
9
|
+
|
|
10
|
+
iphone確認時（画質悪くてすみません）
|
|
11
|
+
|
|
7
12
|
|
|
8
13
|
### 該当のソースコード
|
|
9
14
|
|
1
ソースコード修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -44,7 +44,8 @@
|
|
|
44
44
|
#html
|
|
45
45
|
|
|
46
46
|
<button class="record-btn" type="button" v-if="status=='ready'" @click="startRecording">
|
|
47
|
-
|
|
47
|
+
さっそく声の成分をチェック!!!! <i class="fas fa-microphone fa-lg"></i><br>
|
|
48
|
+
(５秒間のマイク録音が開始されます)
|
|
48
49
|
</button>
|
|
49
50
|
|
|
50
51
|
<button class="recording-btn" type="button" v-if="status=='recording'">
|