スポンサーリンク
イメージ
コーディング単価
1ページ： 5万円
コード
ディレクトリ構成
MyPortfolio
├ css
│ └ styles.css
├ js
│ └ main.js
├ img
│ ├ ayazjpg
│ ├ stretch.jpg
│ ├ studio.jpg
│ └ training.jpg
└ index.htmlHTML（index.html）
<!DOCTYPE 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>ポートフォリオサイト</title>
<link rel="icon" href="img/favicon.png">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<div class="container">
<div>
<img
src="myimg/ayaz.jpg"
alt="アイコン"
width="120"
height="120"
class="icon">
</div>
<div>
<h1>あざみ あやこ</h1>
<p>健康運動指導士</p>
<ul>
<li>
<a href="https://www.ayazblog.com/">
<img
src="img/blog.png"
alt="ブログアイコン"
width="20"
height="20">
</a>
</li>
<li>
<a href="https://azami-ayako.amebaownd.com/">
<img
src="img/photos.png"
alt="写真アイコン"
width="20"
height="20">
</a>
</li>
</ul>
</div>
</div>
</header>
<main>
<div class="container">
<h1>WORKS<br>― Studio Group Exercise ―</h1>
<section class="animate slide-from-left">
<img
src="myimg/studio.jpg"
alt="スタジオ"
width="400"
height="225">
<h2>FITNESS CLUB ―フィットネスクラブ</h2>
<p>エアロビクス、ステップエクササイズ、筋トレ、ストレッチなどのスタジオグループレッスン</p>
</section>
<section class="animate slide-from-right">
<img
src="myimg/training.jpg"
alt="トレーニング"
width="400"
height="225">
<h2>PUBLIC FACILITY ―公共施設</h2>
<p>日常生活に取り入れられる、姿勢改善や痛みの緩和予防のボディワーク、筋力アップトレーニングやストレッチ、リンパマッサージ、エアロビクスなど</p>
</section>
<section class="animate slide-from-left">
<img
src="myimg/stretch.jpg"
alt="ストレッチ"
width="400"
height="225">
<h2>WELFARE FACILITY ―福祉施設</h2>
<p>高齢者、障がい者向けの軽体操、トレーニング、ストレッチ、音楽に合わせた有酸素運動など、椅子に座ったままでもOK</p>
</section>
</div>
</main>
<footer>
<small>(c) ayako.azami</small>
</footer>
<script src="js/main.js"></script>
</body>
</html>CSS（styles.css）
@charset "utf-8";
/* common */
body {
margin: 0;
}
img {
vertical-align: bottom;
}
h1,
h2,
p {
margin: 0;
}
/* header */
header {
background: #efefef;
}
header .container {
width: 400px;
margin: 0 auto;
display: flex;
align-items: center;
padding: 32px 0;
}
header .container div + div {
margin-left: 32px;
}
header h1 {
font-weight: normal;
font-size: 24px;
}
header ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
header ul li + li {
margin-left: 8px;
}
header .icon {
border-radius: 50%;
}
/* main */
main .container {
width: 400px;
margin: 0 auto;
}
main h1 {
font-size: 24px;
font-weight: normal;
text-align: center;
padding: 60px 0;
}
main h2 {
font-weight: normal;
font-size: 20px;
margin-top: 16px;
}
main p {
line-height: 1.8;
margin-top: 16px;
}
main section + section {
margin-top: 60px;
}
/* footer */
footer {
padding: 60px 0;
text-align: center;
color: #aaa;
}
/* animation */
.animate {
opacity: 0;
transition: opacity .3s, transform .3s;
}
.animate.slide-from-left {
transform: translateX(-40px);
}
.animate.slide-from-right {
transform: translateX(40px);
}
.animate.appear {
opacity: 1;
transform: none;
}
JavaScript（main.js）
'use strict';
{
function callback(entries, obs) {
entries.forEach(entry => {
if (!entry.isIntersecting) {
return;
}
entry.target.classList.add('appear');
obs.unobserve(entry.target);
});
}
const options = {
threshold: 0.2,
};
const observer = new IntersectionObserver(callback, options);
const targets = document.querySelectorAll('.animate');
targets.forEach(target => {
observer.observe(target);
});
}
コメント