Newer
Older
testpage / test.html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="test.css">
        <link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet">
    <script src="https://vjs.zencdn.net/7.15.4/video.js"></script> 
        <title>遊佐町の伝統芸能まとめ</title>
    </head>

    <body>
        <!-- header -->
        <header id="header">
            <h1 class="site-title">
                <a href="#">遊佐町の伝統芸能まとめ</a>
            </h1>
            <nav>
                <ul>
                    <li><a href="#first">first</a></li>
                    <li><a href="#second">second</a></li>
                    <li><a href="#third">third</a></li>
                    <li><a href="#fourth">fourth</a></li>

                </ul>
               
            </nav>
        </header>

        <!-- Map -->
        <section class="wrapper">
            <iframe width="100%" height="300px" frameborder="0" allowfullscreen src="//umap.osm.ch/ja/map/map_5764?scaleControl=false&miniMap=false&scrollWheelZoom=false&zoomControl=true&allowEdit=false&moreControl=true&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=true&onLoadPanel=undefined&captionBar=false"></iframe><p><a href="//umap.osm.ch/ja/map/map_5764">フルスクリーン表示</a></p>
        </section>
        
    <li style="text-align:center">こちらは遊佐町の伝統芸能についてまとめているサイトです。</li>
    <li style="text-align:center">映像は使用しても良いと言っていただいた映像を使用しております。</li>
    
  
        <!-- first -->
        <section id="first" class="wrapper">
            <h2 class="sec-title">蕨岡延年の舞</h2>
            <div class="flexbox"></div>
                <ul>
                	<video-js 
        id="video1"
        class="video-js vjs-big-play-centered"
        controls 
        height="360" 
        width="640"
        preload="none"
        data-setup='{}'>
        <!-- muted poster="./xxx.png" -->
        
        <source src="https://kd2.koeki-prj.org/index.php/s/K8rNW6pRQ9ZfaSB/download" type="video/mp4" />
    </video-js> 
         <li>蕨岡延年の舞は毎年5月3日に大物忌神社蕨岡口の宮で奉納されています。</li>
         <li>山形県指定無形民俗文化財に指定されています。</li>
         <li>映像には子供の舞が1種類しか舞われていないが本来は2種類あります。</li>
         <li>大人の演目を含めると本来はもっと種類があるそうです。</li>
         <li>運営をしている方の話をお聞きすると、</li>
         <li>「児童数も大人の数も減少していて困っている。今後もっと舞うことができる演目が減少しないように全力を尽くしている。」</li>
         <li>とのことです。舞を受け継いでいくのは年々難しくなっています。</li>
                </ul>
            </div>
        </section>

        <!-- second -->
        <section id="second" class="wrapper">
            <h2 class="sec-title">杉沢比山</h2>
            <div class="flexbox">
                <ul>
                	 <video-js 
        id="video1"
        class="video-js vjs-big-play-centered"
        controls 
        height="360" 
        width="640"
        preload="none"
        data-setup='{}'>
        <!-- muted poster="./xxx.png" -->
       
         <source src="https://kd2.koeki-prj.org/index.php/s/n22t88dzwcd3m9q/download" type="video/mp4" />
    </video-js> 
         <li>杉沢比山は8月6日・15日・20日に杉沢熊野神社で奉納されています。</li>
         <li>国指定重要無形民俗文化財に指定されています。ですが年々演舞者が減少しています。</li>
         <li>児童が舞う演目はすべて舞われているようです。写真は役場の方からいただいて、今年舞われた舞だけでなくたくさんの舞をいただきました。</li>
         <li>私の学校にも舞を舞った方がいました。</li>
         <li>その方は「自分で舞を途絶えさせないようにしたい。」と言っていました。</li>
                </ul>
            </div>
        </section>

        <!-- third -->
        <section id="third" class="wrapper">
            <h2 class="sec-title">アマハゲ</h2>
            <div class="flexbox">
                <div><img src="hiking.jpg" alt=""></div>
                <ul>
         <li>アマハゲは1月1日に滝ノ浦地区で1月3日に女鹿地区で1月6日に鳥崎地区で行われている行事です。</li>
         <li>国指定重要無形民俗文化財に指定されています。</li>
         <li>鬼や翁の面をかぶった人々が家々を回り、子供達が怠けないようにいさめたりお年寄りの方々の長寿を願います。</li>
         <li>面は各地区で違いがあるのでぜひ現地に行って確かめて見てください。</li>
         <li>鳥崎地区では家々を回ったあとに行われる「鳥追い」というものも見ることができます。</li>
         <li></li>
                </ul>
            </div>
        </section>


        <!-- fourth -->
        <section id="fourth" class="wrapper">
            <h2 class="sec-title">吹浦田楽舞</h2>
            <div class="flexbox">
                <ul>
                	  <video-js 
        id="video1"
        class="video-js vjs-big-play-centered"
        controls 
        height="360" 
        width="640"
        preload="none"
        data-setup='{}'>
        <!-- muted poster="./xxx.png" -->
       
         <source src="https://kd2.koeki-prj.org/index.php/s/2QNbxnmKs5Tak3w/download" type="video/mp4" />
    </video-js> 
         <li>吹浦田楽舞は5月5日に鳥海山大物忌神社吹浦口ノ宮で行われています。</li>
         <li>全部で舞は7曲あり、その中でも「花笠舞」が田楽と呼ばれています。</li>         
         <li>花笠をかぶり鳥海山大物忌神社吹浦口ノ宮を出発し前方にある道を練り歩きます。</li>
         <li>服装は花笠・裁着袴・足袋・草履などを着ます。</li>
         <li>舞が終わると演舞者は笠を投げ、観客はその花を取り合います。</li>
         <li>その花を取り、五穀豊穣を願います。</li>
                </ul>
            </div>
        </section>
    </body>
</html>