回答編集履歴

1

重複内容の削除

2020/09/15 15:27

投稿

ophiacodon
ophiacodon

スコア24

test CHANGED
@@ -1,151 +1,3 @@
1
- そのまま貼っつけてください。
2
-
3
- ポイントは
4
-
5
-
6
-
7
- position: relative;
8
-
9
- position: absolute;
10
-
11
-
12
-
13
- でしょうか。
14
-
15
-
16
-
17
- ```html
18
-
19
- <!DOCTYPE html>
20
-
21
- <html lang="ja">
22
-
23
- <HEAD>
24
-
25
- <meta charset="UTF-8">
26
-
27
- <meta name="viewport" content="width=960">
28
-
29
- <title>TEST</title>
30
-
31
- <style>
32
-
33
- * { padding:0;margin:0;box-sizing: border-box;}
34
-
35
- html,body{
36
-
37
- background:#eee;
38
-
39
- height:100%;
40
-
41
- width:100%;
42
-
43
- font-family:unset;
44
-
45
- letter-spacing:0.1em;
46
-
47
- font-size:12px
48
-
49
- }
50
-
51
- h1{
52
-
53
- font-size:3rem;
54
-
55
- line-height:6rem;
56
-
57
- text-align:center;
58
-
59
- background:white;
60
-
61
- width:800px;
62
-
63
- margin:0 auto;
64
-
65
- }
66
-
67
- #main_box {
68
-
69
- background:white;
70
-
71
- width:800px;
72
-
73
- margin:0 auto;
74
-
75
- position:relative;
76
-
77
- }
78
-
79
- #ph_box {
80
-
81
- height:300px;
82
-
83
- background:linear-gradient(blue 0%, cyan 100%);
84
-
85
- }
86
-
87
- #contents_box {
88
-
89
- position:absolute;
90
-
91
- top:250px;
92
-
93
- background:white;
94
-
95
- width:600px;
96
-
97
- padding:50px 10px 10px 100px;
98
-
99
- }
100
-
101
- dt {
102
-
103
- font-size: 2rem;
104
-
105
- line-height: 3rem;
106
-
107
- border-bottom:3px solid black;
108
-
109
- }
110
-
111
- dd {
112
-
113
- padding: 1rem 0;
114
-
115
- }
116
-
117
- </style>
118
-
119
- </HEAD>
120
-
121
- <body>
122
-
123
- <h1>タイトル</h1>
124
-
125
- <div id="main_box">
126
-
127
- <div id="ph_box"></div>
128
-
129
- <div id="contents_box">
130
-
131
- <dl id="main_word">
132
-
133
- <dt>サブタイトル</dt>
134
-
135
- <dd>本文テキスト</dd>
136
-
137
- </dl>
138
-
139
- </div>
140
-
141
- </div>
142
-
143
- </body>
144
-
145
- </html>
146
-
147
- ```
148
-
149
1
  position 属性はいじらずに、contents_box にネガティブマージンを設定するという方法もあります。
150
2
 
151
3
  ```CSS