Part4：CSSで見た目を整えよう ポートフォリオコーディング
Part3ではHTMLでポートフォリオの基本構造を作成しました。今回はそのHTMLにCSSを加えて、デザインカンプに近づけていきます。CSSによるスタイルの調整は、情報の伝わりやすさ、視認性、操作性を向上させる大切なステップです。使用しているCSSファイルの構成をもとに、重要なポイントを丁寧に解説していきます。
目次
サンプルコード HTML+CSS
以下は、HTMLにダミー画像を入れたサンプルコードです。画像は、kobeyaLabのダミー画像ジェネレーターを使っています
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- BaseMeta -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="○○のポートフォリオサイト">
<title>Portfolio</title>
<!-- googlefonts -->
<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=Poiret+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap" rel="stylesheet">
<!-- BootstrapCDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<!-- CSS -->
<link rel="stylesheet" href="css/style.css">
</head>
<body id="top">
<header class="header">
<div class="container">
<div class="header__top">
<h1 class="text-center mb-3">
<a href="index.html#top">
<img src="https://dummy.kobeya.com/?width=220&height=60&bg=e8e8e8&color=000000&text=Logo"
alt="Portfolio">
</a>
</h1>
<nav class="header__nav menu">
<ul class="header__list">
<li class="header__list-item"><a href="index.html" class="header__link">Home</a></li>
<li class="header__list-item"><a href="#works_brandig" class="header__link">Worlks Branding</a>
</li>
<li class="header__list-item"><a href="#works_banner" class="header__link">Works Banner</a></li>
<li class="header__list-item"><a href="#skills" class="header__link">Skills</a></li>
<li class="header__list-item"><a href="#profile" class="header__link">Profile</a></li>
<li class="header__list-item"><a href="#contact" class="header__link">Contact</a></li>
</ul>
</nav>
</div>
</div>
</header>
<figure class="container px-0 text-md-center mt-3 mb-5">
<div class="kv"></div>
<figcaption class="kv_content">
<p>クライアント様の ビジョンを最大限に活かし、デザイン・サイト制作を行います。</p>
<p>視認性・操作性を考慮した 高品質なUI/UX設計 で、使いやすく美しいウェブサイトを構築。</p>
<p>将来の拡張性や運用のしやすさも重視 し、最適なソリューションを提供します。</p>
</figcaption>
</figure>
<section id="works_brandig" class="works_lp container-fluid">
<div class="works__container container">
<div class="section_title">
<h2 class="works__title">Works</h2>
<p>Branding</p>
</div>
<div class="works_un row mb-5">
<div class="col-12 col-md-6 mb-4">
<img src="https://dummy.kobeya.com/?width=500&height=300&bg=fdcece&color=000000&text=No%20image"
alt="No image（500×300）" class="img-fluid">
</div>
<div class="col-12 col-md-6">
<div class="concept mb-3">
<h3>アンバンブル</h3>
<h4>Concept</h4>
<p class="mb-4">
新鮮な野菜をメインにした、新しいスタイルのハンバーガーショップが広尾にOPEN！<br>
こだわりの無添加バンズと厳選オーガニック野菜を使用し、シンプルながら奥深い味わいを追求。
</p>
<h4>Target</h4>
<p> ヘルシー志向 & 美味しさを両立したい人たちへ</p>
<ul>
<li>オーガニックや無添加食品にこだわる人</li>
<li>ヘルシーな食事を求める女性・健康志向のビジネスマン</li>
<li>新しい食体験を楽しみたいフードトレンド好きな人</li>
</ul>
</div>
<div class="works__link">
<a href="un/index.html" class="bt_prymary" target="_blank">サイトを見る</a>
</div>
</div>
</div>
<div class="works_un row mb-5">
<div class="col-12 col-md-6 mb-4 order-1 order-md-2">
<img src="https://dummy.kobeya.com/?width=500&height=300&bg=fdcece&color=000000&text=No%20image"
alt="No image（500×300）" class="img-fluid">
</div>
<div class="col-12 col-md-6 order-2 order-md-1">
<div class="concept mb-3">
<h3>KOBE MODE - Wire frame</h3>
<h4>Concept</h4>
<p class="mb-4">
スマートフォン専用のネットショッピングサイトのワイヤーフレーム。ヘッダー・フッターはプロトタイプ
</p>
<h4>Target</h4>
<ul>
<li>スマホユーザーの快適な操作と導線を提供</li>
<li>20代から30代の女性ユーザー</li>
<li>コンバージョンでの信頼性</li>
</ul>
</div>
<div class="works__link">
<a href="#" class="bt_prymary">サイトを見る</a>
</div>
</div>
</div>
</div>
</section>
<section id="works_banner" class="works">
<div class="section_title">
<h2 class="works__title">Works</h2>
<p>Banner</p>
</div>
<section>
<h3 class="sub_title">Photoshop Banner</h3>
<div class="container">
<ul class="works_banner__list row">
<li class="col-12 col-md-4">
<figure class="works_banner__item text-center p-3 p-lg-5">
<img src="https://dummy.kobeya.com/?width=600&height=500&bg=cde2f9&color=000000&text=BannerImage"
alt="Banner image" class="img-fluid">
</figure>
</li>
<li class="col-12 col-md-4">
<figure class="works_banner__item text-center p-3 p-lg-5">
<img src="https://dummy.kobeya.com/?width=600&height=500&bg=cde2f9&color=000000&text=BannerImage"
alt="Banner image" class="img-fluid">
</figure>
</li>
<li class="col-12 col-md-4">
<figure class="works_banner__item text-center p-3 p-lg-5">
<img src="https://dummy.kobeya.com/?width=600&height=500&bg=cde2f9&color=000000&text=BannerImage"
alt="Banner image" class="img-fluid">
</figure>
</li>
</ul>
</div>
<div class="container">
<ul class="row">
<li class="col-12 col-md-4">
<figure class="works_banner__item text-center p-3 p-lg-5">
<img src="https://dummy.kobeya.com/?width=600&height=500&bg=cde2f9&color=000000&text=BannerImage"
alt="Banner image" class="img-fluid">
</figure>
</li>
<li class="col-12 col-md-4">
<figure class="works_banner__item text-center p-3 p-lg-5">
<img src="https://dummy.kobeya.com/?width=600&height=500&bg=cde2f9&color=000000&text=BannerImage"
alt="Banner image" class="img-fluid">
</figure>
</li>
<li class="col-12 col-md-4">
<figure class="works_banner__item text-center p-3 p-lg-5">
<img src="https://dummy.kobeya.com/?width=600&height=500&bg=cde2f9&color=000000&text=BannerImage"
alt="Banner image" class="img-fluid">
</figure>
</li>
</ul>
</div>
</section>
<section id="skills" class="skills container-fluid">
<div class="skills__container container">
<div class="section_title">
<h2 class="skills__title">Skills</h2>
</div>
<ul class="row">
<li class="col-3">
<figure class="text-center p-3 p-lg-5">
<img src="https://dummy.kobeya.com/?width=100&height=100&bg=cdf9d8&color=000000&text=No%20image"
alt="Icons" class="img-fluid">
</figure>
</li>
<li class="col-3">
<figure class="text-center p-3 p-lg-5">
<img src="https://dummy.kobeya.com/?width=100&height=100&bg=cdf9d8&color=000000&text=No%20image"
alt="Icons" class="img-fluid">
</figure>
</li>
<li class="col-3">
<figure class="text-center p-3 p-lg-5">
<img src="https://dummy.kobeya.com/?width=100&height=100&bg=cdf9d8&color=000000&text=No%20image"
alt="Icons" class="img-fluid">
</figure>
</li>
<li class="col-3">
<figure class="text-center p-3 p-lg-5">
<img src="https://dummy.kobeya.com/?width=100&height=100&bg=cdf9d8&color=000000&text=No%20image"
alt="Icons" class="img-fluid">
</figure>
</li>
<li class="col-3">
<figure class="text-center p-3 p-lg-5">
<img src="https://dummy.kobeya.com/?width=100&height=100&bg=cdf9d8&color=000000&text=No%20image"
alt="Icons" class="img-fluid">
</figure>
</li>
<li class="col-3">
<figure class="text-center p-3 p-lg-5">
<img src="https://dummy.kobeya.com/?width=100&height=100&bg=cdf9d8&color=000000&text=No%20image"
alt="Icons" class="img-fluid">
</figure>
</li>
<li class="col-3">
<figure class="text-center p-3 p-lg-5">
<img src="https://dummy.kobeya.com/?width=100&height=100&bg=cdf9d8&color=000000&text=No%20image"
alt="Icons" class="img-fluid">
</figure>
</li>
</ul>
</div>
</section>
<section id="profile" class="profile container">
<div class="section_title">
<h2 class="__title">Profile</h2>
</div>
<figure class="text-center">
<figcaption class="">
<img src="https://dummy.kobeya.com/?width=300&height=300&bg=ffe5ad&color=000000&text=Profile"
alt="Profile">
<figcaption>Y N</figcaption>
</figcaption>
<p>フルスタックエンジニア 講師</p>
<p>フロントエンド・バックエンドを行き来しながら<br class="sp">Web開発をしています。</p>
<p>使いやすく、美しいサイトをつくるのが好きです。</p>
<p>気づいたら部屋が観葉植物だらけに。<br class="sp">ジャングル化計画進行中。</p>
</figure>
</section>
<footer class="footer">
<div class="back_to_top">
<a href="#top">Top</a>
</div>
<div class="footer__container">
<nav class="footer__nav">
<ul class="footer__list">
<li class="header__list-item"><a href="index.html" class="header__link">Home</a></li>
<li class="header__list-item"><a href="#works_lp" class="header__link">LP</a></li>
<li class="header__list-item"><a href="#works_photo" class="header__link">Banner</a></li>
<li class="header__list-item"><a href="#skills" class="header__link">Skills</a></li>
<li class="header__list-item"><a href="#profile" class="header__link">Profile</a></li>
<li class="header__list-item"><a href="#contact" class="header__link">Contact</a></li>
</ul>
</nav>
<p class="footer__copyright text-center mt-md-3">
<small>© 2025 Espresso Lane. All rights reserved.
</small>
</p>
</div>
</footer>
</body>
</html>
CSSサンプルコード cssフォルダに style.css ファイルを作成し、コードを模写しながら設定してみましょう
:root {
/* ベースカラー */
--base-color: #ffffff;
--main-color: #296A65;
--accent-color: #2FAC9E;
--text-color: #2a2a2a;
--white: #ffffff;
--black: #303030;
--light-gray: #e8e8e8;
--dark-gray: #838383;
}
/* HTMLのデフォルト設定 */
html {
font-size: 100%;
box-sizing: border-box;
scroll-behavior: smooth;
}
*,
*::before,
*::after {
box-sizing: inherit;
/* 全ての要素と擬似要素に適用 */
margin: 0;
padding: 0;
}
/* Figma用 */
iframe {
max-width: 100%;
}
/* 基本スタイル */
html body {
font-family: "Zen Maru Gothic", serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
line-height: 1.7;
color: var(--text-color);
background-color: var(--base-color);
word-break: break-word;
overflow-x: hidden;
}
/* メディアクエリ：768px以上の画面向け */
@media (max-width: 768px) {
body {
font-size: 14px;
line-height: 1.5;
}
}
/* リンクの基本スタイル */
a:link {
color: var(--main-color);
text-decoration: none;
}
a:hover {
color: var(--accent-color);
text-decoration: underline;
}
a:visited {
color: var(--main-color);
}
a:active,
a:focus {
color: var(--main-color);
outline: 2px dashed var(--accent-color);
outline-offset: 2px;
}
/* 見出しの設定 */
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: bold;
line-height: 1.2;
}
/* リストのスタイルリセット */
ul,
ol,
figure {
list-style: none;
padding: 0;
margin: 0;
}
p {
margin-bottom: 0;
}
/* header */
.header__top {
padding: 1rem 0;
display: flex;
justify-content: space-between;
align-items: center;
}
@media (max-width:768px) {
.header__top {
flex-direction: column;
}
}
.header [class*="__list"],
.footer [class*="__list"] {
display: flex;
column-gap: 2rem;
justify-content: center;
margin-bottom: 0;
}
@media (max-width:768px) {
.footer [class*="__list"] {
display: none;
}
}
/* KV */
.kv {
background-image: url('../images/kv_pc.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
height: 60vh;
}
/* 768px以下でSP用画像に切り替え */
@media (max-width: 767px) {
.kv {
height: 60vh;
background-image: url('../images/kv_sp.jpg');
}
}
.kv_content {
margin-top: -100px;
padding: 0 1rem;
}
/* セクション */
section {
padding: 3rem 0;
}
section section {
padding: 0rem 0 2rem;
}
@media (max-width: 768px) {
section {
padding: 2rem 0;
}
}
/* タイトルスタイル */
.section_title {
font-family: "Poiret One", sans-serif;
font-weight: 700;
font-style: normal;
text-align: center;
margin-bottom: 3rem;
margin-top: 1rem;
position: relative;
height: 5rem;
width: 100%;
}
.section_title h2[class*="__title"] {
font-size: 3rem;
color: var(--main-color);
text-decoration: underline;
/* 文字に直接下線を追加 */
text-decoration-color: var(--accent-color);
/* 下線の色を指定 */
text-decoration-thickness: 4px;
/* 下線の太さ */
text-underline-offset: 0.7rem;
/* 下線と文字の間に余白 */
padding-bottom: 0.5rem;
/* 下線とテキストの間の余白 */
letter-spacing: 0.05em;
/* 読みやすさ向上 */
position: absolute;
left: 50%;
top: 50%;
/* 縦方向の中央配置 */
transform: translate(-50%, -50%);
/* 水平・垂直方向に中央揃え */
}
.section_title p {
font-size: 5rem;
color: #2fac9e2a;
position: absolute;
left: 50%;
top: 0%;
transform: translate(-50%, -50%);
white-space: nowrap;
/* 強制的に改行を防ぐ */
}
/* タイトルのレスポンシブ対応 */
@media (max-width: 768px) {
section [class*="__title"] {
font-size: 1.5rem;
}
}
.sub_title {
font-size: 2rem;
text-align: center;
margin-bottom: 2rem;
font-family: "Poiret One", sans-serif;
font-weight: 400;
font-style: normal;
}
/* works 背景と位置*/
.works_lp {
padding: 10rem 0 5rem;
background: linear-gradient(180deg, #ffffff, #d8ffea, #ffffff, #fdfbda);
}
.works {
padding: 8rem 0 3rem;
background: linear-gradient(0deg, #FFFFFF, #ccffe4, #ffffff, #fdfbda);
}
.skills,
.profile,
.contact {
padding: 8rem 0 3rem;
}
@media (max-width: 768px) {
.works_lp,
.works,
.skills,
.profile,
.contact {
padding: 3rem 0 3rem;
}
}
.works_banner__item {
padding: 1rem;
box-shadow: 2px 2px 3px #b8b8b85a;
}
/* works concept */
.concept {
position: relative;
padding: 0rem 1rem;
}
.concept h3,
.concept h4 {
font-family: "Zen Maru Gothic", serif;
font-weight: 700;
font-style: normal;
color: var(--main-color);
}
.concept ul {
list-style: circle;
list-style-position: inside;
}
.works__link a {
display: block;
padding: 0.75rem 0;
text-align: center;
background-color: var(--accent-color);
color: var(--white);
border-radius: 50vh;
width: 80%;
margin: auto;
text-decoration: none;
transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.works__link a:hover {
background-color: var(--main-color);
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
}
/* footer */
.footer {
background-color: var(--accent-color);
padding: 2rem 0;
color: var(--white);
position: relative;
}
.back_to_top {
position: fixed;
right: 1rem;
bottom: clamp(1rem, 5vw, 3rem);
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.back_to_top.visible {
opacity: 1;
transform: translateY(0);
}
.back_to_top a {
font-size: 1rem;
width: 45px;
line-height: 45px;
text-decoration: none;
background-color: var(--main-color);
text-align: center;
color: var(--white);
display: block;
transition: border-radius 0.3s ease-in-out;
position: relative;
animation: float 3s ease-in-out infinite;
border-radius: 50%;
}
@keyframes float {
0% {
transform: translateY(-20px);
}
50% {
transform: translateY(20px);
}
100% {
transform: translateY(-20px);
}
}
.footer a {
color: var(--white);
}
br.sp {
display: none;
}
@media (max-width:768px) {
br.sp {
display: block;
}
}
CSSサンプルコードの解説が以下になります。
CSSファイルとGoogle Fontsの読み込み
CSSファイルの読み込み
作成したCSSファイルはHTMLの<head>内に次のように記述して読み込みます：
<link rel="stylesheet" href="css/style.css">
複数のCSSファイルがある場合、読み込み順によってスタイルの優先順位が変わるため注意します。オリジナルのCSS（style.css)がHTMLに一番近い位置になるように配置します。
Google Fontsの使用
CSSで次のようにWebフォントを指定している場合は、パソコン内にその書体がないことを考慮して、Google FontsをHTMLに読み込む必要があります。
font-family: "Zen Maru Gothic", serif;
<link href="https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap" rel="stylesheet">
読み込み忘れがあると、意図したフォントが表示されませんので注意しましょう。
:root とリセットCSS
:root のカスタムプロパティ（CSS変数）
:root {
--main-color: #296A65;
--accent-color: #2FAC9E;
--text-color: #2a2a2a;
}
カラーコードなどを変数化することで、デザイン変更時にもメンテナンスがしやすくなります。
CSS変数とは？
CSS変数（カスタムプロパティ）は、CSS内で値を再利用するための機能です。
同じ色やサイズを何度も使いたい場合、変数として定義しておくと便利です。
:root {
--main-color: #296A65;
}
h1 {
color: var(--main-color);
}
a:hover {
background-color: var(--main-color);
}
上記のように、--main-colorという変数を一度だけ定義しておけば、
その後は var(--main-color) と書くだけで何度でも使えます。
リセットCSSの目的
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ブラウザごとに異なる余白やスタイルの初期設定（デフォルトスタイル）をリセットし、意図したデザインが崩れにくくなるようにします。
今回のコードではBootstrapを使っていますが、Bootstrapは normalize.css をベースに、さらに改良を加えた Reboot.css という独自のリセットスタイルを採用しています。
ただし、Rebootはあくまで「基本的な調整」に留まっているため、自分のデザインや目的に合わせて、オリジナルのリセットCSSを追加するのがおすすめです。
動画で学ぶWebデザイン教室 Fuku…
リセットCSSってなんですか？必要なの？モダンリセット最新版！ | 動画で学ぶWebデザイン教室 Fukuokamiy…
Webサイトを作っていると、ブラウザ間でスタイルの見た目がずれることがあります。このずれを解決するために用いられるのが「リセットCSS」です。今回は、リセットCSSの解…
基本スタイルの設定
全体のテキスト設定とレイアウトの基本
/* HTMLのデフォルト設定 */
html {
font-size: 100%;
box-sizing: border-box;
scroll-behavior: smooth;
}
font-size: 100%;
ブラウザのデフォルトの文字サイズ（多くの場合 16px）をそのまま使います。これにより、ユーザーの文字サイズ設定を尊重したデザインになります。box-sizing: border-box;
すべての要素のサイズ計算を「paddingやborderを含めたサイズ」で行うように変更します。
この設定をしておくと、要素の幅や高さを扱うときに計算がしやすく、レイアウトの崩れを防ぐことができます。scroll-behavior: smooth;
ページ内リンク（例：<a href="#top">Top</a>）をクリックしたとき、スクロールがスムーズに移動するように設定しています。
全体に適用される基本スタイル
/* 基本スタイル */
html body {
font-family: "Zen Maru Gothic", serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
line-height: 1.7;
color: var(--text-color);
background-color: var(--base-color);
word-break: break-word;
overflow-x: hidden;
}
font-familyは、Google Fontsで読み込んだ「Zen Maru Gothic」を使用。- ふんわりした丸ゴシック体で、やさしく親しみやすい印象になります。
font-size: 16px、line-height: 1.7により、読みやすい文字サイズと行間を設定。word-break: break-word;は、英単語などが長くてはみ出す場合に単語の途中で改行してくれる指定です。レスポンシブデザインでよく使います。overflow-x: hidden;によって、横スクロールが起こらないようにします。大きな画像や要素が画面外にはみ出した時にも、見切れるだけでスクロールバーが出なくなります。
メディアクエリでモバイル対応
@media (max-width: 768px) {
body {
font-size: 14px;
line-height: 1.5;
}
}
- 画面幅が 768px以下（主にスマホやタブレット） の場合に適用されるスタイルです。
- 文字サイズと行間を少し小さくすることで、スマホ画面でもバランスよく見えるように調整しています。
リンクのスタイル
/* リンクの基本スタイル */
a:link {
color: var(--main-color);
text-decoration: none;
}
a:hover {
color: var(--accent-color);
text-decoration: underline;
}
a:visited {
color: var(--main-color);
}
a:active,
a:focus {
color: var(--main-color);
outline: 2px dashed var(--accent-color);
outline-offset: 2px;
}
スタイル指定の順番に注意！
リンクの状態には以下の4つがあり、CSSで指定する順番にルールがあります。
:link（未訪問）:visited（訪問済み）:hover（マウスホバー時）:active（クリック時）
この順番は次のような覚え方があります：
LoVe HAte（ラブ・ヘイト） の順番で
:link → :visited → :hover → :active
この順番を守らないと、後に書いたスタイルが上書きされず、一部の状態が正しく反映されないことがあります。
今回のコードでは、:focus も加えていますが、これはキーボード操作用の視覚フィードバックで、アクセシビリティ向上のために含めています。
Bootstrapを使わないカスタムヘッダー
.header__top {
display: flex;
justify-content: space-between;
align-items: center;
}
画面幅が狭いときは、縦に並ぶようにメディアクエリで調整しています。
@media (max-width:768px) {
.header__top {
flex-direction: column;
}
}
セクションタイトルの装飾と位置
position の使い方
.section_title {
position: relative;
}
.section_title h2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
position の基本
CSSの position プロパティは要素の位置を自由に調整できる強力なツールです。
relativeは「基準をつくる」指定
→ この要素を基準に、子要素のabsoluteを配置できるようになります。absoluteは「基準に対して自由に配置する」指定
→top,left,right,bottomで位置指定できます。
中央揃えのテクニック（transform）
top: 50%・left: 50% だけでは、要素の左上が中央にくるため、完全な中央揃えにはなりません。
そこで、以下のコードで自分のサイズの半分だけずらすことで、ピッタリ中央に配置します。
transform: translate(-50%, -50%);
これで「自分の横幅・高さの50%」だけ左上にずらす＝見た目の中央揃えが完成します。
リンクボタンとコンセプトボックス
ボタンデザイン
.works__link a {
display: block;
background-color: var(--accent-color);
color: var(--white);
text-align: center;
border-radius: 50vh;
width: 80%;
margin: auto;
}
ホバー時の色やシャドウ変化も含め、視認性・操作性を意識した設計になっています。
コンセプトボックス
.concept {
padding: 0 1rem;
color: var(--text-color);
}
footerと戻るボタンのスタイル
ページ右下に表示される「Topに戻る」ボタンには、CSSだけで実装されたふわふわ浮かぶアニメーションが設定されています。JavaScriptなしで視覚的なアクセントを加える、ちょっとした工夫です。
アニメーション
まず、@keyframes でアニメーションの動きを定義します。
@keyframes float {
0% {
transform: translateY(-20px);
}
50% {
transform: translateY(20px);
}
100% {
transform: translateY(-20px);
}
}
translateY()はY軸（縦方向）の移動を意味します。- ここでは「上→下→上」と動くアニメーションが作られています。
- 数値は「どれだけ移動するか」の距離（px）です。
ボタンにアニメーションを適用
次に、上で定義したアニメーションを戻るボタンに適用します。
.back_to_top a {
animation: float 3s ease-in-out infinite;
}
floatは先ほど定義したアニメーション名。3sは1サイクルにかかる時間（ここでは3秒）。ease-in-outは動き始めと終わりがなめらかになるタイミング関数。infiniteは無限に繰り返す指定です。
最後の仕上げはJavaScript
HTML/CSSが出来上がってきました。次はJavaScriptを使ってローディング（画面を読み込んだ時の動き） ハンバーガーメニュー・スクロールイベントなどを行います。
この記事が気に入ったら
フォローしてね！