1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

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ページが出来て便利です。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?