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

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

新規登録して質問してみよう
ただいま回答率
85.35%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

2194閲覧

[HTML/CSS]画像の上に文字を表示させたい

neroS2eng

総合スコア16

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/12/13 06:27

編集2020/12/13 06:28

前提・実現したいこと

CSSで画像の上に文字を表示させたいです。

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

調べて親要素に「position:relative」
子要素に「position: absolute」
と記載すれば良いことまでわかりましたが、うまく反映されず、
子要素のテキストが他のクラスに重なっている?状態です。
イメージ説明

該当のソースコード

HTML

1<!DOCTYPE html> 2<html lang="jp"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" href="css/reset.css"> 8 <link rel="stylesheet" href="css/style.css"> 9 10 <title>デイトラ</title> 11</head> 12 13<body> 14 15 <div class="header"> 16 <header> 17 <h1>30DAYSトライアル</h1> 18 <ul> 19 <li>デイトラとは</li> 20 <li>コース一覧</li> 21 <li>お問い合わせ</li> 22 </ul> 23 </header> 24</div> 25 26 <div class="info"> 27 <img src="img/main-vsual-nontitle.png" alt="ヘッダー画像"> 28 <div class="text"> 29 <h1>1日1題30日で<br>プロのWebエンジニアになろう!</h1> 30 <p>毎日設定された課題をこなすだけ! 31 <br>未経験から30日でプログラミングスキルが身につきます。 32 </p> 33 </div> 34 </div> 35 36 <div class="main"> 37 <h1>デイトラとは</h1> 38 <img src="img/about.png" alt="アバウト"> 39 <p>デイトラとは、無料で、迷わず、楽しく学べるプログラミング学習アプリです。 40 毎日設定された課題をこなしていくだけで、 41 未経験から30日でプログラミングスキルが身につきます。 42 1日1題30日でプロのWebエンジニアを目指しましょう!</p> 43 </div> 44 45 <div class="course"> 46 <h1>コース一覧</h1> 47 <img src="img/web_first.png" alt="初級"> 48 <p>HTML / CSS / Bootstrap</p> 49 <img src="img/web_second.png" alt="中級"> 50 <p>HTML / CSS / JavaScript / jQuery</p> 51 <img src="img/web_third.png" alt="上級"> 52 <p>PHP / WordPress</p> 53 </div> 54 55 <div class="contact"> 56 <h1>お問い合わせ</h1> 57 <p>さあ今日から30日間を始めよう!</p> 58 <input type="email" placeholder="メールアドレス"> 59 <input type="submit" value="無料ではじめる"> 60 </div> 61 </body> 62 <footer> 63 <p>Copyright(c) 2020 東京フリーランス ALL Rights Reserved.</p> 64 </footer> 65 66</html>

CSS

1body { 2 width: 100%; 3 margin-left: auto; 4 margin-right: auto; 5 background-color: antiquewhite; 6} 7 8header { 9 height: 48px; 10 text-align: center; 11 display: flex; 12 line-height: 48px; 13} 14header h1 { 15 font-size: 24px; 16 font-weight: bold; 17 padding-left: 10%; 18 19} 20header ul { 21 font-weight: bold; 22 margin-left: 35%; 23 display: flex; 24} 25header ul li { 26 padding-right: 45px; 27} 28 29.info { 30 position:relative 31} 32 33.text { 34 position: absolute; 35} 36 37.info img { 38 width: 100%; 39}

試したこと

親要素と子要素を見直したり、子要素にdivでクラス名をつけてみたりしましたが
解決せずでした。

お力を貸していただけると幸いです。
よろしくお願いいたします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

absolute側にtop:30px;とかleft:0;とか入れてみて下さい。

投稿2020/12/13 06:31

tomtomtomtom

総合スコア563

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

neroS2eng

2020/12/13 06:42

できました! 反映すれば画像の上に乗って表示されると思い込んでいたのですが textの位置を指定しなければいけなかったのですね・・・! 大変助かりました、ありがとうございます!
tomtomtomtom

2020/12/13 07:17

ご解決おめでとうございます^^ また機会がありましたら宜しくお願い致します。
guest

0

ヘッダー画像を背景画像としてその上にテキストを重ねて表示させたいという目的なら、img要素、position: absolute;は使わずに、ヘッダー画像をbackground-imageで表示させるのが簡単だと思います。

html

1 <div class="info"> 2 <div class="text"> 3 <h1>1日1題30日で<br>プロのWebエンジニアになろう!</h1> 4 <p>毎日設定された課題をこなすだけ! 5 <br>未経験から30日でプログラミングスキルが身につきます。 6 </p> 7 </div> 8 </div>

css

1.info { 2 background-image: url(img/main-vsual-nontitle.png); 3 background-size: cover; 4}

投稿2020/12/13 07:07

編集2020/12/13 07:13
hatena19

総合スコア34075

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問