HTML 写真の上に文字を書く方法について

前提・実現したいこと

Webページの写真上に文字を書けるようにする。

発生している問題・エラーメッセージ

トップ画像では上手くいったのですが、フッター画像の方では写真上に文字を書くことができません。
上手くいったトップ画像のようにコードを書いてもフッター写真には書くことができず、全てトップ画像に反映されます。

エラーメッセージ

該当のソースコード

HTML
1ソースコード<!DOCTYPE html>
2<head>
3<meta>
4<title></title>
5<link rel="stylesheet" href="style.css">
6</head>
7<body>
8<div class="head-image">
9  <img src="images/1607574834.jpeg" alt="森の家" title="森の家" width="100%" height="548px">
10</div>
11<div class="text">
12  ホストになる<br>
13  <div class="text1">
14    <strong>お部屋のタイプは？</strong><br>
15    <u><strong>まるまる貸切</strong></u><br>
16
17    <strong>宿泊可能な人数は？</strong><br>
18    <u><strong>ゲスト4人</strong></u><br>
19
20    <strong>どこにありますか？</strong><br>
21    <u><strong>Anjo</strong></u><br>
22    <strong>ひと月あたり最大<span>￥49,879</span>の収入*</strong><br>
23  </div>
24  <div class="button">
25    <a href="#">はじめる</a><br>
26  </div>
27    <u>予想ホスティング収入額の計算方法</u>
28</div>
29  <main-visual>
30  <div class="main-visual">
31    <h1>ホスティングで実<br>
32      現する、自分らし<br>
33      いライフスタイル
34    </h1>
35  </div>
36  <div>
37    <h2>ホスティングで広がる可能性</h2>
38    <p>柔軟な働き方を楽しみながら、ホスティン<br>
39      グを通して、好きな事をするた<br>
40      めの収入アップや長く続く友情関係にめぐ<br>
41      りあう機会を得てみませんか。</p>
42      <b><u>ホスティングの世界を知ろう</u></b>
43  </div>
44  <div>
45    <h2>安心のホスティング</h2>
46    <p>24時間365日対応サポート、頼れるホスト<br>
47      コミュニティからツールのカスタム設定、<br>
48      ヒント・実践アドバイスのご提供まで、<br>
49      Airbnbが全良でホストの成功をサポートし<br>
50      ます。</p>
51      <b><u>Airbnbによるホストのサポート体制</u></b>
52  </div>
53
54  </main-visual>
55  <main>
56  <div class="main">
57    <div>
58      <img src="images/mens.jpeg" alt="黒人" width="612px" height="472px">
59    </div>
60    <div>
61      <div class="main-content">
62        ホスティングのおかげで、自分<br>
63        の創造性を活かすことができ、<br>
64        また家族と過ごす時間も増えました。<br>
65      </div>
66      <p>Darrelさん<br>
67        米ショージア州アトランタのホスト
68      </p>
69    </div>
70  </div>
71  <div class="main-image">
72    <img src="images/img森.jpg" alt="" width="100%" height="400px">
73  </div>
74  <div class="text-message">
75    ホストになる
76    お部屋のタイプは？
77    まるまる貸切
78    宿泊可能な人数は？
79    ゲスト4人
80    どこにありますか？
81    Anjo
82    ひと月あたり最大¥51,059の収入*
83  <div></div>
84    <a href="#">はじめる</a><br>
85  </div>
86  <h1>ホスティングをはじめる前に...</h1>
87  <div class="images">
88    <div class="image">
89      <img src="images/4.webp" alt="" width="322px" height="200px">
90      <h3>Airbnbでホスティングする理由</h3>
91      <p>リスティングの方法からお部屋の準備まで、ホスティングの始め方を学びましょう。</p>
92    </div>
93    <div class="image">
94      <img src="images/3.webp" alt="" width="322px" height="200px">
95      <h3>Airbnbでホスティングをはじめるには</h3>
96      <p>料金設定と受け取り金についてホスト全員が知っておくべき点。</p>
97    </div>
98    <div class="image">
99      <img src="images/2.webp" alt="" width="322px" height="200px">
100      <h3>Airbnbで収入を得る方法</h3>
101      <p>どんなお部屋にもぴったりのゲストがいます。重要なのは、お部屋についてゲストに正しくお伝えておくことです。</p>
102    </div>
103    <div class="image">
104      <img src="images/1.webp" alt="" width="322px" height="200px">
105      <h3>Airbnbで貸し出すお部屋に求められる条件は？</h3>
106      <p>迅速な対応からキャンセル回避まで、重要なポイントを以下にご紹介します。</p>
107    </div>
108  </div>
109  <h1>Airbnbのサポート体制</h1>
110    <div class="supports">
111    <div class="support">
112      <h3>ホストを守るプログラム</h3>
113      <p>万が一の事故の際にホストのみなさまをお<br>
114        守りするため、Airbnbのほおトンドの予約に<br>
115        はそれぞれUS$1,000,000を限度とする物損<br>
116        補償と賠償責任保険が自動付帯されます。<br>
117      </p>
118      ホストを守るAirbnbの取り組み
119    </div>
120    <div class="support">
121      <h3>新型コロナウィルスの安全ガイドライン</h3>
122      <p>コミュニティのみなさまの健康を守るた<br>
123        め、Airbnbは専門家と連携し、メンバー全<br>
124        員のための安全対策とホスト向けの清掃ス<br>
125        タンダートを作成しました。<br>
126      </p>
127      Airbnb清掃スタンダードについて知る
128    </div>
129    <div class="support">
130      <h3>高いゲスト基準</h3>
131      <p>ホストの皆様にご按針いただくため、<br>
132        Airbnbでは、予約前にゲストに身分証明書<br>
133        の提示を求め、過去のホストによるゲスト<br>
134        のレビューを閲覧できるようにしていま<br>
135        す。Airbnbの新しいゲスト基準ポリシー<br>
136        は、これまで以上に高い行動基準をゲスト<br>
137        に求めるものです。<br>
138      </p>
139      安心してホスティングしていただくための取り組み
140    </div>
141    </div>
142  </main>
143  <footer>
144  <div class="footer-image">
145    <img src="images/3-1-1.jpeg" alt="" width="100%" height="400px">
146  </div>
147  <div class="message">
148    <h1>ホスティングをはじめよう</h1>
149  </div>
150  <div class="details">
151    <div class="detail">
152      <h1>詳細を確認して熟練ホ<br>
153        ストつながろう</h1>
154      <p>ホスティングに役立つ情報ならびに経験豊富なホストがみなさまの<br>
155        質問にお答えするライブ配信のオンラインセミナーへのアクセスを<br>
156        提供いたします。ご希望の方は必要事項をご記入ください。<br>
157      </p>
158    </div>
159    <div class="inputs">
160      <div class="input">
161        <input type="email" class="" id="email" value autocomplete="off" aria-describedby placeholder="メールアドレス"><br>
162        <input type="tel"　class＝”” id="" placeholder="電話番号(任意)">
163      </div>
164      <div>
165        <input type="checkbox" name="" value="">
166        Airbnbから不定期に配信されるホスティングのヒントやお役たち情報の受<br>
167        信を希望します。また、配信解除はいつでもできる事を理解しました。<br>
168        <div class="registration">
169          <a href="#">登録する</a><br>
170        </div>
171        <div class="none">
172          私は「登録する」を選択することで、<a href="#">Airbnbの個人情報保護ポリシー</a>に従って<br>
173          Airbnbが私の個人情報を処理することに同意します。
174        </div>
175      </div>
176    </div>
177  </div>
178  <hr>
179  <div class="footer-details">
180    <div class="footer-detail">
181      <b>企業情報</b>
182      <p>Airbnbのご利用方法</p>
183      <p>ニュースルーム</p>
184      <p>株主・投資家のみなさまへ</p>
185      <p>Airbnb Plus</p>
186      <p>Airbnb Luxe</p>
187      <p>HotelTonight</p>
188      <p>Airbnbビジネスプログラム</p>
189      <p>ホストのおもてなしがもたらす、特別な旅</p>
190      <p>採用情報</p>
191      <p>共同創業者からの手紙</p>
192    </div>
193    <div class="footer-detail">
194      <b>コミュニティ</b>
195      <p>ダイバーシティ&ビロンギング</p>
196      <p>アクセシビリティ対応</p>
197      <p>Airbnbアソシエイト</p>
198      <p>ゲストの紹介</p>
199      <p>Airbnb.org</p>
200    </div>
201    <div class="footer-detail">
202      <b>ホスト</b>
203      <p>宿泊をホストする</p>
204      <p>オンライン体験をホストする</p>
205      <p>体験をホストする</p>
206      <p>責任あるホスティング</p>
207      <p>リソースセンター</p>
208      <p>コミュニティセンター</p>
209    </div>
210    <div class="footer-detail">
211      <b>サポート</b>
212      <p>Airbnbの新型コロナウィルスに対する取り組み</p>
213      <p>ヘルプセンター</p>
214      <p>キャンセルオプション</p>
215      <p>近隣コミュニティーサポート</p>
216      <p>信頼&安全</p>
217    </div>
218  </div>
219  <hr>
220  <div>
221    Airbnb Global Services Limited<br>
222    観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)<br>
223    ©️2021Airbnb,Inc.・プライバシー・利用規約・サイトマップ・企業情報<br>
224  </div>
225  <div>
226    <a href="#">日本語(JP)</a>
227    <a href="#">¥JPY</a>
228  </div>
229  </footer>
230</body>
231
232body{
233	margin: 0;
234}
235
236.head-image {
237  position: relative;
238}
239.text {
240  color: white;
241  font-size: 18px;
242  position: absolute;
243  top:120px;
244  left:50px;
245}
246strong {
247  font-size: 23px;
248}
249span {
250  color: red;
251}
252p {
253  font-size: 15px;
254}
255
256.button a {
257  color: white;
258  border-radius: 5px;
259  background-color: red;
260  padding: 10px 30px;
261  text-decoration: none;
262  
263}
264h1 {
265  font-size: 32px;
266}
267.button {
268  margin: 10px 0;
269}
270main-visual {
271  display:flex;
272  justify-content: space-evenly;
273}
274.main {
275  display:flex;
276  justify-content: space-evenly;
277  margin: 120px 0;
278}
279.main-content {
280  font-size: 32px;
281}
282.main-image {
283  margin: 0 60px 60px 60px;
284  position: relative;
285  border-radius: 5px;
286}
287/* .text-message {
288  position: absolute;
289  color: white;
290  font-size: 18px;
291  top:120px;
292  left:50px; */
293/* } */
294.images {
295  display:flex;
296  margin-bottom: 30px;
297}
298.image {
299  margin: 30px;
300}
301.supports {
302  display: flex;
303}
304.support {
305  margin: 60px;
306}
307/* .footer-image {
308  position: relative; */
309}
310.details {
311  display: flex;
312}
313input[type=checkbox] {
314  width: 20px;
315  height: 20px;
316}
317.footer-details {
318  display: flex;
319}
320.footer-detail {
321  margin: 20px 30px;
322}
323.registration a {
324  margin: 20px 20px;
325  background-color: black;
326  padding: 15px 20px;
327  text-decoration: none;
328  color: white;
329  border-radius: 5px;
330}
331.registration {
332  margin: 30px 0 30px 0;
333}
334.none {
335  font-size: 12px;
336}

試したこと

position: relative,position: absoluteを試してみましたが、上手くいかずです。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

タイトルやコンテンツなどテキスト要素の背景に画像を表示させたいとき、
img要素に対してposition: absolute などで絶対配置しようとするといろいろ複雑になり面倒です。

CSSのbackground-imageプロパティを使って背景画像として表示させるのが簡単です。

background-image - CSS: カスケーディングスタイルシート | MDN

例えば、footer全体の背景に画像を表示させたいのなら、

css
1footer {
2  background-image: url("images/3-1-1.jpeg");
3  background-size: cover;
4}

投稿2021/04/11 04:55

hatena19

総合スコア33699

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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