teratail
回答率
85.48%
質問するログイン新規登録
トップCSS3に関する質問ブロック要素の上下左右中央寄せがわからない。

編集履歴

回答編集履歴

4

ごじしゅうせい

2018/10/09 03:42

投稿

退会済みユーザー
test CHANGED
@@ -30,7 +30,7 @@
30
30
 
31
31
  height: 100%;
32
32
 
33
- padding: calc(900% / 32 - 1em) 0 0;
33
+ padding: calc(900% / 32 - 0.5em) 0 0;
34
34
 
35
35
  background-color: #999;
36
36
 
@@ -58,7 +58,7 @@
58
58
 
59
59
  height: 100%;
60
60
 
61
- padding: calc(400% / 6 - 1em) 0 0;
61
+ padding: calc(400% / 6 - 0.5em) 0 0;
62
62
 
63
63
  background-color: #999;
64
64
 

3

修正

2018/10/09 03:42

投稿

退会済みユーザー
test CHANGED
@@ -30,7 +30,7 @@
30
30
 
31
31
  height: 100%;
32
32
 
33
- padding: 28.125% 0 0;
33
+ padding: calc(900% / 32 - 1em) 0 0;
34
34
 
35
35
  background-color: #999;
36
36
 
@@ -58,7 +58,7 @@
58
58
 
59
59
  height: 100%;
60
60
 
61
- padding: calc(400% / 6) 0 0;
61
+ padding: calc(400% / 6 - 1em) 0 0;
62
62
 
63
63
  background-color: #999;
64
64
 

2

ちょっと修正

2018/10/09 03:41

投稿

退会済みユーザー
test CHANGED
@@ -44,7 +44,7 @@
44
44
 
45
45
  ```
46
46
 
47
- スマホ用に9:16も作るとなると
47
+ スマホ用に3:4も作るとなると
48
48
 
49
49
  前お教えした二つに分岐する方法のpc.cssに上をso.cssに下を追加してください。
50
50
 
@@ -58,7 +58,7 @@
58
58
 
59
59
  height: 100%;
60
60
 
61
- padding: calc(3200% / 9) 0 0;
61
+ padding: calc(400% / 6) 0 0;
62
62
 
63
63
  background-color: #999;
64
64
 
@@ -72,4 +72,4 @@
72
72
 
73
73
  ```
74
74
 
75
- あと文字の関係上ちょっとだけ16:9や9:16じゃなくなります。
75
+ あと文字の関係上ちょっとだけ16:9や3:4じゃなくなります。

1

sp版も

2018/10/09 03:38

投稿

退会済みユーザー
test CHANGED
@@ -24,13 +24,13 @@
24
24
 
25
25
  .sotogawa {
26
26
 
27
- position: relative;
27
+ position: relative;
28
28
 
29
- width: 100%;
29
+ width: 100%;
30
30
 
31
31
  height: 100%;
32
32
 
33
- padding: 28.125% 0 0;
33
+ padding: 28.125% 0 0;
34
34
 
35
35
  background-color: #999;
36
36
 
@@ -38,8 +38,38 @@
38
38
 
39
39
  .uchigawa {
40
40
 
41
- margin: auto 0;
41
+ margin: auto 0;
42
42
 
43
43
  }
44
44
 
45
45
  ```
46
+
47
+ スマホ用に9:16も作るとなると
48
+
49
+ 前お教えした二つに分岐する方法のpc.cssに上をso.cssに下を追加してください。
50
+
51
+ ```CSS
52
+
53
+ .sotogawa {
54
+
55
+ position: relative;
56
+
57
+ width: 100%;
58
+
59
+ height: 100%;
60
+
61
+ padding: calc(3200% / 9) 0 0;
62
+
63
+ background-color: #999;
64
+
65
+ }
66
+
67
+ .uchigawa {
68
+
69
+ margin: auto 0;
70
+
71
+ }
72
+
73
+ ```
74
+
75
+ あと文字の関係上ちょっとだけ16:9や9:16じゃなくなります。