質問編集履歴
7
誤字修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
<div id="globalnavi">
|
|
33
33
|
<div id="rogo-menu">
|
|
34
34
|
<div class="rogo">
|
|
35
|
-
<li id="title"><h2>
|
|
35
|
+
<li id="title"><h2>サイトタイトル</h2></li>
|
|
36
36
|
</div>
|
|
37
37
|
<div class="menu">
|
|
38
38
|
<ul>
|
6
誤字修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
わかる方、教えていただけるとありがたいです。よろしくお願いします。
|
|
4
4
|
|
|
5
5
|
###発生している問題・エラーメッセージ
|
|
6
|
-
iphoneのブラウザーの<を押して戻ると下のイメージのようにさっき見ていたページのリンク画像が表示されません。PC、Android端末で試したところ正常に表示され問題ありませんでした。また、ブラウザバック
|
|
6
|
+
iphoneのブラウザーの<を押して戻ると下のイメージのようにさっき見ていたページのリンク画像が表示されません。PC、Android端末で試したところ正常に表示され問題ありませんでした。また、ブラウザバックではなく、ページ内<a>戻る</a>で戻ると正常に表示され問題ありませんでした。
|
|
7
7
|
|
|
8
8
|
###該当のソースコード
|
|
9
9
|
```
|
5
html全文追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -3,18 +3,125 @@
|
|
|
3
3
|
わかる方、教えていただけるとありがたいです。よろしくお願いします。
|
|
4
4
|
|
|
5
5
|
###発生している問題・エラーメッセージ
|
|
6
|
-
iphoneのブラウザーの<を押して戻ると下のイメージのようにさっき見ていたページのリンク画像が表示されません。PC、Android端末で試したところ問題ありませんでした。
|
|
6
|
+
iphoneのブラウザーの<を押して戻ると下のイメージのようにさっき見ていたページのリンク画像が表示されません。PC、Android端末で試したところ正常に表示され問題ありませんでした。また、ブラウザバックする際、ページ内<a>戻る</a>で戻ると正常に表示され問題ありませんでした。
|
|
7
7
|
|
|
8
8
|
###該当のソースコード
|
|
9
9
|
```
|
|
10
|
+
<!doctype html>
|
|
11
|
+
<html>
|
|
12
|
+
<head>
|
|
13
|
+
<meta charset="UTF-8">
|
|
14
|
+
<title>サイトタイトル</title>
|
|
15
|
+
<meta name="description" content="紹介文">
|
|
16
|
+
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
17
|
+
<!-- ※レスポンシブ（style.css） -->
|
|
18
|
+
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
|
|
19
|
+
<link rel="stylesheet" media="all" type="text/css" href="css/css.css" />
|
|
20
|
+
<!-- ※デフォルトのスタイル（style.css） -->
|
|
21
|
+
<link rel="stylesheet" media="all" type="text/css" href="css/tablet.css" />
|
|
22
|
+
<!-- ※タブレット用のスタイル（tablet.css） -->
|
|
23
|
+
<link rel="stylesheet" media="all" type="text/css" href="css/smart.css" />
|
|
24
|
+
<!-- ※スマホタッチ系のjquery-->
|
|
25
|
+
<script src="js/jquery.mobile.custom.js"></script>
|
|
26
|
+
<!-- ※iosタッチ系のjquery-->
|
|
27
|
+
<script type="text/javascript" src="js/ios.js"></script>
|
|
28
|
+
</head>
|
|
29
|
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
|
|
30
|
+
<body>
|
|
31
|
+
<!-- メニュー -->
|
|
32
|
+
<div id="globalnavi">
|
|
33
|
+
<div id="rogo-menu">
|
|
34
|
+
<div class="rogo">
|
|
35
|
+
<li id="title"><h2>Risa Oshima Works</h2></li>
|
|
36
|
+
</div>
|
|
37
|
+
<div class="menu">
|
|
10
|
-
|
|
38
|
+
<ul>
|
|
39
|
+
<li id="menu4"><a href="contact.html">contact</a></li>
|
|
40
|
+
<li id="menu2"><a href="profile.html">profile</a></li>
|
|
41
|
+
<li id="menu1"><a href="#">home</a></li>
|
|
42
|
+
</ul>
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
<!-- 問題箇所↓ -->
|
|
47
|
+
<div id="content">
|
|
48
|
+
<div id="main">
|
|
11
49
|
<div class="link">
|
|
50
|
+
<img src="img/title1.png" alt="web&app" width="200" height="200">
|
|
51
|
+
</div>
|
|
52
|
+
<div class="link">
|
|
12
53
|
<a href="work/1.html">
|
|
13
|
-
<img src="img/botton1-2.png" onmouseup="this.src='img/botton1-2.png" alt="タイトル"
|
|
14
|
-
|
|
15
|
-
|
|
54
|
+
<img src="img/botton1-2.png" onmouseup="this.src='img/botton1-2.png" alt="タイトル" width="200" height="200" onmouseover="this.src='img/botton1.png'" onmouseout="this.src='img/botton1-2.png'" ></a></div>
|
|
55
|
+
|
|
56
|
+
<div class="link">
|
|
57
|
+
<a href="work/2.html">
|
|
58
|
+
<img src="img/botton2-2.png" onmouseup="this.src='img/botton2-2.png" alt="タイトル" width="200" height="200" onmouseover="this.src='img/botton2.png'" onmouseout="this.src='img/botton2-2.png'" ></a></div>
|
|
16
59
|
|
|
17
|
-
|
|
60
|
+
<div class="link">
|
|
61
|
+
<a href="work/3.html">
|
|
62
|
+
<img src="img/botton3-2.png" onmouseup="this.src='img/botton3-2.png" alt="タイトル" width="200" height="200" onmouseover="this.src='img/botton3.png'" onmouseout="this.src='img/botton3-2.png'"></a></div>
|
|
63
|
+
|
|
64
|
+
<div class="link">
|
|
65
|
+
<a href="work/4.html">
|
|
66
|
+
<img src="img/botton4-2.png" alt="タイトル" width="200" height="200" onmouseover="this.src='img/botton4.png'" onmouseout="this.src='img/botton4-2.png'" onMouseUp="this.src='img/botton4-2.png"></a></div>
|
|
67
|
+
|
|
68
|
+
<div class="link">
|
|
69
|
+
<img src="img/title2.png" alt="Graphic" width="200" height="200"></div>
|
|
70
|
+
|
|
71
|
+
<div class="link">
|
|
72
|
+
<a href="work/5.html">
|
|
73
|
+
<img src="img/botton5-2.png" alt="タイトル" width="200" height="200" onmouseover="this.src='img/botton5.png'" onmouseout="this.src='img/botton5-2.png'" onMouseUp="this.src='img/botton5-2.png"></a></div>
|
|
74
|
+
|
|
75
|
+
<div class="link">
|
|
76
|
+
<a href="work/6.html">
|
|
77
|
+
<img src="img/botton6-2.png" alt="タイトル" width="200" height="200" onmouseover="this.src='img/botton6.png'" onmouseout="this.src='img/botton6-2.png'" onMouseUp="this.src='img/botton6-2.png"></a>
|
|
78
|
+
</div>
|
|
79
|
+
<div class="link">
|
|
80
|
+
<a href="work/7.html">
|
|
81
|
+
<img src="img/botton7-2.png" alt="タイトル" width="200" height="200" onmouseover="this.src='img/botton7.png'" onmouseout="this.src='img/botton7-2.png'" onMouseUp="this.src='img/botton7-2.png">
|
|
82
|
+
</a>
|
|
83
|
+
</div>
|
|
84
|
+
<div class="link">
|
|
85
|
+
<a href="#">
|
|
86
|
+
<img src="img/en2.png" alt="タイトル" width="200" height="200" onmouseover="this.src='img/en1.png'" onmouseout="this.src='img/en2.png'">
|
|
87
|
+
</a>
|
|
88
|
+
</div>
|
|
89
|
+
<div class="link">
|
|
90
|
+
<a href="#">
|
|
91
|
+
<img src="img/en2.png" alt="タイトル" width="200" height="200" onmouseover="this.src='img/en1.png'" onmouseout="this.src='img/en2.png'">
|
|
92
|
+
</a>
|
|
93
|
+
</div>
|
|
94
|
+
<div class="link">
|
|
95
|
+
<img src="img/title3.png" alt="sketch" width="200" height="200">
|
|
96
|
+
</div>
|
|
97
|
+
<div class="link">
|
|
98
|
+
<a href="work/10.html">
|
|
99
|
+
<img src="img/botton10-2.png" alt="タイトル" width="200" height="200" onmouseover="this.src='img/botton10.png'" onmouseout="this.src='img/botton10-2.png'" onMouseUp="this.src='img/botton10-2.png"></a></div>
|
|
100
|
+
<div class="link">
|
|
101
|
+
<a href="work/11.html">
|
|
102
|
+
<img src="img/botton11-2.png" alt="タイトル" width="200" height="200" onmouseover="this.src='img/botton11.png'" onmouseout="this.src='img/botton11-2.png'" onMouseUp="this.src='img/botton11-2.png"></a>
|
|
103
|
+
</div>
|
|
104
|
+
<div class="link">
|
|
105
|
+
<a href="#">
|
|
106
|
+
<img src="img/en2.png" alt="タイトル" width="200" height="200" onmouseover="this.src='img/en1.png'" onmouseout="this.src='img/en2.png'"></a>
|
|
107
|
+
</div>
|
|
108
|
+
<div class="link">
|
|
109
|
+
<a href="#">
|
|
110
|
+
<img src="img/en2.png" alt="タイトル" width="200" height="200" onmouseover="this.src='img/en1.png'" onmouseout="this.src='img/en2.png'"></a></div>
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
|
113
|
+
<div id="profile">
|
|
114
|
+
<p></p>
|
|
115
|
+
</div>
|
|
116
|
+
<div id="footer">
|
|
117
|
+
<p>テキスト</p>
|
|
118
|
+
</div>
|
|
119
|
+
</body>
|
|
120
|
+
</html>
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
|
|
124
|
+
【CSS】(該当箇所のみ)
|
|
18
125
|
/* PC版CSS */
|
|
19
126
|
#content{
|
|
20
127
|
margin:auto;
|
|
@@ -38,6 +145,7 @@
|
|
|
38
145
|
float:left;
|
|
39
146
|
margin:25px;
|
|
40
147
|
}
|
|
148
|
+
|
|
41
149
|
/* スマホ版CSS */
|
|
42
150
|
#content{
|
|
43
151
|
margin-top:150px;
|
|
@@ -63,8 +171,9 @@
|
|
|
63
171
|
}
|
|
64
172
|
```
|
|
65
173
|
|
|
174
|
+
|
|
66
175
|
###試したこと
|
|
67
|
-
web上で調べて、onmouseupを追加して見たり、hoverを抜いて見たりしましたが、改善されませんでした。
|
|
176
|
+
web上で調べて、onmouseupを追加して見たり、http://www.tokyoliteracy.co.jp/blog/58.htmlのサイトのコードを加えたり、hoverを抜いて見たりしましたが、改善されませんでした。
|
|
68
177
|
|
|
69
178
|
###補足情報(言語/FW/ツール等のバージョンなど)
|
|
70
179
|
使用言語(html CSS jQuery)
|
4
初心者マーク追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
File without changes
|
3
コード部分見切れていたので改行しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -10,7 +10,9 @@
|
|
|
10
10
|
【HTML】
|
|
11
11
|
<div class="link">
|
|
12
12
|
<a href="work/1.html">
|
|
13
|
-
<img src="img/botton1-2.png" onmouseup="this.src='img/botton1-2.png" alt="タイトル"
|
|
13
|
+
<img src="img/botton1-2.png" onmouseup="this.src='img/botton1-2.png" alt="タイトル"
|
|
14
|
+
width="200" height="200" onmouseover="this.src='img/botton1.png'"
|
|
15
|
+
onmouseout="this.src='img/botton1-2.png'" ></a></div>
|
|
14
16
|
|
|
15
17
|
【CSS】
|
|
16
18
|
/* PC版CSS */
|
2
コード部分、markdown記法にしました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -6,13 +6,14 @@
|
|
|
6
6
|
iphoneのブラウザーの<を押して戻ると下のイメージのようにさっき見ていたページのリンク画像が表示されません。PC、Android端末で試したところ問題ありませんでした。
|
|
7
7
|
|
|
8
8
|
###該当のソースコード
|
|
9
|
+
```
|
|
9
10
|
【HTML】
|
|
10
11
|
<div class="link">
|
|
11
12
|
<a href="work/1.html">
|
|
12
13
|
<img src="img/botton1-2.png" onmouseup="this.src='img/botton1-2.png" alt="タイトル" width="200" height="200" onmouseover="this.src='img/botton1.png'" onmouseout="this.src='img/botton1-2.png'" ></a></div>
|
|
13
14
|
|
|
14
15
|
【CSS】
|
|
15
|
-
|
|
16
|
+
/* PC版CSS */
|
|
16
17
|
#content{
|
|
17
18
|
margin:auto;
|
|
18
19
|
padding-top:120px;
|
1
コード部分、markdown記法にしました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -12,56 +12,54 @@
|
|
|
12
12
|
<img src="img/botton1-2.png" onmouseup="this.src='img/botton1-2.png" alt="タイトル" width="200" height="200" onmouseover="this.src='img/botton1.png'" onmouseout="this.src='img/botton1-2.png'" ></a></div>
|
|
13
13
|
|
|
14
14
|
【CSS】
|
|
15
|
-
/* PC版CSS */
|
|
15
|
+
```/* PC版CSS */
|
|
16
|
-
(プレビューレイアウト崩れてしまうので頭の#抜きました)
|
|
17
|
-
content{
|
|
16
|
+
#content{
|
|
18
17
|
margin:auto;
|
|
19
18
|
padding-top:120px;
|
|
20
19
|
padding-bottom:50px;
|
|
21
20
|
width:1000px;
|
|
22
21
|
}
|
|
23
|
-
content a:hover img {
|
|
22
|
+
#content a:hover img {
|
|
24
23
|
opacity: 0.5;
|
|
25
24
|
}
|
|
26
|
-
content a img {
|
|
25
|
+
#content a img {
|
|
27
26
|
transition: opacity 1s ease-out;
|
|
28
27
|
}
|
|
29
28
|
|
|
30
|
-
main{
|
|
29
|
+
#main{
|
|
31
30
|
width:1000px;
|
|
32
31
|
margin:auto;
|
|
33
32
|
}
|
|
34
33
|
|
|
35
34
|
.link{
|
|
36
|
-
|
|
35
|
+
float:left;
|
|
37
|
-
|
|
36
|
+
margin:25px;
|
|
38
|
-
|
|
37
|
+
}
|
|
39
38
|
/* スマホ版CSS */
|
|
40
|
-
(プレビューレイアウト崩れてしまうので頭の#抜きました)
|
|
41
|
-
content{
|
|
39
|
+
#content{
|
|
42
|
-
|
|
40
|
+
margin-top:150px;
|
|
43
|
-
|
|
41
|
+
height:100%;
|
|
44
|
-
|
|
42
|
+
}
|
|
45
|
-
main{
|
|
43
|
+
#main{
|
|
46
44
|
margin:auto;
|
|
47
45
|
width:320px;
|
|
48
46
|
}
|
|
49
47
|
|
|
50
|
-
main .link{
|
|
48
|
+
#main .link{
|
|
51
49
|
height: auto;
|
|
52
50
|
width :auto;
|
|
53
51
|
}
|
|
54
52
|
|
|
55
53
|
.link{
|
|
56
|
-
|
|
54
|
+
margin:15px;
|
|
57
|
-
|
|
55
|
+
}
|
|
58
56
|
|
|
59
57
|
.link img{
|
|
60
|
-
|
|
58
|
+
width:290px;
|
|
61
|
-
|
|
59
|
+
height:290px;
|
|
62
|
-
|
|
60
|
+
}
|
|
61
|
+
```
|
|
63
62
|
|
|
64
|
-
|
|
65
63
|
###試したこと
|
|
66
64
|
web上で調べて、onmouseupを追加して見たり、hoverを抜いて見たりしましたが、改善されませんでした。
|
|
67
65
|
|