jQueryを使った企業の宣伝サンプルWebページ #JavaScript

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">&copy; 青野豪淑</small>
</footer>

jQueryの機能を使うとタグの文字を変えたり、タグ部分の背景色を変えたり、for文で文字の表示、非表示が出来ます。動的にWebページが出来て便利です。