<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>学習用HP</title>
<link rel="stylesheet" type="text/css" href="HP.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.slider').bxSlider({
auto: true,
pause: 5000,
});
});
</script>
</head>
<body>
<h1>学習用HP</h1>
<p>背景にも画像を使いたい</p>
<ul class="mainbox">
<li class="box"><a href="">(日本遺産という言葉の詳しい説明のページに飛ぶ)</a></li>
<li class="box"><a href="">（日本遺産の検索エンジンに飛ぶ）</a></li>
<li class="box"><a href="">（）</a></li>
</ul>
<p>(日本遺産という言葉についての簡単な説明)</p>
<p>日本遺産とは、文化庁が認定した、地域の歴史的魅力や特色を通じて日本の文化・伝統を語るストーリーのことである。
世界遺産登録や文化財指定が、いずれも登録・指定される文化財の価値付けを行い,保護を担保することを目的とするものに対し、
日本遺産は、地域に点在する遺産を「面」として活用し,発信することで,地域活性化を図ることを目的としている。</p>
<p>（日本遺産の画像を流す。）</p>
<div class="slider">
<img src="gazou1.jpg" width="500" height="300" alt="">
<img src="gazou2.jpg" width="500" height="300" alt="">
<img src="gazou3.jpg" width="500" height="300" alt="">
<img src="gazou4.jpg" width="500" height="300" alt="">
</div>
（日本遺産の検索エンジン）
<p>折りたたみメニューか</p>
<div class="accordion_box">
<label for="label1">五十音順で並べるか(あ 〜 んまで折りたたみメニューが50個)、都道府県順で並べるか（東北とかで大まかに絞る。折りたたみメニューの中に折りたたみメニューがいる。）</label>
<input type="checkbox" id="label1" class="accordion" />
<div class="accordion_contents">
<p>中身1</p>
</div>
</div>
<p>一気に全部並べて、検索でそこにスクロールorその部分を色付けで強調表示するか</p>
<form action="cgi-bin/example.cgi" method="post">
<p>検索したいキーワードを入力してください。</p>
<input type="search" name="search" placeholder="キーワードを入力">
<input type="submit" name="submit" value="検索">
</form>
<p>それぞれの日本遺産のページに飛ばしたら、そこに写真、説明、VRを置いておく。</p>
</body>
</html>
