jQueryとJavaScriptを使ってWebデザインページを作成しました。

15420 ワード
HTML CSS JavaScript jQuery HTML テキストリンク

jQueryとJavaScriptを使ってWebデザインページを作成しました。
今回はjQueryフレームワークを使いました。（普段はBootStrap派です)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryを使ったアニメーションテスト</title>
</head>
<!-- jQueryを使ったテスト -->    
<script src="jquery.js"></script>    
<script>
//F1タグの色を青に変える    
$(function(){
    $('h1').css('color','blue');
});

//F2タグを消す    
$(function(){
    $('h2').fadeOut();
});

//h4タグの色を変える    
$(function(){
    $('h4').css('color','deeppink');
});

//h5タグの背景を変える    
$(function(){
    $('h5').css('background-color','black');
});

//fuori-classeサイトを別ウィンドウで開く    
function test100(){
    let i = 0;
    while (i< 1){
        window.open('http://www.fuoriclasse2.com/','flora','width=600,height=450');
        i++;
    }
}

//EURO2020のイタリアVSトルコ戦のサイトを別ウィンドウで開く     
function fuoriclasse(){
    let i = 0;
    while (i< 1){
        window.open('http://www.fuoriclasse2.com/cgi-bin/g.cgi?euro&2020&210611','italy vs Turkey','width=600,height=450');
        i++;
    }
}

</script>
<style>
h1 {
   color:red;
   font-size:50px;

}
h2 {
   color:black;
   font-size:40px;
}
.test
{
   color:lawngreen;
   font-size:50px;
   background-color:dimgray;
   text-align: center;
   padding :20px;
   margin: 20px;
   border:solid 10px #8b7348;    
   width:350px;
   height:150px;    
}

.test2 {
    background-color:aliceblue;
    text-align: center;
    color:darkred;
    font-size:80px;
    padding: 100px;
}    
.test3{
   color:indianred;
   font-size:30px;
   background-color:aliceblue;
   text-align: center;
   padding :20px;
   margin: 20px;
   border:solid 10px #b0c100;    
   width:400px;
   height:100px;   
}    
.test4{
   color:#05AB92;
   font-size:20px;
   background-color:whitesmoke;
   text-align: center;
   padding :20px;
   margin: 20px;
   border:solid 5px #cccccc;    
   width:200px;
   height:100px;
}

.test5{
   color:#00FF00;
   font-size:20px;
   background-color:whitesmoke;
   text-align: center;
   padding :20px;
   margin: 20px;
   border:solid 5px #66AA33;    
   width:80px;
   height:50px;
}

.test6{
   color:yellow;
   font-size:20px;
   background-color:darkorchid;
   text-align: center;
   padding :20px;
   margin: 20px;
   border:solid 5px #66AA33;    
   width:200px;
   height:100px;
}

.test7{
   color:black;
   font-size:18px;
   background-color:white;
   text-align: center;
   padding :20px;
   margin: 20px;
   border:solid 5px #66AA33;    
   width:200px;
   height:100px;
}




</style>        

<body>
<h1 class="test">jQueryのテスト</h1>

<h2 class="test2">この部分は消えます</h2>
<h3 class="test3" >I will move to Osaka at next year.</h3>
<h4 class="test4">大阪で頑張るぞー</h4>
<h5 class="test5">以上報告でした</h5>

<br>
<a class="test6" onclick=test100()>株式会社fuori-classe</a>
<br>
<br>
<br>
<br>
<br>    
<a class="test7" onclick=fuoriclasse()>EURO2020の試合結果が出てるぞ</a>    
<br>    
</body>

完成したWebページです