ボタンを画像の上に置きたいです

メッセージタグにある資料請求ボタンを画像の上に置きたいのですが、どうも
置くことができません。なぜできないのでしょうか？

やったこと
・padding-bottom: 53px;を消して、h3タグを上にずらし、資料請求ボタンを上に置こうとしたものの、
変化はなかったです。

HTML
1
2<head>
3省略！！
4</head>
5<body>
6    <!--ヘッダー-->
7    <header class="page-header">
8     省略
9    </header>
10    <!--メイン-->
11        <div class="main_image">    
12            <div class="main_text">No Coding No Life</div>
13        </div>
14     <!--コース一覧-->
15    <div class="main_course">
16        <h2 class="main_contents">コース一覧</h2>
17       <div class="main_wrapper">
18            <section class="IT_course">
19            
20                <img class="IT_image"src="image_practice/wordpress.png" alt="wordpress">
21            <div class="IT_text">
22                <p>
23                    WordPressの基礎を理解し、2つ のテーマ開発を目指します。実務 に近い形で学習します。
24                </p>
25
26                <div class="main_time">
27
28                    <p>
29                        申込締切<br>
30                        2021年12月31日26時
31                    </p>
32                </div>
33
34            </div>
35            </section>
36            <section class="IT_course">
37                <img class="IT_image" src="image_practice/shopify.png" alt="shopify">
38                <div class="IT_text">
39                    <p>
40                        Shopifyを用いて3つのECサイト を構築することを通してと応用を 学んでいきます。
41                    </p>
42                
43                    <div class="main_time">
44
45                        <p>
46                            申込締切<br>
47                            2021年12月31日26時
48                        </p>
49                    </div>
50                </div>
51               
52
53
54            </section>
55            <section class="IT_course">
56                <img  class="IT_image" src="image_practice/rails.png" alt="rails">
57                <div class="IT_text">
58                    <p>
59                        RubyとRuby on Railsを3つの アプリケーションを開発すること を通して学びます。
60                    </p>
61                    <div class="main_time">
62
63                        <p>
64                            申込締切<br>
65                            2021年12月31日26時
66                        </p>
67                    </div>
68                </div>
69
70            </section>
71            <section class="IT_course">
72                <img class="IT_image" src="image_practice/ai.png" alt="ai">
73                <div class="IT_text">
74                    <p>
75                        Pythonの基礎を学習した後、3 つの機械学習プログラムを作成す ることを目指します。
76                    </p>
77                    <div class="main_time">
78
79                        <p>
80                            申込締切<br>
81                            2021年12月31日26時
82                        </p>
83                    </div>
84                </div>
85            </section>
86         </div>
87        <!--ボタン-->
88        <div class="btn">
89            <a href="#">もっと見る</a>
90        </div>
91    </div>
92        <!--講師紹介-->
93        <section class="teacher_invited">
94            
95            <img class="teacher_image" src="image_practice/DMYn1uwGMkEBJ2d1612792974_1612793004.png" alt="水谷メアリージュン">
96              <div class="teacher_text">
97                <ul class="teacher_list">
98                    <li class="teacher_item">
99                        <h2>水谷メアリージュン</h2>
100                        <div class="teacher_info">
101
102                            <p>
103                            システムエンジニア歴約20年、プログラミング歴約35年。プログラミング の守備範囲は、<br> 
104                            フロントエンド、サーバサイド、Android開発と広く、普段 はシステム開発プロジェクト<br>
105                            の管理や後輩の指導を行っています。
106                            </p>
107                        </div>
108                    </li>
109
110                </ul>
111              </div>
112             
113        </section>
114        <section class="teacher_invited">
115            <img src="image_practice/qFrBv7tSPM5b0YK1612793069_1612793086.png" alt="ジョージ・ウィリアム">
116              <div class="teacher_text">
117                <ul class="teacher_list">
118                    <li class="teacher_item">
119                            <h2>ジョージ・ウィリアム</h2>
120                            <div class="teacher_info">
121                                <p>
122                                    IoT技術をベースに、ハードウェアからクラウドまでを広くカバーする他、 小学生から大人<br>
123                                    まで幅広く、プログラミングに関する指導経験が多数あります。  
124                                </p>
125                            </div>
126                    </li>
127                </ul>
128              </div>
129        </section>
130        <!--メッセージ-->
131        <div class="message-image">
132                <div class="message_contets">
133                    <h3 class="message_title">動き出すなら、今だ</h3>
134                        <div class="message_text">
135                            <p>「自由な場所で働きたい」<br>
136                                「自由な時間に働きたい」<br>
137                                「個人で稼げる力を身に付けたい」<br>
138                                <br>
139                                プログラミングはこれら全てを叶えてくれる。<br>
140                                人生を変える力を持っている。<br>
141                                さあ、今日を人生のターニングポイントにしよう。
142                            </p>
143                        </div>
144                    <!--ボタン-->
145                    <div class="btn">
146                        <p class="btn_document"><a href="#">資料請求する</a></p>
147                    </div>
148                </div>
149                
150         </div>
151        
152
153    <!--フッター-->
154    <footer class="page-fotter">
155        <p>
156            &copy;Copyright(2021 Coding School All Rights Reserved.
157        </p>
158
159    </footer>
160    
161</body>
162</html>

CSS
1@charset "UTF-8";
2body{
3    font-family: ヒラギノ明朝 Pro,W6;
4    max-width: 1280px;
5    text-align: center;
6    margin-left: auto;
7    margin-right: auto;
8    
9}
10
11/*ヘッダー*/
12.page-header{
13    background: #000;
14    max-width: 1280px;
15    max-height: 80px;
16    margin: 0 auto;
17    display: flex;
18
19}
20
21
22.header-logo{
23    width: 193px;
24    margin-top: 15px;
25    margin-bottom: 15px;
26    margin-left: 10px;
27    
28}
29
30.header-nav{
31    display: flex;
32    margin-left: auto;
33    padding-right: 25px;
34    
35}
36.nav_ul{
37    display: flex;
38    list-style: none;
39    line-height: 1.68;
40}
41.nav_li:nth-child(2){
42    padding-left: 25px;
43}
44
45.nav_li a{
46        color: #fff;
47        margin-left: auto;
48}
49
50a{
51    text-decoration: none;
52}
53
54/*メイン画像*/
55.main_image{
56
57    background-image: url(../image_practice/work-3938876_1920.png);
58    width: 100%;
59    background-size: cover;
60    background-position: center;
61    height: 551px;
62}
63.main_text{
64    font-size: 60px;
65    padding: 240px 364px;
66
67}
68/*コース一覧*/
69
70.main_contents{
71    text-align: center;
72    margin-top: 52px;
73    margin-bottom: 40px;
74    line-height: 1.7;
75}
76
77.main_wrapper{
78            text-align: center;
79            display: inline;
80            display: flex;
81}
82
83
84
85/*イメージ図*/
86.IT_image{
87    width: 291px;
88    display: flex;
89    width: 100%;
90    text-align: center;
91}
92.IT_course{
93    width: 291px;
94    box-shadow: 0px 3px 6px #00000029;
95    margin-bottom: 50px;
96}
97.IT_course:nth-child(n+2){
98    margin-left: 20px
99}
100
101
102/*.IT_image:first-child{
103    margin-left: 28px;
104}
105*/
106
107.IT_image:last-child{
108    margin-left: 28px;
109}
110
111
112.IT_text{
113    margin-top: 20px;
114    margin-right: 10px;
115    margin-bottom: 10px;
116    margin-left: 10px;
117}
118
119.IT_text p{
120    font-size: 18px
121    line-height: 1.33;
122}
123
124.main_time {
125    text-align: center;
126    position: relative;
127    margin-top: 48px;
128}
129
130.main_time:before{
131    position: absolute;
132    content: "";
133    width: 80%;
134    height: 1px;
135    background: #707070;
136    left: 0;
137    right: 0;
138    margin: auto;
139    top: -9px;
140    
141}
142.main_time p{
143    font-size: 16px
144}
145.main_time:nth-child(2){
146    margin-top: 8px;
147}
148
149
150/*ボタン*/
151.btn{
152    margin-top: 50px;
153    text-align: center;
154}
155.btn a {
156    width: 310px;
157    height: 52px;
158    box-shadow: 0px 3px 6px #00000029;
159    border: 1px solid #EEE;
160    border-radius: 5px;
161    line-height: 1.72;
162}
163/*講師紹介*/
164.teacher_invited{
165    display: flex;
166    align-items: center;
167}
168
169.teacher_invited:nth-child(n+2){
170    margin-top: 57px;
171    margin-bottom: 83px;
172}
173
174.teacher_invited p {
175    display: block;
176    
177}
178
179.teacher_image{
180    width: 250px;
181}
182
183.teacher_text{
184    display: block;
185    margin: 0 120px;
186
187}
188
189.teacher_text p {
190    margin-top: 30px;
191    font-size: 16px;
192}
193.teacher_list{
194
195}
196
197.teacher_item{
198    margin-left: 61px;
199}
200.teacher_info{
201    display: block;
202    flex: 1;
203}
204/*メッセージ*/
205.message-image{
206    background-image: url(../image_practice/success-846055_1920.png);
207    background-size: cover;
208    background-position: center;
209    height: 455px;
210}
211.message_contents {
212    
213    text-align: center;
214}
215
216.message_title{
217    color: #fff;
218    padding-top: 62px;
219    padding-bottom: 53px;
220    font-size: 36px;
221    line-height: 1.69;
222}
223.message_text{
224    
225    color: #fff;
226    padding-bottom: 32px;
227    font-size: 16px;
228    line-height: 1.75;
229}
230
231.message_text p {
232    margin-top: 20px;
233    line-height: 2;
234}
235/*ボタン*/
236.btn{
237    text-align: center;
238    margin-top: 32px;
239
240}
241
242.btn_document a {
243    width: 210px;
244    
245    background-color: #DC143C;
246    border-shadow : 0px 3px 6px;
247    border-radius:  5px;
248    font-size: 16px;
249    color: #fff;
250    padding: 20px;
251    text-align: center;
252    display: inline-block;
253
254}
255/*フッター*/
256.page-fotter{
257    background-color: #000000;
258    
259}
260
261.page-fotter p {
262    padding-top: 32px;
263    padding-bottom: 31px;
264    text-align: center;
265    font-family: Helvetica Neue;
266    font-size: 14px;
267    color: #FFFFFF;
268    line-height: 1.214;
269}
270
271

itagagaki

2021/04/24 15:29

> メッセージタグにある資料請求ボタンを画像の上に置きたいのですが「メッセージタグにある資料請求ボタン」とは <div class="btn"> <p class="btn_document"><a href="#">資料請求する</a></p> </div> これのことですか？そして、「画像」とはどれのことですか？

free_teku

2021/04/25 08:24

ボタンは上記のクラス名btnのことです。画像はこちらです。 background-image: url(../image_practice/success-846055_1920.png); 分かりづらく、申し訳ありません。確認お願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

質問で提示されたコードだけでは、画像データが無いため、何が正解となるのかちょっと不明確なのですが、とりあえず１つの解を差し上げます。

CSS
1.btn{
2    position: absolute;
3    top: 0px;
4    right: 0px;
5    bottom: 0px;
6    left: 0px;
7    margin: auto;
8}

これを試してみてください。
上下の位置はtopの値を変えれば変更できます。

投稿2021/04/25 09:29

itagagaki

総合スコア8402

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

ボタンを画像の上に置きたいです

関連した質問