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

編集履歴

回答編集履歴

4

ごじしゅうせい

2018/10/09 03:42

投稿

退会済みユーザー
answer CHANGED
@@ -14,7 +14,7 @@
14
14
  position: relative;
15
15
  width: 100%;
16
16
  height: 100%;
17
- padding: calc(900% / 32 - 1em) 0 0;
17
+ padding: calc(900% / 32 - 0.5em) 0 0;
18
18
  background-color: #999;
19
19
  }
20
20
  .uchigawa {
@@ -28,7 +28,7 @@
28
28
  position: relative;
29
29
  width: 100%;
30
30
  height: 100%;
31
- padding: calc(400% / 6 - 1em) 0 0;
31
+ padding: calc(400% / 6 - 0.5em) 0 0;
32
32
  background-color: #999;
33
33
  }
34
34
  .uchigawa {

3

修正

2018/10/09 03:42

投稿

退会済みユーザー
answer CHANGED
@@ -14,7 +14,7 @@
14
14
  position: relative;
15
15
  width: 100%;
16
16
  height: 100%;
17
- padding: 28.125% 0 0;
17
+ padding: calc(900% / 32 - 1em) 0 0;
18
18
  background-color: #999;
19
19
  }
20
20
  .uchigawa {
@@ -28,7 +28,7 @@
28
28
  position: relative;
29
29
  width: 100%;
30
30
  height: 100%;
31
- padding: calc(400% / 6) 0 0;
31
+ padding: calc(400% / 6 - 1em) 0 0;
32
32
  background-color: #999;
33
33
  }
34
34
  .uchigawa {

2

ちょっと修正

2018/10/09 03:41

投稿

退会済みユーザー
answer CHANGED
@@ -21,18 +21,18 @@
21
21
  margin: auto 0;
22
22
  }
23
23
  ```
24
- スマホ用に9:16も作るとなると
24
+ スマホ用に3:4も作るとなると
25
25
  前お教えした二つに分岐する方法のpc.cssに上をso.cssに下を追加してください。
26
26
  ```CSS
27
27
  .sotogawa {
28
28
  position: relative;
29
29
  width: 100%;
30
30
  height: 100%;
31
- padding: calc(3200% / 9) 0 0;
31
+ padding: calc(400% / 6) 0 0;
32
32
  background-color: #999;
33
33
  }
34
34
  .uchigawa {
35
35
  margin: auto 0;
36
36
  }
37
37
  ```
38
- あと文字の関係上ちょっとだけ16:9や9:16じゃなくなります。
38
+ あと文字の関係上ちょっとだけ16:9や3:4じゃなくなります。

1

sp版も

2018/10/09 03:38

投稿

退会済みユーザー
answer CHANGED
@@ -11,13 +11,28 @@
11
11
  ```
12
12
  ```CSS
13
13
  .sotogawa {
14
- position: relative;
14
+ position: relative;
15
- width: 100%;
15
+ width: 100%;
16
16
  height: 100%;
17
- padding: 28.125% 0 0;
17
+ padding: 28.125% 0 0;
18
18
  background-color: #999;
19
19
  }
20
20
  .uchigawa {
21
- margin: auto 0;
21
+ margin: auto 0;
22
22
  }
23
- ```
23
+ ```
24
+ スマホ用に9:16も作るとなると
25
+ 前お教えした二つに分岐する方法のpc.cssに上をso.cssに下を追加してください。
26
+ ```CSS
27
+ .sotogawa {
28
+ position: relative;
29
+ width: 100%;
30
+ height: 100%;
31
+ padding: calc(3200% / 9) 0 0;
32
+ background-color: #999;
33
+ }
34
+ .uchigawa {
35
+ margin: auto 0;
36
+ }
37
+ ```
38
+ あと文字の関係上ちょっとだけ16:9や9:16じゃなくなります。