teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップWebサイトに関する質問レスポンシブデザインで画像が縮小されてしまう

編集履歴

回答編集履歴

3

修正

2020/04/20 22:56

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  /* margin: 80px 140px 0 140px; */
12
12
 
13
- /* 140pxは広すぎるので狭くする */
13
+ /* 左右の余白「140px」は広すぎるので狭くする。好きな値を指定。 */
14
14
 
15
15
  margin-left: 20px;
16
16
 
@@ -22,7 +22,7 @@
22
22
 
23
23
  .prof img {
24
24
 
25
- /* 画像を80pxと、少し小さく。 */
25
+ /* 画像を少し小さくする。100pxのままがいいなら不要。 */
26
26
 
27
27
  width: 80px;
28
28
 
@@ -30,7 +30,7 @@
30
30
 
31
31
 
32
32
 
33
- /* 余白が余ったときや足りないとき伸び縮みしない。「80px」はwidthと同じ大きさに設定。 */
33
+ /* 余白が余ったときや足りないとき伸び縮みしない。「80px」はwidthと同じ大きさを指定。 */
34
34
 
35
35
  flex: 0 0 80px;
36
36
 

2

修正

2020/04/20 22:56

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -24,17 +24,15 @@
24
24
 
25
25
  /* 画像を80pxと、少し小さく。 */
26
26
 
27
+ width: 80px;
27
28
 
28
-
29
- /* 余白が余ったときや足りないとき伸び縮みしない */
30
-
31
- flex: 0 0 80px;
29
+ height: 80px;
32
30
 
33
31
 
34
32
 
35
- width: 80px;
33
+ /* 余白が余ったときや足りないとき伸び縮みしない。「80px」はwidthと同じ大きさに設定。 */
36
34
 
37
- height: 80px;
35
+ flex: 0 0 80px;
38
36
 
39
37
  }
40
38
 
@@ -50,6 +48,8 @@
50
48
 
51
49
  @media (max-width: 767px) {
52
50
 
51
+ /* 画面サイズが767px以下のとき、フッターを横並びでなく縦並びにする */
52
+
53
53
  .introduction {
54
54
 
55
55
  display: block;
@@ -64,6 +64,8 @@
64
64
 
65
65
  .category {
66
66
 
67
+ /* 縦並びにしたとき、横幅いっぱいに広げる */
68
+
67
69
  width: auto;
68
70
 
69
71
  }

1

修正

2020/04/20 22:54

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -50,7 +50,23 @@
50
50
 
51
51
  @media (max-width: 767px) {
52
52
 
53
-
53
+ .introduction {
54
+
55
+ display: block;
56
+
57
+ }
58
+
59
+ .prof,
60
+
61
+ .footer-right,
62
+
63
+ .post,
64
+
65
+ .category {
66
+
67
+ width: auto;
68
+
69
+ }
54
70
 
55
71
  }
56
72