jQueryを使った企業の宣伝サンプルWebページを作成いたしました。
<!DOCTYPE html>
<!-- 作成者 乃木坂好きのITエンジニア -->
<!-- 作成日 2021/6/20 -->
<html lang="ja">
<head>
<meta charset="utf-8">
<title>アニメーション2</title>
</head>
<script src="jquery.js"></script>
<script>
$(function(){
$('h1').click(function(){
$('h1').css('color','blue');
});
});
$(function(){
$('h2').click(function(){
$('h2').css('background-color','yellow');
});
});
$(function(){
$('h3').click(function(){
$('h3').css('color','black');
$('h3').css('background-color','aqua');
});
});
$(function(){
$('h5').click(function(){
$('h5').css('color','black');
$('h5').css('background-color','lightgreen');
});
});
$(function(){
for(var num=0;num<10;num++){
$('h6').fadeOut();
$('h6').fadeIn();
}
});
function fuori(){
let i = 0;
while (i< 1){
window.open('http://www.fuoriclasse2.com','flora','width=480,height=360');
i++;
}
}
</script>
<style>
.euro2020 {
color:red;
font-size:80px;
text-align:center;
padding:120px;
}
.fra {
color:black;
font-size:70px;
text-align: center;
padding:100px;
}
.esp
{
color:lawngreen;
font-size:50px;
text-align: center;
color:darkred;
padding: 100px;
}
.por {
background-color:lightgreen;
text-align: center;
color:darkred;
font-size:50px;
padding: 100px;
}
.freestyle1 {
background-color:floralwhite;
text-align: center;
color:mediumvioletred;
font-size:50px;
padding: 100px;
}
.fuori {
background-color:lightgreen;
text-align: center;
border: 1px solid #b7a077;
border-radius: 5px;
color:deeppink;
font-size:40px;
padding: 50px;
float:right;
}
#aono1 {
font-size:50px;
color:red;
background-color:aquamarine;
text-align: center;
padding:200px;
}
.aono2 {
font-size:10px;
color:blue;
}
</style>
<body>
<h1 class="euro2020">EURO2020開催中</h1>
<h2 class="fra">フランスがやらかした</h2>
<h3 class="esp" >スペインもやらかした</h3>
<h4 class="por">ポルトガル・・・・</h4>
<h5 id="aono1" onLoad="tm()"><img src="aono.jpg" alt="ダークヒーロー青野" width="800",height="600" ><br><br>フリースタイル社長の<span>青野豪淑</span>です</h5>
<h6 class="freestyle1">フリースタイルはサッカーゲームを作ります。<br>fuori-classeの皆さん期待してください</h6>
<br>
<a class="fuori" onclick=fuori()>fuori-classe</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
<footer>
<small class="aono2">© 青野豪淑</small>
</footer>
jQueryの機能を使うとタグの文字を変えたり、タグ部分の背景色を変えたり、for文で文字の表示、非表示が出来ます。動的にWebページが出来て便利です。