質問編集履歴

5

追記

2018/08/22 17:41

投稿

_shizu
_shizu

score0

test CHANGED
File without changes
test CHANGED
@@ -36,7 +36,7 @@
36
36
 
37
37
 
38
38
 
39
- **▼スマホ横画面 がっつりはみ出ている**
39
+ **▼スマホ横画面 機種に関わらず、がっつりはみ出ている**
40
40
 
41
41
  ![イメージ説明](2f8a5793bcd2ce30078a30666096898c.png)
42
42
 

4

追記

2018/08/22 15:28

投稿

_shizu
_shizu

score0

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
 

3

補足修正

2018/08/22 15:27

投稿

_shizu
_shizu

score0

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
- 現在のテキストの幅を画像親要素にpxなどで指定できせん
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
+ ![イメージ説明](463a2ff0fdb88a93b168599e4ae3691c.png)
34
+
37
- ![イメージ説明](ec265e963d45d8c1e11ead333732c153.png)
35
+ ![イメージ説明](82000f6fe1ce8dab020ed510aca55336.png)
36
+
37
+
38
+
39
+ **▼スマホ横画面 がっつりはみ出ている**
40
+
41
+ ![イメージ説明](2f8a5793bcd2ce30078a30666096898c.png)
38
42
 
39
43
 
40
44
 
@@ -126,7 +130,7 @@
126
130
 
127
131
  .inner img {
128
132
 
129
- width: 100%;
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
+ よろしくお願いいたします…!

2

vwで指定 画像添付

2018/08/22 15:24

投稿

_shizu
_shizu

score0

test CHANGED
@@ -1 +1 @@
1
- 兄弟要素(img)の横幅を、短い方に揃える方法
1
+ 兄弟要素の横幅を、短い方に揃える方法
test CHANGED
File without changes

1

質問タイトルの修正

2018/08/22 14:55

投稿

_shizu
_shizu

score0

test CHANGED
@@ -1 +1 @@
1
- 兄弟要素の横幅を、短い方に揃える方法
1
+ 兄弟要素(img)の横幅を、短い方に揃える方法
test CHANGED
@@ -6,27 +6,21 @@
6
6
 
7
7
 
8
8
 
9
- **【悩んでいること】**
9
+ **【現状】**
10
10
 
11
- **①**
12
-
13
- テキストの横幅を、画像の親要素に指定すれば解決しそうですが、
11
+ テキストよりも画像の大きいためテキストの横幅からはみ出す
14
-
15
- その後テキストの長さが変わる可能性を考慮すると、この方法はあまり良くないように思えます。
16
12
 
17
13
 
18
14
 
15
+ **【悩んでいること】**
19
16
 
17
+ テキストの横幅を画像の親要素に指定すれば済む話なのですが、
20
18
 
21
- **②**
19
+ テキストが長くなった場合にも、画像の幅もテキストと同じ幅になってほしいため
22
20
 
23
- 「①」方法を取ったとしても、テキストの幅をvwで画像の親要素に指定した場合、
21
+ 現在のテキストの幅を画像の親要素にpxなどで指定できません。
24
22
 
25
- スマホの画面で見ると、画像がテキストの横幅からはみ出してしまいます。
26
-
27
- ※スマホ用サイトのため、vwの方が良いのでは?と思いvwで指定しています。
28
-
29
- (下記ダミーの余白はpxですが、実物は余白もvwで指定しています
23
+ 何か良い方法ありましたら教えていただけますと幸いです。
30
24
 
31
25
 
32
26
 
@@ -34,23 +28,13 @@
34
28
 
35
29
  **【参考画像】**
36
30
 
37
- の青い四角…テキストの幅をvwで画像の親要素に 指定し
31
+ 上…テキストの幅を画像の親要素に指定した場合(実現したレイアウト)
38
32
 
39
- の青い四角…テキストの幅をvwで画像の親要素に 指定していない
33
+ 下…テキストの幅を画像の親要素に指定しない場合(現状)
40
34
 
41
35
 
42
36
 
43
- **▼スマホ縦画面 機種(スマホスクリーンの幅)が変わると崩れてしまう**
44
-
45
- ![イメージ説明](463a2ff0fdb88a93b168599e4ae3691c.png)
46
-
47
- ![イメージ説明](82000f6fe1ce8dab020ed510aca55336.png)
37
+ ![イメージ説明](ec265e963d45d8c1e11ead333732c153.png)
48
-
49
-
50
-
51
- **▼スマホ横画面 機種に関わらず、がっつりはみ出ている**
52
-
53
- ![イメージ説明](2f8a5793bcd2ce30078a30666096898c.png)
54
38
 
55
39
 
56
40
 
@@ -142,7 +126,7 @@
142
126
 
143
127
  .inner img {
144
128
 
145
- width: 27.1vw;
129
+ width: 100%;
146
130
 
147
131
  }
148
132
 
@@ -158,8 +142,4 @@
158
142
 
159
143
 
160
144
 
161
- 以上になります。
162
-
163
- 何か良い方法がありましたら、教えていただけますと幸いです。
164
-
165
- よろしくお願いいたします…!
145
+ 以上になります。よろしくお願いいたします…!