<!doctype html>
<html lang="ja">
<head>
<meta http-equiv="content-type" charset="utf-8">
<meta name="viewport" container="width=device-width">
<link rel="stylesheet" type"text/css" href="otamesi.css">
<title>ローディング画面</title>
<!--jQueryのコードの読み込み？-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--jQueryのコードの読み込みの直後に記入しないとダメ？-->
<script>
//$(function(){...})=HTMLの読み込みが全て完了した後に中身を実行
$(function() {
//var h = $(window).height(); =jQueryで、ウィンドウの高さを取得する？
var h = $(window).height();
$('#loader-bg ,#loader').height(h).css('display','block');
});
$(window).load(function () { //すべての読み込みが完了したら実行
//delay(1000)で1秒間動作の停止。
//HTML要素.fadeOut( 時間(ミリ秒) )でHTML要素を少しずつアニメーションさせながら非表示にすることができるメソッド
$('#loader-bg').delay(900).fadeOut(800);
$('#loader').delay(600).fadeOut(300);
});
//5秒たったら強制的にロード画面を非表示
$(function(){
//setTimeout…一定時間後に特定の処理をおこなう（繰り返さずに一度だけ）
setTimeout('stopload()',5000);
});
function stopload(){
$('#loader-bg').delay(900).fadeOut(800);
$('#loader').delay(600).fadeOut(300);
}
</script>
<!--jQueryの動きはここまで-->
</head>
<body>
<!--ロード画面の表示-->
<div id="loader-bg">
<div id="loader">
<img src="aiu.gif" width="80" height="80" alt="Now Loading..." />
<p>Now Loading...</p>
</div>
</div>
<!--ロード後の表示-->
<header>
<img src="title.PNG" alt="Silk Re:road" class="title">
</header>
<p class="center"><img id="image" src="inu.png" alt="犬"></P>
<div class="inner" id="text">
シナリオが表示されます。
</div>
<div class="box"><img id="back_image" alt="背景画像"></div>
<button class="migisita" id="nextP"><img src="next_sample.PNG" width="150px" alt="次へ"></button>
<button class="hidarisita" id="backP"><img src="back_sample.PNG" width="150px" alt="前へ"></button>
<!--ロード後の表示はここまで-->
<script>
</script>
</body>
</html>
fuga sakurai