teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

3

追記しました。

2020/04/23 01:09

投稿

new1ro
new1ro

スコア4528

answer CHANGED
@@ -13,7 +13,7 @@
13
13
 
14
14
  ---
15
15
 
16
- 追記: 画面幅が、以下の数値を上回ると、おそらく隙間が出るはずです。
16
+ 追記: 画面幅が、以下の数値を上回ると、おそらく右側に隙間が出るはずです。
17
17
  「1100px + 500px」
18
18
 
19
19
  以下のように設定してみてください。
@@ -22,8 +22,14 @@
22
22
  #host {
23
23
  position: relative;
24
24
  top: 100px;
25
+
25
26
  /* left: 1100px; */
26
27
  margin: 0 40px 0 auto; /* 40pxは右側の余白です。好きなように設定してください。 */
28
+
29
+ background: white;
30
+ border-radius: 1%;
27
- ...
31
+ width: 500px;
32
+ text-align: center;
33
+ height: 500px;
28
34
  }
29
35
  ```

2

追記しました。

2020/04/23 01:09

投稿

new1ro
new1ro

スコア4528

answer CHANGED
@@ -9,4 +9,21 @@
9
9
  #cover {
10
10
  max-width: 100%; /* もしくは「100vh」 */
11
11
  }
12
+ ```
13
+
14
+ ---
15
+
16
+ 追記: 画面幅が、以下の数値を上回ると、おそらく隙間が出るはずです。
17
+ 「1100px + 500px」
18
+
19
+ 以下のように設定してみてください。
20
+
21
+ ```CSS
22
+ #host {
23
+ position: relative;
24
+ top: 100px;
25
+ /* left: 1100px; */
26
+ margin: 0 40px 0 auto; /* 40pxは右側の余白です。好きなように設定してください。 */
27
+ ...
28
+ }
12
29
  ```

1

追記しました。

2020/04/23 01:07

投稿

new1ro
new1ro

スコア4528

answer CHANGED
@@ -1,2 +1,12 @@
1
1
  背景画像を指定した要素に
2
- `background-size: cover;`を指定するとOKだと思います。
2
+ `background-size: cover;`を指定するとOKだと思います。
3
+
4
+ ---
5
+
6
+ 追記:
7
+ 画面サイズからはみ出て横方向のスクロールが出てしまう、ということなのであれば以下です。
8
+ ```CSS
9
+ #cover {
10
+ max-width: 100%; /* もしくは「100vh」 */
11
+ }
12
+ ```