teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問カスタムデータ属性のv-bindがモバイル端末でのみ動作していない。

編集履歴

質問編集履歴

8

コードを更新

2019/11/25 14:39

投稿

take-t.t.
take-t.t.

スコア360

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  今困っていることはタイトル通りでして、iPhone8, 6plus, 6のchromeとsafariで確認した所、何故かモバイル端末でのみ`v-bind`した`data-text`が上手く`:before`の`attr関数`で受け取れていないようで、表示が崩れてしまっています。
4
4
 
5
- それにその部分で文字サイズ等のcssの指定も一部効いていません。
5
+ そして何故かcssの指定も効いていません。
6
6
 
7
7
 
8
8
 
@@ -76,9 +76,9 @@
76
76
 
77
77
  <div class="background">
78
78
 
79
- <p v-for="(sentence, index) in bgSentences" v-bind:key="index">
79
+ <p v-for="sentence in bgSentences" :key="sentence">
80
-
80
+
81
- <span v-bind:data-text="sentence">{{ sentence }}</span> <!-- ※該当箇所 -->
81
+ <span :data-text="sentence">{{ sentence }}</span> <!-- ※該当箇所 -->
82
82
 
83
83
  </p>
84
84
 
@@ -90,7 +90,7 @@
90
90
 
91
91
  <div v-else key="contents" class="contents">
92
92
 
93
- <header-component v-bind:inheritedSentences="bgSentences"/>
93
+ <header-component />
94
94
 
95
95
  <transition name="switch">
96
96
 
@@ -198,6 +198,8 @@
198
198
 
199
199
  white-space: nowrap;
200
200
 
201
+ user-select: none;
202
+
201
203
  p {
202
204
 
203
205
  font-size: 1rem;
@@ -210,8 +212,6 @@
210
212
 
211
213
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
212
214
 
213
- user-select: none;
214
-
215
215
  span {
216
216
 
217
217
  position: relative;
@@ -222,22 +222,26 @@
222
222
 
223
223
  letter-spacing: 1px;
224
224
 
225
+ &:before {
226
+
227
+ content: attr(data-text); //※該当箇所
228
+
229
+ position: absolute;
230
+
231
+ top: 0;
232
+
233
+ left: -100%;
234
+
235
+ padding: 5px 0 5px 5px;
236
+
237
+ }
238
+
239
+ }
240
+
241
+ &:nth-child(odd) span {
242
+
225
243
  animation: slide 20s linear infinite;
226
244
 
227
- &:before {
228
-
229
- content: attr(data-text); //※該当箇所
230
-
231
- position: absolute;
232
-
233
- top: 0;
234
-
235
- left: -100%;
236
-
237
- padding: 5px 0 5px 5px;
238
-
239
- }
240
-
241
245
  }
242
246
 
243
247
  &:nth-child(even) span {

7

文章をより分かりやすく修正

2019/11/25 14:39

投稿

take-t.t.
take-t.t.

スコア360

test CHANGED
File without changes
test CHANGED
@@ -52,12 +52,18 @@
52
52
 
53
53
 
54
54
 
55
- 正常に表示されている方の`<header-component/>`のコードも一応貼らせていただきます。
55
+ それと一応、正常に表示されている方の`<header-component/>`のコードも貼らせていただきます。
56
+
57
+ 質問文内に記載するとあまりに長くなってしまうので、githubのリンクで失礼させて下さい。
56
58
 
57
59
  [https://github.com/taku-hu/my-portfolio-site/blob/master/src/components/Header.vue](https://github.com/taku-hu/my-portfolio-site/blob/master/src/components/Header.vue)
58
60
 
59
61
 
60
62
 
63
+ 以下のコードをは一番初めに表示される、`app.vue`内のタイトル画面のコードです。
64
+
65
+
66
+
61
67
  ```html
62
68
 
63
69
  <template>

6

コードの追加

2019/11/09 22:06

投稿

take-t.t.
take-t.t.

スコア360

test CHANGED
File without changes
test CHANGED
@@ -50,6 +50,14 @@
50
50
 
51
51
  ちなみにVueの`mixin`はモバイルブラウザ用のvh設定用のもので、Sassで`include`しているのは、`text-shadow`を付けるものと`flexbox`を使った中央揃えのコードです。
52
52
 
53
+
54
+
55
+ 正常に表示されている方の`<header-component/>`のコードも一応貼らせていただきます。
56
+
57
+ [https://github.com/taku-hu/my-portfolio-site/blob/master/src/components/Header.vue](https://github.com/taku-hu/my-portfolio-site/blob/master/src/components/Header.vue)
58
+
59
+
60
+
53
61
  ```html
54
62
 
55
63
  <template>

5

画像を変更

2019/11/09 21:58

投稿

take-t.t.
take-t.t.

スコア360

test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  何故か擬似要素beforeでのテキストが表示されておらず、`font-size`もばらばらになってしまっています。
16
16
 
17
- ![イメージ説明](eb873cf60e49cf494ee0d7a758b9cafc.png)
17
+ ![イメージ説明](775978c3c585cc58e6083fd86fdb15ff.png)
18
18
 
19
19
 
20
20
 
@@ -22,15 +22,15 @@
22
22
 
23
23
  **PCでの表示：**
24
24
 
25
- 期待された動作をしてくれています。
25
+ 期待した動作をしてくれています。
26
-
26
+
27
- ![イメージ説明](7e1183cf9a1e1a511e82944c6acbf95b.png)
27
+ ![イメージ説明](8198388c512087cd0957cba490d1f76d.png)
28
28
 
29
29
 
30
30
 
31
31
  そしてこのタイトル画面の後に表示される`<header-component/>`内の同じコードで書かれた背景は何故か問題なく表示されています。
32
32
 
33
- ![イメージ説明](d13bd643d1664f48ba9d8684d747a602.png)
33
+ ![イメージ説明](4f9d3d3ffd02e9fbc5e55a120f3e382c.png)
34
34
 
35
35
 
36
36
 

4

コードを分かりやすく修正

2019/11/08 09:40

投稿

take-t.t.
take-t.t.

スコア360

test CHANGED
File without changes
test CHANGED
@@ -110,7 +110,7 @@
110
110
 
111
111
  bgSentences: [
112
112
 
113
- 'any sentences'
113
+ '背景用の適当な文字列', //この後30個ほど続きます。
114
114
 
115
115
  ],
116
116
 

3

画像をgifから静止画に変更

2019/11/08 09:33

投稿

take-t.t.
take-t.t.

スコア360

test CHANGED
File without changes
test CHANGED
@@ -6,19 +6,33 @@
6
6
 
7
7
 
8
8
 
9
- 実際の挙動については以下のgifをご覧いただくとわかりやすいと思います（こちらは6plusのchromeでのものになります）。
9
+ 実際の挙動については以下の画像をご覧いただくとわかりやすいと思います（こちらは6plusのchromeでのものになります）。
10
-
11
-
12
-
10
+
11
+
12
+
13
- モバイルでの表示：[https://imgur.com/a/jG5C9Wi](https://imgur.com/a/jG5C9Wi)
13
+ **モバイルでの表示：**
14
-
14
+
15
- PCでの表示：[https://imgur.com/a/zTrIJ7b](https://imgur.com/a/zTrIJ7b)
15
+ 何故か擬似要素beforeでのテキストが表示されておらず、`font-size`もばらばらになってしまっています。
16
+
16
-
17
+ ![イメージ説明](eb873cf60e49cf494ee0d7a758b9cafc.png)
18
+
19
+
20
+
21
+
22
+
17
-
23
+ **PCでの表示：**
24
+
18
-
25
+ 期待された動作をしてくれています。
26
+
27
+ ![イメージ説明](7e1183cf9a1e1a511e82944c6acbf95b.png)
28
+
29
+
30
+
19
- 最初に表示されている背景は以下の`app.vue`内の`.title-call`のもので、一度明転してから表示されているのものは`<header-component/>`のものです。
31
+ そしてこのタイトル画面の後に表示される`<header-component/>`内の同じコードで書かれた背景は何故か問題なく表示されています。
20
-
32
+
21
- 背景関連のコードは2つとも同じです。
33
+ ![イメージ説明](d13bd643d1664f48ba9d8684d747a602.png)
34
+
35
+
22
36
 
23
37
 
24
38
 

2

情報を追記

2019/11/08 09:25

投稿

take-t.t.
take-t.t.

スコア360

test CHANGED
File without changes
test CHANGED
@@ -1,12 +1,12 @@
1
1
  いつもお世話になっております。
2
2
 
3
- 今困っていることはタイトル通りでして、何故かモバイル端末でのみ`v-bind`した`data-text`が上手く`:before`の`attr`で受け取れておらず、表示が崩れてしまっています。
3
+ 今困っていることはタイトル通りでして、iPhone8, 6plus, 6のchromeとsafariで確認した所、何故かモバイル端末でのみ`v-bind`した`data-text`が上手く`:before`の`attr関数`で受け取れていないようで、表示が崩れてしまっています。
4
-
4
+
5
- それにcssの指定も一部効いていない感じです。
5
+ それにその部分で文字サイズ等のcssの指定も一部効いていません。
6
-
7
-
8
-
6
+
7
+
8
+
9
- 実際の挙動については以下のgifをご覧いただくとわかりやすいと思います。
9
+ 実際の挙動については以下のgifをご覧いただくとわかりやすいと思います（こちらは6plusのchromeでのものになります）。
10
10
 
11
11
 
12
12
 
@@ -48,9 +48,9 @@
48
48
 
49
49
  <div class="background">
50
50
 
51
- <p v-for="(sentence, index) in bgSentences" v-bind:key="index"> <!-- ※該当箇所 -->
51
+ <p v-for="(sentence, index) in bgSentences" v-bind:key="index">
52
-
52
+
53
- <span v-bind:data-text="sentence">{{ sentence }}</span>
53
+ <span v-bind:data-text="sentence">{{ sentence }}</span> <!-- ※該当箇所 -->
54
54
 
55
55
  </p>
56
56
 

1

gifのファイルサイズを軽くした

2019/11/08 07:34

投稿

take-t.t.
take-t.t.

スコア360

test CHANGED
File without changes
test CHANGED
@@ -8,13 +8,15 @@
8
8
 
9
9
  実際の挙動については以下のgifをご覧いただくとわかりやすいと思います。
10
10
 
11
+
12
+
11
- モバイルでの表示：[https://s27.aconvert.com/convert/p3r68-cdx67/k7t7g-ql3jg.gif](https://s27.aconvert.com/convert/p3r68-cdx67/k7t7g-ql3jg.gif)
13
+ モバイルでの表示：[https://imgur.com/a/jG5C9Wi](https://imgur.com/a/jG5C9Wi)
12
-
14
+
13
- PCでの表示：[https://s33.aconvert.com/convert/p3r68-cdx67/efp5u-m5all.gif](https://s33.aconvert.com/convert/p3r68-cdx67/efp5u-m5all.gif)
15
+ PCでの表示：[https://imgur.com/a/zTrIJ7b](https://imgur.com/a/zTrIJ7b)
14
-
15
-
16
-
16
+
17
+
18
+
17
- ちなみに、最初に表示されている背景は以下の`app.vue`内の`.title-call`のもので、一度明転してから表示されているのものは`<header-component/>`のものです。
19
+ 最初に表示されている背景は以下の`app.vue`内の`.title-call`のもので、一度明転してから表示されているのものは`<header-component/>`のものです。
18
20
 
19
21
  背景関連のコードは2つとも同じです。
20
22
 
@@ -32,6 +34,8 @@
32
34
 
33
35
  関係ない部分は削ってあります。
34
36
 
37
+ ちなみにVueの`mixin`はモバイルブラウザ用のvh設定用のもので、Sassで`include`しているのは、`text-shadow`を付けるものと`flexbox`を使った中央揃えのコードです。
38
+
35
39
  ```html
36
40
 
37
41
  <template>
@@ -84,6 +88,8 @@
84
88
 
85
89
  name: 'App',
86
90
 
91
+ mixins: [mobileBrowser],
92
+
87
93
  data() {
88
94
 
89
95
  return {
@@ -136,6 +142,8 @@
136
142
 
137
143
  overflow: hidden;
138
144
 
145
+
146
+
139
147
  .title-call {
140
148
 
141
149
  @include center-styling;
@@ -230,6 +238,8 @@
230
238
 
231
239
  } //.title-call
232
240
 
241
+
242
+
233
243
  .contents {
234
244
 
235
245
  @include center-styling;