全体のコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超カラフルアプリ</title>
<style>
/* CSSスタイル */
body {
background-color: #ffcccb;
text-align: center;
font-family: 'Comic Sans MS', sans-serif;
color: #fff;
}
h1 {
font-size: 3em;
color: #000;
text-shadow: 2px 2px #ff0;
}
button {
font-size: 1.5em;
padding: 10px 20px;
background-color: #00f;
color: #fff;
border: 2px solid #ff0;
border-radius: 10px;
box-shadow: 5px 5px #0ff;
cursor: pointer;
animation: spin 2s infinite linear;
margin: 5px;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
p {
font-size: 2em;
background-color: #0ff;
padding: 20px;
border: 5px dotted #000;
transition: background-color 0.5s, color 0.5s, font-size 0.5s;
}
p:hover {
background-color: #ff0;
color: #00f;
font-size: 2.5em;
}
</style>
</head>
<body>
<h1>めちゃくちゃカラフルで不思議なアプリ</h1>
<button id="colorButton1">色を変える 1</button>
<button id="colorButton2">色を変える 2</button>
<button id="colorButton3">色を変える 3</button>
<p id="colorText1">テキスト 1</p>
<p id="colorText2">テキスト 2</p>
<p id="colorText3">テキスト 3</p>
<p id="randomText">ここにランダムなテキストが表示されます</p>
<script>
// JavaScriptのコード
document.getElementById('colorButton1').addEventListener('click', function() {
changeColor('colorText1');
});
document.getElementById('colorButton2').addEventListener('click', function() {
changeColor('colorText2');
});
document.getElementById('colorButton3').addEventListener('click', function() {
changeColor('colorText3');
});
function getRandomColor() {
return '#' + Math.floor(Math.random() * 16777215).toString(16);
}
function changeColor(elementId) {
var randomColor = getRandomColor();
document.getElementById(elementId).style.backgroundColor = randomColor;
document.getElementById(elementId).style.color = getRandomColor();
document.getElementById(elementId).style.borderColor = getRandomColor();
document.getElementById(elementId).innerText = getRandomColor();
}
setInterval(function() {
document.getElementById('randomText').innerText = Math.random().toString(36).substring(2, 15);
}, 1000);
if (Math.random() < 0.2) { // 20%の確率でエラーメッセージを表示
document.body.innerHTML = '<h1>エラー: Something went terribly wrong!</h1>';
}
</script>
</body>
</html>
全体のコードの説明
1. HTML構造 (<body>
部分)
<h1>めちゃくちゃカラフルで不思議なアプリm(__)m</h1>
<button id="colorButton1">色を変える 1</button>
<button id="colorButton2">色を変える 2</button>
<button id="colorButton3">色を変える 3</button>
<p id="colorText1">テキスト 1</p>
<p id="colorText2">テキスト 2</p>
<p id="colorText3">テキスト 3</p>
<p id="randomText">ここにランダムなテキストが表示されます</p>
-
<h1>
タグ: アプリケーションのタイトル「めちゃくちゃカラフルで不思議なアプリ」が表示されます。 -
<button>
タグ: 3つのボタンがあり、それぞれが異なるテキスト(colorText1
,colorText2
,colorText3
)の色や背景色を変更するために使われます。 -
<p>
タグ: それぞれの<p>
要素(colorText1
,colorText2
,colorText3
)は、クリックで色が変わるテキストを表示します。また、randomText
という<p>
はランダムな文字列が表示される場所です。
2. CSSスタイル
body {
background-color: #ffcccb;
text-align: center;
font-family: 'Comic Sans MS', sans-serif;
color: #fff;
}
h1 {
font-size: 3em;
color: #000;
text-shadow: 2px 2px #ff0;
}
button {
font-size: 1.5em;
padding: 10px 20px;
background-color: #00f;
color: #fff;
border: 2px solid #ff0;
border-radius: 10px;
box-shadow: 5px 5px #0ff;
cursor: pointer;
animation: spin 2s infinite linear;
margin: 5px;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
p {
font-size: 2em;
background-color: #0ff;
padding: 20px;
border: 5px dotted #000;
transition: background-color 0.5s, color 0.5s, font-size 0.5s;
}
p:hover {
background-color: #ff0;
color: #00f;
font-size: 2.5em;
}
-
body
: 背景色は淡いピンク色(#ffcccb
)で、全体のテキストは白(#fff
)に設定されています。また、テキストは中央揃えで、フォントは「Comic Sans MS」を使用しています。 -
h1
: アプリケーションのタイトルが大きな文字で表示されます。黒色の文字に黄色の影を付けて、目立つようにしています。 -
button
: ボタンは大きなフォントサイズ(1.5em)で、青色の背景に黄色の境界線、そしてシアン色(#0ff
)のボックスシャドウを使用しています。さらに、ボタンは2秒ごとに回転するアニメーション(@keyframes spin
)を適用しています。 -
p
:p
要素には、シアン色の背景と黒い点線の境界線が設定されています。また、transition
プロパティを使って、ホバー時に色やフォントサイズが滑らかに変化するようになっています。 -
p:hover
:p
要素にカーソルを合わせると、背景色が黄色、文字色が青色に変わり、フォントサイズも少し大きくなります。
3. JavaScriptの動作
ボタンのクリックイベントと色変更
document.getElementById('colorButton1').addEventListener('click', function() {
changeColor('colorText1');
});
document.getElementById('colorButton2').addEventListener('click', function() {
changeColor('colorText2');
});
document.getElementById('colorButton3').addEventListener('click', function() {
changeColor('colorText3');
});
- 各ボタン(
colorButton1
,colorButton2
,colorButton3
)がクリックされると、changeColor
関数が呼び出され、それぞれ対応する<p>
要素(colorText1
,colorText2
,colorText3
)の色と背景色がランダムに変更されます。
ランダムな色を生成する関数
function getRandomColor() {
return '#' + Math.floor(Math.random() * 16777215).toString(16);
}
-
getRandomColor
関数は、16進数のカラーコードをランダムに生成します。Math.random()
を使って0から16777215(#ffffff
に対応する最大値)までの整数を取得し、その整数を16進数に変換しています。
色を変更する関数
function changeColor(elementId) {
var randomColor = getRandomColor();
document.getElementById(elementId).style.backgroundColor = randomColor;
document.getElementById(elementId).style.color = getRandomColor();
document.getElementById(elementId).style.borderColor = getRandomColor();
document.getElementById(elementId).innerText = getRandomColor();
}
-
changeColor
関数は、指定されたelementId
の<p>
要素に対して、背景色、文字色、境界線の色をランダムに変更します。そして、innerText
をランダムなカラーコードで更新します。
ランダムな文字列を表示
setInterval(function() {
document.getElementById('randomText').innerText = Math.random().toString(36).substring(2, 15);
}, 1000);
- このコードは1秒ごとに
randomText
のテキストをランダムな文字列に更新します。Math.random().toString(36)
はランダムな数値を36進数(英数字)に変換して、substring(2, 15)
でランダムな部分文字列を取り出します。
20%の確率でエラーメッセージを表示
if (Math.random() < 0.2) { // 20%の確率でエラーメッセージを表示
document.body.innerHTML = '<h1>エラー: Something went terribly wrong!</h1>';
}
-
Math.random() < 0.2
で20%の確率を生成し、ランダムな確率が20%未満の場合にエラーメッセージ(エラー: Something went terribly wrong!
)を表示します。この場合、ページ全体がエラーメッセージに置き換わります。
まとめ
このHTMLファイルは、ユーザーがボタンをクリックするとテキストの色や背景色がランダムに変わり、1秒ごとにランダムな文字列を表示するアプリです。また、20%の確率でエラーメッセージを表示する機能も組み込まれています。意味不明だろm(__)m