webサイト制作の勉強|2020年4月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。フェリカテクニカルアカデミーは池袋にある求職者支援訓練の学校です。

シングルページの作成

f:id:yachin29:20170209004414j:plain

今回はクライアントワークに向けて、より実践的な内容のシングルページを作成していきます。

今回の制作のポイント
  • トップはヒーローヘッダーで複数枚をスライド(フェード)で切り替え
  • ナビゲーションはある程度スクロールしたら固定
  • SNSの埋め込み
  • googleマップの埋め込み
  • 複数のjQueryプラグインの導入

などなど

参考サイト

http://racines-park.com/


index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>レストランサイト01</title>
<link href="https://fonts.googleapis.com/css2?family=Krona+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/lightbox.css">

</head>
<body>
<header>
<h1>Dish Dream</h1>
</header>
<nav class="g-nav">
<ul>
<li><a href="#youtube">YouTube</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#sns">SNS</a></li>
<li><a href="#information">Information</a></li>
<li><a href="#form">Form</a></li>
</ul>
</nav>
<div class="box" id="youtube">
<h2>YouTube</h2>
<div class="yt-inner">
<iframe class="yt-video" src="https://www.youtube.com/embed/Hx-SQ_aCuQ8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div><!-- /.yt-inner -->
</div><!-- /#youtube -->
<div class="box" id="menu">
<h2>Menu</h2>
<div class="tab-wrapper">
<ul id="tab-btn">
<li class="current"><a class="notscroll" href="#lunch">ランチメニュー</a></li>
<li><a class="notscroll" href="#dinner">ディナーメニュー</a></li>
<li><a class="notscroll" href="#drink">ドリンクメニュー</a></li>
</ul>
<div class="tab-box current" id="lunch">
<h3>ランチメニュー</h3>
</div>
<div class="tab-box" id="dinner">
<h3>ディナーメニュー</h3>
</div>
<div class="tab-box" id="drink">
<h3>ドリンクメニュー</h3>
</div>
</div>
</div><!-- /#menu -->
<div class="box" id="gallery">
<h2>Gallery</h2>
<ul class="gallery-wrapper">
<li><a href="img/01.jpg" data-lightbox="gallery" data-title="写真の説明文"><img src="img/01.jpg" alt=""></a></li>

<li><a href="img/02.jpg" data-lightbox="gallery"><img src="img/02.jpg" alt=""></a></li>
<li><a href="img/03.jpg" data-lightbox="gallery"><img src="img/03.jpg" alt=""></a></li>
</ul>
</div><!-- /#gallery -->
<div class="box" id="sns">
<h2>SNS</h2>

<div class="sns-wrapper">
<div class="tw">
<h3>Twitter</h3>
<div class="tw-box">
<a class="twitter-timeline" data-width="300" data-height="500" data-theme="light" 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><!-- .tw-box -->
</div><!-- /.tw -->
<div class="fb">
<h3>Facebook</h3>
<div class="fb-box">
</div><!-- /.fb-box -->
</div><!-- /.fb -->
</div><!-- /.sns-wrapper -->
</div><!-- /#sns -->
<div class="box" id="information">
<h2>Information</h2>
<dl id="list">
</dl>
</div><!-- /#information -->
<div class="box" id="form">
<h2>Form</h2>
<div class="g-form">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfywbBQx0S7WUEMfqbWZGu02j8XIrSP4AJzCoG11hNLpunNVA/viewform?embedded=true" width="640" height="1000" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>
</div><!-- /.g-form -->
</div><!-- /#form -->

<footer>
<p><small>&copy; Dish Dream 2010-<span id="thisYear"></span></small></p>
</footer>

<p id="btn"><a href="#"><img src="img/to-top.svg" alt=""></a></p>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/script.js"></script>
<script src="js/lightbox.js"></script>
</body>
</html>


style.css

@charset "utf-8";

:root{
--main_color:#3e9337;
}

/* ress.css • v1.2.2
 * MIT License
 * github.com/filipelinhares/ress
 */html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0;box-sizing:border-box}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}.wrapper{overflow:hidden;}body{overflow-y:scroll;}

/* pcレイアウト */

header{
width: 100%;
height:calc(100vh - 50px);
background: url(../img/bg.jpg)no-repeat center center/cover;
}
h1{
font-family: 'Krona One', sans-serif;
color: #FFF;
font-size: 80px;
text-align: center;
padding-top:200px;
text-shadow: 0 0 10px #000;
}
.g-nav{
width: 100%;
height: 50px;
position: sticky;/* 指定した位置に来たら固定 */
top: 0;
margin-bottom: 60px;
background-color: #FFF;
z-index: 100;
}
.g-nav.scroll{
box-shadow: 0 10px 10px #CCC;
}

.g-nav>ul{
display: flex;
justify-content: center;
}
.g-nav li{
height: 50px;
margin: 0 10px;
}
.g-nav a{
display: block;
line-height: 50px;
color: var(--main_color);
font-weight: bold;
padding: 0 10px;
}
.g-nav a:hover{
opacity: 0.7;
}

.box{
width: 100%;
}
h2{
color: var(--main_color);
font-size: 30px;
text-align: center;
margin-bottom:50px;
}
/* youtube部分 */
.yt-inner{
max-width:960px;
height: 500px;
margin: 0 auto 100px;
}
.yt-video{
width: 100%;
height: 100%;
}

/* menu部分 */
.tab-wrapper{
max-width: 960px;
margin: 0 auto 100px;
background: var(--main_color);
padding: 10px;
box-sizing: border-box;
}
#tab-btn{
display: flex;
width: 50%;
height: 60px;
}
#tab-btn>li{
width: 33.33%;
}
#tab-btn a{
display: block;
text-align: center;
line-height: 60px;
color: #222;
background-color:#DDD;
}
#tab-btn>li:nth-of-type(-n+2)>a{
border-right: 2px solid var(--main_color);
}
#tab-btn>li.current>a{
background-color:#FFF;
color:var(--main_color);
}
.tab-box{
background: #FFF;
padding: 10px;
height: 400px;
display: none;
}
.tab-box.current{
display: block;
}
.tab-box>h3{
color:var(--main_color);
text-align: center;
padding: 40px 0;
}
/* gallery部分 */
.gallery-wrapper{
max-width: 1200px;
margin: 0 auto 100px;
display:flex;
justify-content:space-between;
}
.gallery-wrapper>li{
width: 32%;
}
.gallery-wrapper img{
max-width: 100%;
}
.gallery-wrapper img:hover{
opacity: 0.7;
transition: 0.2s;
}

/* SNS部分 */
.sns-wrapper{
width: 720px;
margin: 0 auto 100px;
display:flex;
justify-content: space-between;
}
.sns-wrapper h3{
text-align: center;
color: var(--main_color);
margin-bottom: 20px;
font-size: 24px;
}

/* 新着情報部分 */
#list{
max-width: 600px;
margin: 0 auto 100px;
display: flex;
flex-wrap: wrap;
}
#list>dt{
width: 25%;
padding: 10px;
margin-bottom: 10px;
font-weight: bold;
color: var(--main_color);
border-bottom: 1px solid var(--main_color);
}
#list>dd{
width: 75%;
padding: 10px;
margin-bottom: 10px;
border-bottom: 1px solid var(--main_color);
}
#list>dt:nth-of-type(n+5),#list>dd:nth-of-type(n+5) {
display: none;
}



/* google-form */
.g-form{
width: 640px;
margin: 0 auto 100px;
}

footer{
width: 100%;
height: 100px;
background:var(--main_color);
color: #FFF;
}
footer>p{
text-align: center;
line-height: 100px;
}

/* トップに戻るボタン */
#btn{
width: 60px;
height: 60px;
position: fixed;
bottom: 40px;
right: 40px;
display: none;
}
#btn.scroll{
display: block;
}


script.js

var date = new Date();
var myYear = date.getFullYear();

document.getElementById('thisYear').innerHTML = myYear;

$(function(){
//外部ファイルの呼び出し
$('#list').load('list.txt');

//タブパネル
$('#tab-btn a').on('click',function(){
$(this).parent('li').addClass('current').siblings('li').removeClass('current');

var a=$(this).attr('href');
$(a).addClass('current').siblings('.tab-box').removeClass('current');
//a要素の動きを制限する
return false;
});

//スクロールしたら

//header要素の高さを取得、変数に代入
var h=$('header').outerHeight();
console.log(h);

$(window).scroll(function(){
//scrollTopを使ってスクロール量を取得する
var a=$('html,body').scrollTop();
console.log(a);
//if文を使って変数aがheaderの高さ以上になったら#btnに.scrollをadd
if(a>=h){
$('#btn,.g-nav').addClass('scroll');
}else{
//#btnについてる.scrollをremove
$('#btn,.g-nav').removeClass('scroll');
}
});

//スムーススクロール
// #で始まるアンカーをクリックした場合に処理
$('a[href^="#"]').not('a.notscroll').on('click',function() {
  
// 移動先を取得
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先を数値で取得
var position = target.offset().top - 80;
// スムーススクロール
$('body,html').animate({scrollTop:position});
});

});