質問編集履歴
7
リンク修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
コードの方添付させていただきます。
|
|
10
10
|
|
|
11
|
-
テスト：[https://jsfiddle.net/8z8drhab/
|
|
11
|
+
テスト：[https://jsfiddle.net/8z8drhab/2/](https://jsfiddle.net/8z8drhab/2/)
|
|
12
12
|
|
|
13
13
|
【HTML】
|
|
14
14
|
```
|
6
誤字
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -8,8 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
コードの方添付させていただきます。
|
|
10
10
|
|
|
11
|
-
テスト：
|
|
12
|
-
https://jsfiddle.net/8z8drhab/1/
|
|
11
|
+
テスト：[https://jsfiddle.net/8z8drhab/1/](https://jsfiddle.net/8z8drhab/1/)
|
|
13
12
|
|
|
14
13
|
【HTML】
|
|
15
14
|
```
|
|
@@ -60,7 +59,7 @@
|
|
|
60
59
|
※参考サイトの関係があると思われる該当部分のコードです。
|
|
61
60
|
注釈の解説は当方の解釈で入れておりますので、間違っているかもしれません。。
|
|
62
61
|
```
|
|
63
|
-
※参考サイト：https://gyazo.com/68c0797ea31e01f78dd4ded0eb540ab0
|
|
62
|
+
※参考サイト：[https://gyazo.com/68c0797ea31e01f78dd4ded0eb540ab0](https://gyazo.com/68c0797ea31e01f78dd4ded0eb540ab0)
|
|
64
63
|
（企業サイトでしたため、リンクを貼っていいのかわからず、
|
|
65
64
|
すみませんがキャプチャーのみ添付させていただきます。）
|
|
66
65
|
|
5
誤字
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
※参考サイトの関係があると思われる該当部分のコードです。
|
|
61
61
|
注釈の解説は当方の解釈で入れておりますので、間違っているかもしれません。。
|
|
62
62
|
```
|
|
63
|
-
※参考サイト：https://gyazo.com/
|
|
63
|
+
※参考サイト：https://gyazo.com/68c0797ea31e01f78dd4ded0eb540ab0
|
|
64
64
|
（企業サイトでしたため、リンクを貼っていいのかわからず、
|
|
65
65
|
すみませんがキャプチャーのみ添付させていただきます。）
|
|
66
66
|
|
4
誤字
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -40,7 +40,8 @@
|
|
|
40
40
|
background-size: cover;
|
|
41
41
|
background-position: center center;
|
|
42
42
|
background-repeat: no-repeat;
|
|
43
|
-
z-index: 2;
|
|
43
|
+
z-index: 2;
|
|
44
|
+
}
|
|
44
45
|
```
|
|
45
46
|
【Javascript】
|
|
46
47
|
```
|
3
誤字
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -33,7 +33,8 @@
|
|
|
33
33
|
height: 520px;
|
|
34
34
|
overflow: hidden;
|
|
35
35
|
}
|
|
36
|
+
.cover .pic {
|
|
36
|
-
|
|
37
|
+
position: absolute;
|
|
37
38
|
width: 100%;
|
|
38
39
|
height: 100%;
|
|
39
40
|
background-size: cover;
|
2
コードの追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -8,17 +8,39 @@
|
|
|
8
8
|
|
|
9
9
|
コードの方添付させていただきます。
|
|
10
10
|
|
|
11
|
+
テスト：
|
|
12
|
+
https://jsfiddle.net/8z8drhab/1/
|
|
13
|
+
|
|
11
14
|
【HTML】
|
|
12
15
|
```
|
|
16
|
+
<div class="block block-main">
|
|
13
|
-
<div class="
|
|
17
|
+
<div class="cover">
|
|
14
|
-
<div class="
|
|
18
|
+
<div class="pic" style="background-image: url(http://test-12.capoo.jp/1-12.jpg);">
|
|
15
|
-
</div>
|
|
19
|
+
</div></div>
|
|
16
|
-
<div class="
|
|
20
|
+
<div class="message-svg">
|
|
17
21
|
テキストテキストテキストテキスト
|
|
18
22
|
</div>
|
|
19
|
-
</div>
|
|
23
|
+
</div></div>
|
|
20
|
-
|
|
21
24
|
```
|
|
25
|
+
【CSS】
|
|
26
|
+
```
|
|
27
|
+
.block {
|
|
28
|
+
position: relative;
|
|
29
|
+
}
|
|
30
|
+
.cover {
|
|
31
|
+
position: relative;
|
|
32
|
+
width: 100%;
|
|
33
|
+
height: 520px;
|
|
34
|
+
overflow: hidden;
|
|
35
|
+
}
|
|
36
|
+
.cover .pic {position: absolute;
|
|
37
|
+
width: 100%;
|
|
38
|
+
height: 100%;
|
|
39
|
+
background-size: cover;
|
|
40
|
+
background-position: center center;
|
|
41
|
+
background-repeat: no-repeat;
|
|
42
|
+
z-index: 2;}
|
|
43
|
+
```
|
|
22
44
|
【Javascript】
|
|
23
45
|
```
|
|
24
46
|
$(window).on('load resize', function(){
|
1
文字の修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
var w = _ctrl.clientW; ・・・・①_ctrl.clientWの部分が何なのかが不明。。
|
|
26
26
|
var h = _ctrl.innerHeight; ・・・・②内部高さを取得（?）。_ctrlは何なのか不明。
|
|
27
27
|
var max = (w>h)? 135: 100; ・・・・③不明。
|
|
28
|
-
var bottomH = Math.max(max, h*0.15); ・・・・④max要素とhかける0.15で大きい値を返す（?）
|
|
28
|
+
var bottomH = Math.max(max, h*0.15); ・・・・④max要素とhかける0.15で大きい方の値を返す（?）
|
|
29
29
|
var picH = h-bottomH; ・・・・⑤h引くbottomHの値を返す
|
|
30
30
|
|
|
31
31
|
$(".cover").css("height", picH); ・・・・⑥element.styleにpicHの高さを取得する
|