質問編集履歴
5
追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -8,7 +8,19 @@
|
|
|
8
8
|
|
|
9
9
|
**【悩んでいること】**
|
|
10
10
|
|
|
11
|
+
**①**
|
|
12
|
+
|
|
13
|
+
テキストの横幅を、画像の親要素に指定すれば解決しそうですが、
|
|
14
|
+
|
|
15
|
+
その後テキストの長さが変わる可能性を考慮すると、この方法はあまり良くないように思えます。
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
**②**
|
|
22
|
+
|
|
11
|
-
テキストの横幅をvwで画像の親要素に指定した場合、
|
|
23
|
+
「①」の方法を取ったとしても、テキストの横幅をvwで画像の親要素に指定した場合、
|
|
12
24
|
|
|
13
25
|
スマホの画面で見ると、画像がテキストの横幅からはみ出してしまいます。
|
|
14
26
|
|
4
追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
|
|
37
37
|
|
|
38
38
|
|
|
39
|
-
**▼スマホ横画面 がっつりはみ出ている**
|
|
39
|
+
**▼スマホ横画面 機種に関わらず、がっつりはみ出ている**
|
|
40
40
|
|
|
41
41
|
|
|
42
42
|
|
3
補足修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
|
|
15
15
|
※スマホ用サイトのため、vwの方が良いのでは？と思いvwで指定しています。
|
|
16
16
|
|
|
17
|
-
（実物は余白もvwで指定しています）
|
|
17
|
+
（下記ダミーの余白はpxですが、実物は余白もvwで指定しています）
|
|
18
18
|
|
|
19
19
|
|
|
20
20
|
|
2
vwで指定 画像添付
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -6,21 +6,15 @@
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
**【現状】**
|
|
10
|
-
|
|
11
|
-
・テキストよりも画像の方が大きいため、テキストの横幅からはみ出す
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
9
|
**【悩んでいること】**
|
|
16
10
|
|
|
17
|
-
テキストの横幅を画像の親要素に指定
|
|
11
|
+
テキストの横幅をvwで画像の親要素に指定した場合、
|
|
18
12
|
|
|
19
|
-
|
|
13
|
+
スマホの画面で見ると、画像がテキストの横幅からはみ出してしまいます。
|
|
20
14
|
|
|
21
|
-
|
|
15
|
+
※スマホ用サイトのため、vwの方が良いのでは？と思いvwで指定しています。
|
|
22
16
|
|
|
23
|
-
|
|
17
|
+
（実物は余白もvwで指定しています）
|
|
24
18
|
|
|
25
19
|
|
|
26
20
|
|
|
@@ -28,13 +22,23 @@
|
|
|
28
22
|
|
|
29
23
|
**【参考画像】**
|
|
30
24
|
|
|
31
|
-
上…テキストの幅を
|
|
25
|
+
上の青い四角…テキストの横幅をvwで画像の親要素に 指定している
|
|
32
26
|
|
|
33
|
-
下…テキストの幅を
|
|
27
|
+
下の青い四角…テキストの横幅をvwで画像の親要素に 指定していない
|
|
34
28
|
|
|
35
29
|
|
|
36
30
|
|
|
31
|
+
**▼スマホ縦画面 機種（スマホスクリーンの幅）が変わると崩れてしまう**
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
37
|
-
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
**▼スマホ横画面 がっつりはみ出ている**
|
|
40
|
+
|
|
41
|
+
|
|
38
42
|
|
|
39
43
|
|
|
40
44
|
|
|
@@ -126,7 +130,7 @@
|
|
|
126
130
|
|
|
127
131
|
.inner img {
|
|
128
132
|
|
|
129
|
-
width: 1
|
|
133
|
+
width: 27.1vw;
|
|
130
134
|
|
|
131
135
|
}
|
|
132
136
|
|
|
@@ -142,4 +146,8 @@
|
|
|
142
146
|
|
|
143
147
|
|
|
144
148
|
|
|
149
|
+
以上になります。
|
|
150
|
+
|
|
151
|
+
何か良い方法がありましたら、教えていただけますと幸いです。
|
|
152
|
+
|
|
145
|
-
|
|
153
|
+
よろしくお願いいたします…！
|
1
質問タイトルの修正
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
兄弟要素
|
|
1
|
+
兄弟要素の横幅を、短い方に揃える方法
|
test
CHANGED
|
File without changes
|