質問編集履歴
6
書式の改善
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
また、スライドショー・フルスクリーン表示はそのままで、768px以下からリサイズした別の画像に切り替えて表示させたいです。
|
|
6
6
|
|
|
7
|
-
（人物写真を使用しており、リサイズ画像なしだと人が画面外に追いやられてしまいます…。）
|
|
7
|
+
（人物写真を使用しており、リサイズ画像なしだとタブレットサイズ以下から人が画面外に追いやられてしまいます…。）
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
5
書式の改善
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
サイトのメインビジュアルをコーディングしています。
|
|
1
|
+
サイトのメインビジュアル部分をコーディングしています。
|
|
2
2
|
|
|
3
3
|
スライドショーかつフルスクリーン表示させたいです。
|
|
4
4
|
|
|
5
|
-
また、スライドショー・フルスクリーン表示はそのままで、
|
|
5
|
+
また、スライドショー・フルスクリーン表示はそのままで、768px以下からリサイズした別の画像に切り替えて表示させたいです。
|
|
6
6
|
|
|
7
7
|
（人物写真を使用しており、リサイズ画像なしだと人が画面外に追いやられてしまいます…。）
|
|
8
8
|
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
|
|
27
27
|
|
|
28
28
|
|
|
29
|
-
しかし
|
|
29
|
+
しかしフルスクリーンで画像を表示させることができなかった。
|
|
30
30
|
|
|
31
31
|
<img>に100vh指定してみたが画像が歪んでしまう。
|
|
32
32
|
|
|
@@ -180,20 +180,12 @@
|
|
|
180
180
|
|
|
181
181
|
```CSS
|
|
182
182
|
|
|
183
|
-
img {
|
|
184
|
-
|
|
185
|
-
|
|
183
|
+
.mainvisual{
|
|
186
|
-
|
|
184
|
+
|
|
187
|
-
|
|
185
|
+
height: 100vh;
|
|
188
186
|
|
|
189
187
|
}
|
|
190
188
|
|
|
191
|
-
.mainvisual{
|
|
192
|
-
|
|
193
|
-
height: 100vh;
|
|
194
|
-
|
|
195
|
-
}
|
|
196
|
-
|
|
197
189
|
```
|
|
198
190
|
|
|
199
191
|
```JavaScript
|
4
書式の改善
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -14,6 +14,10 @@
|
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
|
|
17
|
+
sanitize.cssを使用しています。
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
17
21
|
### 試したこと1
|
|
18
22
|
|
|
19
23
|
|
|
@@ -106,6 +110,14 @@
|
|
|
106
110
|
|
|
107
111
|
```CSS
|
|
108
112
|
|
|
113
|
+
img {
|
|
114
|
+
|
|
115
|
+
max-width:100%;
|
|
116
|
+
|
|
117
|
+
height:auto;
|
|
118
|
+
|
|
119
|
+
}
|
|
120
|
+
|
|
109
121
|
.mainvisual{
|
|
110
122
|
|
|
111
123
|
height: 100vh;
|
|
@@ -168,6 +180,14 @@
|
|
|
168
180
|
|
|
169
181
|
```CSS
|
|
170
182
|
|
|
183
|
+
img {
|
|
184
|
+
|
|
185
|
+
max-width:100%;
|
|
186
|
+
|
|
187
|
+
height:auto;
|
|
188
|
+
|
|
189
|
+
}
|
|
190
|
+
|
|
171
191
|
.mainvisual{
|
|
172
192
|
|
|
173
193
|
height: 100vh;
|
3
書式の改善
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -2,7 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
スライドショーかつフルスクリーン表示させたいです。
|
|
4
4
|
|
|
5
|
-
また、
|
|
5
|
+
また、スライドショー・フルスクリーン表示はそのままで、タブレットサイズ以下からリサイズした別の画像に切り替えて表示させたいです。
|
|
6
|
+
|
|
7
|
+
（人物写真を使用しており、リサイズ画像なしだと人が画面外に追いやられてしまいます…。）
|
|
6
8
|
|
|
7
9
|
|
|
8
10
|
|
2
書式の改善
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
メインビジュアルをスライドショーかつ
|
|
1
|
+
メインビジュアルをスライドショーかつフルスクリーン表示させ、さらに幅768px以下で別の画像に切り替えたい
|
test
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
サイトのメインビジュアルをコーディングしています。
|
|
2
2
|
|
|
3
|
-
スライドショーかつ
|
|
3
|
+
スライドショーかつフルスクリーン表示させたいです。
|
|
4
4
|
|
|
5
|
-
また、人物の集合写真を使用するため、タブレットサイズ以下からリサイズした別の画像に切り替えて表示させたいです。
|
|
5
|
+
また、人物の集合写真を使用するため、スライドショー・フルスクリーン表示はそのままで、タブレットサイズ以下からリサイズした別の画像に切り替えて表示させたいです。
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
|
|
23
|
-
しかし縦横比を保ったまま
|
|
23
|
+
しかし縦横比を保ったままフルスクリーンで画像を表示させることができなかった。
|
|
24
24
|
|
|
25
25
|
<img>に100vh指定してみたが画像が歪んでしまう。
|
|
26
26
|
|
|
@@ -150,7 +150,7 @@
|
|
|
150
150
|
|
|
151
151
|
「backstretch.js([紹介記事](https://on-ze.com/archives/831))」というjQueryライブラリを使用し、jQueryに画像パスを記述。
|
|
152
152
|
|
|
153
|
-
CSSにてvh単位を使用し
|
|
153
|
+
CSSにてvh単位を使用しフルスクリーン表示。
|
|
154
154
|
|
|
155
155
|
|
|
156
156
|
|
1
書式の改善
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,7 +1,3 @@
|
|
|
1
|
-
### 前提・実現したいこと
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
1
|
サイトのメインビジュアルをコーディングしています。
|
|
6
2
|
|
|
7
3
|
スライドショーかつウィンドウいっぱいに表示させたいです。
|
|
@@ -20,21 +16,13 @@
|
|
|
20
16
|
|
|
21
17
|
|
|
22
18
|
|
|
23
|
-
「swiper.js
|
|
19
|
+
「swiper.js（[紹介記事](https://on-ze.com/archives/4213)）」というjquery不要のライブラリを使用し、HTML側に<img>タグで画像を配置。<picture>タグを使用して画像を切り替える方法。
|
|
24
20
|
|
|
25
21
|
|
|
26
22
|
|
|
27
|
-
### 1の問題点
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
縦横比を保ったままウィンドウいっぱいに画像を表示させることができなかった。
|
|
23
|
+
しかし縦横比を保ったままウィンドウいっぱいに画像を表示させることができなかった。
|
|
32
24
|
|
|
33
25
|
<img>に100vh指定してみたが画像が歪んでしまう。
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
### 1のソースコード
|
|
38
26
|
|
|
39
27
|
|
|
40
28
|
|
|
@@ -160,21 +148,13 @@
|
|
|
160
148
|
|
|
161
149
|
|
|
162
150
|
|
|
163
|
-
「backstretch.js
|
|
151
|
+
「backstretch.js([紹介記事](https://on-ze.com/archives/831))」というjQueryライブラリを使用し、jQueryに画像パスを記述。
|
|
164
152
|
|
|
165
153
|
CSSにてvh単位を使用しウィンドウいっぱいに表示。
|
|
166
154
|
|
|
167
155
|
|
|
168
156
|
|
|
169
|
-
### 2の問題点
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
タブレットサイズ以下からの画像の切り替えをどうやるのかわからない。（if文とかいうのをどうにかこうにか記述すればいける…？）
|
|
157
|
+
だが、タブレットサイズ以下からの画像の切り替えをどうやるのかわからない。（if文とかいうのをどうにかこうにか記述すればいける…？）
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
### 2のソースコード
|
|
178
158
|
|
|
179
159
|
|
|
180
160
|
|
|
@@ -212,4 +192,6 @@
|
|
|
212
192
|
|
|
213
193
|
|
|
214
194
|
|
|
215
|
-
不足している情報あれば追記します
|
|
195
|
+
不足している情報があれば追記します。また、上記2つ以外にも方法があればご教授ください。
|
|
196
|
+
|
|
197
|
+
回答、よろしくお願いします。
|