※ ChatGPTを利用し、要約された質問です（原文：フルスライドの画像上に文字を入れたい）
フルスライド画像上に文字を入れる方法
このQ&Aのポイント
初心者の方でも簡単にフルスライド画像上に文字を入れる方法をご紹介します。HTMLとCSSを使って文字を表示させる設定を行いましょう。
フルスライド画像上に文字を入れるためには、HTMLの<div>タグとCSSの設定を利用します。まず、フルスライド画像を表示する<div>タグを作成し、その中に文字を表示する<h1>タグなどを追加します。
CSSで文字のサイズや位置を指定することで、フルスライド画像上に文字を表示させることができます。例えば、positionプロパティを使用して文字の位置を調整し、font-sizeプロパティを使用して文字のサイズを指定します。
すみません、初心者です。
htmlは、
<div id="container">
<div class="fullSlideShow">
<ul>
<li><a href="#1"><img src="img/photo01.jpg" alt=""></a></li>
<li><a href="#2"><img src="img/photo02.jpg" alt=""></a></li>
<li><a href="#3"><img src="img/photo03.jpg" alt=""></a></li>
<li><a href="#4"><img src="img/photo04.jpg" alt=""></a></li>
<li><a href="#5"><img src="img/photo05.jpg" alt=""></a></li>
<li><a href="#5"><img src="img/photo06.jpg" alt=""></a></li>
</ul>
</div>
<div class="helo">
<h1>site title</h1>
<p>abcdefg</p>
</div>
と書いてみました。CSSですが、
.fullSlideShow h1 {
position: absolute;
z-index:500;
left: 40px; top: 40px; padding-right: 40px; font-size: 2em; line-height: 1.20;
}
.fullSlideShow h1 a.textlink {
color: white; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); text-decoration: none;
}
としてみましたが表示されません。まだサイズや位置は気にせず表示されるように試してみているのですが、どうも文字が画面上に現れてくれません。
とりあえず、h1とpだけでも表示させたいのですが、教えて頂けないでしょうか。
どうぞ宜しくお願いします。
