トップページのHTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GITの練習｜トップページ</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body class="top">
<header class="header">
<h1>My Portfolio</h1>
<p>Felica Study Site</p>
</header><!-- /.header -->
<nav class="gnav">
<ul>
<li><a href="#">Top</a></li>
<li><a href="../profile/">Profile</a></li>
<li><a href="../works/">Works</a></li>
<li><a href="../images/">Images</a></li>
</ul>
</nav><!-- /.gnav -->
</body>
</html>プロフィールページ（Profile）のHTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GITの練習｜プロフィールページ</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body class="profile">
<header class="header">
<h1>Profile Page</h1>
</header><!-- /.header -->
<nav class="gnav">
<ul>
<li><a href="../">Top</a></li>
<li><a href="#">Profile</a></li>
<li><a href="../works/">Works</a></li>
<li><a href="../images/">Images</a></li>
</ul>
</nav><!-- /.gnav -->
</body>
</html>CSS（ネスト）
@charset "utf-8";
/* GoogleFonts */
@import url('https://fonts.googleapis.com/css2?family=Cookie&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
img {
vertical-align: bottom;
max-width: 100%;
}
.header {
width: 100%;
height: 100vh;
background: url(../img/main.jpg) no-repeat center bottom;
background-size: cover;
padding-top: 260px;
text-align: center;
>h1 {
font-family: 'Cookie', cursive;
font-size: 120px;
color: #1d4709;
margin-bottom: 10px;
}
>p {
font-size: 24px;
letter-spacing: .1em;/* 文字間*/
}
}
/* プロファイルページ(profile)の h1 */
.profile {
.header>h1 {
color: #47093d;
}
}
/* 習作ページ(works)の h1 */
.works {
.header>h1 {
color: #092147;
}
}
/* バナーページ(images)の h1 */
.images {
.header>h1 {
color: #473d09;
}
}
.gnav {
width: 100%;
height: auto;
position: fixed;
height: 80px;
top: 0;
right: 0;
>ul {
width: 100%;
height: 80px;
display: flex;
justify-content: center;
>li{
height: 60px;
margin-bottom: 10px;
>a {
display: block;
padding: 0 30px;
text-align: center;
line-height: 80px;
font-size: 32px;
font-family: 'Cookie', cursive;
color: #1d4709;
&:hover {
color: #3c9912;
}
}
}
}
}
/* プロファイルページ(profile)のナビゲーション */
.profile{
>.gnav a {
color:#47093d;
&:hover {
color:#b01796;
}
}
}
/* 習作ページ(works)のナビゲーション */
.works{
>.gnav a {
color:#092147;
&:hover {
color:#1855b7;
}
}
}
/* バナーページ(images)のナビゲーション */
.images{
>.gnav a {
color:#473d09;
&:hover {
color:#978214;
}
}
}
