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

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

ただいまの
回答率

87.78%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 188

score 1

前提・実現したいこと

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

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

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

エラーメッセージ

該当のソースコード

ソースコード<!DOCTYPE html>
<head>
<meta>
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="head-image">
  <img src="images/1607574834.jpeg" alt="森の家" title="森の家" width="100%" height="548px">
</div>
<div class="text">
  ホストになる<br>
  <div class="text1">
    <strong>お部屋のタイプは?</strong><br>
    <u><strong>まるまる貸切</strong></u><br>

    <strong>宿泊可能な人数は?</strong><br>
    <u><strong>ゲスト4人</strong></u><br>

    <strong>どこにありますか?</strong><br>
    <u><strong>Anjo</strong></u><br>
    <strong>ひと月あたり最大<span>¥49,879</span>の収入*</strong><br>
  </div>
  <div class="button">
    <a href="#">はじめる</a><br>
  </div>
    <u>予想ホスティング収入額の計算方法</u>
</div>
  <main-visual>
  <div class="main-visual">
    <h1>ホスティングで実<br>
      現する、自分らし<br>
      いライフスタイル
    </h1>
  </div>
  <div>
    <h2>ホスティングで広がる可能性</h2>
    <p>柔軟な働き方を楽しみながら、ホスティン<br>
      グを通して、好きな事をするた<br>
      めの収入アップや長く続く友情関係にめぐ<br>
      りあう機会を得てみませんか。</p>
      <b><u>ホスティングの世界を知ろう</u></b>
  </div>
  <div>
    <h2>安心のホスティング</h2>
    <p>24時間365日対応サポート、頼れるホスト<br>
      コミュニティからツールのカスタム設定、<br>
      ヒント・実践アドバイスのご提供まで、<br>
      Airbnbが全良でホストの成功をサポートし<br>
      ます。</p>
      <b><u>Airbnbによるホストのサポート体制</u></b>
  </div>

  </main-visual>
  <main>
  <div class="main">
    <div>
      <img src="images/mens.jpeg" alt="黒人" width="612px" height="472px">
    </div>
    <div>
      <div class="main-content">
        ホスティングのおかげで、自分<br>
        の創造性を活かすことができ、<br>
        また家族と過ごす時間も増えました。<br>
      </div>
      <p>Darrelさん<br>
        米ショージア州アトランタのホスト
      </p>
    </div>
  </div>
  <div class="main-image">
    <img src="images/img森.jpg" alt="" width="100%" height="400px">
  </div>
  <div class="text-message">
    ホストになる
    お部屋のタイプは?
    まるまる貸切
    宿泊可能な人数は?
    ゲスト4人
    どこにありますか?
    Anjo
    ひと月あたり最大¥51,059の収入*
  <div></div>
    <a href="#">はじめる</a><br>
  </div>
  <h1>ホスティングをはじめる前に...</h1>
  <div class="images">
    <div class="image">
      <img src="images/4.webp" alt="" width="322px" height="200px">
      <h3>Airbnbでホスティングする理由</h3>
      <p>リスティングの方法からお部屋の準備まで、ホスティングの始め方を学びましょう。</p>
    </div>
    <div class="image">
      <img src="images/3.webp" alt="" width="322px" height="200px">
      <h3>Airbnbでホスティングをはじめるには</h3>
      <p>料金設定と受け取り金についてホスト全員が知っておくべき点。</p>
    </div>
    <div class="image">
      <img src="images/2.webp" alt="" width="322px" height="200px">
      <h3>Airbnbで収入を得る方法</h3>
      <p>どんなお部屋にもぴったりのゲストがいます。重要なのは、お部屋についてゲストに正しくお伝えておくことです。</p>
    </div>
    <div class="image">
      <img src="images/1.webp" alt="" width="322px" height="200px">
      <h3>Airbnbで貸し出すお部屋に求められる条件は?</h3>
      <p>迅速な対応からキャンセル回避まで、重要なポイントを以下にご紹介します。</p>
    </div>
  </div>
  <h1>Airbnbのサポート体制</h1>
    <div class="supports">
    <div class="support">
      <h3>ホストを守るプログラム</h3>
      <p>万が一の事故の際にホストのみなさまをお<br>
        守りするため、Airbnbのほおトンドの予約に<br>
        はそれぞれUS$1,000,000を限度とする物損<br>
        補償と賠償責任保険が自動付帯されます。<br>
      </p>
      ホストを守るAirbnbの取り組み
    </div>
    <div class="support">
      <h3>新型コロナウィルスの安全ガイドライン</h3>
      <p>コミュニティのみなさまの健康を守るた<br>
        め、Airbnbは専門家と連携し、メンバー全<br>
        員のための安全対策とホスト向けの清掃ス<br>
        タンダートを作成しました。<br>
      </p>
      Airbnb清掃スタンダードについて知る
    </div>
    <div class="support">
      <h3>高いゲスト基準</h3>
      <p>ホストの皆様にご按針いただくため、<br>
        Airbnbでは、予約前にゲストに身分証明書<br>
        の提示を求め、過去のホストによるゲスト<br>
        のレビューを閲覧できるようにしていま<br>
        す。Airbnbの新しいゲスト基準ポリシー<br>
        は、これまで以上に高い行動基準をゲスト<br>
        に求めるものです。<br>
      </p>
      安心してホスティングしていただくための取り組み
    </div>
    </div>
  </main>
  <footer>
  <div class="footer-image">
    <img src="images/3-1-1.jpeg" alt="" width="100%" height="400px">
  </div>
  <div class="message">
    <h1>ホスティングをはじめよう</h1>
  </div>
  <div class="details">
    <div class="detail">
      <h1>詳細を確認して熟練ホ<br>
        ストつながろう</h1>
      <p>ホスティングに役立つ情報ならびに経験豊富なホストがみなさまの<br>
        質問にお答えするライブ配信のオンラインセミナーへのアクセスを<br>
        提供いたします。ご希望の方は必要事項をご記入ください。<br>
      </p>
    </div>
    <div class="inputs">
      <div class="input">
        <input type="email" class="" id="email" value autocomplete="off" aria-describedby placeholder="メールアドレス"><br>
        <input type="tel" class=”” id="" placeholder="電話番号(任意)">
      </div>
      <div>
        <input type="checkbox" name="" value="">
        Airbnbから不定期に配信されるホスティングのヒントやお役たち情報の受<br>
        信を希望します。また、配信解除はいつでもできる事を理解しました。<br>
        <div class="registration">
          <a href="#">登録する</a><br>
        </div>
        <div class="none">
          私は「登録する」を選択することで、<a href="#">Airbnbの個人情報保護ポリシー</a>に従って<br>
          Airbnbが私の個人情報を処理することに同意します。
        </div>
      </div>
    </div>
  </div>
  <hr>
  <div class="footer-details">
    <div class="footer-detail">
      <b>企業情報</b>
      <p>Airbnbのご利用方法</p>
      <p>ニュースルーム</p>
      <p>株主・投資家のみなさまへ</p>
      <p>Airbnb Plus</p>
      <p>Airbnb Luxe</p>
      <p>HotelTonight</p>
      <p>Airbnbビジネスプログラム</p>
      <p>ホストのおもてなしがもたらす、特別な旅</p>
      <p>採用情報</p>
      <p>共同創業者からの手紙</p>
    </div>
    <div class="footer-detail">
      <b>コミュニティ</b>
      <p>ダイバーシティ&ビロンギング</p>
      <p>アクセシビリティ対応</p>
      <p>Airbnbアソシエイト</p>
      <p>ゲストの紹介</p>
      <p>Airbnb.org</p>
    </div>
    <div class="footer-detail">
      <b>ホスト</b>
      <p>宿泊をホストする</p>
      <p>オンライン体験をホストする</p>
      <p>体験をホストする</p>
      <p>責任あるホスティング</p>
      <p>リソースセンター</p>
      <p>コミュニティセンター</p>
    </div>
    <div class="footer-detail">
      <b>サポート</b>
      <p>Airbnbの新型コロナウィルスに対する取り組み</p>
      <p>ヘルプセンター</p>
      <p>キャンセルオプション</p>
      <p>近隣コミュニティーサポート</p>
      <p>信頼&安全</p>
    </div>
  </div>
  <hr>
  <div>
    Airbnb Global Services Limited<br>
    観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)<br>
    ©️2021Airbnb,Inc.・プライバシー・利用規約・サイトマップ・企業情報<br>
  </div>
  <div>
    <a href="#">日本語(JP)</a>
    <a href="#">¥JPY</a>
  </div>
  </footer>
</body>

body{
    margin: 0;
}

.head-image {
  position: relative;
}
.text {
  color: white;
  font-size: 18px;
  position: absolute;
  top:120px;
  left:50px;
}
strong {
  font-size: 23px;
}
span {
  color: red;
}
p {
  font-size: 15px;
}

.button a {
  color: white;
  border-radius: 5px;
  background-color: red;
  padding: 10px 30px;
  text-decoration: none;

}
h1 {
  font-size: 32px;
}
.button {
  margin: 10px 0;
}
main-visual {
  display:flex;
  justify-content: space-evenly;
}
.main {
  display:flex;
  justify-content: space-evenly;
  margin: 120px 0;
}
.main-content {
  font-size: 32px;
}
.main-image {
  margin: 0 60px 60px 60px;
  position: relative;
  border-radius: 5px;
}
/* .text-message {
  position: absolute;
  color: white;
  font-size: 18px;
  top:120px;
  left:50px; */
/* } */
.images {
  display:flex;
  margin-bottom: 30px;
}
.image {
  margin: 30px;
}
.supports {
  display: flex;
}
.support {
  margin: 60px;
}
/* .footer-image {
  position: relative; */
}
.details {
  display: flex;
}
input[type=checkbox] {
  width: 20px;
  height: 20px;
}
.footer-details {
  display: flex;
}
.footer-detail {
  margin: 20px 30px;
}
.registration a {
  margin: 20px 20px;
  background-color: black;
  padding: 15px 20px;
  text-decoration: none;
  color: white;
  border-radius: 5px;
}
.registration {
  margin: 30px 0 30px 0;
}
.none {
  font-size: 12px;
}

試したこと

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 87.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る