ゲームっぽい表現が急遽必要となったので(どういう状況?)、ChatGPTに聞いて作ってみました。
なお、筆者はバックエンドエンジニアでHTML,CSSを含めフロントエンドはほぼ素人です。
入力
HTMLで画像を表示し、かつその画像の下半分に透過のウインドウを表示させそのうえにテキストを載せたいです。どのように表現すればよいでしょうか？
出力
以下は、HTMLで画像の下半分に透過のウインドウを表示させ、その上にテキストを載せるための例です。
<!DOCTYPE html>
<html>
<head>
<title>Image with transparent overlay and text</title>
<style>
.container {
position: relative;
display: inline-block;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background-color: rgba(0, 0, 0, 0.5); /*透明度50%の黒*/
color: white;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
.text {
font-size: 24px;
font-weight: bold;
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<img src="image.jpg" alt="Image" class="image">
<div class="overlay">
<p class="text">ここにテキストを入力</p>
</div>
</div>
</body>
</html>
この例では、position: relative;とdisplay: inline-block;を持つ親要素（.container）を作成し、その中に画像要素（）とオーバーレイ要素（.overlay）を配置しています。
.imageクラスは画像要素に対して、display: block;とwidth: 100%;を設定し、画像を親要素に合わせて幅を広げるようにしています。
.overlayクラスはオーバーレイ要素に対して、position: absolute;、bottom: 0;、left: 0;、width: 100%;、height: 50%;、background-color: rgba(0, 0, 0, 0.5);、color: white;、text-align: center;、padding: 20px;、box-sizing: border-box;を設定しています。これにより、画像の下半分に黒い透過のオーバーレイを表示させ、その上にテキストを中央揃えで配置することができます。
.textクラスはテキスト要素に対して、font-size: 24px;とfont-weight: bold;を設定し、テキストを太字の24pxのフォントで表示させるようにしています。
結果
出力されたコードを index.html として保存し、同じディレクトリに image.jpg を配置しました。
少し透過ウインドウが大きすぎますね。高さを6割くらいにするのがちょうどよいでしょうか。
入力
透過ウインドウの高さを今の表現の6割くらいに減らしたいです、どのようにすればよいですか？
出力
透過ウインドウの高さを現在の表現の6割に減らすには、.overlayクラスのheightプロパティを30%に変更します。また、paddingプロパティを適宜調整して、テキストがウインドウ内に適切に収まるようにします。
以下が修正後の例です。
<!DOCTYPE html>
<html>
<head>
<title>Image with transparent overlay and text</title>
<style>
.container {
position: relative;
display: inline-block;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30%; /*高さを30%に変更*/
background-color: rgba(0, 0, 0, 0.5);
color: white;
text-align: center;
padding: 10px; /*paddingを適宜調整*/
box-sizing: border-box;
}
.text {
font-size: 24px;
font-weight: bold;
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<img src="image.jpg" alt="Image" class="image">
<div class="overlay">
<p class="text">ここにテキストを入力</p>
</div>
</div>
</body>
</html>
以上のように、.overlayクラスのheightプロパティを変更することで、透過ウインドウの高さを調整することができます。
結果
かなりそれっぽくなりましたね。
さて、ゲームっぽい表現ということで、クリックしたらメッセージを変えたいところですね。やりかたを聞いて見ましょう。
入力
ありがとうございます。
画像もしくは透過ウインドウをクリックすることで透過ウインドウに表示しているメッセージを text1 から text2 に変更することは可能でしょうか。
出力
はい、可能です。JavaScriptを使用して、画像や透過ウインドウをクリックしたときに表示されるテキストを変更することができます。
以下は、クリックしたときに表示されるテキストを切り替えるためのサンプルコードです。
<!DOCTYPE html>
<html>
<head>
<title>Image with transparent overlay and text</title>
<style>
.container {
position: relative;
display: inline-block;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60%;
background-color: rgba(0, 0, 0, 0.5);
color: white;
text-align: center;
padding: 10px;
box-sizing: border-box;
}
.text {
font-size: 24px;
font-weight: bold;
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<img src="image.jpg" alt="Image" class="image">
<div class="overlay" id="overlay">
<p class="text" id="text">ここにテキストを入力</p>
</div>
</div>
<script>
var overlay = document.getElementById("overlay");
var text = document.getElementById("text");
var clickCount = 0;
overlay.addEventListener("click", function() {
clickCount++;
if (clickCount % 2 === 0) {
text.innerHTML = "text1";
} else {
text.innerHTML = "text2";
}
});
</script>
</body>
</html>
このコードでは、透過ウインドウの親要素である.overlayと、表示されるテキストである.textのそれぞれにid属性を追加しました。また、JavaScriptを使用して、.overlay要素をクリックしたときにclickCount変数をインクリメントし、clickCountが偶数の場合はテキストをtext1に、奇数の場合はテキストをtext2に変更しています。
結果
せっかく変更した .overlay の height が height: 60%; になっちゃっているので、この部分は手作業で30%に戻して、あとはテキストも手動で変更しました。
かつ、テキストは左寄せにしたいので text-align を left に変更した結果、このようになりました。
透過ウインドウをクリックすることで、左と右それぞれ入れ替わるようになりました！
試してみたところ、透過ウインドウではない部分のクリックではテキストが切り替わらないので、もうちょっとやり取りして修正したいところですが、まずは目的としていたものができたので今日はここまでで終わります。
最終的なソース
<!DOCTYPE html>
<html>
<head>
<title>Image with transparent overlay and text</title>
<style>
.container {
position: relative;
display: inline-block;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30%;
background-color: rgba(0, 0, 0, 0.5);
color: white;
text-align: left;
padding: 10px;
box-sizing: border-box;
}
.text {
font-size: 24px;
font-weight: bold;
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<img src="image.jpg" alt="Image" class="image">
<div class="overlay" id="overlay">
<p class="text" id="text">こっち見んな</p>
</div>
</div>
<script>
var overlay = document.getElementById("overlay");
var text = document.getElementById("text");
var clickCount = 0;
overlay.addEventListener("click", function() {
clickCount++;
if (clickCount % 2 === 0) {
text.innerHTML = "こっち見んな";
} else {
text.innerHTML = "見ないでって言ったでしょ";
}
});
</script>
</body>
</html>
まとめ
ChatGPT に質問していくだけで HTML 上でゲームっぽい表現ができるようになりました。
Javascript でテキストを入れ替えているだけなので、本格的なゲームの作りかたとは全く違うかと思いますが、ちょっとお遊びでそれっぽい画面を作るのはこれで大丈夫ですね。ChatGPT 本当にすごい。