index.html
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="100~120文字くらいでサイトの説明文を入れる(想定している検索キーワードを文の最初に入れる)">
<title>Portfolio</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
</head>
<body id="top">
<header>
<div class="header-inner">
<h1>
<span>P</span>
<span>O</span>
<span>R</span>
<span>T</span>
<span>F</span>
<span>O</span>
<span>L</span>
<span>I</span>
<span>O</span>
</h1>
</div>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non iusto aspernatur excepturi tenetur architecto corporis obcaecati? Libero consectetur aspernatur delectus.</p>
</header>
<div class="nav-wrapper">
<h2>FELICA</h2>
<nav id="g-nav">
<ul>
<li><a href="#top">Top</a></li>
<li><a href="#concept">Concept</a></li>
<li><a href="#works">Works</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</div>
<main>
<div id="concept" class="content">
<h2>Concept</h2>
</div>
<div id="works" class="content">
<h2>Works</h2>
<div class="main-works-wrapper">
<div class="main-works-box">
<a href="javascript:;" data-fancybox data-type="iframe" data-src="works-01/index.html"><img src="img/works01.jpg" alt=""></a>
</div>
<div class="main-works-box">
<a href="javascript:;" data-fancybox data-type="iframe" data-src="works-02/index.html"><img src="img/works02.jpg" alt=""></a>
</div>
</div>
</div>
<div id="about" class="content">
<h2>About</h2>
</div>
</main>
<a href="#" id="to-top"><img src="img/to-top.svg" alt=""></a>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script src="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<script>
$(function(){
$('#to-top').on('click',function(){
$('html,body').animate({scrollTop:0},200);
return false;
});
$('#g-nav a').on('click',function(){
const target = $(this).attr('href');
console.log(target);
const target2 = $(target);
console.log(target2);
const y = target2.offset().top;
console.log(y);
$('html,body').animate({scrollTop:y},300);
});
});
</script>
</body>
</html>
作品ページ
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>作品ページ01</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div class="work-wrapper">
<div class="work-txt">
<h1>作品名</h1>
<p>作品の簡単な説明文</p>
<div class="work-inner">
<div class="work-list">
<h2 class="heading11" data-number="01">作業時間</h2>
<p>画像制作：1時間</p>
</div>
<div class="work-list">
<h2 class="heading11" data-number="02">使用言語</h2>
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
</div>
</div>
<div class="work-list">
<h2 class="heading11" data-number="03">ポイント</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et molestiae, officiis eaque quae quidem impedit officia maiores in sit vitae.</p>
</div>
<button class="work-btn"><a href="http://felica29.starfree.jp/column-layout/" target="_blank">作品へ</a></button>
</div>
<div class="work-photo">
<img src="../img/works01.jpg" alt="">
</div>
</div>
</body>
</html>
スタイルシート
@charset "utf-8";
html{box-sizing:border-box;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;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]{appearance:textfield}[type=search]::search-cancel-button,[type=search]::search-decoration{appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::focus-inner,[type=reset]::focus-inner,[type=submit]::focus-inner,button::focus-inner{border-style:0;padding:0}[type=button]::focus-inner,[type=reset]::focus-inner,[type=submit]::focus-inner,button:focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{appearance:none;appearance:none}select::expand{display:none}select::value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::file-upload-button{appearance:button;font:inherit}[type=search]{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}::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;}img{max-width: 100%;}
.header-inner{
width: 100%;
height: 70vh;
background-color: #f5e0d1;
display: flex;
justify-content: center;
align-items: center;
}
@keyframes bg-color{
0%{background-color: #f5e0d1;}
25%{background-color: #134492;}
50%{background-color: #d40b3d;}
75%{background-color: #d36516;}
100%{background-color: #f5e0d1;}
}
h1{
font-family: 'Josefin Sans', sans-serif;
font-size: 120px;
display: flex;
overflow: hidden;
}
h1>span{
display: block;
transform: translateY(120%);
animation: txt-anime 0.5s 0.5s forwards;
}
@keyframes txt-anime{
0%{transform: translateY(120%);}
100%{transform: translateY(0);}
}
h1>span:nth-of-type(2){
animation: txt-anime 0.5s 0.6s forwards;
}
h1>span:nth-of-type(3){
animation: txt-anime 0.5s 0.7s forwards;
}
h1>span:nth-of-type(4){
animation: txt-anime 0.5s 0.8s forwards;
}
h1>span:nth-of-type(5){
animation: txt-anime 0.5s 0.9s forwards;
}
h1>span:nth-of-type(6){
animation: txt-anime 0.5s 1.0s forwards;
}
h1>span:nth-of-type(7){
animation: txt-anime 0.5s 1.1s forwards;
}
h1>span:nth-of-type(8){
animation: txt-anime 0.5s 1.2s forwards;
}
h1>span:nth-of-type(9){
animation: txt-anime 0.5s 1.3s forwards;
}
.lead{
width: 50%;
font-size: 18px;
line-height: 1.8;
margin: 40px auto;
}
.nav-wrapper{
width: 100%;
height: 80px;
background-color: #FFF;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 40px;
position: fixed;
top: 0;
left: 0;
}
#g-nav{
width: 50%;
}
#g-nav>ul{
display: flex;
justify-content: center;
}
#g-nav li{
margin: 0 30px;
}
#g-nav a{
color:#222;
padding: 20px 30px;
}
#g-nav a:hover{
text-decoration: underline 3px #bd0f3a;
text-underline-offset: 3px;
}
.content{
height: 100vh;
padding-top: 100px;
}
.content>h2{
text-align: center;
font-size: 40px;
}
.main-works-wrapper{
max-width: 1080px;
margin: 50px auto 100px;
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.main-works-box{
width: calc((100% - 40px) / 3);
box-shadow: 0 0 10px #909090;
}
#to-top{
display: block;
width: 40px;
position: fixed;
right: 50px;
bottom: 50px;
}
.work-wrapper{
display: flex;
max-width: 1200px;
margin: 30px auto 0;
padding: 0 10px;
}
.work-txt>h1{
font-size: 40px;
text-align: center;
align-items: center;
margin: 30px 0 10px;
}
.work-txt>h1::before,
.work-txt>h1::after {
content: '';
width: 70px;
height: 4px;
background-color: #bd0f3a;
}
.work-txt>h1::before {
margin-right: 20px;
}
.work-txt>h1::after {
margin-left: 20px;
}
.work-inner{
display: flex;
}
.work-inner>.work-list{
margin-right: 40px;
}
.work-list{
margin: 20px 0;
}
.work-list>h2{
font-size: 28px;
}
.heading11 {
position: relative;
font-size: 26px;
}
.heading11::before {
content: attr(data-number);
display: block;
color: #bd0f3a;
font-size: 28px;
margin-bottom: 10px;
}
.heading11::after {
content: '';
position: absolute;
top: 32px;
left: 0;
width: 100px;
height: 2px;
background-color: #bd0f3a;
}
.work-btn{
display: block;
width: 240px;
margin: 50px auto;
}
.work-btn a {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 auto;
padding: 0.6em 2em;
width: 100%;
color: #175d7a;
font-size: 18px;
font-weight: 700;
border: 2px solid #175d7a;
}
.work-btn a::after {
content: '';
width: 5px;
height: 5px;
border-top: 3px solid #175d7a;
border-right: 3px solid #175d7a;
transform: rotate(45deg);
}
.work-btn a:hover {
color: #333333;
text-decoration: none;
background-color: #a0c4d3;
}
.work-btn a:hover::after {
border-top: 3px solid #333333;
border-right: 3px solid #333333;
}
