index.html
<body id="top"> <header> <h1>Ristorante Felica</h1> </header> <nav class="g-nav"> <ul> <li><a href="#movie">Movie</a></li> <li><a href="#gallery-box">Gallery</a></li> <li><a href="#access">Access</a></li> <li><a href="#news">News</a></li> <li><a href="#calendar">Calendar</a></li> <li><a href="#form" class="notscroll">Form</a></li> </ul> </nav> <div class="main"> <div id="movie"> <h2>movie</h2> <div class="movie-wrapper"> <iframe id="ytube" src="https://www.youtube.com/embed/_RTMLn7rDRw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> </div><!--/#movie--> <div id="gallery-box"> <h2>Gallery</h2> <ul class="modal"> <li><a data-fancybox="gallery" href="img/01.jpg"><img src="img/01-t.jpg" alt=""></a></li> <li><a data-fancybox="gallery" href="img/02.jpg"><img src="img/02-t.jpg" alt=""></a></li> <li><a data-fancybox="gallery" href="img/03.jpg"><img src="img/03-t.jpg" alt=""></a></li> <li><a data-fancybox="gallery" href="https://www.youtube.com/watch?v=b7FNvq11CEw"><img src="img/04-t.jpg" alt=""></a></li> </ul> </div><!--/#gallery--> <div id="access"> <h2>Access</h2> <div class="map-wrapper"> <iframe id="g-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3238.9298234452785!2d139.71221001511282!3d35.72794438018346!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d68f6cfe057%3A0xddd17dcd7ecaf745!2z5Y2X5rGg6KKL5YWs5ZyS!5e0!3m2!1sja!2sjp!4v1566276137435!5m2!1sja!2sjp" frameborder="0" style="border:0" allowfullscreen></iframe> </div> </div><!--/#access--> <div id="news"> <h2>News release</h2> <dl > <dt>2019/08/20</dt><dd>ニュース3</dd> <dt>2019/08/18</dt><dd>ニュース2</dd> <dt>2019/08/16</dt><dd>ニュース1</dd> </dl> <div class="sns-wrapper"> <div class="tw"> <h3>Twitter</h3> <div class="tw-inner"> <a class="twitter-timeline" data-width="300" data-height="500" data-theme="light" data-link-color="#2B7BB9" href="https://twitter.com/seiburailway?ref_src=twsrc%5Etfw">Tweets by seiburailway</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </div> </div><!--/.tw--> <div class="fa"> <h3>Face book</h3> <div class="fa-inner"> <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Faremokoremo.pj.seiburailway%2F&tabs=timeline&width=300&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=false&appId" width="300" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe> </div> </div><!--/.fa--> </div><!--/.sns-wrapper--> </div><!--/#news--> <div id="calendar"> <h2>Calendar</h2> <div class="calendar-wrapper"> <iframe id="g-calendar" src="" style="border-width:0" frameborder="0" scrolling="no"></iframe> </div> </div><!--/#calendar--> <div id="form"> <h2>お問い合わせフォーム</h2> <div class="form-wrapper"> <iframe id="g-form" src="" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe> </div> </div><!--/#form--> </div><!--/.main--> <p id="to-top"><a href="#top"><img src="img/to-top.svg" alt=""></a></p> <footer></footer> </body>
@charset "utf-8"; /* CSS Document */ :root { --main-color:#E56B0D; } リセット部分 header { width:100%; height:calc(100vh - 60px); background:url(../img/main.jpg) no-repeat center center/cover; } h1 { font-family: 'Questrial', sans-serif; font-size:80px; color:#FFF; padding:100px 0 0 40px; } .g-nav { width:100%; height:60px; background:#FFF; position:sticky;/*指定した場所に来たらfixedの指定が有効になる*/ top:0; } .g-nav.scroll { box-shadow:0 5px 10px #777; } .g-nav>ul { display:flex; justify-content:center; } .g-nav li { margin: 0 10px; } .g-nav a { display:block; padding:0 30px; line-height:60px; text-align:center; font-weight:bold; font-size:18px; color:var(--main-color); } .g-nav a:hover { color:#E9C279; } /*動画部分*/ h2 { text-align:center; color:var(--main-color); padding:100px 0 20px; font-size:40px; font-family: 'Questrial', sans-serif; } #movie { margin-bottom:100px; } .movie-wrapper { max-width:800px; height:450px; margin:0 auto; } #ytube { width:100%; height:100%; } /*ギャラリー部分*/ .modal { max-width:1230px; display:flex; justify-content:space-between; margin:0 auto; } /*アクセス部分*/ .map-wrapper { width:100%; height:400px; margin-bottom:100px; } #g-map { width:100%; height:100%; } /*ニュース部分*/ #news dl { max-width:800px; margin:0 auto 100px; } #news dt { float:left; margin-bottom:10px; padding-left:10px; font-weight:bold; } #news dd { padding-left:8em; margin-bottom:10px; border-bottom: 1px solid var(--main-color); padding-bottom:10px; } /*sns部分*/ .sns-wrapper { display:flex; justify-content:space-around; max-width:960px; margin:0 auto 100px; } .sns-wrapper h3 { text-align:center; font-size:28px; color:var(--main-color); } /*カレンダー部分*/ .calendar-wrapper { width:800px; height:500px; margin: 0 auto 100px; } #g-calendar { width:100%; height:100%; } /*お問い合わせフォーム部分*/ .form-wrapper { max-width:800px; margin:0 auto 100px; } #g-form { width:100%; height:940px; } /*トップに戻るボタン*/ #to-top { width:50px; height:50px; position:fixed; right:30px; bottom:30px; z-index:1000; }
jquery部分
$(function(){ //hrefの中の頭が#のa要素をクリックしたら //.notは除外する $('a[href^="#"]').not('a.notscroll').on('click',function(){ //それぞれの行き先を取得して変数hrefに代入する var href = $(this).attr('href'); console.log(href); var target = $(href); //止まる位置の指定 var position = target.offset().top -70; //スムーススクロールの指定 $('body,html').animate({scrollTop:position},300,'swing'); return false; }); //ボタンの表示・非表示と.g-navのスタイルの切り替え var h = $('header').outerHeight(); $('#to-top').hide(); $(window).scroll(function() { //もしwindow(画面)をbody要素のtopから600px以上scrollしたら、 if($(window).scrollTop()>h){ $('#to-top').fadeIn(); $('.g-nav').addClass('scroll'); }else{ //それ以外(スクロールが600px未満だったら)の場合 $('#to-top').fadeOut(); $('.g-nav').removeClass('scroll'); } }); });
